<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-12 23:36:42
 * @FilePath: /logic-flow2/src/views/adv-node/anchor/index.vue
 * @Description: 自定义锚点
-->
<template>
  <div class="helloworld-app sql container">
    <div ref="container" class="app-content flow-container"></div>
    <button @click="handleAddField">Users添加字段</button>
  </div>
</template>

<script setup>
import LogicFlow from "@logicflow/core";
import sqlNode from "./sqlNode";
import sqlEdge from "./sqlEdge";

import data from "./sqlData";
import "./index.less";

const container = ref(null);
let lf = null;

// 添加字段的处理函数
const handleAddField = () => {
  const nodeModel = lf.getNodeModelById("node_id_1");
  if (typeof nodeModel?.addField === "function") {
    nodeModel.addField({
      key: Math.random().toString(36).substring(2, 7),
      type: ["integer", "long", "string", "boolean"][Math.floor(Math.random() * 4)],
    });
  }
};

onMounted(() => {
  lf = new LogicFlow({
    container: container.value,
    grid: true,
  });

  lf.register(sqlNode);
  lf.register(sqlEdge);

  lf.setDefaultEdgeType("sql-edge");
  lf.setTheme({
    bezier: {
      stroke: "#afafaf",
      strokeWidth: 1,
    },
  });

  lf.render(data);
  lf.translateCenter();

  // 1.1.28新增，可以自定义锚点显示时机了
  lf.on("anchor:dragstart", ({ data, nodeModel }) => { // 当开始拖拽某个节点的锚点时
    console.log("dragstart", data);
    if (nodeModel.type === "sql-node") { // 如果拖拽的是 sql-node 类型的节点
      lf.graphModel.nodes.forEach((node) => {
        // 找到其他的 sql-node 节点（排除当前正在拖拽的节点）
        console.warn(node);

        if (node.type === "sql-node" && nodeModel.id !== node.id) {
          node.isShowAnchor = true; // 显示这些节点的锚点
          node.setProperties({
            isConnection: true, // 设置连接状态属性
          });
        }
      });
    }
  });
  lf.on("anchor:dragend", ({ data, nodeModel }) => {
    console.log("dragend", data);
    if (nodeModel.type === "sql-node") {
      lf.graphModel.nodes.forEach((node) => {
        if (node.type === "sql-node" && nodeModel.id !== node.id) {
          node.isShowAnchor = false;
          lf.deleteProperty(node.id, "isConnection");
        }
      });
    }
  });
});
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flow-container {
  flex: 1;
  width: 100%;
  height: 100%;
}
</style>