setup()

in seatunnel-ui/src/views/task/synchronization-definition/dag/index.tsx [28:119]
84 lines of code
9 McCabe index (conditional complexity)

  setup() {
    const dagRef = ref()

    const tempNode = {
      type: '',
      name: ''
    }
    const { t, locale } = useI18n()
    const { state, detailInit, onDelete, onSave } = useDagDetail()
    const handelDragstart = (type: any, name: any) => {
      tempNode.type = type
      tempNode.name = name
    }

    const handelDrop = (e: DragEvent) => {
      if (!tempNode.type) return
      dagRef.value.addNode({
        x: e.offsetX,
        y: e.offsetY,
        label: tempNode.name || tempNode.type,
        node: tempNode.type
      })
    }

    const handleDelete = async () => {
      const cells = dagRef.value.getSelectedCells()
      if (!cells.length) {
        window.$message.warning(
          t('project.synchronization_definition.delete_empty_tips')
        )
        return
      }
      let result = true
      if (cells[0].isNode() && !cells[0].getData().unsaved) {
        result = await onDelete(cells[0].getData().pluginId)
      }
      if (result) dagRef.value.removeCell(cells[0].id)
    }

    const handleSave = () => {
      const result = dagRef.value.getDagData()
      result && onSave(dagRef.value.getDagData(), dagRef.value.getGraph())
    }

    const handleLayout = (
      layoutType: 'grid' | 'dagre',
      cols: number,
      rows: number
    ) => {
      dagRef.value.layoutDag(layoutType, cols, rows)
    }

    onMounted(async () => {
      const result = await detailInit()
      if (result?.nodesAndEdges) {
        dagRef.value.addNodesAndEdges(
          result.nodesAndEdges.plugins,
          result.nodesAndEdges.edges
        )
      }
      document.documentElement.style.setProperty(
        '--node-config-hint',
        `"${t('dag.nodeConfigHint')}"`
      )
    })

    watch(
      () => locale.value,
      () => {
        document.documentElement.style.setProperty(
          '--node-config-hint',
          `"${t('dag.nodeConfigHint')}"`
        )
      }
    )

    return () => (
      <NSpin show={state.loading}>
        <NSpace vertical>
          <DagToolbar
            onDelete={handleDelete}
            onSave={handleSave}
            onLayout={handleLayout}
          />
          <div class={styles['workflow-dag']}>
            <DagSidebar onDragstart={handelDragstart} />
            <DagCanvas onDrop={handelDrop} ref={dagRef} />
          </div>
        </NSpace>
      </NSpin>
    )
  }