Hooke / logic-flow2

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1454accc 1 parent 130d1933

菜单功能测试

Inline Side-by-side
Showing 6 changed files with 202 additions and 15 deletions
1 /* 1 /*
2 * @Date: 2025-03-10 13:15:30 2 * @Date: 2025-03-10 13:15:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-13 12:13:02 4 + * @LastEditTime: 2025-03-13 16:20:00
5 * @FilePath: /logic-flow2/src/router/index.js 5 * @FilePath: /logic-flow2/src/router/index.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -85,6 +85,11 @@ const router = createRouter({ ...@@ -85,6 +85,11 @@ const router = createRouter({
85 name: 'adv-edge-animation', 85 name: 'adv-edge-animation',
86 component: () => import('../views/adv-edge/animation/index.vue') 86 component: () => import('../views/adv-edge/animation/index.vue')
87 }, 87 },
88 + {
89 + path: '/adv-menu',
90 + name: 'adv-menu',
91 + component: () => import('../views/adv-menu/index.vue')
92 + },
88 ] 93 ]
89 }) 94 })
90 95
......
1 +/*
2 + * @Date: 2025-03-13 16:17:13
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-03-13 16:21:47
5 + * @FilePath: /logic-flow2/src/views/adv-menu/customEdge.js
6 + * @Description: 文件描述
7 + */
8 +import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
9 +
10 +class CustomModel extends PolylineEdgeModel {
11 + setAttributes() {
12 + // 右键菜单
13 + this.menu = [
14 + {
15 + className: "lf-menu-delete",
16 + icon: true,
17 + callback: (edge) => {
18 + const comfirm = window.confirm("你确定要删除吗？");
19 + comfirm && this.graphModel.deleteEdgeById(edge.id);
20 + },
21 + },
22 + ];
23 + }
24 +}
25 +
26 +export default {
27 + type: "custom_edge",
28 + view: PolylineEdge,
29 + model: CustomModel,
30 +};
1 +/*
2 + * @Date: 2025-03-13 16:11:47
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-03-13 17:09:32
5 + * @FilePath: /logic-flow2/src/views/adv-menu/customNode.js
6 + * @Description: 文件描述
7 + */
8 +import { RectNode, RectNodeModel } from "@logicflow/core";
9 +
10 +class CustomModel extends RectNodeModel {
11 + setAttributes() {
12 + this.radius = 10;
13 + const {
14 + properties: { isDisabledNode },
15 + } = this;
16 + if (!isDisabledNode) {
17 + // 单独为非禁用的元素设置菜单。
18 + this.menu = [
19 + {
20 + className: "lf-menu-delete",
21 + icon: true,
22 + text: "delete",
23 + callback: (node) => {
24 + this.graphModel.deleteNode(node.id);
25 + this.graphModel.eventCenter.emit("custom:event", node);
26 + },
27 + },
28 + {
29 + text: "edit",
30 + className: "lf-menu-item",
31 + callback: (node) => {
32 + this.graphModel.setElementStateById(node.id, 2);
33 + },
34 + },
35 + {
36 + text: "copy",
37 + className: "lf-menu-item",
38 + callback: (node) => {
39 + this.graphModel.cloneNode(node.id);
40 + },
41 + },
42 + ];
43 + }
44 + }
45 +
46 + // 添加 getNodeStyle 方法
47 + getNodeStyle() {
48 + const style = super.getNodeStyle();
49 + style.stroke = "#1E90FF";
50 + style.fill = "#F0F8FF";
51 + return style;
52 + }
53 +}
54 +
55 +class CustomNode extends RectNode {
56 + getNodeStyle() {
57 + const style = super.getNodeStyle();
58 + const {
59 + properties: { isDisabledNode },
60 + } = this.props.model;
61 + if (isDisabledNode) {
62 + style.cursor = "not-allowed";
63 + }
64 + return style;
65 + }
66 +}
67 +
68 +export default {
69 + type: "custom-node",
70 + view: CustomNode,
71 + model: CustomModel,
72 +};
1 +<!--
2 + * @Date: 2025-03-10 16:52:35
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-03-13 16:51:49
5 + * @FilePath: /logic-flow2/src/views/adv-menu/index.vue
6 + * @Description: 拖拽面板
7 +-->
8 +<template>
9 + <div class="container">
10 + <div ref="container" class="flow-container"></div>
11 + </div>
12 +</template>
13 +
14 +<script setup>
15 +import LogicFlow from "@logicflow/core";
16 +import customNode from "./customNode";
17 +import customEdge from "./customEdge";
18 +
19 +const container = ref(null);
20 +let lf = null;
21 +
22 +onMounted(() => {
23 + lf = new LogicFlow({
24 + container: container.value,
25 + grid: true,
26 + });
27 +
28 + lf.register(customNode);
29 + lf.register(customEdge);
30 +
31 + // 设置默认边的类型为自定义边类型
32 + lf.setDefaultEdgeType("custom_edge");
33 +
34 + lf.on("custom:event", (r) => {
35 + console.log(r);
36 + });
37 +
38 + /**
39 + * 根据菜单结构中的 class 覆盖原有样式，设置符合宿主风格的样式。
40 + * 菜单：lf-menu
41 + * 菜单项：lf-menu-item、用户自定义的 className
42 + * 菜单项-文案：lf-menu-item-text
43 + * 菜单项-图标：lf-menu-item-icon,需要将菜单项配置 icon 设置为 true 通过设置这些 class，可以覆盖默认样式，美化字体颜色，设置菜单项 icon 等。
44 + */
45 +
46 + // TAG: 以上介绍的菜单配置必须在 lf.render()之前调用。
47 + lf.render({
48 + nodes: [
49 + { id: "node1", type: "rect", x: 200, y: 100 },
50 + { id: "node2", type: "circle", x: 400, y: 100 },
51 + { id: "node3", type: "custom-node", x: 600, y: 100 },
52 + ],
53 + edges: [{ id: "edge1", sourceNodeId: "node1", targetNodeId: "node2" }],
54 + });
55 +});
56 +</script>
57 +
58 +<style scoped>
59 +.container {
60 + width: 100vw;
61 + height: 100vh;
62 + display: flex;
63 + flex-direction: column;
64 +}
65 +
66 +.flow-container {
67 + flex: 1;
68 + width: 100%;
69 + height: 100%;
70 +}
71 +
72 +:deep(.lf-menu-delete .lf-menu-item-icon) {
73 + display: inline-block;
74 + width: 20px;
75 + height: 20px;
76 + background: url("https://pic.616pic.com/ys_img/00/05/00/YgOv6ujQ2V.jpg") no-repeat;
77 + background-size: 20px;
78 +}
79 +</style>
1 <!-- 1 <!--
2 * @Date: 2025-03-10 14:37:31 2 * @Date: 2025-03-10 14:37:31
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-13 12:14:50 4 + * @LastEditTime: 2025-03-13 16:20:14
5 * @FilePath: /logic-flow2/src/views/home.vue 5 * @FilePath: /logic-flow2/src/views/home.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
21 <el-button type="primary" @click="goTo('adv-node-rule')">adv-node-rule</el-button> 21 <el-button type="primary" @click="goTo('adv-node-rule')">adv-node-rule</el-button>
22 <el-button type="primary" @click="goTo('adv-node-anchor')">adv-node-anchor</el-button> 22 <el-button type="primary" @click="goTo('adv-node-anchor')">adv-node-anchor</el-button>
23 <el-button type="primary" @click="goTo('adv-edge-animation')">adv-edge-animation</el-button> 23 <el-button type="primary" @click="goTo('adv-edge-animation')">adv-edge-animation</el-button>
24 + <el-button type="primary" @click="goTo('adv-menu')">adv-menu</el-button>
24 </template> 25 </template>
25 26
26 <script setup> 27 <script setup>
......
1 <!-- 1 <!--
2 * @Date: 2025-03-10 14:37:31 2 * @Date: 2025-03-10 14:37:31
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-10 16:38:24 4 + * @LastEditTime: 2025-03-13 15:44:45
5 * @FilePath: /logic-flow2/src/views/menu.vue 5 * @FilePath: /logic-flow2/src/views/menu.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -78,18 +78,18 @@ onMounted(() => { ...@@ -78,18 +78,18 @@ onMounted(() => {
78 ], 78 ],
79 }) 79 })
80 // 如果默认菜单中存在不需要的选项，或者无法满足需求，可以通过lf.setMenuConfig重置菜单，更换为自定义菜单。 80 // 如果默认菜单中存在不需要的选项，或者无法满足需求，可以通过lf.setMenuConfig重置菜单，更换为自定义菜单。
81 - lf.extension.menu.setMenuConfig({ 81 + // lf.extension.menu.setMenuConfig({
82 - nodeMenu: [ 82 + // nodeMenu: [
83 - { 83 + // {
84 - text: "删除", 84 + // text: "删除",
85 - callback(node) { 85 + // callback(node) {
86 - lf.deleteNode(node.id); 86 + // lf.deleteNode(node.id);
87 - }, 87 + // },
88 - }, 88 + // },
89 - ], // 覆盖默认的节点右键菜单 89 + // ], // 覆盖默认的节点右键菜单
90 - edgeMenu: false, // 删除默认的边右键菜单 90 + // edgeMenu: false, // 删除默认的边右键菜单
91 - graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样 91 + // graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样
92 - }); 92 + // });
93 93
94 // 注册自定义节点 94 // 注册自定义节点
95 lf.register({ 95 lf.register({
......