Ben Lin
2024-10-20 d6749f95c526c0e71ec946bd3bb777bc42b2c34a
src/components/FlowChart/src/FlowChart.vue
@@ -30,7 +30,8 @@
  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';
@@ -74,6 +75,8 @@
    'init',
    'undo',
    'redo',
    'anchor-drop',
    'anchor-dragend',
  ]);
  const lfElRef = ref(null);
  const graphData = ref({});
@@ -98,7 +101,7 @@
      keyboard: {
        enabled: true,
      },
      edgeType: 'bezier',
      edgeType: 'polyline',
      ...flowOptions,
    };
    return defaultOptions as Definition;
@@ -156,7 +159,7 @@
      },
    });
    const lf = unref(lfInstance)!;
    lf?.setDefaultEdgeType('bezier');
    lf?.setDefaultEdgeType('polyline');
    lf.register(actionRect);
    lf.register(TestNode);
    lf.register(CollectNode);
@@ -187,7 +190,17 @@
          }
        });
      }
      emit('anchor-drop', data, lf);
    });
    /**
     * @description: 锚点连线结束,不管是否创建连线都会触发。
     * @return {*}
     */
    lf.on('anchor:dragend', (data, e, nodeModel) => {
      emit('anchor-dragend',data, e, nodeModel, lf);
    });
    lf.on('node:click,edge:click', (data) => {
      if (data.isSelected) {
        console.log(data.data.text.value, data.isSelected);
@@ -223,48 +236,48 @@
    openModal();
  }
function handleSave() {
  // console.log('handleSave');
  const lf = unref(lfInstance);
  if (!lf) {
    return;
  function handleSave() {
    // console.log('handleSave');
    const lf = unref(lfInstance);
    if (!lf) {
      return;
    }
    emit('save-data', lf);
  }
  emit('save-data', lf);
}
function handleAdd() {
  const lf = unref(lfInstance);
  console.log('handleAdd');
  if (!lf) {
    return;
  function handleAdd() {
    const lf = unref(lfInstance);
    console.log('handleAdd');
    if (!lf) {
      return;
    }
    // lf.clearData();
    lf.render({});
  }
  // lf.clearData();
  lf.render({});
}
function handleAddlf() {
  const lf = unref(lfInstance);
  if (!lf) {
    return;
  function handleAddlf() {
    const lf = unref(lfInstance);
    if (!lf) {
      return;
    }
    emit('add-lf', lf);
  }
  emit('add-lf', lf);
}
function handleUndo() {
  const lf = unref(lfInstance);
  if (!lf) {
    return;
  function handleUndo() {
    const lf = unref(lfInstance);
    if (!lf) {
      return;
    }
    emit('undo', lf);
  }
  emit('undo', lf);
}
function handleRedo() {
  const lf = unref(lfInstance);
  if (!lf) {
    return;
  function handleRedo() {
    const lf = unref(lfInstance);
    if (!lf) {
      return;
    }
    emit('redo', lf);
  }
  emit('redo', lf);
}
  onMounted(init);
</script>