<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
  </div>
</template>

<script setup>
import LogicFlow from "@logicflow/core";
import { MiniMap, Control } from "@logicflow/extension";
import CustomNode from './customNode';
const container = ref(null);
let lf = null;

onMounted(() => {
  nextTick(() => {
    lf = new LogicFlow({
      container: container.value,
      grid: true,
      plugins: [MiniMap, Control],
      width: container.value.offsetWidth,
      height: container.value.offsetHeight
    });

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

    // 监听节点点击事件，点击时进入编辑模式
    lf.on("node:click", ({ data }) => {
      lf.graphModel.editText(data.id);
    });

    // 监听文本编辑完成事件
    lf.on("text:update", ({ data }) => {
      console.log("文本更新为：", data.text);
    });

    // 添加节点移动规则
    lf.graphModel.addNodeMoveRules((nodeModel, x, y) => {
      if (nodeModel.properties.disabled) {
        return false;  // 禁止移动
      }
      return true;    // 允许移动
    });

    // 渲染初始数据
    lf.render({
      nodes: [
        {
          id: "node1",
          type: "rect",
          x: 100,
          y: 100,
          text: "点击编辑文本"
        },
        {
          id: "node2",
          type: "custom-rect",  // 使用自定义节点类型
          x: 200,
          y: 200,
          text: "点击编辑文本"
        },
        {
          id: "node11",
          type: "rect",
          x: 300,
          y: 300,
          text: "可移动节点",
          properties: {
            disabled: false
          }
        },
        {
          id: "node21",
          type: "custom-rect",
          x: 400,
          y: 400,
          text: "禁止移动节点",
          properties: {
            disabled: true
          }
        }
      ]
    });
  });
});

// 判断节点是否可连接
const checkNodeConnectable = (targetNode, sourceNode) => {
  return targetNode.type === 'rect';
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
.flow-container {
  width: 100%;
  height: 100%;
  min-height: 500px;
}
</style>