<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-18 17:18:57
 * @FilePath: /logic-flow2/src/views/api/nodeModel.vue
 * @Description: 拖拽面板
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
  </div>
</template>

<script setup>
import LogicFlow from "@logicflow/core";
import "@logicflow/extension/lib/style/index.css";
import CustomNode from "./draggable-text-node";

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

/**
 * 先必须初始化的时把配置项打开，之后再进行单独的数据设置
 * 比如你如果要文本移动，那么你必须先打开文本移动的配置项，然后再进行单独的数据设置
 */

onMounted(() => {
  lf = new LogicFlow({
    container: container.value,
    grid: true,
    // plugins: [Label], // 引入 Label 插件
    nodeTextDraggable: true, // 开启节点文本拖拽
  });

  // 注册自定义节点
  lf.register(CustomNode);

  // 设置拖拽面板配置
  lf.setPatternItems([
    {
      type: "custom-rect",
      text: "自定义节点",
      label: "拖拽生成节点",
      className: "custom-node",
    },
  ]);

  // 监听节点创建事件，自定义ID规则
  lf.on("node:dnd-add", ({ data }) => {
    const prefix = "custom_node_";
    const timestamp = Date.now();
    data.id = `${prefix}${timestamp}`;
    console.log("新创建的节点ID:", data.id);
  });

  // 添加连线事件监听
  lf.on('edge:connect', ({ data }) => {
    console.log('连线成功', data);
  });

  lf.on('connection:not-allowed', (data) => {
    console.log('连线被阻止', data);
  });

  lf.render({
    nodes: [
      {
        id: "node1",
        type: "custom-rect",
        x: 200,
        y: 100,
        // text: {
        //   x: 250,
        //   y: 150,
        //   value: 'Node 1',
        // },
        text: "Node 1",
      },
      {
        id: "node2",
        type: "circle",
        x: 400,
        y: 100,
        text: {
          x: 450,
          y: 150,
          value: "Node 2",
          draggable: false,
        },
      },
    ],
    edges: [{ id: "edge1", sourceNodeId: "node1", targetNodeId: "node2" }],
  });

  lf.translateCenter();

  lf.on("node:click", ({data}) => {
    lf.getNodeModelById(data.id).setProperties({
      disabled: !data.properties.disabled,
      scale: 2,
    });
    console.warn(lf.getGraphData());

  });

  const nodeModel = lf.getNodeModelById("node1");
  // const { anchors } = nodeModel;
  // nodeModel.setIsShowAnchor(true)
  console.warn("nodeModel", nodeModel.getConnectedTargetRules());


});
</script>

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

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