| 提交 | 用户 | age | ||
| e1bc33 | 1 | <template> |
| V | 2 | <div class="h-full" :class="prefixCls"> |
| 064901 | 3 | <FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" @view-data="handlePreview" /> |
| e1bc33 | 4 | <div ref="lfElRef" class="h-full"></div> |
| 064901 | 5 | <BasicModal @register="register" title="流程数据" width="50%"> |
| V | 6 | <JsonPreview :data="graphData" /> |
| 7 | </BasicModal> | |
| e1bc33 | 8 | </div> |
| V | 9 | </template> |
| bab28a | 10 | <script lang="ts" setup> |
| 9035fd | 11 | import type { Ref } from 'vue'; |
| e1bc33 | 12 | import type { Definition } from '@logicflow/core'; |
| bab28a | 13 | import { ref, onMounted, unref, nextTick, computed, watch } from 'vue'; |
| e1bc33 | 14 | import FlowChartToolbar from './FlowChartToolbar.vue'; |
| V | 15 | import LogicFlow from '@logicflow/core'; |
| fa828f | 16 | import { Snapshot, BpmnElement, Menu, DndPanel, SelectionSelect } from '@logicflow/extension'; |
| bab28a | 17 | import { useDesign } from '@/hooks/web/useDesign'; |
| X | 18 | import { useAppStore } from '@/store/modules/app'; |
| e1bc33 | 19 | import { createFlowChartContext } from './useFlowContext'; |
| V | 20 | import { toLogicFlowData } from './adpterForTurbo'; |
| bab28a | 21 | import { useModal, BasicModal } from '@/components/Modal'; |
| X | 22 | import { JsonPreview } from '@/components/CodeEditor'; |
| fa828f | 23 | import { configDefaultDndPanel } from './config'; |
| e1bc33 | 24 | import '@logicflow/core/dist/style/index.css'; |
| 064901 | 25 | import '@logicflow/extension/lib/style/index.css'; |
| fa828f | 26 | |
| bab28a | 27 | defineOptions({ name: 'FlowChart' }); |
| e1bc33 | 28 | |
| bab28a | 29 | const props = defineProps({ |
| X | 30 | flowOptions: { |
| 31 | type: Object as PropType<Definition>, | |
| 32 | default: () => ({}), | |
| e1bc33 | 33 | }, |
| V | 34 | |
| bab28a | 35 | data: { |
| X | 36 | type: Object as PropType<any>, |
| 37 | default: () => ({}), | |
| 38 | }, | |
| e1bc33 | 39 | |
| bab28a | 40 | toolbar: { |
| X | 41 | type: Boolean, |
| 42 | default: true, | |
| 43 | }, | |
| 44 | patternItems: { | |
| 45 | type: Array, | |
| e1bc33 | 46 | }, |
| V | 47 | }); |
| bab28a | 48 | |
| X | 49 | const lfElRef = ref(null); |
| 50 | const graphData = ref({}); | |
| 51 | ||
| 52 | const lfInstance = ref(null) as Ref<LogicFlow | null>; | |
| 53 | ||
| 54 | const { prefixCls } = useDesign('flow-chart'); | |
| 55 | const appStore = useAppStore(); | |
| 56 | const [register, { openModal }] = useModal(); | |
| 57 | createFlowChartContext({ | |
| 58 | logicFlow: lfInstance as unknown as LogicFlow, | |
| 59 | }); | |
| 60 | ||
| 61 | const getFlowOptions = computed(() => { | |
| 62 | const { flowOptions } = props; | |
| 63 | ||
| 64 | const defaultOptions: Partial<Definition> = { | |
| 65 | grid: true, | |
| 66 | background: { | |
| 67 | color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515', | |
| 68 | }, | |
| 69 | keyboard: { | |
| 70 | enabled: true, | |
| 71 | }, | |
| 72 | ...flowOptions, | |
| 73 | }; | |
| 74 | return defaultOptions as Definition; | |
| 75 | }); | |
| 76 | ||
| 77 | watch( | |
| 78 | () => props.data, | |
| 79 | () => { | |
| 80 | onRender(); | |
| 81 | }, | |
| 82 | ); | |
| 83 | ||
| 84 | // TODO | |
| 85 | // watch( | |
| 86 | // () => appStore.getDarkMode, | |
| 87 | // () => { | |
| 88 | // init(); | |
| 89 | // } | |
| 90 | // ); | |
| 91 | ||
| 92 | watch( | |
| 93 | () => unref(getFlowOptions), | |
| 94 | (options) => { | |
| 95 | unref(lfInstance)?.updateEditConfig(options); | |
| 96 | }, | |
| 97 | ); | |
| 98 | ||
| 99 | // init logicFlow | |
| 100 | async function init() { | |
| 101 | await nextTick(); | |
| 102 | ||
| 103 | const lfEl = unref(lfElRef); | |
| 104 | if (!lfEl) { | |
| 105 | return; | |
| 106 | } | |
| 107 | LogicFlow.use(DndPanel); | |
| 108 | ||
| 109 | // Canvas configuration | |
| 110 | LogicFlow.use(Snapshot); | |
| 111 | // Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo | |
| 112 | LogicFlow.use(BpmnElement); | |
| 113 | // Start the right-click menu | |
| 114 | LogicFlow.use(Menu); | |
| 115 | LogicFlow.use(SelectionSelect); | |
| 116 | ||
| 117 | lfInstance.value = new LogicFlow({ | |
| 118 | ...unref(getFlowOptions), | |
| 119 | container: lfEl, | |
| 120 | }); | |
| 121 | const lf = unref(lfInstance)!; | |
| 122 | lf?.setDefaultEdgeType('line'); | |
| 123 | onRender(); | |
| 124 | lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf)); | |
| 125 | } | |
| 126 | ||
| 127 | async function onRender() { | |
| 128 | await nextTick(); | |
| 129 | const lf = unref(lfInstance); | |
| 130 | if (!lf) { | |
| 131 | return; | |
| 132 | } | |
| 133 | const lFData = toLogicFlowData(props.data); | |
| 134 | lf.render(lFData); | |
| 135 | } | |
| 136 | ||
| 137 | function handlePreview() { | |
| 138 | const lf = unref(lfInstance); | |
| 139 | if (!lf) { | |
| 140 | return; | |
| 141 | } | |
| 142 | graphData.value = unref(lf).getGraphData(); | |
| 143 | openModal(); | |
| 144 | } | |
| 145 | ||
| 146 | onMounted(init); | |
| e1bc33 | 147 | </script> |
