Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
eff42031 1 parent babce180

新增自动预览功能

Inline Side-by-side
Showing 5 changed files with 215 additions and 1 deletions
......@@ -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 {
......
/*
* @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,
]
......
<!--
* @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>
......@@ -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;
}
}
}
}
......
......@@ -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>
)
},
......