From 135a8e3385799c3c9c98634ad0fecb0532377001 Mon Sep 17 00:00:00 2001 From: liuziqi Date: Wed, 17 Apr 2024 20:48:16 +0800 Subject: [PATCH] fix: optimize the experience of resizeNode --- packages/core/index.html | 7 +- .../extension/examples/NodeResize/index.mjs | 6 + .../src/NodeResize/Control/Control.tsx | 105 ++++++++++++------ 3 files changed, 83 insertions(+), 35 deletions(-) diff --git a/packages/core/index.html b/packages/core/index.html index aa92844c0..ea09f2bc1 100644 --- a/packages/core/index.html +++ b/packages/core/index.html @@ -498,7 +498,7 @@ }, partial: true, background: { - color: '#F0F0F0' + color: '#FFFFFF' }, grid: true, edgeTextDraggable: true, @@ -506,7 +506,7 @@ style: { inputText: { background: 'black', - } + }, }, // 全局自定义id // edgeGenerator: (sourceNode, targetNode, currentEdge) => { @@ -567,8 +567,7 @@ lf.setTheme( { baseNode: { - fill: 'red', - stroke: 'green' + stroke: '#4E93F5' }, nodeText: { overflowMode: 'ellipsis', lineHeight: 1.5 }, edgeText: { overflowMode: 'ellipsis', lineHeight: 1.5 }, diff --git a/packages/extension/examples/NodeResize/index.mjs b/packages/extension/examples/NodeResize/index.mjs index 42a2875cd..369d1a7d9 100644 --- a/packages/extension/examples/NodeResize/index.mjs +++ b/packages/extension/examples/NodeResize/index.mjs @@ -100,6 +100,12 @@ window.onload = function () { type: 'resizable-diamond', x: 500, y: 100, + properties: { + nodeSize: { + rx: 50, + ry: 30, + }, + }, }, { id: 'diamond_33', diff --git a/packages/extension/src/NodeResize/Control/Control.tsx b/packages/extension/src/NodeResize/Control/Control.tsx index 2ffc2acad..83adf4994 100644 --- a/packages/extension/src/NodeResize/Control/Control.tsx +++ b/packages/extension/src/NodeResize/Control/Control.tsx @@ -72,7 +72,17 @@ class Control extends Component { this.nodeModel.moveText(deltaX / 2, deltaY / 2); }; // 计算control拖动后，节点的宽高 - getResize = ({ index, deltaX, deltaY, width, height, PCTResizeInfo, pct = 1 }) => { + getResize = ({ + index, + deltaX, + deltaY, + width, + height, + PCTResizeInfo, + pct = 1, + freezeWidth = false, + freezeHeight = false, + }) => { const resize = { width, height, deltaX, deltaY }; if (PCTResizeInfo) { const sensitivity = 4; // 越低越灵敏 @@ -138,22 +148,23 @@ class Control extends Component { resize.deltaY = deltaY / pct; return resize; } + // 如果限制了宽/高不变，对应的width/height保持一致 switch (index) { case 0: - resize.width = width - deltaX * pct; - resize.height = height - deltaY * pct; + resize.width = freezeWidth ? width : width - deltaX * pct; + resize.height = freezeHeight ? height : height - deltaY * pct; break; case 1: - resize.width = width + deltaX * pct; - resize.height = height - deltaY * pct; + resize.width = freezeWidth ? width : width + deltaX * pct; + resize.height = freezeHeight ? height : height - deltaY * pct; break; case 2: - resize.width = width + deltaX * pct; - resize.height = height + deltaY * pct; + resize.width = freezeWidth ? width : width + deltaX * pct; + resize.height = freezeHeight ? height : height + deltaY * pct; break; case 3: - resize.width = width - deltaX * pct; - resize.height = height + deltaY * pct; + resize.width = freezeWidth ? width : width - deltaX * pct; + resize.height = freezeHeight ? height : height + deltaY * pct; break; default: break; @@ -191,9 +202,25 @@ class Control extends Component { }; // 矩形更新 updateRect = ({ deltaX, deltaY }) => { - const { id, x, y, width, height, radius, PCTResizeInfo } = this.nodeModel as RectNodeModel; + const { + id, + x, + y, + width, + height, + radius, + PCTResizeInfo, + } = this.nodeModel as RectNodeModel; + const { + minWidth, + minHeight, + maxWidth, + maxHeight, + } = this.nodeModel; // 更新中心点位置，更新文案位置 const { index } = this; + const freezeWidth = (minWidth === maxWidth); + const freezeHeight = (minHeight === maxHeight); const size = this.getResize({ index, deltaX, @@ -202,14 +229,10 @@ class Control extends Component { height, PCTResizeInfo, pct: 1, + freezeWidth, + freezeHeight, }); // 限制放大缩小的最大最小范围 - const { - minWidth, - minHeight, - maxWidth, - maxHeight, - } = this.nodeModel; if (size.width < minWidth || size.width > maxWidth || size.height < minHeight @@ -219,7 +242,11 @@ class Control extends Component { this.dragHandler.cancelDrag(); return; } - this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY }); + // 如果限制了宽/高不变，对应的x/y不产生位移 + this.updatePosition({ + deltaX: freezeWidth ? 0 : size.deltaX, + deltaY: freezeHeight ? 0 : size.deltaY, + }); // 更新宽高 this.nodeModel.width = size.width; this.nodeModel.height = size.height; @@ -253,6 +280,14 @@ class Control extends Component { updateEllipse = ({ deltaX, deltaY }) => { const { id, rx, ry, x, y, PCTResizeInfo } = this.nodeModel as EllipseNodeModel; const { index } = this; + const { + minWidth, + minHeight, + maxWidth, + maxHeight, + } = this.nodeModel; + const freezeWidth = (minWidth === maxWidth); + const freezeHeight = (minHeight === maxHeight); const width = rx; const height = ry; const size = this.getResize({ @@ -263,14 +298,10 @@ class Control extends Component { height, PCTResizeInfo, pct: 1 / 2, + freezeWidth, + freezeHeight, }); // 限制放大缩小的最大最小范围 - const { - minWidth, - minHeight, - maxWidth, - maxHeight, - } = this.nodeModel; if (size.width < (minWidth / 2) || size.width > (maxWidth / 2) || size.height < (minHeight / 2) @@ -280,7 +311,11 @@ class Control extends Component { return; } // 更新中心点位置，更新文案位置 - this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY }); + // 如果限制了宽/高不变，对应的x/y不产生位移 + this.updatePosition({ + deltaX: freezeWidth ? 0 : size.deltaX, + deltaY: freezeHeight ? 0 : size.deltaY, + }); // 更新rx ry,宽高为计算属性自动更新 // @ts-ignore this.nodeModel.rx = size.width; @@ -309,6 +344,14 @@ class Control extends Component { updateDiamond = ({ deltaX, deltaY }) => { const { id, rx, ry, x, y, PCTResizeInfo } = this.nodeModel as DiamondNodeModel; const { index } = this; + const { + minWidth, + minHeight, + maxWidth, + maxHeight, + } = this.nodeModel; + const freezeWidth = (minWidth === maxWidth); + const freezeHeight = (minHeight === maxHeight); const width = rx; const height = ry; const size = this.getResize({ @@ -319,14 +362,10 @@ class Control extends Component { height, PCTResizeInfo, pct: 1 / 2, + freezeWidth, + freezeHeight, }); // 限制放大缩小的最大最小范围 - const { - minWidth, - minHeight, - maxWidth, - maxHeight, - } = this.nodeModel; if (size.width < (minWidth / 2) || size.width > (maxWidth / 2) || size.height < (minHeight / 2) @@ -336,7 +375,11 @@ class Control extends Component { return; } // 更新中心点位置，更新文案位置 - this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY }); + // 如果限制了宽/高不变，对应的x/y不产生位移 + this.updatePosition({ + deltaX: freezeWidth ? 0 : size.deltaX, + deltaY: freezeHeight ? 0 : size.deltaY, + }); // 更新rx ry,宽高为计算属性自动更新 // @ts-ignore this.nodeModel.rx = size.width;