From 2a09ca6be10ef0e25fca93e40f423f9c1f1c2dec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E6=99=BA=E6=B4=B2?= <1543046129@qq.com> Date: Tue, 1 Mar 2022 01:32:28 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20bug=20=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demoV2/Layouter/BinaryTree.js | 268 +++++++------ demoV2/demo2.html | 495 +++++++++++------------- src/RegisteredShape/binaryTreeNode.ts | 196 +++++----- src/RegisteredShape/clenQueuePointer.ts | 186 ++++----- src/RegisteredShape/linkListNode.ts | 164 ++++---- src/RegisteredShape/pointer.ts | 153 ++++---- src/RegisteredShape/threeCellNode.ts | 333 ++++++++-------- src/RegisteredShape/triTreeNode.ts | 183 ++++----- src/RegisteredShape/twoCellNode.ts | 252 ++++++------ 9 files changed, 1090 insertions(+), 1140 deletions(-) diff --git a/demoV2/Layouter/BinaryTree.js b/demoV2/Layouter/BinaryTree.js index bf1e321..35aff49 100644 --- a/demoV2/Layouter/BinaryTree.js +++ b/demoV2/Layouter/BinaryTree.js @@ -1,149 +1,145 @@ SV.registerLayout('BinaryTree', { - defineOptions() { - return { - element: { - default: { - type: 'binary-tree-node', - size: [60, 30], - label: '[data]', - style: { - fill: '#b83b5e', - stroke: "#333", - cursor: 'pointer' - } - } - }, - link: { - child: { - type: 'line', - sourceAnchor: index => index === 0 ? 3 : 1, - targetAnchor: 0, - style: { - stroke: '#333', - lineAppendWidth: 6, - cursor: 'pointer', - endArrow: 'default', - startArrow: { - path: G6.Arrow.circle(2, -1), - fill: '#333' - } - } - } - }, - marker: { - external: { - type: 'pointer', - anchor: 0, - offset: 14, - style: { - fill: '#f08a5d' - }, - labelOptions: { - style: { - fill: '#000099' - } - } - } - }, - layout: { - xInterval: 40, - yInterval: 40 - }, - behavior: { - // dragNode: false - } - }; - }, + defineOptions() { + return { + element: { + default: { + type: 'binary-tree-node', + size: [60, 30], + label: '[data]', + style: { + fill: '#b83b5e', + stroke: '#333', + cursor: 'pointer', + }, + }, + }, + link: { + child: { + type: 'line', + sourceAnchor: index => (index === 0 ? 3 : 1), + targetAnchor: 0, + style: { + stroke: '#333', + lineAppendWidth: 6, + cursor: 'pointer', + endArrow: 'default', + startArrow: { + path: G6.Arrow.circle(2, -1), + fill: '#333', + }, + }, + }, + }, + marker: { + external: { + type: 'pointer', + anchor: 0, + offset: 14, + style: { + fill: '#f08a5d', + }, + labelOptions: { + style: { + fill: '#000099', + }, + }, + }, + }, + layout: { + xInterval: 40, + yInterval: 40, + }, + behavior: { + // dragNode: false + }, + }; + }, - /** - * 对子树进行递归布局 - */ - layoutItem(node, parent, index, layoutOptions) { - // 次双亲不进行布局 - if (!node) { - return null; + /** + * 对子树进行递归布局 + */ + layoutItem(node, parent, index, layoutOptions) { + // 次双亲不进行布局 + if (!node) { + return null; + } + + let bound = node.getBound(), + width = bound.width, + height = bound.height, + group = new Group(node), + leftGroup = null, + rightGroup = null; + + if (node.visited) { + return null; + } + + if (node.child && node.child[0]) { + leftGroup = this.layoutItem(node.child[0], node, 0, layoutOptions); + } + + if (node.child && node.child[1]) { + rightGroup = this.layoutItem(node.child[1], node, 1, layoutOptions); + } + + // 处理左右子树相交问题 + if (leftGroup && rightGroup) { + let intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound()), + move = 0; + + if (intersection && intersection.width > 0) { + move = (intersection.width + layoutOptions.xInterval) / 2; + leftGroup.translate(-move, 0); + rightGroup.translate(move, 0); + } + } + + if (leftGroup) { + let leftBound = leftGroup.getBound(); + + node.set('y', leftBound.y - layoutOptions.yInterval - height); + node.set('x', leftBound.x + leftBound.width + layoutOptions.xInterval / 2 - width); } - let bound = node.getBound(), - width = bound.width, - height = bound.height, - group = new Group(node); + if(rightGroup) { + let rightBound = rightGroup.getBound(); - if (node.visited) { - return; + node.set('y', rightBound.y - layoutOptions.yInterval - height); + node.set('x', rightBound.x - layoutOptions.xInterval / 2 - width); } + node.visited = true; - if (parent) { - node.set('y', parent.get('y') + layoutOptions.yInterval + height); + if (leftGroup) { + group.add(leftGroup); + } - // 左节点 - if (index === 0) { - node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2); - } + if (rightGroup) { + group.add(rightGroup); + } - // 右结点 - if (index === 1) { - node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2); - } - } + return group; + }, - node.visited = true; - - if (node.child && (node.child[0] || node.child[1])) { - let leftChild = node.child[0], - rightChild = node.child[1], - leftGroup = this.layoutItem(leftChild, node, 0, layoutOptions), - rightGroup = this.layoutItem(rightChild, node, 1, layoutOptions), - intersection = null, - move = 0; - - // 处理左右子树相交问题 - if (leftGroup && rightGroup) { - intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound()); - move = 0; - - if (intersection && intersection.width > 0) { - move = (intersection.width + layoutOptions.xInterval) / 2; - leftGroup.translate(-move, 0); - rightGroup.translate(move, 0); - } - } - - if (leftGroup) { - group.add(leftGroup); - } - - if (rightGroup) { - group.add(rightGroup) - } - } - - return group; - }, - - /** - * 布局函数 - * @param {*} elements - * @param {*} layoutOptions - */ - layout(elements, layoutOptions) { - let root = elements[0]; - this.layoutItem(root, null, -1, layoutOptions); - } + /** + * 布局函数 + * @param {*} elements + * @param {*} layoutOptions + */ + layout(elements, layoutOptions) { + let root = elements[0]; + this.layoutItem(root, null, -1, layoutOptions); + }, }); - - - - -[{ - "id": 6385328, - "data": "", - "external": [ - "L" - ], - "root": true, - "after": null, - "next": null -}] \ No newline at end of file +[ + { + id: 6385328, + data: '', + external: ['L'], + root: true, + after: null, + next: null, + }, +]; diff --git a/demoV2/demo2.html b/demoV2/demo2.html index a80936e..69c7959 100644 --- a/demoV2/demo2.html +++ b/demoV2/demo2.html @@ -1,291 +1,250 @@ + + + + DEMO + - + .container { + background-color: #fafafa; + border: 1px solid #ccc; + position: relative; + } - -
-
- 泄漏区 -
-
+ .down { + display: flex; + margin-top: 20px; + } - - - - - - - + #container { + width: 100%; + height: 500px; + position: relative; + overflow: hidden; + } - - - - - - - - - - - - - - - - + #leak { + position: absolute; + left: 0; + opacity: 0; + top: 100px; + width: 100%; + box-sizing: border-box; + padding: 4px; + border-top: 1px dashed #000; + pointer-events: none; + transition: opacity 0.75s ease-in-out; + } - + + + + + + + + + + + + + + + - const container = document.getElementById('container'), - pos = document.getElementById('pos'); + - + document.getElementById('switch-mode').addEventListener('click', e => { + cur.updateStyle('Array', newArrayOption); + }); - \ No newline at end of file + document.getElementById('brush-select').addEventListener('click', e => { + enableBrushSelect = !enableBrushSelect; + cur.switchBrushSelect(enableBrushSelect); + }); + + cur.on('onLeakAreaUpdate', payload => { + leak.style.opacity = payload.hasLeak ? 1 : 0; + leak.style.top = payload.leakAreaY - 40 + 'px'; + }); + + // ------------------------------------------------------------------------------------------------------- + + container.addEventListener('mousemove', e => { + let x = e.offsetX, + y = e.offsetY; + pos.innerHTML = `${x},${y}`; + }); + + + diff --git a/src/RegisteredShape/binaryTreeNode.ts b/src/RegisteredShape/binaryTreeNode.ts index 20e0b67..a02e2c5 100644 --- a/src/RegisteredShape/binaryTreeNode.ts +++ b/src/RegisteredShape/binaryTreeNode.ts @@ -1,105 +1,111 @@ - import { Util } from '../Common/util'; +export default Util.registerShape( + 'binary-tree-node', + { + draw(cfg, group) { + cfg.size = cfg.size; -export default Util.registerShape('binary-tree-node', { - draw(cfg, group) { - cfg.size = cfg.size; + const width = cfg.size[0], + height = cfg.size[1]; - const width = cfg.size[0], - height = cfg.size[1]; + const wrapperRect = group.addShape('rect', { + attrs: { + x: width / 2, + y: height / 2, + width: width, + height: height, + stroke: cfg.style.stroke || '#333', + cursor: cfg.style.cursor, + fill: cfg.style.backgroundFill || '#eee', + }, + name: 'wrapper', + }); - const wrapperRect = group.addShape('rect', { - attrs: { - x: width / 2, - y: height / 2, - width: width, - height: height, - stroke: cfg.style.stroke || '#333', - cursor: cfg.style.cursor, - fill: cfg.style.backgroundFill || '#eee' - }, - name: 'wrapper' - }); + group.addShape('rect', { + attrs: { + x: width / 4 + width / 2, + y: height / 2, + width: width / 2, + height: height, + fill: cfg.style.fill, + stroke: cfg.style.stroke || '#333', + cursor: cfg.style.cursor, + }, + name: 'mid', + draggable: true, + }); - group.addShape('rect', { - attrs: { - x: width / 4 + width / 2, - y: height / 2, - width: width / 2, - height: height, - fill: cfg.style.fill, - stroke: cfg.style.stroke || '#333', - cursor: cfg.style.cursor - }, - name: 'mid', - draggable: true - }); + const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; - const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; - - if (cfg.label) { - - group.addShape('text', { - attrs: { - x: width, // 居中 - y: height, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.label, - fill: style.fill || '#000', - fontSize: style.fontSize || 16, - cursor: cfg.style.cursor - }, - name: 'text', - draggable: true - }); - } + if (cfg.label) { + group.addShape('text', { + attrs: { + x: width, // 居中 + y: height, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.label, + fill: style.fill || '#000', + fontSize: style.fontSize || 16, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } - //节点没有左孩子节点时 - if(cfg.child[0] == "0x0"){ - group.addShape('text', { - attrs: { - x: width * (5 / 8), - y: height * ( 8 / 7), - textAlign: 'center', - textBaseline: 'middle', - text: '^', - fill: style.fill || '#000', - fontSize: 18, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } - //节点没有右孩子节点时 - if(cfg.child[1] == "0x0"){ - group.addShape('text', { - attrs: { - x: width * (11 / 8), - y: height * ( 8 / 7), - textAlign: 'center', - textBaseline: 'middle', - text: '^', - fill: style.fill || '#000', - fontSize: 18, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } + const isLeftEmpty = + !cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0', + isRightEmpty = + !cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0'; - return wrapperRect; - }, + //节点没有左孩子节点时 + if (isLeftEmpty) { + group.addShape('text', { + attrs: { + x: width * (5 / 8), + y: height * (8 / 7), + textAlign: 'center', + textBaseline: 'middle', + text: '^', + fill: style.fill || '#000', + fontSize: 16, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } + //节点没有右孩子节点时 + if (isRightEmpty) { + group.addShape('text', { + attrs: { + x: width * (11 / 8), + y: height * (8 / 7), + textAlign: 'center', + textBaseline: 'middle', + text: '^', + fill: style.fill || '#000', + fontSize: 16, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } - getAnchorPoints() { - return [ - [0.5, 0], - [0.875, 0.5], - [0.5, 1], - [0.125, 0.5] - ]; - }, -}, 'rect'); \ No newline at end of file + return wrapperRect; + }, + + getAnchorPoints() { + return [ + [0.5, 0], + [0.875, 0.5], + [0.5, 1], + [0.125, 0.5], + ]; + }, + }, + 'rect' +); diff --git a/src/RegisteredShape/clenQueuePointer.ts b/src/RegisteredShape/clenQueuePointer.ts index a3e6d24..d1a9e5f 100644 --- a/src/RegisteredShape/clenQueuePointer.ts +++ b/src/RegisteredShape/clenQueuePointer.ts @@ -1,120 +1,106 @@ -import G6 from "@antv/g6"; -import { Util } from "../Common/util"; - - - +import G6 from '@antv/g6'; +import { Util } from '../Common/util'; export default function rotate(shape, angle, transform) { - const matrix1 = shape.getMatrix(); - const newMatrix1 = transform(matrix1, [ - ['r', angle], - ]); - shape.setMatrix(newMatrix1); + const matrix1 = shape.getMatrix(); + const newMatrix1 = transform(matrix1, [['r', angle]]); + shape.setMatrix(newMatrix1); } function translate(shape, x, y, transform) { - const matrix1 = shape.getMatrix(); - const newMatrix1 = transform(matrix1, [ - ['t', x, y], - ]); - shape.setMatrix(newMatrix1); + const matrix1 = shape.getMatrix(); + const newMatrix1 = transform(matrix1, [['t', x, y]]); + shape.setMatrix(newMatrix1); } function culcuRotate(angle, R) { - let offsetX = Math.cos(angle) * R; - let offsetY = -Math.sin(angle) * R; - console.log(offsetX, offsetY, R); - return { - offsetX, - offsetY, - } + let offsetX = Math.cos(angle) * R; + let offsetY = -Math.sin(angle) * R; + console.log(offsetX, offsetY, R); + return { + offsetX, + offsetY, + }; } - - Util.registerShape('clen-queue-pointer', { - draw(cfg, group) { - let id = cfg.id as string; + draw(cfg, group) { + let id = cfg.id as string; - const index = parseInt(id.split('-')[1]); - const len = parseInt(id.split('-')[2]); - const keyShape = group.addShape('path', { - attrs: { - x: 0, - y: 0, - path: this.getPath(cfg), - fill: cfg.style.fill, - // matrix: cfg.style.matrix - }, - name: 'pointer-path' - }); + const index = parseInt(id.split('-')[1]); + const len = parseInt(id.split('-')[2]); + const keyShape = group.addShape('path', { + attrs: { + x: 0, + y: 0, + path: this.getPath(cfg), + fill: cfg.style.fill, + // matrix: cfg.style.matrix + }, + name: 'pointer-path', + }); - const angle = index * Math.PI * 2 / len; - if (cfg.label) { - const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; - - const bgRect = group.addShape('rect', { - attrs: { - x: 0, - y: 0, - width: 0, - height: 0, - text: cfg.label, - fill: null, - radius: 2 - }, - name: 'bgRect' - }); + const angle = (index * Math.PI * 2) / len; + if (cfg.label) { + const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; - let label = cfg.label as string; + const bgRect = group.addShape('rect', { + attrs: { + x: 0, + y: 0, + width: 0, + height: 0, + text: cfg.label, + fill: null, + radius: 2, + }, + name: 'bgRect', + }); - let pointerText = label.split('-')[0]; - let y = pointerText=="front"?30:15; - const text = group.addShape('text', { - attrs: { - x: culcuRotate(Math.PI/2 - angle, y).offsetX, - y: culcuRotate(Math.PI/2 - angle, y).offsetY, - // x: 0, - // y: 0, - textAlign: 'center', - textBaseline: 'middle', - text: pointerText, - fill: style.fill || '#999', - fontSize: style.fontSize || 16 - }, - name: 'pointer-text-shape' - }); + let label = cfg.label as string; - // rotate(text, angle, G6.Util.transform); - translate(text, 0, -75, G6.Util.transform); - } - rotate(keyShape, angle, G6.Util.transform); - translate(keyShape, 0, -75, G6.Util.transform); + let pointerText = label.split('-')[0]; + let y = pointerText == 'front' ? 30 : 15; + const text = group.addShape('text', { + attrs: { + x: culcuRotate(Math.PI / 2 - angle, y).offsetX, + y: culcuRotate(Math.PI / 2 - angle, y).offsetY, + // x: 0, + // y: 0, + textAlign: 'center', + textBaseline: 'middle', + text: pointerText, + fill: style.fill || '#999', + fontSize: style.fontSize || 16, + }, + name: 'pointer-text-shape', + }); - return keyShape; + // rotate(text, angle, G6.Util.transform); + translate(text, 0, -75, G6.Util.transform); + } + rotate(keyShape, angle, G6.Util.transform); + translate(keyShape, 0, -75, G6.Util.transform); - - }, - - getPath(cfg) { - let width = 1, - height = 38, - arrowWidth = width + 4, - arrowHeight = height * 0.3; + return keyShape; + }, - const path = [ - ['M', 0, 0], - ['L', -width / 2, 0], - ['L', -width / 2, -height], - ['L', -width / 2 - (arrowWidth / 2), -height], - ['L', 0, -height-arrowHeight], - ['L', width / 2 + (arrowWidth / 2), -height], - ['L', width / 2, -height], - ['L', width / 2, 0], - ['Z'], - ]; + getPath(cfg) { + let width = 1, + height = 38, + arrowWidth = width + 4, + arrowHeight = height * 0.3; - return path; - }, + const path = [ + ['M', 0, 0], + ['L', -width / 2, 0], + ['L', -width / 2, -height], + ['L', -width / 2 - arrowWidth / 2, -height], + ['L', 0, -height - arrowHeight], + ['L', width / 2 + arrowWidth / 2, -height], + ['L', width / 2, -height], + ['L', width / 2, 0], + ['Z'], + ]; + return path; + }, }); - - diff --git a/src/RegisteredShape/linkListNode.ts b/src/RegisteredShape/linkListNode.ts index 57a4ef9..5aa2c7b 100644 --- a/src/RegisteredShape/linkListNode.ts +++ b/src/RegisteredShape/linkListNode.ts @@ -6,93 +6,95 @@ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: \水功能c:\Users\13127\Desktop\最近的前端文件\可视化0126\StructV2\src\RegisteredShape\linkListNode.ts */ -import { Util } from "../Common/util"; +import { Util } from '../Common/util'; +export default Util.registerShape( + 'link-list-node', + { + draw(cfg, group) { + cfg.size = cfg.size || [30, 10]; + const width = cfg.size[0], + height = cfg.size[1]; -export default Util.registerShape('link-list-node', { - draw(cfg, group) { - cfg.size = cfg.size || [30, 10]; + const wrapperRect = group.addShape('rect', { + attrs: { + x: width / 2, + y: height / 2, + width: width, + height: height, + stroke: cfg.style.stroke || '#333', + fill: cfg.style.backgroundFill || '#eee', + cursor: cfg.style.cursor, + }, + name: 'wrapper', + }); - const width = cfg.size[0], - height = cfg.size[1]; - - const wrapperRect = group.addShape('rect', { - attrs: { - x: width / 2, - y: height / 2, - width: width, - height: height, - stroke: cfg.style.stroke || '#333', - fill: cfg.style.backgroundFill || '#eee', - cursor: cfg.style.cursor - }, - name: 'wrapper' - }); + group.addShape('rect', { + attrs: { + x: width / 2, + y: height / 2, + width: width * (2 / 3), + height: height, + fill: cfg.style.fill, + stroke: cfg.style.stroke || '#333', + cursor: cfg.style.cursor, + }, + name: 'main-rect', + draggable: true, + }); - group.addShape('rect', { - attrs: { - x: width / 2, - y: height / 2, - width: width * (2 / 3), - height: height, - fill: cfg.style.fill, - stroke: cfg.style.stroke || '#333', - cursor: cfg.style.cursor - }, - name: 'main-rect', - draggable: true - }); + const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; - const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; + if (cfg.label) { + group.addShape('text', { + attrs: { + x: width * (5 / 6), + y: height, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.label, + fill: style.fill || '#000', + fontSize: style.fontSize || 16, + }, + name: 'text', + draggable: true, + }); + } - if (cfg.label) { - group.addShape('text', { - attrs: { - x: width * (5 / 6), - y: height, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.label, - fill: style.fill || '#000', - fontSize: style.fontSize || 16 - }, - name: 'text', - draggable: true - }); - } - - //节点没有后续指针时 - if(!cfg.next && !cfg.loopNext){ - group.addShape('text', { - attrs: { - x: width * (4 / 3), - y: height * ( 6 / 5), - textAlign: 'center', - textBaseline: 'middle', - text: '^', - fill: style.fill || '#000', - fontSize: 18, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } + //节点没有后续指针时 + if (!cfg.next && !cfg.loopNext) { + group.addShape('text', { + attrs: { + x: width * (4 / 3), + y: height * (6 / 5), + textAlign: 'center', + textBaseline: 'middle', + text: '^', + fill: style.fill || '#000', + fontSize: 16, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } - return wrapperRect; - }, + return wrapperRect; + }, - getAnchorPoints() { - return [ - [0.5, 0], - [5 / 6, 0], - [5 / 6, 0.5], - [1, 0.5], - [5 / 6, 1], - [0.5, 1], - [0, 0.5], - [1 / 3, 1] - ]; - } -}, 'rect'); \ No newline at end of file + getAnchorPoints() { + return [ + [0.5, 0], + [5 / 6, 0], + [5 / 6, 0.5], + [1, 0.5], + [5 / 6, 1], + [0.5, 1], + [0, 0.5], + [1 / 3, 1], + ]; + }, + }, + 'rect' +); diff --git a/src/RegisteredShape/pointer.ts b/src/RegisteredShape/pointer.ts index 577a2b6..be37bb8 100644 --- a/src/RegisteredShape/pointer.ts +++ b/src/RegisteredShape/pointer.ts @@ -1,90 +1,89 @@ import { Util } from '../Common/util'; - export default Util.registerShape('pointer', { - draw(cfg, group) { - const keyShape = group.addShape('path', { - attrs: { - path: this.getPath(cfg), - fill: cfg.style.fill, - matrix: cfg.style.matrix - }, - name: 'pointer-path' - }); + draw(cfg, group) { + const keyShape = group.addShape('path', { + attrs: { + path: this.getPath(cfg), + fill: cfg.style.fill, + matrix: cfg.style.matrix, + }, + name: 'pointer-path', + }); - if (cfg.label) { - const labelStyle = (cfg.labelCfg && cfg.labelCfg.style) || {}; + if (cfg.label) { + const labelStyle = (cfg.labelCfg && cfg.labelCfg.style) || {}; - const bgRect = group.addShape('rect', { - attrs: { - x: 0, - y: 0, - text: cfg.label, - fill: null, - radius: 2 - }, - name: 'bgRect' - }); + const bgRect = group.addShape('rect', { + attrs: { + x: 0, + y: 0, + text: cfg.label, + fill: null, + radius: 2, + }, + name: 'bgRect', + }); - const text = group.addShape('text', { - attrs: { - x: 0, - y: 0, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.label, - fill: labelStyle.fill || '#999', - fontSize: labelStyle.fontSize || 16 - }, - name: 'pointer-text-shape' - }); + const text = group.addShape('text', { + attrs: { + x: 0, + y: 0, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.label, + fill: labelStyle.fill || '#999', + fontSize: labelStyle.fontSize || 16, + }, + name: 'pointer-text-shape', + }); - const { width: textWidth, height: textHeight } = text.getBBox(); - const {width: pointerWidth, height: pointerHeight} = keyShape.getBBox(); - bgRect.attr({ - width: textWidth + pointerWidth + 6, - height: textHeight + pointerHeight + 6 - }); + const { width: textWidth, height: textHeight } = text.getBBox(); + const { width: pointerWidth, height: pointerHeight } = keyShape.getBBox(); + bgRect.attr({ + width: textWidth + pointerWidth + 6, + height: textHeight + pointerHeight + 6, + }); - // 旋转文字 - const markerEndPosition = cfg.markerEndPosition; - if(markerEndPosition) { - let textX = markerEndPosition[0], - textY = markerEndPosition[1]; + // 旋转文字 + const markerEndPosition = cfg.markerEndPosition; + if (markerEndPosition) { + let textX = markerEndPosition[0], + textY = markerEndPosition[1]; - text.attr({ - x: textX, - y: textY - }); + text.attr({ + x: textX, + y: textY, + }); - bgRect.attr({ - x: textX - textWidth / 2 - 3, - y: textY - textHeight / 2 - 3 - }); - } - return bgRect; - } + bgRect.attr({ + x: textX - textWidth / 2 - 3, + y: textY - textHeight / 2 - 3, + }); + } + return bgRect; + } - return keyShape; - }, - - getPath(cfg) { - let width = cfg.size[0], - height = cfg.size[1], - arrowWidth = width + 4, - arrowHeight = height * 0.3; + return keyShape; + }, - const path = [ - ['M', 0, 0], - ['L', -width / 2 - (arrowWidth / 2), -arrowHeight], - ['L', -width / 2, -arrowHeight], - ['L', -width / 2, -height], - ['L', width / 2, -height], - ['L', width / 2, -arrowHeight], - ['L', width / 2 + (arrowWidth / 2), -arrowHeight], - ['Z'], - ]; + getPath(cfg) { + let width = cfg.size[0], + height = cfg.size[1], + arrowWidth = width + 4, + arrowHeight = height * 0.3; - return path; - } -}); \ No newline at end of file + const path = [ + ['M', 0, 0], + ['L', -width / 2 - arrowWidth / 2, -arrowHeight], + ['L', -width / 2, -arrowHeight], + ['L', -width / 2, -height], + ['L', width / 2, -height], + ['L', width / 2, -arrowHeight], + ['L', width / 2 + arrowWidth / 2, -arrowHeight], + ['Z'], + ]; + + return path; + }, +}); diff --git a/src/RegisteredShape/threeCellNode.ts b/src/RegisteredShape/threeCellNode.ts index e30ddcd..0f2b3b0 100644 --- a/src/RegisteredShape/threeCellNode.ts +++ b/src/RegisteredShape/threeCellNode.ts @@ -8,185 +8,182 @@ */ import { registerNode } from '@antv/g6'; - - export default registerNode('three-cell', { - draw(cfg, group) { - cfg.size = cfg.size || [30, 10]; - - const width = cfg.size[0], - height = cfg.size[1]; + draw(cfg, group) { + cfg.size = cfg.size || [30, 10]; - const wrapperRect = group.addShape('rect', { - attrs: { - x: width / 2, - y: height / 2, - width: width, - height: height, - stroke: cfg.style.stroke, - fill: cfg.style.backgroundFill || '#eee' - }, - name: 'wrapper' - }); + const width = cfg.size[0], + height = cfg.size[1]; - group.addShape('rect', { - attrs: { - x: width / 2, - y: height / 2, - width: width / 3, - height: height, - fill: cfg.style.fill, - stroke: cfg.style.stroke - }, - name: 'left-rect', - draggable: true - }); + const wrapperRect = group.addShape('rect', { + attrs: { + x: width / 2, + y: height / 2, + width: width, + height: height, + stroke: cfg.style.stroke, + fill: cfg.style.backgroundFill || '#eee', + }, + name: 'wrapper', + }); - group.addShape('rect', { - attrs: { - x: width * (5 / 6), - y: height / 2, - width: width / 3, - height: height, - fill: cfg.style.fill, - stroke: cfg.style.stroke - }, - name: 'middle-rect', - draggable: true - }); + group.addShape('rect', { + attrs: { + x: width / 2, + y: height / 2, + width: width / 3, + height: height, + fill: cfg.style.fill, + stroke: cfg.style.stroke, + }, + name: 'left-rect', + draggable: true, + }); - const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; + group.addShape('rect', { + attrs: { + x: width * (5 / 6), + y: height / 2, + width: width / 3, + height: height, + fill: cfg.style.fill, + stroke: cfg.style.stroke, + }, + name: 'middle-rect', + draggable: true, + }); - //节点上方文字 - if(cfg.root && cfg.rootLabel){ - group.addShape('text', { - attrs: { - x: width * (2 / 3), - y: 0, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.rootLabel[0], - fill: style.fill || '#bbb', - fontSize: style.fontSize || 16, - fontStyle: 'italic', - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); + const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; - group.addShape('text', { - attrs: { - x: width, - y: 0, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.rootLabel[1], - fill: style.fill || '#bbb', - fontSize: style.fontSize || 16, - fontStyle: 'italic', - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); + //节点上方文字 + if (cfg.root && cfg.rootLabel) { + group.addShape('text', { + attrs: { + x: width * (2 / 3), + y: 0, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.rootLabel[0], + fill: style.fill || '#bbb', + fontSize: style.fontSize || 16, + fontStyle: 'italic', + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); - group.addShape('text', { - attrs: { - x: width * (4 / 3), - y: 0, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.rootLabel[2], - fill: style.fill || '#bbb', - fontSize: style.fontSize || 16, - fontStyle: 'italic', - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } + group.addShape('text', { + attrs: { + x: width, + y: 0, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.rootLabel[1], + fill: style.fill || '#bbb', + fontSize: style.fontSize || 16, + fontStyle: 'italic', + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); - //节点左边文字 - if(cfg.index !== null){ - group.addShape('text', { - attrs: { - x: width * (2 / 5), - y: height, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.index, - fill: style.fill || '#bbb', - fontSize: style.fontSize || 16, - fontStyle: 'italic', - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } - //节点文字（数组形式） - if(cfg.label) { - group.addShape('text', { - attrs: { - x: width * (2 / 3), - y: height, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.label[0], - fill: style.fill || '#000', - fontSize: style.fontSize || 16, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); + group.addShape('text', { + attrs: { + x: width * (4 / 3), + y: 0, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.rootLabel[2], + fill: style.fill || '#bbb', + fontSize: style.fontSize || 16, + fontStyle: 'italic', + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } - group.addShape('text', { - attrs: { - x: width, - y: height, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.label[1], - fill: style.fill || '#000', - fontSize: style.fontSize || 16, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } + //节点左边文字 + if (cfg.index !== null) { + group.addShape('text', { + attrs: { + x: width * (2 / 5), + y: height, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.index, + fill: style.fill || '#bbb', + fontSize: style.fontSize || 16, + fontStyle: 'italic', + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } + //节点文字（数组形式） + if (cfg.label) { + group.addShape('text', { + attrs: { + x: width * (2 / 3), + y: height, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.label[0], + fill: style.fill || '#000', + fontSize: style.fontSize || 16, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); - //节点没有后续指针时 - if(!cfg.headNext){ - group.addShape('text', { - attrs: { - x: width * (4 / 3), - y: height * ( 6 / 5), - textAlign: 'center', - textBaseline: 'middle', - text: '^', - fill: style.fill || '#000', - fontSize: 25, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } + group.addShape('text', { + attrs: { + x: width, + y: height, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.label[1], + fill: style.fill || '#000', + fontSize: style.fontSize || 16, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } + //节点没有后续指针时 + if (!cfg.headNext) { + group.addShape('text', { + attrs: { + x: width * (4 / 3), + y: height * (6 / 5), + textAlign: 'center', + textBaseline: 'middle', + text: '^', + fill: style.fill || '#000', + fontSize: 22, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } - return wrapperRect; - }, + return wrapperRect; + }, - getAnchorPoints() { - return [ - [0.5, 0], - [5 / 6, 0.5], - [0.5, 1], - [0, 0.5] - ]; - } -}); \ No newline at end of file + getAnchorPoints() { + return [ + [0.5, 0], + [5 / 6, 0.5], + [0.5, 1], + [0, 0.5], + ]; + }, +}); diff --git a/src/RegisteredShape/triTreeNode.ts b/src/RegisteredShape/triTreeNode.ts index 80ecf96..859f667 100644 --- a/src/RegisteredShape/triTreeNode.ts +++ b/src/RegisteredShape/triTreeNode.ts @@ -1,100 +1,103 @@ import { Util } from '../Common/util'; +export default Util.registerShape( + 'tri-tree-node', + { + draw(cfg, group) { + cfg.size = cfg.size; -export default Util.registerShape('tri-tree-node', { - draw(cfg, group) { - cfg.size = cfg.size; + const width = cfg.size[0], + height = cfg.size[1]; - const width = cfg.size[0], - height = cfg.size[1]; + const wrapperRect = group.addShape('rect', { + attrs: { + x: width / 2, + y: height / 2, + width: width, + height: height, + stroke: cfg.style.stroke || '#333', + cursor: cfg.style.cursor, + fill: cfg.style.backgroundFill || '#eee', + }, + name: 'wrapper', + }); - const wrapperRect = group.addShape('rect', { - attrs: { - x: width / 2, - y: height / 2, - width: width, - height: height, - stroke: cfg.style.stroke || '#333', - cursor: cfg.style.cursor, - fill: cfg.style.backgroundFill || '#eee' - }, - name: 'wrapper' - }); + group.addShape('rect', { + attrs: { + x: width / 4 + width / 2, + y: height / 2, + width: width / 2, + height: height / 4, + fill: '#eee', + stroke: cfg.style.stroke || '#333', + cursor: cfg.style.cursor, + }, + name: 'top', + draggable: true, + }); - group.addShape('rect', { - attrs: { - x: width / 4 + width / 2, - y: height / 2, - width: width / 2, - height: height / 4, - fill: '#eee', - stroke: cfg.style.stroke || '#333', - cursor: cfg.style.cursor - }, - name: 'top', - draggable: true - }); + group.addShape('rect', { + attrs: { + x: width / 4 + width / 2, + y: height / 2 + height / 4, + width: width / 2, + height: (height / 4) * 3, + fill: cfg.color || cfg.style.fill, + stroke: cfg.style.stroke || '#333', + cursor: cfg.style.cursor, + }, + name: 'bottom', + draggable: true, + }); - group.addShape('rect', { - attrs: { - x: width / 4 + width / 2, - y: height / 2 + height / 4, - width: width / 2, - height: height / 4 * 3, - fill: cfg.color || cfg.style.fill, - stroke: cfg.style.stroke || '#333', - cursor: cfg.style.cursor - }, - name: 'bottom', - draggable: true - }); + if (cfg.label) { + const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; + group.addShape('text', { + attrs: { + x: width, // 居中 + y: height + height / 8, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.label, + fill: style.fill || '#000', + fontSize: style.fontSize || 16, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } - if (cfg.label) { - const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; - group.addShape('text', { - attrs: { - x: width, // 居中 - y: height + height / 8, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.label, - fill: style.fill || '#000', - fontSize: style.fontSize || 16, - cursor: cfg.style.cursor - }, - name: 'text', - draggable: true - }); - } + if (cfg.root) { + const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; + group.addShape('text', { + attrs: { + x: width, // 居中 + y: (height / 4) * 3, + textAlign: 'center', + textBaseline: 'middle', + text: '^', + fill: style.fill || '#000', + fontSize: style.fontSize || 14, + cursor: cfg.style.cursor, + }, + name: 'parent', + draggable: true, + }); + } - if (cfg.root) { - const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; - group.addShape('text', { - attrs: { - x: width, // 居中 - y: height / 4 * 3, - textAlign: 'center', - textBaseline: 'middle', - text: "^", - fill: style.fill || '#000', - fontSize: style.fontSize || 14, - cursor: cfg.style.cursor - }, - name: 'parent', - draggable: true - }); - } + return wrapperRect; + }, - return wrapperRect; - }, - - getAnchorPoints() { - return [ - [0.125, 0.5], - [0.875, 0.5], - [0.5, 1], - [0.5, 0], - [0.5, 0.125] - ]; - }, -}, 'rect'); \ No newline at end of file + getAnchorPoints() { + return [ + [0.125, 0.5], + [0.875, 0.5], + [0.5, 1], + [0.5, 0], + [0.5, 0.125], + ]; + }, + }, + 'rect' +); diff --git a/src/RegisteredShape/twoCellNode.ts b/src/RegisteredShape/twoCellNode.ts index e81e078..c454f38 100644 --- a/src/RegisteredShape/twoCellNode.ts +++ b/src/RegisteredShape/twoCellNode.ts @@ -1,138 +1,140 @@ import { Util } from '../Common/util'; +export default Util.registerShape( + 'two-cell-node', + { + draw(cfg, group) { + cfg.size = cfg.size || [30, 10]; + const width = cfg.size[0], + height = cfg.size[1]; -export default Util.registerShape('two-cell-node', { - draw(cfg, group) { - cfg.size = cfg.size || [30, 10]; + const wrapperRect = group.addShape('rect', { + attrs: { + x: width / 2, + y: height / 2, + width: width, + height: height, + stroke: cfg.style.stroke, + fill: cfg.style.backgroundFill || '#eee', + }, + name: 'wrapper', + }); - const width = cfg.size[0], - height = cfg.size[1]; + group.addShape('rect', { + attrs: { + x: width / 2, + y: height / 2, + width: width / 2, + height: height, + fill: cfg.style.fill, + stroke: cfg.style.stroke, + }, + name: 'left-rect', + draggable: true, + }); - const wrapperRect = group.addShape('rect', { - attrs: { - x: width / 2, - y: height / 2, - width: width, - height: height, - stroke: cfg.style.stroke, - fill: cfg.style.backgroundFill || '#eee' - }, - name: 'wrapper' - }); + const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; - group.addShape('rect', { - attrs: { - x: width / 2, - y: height / 2, - width: width / 2, - height: height, - fill: cfg.style.fill, - stroke: cfg.style.stroke - }, - name: 'left-rect', - draggable: true - }); + if (cfg.label) { + if (Array.isArray(cfg.label)) { + let tag = cfg.label[0], + data = cfg.label[1]; - const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; + group.addShape('text', { + attrs: { + x: width * (3 / 4), + y: height, + textAlign: 'center', + textBaseline: 'middle', + text: tag, + fill: style.fill || '#000', + fontSize: style.fontSize || 16, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); - if (cfg.label) { - if(Array.isArray(cfg.label)) { - let tag = cfg.label[0], data = cfg.label[1]; + group.addShape('text', { + attrs: { + x: width * (5 / 4), + y: height, + textAlign: 'center', + textBaseline: 'middle', + text: data, + fill: style.fill || '#000', + fontSize: style.fontSize || 16, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } else { + group.addShape('text', { + attrs: { + x: width * (3 / 4), + y: height, + textAlign: 'center', + textBaseline: 'middle', + text: cfg.label, + fill: style.fill || '#000', + fontSize: style.fontSize || 16, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } + } - group.addShape('text', { - attrs: { - x: width * (3 / 4), - y: height, - textAlign: 'center', - textBaseline: 'middle', - text: tag, - fill: style.fill || '#000', - fontSize: style.fontSize || 16, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); + //图 数据结构中没有后续指针 + if (cfg.id.includes('tableHeadNode') && !cfg.headNext) { + group.addShape('text', { + attrs: { + x: width * (5 / 4), + y: height * (8 / 7), + textAlign: 'center', + textBaseline: 'middle', + text: '^', + fill: style.fill || '#000', + fontSize: 20, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } - group.addShape('text', { - attrs: { - x: width * (5 / 4), - y: height, - textAlign: 'center', - textBaseline: 'middle', - text: data, - fill: style.fill || '#000', - fontSize: style.fontSize || 16, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } - else { - group.addShape('text', { - attrs: { - x: width * (3 / 4), - y: height, - textAlign: 'center', - textBaseline: 'middle', - text: cfg.label, - fill: style.fill || '#000', - fontSize: style.fontSize || 16, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } - } - - //图 数据结构中没有后续指针 - if(cfg.id.includes('tableHeadNode') && !cfg.headNext){ - group.addShape('text', { - attrs: { - x: width * (5 / 4), - y: height * ( 8 / 7), - textAlign: 'center', - textBaseline: 'middle', - text: '^', - fill: style.fill || '#000', - fontSize: 20, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } + //哈希表 数据结构中没有后续指针 + if (cfg.id.includes('head') && !cfg.start) { + group.addShape('text', { + attrs: { + x: width * (5 / 4), + y: height * (8 / 7), + textAlign: 'center', + textBaseline: 'middle', + text: '^', + fill: style.fill || '#000', + fontSize: 20, + cursor: cfg.style.cursor, + }, + name: 'text', + draggable: true, + }); + } - //哈希表 数据结构中没有后续指针 - if(cfg.id.includes('head') && !cfg.start){ - group.addShape('text', { - attrs: { - x: width * (5 / 4), - y: height * ( 8 / 7), - textAlign: 'center', - textBaseline: 'middle', - text: '^', - fill: style.fill || '#000', - fontSize: 20, - cursor: cfg.style.cursor, - }, - name: 'text', - draggable: true - }); - } - - return wrapperRect; - }, + return wrapperRect; + }, - getAnchorPoints() { - return [ - [0.5, 0], - [3 / 4, 0.5], - [0.5, 1], - [0, 0.5] - ]; - } -}, 'rect'); \ No newline at end of file + getAnchorPoints() { + return [ + [0.5, 0], + [3 / 4, 0.5], + [0.5, 1], + [0, 0.5], + ]; + }, + }, + 'rect' +);