|
|
|
@ -9,23 +9,20 @@ |
|
|
|
</template> |
|
|
|
<script lang="ts"> |
|
|
|
import type { Definition } from '@logicflow/core'; |
|
|
|
|
|
|
|
import { defineComponent, ref, onMounted, unref, nextTick, computed, watch } from 'vue'; |
|
|
|
|
|
|
|
import FlowChartToolbar from './FlowChartToolbar.vue'; |
|
|
|
import LogicFlow from '@logicflow/core'; |
|
|
|
import { Snapshot, BpmnElement, Menu, DndPanel } from '@logicflow/extension'; |
|
|
|
|
|
|
|
import { Snapshot, BpmnElement, Menu, DndPanel, SelectionSelect } from '@logicflow/extension'; |
|
|
|
import { useDesign } from '/@/hooks/web/useDesign'; |
|
|
|
import { useAppStore } from '/@/store/modules/app'; |
|
|
|
import { createFlowChartContext } from './useFlowContext'; |
|
|
|
|
|
|
|
import { toLogicFlowData } from './adpterForTurbo'; |
|
|
|
import { useModal, BasicModal } from '/@/components/Modal'; |
|
|
|
import { JsonPreview } from '/@/components/CodeEditor'; |
|
|
|
|
|
|
|
import { configDefaultDndPanel } from './config'; |
|
|
|
import '@logicflow/core/dist/style/index.css'; |
|
|
|
import '@logicflow/extension/lib/style/index.css'; |
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
name: 'FlowChart', |
|
|
|
components: { BasicModal, FlowChartToolbar, JsonPreview }, |
|
|
|
@ -44,6 +41,9 @@ |
|
|
|
type: Boolean, |
|
|
|
default: true, |
|
|
|
}, |
|
|
|
patternItems: { |
|
|
|
type: Array, |
|
|
|
}, |
|
|
|
}, |
|
|
|
setup(props) { |
|
|
|
const lfElRef = ref<ElRef>(null); |
|
|
|
@ -104,6 +104,7 @@ |
|
|
|
if (!lfEl) { |
|
|
|
return; |
|
|
|
} |
|
|
|
LogicFlow.use(DndPanel); |
|
|
|
|
|
|
|
// Canvas configuration |
|
|
|
LogicFlow.use(Snapshot); |
|
|
|
@ -111,14 +112,16 @@ |
|
|
|
LogicFlow.use(BpmnElement); |
|
|
|
// Start the right-click menu |
|
|
|
LogicFlow.use(Menu); |
|
|
|
LogicFlow.use(DndPanel); |
|
|
|
LogicFlow.use(SelectionSelect); |
|
|
|
|
|
|
|
lfInstance.value = new LogicFlow({ |
|
|
|
...unref(getFlowOptions), |
|
|
|
container: lfEl, |
|
|
|
}); |
|
|
|
unref(lfInstance)?.setDefaultEdgeType('line'); |
|
|
|
const lf = unref(lfInstance)!; |
|
|
|
lf?.setDefaultEdgeType('line'); |
|
|
|
onRender(); |
|
|
|
lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf)); |
|
|
|
} |
|
|
|
|
|
|
|
async function onRender() { |
|
|
|
@ -137,7 +140,6 @@ |
|
|
|
return; |
|
|
|
} |
|
|
|
graphData.value = unref(lf).getGraphData(); |
|
|
|
|
|
|
|
openModal(); |
|
|
|
} |
|
|
|
|
|
|
|
|
Vben
5 years ago