feat: draw.io editor dialog (wip)

This commit is contained in:
NGPixel 2020-07-10 23:11:28 -04:00
parent 89b5c5f90f
commit c8608315e9
3 changed files with 123 additions and 2 deletions

View File

@ -84,7 +84,8 @@ export default {
editorModalUnsaved: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-unsaved.vue'),
editorModalMedia: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-media.vue'),
editorModalBlocks: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-blocks.vue'),
editorModalConflict: () => import(/* webpackChunkName: "editor-conflict", webpackMode: "lazy" */ './editor/editor-modal-conflict.vue')
editorModalConflict: () => import(/* webpackChunkName: "editor-conflict", webpackMode: "lazy" */ './editor/editor-modal-conflict.vue'),
editorModalDrawio: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-drawio.vue')
},
props: {
locale: {

View File

@ -139,7 +139,7 @@
span {{$t('editor:markup.insertVideoAudio')}}
v-tooltip(right, color='teal')
template(v-slot:activator='{ on }')
v-btn.mt-3.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, disabled).mx-0
v-btn.mt-3.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalDrawio`)').mx-0
v-icon mdi-chart-multiline
span {{$t('editor:markup.insertDiagram')}}
v-tooltip(right, color='teal')

View File

@ -0,0 +1,120 @@
<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>