Hooke / logic-flow2

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c454a2b2 1 parent 7ae260cc

node节点操作

Inline Side-by-side
Showing 14 changed files with 726 additions and 6 deletions
......@@ -16,6 +16,7 @@
"autoprefixer": "^10.4.21",
"echarts": "^5.6.0",
"element-plus": "^2.9.6",
"lodash-es": "^4.17.21",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.12",
"vue": "^3.5.13",
......@@ -23,6 +24,7 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"less": "^4.2.2",
"sass-embedded": "^1.85.1",
"unplugin-auto-import": "^19.1.1",
"vite": "^6.2.0",
......@@ -1336,6 +1338,18 @@
"integrity": "sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==",
"dev": true
},
"node_modules/copy-anything": {
"version": "2.0.6",
"resolved": "https://mirrors.cloud.tencent.com/npm/copy-anything/-/copy-anything-2.0.6.tgz",
"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
"dev": true,
"dependencies": {
"is-what": "^3.14.1"
},
"funding": {
"url": "https://github.com/sponsors/mesqueeb"
}
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://mirrors.cloud.tencent.com/npm/csstype/-/csstype-3.1.3.tgz",
......@@ -1398,6 +1412,19 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/errno": {
"version": "0.1.8",
"resolved": "https://mirrors.cloud.tencent.com/npm/errno/-/errno-0.1.8.tgz",
"integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
"dev": true,
"optional": true,
"dependencies": {
"prr": "~1.0.1"
},
"bin": {
"errno": "cli.js"
}
},
"node_modules/es-module-lexer": {
"version": "1.6.0",
"resolved": "https://mirrors.cloud.tencent.com/npm/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
......@@ -1571,6 +1598,13 @@
"node": ">= 6"
}
},
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://mirrors.cloud.tencent.com/npm/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"dev": true,
"optional": true
},
"node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://mirrors.cloud.tencent.com/npm/has-flag/-/has-flag-4.0.0.tgz",
......@@ -1585,6 +1619,32 @@
"resolved": "https://mirrors.cloud.tencent.com/npm/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
},
"node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://mirrors.cloud.tencent.com/npm/iconv-lite/-/iconv-lite-0.6.3.tgz",
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
"dev": true,
"optional": true,
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/image-size": {
"version": "0.5.5",
"resolved": "https://mirrors.cloud.tencent.com/npm/image-size/-/image-size-0.5.5.tgz",
"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
"dev": true,
"optional": true,
"bin": {
"image-size": "bin/image-size.js"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/immutable": {
"version": "5.0.3",
"resolved": "https://mirrors.cloud.tencent.com/npm/immutable/-/immutable-5.0.3.tgz",
......@@ -1621,12 +1681,44 @@
"node": ">=0.12.0"
}
},
"node_modules/is-what": {
"version": "3.14.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/is-what/-/is-what-3.14.1.tgz",
"integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
"dev": true
},
"node_modules/js-tokens": {
"version": "9.0.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/js-tokens/-/js-tokens-9.0.1.tgz",
"integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
"dev": true
},
"node_modules/less": {
"version": "4.2.2",
"resolved": "https://mirrors.cloud.tencent.com/npm/less/-/less-4.2.2.tgz",
"integrity": "sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==",
"dev": true,
"dependencies": {
"copy-anything": "^2.0.1",
"parse-node-version": "^1.0.1",
"tslib": "^2.3.0"
},
"bin": {
"lessc": "bin/lessc"
},
"engines": {
"node": ">=6"
},
"optionalDependencies": {
"errno": "^0.1.1",
"graceful-fs": "^4.1.2",
"image-size": "~0.5.0",
"make-dir": "^2.1.0",
"mime": "^1.4.1",
"needle": "^3.1.0",
"source-map": "~0.6.0"
}
},
"node_modules/local-pkg": {
"version": "1.1.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/local-pkg/-/local-pkg-1.1.1.tgz",
......@@ -1673,6 +1765,20 @@
"@jridgewell/sourcemap-codec": "^1.5.0"
}
},
"node_modules/make-dir": {
"version": "2.1.0",
"resolved": "https://mirrors.cloud.tencent.com/npm/make-dir/-/make-dir-2.1.0.tgz",
"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
"dev": true,
"optional": true,
"dependencies": {
"pify": "^4.0.1",
"semver": "^5.6.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/medium-editor": {
"version": "5.23.3",
"resolved": "https://mirrors.cloud.tencent.com/npm/medium-editor/-/medium-editor-5.23.3.tgz",
......@@ -1717,6 +1823,19 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/mime": {
"version": "1.6.0",
"resolved": "https://mirrors.cloud.tencent.com/npm/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
"dev": true,
"optional": true,
"bin": {
"mime": "cli.js"
},
"engines": {
"node": ">=4"
}
},
"node_modules/mlly": {
"version": "1.7.4",
"resolved": "https://mirrors.cloud.tencent.com/npm/mlly/-/mlly-1.7.4.tgz",
......@@ -1798,6 +1917,23 @@
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/needle": {
"version": "3.3.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/needle/-/needle-3.3.1.tgz",
"integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
"dev": true,
"optional": true,
"dependencies": {
"iconv-lite": "^0.6.3",
"sax": "^1.2.4"
},
"bin": {
"needle": "bin/needle"
},
"engines": {
"node": ">= 4.4.x"
}
},
"node_modules/node-releases": {
"version": "2.0.19",
"resolved": "https://mirrors.cloud.tencent.com/npm/node-releases/-/node-releases-2.0.19.tgz",
......@@ -1816,6 +1952,15 @@
"resolved": "https://mirrors.cloud.tencent.com/npm/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
},
"node_modules/parse-node-version": {
"version": "1.0.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/parse-node-version/-/parse-node-version-1.0.1.tgz",
"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
"dev": true,
"engines": {
"node": ">= 0.10"
}
},
"node_modules/pathe": {
"version": "2.0.3",
"resolved": "https://mirrors.cloud.tencent.com/npm/pathe/-/pathe-2.0.3.tgz",
......@@ -1840,6 +1985,16 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/pify": {
"version": "4.0.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/pify/-/pify-4.0.1.tgz",
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
"dev": true,
"optional": true,
"engines": {
"node": ">=6"
}
},
"node_modules/pkg-types": {
"version": "2.1.0",
"resolved": "https://mirrors.cloud.tencent.com/npm/pkg-types/-/pkg-types-2.1.0.tgz",
......@@ -1892,6 +2047,13 @@
"url": "https://opencollective.com/preact"
}
},
"node_modules/prr": {
"version": "1.0.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/prr/-/prr-1.0.1.tgz",
"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
"dev": true,
"optional": true
},
"node_modules/quansync": {
"version": "0.2.8",
"resolved": "https://mirrors.cloud.tencent.com/npm/quansync/-/quansync-0.2.8.tgz",
......@@ -2014,6 +2176,13 @@
"tslib": "^2.1.0"
}
},
"node_modules/safer-buffer": {
"version": "2.1.2",
"resolved": "https://mirrors.cloud.tencent.com/npm/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true,
"optional": true
},
"node_modules/sass-embedded": {
"version": "1.85.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/sass-embedded/-/sass-embedded-1.85.1.tgz",
......@@ -2378,12 +2547,39 @@
"node": ">=14.0.0"
}
},
"node_modules/sax": {
"version": "1.4.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/sax/-/sax-1.4.1.tgz",
"integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
"dev": true,
"optional": true
},
"node_modules/scule": {
"version": "1.3.0",
"resolved": "https://mirrors.cloud.tencent.com/npm/scule/-/scule-1.3.0.tgz",
"integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
"dev": true
},
"node_modules/semver": {
"version": "5.7.2",
"resolved": "https://mirrors.cloud.tencent.com/npm/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true,
"optional": true,
"bin": {
"semver": "bin/semver"
}
},
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"optional": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://mirrors.cloud.tencent.com/npm/source-map-js/-/source-map-js-1.2.1.tgz",
......
......@@ -17,6 +17,7 @@
"autoprefixer": "^10.4.21",
"echarts": "^5.6.0",
"element-plus": "^2.9.6",
"lodash-es": "^4.17.21",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.12",
"vue": "^3.5.13",
......@@ -24,6 +25,7 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"less": "^4.2.2",
"sass-embedded": "^1.85.1",
"unplugin-auto-import": "^19.1.1",
"vite": "^6.2.0",
......
/*
* @Date: 2025-03-10 13:07:05
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-10 18:07:51
* @LastEditTime: 2025-03-11 17:23:23
* @FilePath: /logic-flow2/src/main.js
* @Description: 文件描述
*/
......@@ -10,6 +10,7 @@ import './style.css'
import App from './App.vue'
import router from './router'
import "@logicflow/core/lib/style/index.css";
import '@logicflow/core/es/index.css'
import '@logicflow/extension/lib/style/index.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
......@@ -19,7 +20,7 @@ import { Menu, DndPanel, SelectionSelect, Control, InsertNodeInPolyline, Highlig
LogicFlow.use(Menu) // 右键菜单
LogicFlow.use(DndPanel) // 拖拽面板
LogicFlow.use(SelectionSelect) // 选中元素
LogicFlow.use(Control) // 控制面板
// LogicFlow.use(Control) // 控制面板
LogicFlow.use(InsertNodeInPolyline) // 边上插入节点
LogicFlow.use(Highlight) // 高亮
......
/*
* @Date: 2025-03-10 13:15:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-10 17:13:56
* @LastEditTime: 2025-03-11 17:45:38
* @FilePath: /logic-flow2/src/router/index.js
* @Description: 文件描述
*/
......@@ -30,6 +30,21 @@ const router = createRouter({
name: 'control',
component: () => import('../views/control.vue')
},
{
path: '/node-model',
name: 'node-model',
component: () => import('../views/node-model/index.vue')
},
{
path: '/node-view',
name: 'node-view',
component: () => import('../views/node-view/index.vue')
},
{
path: '/node-vue',
name: 'node-vue',
component: () => import('../views/node-vue/index.vue')
}
]
})
......
<!--
* @Date: 2025-03-10 14:37:31
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-10 17:14:06
* @LastEditTime: 2025-03-11 17:46:33
* @FilePath: /logic-flow2/src/views/home.vue
* @Description: 文件描述
-->
......@@ -10,6 +10,9 @@
<el-button type="primary" @click="goTo('menu')">Menu</el-button>
<el-button type="primary" @click="goTo('DndPanel')">DndPanel</el-button>
<el-button type="primary" @click="goTo('control')">control</el-button>
<el-button type="primary" @click="goTo('node-model')">node-model</el-button>
<el-button type="primary" @click="goTo('node-view')">node-view</el-button>
<el-button type="primary" @click="goTo('node-vue')">node-vue</el-button>
</template>
<script setup>
......
/*
* @Date: 2025-03-11 15:09:41
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-11 15:36:53
* @FilePath: /logic-flow2/src/views/node/customRect.js
* @Description: 文件描述
*/
import { RectNode, RectNodeModel } from '@logicflow/core';
class CustomRectModel extends RectNodeModel {
getNodeStyle() {
const style = super.getNodeStyle();
const properties = this.properties;
if (properties.status === 'pass') {
// 业务属性status为‘pass’时 展示边框颜色为green
style.stroke = 'green';
} else if (properties.status === 'reject') {
// 业务属性status为‘reject’时 展示边框颜色为red
style.stroke = 'red';
} else {
style.stroke = 'rgb(24, 125, 255)';
}
return style;
}
}
class CustomRectNode extends RectNode {}
export default {
type: 'custom-rect',
view: CustomRectNode,
model: CustomRectModel,
};
/*
* @Date: 2025-03-11 15:09:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-11 15:45:06
* @FilePath: /logic-flow2/src/views/node/data.js
* @Description: 文件描述
*/
export default {
nodes: [
{
id: '1',
type: 'custom-rect',
x: 100,
y: 100,
text: 'default',
properties: {
width: 70,
height: 70,
},
},
{
id: '2',
type: 'custom-rect',
x: 300,
y: 100,
text: 'pass',
properties: {
status: 'pass', // 业务属性
width: 100, // 形状属性
height: 100,
radius: 20,
style: {
// 样式属性
strokeWidth: 5,
},
},
},
{
id: '3',
type: 'custom-rect',
x: 500,
y: 100,
text: 'reject',
properties: {
status: 'reject',
width: 130,
height: 130,
},
},
],
};
<!--
* @Date: 2025-03-11 15:07:29
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-11 16:18:37
* @FilePath: /logic-flow2/src/views/node/index.vue
* @Description: 自定义节点model
-->
<template>
<div class="container">
<div ref="container" class="flow-container"></div>
</div>
</template>
<script setup>
import LogicFlow from '@logicflow/core';
import UserTask from './customRect';
import data from './data';
const SilentConfig = {
isSilentMode: true,
stopScrollGraph: true,
stopMoveGraph: true,
stopZoomGraph: true,
adjustNodePosition: true,
};
const container = ref(null);
let lf = null;
onMounted(() => {
lf = new LogicFlow({
container: container.value,
grid: true,
...SilentConfig,
});
lf.register(UserTask);
lf.render(data);
lf.translateCenter();
});
</script>
<style scoped>
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.flow-container {
flex: 1;
width: 100%;
height: 100%;
}
</style>
/*
* @Date: 2025-03-11 15:09:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-11 16:23:53
* @FilePath: /logic-flow2/src/views/node-view/data.js
* @Description: 文件描述
*/
const data = {
nodes: [
{
id: 'node_id_1',
type: 'UserTask',
x: 100,
y: 100,
text: { x: 100, y: 100, value: '节点1' },
properties: {
width: 100,
height: 100,
scale: 1, // 自定义放大倍数
isClicked: false, // 自定义是否被点击
},
},
{
id: 'node_id_2',
type: 'circle',
x: 200,
y: 300,
text: { x: 200, y: 300, value: '节点2' },
},
],
edges: [
{
id: 'edge_id',
type: 'polyline',
sourceNodeId: 'node_id_1',
targetNodeId: 'node_id_2',
text: { x: 139, y: 200, value: '连线' },
startPoint: { x: 100, y: 140 },
endPoint: { x: 200, y: 250 },
pointsList: [
{ x: 100, y: 140 },
{ x: 100, y: 200 },
{ x: 200, y: 200 },
{ x: 200, y: 250 },
],
},
],
};
export default data;
.helloworld-app {
width: 100%;
.app-content {
height: 380px;
}
}
.viewport {
position: relative;
height: 80vh;
overflow: hidden;
}
<!--
* @Date: 2025-03-11 15:07:29
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-11 16:21:43
* @FilePath: /logic-flow2/src/views/node-view/index.vue
* @Description: 自定义节点model
-->
<template>
<div class="container">
<div ref="container" class="flow-container"></div>
</div>
</template>
<script setup>
import LogicFlow from '@logicflow/core';
import UserTask from './userTask';
import data from './data';
import './index.less';
const SilentConfig = {
stopScrollGraph: true,
stopMoveGraph: true,
stopZoomGraph: true,
};
const container = ref(null);
let lf = null;
onMounted(() => {
lf = new LogicFlow({
container: container.value,
grid: true,
...SilentConfig,
});
lf.register(UserTask);
lf.render(data);
lf.translateCenter();
// node 点击事件
lf.on('node:click', ({ data }) => {
lf.setProperties(data.id, {
// 改变业务属性
isClicked: !data.properties.isClicked,
scale: 0.8, // 缩小
});
});
});
</script>
<style scoped>
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.flow-container {
flex: 1;
width: 100%;
height: 100%;
}
</style>
/*
* @Date: 2025-03-11 16:21:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-11 16:42:03
* @FilePath: /logic-flow2/src/views/node-view/userTask.js
* @Description: 文件描述
*/
import { RectNode, RectNodeModel, h } from '@logicflow/core';
class UserTaskView extends RectNode {
// 自定义一个用户图案
getLabelShape() {
const { model } = this.props;
const { x, y, width, height } = model;
const style = model.getNodeStyle();
return h(
'svg',
{
x: x - width / 2 + 5,
y: y - height / 2 + 5,
width: 25,
height: 25,
viewBox: '0 0 1274 1024',
},
[
h('path', {
fill: style.stroke,
d: 'M690.366075 350.568358c0-98.876614-79.937349-179.048571-178.558027-179.048571-98.59935 0-178.515371 80.150629-178.515371 179.048571 0 98.833958 79.916021 178.963259 178.515371 178.963259C610.428726 529.531617 690.366075 449.380988 690.366075 350.568358M376.140632 350.568358c0-75.159877 60.72082-136.072649 135.667416-136.072649 74.989253 0 135.667416 60.912772 135.667416 136.072649 0 75.117221-60.678164 136.029993-135.667416 136.029993C436.861451 486.577022 376.140632 425.664251 376.140632 350.568358M197.284012 762.923936 197.284012 778.472049l15.526785 0 291.255186 0.127968L819.784387 778.472049l15.569441 0 0-15.548113c0-139.783721-136.413897-285.581938-311.026243-273.275681-10.002833 0.703824-24.740482 9.128385-34.658002 9.938849-8.573857 0.74648 13.692577 8.232609 14.396401 16.827793 9.021745-0.789136 6.313088 13.095393 15.505457 13.095393 150.597017 0 263.14488 103.07823 263.14488 224.62651l15.441473-15.590769-285.816546-0.042656-278.991585 1.81288 15.526785 15.612097c0-82.752645 75.095893-152.70849 136.861785-191.824044 7.25152-4.58552 8.659169-17.659585 4.862784-22.906273-6.846288-9.426977-19.877697-8.701825-28.046322-6.014496C285.262018 560.521203 197.284012 667.758394 197.284012 762.923936',
}),
h('path', {
fill: style.stroke,
d: 'M512.31992 1.535616c-282.766642 0-512.021328 228.89211-512.021328 511.210864 0 282.46805 229.254686 511.25352 512.021328 511.25352 117.431975 0 228.828126-39.606098 318.810964-111.204199 10.791969-8.488545 12.540865-24.22861 3.988336-34.99925-8.616513-10.770641-24.356578-12.540865-35.127218-3.94568-81.174373 64.538532-181.586603 100.241606-287.650754 100.241606-255.210864 0-462.028493-206.561693-462.028493-461.367325 0-254.762976 206.817629-461.303341 462.028493-461.303341 255.210864 0 462.092477 206.561693 462.092477 461.303341 0 87.380821-24.33525 171.093227-69.614596 243.651087-7.272848 11.645089-3.668416 27.086562 8.040657 34.35941 11.709073 7.272848 27.10789 3.62576 34.402066-7.976672 50.184787-80.406565 77.143381-173.247355 77.143381-270.055153C1024.383904 230.427726 795.10789 1.535616 512.31992 1.535616z',
}),
],
);
}
// 自定义节点外观
getShape() {
const { model } = this.props;
const { x, y, width, height, radius } = model;
const style = model.getNodeStyle();
return h('g', {}, [
h('rect', {
...style,
x: x - width / 2, // 矩形默认x，y代表左上角顶点坐标，切换为中心点
y: y - height / 2,
rx: radius,
ry: radius,
width,
height,
}),
this.getLabelShape(),
])
}
}
class UserTaskModel extends RectNodeModel {
// 设置 model 形状属性，每次 properties 发生变化会触发, 初始化 properties 也会执行
setAttributes() {
const { scale = 1, width = 100, height = 80 } = this.properties;
// 需要手动设置形状属性
this.width = width * scale;
this.height = height * scale;
}
// 自定义文本样式：依赖业务属性 isClicked 改变文本颜色
getTextStyle() {
const style = super.getTextStyle();
style.fontSize = 12;
const { isClicked } = this.properties;
style.color = isClicked ? 'red' : 'rgb(24, 125, 255)';
return style;
}
// 自定义节点样式：依赖业务属性 isClicked 改变边框颜色
getNodeStyle() {
const style = super.getNodeStyle();
const { isClicked } = this.properties;
if (isClicked) {
style.stroke = 'red';
} else {
style.stroke = 'rgb(24, 125, 255)';
}
return style;
}
// 自定义锚点样式属性：锚点（节点连线的点）
getAnchorStyle() {
const style = super.getAnchorStyle();
const newStyle = Object.assign({}, style, {
stroke: 'rgb(24, 125, 255)',
r: 3,
hover: {
r: 8,
fill: 'rgb(24, 125, 255)',
stroke: 'rgb(24, 125, 255)',
},
});
return newStyle;
}
// 自定义节点锚点拖出连接线的样式属性
getAnchorLineStyle() {
const style = super.getAnchorLineStyle();
style.stroke = 'rgb(24, 125, 255)';
return style;
}
// 自定义节点轮廓框的样式属性
getOutlineStyle() {
const style = super.getOutlineStyle();
const newStyle = Object.assign({}, style, {
stroke: 'red',
hover: {
stroke: 'red',
},
});
return newStyle;
}
}
export default {
type: 'UserTask',
view: UserTaskView,
model: UserTaskModel,
};
<!--
* @Date: 2025-03-10 16:52:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-10 16:58:14
* @LastEditTime: 2025-03-11 15:40:10
* @FilePath: /logic-flow2/src/views/temp.vue
* @Description: 拖拽面板
-->
......
......@@ -366,6 +366,13 @@ confbox@^0.2.1:
resolved "https://mirrors.cloud.tencent.com/npm/confbox/-/confbox-0.2.1.tgz"
integrity sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==
copy-anything@^2.0.1:
version "2.0.6"
resolved "https://mirrors.cloud.tencent.com/npm/copy-anything/-/copy-anything-2.0.6.tgz"
integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
dependencies:
is-what "^3.14.1"
csstype@^3.1.3:
version "3.1.3"
resolved "https://mirrors.cloud.tencent.com/npm/csstype/-/csstype-3.1.3.tgz"
......@@ -415,6 +422,13 @@ entities@^4.5.0:
resolved "https://mirrors.cloud.tencent.com/npm/entities/-/entities-4.5.0.tgz"
integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
errno@^0.1.1:
version "0.1.8"
resolved "https://mirrors.cloud.tencent.com/npm/errno/-/errno-0.1.8.tgz"
integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
dependencies:
prr "~1.0.1"
es-module-lexer@^1.5.4:
version "1.6.0"
resolved "https://mirrors.cloud.tencent.com/npm/es-module-lexer/-/es-module-lexer-1.6.0.tgz"
......@@ -530,6 +544,11 @@ glob-parent@^5.1.2:
dependencies:
is-glob "^4.0.1"
graceful-fs@^4.1.2:
version "4.2.11"
resolved "https://mirrors.cloud.tencent.com/npm/graceful-fs/-/graceful-fs-4.2.11.tgz"
integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
has-flag@^4.0.0:
version "4.0.0"
resolved "https://mirrors.cloud.tencent.com/npm/has-flag/-/has-flag-4.0.0.tgz"
......@@ -540,6 +559,18 @@ hoist-non-react-statics@^2.3.1:
resolved "https://mirrors.cloud.tencent.com/npm/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz"
integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
iconv-lite@^0.6.3:
version "0.6.3"
resolved "https://mirrors.cloud.tencent.com/npm/iconv-lite/-/iconv-lite-0.6.3.tgz"
integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
dependencies:
safer-buffer ">= 2.1.2 < 3.0.0"
image-size@~0.5.0:
version "0.5.5"
resolved "https://mirrors.cloud.tencent.com/npm/image-size/-/image-size-0.5.5.tgz"
integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
immutable@^5.0.2:
version "5.0.3"
resolved "https://mirrors.cloud.tencent.com/npm/immutable/-/immutable-5.0.3.tgz"
......@@ -562,11 +593,33 @@ is-number@^7.0.0:
resolved "https://mirrors.cloud.tencent.com/npm/is-number/-/is-number-7.0.0.tgz"
integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
is-what@^3.14.1:
version "3.14.1"
resolved "https://mirrors.cloud.tencent.com/npm/is-what/-/is-what-3.14.1.tgz"
integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
js-tokens@^9.0.1:
version "9.0.1"
resolved "https://mirrors.cloud.tencent.com/npm/js-tokens/-/js-tokens-9.0.1.tgz"
integrity sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==
less@*, less@^4.2.2:
version "4.2.2"
resolved "https://mirrors.cloud.tencent.com/npm/less/-/less-4.2.2.tgz"
integrity sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==
dependencies:
copy-anything "^2.0.1"
parse-node-version "^1.0.1"
tslib "^2.3.0"
optionalDependencies:
errno "^0.1.1"
graceful-fs "^4.1.2"
image-size "~0.5.0"
make-dir "^2.1.0"
mime "^1.4.1"
needle "^3.1.0"
source-map "~0.6.0"
local-pkg@^1.0.0:
version "1.1.1"
resolved "https://mirrors.cloud.tencent.com/npm/local-pkg/-/local-pkg-1.1.1.tgz"
......@@ -598,6 +651,14 @@ magic-string@^0.30.11, magic-string@^0.30.17:
dependencies:
"@jridgewell/sourcemap-codec" "^1.5.0"
make-dir@^2.1.0:
version "2.1.0"
resolved "https://mirrors.cloud.tencent.com/npm/make-dir/-/make-dir-2.1.0.tgz"
integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
dependencies:
pify "^4.0.1"
semver "^5.6.0"
medium-editor@^5.23.3:
version "5.23.3"
resolved "https://mirrors.cloud.tencent.com/npm/medium-editor/-/medium-editor-5.23.3.tgz"
......@@ -621,6 +682,11 @@ micromatch@^4.0.8:
braces "^3.0.3"
picomatch "^2.3.1"
mime@^1.4.1:
version "1.6.0"
resolved "https://mirrors.cloud.tencent.com/npm/mime/-/mime-1.6.0.tgz"
integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
mlly@^1.7.4:
version "1.7.4"
resolved "https://mirrors.cloud.tencent.com/npm/mlly/-/mlly-1.7.4.tgz"
......@@ -658,6 +724,14 @@ nanoid@^3.3.8:
resolved "https://mirrors.cloud.tencent.com/npm/nanoid/-/nanoid-3.3.9.tgz"
integrity sha512-SppoicMGpZvbF1l3z4x7No3OlIjP7QJvC9XR7AhZr1kL133KHnKPztkKDc+Ir4aJ/1VhTySrtKhrsycmrMQfvg==
needle@^3.1.0:
version "3.3.1"
resolved "https://mirrors.cloud.tencent.com/npm/needle/-/needle-3.3.1.tgz"
integrity sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==
dependencies:
iconv-lite "^0.6.3"
sax "^1.2.4"
node-releases@^2.0.19:
version "2.0.19"
resolved "https://mirrors.cloud.tencent.com/npm/node-releases/-/node-releases-2.0.19.tgz"
......@@ -673,6 +747,11 @@ normalize-wheel-es@^1.2.0:
resolved "https://mirrors.cloud.tencent.com/npm/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz"
integrity sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==
parse-node-version@^1.0.1:
version "1.0.1"
resolved "https://mirrors.cloud.tencent.com/npm/parse-node-version/-/parse-node-version-1.0.1.tgz"
integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
pathe@^2.0.1, pathe@^2.0.2, pathe@^2.0.3:
version "2.0.3"
resolved "https://mirrors.cloud.tencent.com/npm/pathe/-/pathe-2.0.3.tgz"
......@@ -693,6 +772,11 @@ picomatch@^2.3.1:
resolved "https://mirrors.cloud.tencent.com/npm/picomatch/-/picomatch-4.0.2.tgz"
integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
pify@^4.0.1:
version "4.0.1"
resolved "https://mirrors.cloud.tencent.com/npm/pify/-/pify-4.0.1.tgz"
integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
pkg-types@^1.3.0:
version "1.3.1"
resolved "https://mirrors.cloud.tencent.com/npm/pkg-types/-/pkg-types-1.3.1.tgz"
......@@ -739,6 +823,11 @@ preact@^10.17.1, preact@>=8:
resolved "https://mirrors.cloud.tencent.com/npm/preact/-/preact-10.26.4.tgz"
integrity sha512-KJhO7LBFTjP71d83trW+Ilnjbo+ySsaAgCfXOXUlmGzJ4ygYPWmysm77yg4emwfmoz3b22yvH5IsVFHbhUaH5w==
prr@~1.0.1:
version "1.0.1"
resolved "https://mirrors.cloud.tencent.com/npm/prr/-/prr-1.0.1.tgz"
integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
quansync@^0.2.8:
version "0.2.8"
resolved "https://mirrors.cloud.tencent.com/npm/quansync/-/quansync-0.2.8.tgz"
......@@ -801,6 +890,11 @@ rxjs@^7.4.0:
dependencies:
tslib "^2.1.0"
"safer-buffer@>= 2.1.2 < 3.0.0":
version "2.1.2"
resolved "https://mirrors.cloud.tencent.com/npm/safer-buffer/-/safer-buffer-2.1.2.tgz"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
sass-embedded-darwin-arm64@1.85.1:
version "1.85.1"
resolved "https://mirrors.cloud.tencent.com/npm/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.85.1.tgz"
......@@ -841,16 +935,31 @@ sass-embedded@*, sass-embedded@^1.85.1:
sass-embedded-win32-ia32 "1.85.1"
sass-embedded-win32-x64 "1.85.1"
sax@^1.2.4:
version "1.4.1"
resolved "https://mirrors.cloud.tencent.com/npm/sax/-/sax-1.4.1.tgz"
integrity sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==
scule@^1.3.0:
version "1.3.0"
resolved "https://mirrors.cloud.tencent.com/npm/scule/-/scule-1.3.0.tgz"
integrity sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==
semver@^5.6.0:
version "5.7.2"
resolved "https://mirrors.cloud.tencent.com/npm/semver/-/semver-5.7.2.tgz"
integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
source-map-js@^1.2.0, source-map-js@^1.2.1:
version "1.2.1"
resolved "https://mirrors.cloud.tencent.com/npm/source-map-js/-/source-map-js-1.2.1.tgz"
integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
source-map@~0.6.0:
version "0.6.1"
resolved "https://mirrors.cloud.tencent.com/npm/source-map/-/source-map-0.6.1.tgz"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
strip-literal@^3.0.0:
version "3.0.0"
resolved "https://mirrors.cloud.tencent.com/npm/strip-literal/-/strip-literal-3.0.0.tgz"
......@@ -897,7 +1006,7 @@ to-regex-range@^5.0.1:
dependencies:
is-number "^7.0.0"
tslib@^2.1.0, tslib@2.3.0:
tslib@^2.1.0, tslib@^2.3.0, tslib@2.3.0:
version "2.3.0"
resolved "https://mirrors.cloud.tencent.com/npm/tslib/-/tslib-2.3.0.tgz"
integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
......