<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-15 19:24:15
 * @FilePath: /logic-flow2/src/views/control.vue
 * @Description: 拖拽面板
-->
<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";
const container = ref(null);
let lf = null;

onMounted(() => {
  nextTick(() => { // 使用 nextTick 确保 DOM 已挂载
    lf = new LogicFlow({
      container: container.value,
      grid: true,
      plugins: [MiniMap, Control],
    });

    // 监听锚点拖拽连线成功事件
    lf.on("anchor:drop", ({ data, e }) => {
      console.log("手动创建连线成功：", {
        edgeId: data.id,
        sourceNode: data.sourceNodeId,
        targetNode: data.targetNodeId,
        edgeType: data.type
      });
    });

    // 监听所有连线创建事件（包括手动和自动）
    lf.on("edge:add", ({ data, e }) => {
      console.log("连线创建事件：", {
        edgeId: data.id,
        sourceNode: data.sourceNodeId,
        targetNode: data.targetNodeId,
        edgeType: data.type,
        isManual: e ? true : false,  // render 时创建的边，e 为 undefined
        createType: e ? '手动创建' : 'render创建'
      });
      console.log("监听到连线创建：", data);
    });

    // graphModel 的事件监听 - 更底层，返回原始数据
    const { eventCenter } = lf.graphModel;
    eventCenter.on("node:click", (args) => {
      console.log("graphModel node:click", {
        position: args.position,  // 原始坐标
        data: args.data,         // 原始节点数据
        e: args.e               // 原始事件对象
      });
    });

    // LogicFlow 实例的事件监听 - 更上层，返回处理后的数据
    lf.on("node:click", ({ data, e }) => {
      console.log("lf node:click", {
        id: data.id,           // 节点ID
        type: data.type,       // 节点类型
        properties: data.properties,  // 节点属性
        x: data.x,            // 处理后的坐标
        y: data.y
      });
    });

    lf.render({
      nodes: [
        { id: "node1", type: "rect", x: 200, y: 100 },
        { id: "node2", type: "circle", x: 400, y: 100 },
      ],
      // edges: [{ id: "edge1", sourceNodeId: "node1", targetNodeId: "node2", type: "polyline" }],
    });

    // 然后手动添加边，这样会触发 edge:add 事件
    lf.addEdge({
      id: "edge2",
      sourceNodeId: "node1",
      targetNodeId: "node2",
      type: "polyline"
    });
  });
});
</script>

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

.flow-container {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 500px; /* 可添加最小高度作为保底 */
}
</style>