setup()

in seatunnel-ui/src/views/task/synchronization-definition/dag/canvas/index.tsx [40:173]
120 lines of code
7 McCabe index (conditional complexity)

  setup(props, ctx) {
    const graph = ref<Graph>()
    provide('graph', graph)

    const container = ref()
    const dagContainer = ref()
    const minimapContainer = ref()
    const { t } = useI18n()
    const state = reactive({
      nodeInfo: {
        type: 'source',
        label: '',
        pluginId: '',
        transform: ''
      } as NodeInfo,
      show: false
    })

    let currentNodeId = ''

    const handlePreventDefault = (e: DragEvent) => {
      e.preventDefault()
    }

    const handleDrop = (e: DragEvent) => {
      ctx.emit('drop', e)
    }

    const initGraph = () => {
      graph.value = useDagGraph(
        graph,
        dagContainer.value,
        minimapContainer.value
      )
    }

    const registerNode = () => {
      Graph.unregisterNode(DagNodeName)
      Graph.registerNode(DagNodeName, useDagNode())
    }

    const registerEdge = () => {
      Graph.unregisterEdge(DagEdgeName)
      Graph.registerEdge(DagEdgeName, EdgeDefaultConfig)
    }

    const onDoubleClick = () => {
      graph.value &&
        (graph.value as Graph).on(
          'cell:dblclick',
          ({ cell }: { cell: any }) => {
            if (cell.isEdge()) return
            let fields = [] as string[]
            const incomingEdges = graph.value?.getIncomingEdges(cell)
            if (incomingEdges?.length) {
              const sourceNode = incomingEdges[0].getSourceNode()
              const sourceData = sourceNode?.getData()
              fields = sourceData.selectTableFields?.tableFields || []
            }
            state.nodeInfo = {
              ...cell.getData(),
              type: cell.getData().type.toLowerCase(),
              sourceFields: fields,
              predecessorsNodeId: (graph.value?.getPredecessors(cell) as Cell[]).length > 0 ? graph.value?.getPredecessors(cell)[0].id : ''
            }
            currentNodeId = cell.id
            state.show = true
            graph.value!.lockScroller()
          }
        )
    }

    const onCancelModal = () => {
      state.show = false
    }

    const onConfirmModal = (values: InputPlugin) => {
      state.show = false
      const node = graph.value?.getCellById(currentNodeId)
      node?.replaceData({
        ...values,
        unsaved: false,
        isError: false,
        type: values.type.toLowerCase()
      })
      // Used to determine whether the current node has data saved.
      updateNode(graph.value as Graph)
    }

    useDagResize(container, graph as Ref<Graph>)

    ctx.expose({
      addNode: (cell: Cell.Metadata) => {
        addNode(graph.value as Graph, cell)
      },
      getGraph: () => graph.value,
      addNodesAndEdges: (cells: Cell.Metadata[], edges: InputEdge[]) => {
        initNodesAndEdges(graph.value as Graph, cells, edges)
      },
      getSelectedCells: () => graph.value?.getSelectedCells(),
      removeCell: (id: string) => graph.value?.removeCell(id),
      getDagData: () => getDagData(graph.value as Graph, t),
      layoutDag: (layoutType: 'grid' | 'dagre', cols: number, rows: number) =>
        formatLayout(graph.value, layoutType, cols, rows)
    })

    onMounted(() => {
      initGraph()
      registerNode()
      registerEdge()
      onDoubleClick()
    })
    return () => (
      <div
        ref={container}
        class={styles.container}
        onDrop={handleDrop}
        onDragenter={handlePreventDefault}
        onDragover={handlePreventDefault}
        onDragleave={handlePreventDefault}
      >
        <div ref={dagContainer} class={styles['dag-container']} />
        <div ref={minimapContainer} class={styles.minimap} />
        {state.nodeInfo.type && (
          <NodeSetting
            show={state.show}
            nodeInfo={state.nodeInfo}
            onCancelModal={onCancelModal}
            onConfirmModal={onConfirmModal}
          />
        )}
      </div>
    )
  }