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
/*
* @Date: 2025-03-10 13:15:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-13 12:13:02
* @LastEditTime: 2025-03-13 16:20:00
* @FilePath: /logic-flow2/src/router/index.js
* @Description: 文件描述
*/
......@@ -85,6 +85,11 @@ const router = createRouter({
name: 'adv-edge-animation',
component: () => import('../views/adv-edge/animation/index.vue')
},
{
path: '/adv-menu',
name: 'adv-menu',
component: () => import('../views/adv-menu/index.vue')
},
]
})
......
/*
* @Date: 2025-03-13 16:17:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-13 16:21:47
* @FilePath: /logic-flow2/src/views/adv-menu/customEdge.js
* @Description: 文件描述
*/
import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
class CustomModel extends PolylineEdgeModel {
setAttributes() {
// 右键菜单
this.menu = [
{
className: "lf-menu-delete",
icon: true,
callback: (edge) => {
const comfirm = window.confirm("你确定要删除吗？");
comfirm && this.graphModel.deleteEdgeById(edge.id);
},
},
];
}
}
export default {
type: "custom_edge",
view: PolylineEdge,
model: CustomModel,
};
/*
* @Date: 2025-03-13 16:11:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-13 17:09:32
* @FilePath: /logic-flow2/src/views/adv-menu/customNode.js
* @Description: 文件描述
*/
import { RectNode, RectNodeModel } from "@logicflow/core";
class CustomModel extends RectNodeModel {
setAttributes() {
this.radius = 10;
const {
properties: { isDisabledNode },
} = this;
if (!isDisabledNode) {
// 单独为非禁用的元素设置菜单。
this.menu = [
{
className: "lf-menu-delete",
icon: true,
text: "delete",
callback: (node) => {
this.graphModel.deleteNode(node.id);
this.graphModel.eventCenter.emit("custom:event", node);
},
},
{
text: "edit",
className: "lf-menu-item",
callback: (node) => {
this.graphModel.setElementStateById(node.id, 2);
},
},
{
text: "copy",
className: "lf-menu-item",
callback: (node) => {
this.graphModel.cloneNode(node.id);
},
},
];
}
}
// 添加 getNodeStyle 方法
getNodeStyle() {
const style = super.getNodeStyle();
style.stroke = "#1E90FF";
style.fill = "#F0F8FF";
return style;
}
}
class CustomNode extends RectNode {
getNodeStyle() {
const style = super.getNodeStyle();
const {
properties: { isDisabledNode },
} = this.props.model;
if (isDisabledNode) {
style.cursor = "not-allowed";
}
return style;
}
}
export default {
type: "custom-node",
view: CustomNode,
model: CustomModel,
};
<!--
* @Date: 2025-03-10 16:52:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-13 16:51:49
* @FilePath: /logic-flow2/src/views/adv-menu/index.vue
* @Description: 拖拽面板
-->
<template>
<div class="container">
<div ref="container" class="flow-container"></div>
</div>
</template>
<script setup>
import LogicFlow from "@logicflow/core";
import customNode from "./customNode";
import customEdge from "./customEdge";
const container = ref(null);
let lf = null;
onMounted(() => {
lf = new LogicFlow({
container: container.value,
grid: true,
});
lf.register(customNode);
lf.register(customEdge);
// 设置默认边的类型为自定义边类型
lf.setDefaultEdgeType("custom_edge");
lf.on("custom:event", (r) => {
console.log(r);
});
/**
* 根据菜单结构中的 class 覆盖原有样式，设置符合宿主风格的样式。
* 菜单：lf-menu
* 菜单项：lf-menu-item、用户自定义的 className
* 菜单项-文案：lf-menu-item-text
* 菜单项-图标：lf-menu-item-icon,需要将菜单项配置 icon 设置为 true 通过设置这些 class，可以覆盖默认样式，美化字体颜色，设置菜单项 icon 等。
*/
// TAG: 以上介绍的菜单配置必须在 lf.render()之前调用。
lf.render({
nodes: [
{ id: "node1", type: "rect", x: 200, y: 100 },
{ id: "node2", type: "circle", x: 400, y: 100 },
{ id: "node3", type: "custom-node", x: 600, 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%;
}
:deep(.lf-menu-delete .lf-menu-item-icon) {
display: inline-block;
width: 20px;
height: 20px;
background: url("https://pic.616pic.com/ys_img/00/05/00/YgOv6ujQ2V.jpg") no-repeat;
background-size: 20px;
}
</style>
<!--
* @Date: 2025-03-10 14:37:31
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-13 12:14:50
* @LastEditTime: 2025-03-13 16:20:14
* @FilePath: /logic-flow2/src/views/home.vue
* @Description: 文件描述
-->
......@@ -21,6 +21,7 @@
<el-button type="primary" @click="goTo('adv-node-rule')">adv-node-rule</el-button>
<el-button type="primary" @click="goTo('adv-node-anchor')">adv-node-anchor</el-button>
<el-button type="primary" @click="goTo('adv-edge-animation')">adv-edge-animation</el-button>
<el-button type="primary" @click="goTo('adv-menu')">adv-menu</el-button>
</template>
<script setup>
......
<!--
* @Date: 2025-03-10 14:37:31
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-10 16:38:24
* @LastEditTime: 2025-03-13 15:44:45
* @FilePath: /logic-flow2/src/views/menu.vue
* @Description: 文件描述
-->
......@@ -78,18 +78,18 @@ onMounted(() => {
],
})
// 如果默认菜单中存在不需要的选项，或者无法满足需求，可以通过lf.setMenuConfig重置菜单，更换为自定义菜单。
lf.extension.menu.setMenuConfig({
nodeMenu: [
{
text: "删除",
callback(node) {
lf.deleteNode(node.id);
},
},
], // 覆盖默认的节点右键菜单
edgeMenu: false, // 删除默认的边右键菜单
graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样
});
// lf.extension.menu.setMenuConfig({
// nodeMenu: [
// {
// text: "删除",
// callback(node) {
// lf.deleteNode(node.id);
// },
// },
// ], // 覆盖默认的节点右键菜单
// edgeMenu: false, // 删除默认的边右键菜单
// graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样
// });
// 注册自定义节点
lf.register({
......