From 63534d3eb523f325a35dcae87740a6fb578baceb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A6=E8=8D=A3=E8=B6=85?= <302645122@qq.com>
Date: Sat, 12 Feb 2022 11:54:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=9B=BE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/components/Drawio.vue     | 217 ++++++++++++++++++
 .../pages/manage/components/FileContent.vue   |   5 +-
 2 files changed, 220 insertions(+), 2 deletions(-)
 create mode 100644 resources/assets/js/components/Drawio.vue

diff --git a/resources/assets/js/components/Drawio.vue b/resources/assets/js/components/Drawio.vue
new file mode 100644
index 00000000..fdfa5d5d
--- /dev/null
+++ b/resources/assets/js/components/Drawio.vue
@@ -0,0 +1,217 @@
+<template>
+    <div class="flow-content">
+        <iframe ref="myFlow" class="flow-iframe" :src="url"></iframe>
+        <div v-if="loadIng" class="flow-loading"><Loading/></div>
+        <div v-if="readOnly && zoom > 0" class="zoom-box" :class="{'zoom-ing': zoomIng}">
+            <div class="zoom-svg">
+                <svg t="1600613502044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1161" width="18" height="18"><path d="M598.646154 401.723077H279.630769c-15.753846 0-27.569231 11.815385-27.569231 31.507692 0 15.753846 11.815385 27.569231 31.507693 27.569231h319.015384c15.753846 0 27.569231-11.815385 27.569231-31.507692 0-15.753846-15.753846-27.569231-31.507692-27.569231z" fill="#666666" p-id="1162"></path><path d="M921.6 850.707692l-204.8-196.923077c47.261538-59.076923 78.769231-137.846154 78.769231-220.553846 0-196.923077-157.538462-354.461538-354.461539-354.461538s-354.461538 157.538462-354.461538 354.461538 157.538462 354.461538 354.461538 354.461539c90.584615 0 173.292308-35.446154 236.307693-90.584616l204.8 196.923077c3.938462 3.938462 11.815385 7.876923 19.692307 7.876923s15.753846-3.938462 19.692308-7.876923c11.815385-15.753846 11.815385-35.446154 0-43.323077z m-484.430769-126.030769c-161.476923 0-295.384615-133.907692-295.384616-295.384615S275.692308 133.907692 437.169231 133.907692s295.384615 133.907692 295.384615 295.384616-129.969231 295.384615-295.384615 295.384615z" fill="#666666" p-id="1163"></path></svg>
+                <svg t="1600613514136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1403" width="18" height="18"><path d="M929.476923 854.646154l-212.676923-200.861539c47.261538-59.076923 78.769231-137.846154 78.769231-220.553846 0-196.923077-157.538462-354.461538-354.461539-354.461538s-354.461538 157.538462-354.461538 354.461538 157.538462 354.461538 354.461538 354.461539c90.584615 0 173.292308-35.446154 236.307693-90.584616l212.676923 200.861539c3.938462 3.938462 11.815385 7.876923 19.692307 7.876923s15.753846-3.938462 19.692308-7.876923c11.815385-11.815385 11.815385-31.507692 0-43.323077z m-488.369231-126.030769c-161.476923 0-295.384615-133.907692-295.384615-295.384616s133.907692-295.384615 295.384615-295.384615 295.384615 133.907692 295.384616 295.384615-133.907692 295.384615-295.384616 295.384616z" fill="#666666" p-id="1404"></path><path d="M598.646154 401.723077h-129.969231V271.753846c0-15.753846-11.815385-31.507692-31.507692-31.507692s-31.507692 11.815385-31.507693 31.507692v129.969231H279.630769c-15.753846 0-31.507692 11.815385-31.507692 31.507692s11.815385 31.507692 31.507692 31.507693h129.969231V590.769231c0 15.753846 11.815385 31.507692 31.507692 31.507692s31.507692-11.815385 31.507693-31.507692v-129.969231h129.96923c15.753846 0 31.507692-11.815385 31.507693-31.507692s-15.753846-27.569231-35.446154-27.569231z" fill="#666666" p-id="1405"></path></svg>
+            </div>
+            <Slider class="zoom-slider" v-model="zoom" :min="1" :max="300" :tip-format="formatZoom" @on-change="zoomIng=false" @on-input="zoomIng=true"></Slider>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.flow-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    .flow-iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: 0 0;
+        border: 0;
+        float: none;
+        margin: -1px 0 0;
+        max-width: none;
+        outline: 0;
+        padding: 0;
+    }
+    .flow-loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .zoom-box {
+        position: absolute;
+        left: 20px;
+        bottom: 20px;
+        height: 34px;
+        max-width: 50%;
+        border-radius: 3px;
+        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+        background-color: #fff;
+        color: #666;
+        z-index: 10;
+        padding: 0 6px;
+        .zoom-svg {
+            height: 34px;
+            display: flex;
+            align-items: center;
+            .icon {
+                margin: 0 6px;
+            }
+        }
+        .zoom-slider {
+            display: none;
+            padding: 0 10px;
+            width: 300px;
+            max-width: 100%;
+        }
+        &:hover,
+        &.zoom-ing {
+            .zoom-svg {
+                display: none;
+            }
+            .zoom-slider {
+                display: inline-block;
+            }
+        }
+    }
+}
+</style>
+<script>
+import JSPDF from "jspdf";
+import {mapState} from "vuex";
+
+export default {
+    name: "Drawio",
+    props: {
+        value: {
+            type: Object,
+            default: function () {
+                return {}
+            }
+        },
+        readOnly: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            loadIng: true,
+
+            url: null,
+
+            zoom: -1,
+            zoomIng: false,
+
+            bakData: '',
+        }
+    },
+    created() {
+        let language = 'en';
+        switch (this.getLanguage()) {
+            case 'CN':
+            case 'TC':
+                language = 'zh'
+                break;
+        }
+        let route = this.readOnly ? 'viewer' : 'index';
+        let theme = this.themeIsDark ? 'dark' : 'light'
+        this.url = $A.originUrl('js/drawio/' + route + '.html?lang=' + language + '&theme=' + theme + '&dev=1');
+        console.log('this.url',this.url);
+    },
+    mounted() {
+        window.addEventListener('message', this.handleMessage)
+    },
+    beforeDestroy() {
+        window.removeEventListener('message', this.handleMessage)
+    },
+    watch: {
+        value: {
+            handler(val) {
+                if (this.bakData == $A.jsonStringify(val)) {
+                    return;
+                }
+                this.bakData = $A.jsonStringify(val);
+                this.updateContent();
+            },
+            deep: true
+        },
+        zoom(val) {
+            this.$refs.myFlow.contentWindow.postMessage({
+                act: 'zoom',
+                params: {
+                    zoom: val / 100
+                }
+            }, '*')
+        }
+    },
+    computed: {
+        ...mapState(['themeIsDark'])
+    },
+    methods: {
+        formatZoom(val) {
+            return val + '%';
+        },
+
+        updateContent() {
+            this.zoom = Math.max(1, (typeof this.value.scale === "number" ? this.value.scale : 1) * 100)
+            this.$refs.myFlow.contentWindow.postMessage({
+                act: 'setXml',
+                params: Object.assign(this.value, typeof this.value.xml === "undefined" ? {
+                    xml: this.value.content
+                } : {})
+            }, '*')
+        },
+
+        handleMessage (event) {
+            const data = event.data;
+            switch (data.act) {
+                case 'ready':
+                    this.loadIng = false;
+                    this.updateContent();
+                    break
+
+                case 'change':
+                    this.bakData = $A.jsonStringify(data.params);
+                    this.$emit('input', data.params);
+                    break
+
+                case 'save':
+                    this.$emit('saveData');
+                    break
+
+                case 'imageContent':
+                    let pdf = new JSPDF({
+                        format: [data.params.width, data.params.height]
+                    });
+                    pdf.addImage(data.params.content, 'PNG', 0, 0, 0, 0);
+                    pdf.save(`${data.params.name}.pdf`);
+                    break
+            }
+        },
+
+        exportPNG(name, scale = 10) {
+            this.$refs.myFlow.contentWindow.postMessage({
+                act: 'exportPNG',
+                params: {
+                    name: name || this.$L('无标题'),
+                    scale: scale,
+                    type: 'png',
+                }
+            }, '*')
+        },
+
+        exportPDF(name, scale = 10) {
+            this.$refs.myFlow.contentWindow.postMessage({
+                act: 'exportPNG',
+                params: {
+                    name: name || this.$L('无标题'),
+                    scale: scale,
+                    type: 'imageContent',
+                }
+            }, '*')
+        }
+    },
+}
+</script>
diff --git a/resources/assets/js/pages/manage/components/FileContent.vue b/resources/assets/js/pages/manage/components/FileContent.vue
index 61838570..0170f1bb 100644
--- a/resources/assets/js/pages/manage/components/FileContent.vue
+++ b/resources/assets/js/pages/manage/components/FileContent.vue
@@ -50,7 +50,7 @@
                     <MDEditor v-if="contentDetail.type=='md'" v-model="contentDetail.content" height="100%"/>
                     <TEditor v-else v-model="contentDetail.content" height="100%" @editorSave="handleClick('saveBefore')"/>
                 </template>
-                <Flow v-else-if="file.type=='flow'" ref="myFlow" v-model="contentDetail" @saveData="handleClick('saveBefore')"/>
+                <Drawio v-else-if="file.type=='flow'" ref="myFlow" v-model="contentDetail" @saveData="handleClick('saveBefore')"/>
                 <Minder v-else-if="file.type=='mind'" ref="myMind" v-model="contentDetail" @saveData="handleClick('saveBefore')"/>
                 <OnlyOffice v-else-if="['word', 'excel', 'ppt'].includes(file.type)" v-model="contentDetail" :documentKey="documentKey"/>
                 <AceEditor v-else-if="['code', 'txt'].includes(file.type)" v-model="contentDetail.content" :ext="file.ext" @saveData="handleClick('saveBefore')"/>
@@ -71,10 +71,11 @@ const TEditor = () => import('../../../components/TEditor');
 const Flow = () => import('../../../components/Flow');
 const AceEditor = () => import('../../../components/AceEditor');
 const OnlyOffice = () => import('../../../components/OnlyOffice');
+const Drawio = () => import('../../../components/Drawio');
 
 export default {
     name: "FileContent",
-    components: {AceEditor, TEditor, MDEditor, Flow, OnlyOffice},
+    components: {AceEditor, TEditor, MDEditor, Flow, OnlyOffice,Drawio},
     props: {
         value: {
             type: Boolean,