@thienvu18/designable-core 2.0.1 → 2.0.2

package/esm/models/SnapLine.js

@@ -1,110 +1,101 @@
-import { calcRectOfAxisLineSegment, calcOffsetOfSnapLineSegmentToEdge, } from '@thienvu18/designable-shared';
-import { TransformHelper } from './TransformHelper';
+import {
+  calcOffsetOfSnapLineSegmentToEdge,
+  calcRectOfAxisLineSegment,
+} from '@thienvu18/designable-shared'
+import { TransformHelper } from './TransformHelper'
 export class SnapLine {
-    constructor(helper, line) {
-        this.helper = helper;
-        this.type = line.type || 'normal';
-        this._id = line.id;
-        this.refer = line.refer;
-        this.start = { ...line.start };
-        this.end = { ...line.end };
-        this.distance = line.distance;
+  constructor(helper, line) {
+    this.helper = helper
+    this.type = line.type || 'normal'
+    this._id = line.id
+    this.refer = line.refer
+    this.start = { ...line.start }
+    this.end = { ...line.end }
+    this.distance = line.distance
+  }
+  get id() {
+    return (
+      this._id ?? `${this.start.x}-${this.start.y}-${this.end.x}-${this.end.y}`
+    )
+  }
+  get direction() {
+    if (this.start?.x === this.end?.x) return 'v'
+    return 'h'
+  }
+  get closest() {
+    return this.distance < TransformHelper.threshold
+  }
+  get rect() {
+    return calcRectOfAxisLineSegment(this)
+  }
+  translate(node, translate) {
+    if (!node || !node?.parent) return
+    const parent = node.parent
+    const dragNodeRect = node.getValidElementOffsetRect()
+    const parentRect = parent.getValidElementOffsetRect()
+    const edgeOffset = calcOffsetOfSnapLineSegmentToEdge(this, dragNodeRect)
+    if (this.direction === 'h') {
+      translate.y = this.start.y - parentRect.y - edgeOffset.y
+    } else {
+      translate.x = this.start.x - parentRect.x - edgeOffset.x
     }
-    get id() {
-        return (this._id ?? `${this.start.x}-${this.start.y}-${this.end.x}-${this.end.y}`);
+  }
+  resize(node, rect) {
+    if (!node || !node?.parent) return
+    const parent = node.parent
+    const dragNodeRect = node.getValidElementOffsetRect()
+    const parentRect = parent.getValidElementOffsetRect()
+    const edgeOffset = calcOffsetOfSnapLineSegmentToEdge(this, dragNodeRect)
+    const cursorRect = this.helper.cursorDragNodesRect
+    const snapEdge = this.snapEdge(rect)
+    if (this.direction === 'h') {
+      const y = this.start.y - parentRect.y - edgeOffset.y
+      switch (this.helper.direction) {
+        case 'left-top':
+        case 'center-top':
+        case 'right-top':
+          if (snapEdge !== 'ht') return
+          rect.y = y
+          rect.height = cursorRect.bottom - y
+          break
+        case 'left-bottom':
+        case 'center-bottom':
+        case 'right-bottom':
+          if (snapEdge !== 'hb') return
+          rect.height = this.start.y - cursorRect.top
+          break
+      }
+    } else {
+      const x = this.start.x - parentRect.x - edgeOffset.x
+      switch (this.helper.direction) {
+        case 'left-top':
+        case 'left-bottom':
+        case 'left-center':
+          if (snapEdge !== 'vl') return
+          rect.x = x
+          rect.width = cursorRect.right - x
+          break
+        case 'right-center':
+        case 'right-top':
+        case 'right-bottom':
+          if (snapEdge !== 'vr') return
+          rect.width = this.start.x - cursorRect.left
+          break
+      }
     }
-    get direction() {
-        if (this.start?.x === this.end?.x)
-            return 'v';
-        return 'h';
-    }
-    get closest() {
-        return this.distance < TransformHelper.threshold;
-    }
-    get rect() {
-        return calcRectOfAxisLineSegment(this);
-    }
-    translate(node, translate) {
-        if (!node || !node?.parent)
-            return;
-        const parent = node.parent;
-        const dragNodeRect = node.getValidElementOffsetRect();
-        const parentRect = parent.getValidElementOffsetRect();
-        const edgeOffset = calcOffsetOfSnapLineSegmentToEdge(this, dragNodeRect);
-        if (this.direction === 'h') {
-            translate.y = this.start.y - parentRect.y - edgeOffset.y;
-        }
-        else {
-            translate.x = this.start.x - parentRect.x - edgeOffset.x;
-        }
-    }
-    resize(node, rect) {
-        if (!node || !node?.parent)
-            return;
-        const parent = node.parent;
-        const dragNodeRect = node.getValidElementOffsetRect();
-        const parentRect = parent.getValidElementOffsetRect();
-        const edgeOffset = calcOffsetOfSnapLineSegmentToEdge(this, dragNodeRect);
-        const cursorRect = this.helper.cursorDragNodesRect;
-        const snapEdge = this.snapEdge(rect);
-        if (this.direction === 'h') {
-            const y = this.start.y - parentRect.y - edgeOffset.y;
-            switch (this.helper.direction) {
-                case 'left-top':
-                case 'center-top':
-                case 'right-top':
-                    if (snapEdge !== 'ht')
-                        return;
-                    rect.y = y;
-                    rect.height = cursorRect.bottom - y;
-                    break;
-                case 'left-bottom':
-                case 'center-bottom':
-                case 'right-bottom':
-                    if (snapEdge !== 'hb')
-                        return;
-                    rect.height = this.start.y - cursorRect.top;
-                    break;
-            }
-        }
-        else {
-            const x = this.start.x - parentRect.x - edgeOffset.x;
-            switch (this.helper.direction) {
-                case 'left-top':
-                case 'left-bottom':
-                case 'left-center':
-                    if (snapEdge !== 'vl')
-                        return;
-                    rect.x = x;
-                    rect.width = cursorRect.right - x;
-                    break;
-                case 'right-center':
-                case 'right-top':
-                case 'right-bottom':
-                    if (snapEdge !== 'vr')
-                        return;
-                    rect.width = this.start.x - cursorRect.left;
-                    break;
-            }
-        }
-    }
-    snapEdge(rect) {
-        const threshold = TransformHelper.threshold;
-        if (this.direction === 'h') {
-            if (Math.abs(this.start.y - rect.top) < threshold)
-                return 'ht';
-            if (Math.abs(this.start.y - (rect.top + rect.height / 2)) < threshold)
-                return 'hc';
-            if (Math.abs(this.start.y - rect.bottom) < threshold)
-                return 'hb';
-        }
-        else {
-            if (Math.abs(this.start.x - rect.left) < threshold)
-                return 'vl';
-            if (Math.abs(this.start.x - (rect.left + rect.width / 2)) < threshold)
-                return 'vc';
-            if (Math.abs(this.start.x - rect.right) < threshold)
-                return 'vr';
-        }
+  }
+  snapEdge(rect) {
+    const threshold = TransformHelper.threshold
+    if (this.direction === 'h') {
+      if (Math.abs(this.start.y - rect.top) < threshold) return 'ht'
+      if (Math.abs(this.start.y - (rect.top + rect.height / 2)) < threshold)
+        return 'hc'
+      if (Math.abs(this.start.y - rect.bottom) < threshold) return 'hb'
+    } else {
+      if (Math.abs(this.start.x - rect.left) < threshold) return 'vl'
+      if (Math.abs(this.start.x - (rect.left + rect.width / 2)) < threshold)
+        return 'vc'
+      if (Math.abs(this.start.x - rect.right) < threshold) return 'vr'
     }
+  }
 }

package/esm/models/SpaceBlock.d.ts

@@ -1,40 +1,45 @@
-import { Rect } from '@thienvu18/designable-shared';
-import { SnapLine } from './SnapLine';
-import { TransformHelper } from './TransformHelper';
-import { TreeNode } from './TreeNode';
-export type ISpaceBlockType = 'top' | 'right' | 'bottom' | 'left' | (string & {});
+import { Rect } from '@thienvu18/designable-shared'
+import { SnapLine } from './SnapLine'
+import { TransformHelper } from './TransformHelper'
+import { TreeNode } from './TreeNode'
+export type ISpaceBlockType =
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | (string & {})
 export interface ISpaceBlock {
-    id?: string;
-    refer?: TreeNode;
-    rect?: Rect;
-    distance?: number;
-    type?: ISpaceBlockType;
+  id?: string
+  refer?: TreeNode
+  rect?: Rect
+  distance?: number
+  type?: ISpaceBlockType
 }
-export type AroundSpaceBlock = Record<ISpaceBlockType, SpaceBlock>;
+export type AroundSpaceBlock = Record<ISpaceBlockType, SpaceBlock>
 export declare class SpaceBlock {
-    _id: string;
-    distance: number;
-    refer: TreeNode;
-    helper: TransformHelper;
-    rect: Rect;
-    type: ISpaceBlockType;
-    constructor(helper: TransformHelper, box: ISpaceBlock);
-    get referRect(): Rect;
-    get id(): string;
-    get next(): SpaceBlock;
-    get extendsLine(): {
-        start: {
-            x: number;
-            y: number;
-        };
-        end: {
-            x: number;
-            y: number;
-        };
-    };
-    get needExtendsLine(): boolean;
-    get crossReferRect(): Rect;
-    get crossDragNodesRect(): Rect;
-    get isometrics(): SpaceBlock[];
-    get snapLine(): SnapLine;
+  _id: string
+  distance: number
+  refer: TreeNode
+  helper: TransformHelper
+  rect: Rect
+  type: ISpaceBlockType
+  constructor(helper: TransformHelper, box: ISpaceBlock)
+  get referRect(): Rect
+  get id(): string
+  get next(): SpaceBlock
+  get extendsLine(): {
+    start: {
+      x: number
+      y: number
+    }
+    end: {
+      x: number
+      y: number
+    }
+  }
+  get needExtendsLine(): boolean
+  get crossReferRect(): Rect
+  get crossDragNodesRect(): Rect
+  get isometrics(): SpaceBlock[]
+  get snapLine(): SnapLine
 }

package/esm/models/SpaceBlock.js

@@ -1,126 +1,165 @@
-import { calcExtendsLineSegmentOfRect, calcDistanceOfSnapLineToEdges, LineSegment, Rect, } from '@thienvu18/designable-shared';
-import { SnapLine } from './SnapLine';
-import { TransformHelper } from './TransformHelper';
+import {
+  LineSegment,
+  Rect,
+  calcDistanceOfSnapLineToEdges,
+  calcExtendsLineSegmentOfRect,
+} from '@thienvu18/designable-shared'
+import { SnapLine } from './SnapLine'
+import { TransformHelper } from './TransformHelper'
 export class SpaceBlock {
-    constructor(helper, box) {
-        this.helper = helper;
-        this.distance = box.distance;
-        this.refer = box.refer;
-        this.rect = box.rect;
-        this.type = box.type;
+  constructor(helper, box) {
+    this.helper = helper
+    this.distance = box.distance
+    this.refer = box.refer
+    this.rect = box.rect
+    this.type = box.type
+  }
+  get referRect() {
+    if (!this.refer) return
+    return this.helper.getNodeRect(this.refer)
+  }
+  get id() {
+    return (
+      this._id ??
+      `${this.rect.x}-${this.rect.y}-${this.rect.width}-${this.rect.height}`
+    )
+  }
+  get next() {
+    const spaceBlock = this.helper.calcAroundSpaceBlocks(this.referRect)
+    return spaceBlock[this.type]
+  }
+  get extendsLine() {
+    if (!this.needExtendsLine) return
+    const dragNodesRect = this.helper.dragNodesRect
+    return calcExtendsLineSegmentOfRect(dragNodesRect, this.referRect)
+  }
+  get needExtendsLine() {
+    const targetRect = this.crossDragNodesRect
+    const referRect = this.crossReferRect
+    if (this.type === 'top' || this.type === 'bottom') {
+      const rightDelta = referRect.right - targetRect.left
+      const leftDelta = targetRect.right - referRect.left
+      return (
+        rightDelta < targetRect.width / 2 || leftDelta < targetRect.width / 2
+      )
+    } else {
+      const topDelta = targetRect.bottom - referRect.top
+      const bottomDelta = referRect.bottom - targetRect.top
+      return (
+        topDelta < targetRect.height / 2 || bottomDelta < targetRect.height / 2
+      )
     }
-    get referRect() {
-        if (!this.refer)
-            return;
-        return this.helper.getNodeRect(this.refer);
+    return true
+  }
+  get crossReferRect() {
+    const referRect = this.referRect
+    if (this.type === 'top' || this.type === 'bottom') {
+      return new Rect(
+        referRect.x,
+        this.rect.y,
+        referRect.width,
+        this.rect.height
+      )
+    } else {
+      return new Rect(
+        this.rect.x,
+        referRect.y,
+        this.rect.width,
+        referRect.height
+      )
     }
-    get id() {
-        return (this._id ??
-            `${this.rect.x}-${this.rect.y}-${this.rect.width}-${this.rect.height}`);
+  }
+  get crossDragNodesRect() {
+    const dragNodesRect = this.helper.dragNodesRect
+    if (this.type === 'top' || this.type === 'bottom') {
+      return new Rect(
+        dragNodesRect.x,
+        this.rect.y,
+        dragNodesRect.width,
+        this.rect.height
+      )
+    } else {
+      return new Rect(
+        this.rect.x,
+        dragNodesRect.y,
+        this.rect.width,
+        dragNodesRect.height
+      )
     }
-    get next() {
-        const spaceBlock = this.helper.calcAroundSpaceBlocks(this.referRect);
-        return spaceBlock[this.type];
+  }
+  get isometrics() {
+    const results = []
+    let spaceBlock = this
+    while ((spaceBlock = spaceBlock.next)) {
+      if (
+        Math.abs(spaceBlock.distance - this.distance) <
+        TransformHelper.threshold
+      ) {
+        if (results.some((box) => box.distance !== spaceBlock.distance))
+          continue
+        results.push(spaceBlock)
+      }
     }
-    get extendsLine() {
-        if (!this.needExtendsLine)
-            return;
-        const dragNodesRect = this.helper.dragNodesRect;
-        return calcExtendsLineSegmentOfRect(dragNodesRect, this.referRect);
-    }
-    get needExtendsLine() {
-        const targetRect = this.crossDragNodesRect;
-        const referRect = this.crossReferRect;
-        if (this.type === 'top' || this.type === 'bottom') {
-            const rightDelta = referRect.right - targetRect.left;
-            const leftDelta = targetRect.right - referRect.left;
-            return (rightDelta < targetRect.width / 2 || leftDelta < targetRect.width / 2);
-        }
-        else {
-            const topDelta = targetRect.bottom - referRect.top;
-            const bottomDelta = referRect.bottom - targetRect.top;
-            return (topDelta < targetRect.height / 2 || bottomDelta < targetRect.height / 2);
-        }
-        return true;
-    }
-    get crossReferRect() {
-        const referRect = this.referRect;
-        if (this.type === 'top' || this.type === 'bottom') {
-            return new Rect(referRect.x, this.rect.y, referRect.width, this.rect.height);
-        }
-        else {
-            return new Rect(this.rect.x, referRect.y, this.rect.width, referRect.height);
-        }
-    }
-    get crossDragNodesRect() {
-        const dragNodesRect = this.helper.dragNodesRect;
-        if (this.type === 'top' || this.type === 'bottom') {
-            return new Rect(dragNodesRect.x, this.rect.y, dragNodesRect.width, this.rect.height);
-        }
-        else {
-            return new Rect(this.rect.x, dragNodesRect.y, this.rect.width, dragNodesRect.height);
-        }
-    }
-    get isometrics() {
-        const results = [];
-        let spaceBlock = this;
-        while ((spaceBlock = spaceBlock.next)) {
-            if (Math.abs(spaceBlock.distance - this.distance) <
-                TransformHelper.threshold) {
-                if (results.some((box) => box.distance !== spaceBlock.distance))
-                    continue;
-                results.push(spaceBlock);
-            }
-        }
-        return results;
-    }
-    get snapLine() {
-        if (!this.isometrics.length)
-            return;
-        const nextRect = this.next.rect;
-        const referRect = this.referRect;
-        let line;
-        if (this.type === 'top') {
-            line = new LineSegment({
-                x: nextRect.left,
-                y: referRect.bottom + nextRect.height,
-            }, {
-                x: nextRect.right,
-                y: referRect.bottom + nextRect.height,
-            });
+    return results
+  }
+  get snapLine() {
+    if (!this.isometrics.length) return
+    const nextRect = this.next.rect
+    const referRect = this.referRect
+    let line
+    if (this.type === 'top') {
+      line = new LineSegment(
+        {
+          x: nextRect.left,
+          y: referRect.bottom + nextRect.height,
+        },
+        {
+          x: nextRect.right,
+          y: referRect.bottom + nextRect.height,
         }
-        else if (this.type === 'bottom') {
-            line = new LineSegment({
-                x: nextRect.left,
-                y: referRect.top - nextRect.height,
-            }, {
-                x: nextRect.right,
-                y: referRect.top - nextRect.height,
-            });
+      )
+    } else if (this.type === 'bottom') {
+      line = new LineSegment(
+        {
+          x: nextRect.left,
+          y: referRect.top - nextRect.height,
+        },
+        {
+          x: nextRect.right,
+          y: referRect.top - nextRect.height,
         }
-        else if (this.type === 'left') {
-            line = new LineSegment({
-                x: referRect.right + nextRect.width,
-                y: nextRect.top,
-            }, {
-                x: referRect.right + nextRect.width,
-                y: nextRect.bottom,
-            });
+      )
+    } else if (this.type === 'left') {
+      line = new LineSegment(
+        {
+          x: referRect.right + nextRect.width,
+          y: nextRect.top,
+        },
+        {
+          x: referRect.right + nextRect.width,
+          y: nextRect.bottom,
         }
-        else {
-            line = new LineSegment({
-                x: referRect.left - nextRect.width,
-                y: nextRect.top,
-            }, {
-                x: referRect.left - nextRect.width,
-                y: nextRect.bottom,
-            });
+      )
+    } else {
+      line = new LineSegment(
+        {
+          x: referRect.left - nextRect.width,
+          y: nextRect.top,
+        },
+        {
+          x: referRect.left - nextRect.width,
+          y: nextRect.bottom,
         }
-        const distance = calcDistanceOfSnapLineToEdges(line, this.helper.dragNodesEdgeLines);
-        return new SnapLine(this.helper, {
-            ...line,
-            distance,
-            type: 'space-block',
-        });
+      )
     }
+    const distance = calcDistanceOfSnapLineToEdges(
+      line,
+      this.helper.dragNodesEdgeLines
+    )
+    return new SnapLine(this.helper, {
+      ...line,
+      distance,
+      type: 'space-block',
+    })
+  }
 }