新增自动预览功能

hookehuyr
Commit eff42031073ee7e96a08bb0dc56ecf8ff828375a eff42031 1 parent babce180
Showing 5 changed files with 215 additions and 1 deletions
doc/App.vue
src/editor/index.ts
src/editor/vue-flow-editor-preview1.vue
src/editor/vue-flow-editor.scss
src/editor/vue-flow-editor.tsx
--- a/doc/App.vue
View file @eff4203
+++ b/doc/App.vue
View file @eff4203
@@ -654,6 +654,7 @@ export default {
       const params = {
         flow_id: '',
         form_id: '',
+        type: '',
       };
       // 将url以问号为分隔符拆分为两部分
       const parts = url.split("?");
@@ -757,9 +758,50 @@ export default {
     }
     let flow_id = getFlowId(); // flow_id 流程ID
+
+    /**
+     * 自动预览
+     */
+    const autoPreview = async () => {
+      if (urlQuery.type === 'preview') {
+        flowData.value = null;
+        const urlQuery = getQueryParams(location.href);
+        let flow_id = urlQuery.flow_id? urlQuery.flow_id : ''; // 表单id
+        const { code, data } = await flowNodesAPI({ flow_id });
+        if (code) {
+          state.reloadLoading = false;
+          let { nodes, edges } = data;
+          nodes = nodes.map((node: any) => {
+            node.text = node.text.slice(0, 8);
+            return node;
+          });
+          // 没有流程图数据
+          if (!nodes.length && !edges.length) {
+            flowData.value = AppData; // 设置默认的数据
+          } else {
+            flowData.value = { nodes, edges }; // 获取已存在的数据
+
+            // 内部刷新graph数据
+            nextTick(() => {
+              editor.editorState.graph.read(flowData.value)
+            });
+          }
+        }
+        // 内部刷新graph数据
+        nextTick(() => {
+          editor.openPreview1();
+        });
+      }
+    }
+
+    if (urlQuery.type === 'preview') {
+      autoPreview()
+    } else {
       if (flow_id) {
         getFlowData(flow_id);
       }
+    }
+
     /************************ 页面操作超时 ****************************/
     // TAG: 页面操作超时
@@ -1333,6 +1375,7 @@ export default {
       clearStates(arg0: any): () => void
       openModel: () => void
       closeModel: () => void
+      openPreview1: () => void
       addNode: (arg0: any) => void
       updateModel: (arg0: any) => void
       editorState: {
@@ -2407,7 +2450,7 @@ body {
 .help-tip {
   position: absolute;
-  z-index: 999;
+  z-index: 9;
   top: 70px;
   color: #009688 !important;
   &:hover {
--- a/src/editor/index.ts
View file @eff4203
+++ b/src/editor/index.ts
View file @eff4203
+/*
+ * @Date: 2023-10-27 09:29:59
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-12-18 15:00:56
+ * @FilePath: /vue-flow-editor/src/editor/index.ts
+ * @Description: 文件描述
+ */
 import './iconfont'
 import canvas from './vue-flow-editor-canvas'
@@ -7,6 +14,7 @@ import toolbar from './vue-flow-editor-toolbar'
 import editMenu from './vue-flow-edit-menu.vue'
 import editMenuGroup from './vue-flow-edit-menu-group.vue'
 import preview from './vue-flow-editor-preview.vue'
+import preview1 from './vue-flow-editor-preview1.vue'
 export const EditorComponent = [
     canvas,
@@ -16,4 +24,5 @@ export const EditorComponent = [
     editMenu,
     editMenuGroup,
     preview,
+    preview1,
 ]
--- a/src/editor/vue-flow-editor-preview1.vue 0 → 100644
View file @eff4203
+++ b/src/editor/vue-flow-editor-preview1.vue 0 → 100644
View file @eff4203
+<!--
+ * @Date: 2023-12-18 15:01:00
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-12-18 15:09:35
+ * @FilePath: /vue-flow-editor/src/editor/vue-flow-editor-preview1.vue
+ * @Description: 文件描述
+-->
+<template>
+    <transition name="vue-flow-editor-preview-transition">
+        <div class="vue-flow-editor-preview1" v-if="p_value">
+            <div class="vue-flow-editor-preview-body" ref="body">
+                <div class="vue-flow-editor-preview-target" ref="target"></div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+
+    import {G6} from "@/g6/g6";
+    import {GraphStyle} from "../utils/styles";
+
+    export default {
+        name: "vue-flow-editor-preview1",
+        props: {
+            value: {type: Boolean},
+            data: {type: Object},
+        },
+        watch: {
+            value(val) {
+                this.p_value = val
+                if (!!val) {
+                    this.$nextTick(() => {
+                        this.refresh()
+                    })
+                }
+            },
+        },
+        data() {
+            return {
+                graph: null,
+                p_value: this.value,
+            }
+        },
+        methods: {
+            refresh() {
+                const container = this.$refs.target
+                const {offsetHeight, offsetWidth} = this.$refs.body
+
+                if (!!this.graph) {
+                    this.graph.destroy()
+                }
+                this.graph = new G6.Graph({
+                    container,
+                    width: offsetWidth,
+                    height: offsetHeight,
+
+                    ...GraphStyle.default,
+                    mode: {
+                        default: [
+                            'drag-canvas',
+                            'zoom-canvas',
+                        ]
+                    },
+                })
+
+                this.graph.read(this.data)
+                this.graph.fitView(20)
+            },
+            close() {
+                this.p_value = false
+                this.$emit('input', this.p_value)
+            },
+        },
+    }
+</script>
+
+<style lang="scss">
+</style>
--- a/src/editor/vue-flow-editor.scss
View file @eff4203
+++ b/src/editor/vue-flow-editor.scss
View file @eff4203
@@ -350,4 +350,81 @@ $transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
       }
     }
   }
+  .vue-flow-editor-preview1 {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: $transition;
+    transition-duration: 500ms;
+    user-select: none;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      content: '';
+      // background-color: rgba(black, 0.1);
+      background-color: #fff;
+      transition: $transition;
+      transition-duration: 500ms;
+    }
+
+    .vue-flow-editor-preview-body {
+      width: 80%;
+      height: 80%;
+      background-color: white;
+      border-radius: 12px;
+      position: relative;
+      z-index: 1;
+      transition: $transition;
+      transition-duration: 500ms;
+
+      .vue-flow-editor-preview-close {
+        position: absolute;
+        top: -20px;
+        right: -20px;
+        font-size: 20px;
+        background-color: white;
+        height: 40px;
+        width: 40px;
+        border-radius: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: $boxshadow;
+        border: 1px solid #eee;
+        color: #999;
+        cursor: pointer;
+      }
+    }
+
+    &.vue-flow-editor-preview-transition-enter-active, &.vue-flow-editor-preview-transition-leave-active {
+      .vue-flow-editor-preview-body {
+        transform: translateX(0);
+      }
+
+      &:before {
+        opacity: 1;
+      }
+    }
+
+    &.vue-flow-editor-preview-transition-enter, &.vue-flow-editor-preview-transition-leave-to {
+      .vue-flow-editor-preview-body {
+        transform: translateY(-15%);
+        opacity: 0;
+      }
+
+      &:before {
+        opacity: 0;
+      }
+    }
+  }
 }
--- a/src/editor/vue-flow-editor.tsx
View file @eff4203
+++ b/src/editor/vue-flow-editor.tsx
View file @eff4203
@@ -48,6 +48,7 @@ export default {
             canvasKey: 0,                                               // canvas组件的key，以刷新canvas组件
             showModel: false,                                           // 详情对话框是否显示
             showPreview: false,                                         // 预览对话框显示
+            showPreview1: false,                                         // 预览对话框显示
             data: null,
             refreshCanvas: () => {                                      // 刷新canvas组件
                 editorState.canvasKey++
@@ -109,6 +110,10 @@ export default {
                 editorState.data = editorState.graph.save()
                 editorState.showPreview = true
             },
+            openPreview1: () => {
+                editorState.data = editorState.graph.save()
+                editorState.showPreview1 = true
+            },
             read: (data) => {
                 if (!!editorState.graph) {
                     editorState.graph.read(data)
@@ -172,6 +177,7 @@ export default {
                 </transition>
                 <vue-flow-editor-preview value={editorState.showPreview} onInput={val => editorState.showPreview = val} data={editorState.data}/>
+                <vue-flow-editor-preview1 value={editorState.showPreview1} onInput={val => editorState.showPreview1 = val} data={editorState.data}/>
             </div>
         )
     },