Hooke / logic-flow2

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
478008b9 1 parent a3eac613

fix

Inline Side-by-side
Showing 2 changed files with 91 additions and 21 deletions
1 <!-- 1 <!--
2 * @Date: 2025-03-10 16:52:35 2 * @Date: 2025-03-10 16:52:35
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-10 17:16:39 4 + * @LastEditTime: 2025-03-14 21:42:06
5 * @FilePath: /logic-flow2/src/views/control.vue 5 * @FilePath: /logic-flow2/src/views/control.vue
6 * @Description: 拖拽面板 6 * @Description: 拖拽面板
7 --> 7 -->
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
12 </template> 12 </template>
13 13
14 <script setup> 14 <script setup>
15 -import LogicFlow from '@logicflow/core'; 15 +import LogicFlow from "@logicflow/core";
16 -import { MiniMap } from "@logicflow/extension"; 16 +import { MiniMap, Control } from "@logicflow/extension";
17 const container = ref(null); 17 const container = ref(null);
18 let lf = null; 18 let lf = null;
19 19
...@@ -21,43 +21,108 @@ onMounted(() => { ...@@ -21,43 +21,108 @@ onMounted(() => {
21 lf = new LogicFlow({ 21 lf = new LogicFlow({
22 container: container.value, 22 container: container.value,
23 grid: true, 23 grid: true,
24 - plugins: [MiniMap] 24 + plugins: [MiniMap, Control],
25 }); 25 });
26 26
27 lf.extension.control.addItem({ 27 lf.extension.control.addItem({
28 - key: 'mini-map', 28 + key: "mini-map",
29 - iconClass: 'custom-minimap', 29 + iconClass: "custom-minimap",
30 - title: '', 30 + title: "",
31 - text: '导航', 31 + text: "导航",
32 onMouseEnter: (lf, ev) => { 32 onMouseEnter: (lf, ev) => {
33 - const position = lf.getPointByClient(ev.x, ev.y) 33 + const position = lf.getPointByClient(ev.x, ev.y);
34 lf.extension.miniMap.show( 34 lf.extension.miniMap.show(
35 position.domOverlayPosition.x - 120, 35 position.domOverlayPosition.x - 120,
36 - position.domOverlayPosition.y + 35, 36 + position.domOverlayPosition.y + 35
37 - ) 37 + );
38 }, 38 },
39 onClick: (lf, ev) => { 39 onClick: (lf, ev) => {
40 - const position = lf.getPointByClient(ev.x, ev.y) 40 + const position = lf.getPointByClient(ev.x, ev.y);
41 lf.extension.miniMap.show( 41 lf.extension.miniMap.show(
42 position.domOverlayPosition.x - 120, 42 position.domOverlayPosition.x - 120,
43 - position.domOverlayPosition.y + 35, 43 + position.domOverlayPosition.y + 35
44 - ) 44 + );
45 }, 45 },
46 }); 46 });
47 47
48 - // lf.extension.control.removeItem('mini-map') 48 + // 添加克隆节点功能
49 + lf.extension.control.addItem({
50 + key: "clone-node",
51 + iconClass: "custom-clone",
52 + title: "克隆节点",
53 + text: "克隆",
54 + onClick: (lf, ev) => {
55 + const nodes = lf.getSelectElements().nodes;
56 + if (nodes.length) {
57 + nodes.forEach((node) => {
58 + const { x, y, type, properties } = node;
59 + // 在原节点右侧50px处创建新节点
60 + lf.addNode({
61 + type,
62 + x: x + 50,
63 + y,
64 + properties,
65 + });
66 + });
67 + }
68 + console.warn("克隆节点", lf.getGraphData());
69 + },
70 + });
71 +
72 +
73 + // 添加修改节点ID功能
74 + lf.extension.control.addItem({
75 + key: "change-node-id",
76 + iconClass: "custom-edit",
77 + title: "修改节点ID",
78 + text: "改ID",
79 + onClick: (lf, ev) => {
80 + const nodes = lf.getSelectElements().nodes;
81 + if (nodes.length === 1) {
82 + const node = nodes[0];
83 + const newId = `node_${Date.now()}`; // 生成新ID
84 + lf.changeNodeId(node.id, newId);
85 + } else {
86 + alert('请选择一个节点');
87 + }
88 + },
89 + });
90 +
91 + // 添加获取节点信息功能
92 + lf.extension.control.addItem({
93 + key: "get-node-info",
94 + iconClass: "custom-info",
95 + title: "获取节点信息",
96 + text: "节点信息",
97 + onClick: (lf, ev) => {
98 + const nodes = lf.getSelectElements().nodes;
99 + if (nodes.length === 1) {
100 + const node = nodes[0];
101 + // 获取节点 model
102 + const nodeModel = lf.getNodeModelById(node.id);
103 + // 获取节点数据
104 + const nodeData = lf.getNodeDataById(node.id);
105 +
106 + console.log('节点Model:', nodeModel);
107 + console.log('节点Data:', nodeData);
108 + } else {
109 + alert('请选择一个节点');
110 + }
111 + },
112 + });
113 +
114 + lf.extension.control.removeItem("mini-map");
49 115
50 lf.render({ 116 lf.render({
51 nodes: [ 117 nodes: [
52 - { id: 'node1', type: 'rect', x: 200, y: 100 }, 118 + { id: "node1", type: "rect", x: 200, y: 100 },
53 - { id: 'node2', type: 'circle', x: 400, y: 100 }, 119 + { id: "node2", type: "circle", x: 400, y: 100 },
54 ], 120 ],
55 - edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2' }], 121 + edges: [{ id: "edge1", sourceNodeId: "node1", targetNodeId: "node2" }],
56 }); 122 });
57 }); 123 });
58 </script> 124 </script>
59 125
60 -
61 <style scoped> 126 <style scoped>
62 .container { 127 .container {
63 width: 100vw; 128 width: 100vw;
......
1 <!-- 1 <!--
2 * @Date: 2025-03-10 16:52:35 2 * @Date: 2025-03-10 16:52:35
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-12 18:00:09 4 + * @LastEditTime: 2025-03-14 16:53:21
5 * @FilePath: /logic-flow2/src/views/theme/index.vue 5 * @FilePath: /logic-flow2/src/views/theme/index.vue
6 * @Description: 主题 Theme 6 * @Description: 主题 Theme
7 --> 7 -->
...@@ -86,13 +86,18 @@ onMounted(() => { ...@@ -86,13 +86,18 @@ onMounted(() => {
86 nodes: [ 86 nodes: [
87 { id: "node1", type: "rect", x: 200, y: 100 }, 87 { id: "node1", type: "rect", x: 200, y: 100 },
88 { id: "node2", type: "circle", x: 400, y: 100 }, 88 { id: "node2", type: "circle", x: 400, y: 100 },
89 - { id: '7', type: 'html', x: 600, y: 320 }, 89 + { id: "7", type: "html", x: 600, y: 320 },
90 ], 90 ],
91 edges: [ 91 edges: [
92 { id: "edge1", sourceNodeId: "node1", targetNodeId: "node2", type: "custom-edge" }, 92 { id: "edge1", sourceNodeId: "node1", targetNodeId: "node2", type: "custom-edge" },
93 ], 93 ],
94 }); 94 });
95 95
96 + // 定位画布视口中心到坐标[1000, 1000]处
97 + lf.focusOn({
98 + id: "node2",
99 + });
100 +
96 lf.on("node:render", (node) => { 101 lf.on("node:render", (node) => {
97 const { nodeConfig } = node; 102 const { nodeConfig } = node;
98 // 设定锚点 103 // 设定锚点
......