<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-14 21:42:06
 * @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(() => {
  lf = new LogicFlow({
    container: container.value,
    grid: true,
    plugins: [MiniMap, Control],
  });

  lf.extension.control.addItem({
    key: "mini-map",
    iconClass: "custom-minimap",
    title: "",
    text: "导航",
    onMouseEnter: (lf, ev) => {
      const position = lf.getPointByClient(ev.x, ev.y);
      lf.extension.miniMap.show(
        position.domOverlayPosition.x - 120,
        position.domOverlayPosition.y + 35
      );
    },
    onClick: (lf, ev) => {
      const position = lf.getPointByClient(ev.x, ev.y);
      lf.extension.miniMap.show(
        position.domOverlayPosition.x - 120,
        position.domOverlayPosition.y + 35
      );
    },
  });

  // 添加克隆节点功能
  lf.extension.control.addItem({
    key: "clone-node",
    iconClass: "custom-clone",
    title: "克隆节点",
    text: "克隆",
    onClick: (lf, ev) => {
      const nodes = lf.getSelectElements().nodes;
      if (nodes.length) {
        nodes.forEach((node) => {
          const { x, y, type, properties } = node;
          // 在原节点右侧50px处创建新节点
          lf.addNode({
            type,
            x: x + 50,
            y,
            properties,
          });
        });
      }
      console.warn("克隆节点", lf.getGraphData());
    },
  });


  // 添加修改节点ID功能
  lf.extension.control.addItem({
    key: "change-node-id",
    iconClass: "custom-edit",
    title: "修改节点ID",
    text: "改ID",
    onClick: (lf, ev) => {
      const nodes = lf.getSelectElements().nodes;
      if (nodes.length === 1) {
        const node = nodes[0];
        const newId = `node_${Date.now()}`;  // 生成新ID
        lf.changeNodeId(node.id, newId);
      } else {
        alert('请选择一个节点');
      }
    },
  });

  // 添加获取节点信息功能
    lf.extension.control.addItem({
      key: "get-node-info",
      iconClass: "custom-info",
      title: "获取节点信息",
      text: "节点信息",
      onClick: (lf, ev) => {
        const nodes = lf.getSelectElements().nodes;
        if (nodes.length === 1) {
          const node = nodes[0];
          // 获取节点 model
          const nodeModel = lf.getNodeModelById(node.id);
          // 获取节点数据
          const nodeData = lf.getNodeDataById(node.id);

          console.log('节点Model:', nodeModel);
          console.log('节点Data:', nodeData);
        } else {
          alert('请选择一个节点');
        }
      },
    });

    lf.extension.control.removeItem("mini-map");

  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" }],
  });
});
</script>

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

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