fix

 <!--
  * @Date: 2025-03-10 16:52:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-10 17:16:39
+ * @LastEditTime: 2025-03-14 21:42:06
  * @FilePath: /logic-flow2/src/views/control.vue
  * @Description: 拖拽面板
 -->
@@ -12,8 +12,8 @@
 </template>
 
 <script setup>
-import LogicFlow from '@logicflow/core';
-import { MiniMap } from "@logicflow/extension";
+import LogicFlow from "@logicflow/core";
+import { MiniMap, Control } from "@logicflow/extension";
 const container = ref(null);
 let lf = null;
 
@@ -21,43 +21,108 @@ onMounted(() => {
   lf = new LogicFlow({
     container: container.value,
     grid: true,
-    plugins: [MiniMap]
+    plugins: [MiniMap, Control],
   });
 
   lf.extension.control.addItem({
-    key: 'mini-map',
-    iconClass: 'custom-minimap',
-    title: '',
-    text: '导航',
+    key: "mini-map",
+    iconClass: "custom-minimap",
+    title: "",
+    text: "导航",
     onMouseEnter: (lf, ev) => {
-      const position = lf.getPointByClient(ev.x, ev.y)
+      const position = lf.getPointByClient(ev.x, ev.y);
       lf.extension.miniMap.show(
         position.domOverlayPosition.x - 120,
-        position.domOverlayPosition.y + 35,
-      )
+        position.domOverlayPosition.y + 35
+      );
     },
     onClick: (lf, ev) => {
-      const position = lf.getPointByClient(ev.x, ev.y)
+      const position = lf.getPointByClient(ev.x, ev.y);
       lf.extension.miniMap.show(
         position.domOverlayPosition.x - 120,
-        position.domOverlayPosition.y + 35,
-      )
+        position.domOverlayPosition.y + 35
+      );
     },
   });
 
-  // lf.extension.control.removeItem('mini-map')
+  // 添加克隆节点功能
+  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 },
+      { id: "node1", type: "rect", x: 200, y: 100 },
+      { id: "node2", type: "circle", x: 400, y: 100 },
     ],
-    edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2' }],
+    edges: [{ id: "edge1", sourceNodeId: "node1", targetNodeId: "node2" }],
   });
 });
 </script>
 
-
 <style scoped>
 .container {
   width: 100vw;

 <!--
  * @Date: 2025-03-10 16:52:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-12 18:00:09
+ * @LastEditTime: 2025-03-14 16:53:21
  * @FilePath: /logic-flow2/src/views/theme/index.vue
  * @Description: 主题 Theme
 -->
@@ -86,13 +86,18 @@ onMounted(() => {
     nodes: [
       { id: "node1", type: "rect", x: 200, y: 100 },
       { id: "node2", type: "circle", x: 400, y: 100 },
-      { id: '7', type: 'html', x: 600, y: 320 },
+      { id: "7", type: "html", x: 600, y: 320 },
     ],
     edges: [
       { id: "edge1", sourceNodeId: "node1", targetNodeId: "node2", type: "custom-edge" },
     ],
   });
 
+  // 定位画布视口中心到坐标[1000, 1000]处
+  lf.focusOn({
+    id: "node2",
+  });
+
   lf.on("node:render", (node) => {
     const { nodeConfig } = node;
     // 设定锚点