Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0aa8a6e5 1 parent 3f611d61

新增自定义节点的behavior

Inline Side-by-side
Showing 3 changed files with 58 additions and 17 deletions
...@@ -68,7 +68,7 @@ Item.prototype.hideAnchor = function (graph) { ...@@ -68,7 +68,7 @@ Item.prototype.hideAnchor = function (graph) {
68 this.anchorDebounceTimer = null 68 this.anchorDebounceTimer = null
69 graph.paint() 69 graph.paint()
70 } catch (e) { 70 } catch (e) {
71 - 71 + // console.error(e)
72 } 72 }
73 }, 100) 73 }, 100)
74 } 74 }
......
1 /* 1 /*
2 * @Date: 2023-10-27 09:29:59 2 * @Date: 2023-10-27 09:29:59
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-11-14 11:16:04 4 + * @LastEditTime: 2023-11-14 15:31:33
5 * @FilePath: /vue-flow-editor/src/shape/control.ts 5 * @FilePath: /vue-flow-editor/src/shape/control.ts
6 * @Description: 自定义控制节点 6 * @Description: 自定义控制节点
7 */ 7 */
...@@ -11,10 +11,46 @@ import {BASE_COLOR} from "@/utils/styles"; ...@@ -11,10 +11,46 @@ import {BASE_COLOR} from "@/utils/styles";
11 export function registerControl(G6) { 11 export function registerControl(G6) {
12 G6.registerNode('control', { 12 G6.registerNode('control', {
13 options: { 13 options: {
14 - style: {}, 14 + style: {
15 - stateStyles: {}, 15 + },
16 + stateStyles: {
17 + },
18 + },
19 + // 响应状态变化
20 + setState(name, value, item) {
21 + const group = item.getContainer();
22 + const shape = group.get('children')[0]; // 顺序根据 draw 时确定
23 + if (name === 'selected') {
24 + if (value) {
25 + shape.attr('stroke', '#3A72F6');
26 + } else {
27 + shape.attr('stroke', '');
28 + }
29 + }
30 + if (name === 'hover') {
31 + if (value) {
32 + shape.attr('cursor', 'pointer');
33 + } else {
34 + shape.attr('cursor', '');
35 + }
36 + }
37 + },
38 + getPath(cfg) {
39 + const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小
40 + const width = size[0];
41 + const height = size[1];
42 + // / 1 \
43 + // 4 2
44 + // \ 3 /
45 + const path = [
46 + ['M', 0, 0 - height / 2], // 上部顶点
47 + ['L', width / 2, 0], // 右侧顶点
48 + ['L', 0, height / 2], // 下部顶点
49 + ['L', -width / 2, 0], // 左侧顶点
50 + ['Z'], // 封闭
51 + ];
52 + return path;
16 }, 53 },
17 - setState() {},
18 drawShape(cfg, group) { // 继承了基类，可以使用drawShape，如果没有继承，必须要有draw 54 drawShape(cfg, group) { // 继承了基类，可以使用drawShape，如果没有继承，必须要有draw
19 55
20 let {text, desc, img, color} = cfg 56 let {text, desc, img, color} = cfg
...@@ -28,22 +64,27 @@ export function registerControl(G6) { ...@@ -28,22 +64,27 @@ export function registerControl(G6) {
28 type: 'rect', 64 type: 'rect',
29 attrs: {fill: 'white', x: -width / 2, y: -height / 2, width, height, shadowColor: '#BFC5D2', shadowBlur: 50}, 65 attrs: {fill: 'white', x: -width / 2, y: -height / 2, width, height, shadowColor: '#BFC5D2', shadowBlur: 50},
30 }, 66 },
31 - sideRect: { 67 + // 模拟一个菱形
32 - type: 'rect', 68 + // keyShape: {
33 - attrs: {x: -width / 2, y: -height / 2, width: 6, height, fill: color}, 69 + // type: 'path',
34 - }, 70 + // attrs: {path: this.getPath(cfg),fill: 'white', x: -width / 2, y: -height / 2, width, height, shadowColor: '#BFC5D2', shadowBlur: 50},
71 + // },
72 + // sideRect: {
73 + // type: 'rect',
74 + // attrs: {x: -width / 2, y: -height / 2, width: 6, height, fill: color},
75 + // },
35 img: { 76 img: {
36 type: 'image', 77 type: 'image',
37 attrs: {x: height / 4 - width / 2, y: height / 4 - height / 2, width: height / 2, height: height / 2, img}, 78 attrs: {x: height / 4 - width / 2, y: height / 4 - height / 2, width: height / 2, height: height / 2, img},
38 }, 79 },
39 label: { 80 label: {
40 type: 'text', 81 type: 'text',
41 - attrs: {text, x: height - width / 2, y: height * (3 / 8) - height / 2, fontSize: 16, textAlign: 'left', textBaseline: 'middle', fill: 'black'}, 82 + attrs: {text, x: height - width / 2, y: height * (4 / 8) - height / 2, fontSize: 14, textAlign: 'left', textBaseline: 'middle', fill: 'black'},
42 - },
43 - desc: {
44 - type: 'text',
45 - attrs: {text: desc, x: height - width / 2, y: height * (5 / 8) - height / 2, fontSize: 12, textAlign: 'left', textBaseline: 'middle', fill: '#999'},
46 }, 83 },
84 + // desc: {
85 + // type: 'text',
86 + // attrs: {text: desc, x: height - width / 2, y: height * (5 / 8) - height / 2, fontSize: 12, textAlign: 'left', textBaseline: 'middle', fill: '#999'},
87 + // },
47 } 88 }
48 89
49 const addShapes = {} 90 const addShapes = {}
...@@ -68,10 +109,10 @@ export function registerControl(G6) { ...@@ -68,10 +109,10 @@ export function registerControl(G6) {
68 }, 109 },
69 update(cfg, group) { 110 update(cfg, group) {
70 group = group.getContainer() 111 group = group.getContainer()
71 - group.shapes.sideRect.attr({fill: cfg.color}) 112 + // group.shapes.sideRect.attr({fill: cfg.color})
72 group.shapes.img.attr({img: cfg.img}) 113 group.shapes.img.attr({img: cfg.img})
73 group.shapes.label.attr({text: cfg.text}) 114 group.shapes.label.attr({text: cfg.text})
74 - group.shapes.desc.attr({text: cfg.desc}) 115 + // group.shapes.desc.attr({text: cfg.desc})
75 }, 116 },
76 }, 'single-shape') // 继承了 single-shape 的基类 117 }, 'single-shape') // 继承了 single-shape 的基类
77 } 118 }
......
...@@ -37,7 +37,7 @@ export const DEFAULT_SIZE = { // 不同类型的默认宽高 ...@@ -37,7 +37,7 @@ export const DEFAULT_SIZE = { // 不同类型的默认宽高
37 star: [80, 80], 37 star: [80, 80],
38 // TAG: 自定义节点 - 自定义属性 38 // TAG: 自定义节点 - 自定义属性
39 activity: [200, 80], 39 activity: [200, 80],
40 - control: [200, 80], 40 + control: [130, 40],
41 } 41 }
42 42
43 export function formatPos(option: { x: number, y: number, size: [number, number], shape: string }): { x: number, y: number, size: [number, number], shape } { 43 export function formatPos(option: { x: number, y: number, size: [number, number], shape: string }): { x: number, y: number, size: [number, number], shape } {
......