feat: edit existing diagram data

This commit is contained in:
NGPixel 2020-07-12 19:32:17 -04:00
parent f4502ccef7
commit 383dfd3010
2 changed files with 34 additions and 18 deletions

View File

@ -678,7 +678,13 @@ export default {
foundStart = line foundStart = line
} else if (ln.text === '```' && found) { } else if (ln.text === '```' && found) {
switch (found) { switch (found) {
// ------------------------------
// -> DIAGRAM
// ------------------------------
case 'diagram': { case 'diagram': {
if (line - foundStart !== 2) {
return
}
this.addMarker({ this.addMarker({
kind: 'diagram', kind: 'diagram',
from: { line: foundStart, ch: 3 }, from: { line: foundStart, ch: 3 },
@ -687,8 +693,17 @@ export default {
action: ((start, end) => { action: ((start, end) => {
return (ev) => { return (ev) => {
this.cm.doc.setSelection({ line: start, ch: 0 }, { line: end, ch: 3 }) this.cm.doc.setSelection({ line: start, ch: 0 }, { line: end, ch: 3 })
// this.$store.set('editor/activeModalData', ) try {
const raw = this.cm.doc.getLine(end - 1)
this.$store.set('editor/activeModalData', Buffer.from(raw, 'base64').toString())
this.toggleModal(`editorModalDrawio`) this.toggleModal(`editorModalDrawio`)
} catch (err) {
return this.$store.commit('showNotification', {
message: 'Failed to process diagram data.',
style: 'warning',
icon: 'warning'
})
}
} }
})(foundStart, line) })(foundStart, line)
}) })

View File

@ -10,21 +10,21 @@
<script> <script>
import { sync, get } from 'vuex-pathify' import { sync, get } from 'vuex-pathify'
const xmlTest = `<?xml version="1.0" encoding="UTF-8"?> // const xmlTest = `<?xml version="1.0" encoding="UTF-8"?>
<mxfile version="13.4.2"> // <mxfile version="13.4.2">
<diagram id="SgbkCjxR32CZT1FvBvkp" name="Page-1"> // <diagram id="SgbkCjxR32CZT1FvBvkp" name="Page-1">
<mxGraphModel dx="2062" dy="1123" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0"> // <mxGraphModel dx="2062" dy="1123" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root> // <root>
<mxCell id="0" /> // <mxCell id="0" />
<mxCell id="1" parent="0" /> // <mxCell id="1" parent="0" />
<mxCell id="5gE3BTvRYS_8FoJnOusC-1" value="" style="whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1"> // <mxCell id="5gE3BTvRYS_8FoJnOusC-1" value="" style="whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
<mxGeometry x="380" y="530" width="80" height="80" as="geometry" /> // <mxGeometry x="380" y="530" width="80" height="80" as="geometry" />
</mxCell> // </mxCell>
</root> // </root>
</mxGraphModel> // </mxGraphModel>
</diagram> // </diagram>
</mxfile> // </mxfile>
` // `
export default { export default {
data() { data() {
@ -60,9 +60,10 @@ export default {
action: 'load', action: 'load',
autosave: 0, autosave: 0,
modified: 'unsavedChanges', modified: 'unsavedChanges',
xml: xmlTest, xml: this.$store.get('editor/activeModalData'),
title: this.$store.get('page/title') title: this.$store.get('page/title')
}) })
this.$store.set('editor/activeModalData', null)
break break
} }
case 'save': { case 'save': {