Showing
2 changed files
with
46 additions
and
48 deletions
| ... | @@ -501,7 +501,6 @@ | ... | @@ -501,7 +501,6 @@ |
| 501 | </div> | 501 | </div> |
| 502 | <template #footer> | 502 | <template #footer> |
| 503 | <span class="dialog-footer"> | 503 | <span class="dialog-footer"> |
| 504 | - <!~~ <el-button @click="state.dialogPreviewVisible = false">取消</el-button> ~~> | ||
| 505 | <el-button color="#009688" @click="state.dialogPreviewVisible = false">关闭</el-button> | 504 | <el-button color="#009688" @click="state.dialogPreviewVisible = false">关闭</el-button> |
| 506 | </span> | 505 | </span> |
| 507 | </template> | 506 | </template> |
| ... | @@ -821,7 +820,7 @@ export default { | ... | @@ -821,7 +820,7 @@ export default { |
| 821 | // 内部刷新graph数据 | 820 | // 内部刷新graph数据 |
| 822 | nextTick(() => { | 821 | nextTick(() => { |
| 823 | editor.editorState.graph.read(flowData.value) | 822 | editor.editorState.graph.read(flowData.value) |
| 824 | - editor1?.editorState.graph.read(rawFlowData.value) | 823 | + editor1?.editorState.graph?.read(rawFlowData.value) |
| 825 | }); | 824 | }); |
| 826 | } | 825 | } |
| 827 | 826 | ||
| ... | @@ -2324,7 +2323,7 @@ export default { | ... | @@ -2324,7 +2323,7 @@ export default { |
| 2324 | $('.preview-container').find('.g6-grid').parent().css('zIndex', '0'); | 2323 | $('.preview-container').find('.g6-grid').parent().css('zIndex', '0'); |
| 2325 | $('.preview-container').find('canvas').css('zIndex', '1').css('position', 'relative'); | 2324 | $('.preview-container').find('canvas').css('zIndex', '1').css('position', 'relative'); |
| 2326 | }) | 2325 | }) |
| 2327 | - }, 500); | 2326 | + }, 1000); |
| 2328 | } | 2327 | } |
| 2329 | 2328 | ||
| 2330 | /** | 2329 | /** |
| ... | @@ -2336,13 +2335,11 @@ export default { | ... | @@ -2336,13 +2335,11 @@ export default { |
| 2336 | console.warn('点击节点,如果预览状态,可以预览表单内容'); | 2335 | console.warn('点击节点,如果预览状态,可以预览表单内容'); |
| 2337 | 2336 | ||
| 2338 | const model = G6.Util.clone(e.item.get('model')); // 节点的基本属性 | 2337 | const model = G6.Util.clone(e.item.get('model')); // 节点的基本属性 |
| 2338 | + console.log("🚀 ~ file: App.vue:2338 ~ onClickNodePreview ~ model.id:", model.id); | ||
| 2339 | model.style = model.style || {} | 2339 | model.style = model.style || {} |
| 2340 | model.labelCfg = model.labelCfg || { style: {} } | 2340 | model.labelCfg = model.labelCfg || { style: {} } |
| 2341 | - | ||
| 2342 | model.data = model.data ? model.data : {}; | 2341 | model.data = model.data ? model.data : {}; |
| 2343 | 2342 | ||
| 2344 | - // state.detailModel = model; | ||
| 2345 | - console.warn(model); | ||
| 2346 | if (model.id === 'end-node' || model.id === 'start-node') { | 2343 | if (model.id === 'end-node' || model.id === 'start-node') { |
| 2347 | ElNotification.error('该节点无法预览'); | 2344 | ElNotification.error('该节点无法预览'); |
| 2348 | state.preview_form_url = null; | 2345 | state.preview_form_url = null; | ... | ... |
| ... | @@ -29,51 +29,52 @@ export default { | ... | @@ -29,51 +29,52 @@ export default { |
| 29 | editorState.graph.destroy() | 29 | editorState.graph.destroy() |
| 30 | } | 30 | } |
| 31 | const target = proxy.$refs.target as HTMLElement | 31 | const target = proxy.$refs.target as HTMLElement |
| 32 | - | 32 | + if (proxy.$refs.root) { |
| 33 | - const {offsetHeight: height, offsetWidth: width} = proxy.$refs.root as HTMLElement | 33 | + const {offsetHeight: height, offsetWidth: width} = proxy.$refs.root as HTMLElement |
| 34 | - | 34 | + |
| 35 | - const behaviors = useBehavior({ | 35 | + const behaviors = useBehavior({ |
| 36 | - multipleSelect: editorState.props.multipleSelect, | 36 | + multipleSelect: editorState.props.multipleSelect, |
| 37 | - dragEdge: { | 37 | + dragEdge: { |
| 38 | - disabled: editorState.props.disabledDragEdge, | 38 | + disabled: editorState.props.disabledDragEdge, |
| 39 | - beforeAdd: editorState.props.beforeAdd, | 39 | + beforeAdd: editorState.props.beforeAdd, |
| 40 | - afterAdd: editorState.props.afterAdd, | 40 | + afterAdd: editorState.props.afterAdd, |
| 41 | + } | ||
| 42 | + }) | ||
| 43 | + | ||
| 44 | + const graph = new G6.Graph({ | ||
| 45 | + container: target as HTMLElement, | ||
| 46 | + width, | ||
| 47 | + height, | ||
| 48 | + | ||
| 49 | + modes: { | ||
| 50 | + edit: [ | ||
| 51 | + ...behaviors, | ||
| 52 | + ], | ||
| 53 | + }, | ||
| 54 | + | ||
| 55 | + ...GraphStyle.default, | ||
| 56 | + }) | ||
| 57 | + | ||
| 58 | + | ||
| 59 | + const $read = graph.read | ||
| 60 | + graph.read = (data) => { | ||
| 61 | + let {nodes, edges} = data || {} | ||
| 62 | + nodes = nodes || [] | ||
| 63 | + edges = edges || [] | ||
| 64 | + // TAG: 自定义节点 更新Model | ||
| 65 | + nodes.forEach(node => formatNodeModel(node, editorProps.activityConfig)) | ||
| 66 | + nodes.forEach(node => formatNodeModel_control(node, editorProps.controlConfig)) | ||
| 67 | + | ||
| 68 | + data = {nodes, edges} | ||
| 69 | + | ||
| 70 | + $read.apply(graph, [data]) | ||
| 41 | } | 71 | } |
| 42 | - }) | ||
| 43 | - | ||
| 44 | - const graph = new G6.Graph({ | ||
| 45 | - container: target as HTMLElement, | ||
| 46 | - width, | ||
| 47 | - height, | ||
| 48 | - | ||
| 49 | - modes: { | ||
| 50 | - edit: [ | ||
| 51 | - ...behaviors, | ||
| 52 | - ], | ||
| 53 | - }, | ||
| 54 | - | ||
| 55 | - ...GraphStyle.default, | ||
| 56 | - }) | ||
| 57 | 72 | ||
| 58 | - | 73 | + graph.setMode('edit') |
| 59 | - const $read = graph.read | 74 | + graph.read(props.data) |
| 60 | - graph.read = (data) => { | 75 | + useEditorPlugins(props, graph) |
| 61 | - let {nodes, edges} = data || {} | 76 | + editorState.setGraph(graph) |
| 62 | - nodes = nodes || [] | ||
| 63 | - edges = edges || [] | ||
| 64 | - // TAG: 自定义节点 更新Model | ||
| 65 | - nodes.forEach(node => formatNodeModel(node, editorProps.activityConfig)) | ||
| 66 | - nodes.forEach(node => formatNodeModel_control(node, editorProps.controlConfig)) | ||
| 67 | - | ||
| 68 | - data = {nodes, edges} | ||
| 69 | - | ||
| 70 | - $read.apply(graph, [data]) | ||
| 71 | } | 77 | } |
| 72 | - | ||
| 73 | - graph.setMode('edit') | ||
| 74 | - graph.read(props.data) | ||
| 75 | - useEditorPlugins(props, graph) | ||
| 76 | - editorState.setGraph(graph) | ||
| 77 | }) | 78 | }) |
| 78 | // const target = proxy.$refs.target as HTMLElement | 79 | // const target = proxy.$refs.target as HTMLElement |
| 79 | 80 | ... | ... |
-
Please register or login to post a comment