refactor: ♻️ restriction of node movment

antvis · Aug 12, 2020 · debe04b · debe04b
1 parent a1e647f
commit debe04b
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 33 deletions.
diff --git 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
 
 <span class="tag-param">参数<span>
 
-| 名称                   | 类型                         | 必选 | 默认值      | 描述                                                       |
-|------------------------|------------------------------|:----:|-------------|----------------------------------------------------------|
-| 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                       |      |             | 其他自定义键值对，可以在事件回调中使用。                     |
 
 <span class="tag-example">用法</span>
 
@@ -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
@@ -306,20 +306,16 @@ export class Selection extends View<Selection.EventArgs> {
         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
@@ -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
@@ -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
@@ -674,8 +674,8 @@ export class Graph extends Basecoat<EventArgs> {
     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
@@ -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
@@ -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
@@ -983,7 +983,7 @@ export class NodeView<
     const position = Point.create(targetView.cell.getPosition())
     targetView.setEventData<EventData.MovingTargetNode>(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<EventData.MovingTargetNode>(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