121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<template lang='pug'>
|
|
v-card.editor-modal-drawio.animated.fadeIn(flat, tile)
|
|
iframe(
|
|
ref='drawio'
|
|
src='https://embed.diagrams.net/?embed=1&proto=json&spin=1&saveAndExit=0'
|
|
frameborder='0'
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import { sync, get } from 'vuex-pathify'
|
|
|
|
const xmlTest = `<?xml version="1.0" encoding="UTF-8"?>
|
|
<mxfile host="app.diagrams.net" modified="2020-07-10T23:41:09.492Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36 Edg/83.0.478.61" etag="nuFLQDTKlZwSpOz4sG5q" version="13.4.2">
|
|
<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">
|
|
<root>
|
|
<mxCell id="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">
|
|
<mxGeometry x="380" y="530" width="80" height="80" as="geometry" />
|
|
</mxCell>
|
|
</root>
|
|
</mxGraphModel>
|
|
</diagram>
|
|
</mxfile>
|
|
`
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
editorKey: get('editor/editorKey'),
|
|
activeModal: sync('editor/activeModal')
|
|
},
|
|
methods: {
|
|
close () {
|
|
this.activeModal = ''
|
|
},
|
|
overwriteAndClose() {
|
|
this.$root.$emit('overwriteEditorContent')
|
|
this.$root.$emit('resetEditorConflict')
|
|
this.close()
|
|
},
|
|
send (msg) {
|
|
this.$refs.drawio.contentWindow.postMessage(JSON.stringify(msg), '*')
|
|
},
|
|
receive (evt) {
|
|
if (evt.frame === null || evt.source !== this.$refs.drawio.contentWindow || evt.data.length < 1) {
|
|
return
|
|
}
|
|
try {
|
|
const msg = JSON.parse(evt.data)
|
|
switch (msg.event) {
|
|
case 'init': {
|
|
this.send({
|
|
action: 'load',
|
|
autosave: 0,
|
|
saveAndExit: '0',
|
|
modified: 'unsavedChanges',
|
|
xml: xmlTest,
|
|
title: this.$store.get('page/title')
|
|
})
|
|
break
|
|
}
|
|
case 'save': {
|
|
console.info(msg)
|
|
if (msg.exit) {
|
|
this.close()
|
|
} else {
|
|
this.send({
|
|
action: 'status',
|
|
messageKey: 'allChangesSaved',
|
|
modified: false
|
|
})
|
|
}
|
|
break
|
|
}
|
|
case 'exit': {
|
|
this.close()
|
|
break
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
},
|
|
async mounted () {
|
|
window.addEventListener('message', this.receive)
|
|
},
|
|
beforeDestroy () {
|
|
window.removeEventListener('message', this.receive)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
.editor-modal-drawio {
|
|
position: fixed !important;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: rgba(255,255,255, 1) !important;
|
|
overflow: hidden;
|
|
|
|
> iframe {
|
|
width: 100%;
|
|
height: 100vh;
|
|
border: 0;
|
|
padding: 0;
|
|
background-color: #FFF;
|
|
}
|
|
}
|
|
</style>
|