From debe04b81d1d5544e450432ac5242997128aed30 Mon Sep 17 00:00:00 2001 From: bubkoo Date: Thu, 6 Aug 2020 11:03:47 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20restriction=20?= =?UTF-8?q?of=20node=20movment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/x6-sites/docs/api/model/node.zh.md | 20 ++++++++++---------- packages/x6/src/addon/selection/index.ts | 16 ++++++---------- packages/x6/src/addon/snapline/index.ts | 4 ++-- packages/x6/src/global/version.ts | 2 +- packages/x6/src/graph/graph.ts | 4 ++-- packages/x6/src/graph/transform.ts | 2 +- packages/x6/src/model/node.ts | 6 +++--- packages/x6/src/view/node.ts | 12 ++++++++---- 8 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/x6-sites/docs/api/model/node.zh.md b/packages/x6-sites/docs/api/model/node.zh.md index 7211a4e0075..48ad78fe1e6 100644 --- a/packages/x6-sites/docs/api/model/node.zh.md +++ b/packages/x6-sites/docs/api/model/node.zh.md @@ -483,14 +483,14 @@ translate(tx?: number, ty?: number, options?: Node.TranslateOptions): this 参数 -| 名称 | 类型 | 必选 | 默认值 | 描述 | -|------------------------|------------------------------|:----:|-------------|----------------------------------------------------------| -| tx | number | | `0` | 节点在 X 轴的偏移量。 | -| ty | number | | `0` | 节点在 Y 轴的偏移量。 | -| options.restrictedArea | Rectangle.RectangleLike | | `undefined` | 将节点的可移动范围限制在指定的矩形区域内。 | -| options.transition | boolean \| Animation.Options | | `false` | 是否使用动画或指定一个[动画选项](../cell#transition)。 | -| options.silent | boolean | | `false` | 为 `true` 时不触不触发 `'change:position'` 事件和画布重绘。 | -| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 | +| 名称 | 类型 | 必选 | 默认值 | 描述 | +|--------------------|------------------------------|:----:|-------------|----------------------------------------------------------| +| tx | number | | `0` | 节点在 X 轴的偏移量。 | +| ty | number | | `0` | 节点在 Y 轴的偏移量。 | +| options.restrict | Rectangle.RectangleLike | | `undefined` | 将节点的可移动范围限制在指定的矩形区域内。 | +| options.transition | boolean \| Animation.Options | | `false` | 是否使用动画或指定一个[动画选项](../cell#transition)。 | +| options.silent | boolean | | `false` | 为 `true` 时不触不触发 `'change:position'` 事件和画布重绘。 | +| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 | 用法 @@ -502,13 +502,13 @@ node.translate(30) // 只在 X 轴移动 node.translate(undefined, 30) // 只在 Y 轴移动 ``` -我们可以通过 `options.restrictedArea` 选项来将节点的移动限制在指定的矩形 `{x: number; y: number; width: number; height: number}` 范围内。 +我们可以通过 `options.restrict` 选项来将节点的移动限制在指定的矩形 `{x: number; y: number; width: number; height: number}` 范围内。 例如，我可以将字节的移动限制在父节点的包围盒中： ```ts child.translate(30, 30, { - restrictedArea: child.getParent().getBBox(), + restrict: child.getParent().getBBox(), }) ``` diff --git a/packages/x6/src/addon/selection/index.ts b/packages/x6/src/addon/selection/index.ts index 302e5e22ff0..e73ea3e09ae 100644 --- a/packages/x6/src/addon/selection/index.ts +++ b/packages/x6/src/addon/selection/index.ts @@ -306,20 +306,16 @@ export class Selection extends View { const client = this.graph.snapToGrid(e.clientX, e.clientY) let dx = client.x - data.clientX let dy = client.y - data.clientY - const restrictedArea = this.graph.getRestrictedArea() - if (restrictedArea) { + const restrict = this.graph.getRestrictArea() + if (restrict) { const cells = this.collection.toArray() const totalBBox = Cell.getCellsBBox(cells)! - const minDx = restrictedArea.x - totalBBox.x - const minDy = restrictedArea.y - totalBBox.y + const minDx = restrict.x - totalBBox.x + const minDy = restrict.y - totalBBox.y const maxDx = - restrictedArea.x + - restrictedArea.width - - (totalBBox.x + totalBBox.width) + restrict.x + restrict.width - (totalBBox.x + totalBBox.width) const maxDy = - restrictedArea.y + - restrictedArea.height - - (totalBBox.y + totalBBox.height) + restrict.y + restrict.height - (totalBBox.y + totalBBox.height) if (dx < minDx) { dx = minDx } diff --git a/packages/x6/src/addon/snapline/index.ts b/packages/x6/src/addon/snapline/index.ts index 0c954346d1f..0745568be24 100644 --- a/packages/x6/src/addon/snapline/index.ts +++ b/packages/x6/src/addon/snapline/index.ts @@ -368,7 +368,7 @@ export class Snapline extends View implements IDisablable { trueDirection, snapped: true, snaplines: this.cid, - restrictedArea: this.graph.getRestrictedArea(view), + restrict: this.graph.getRestrictArea(view), }) if (verticalHeight) { @@ -520,8 +520,8 @@ export class Snapline extends View implements IDisablable { if (dx !== 0 || dy !== 0) { node.translate(dx, dy, { - restrictedArea: this.graph.getRestrictedArea(targetView), snapped: true, + restrict: this.graph.getRestrictArea(targetView), }) if (horizontalWidth) { diff --git a/packages/x6/src/global/version.ts b/packages/x6/src/global/version.ts index 226bfcec5f4..f2ba0fdfa95 100644 --- a/packages/x6/src/global/version.ts +++ b/packages/x6/src/global/version.ts @@ -3,5 +3,5 @@ /** * Auto generated version file, do not modify it! */ -const version = '0.10.49' +const version = '0.10.50' export { version } diff --git a/packages/x6/src/graph/graph.ts b/packages/x6/src/graph/graph.ts index 7ef7ece9c7a..77d9306cdc6 100644 --- a/packages/x6/src/graph/graph.ts +++ b/packages/x6/src/graph/graph.ts @@ -674,8 +674,8 @@ export class Graph extends Basecoat { return this.transform.getArea() } - getRestrictedArea(view?: NodeView) { - return this.transform.getRestrictedArea(view) + getRestrictArea(view?: NodeView) { + return this.transform.getRestrictArea(view) } // #endregion diff --git a/packages/x6/src/graph/transform.ts b/packages/x6/src/graph/transform.ts index f14cdd6770f..14e17f15c84 100644 --- a/packages/x6/src/graph/transform.ts +++ b/packages/x6/src/graph/transform.ts @@ -372,7 +372,7 @@ export class TransformManager extends Base { return this.graph.graphToLocalRect(rect) } - getRestrictedArea(view?: NodeView) { + getRestrictArea(view?: NodeView) { const restrict = this.options.translating.restrict let area: Rectangle.RectangleLike | null diff --git a/packages/x6/src/model/node.ts b/packages/x6/src/model/node.ts index 81c8dfa672d..a3b2e14dd98 100644 --- a/packages/x6/src/model/node.ts +++ b/packages/x6/src/model/node.ts @@ -328,12 +328,12 @@ export class Node< const position = this.getPosition() - if (options.restrictedArea != null && options.translateBy === this.id) { + if (options.restrict != null && options.translateBy === this.id) { // We are restricting the translation for the element itself only. We get // the bounding box of the element including all its embeds. // All embeds have to be translated the exact same way as the element. const bbox = this.getBBox({ deep: true }) - const ra = options.restrictedArea + const ra = options.restrict // - - - - - - - - - - - - -> ra.x + ra.width // - - - -> position.x | // -> bbox.x @@ -987,7 +987,7 @@ export namespace Node { export interface TranslateOptions extends Cell.TranslateOptions { transition?: boolean | Animation.Options - restrictedArea?: Rectangle.RectangleLike | null + restrict?: Rectangle.RectangleLike | null } export interface RotateOptions extends SetOptions { diff --git a/packages/x6/src/view/node.ts b/packages/x6/src/view/node.ts index 2b50db03d21..5889e09639b 100644 --- a/packages/x6/src/view/node.ts +++ b/packages/x6/src/view/node.ts @@ -983,7 +983,7 @@ export class NodeView< const position = Point.create(targetView.cell.getPosition()) targetView.setEventData(e, { offset: position.diff(x, y), - restrictedArea: this.graph.getRestrictedArea(targetView), + restrict: this.graph.getRestrictArea(targetView), }) } @@ -993,12 +993,16 @@ export class NodeView< const gridSize = graph.getGridSize() const data = this.getEventData(e) const offset = data.offset - const restrictedArea = data.restrictedArea + const restrict = data.restrict let embedding = data.embedding const nextX = Util.snapToGrid(x + offset.x, gridSize) const nextY = Util.snapToGrid(y + offset.y, gridSize) - node.setPosition(nextX, nextY, { restrictedArea, deep: true, ui: true }) + node.setPosition(nextX, nextY, { + restrict, + deep: true, + ui: true, + }) if (graph.options.embedding.enabled) { if (!embedding) { @@ -1109,7 +1113,7 @@ namespace EventData { export interface MovingTargetNode { offset: Point.PointLike - restrictedArea?: Rectangle.RectangleLike | null + restrict?: Rectangle.RectangleLike | null embedding?: boolean candidateEmbedView?: NodeView | null cell?: Node