不良下线更新

Ben Lin

2024-11-06 ec49b0a17e4b9e21bf87b02ead010c38336f40ee

 src/components/FlowChart/src/FlowChartView.vue

@@ -1,13 +1,12 @@
<template>
  <div class="h-full" :class="prefixCls">
    <div ref="lfElRef" class="h-full"></div>
    <div ref="lfElVRef" class="h-full"></div>
  </div>
</template>
<script lang="ts" setup>
  import type { Ref } from 'vue';
  import type { Definition } from '@logicflow/core';
  import { ref, onMounted, unref, nextTick, computed, watch } from 'vue';
  import FlowChartToolbar from './FlowChartToolbar.vue';
  import LogicFlow from '@logicflow/core';
  import { Snapshot, BpmnElement, Menu, DndPanel, SelectionSelect } from '@logicflow/extension';
  import { useDesign } from '@/hooks/web/useDesign';
@@ -15,20 +14,18 @@
  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/core/lib/style/index.css";
  // import '@logicflow/core/dist/style/index.css';
  import '@logicflow/extension/lib/style/index.css';
  import { useGlobSetting } from '/@/hooks/setting';
  import customEdge from './customEdge';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import actionRect from './actionRect';
  import TestNode from './TestNode';
  import CollectNode from './CollectNode';
  import AssemblyNode from './AssemblyNode';
  import PackingNode from './PackingNode';
  import RepairNode from './RepairNode';
import SpecPackingNode from './SpecPackingNode';

  defineOptions({ name: 'FlowChart' });

@@ -62,7 +59,7 @@
    'undo',
    'redo',
  ]);
  const lfElRef = ref(null);
  const lfElVRef = ref(null);
  const graphData = ref({});

  const lfInstance = ref(null) as Ref<LogicFlow | null>;
@@ -117,7 +114,7 @@
  async function init() {
    await nextTick();

    const lfEl = unref(lfElRef);
    const lfEl = unref(lfElVRef);
    if (!lfEl) {
      return;
    }
@@ -151,8 +148,9 @@
    lf.register(PackingNode);
    lf.register(RepairNode);
    lf.register(customEdge);
    lf.register(SpecPackingNode);
    onRender();
    lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf));
    // lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf));
  }

  async function onRender() {
@@ -161,42 +159,42 @@
    if (!lf) {
      return;
    }
    const lFData = toLogicFlowData(props.data);
    lf.render(lFData);
    // const lFData = toLogicFlowData(props.data);
    lf.render(props.data);

    lf.on('anchor:drop', (data) => {
      const nodeData = data.nodeModel.getData();
      if (nodeData.properties.isReturn === true) {
        console.log(11, nodeData.properties.isReturn);
        data.nodeModel.graphModel.edges.forEach((element) => {
          if (element.sourceNodeId === data.nodeModel.id) {
            lf.changeEdgeType(element.id, 'custom-edge');
          }
        });
      }
    });
    lf.on('node:click,edge:click', (data) => {
      if (data.isSelected) {
        console.log(data.data.text.value, data.isSelected);
        // notification.success({
        //   message: t('点击了节点'),
        //   description: `${data.data.text.value}: ${data.isSelected}`,
        //   duration: 3,
        // });
        emit('select-node', data, lf);
      } else {
        console.log(data.data.type);
      }
    });
    // lf.on('anchor:drop', (data) => {
    //   const nodeData = data.nodeModel.getData();
    //   if (nodeData.properties.isReturn === true) {
    //     console.log(11, nodeData.properties.isReturn);
    //     data.nodeModel.graphModel.edges.forEach((element) => {
    //       if (element.sourceNodeId === data.nodeModel.id) {
    //         lf.changeEdgeType(element.id, 'custom-edge');
    //       }
    //     });
    //   }
    // });
    // lf.on('node:click,edge:click', (data) => {
    //   if (data.isSelected) {
    //     console.log(data.data.text.value, data.isSelected);
    //     // notification.success({
    //     //   message: t('点击了节点'),
    //     //   description: `${data.data.text.value}: ${data.isSelected}`,
    //     //   duration: 3,
    //     // });
    //     emit('select-node', data, lf);
    //   } else {
    //     console.log(data.data.type);
    //   }
    // });

    lf.on('blank:mousedown', (e) => {
      emit('click-blank');
    });
    // lf.on('blank:mousedown', (e) => {
    //   emit('click-blank');
    // });

    lf.on('node:dnd-add', (data, e) => {
      console.log('node:dnd-add', data);
      emit('select-node', data, lf);
    });
    // lf.on('node:dnd-add', (data, e) => {
    //   console.log('node:dnd-add', data);
    //   emit('select-node', data, lf);
    // });

    emit('init', lf);
  }