feat: draw.io editor dialog (wip)
This commit is contained in:
parent
89b5c5f90f
commit
c8608315e9
@ -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: {
|
||||
|
@ -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')
|
||||
|
120
client/components/editor/editor-modal-drawio.vue
Normal file
120
client/components/editor/editor-modal-drawio.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user