@node-projects/web-component-designer 0.0.96 → 0.0.97

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -1,48 +1,48 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { InstanceServiceContainer } from "../../services/InstanceServiceContainer";
-import { ServiceContainer } from "../../services/ServiceContainer";
-import { Snaplines } from "./Snaplines";
-import { IPlacementView } from './IPlacementView';
-import { IExtensionManager } from "./extensions/IExtensionManger";
-import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
-import { IPoint } from "../../../interfaces/IPoint";
-import { OverlayLayerView } from "./overlayLayerView";
-import { IRect } from "../../../interfaces/IRect.js";
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { ISize } from "../../../interfaces/ISize.js";
-import { ITool } from "./tools/ITool.js";
-export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
-    readonly serviceContainer: ServiceContainer;
-    readonly instanceServiceContainer: InstanceServiceContainer;
-    readonly containerBoundingRect: DOMRect;
-    readonly outerRect: DOMRect;
-    readonly rootDesignItem: IDesignItem;
-    readonly overlayLayer: OverlayLayerView;
-    readonly extensionManager: IExtensionManager;
-    readonly clickOverlay: HTMLDivElement;
-    readonly snapLines: Snaplines;
-    readonly shadowRoot: ShadowRoot;
-    readonly alignOnGrid: boolean;
-    readonly alignOnSnap: boolean;
-    readonly onContentChanged: TypedEvent<void>;
-    zoomFactor: number;
-    readonly scaleFactor: number;
-    canvasOffset: IPoint;
-    eatEvents: Element;
-    initialize(serviceContainer: ServiceContainer): any;
-    getNormalizedEventCoordinates(event: MouseEvent): IPoint;
-    getViewportCoordinates(event: MouseEvent): IPoint;
-    getNormalizedElementCoordinates(element: Element): IRect;
-    captureActiveTool(tool: ITool): any;
-    releaseActiveTool(): any;
-    getDesignSurfaceDimensions(): ISize;
-    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
-    getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
-    elementFromPoint(x: number, y: number): Element;
-    elementsFromPoint(x: number, y: number): Element[];
-    showHoverExtension(element: Element): any;
-    zoomTowardsPoint(point: IPoint, scalechange: number): void;
-    zoomPoint(canvasPoint: IPoint, newZoom: number): void;
-    zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
-    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): void;
-}
+import { IDesignItem } from "../../item/IDesignItem";
+import { InstanceServiceContainer } from "../../services/InstanceServiceContainer";
+import { ServiceContainer } from "../../services/ServiceContainer";
+import { Snaplines } from "./Snaplines";
+import { IPlacementView } from './IPlacementView';
+import { IExtensionManager } from "./extensions/IExtensionManger";
+import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
+import { IPoint } from "../../../interfaces/IPoint";
+import { OverlayLayerView } from "./overlayLayerView";
+import { IRect } from "../../../interfaces/IRect.js";
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { ISize } from "../../../interfaces/ISize.js";
+import { ITool } from "./tools/ITool.js";
+export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
+    readonly serviceContainer: ServiceContainer;
+    readonly instanceServiceContainer: InstanceServiceContainer;
+    readonly containerBoundingRect: DOMRect;
+    readonly outerRect: DOMRect;
+    readonly rootDesignItem: IDesignItem;
+    readonly overlayLayer: OverlayLayerView;
+    readonly extensionManager: IExtensionManager;
+    readonly clickOverlay: HTMLDivElement;
+    readonly snapLines: Snaplines;
+    readonly shadowRoot: ShadowRoot;
+    readonly alignOnGrid: boolean;
+    readonly alignOnSnap: boolean;
+    readonly onContentChanged: TypedEvent<void>;
+    zoomFactor: number;
+    readonly scaleFactor: number;
+    canvasOffset: IPoint;
+    eatEvents: Element;
+    initialize(serviceContainer: ServiceContainer): any;
+    getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getViewportCoordinates(event: MouseEvent): IPoint;
+    getNormalizedElementCoordinates(element: Element): IRect;
+    captureActiveTool(tool: ITool): any;
+    releaseActiveTool(): any;
+    getDesignSurfaceDimensions(): ISize;
+    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
+    getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
+    elementFromPoint(x: number, y: number): Element;
+    elementsFromPoint(x: number, y: number): Element[];
+    showHoverExtension(element: Element): any;
+    zoomTowardsPoint(point: IPoint, scalechange: number): void;
+    zoomPoint(canvasPoint: IPoint, newZoom: number): void;
+    zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): void;
+}

package/dist/elements/widgets/designerView/IDesignerCanvas.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/elements/widgets/designerView/IPlacementView.d.ts

@@ -1,14 +1,14 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { OverlayLayerView } from "./overlayLayerView";
-import { Snaplines } from './Snaplines';
-export interface IPlacementView {
-    alignOnSnap: boolean;
-    alignOnGrid: boolean;
-    gridSize: number;
-    rootDesignItem: IDesignItem;
-    overlayLayer: OverlayLayerView;
-    snapLines: Snaplines;
-    readonly zoomFactor: number;
-    readonly scaleFactor: number;
-    readonly transformHelperElement: HTMLDivElement;
-}
+import { IDesignItem } from "../../item/IDesignItem";
+import { OverlayLayerView } from "./overlayLayerView";
+import { Snaplines } from './Snaplines';
+export interface IPlacementView {
+    alignOnSnap: boolean;
+    alignOnGrid: boolean;
+    gridSize: number;
+    rootDesignItem: IDesignItem;
+    overlayLayer: OverlayLayerView;
+    snapLines: Snaplines;
+    readonly zoomFactor: number;
+    readonly scaleFactor: number;
+    readonly transformHelperElement: HTMLDivElement;
+}

package/dist/elements/widgets/designerView/IPlacementView.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/elements/widgets/designerView/Snaplines.d.ts

@@ -1,21 +1,21 @@
-import type { IDesignItem } from "../../item/IDesignItem";
-import type { IPoint } from "../../../interfaces/IPoint";
-import type { ISize } from '../../../interfaces/ISize';
-import { OverlayLayerView } from "./overlayLayerView";
-import { IRect } from "../../../interfaces/IRect.js";
-export declare class Snaplines {
-    snapOffset: number;
-    private _overlayLayerView;
-    private _containerItem;
-    private _positionsH;
-    private _positionsMiddleH;
-    private _positionsV;
-    private _positionsMiddleV;
-    private _outerRect;
-    constructor(overlayLayer: OverlayLayerView);
-    initialize(containerItem: IDesignItem): void;
-    clearSnaplines(): void;
-    calculateSnaplines(ignoredItems: IDesignItem[]): void;
-    snapToPosition(position: IPoint, size: ISize, moveDirection: IPoint): IPoint;
-    drawSnaplines(position: IPoint, size: ISize, rectsH: IRect[], rectsV: IRect[]): void;
-}
+import type { IDesignItem } from "../../item/IDesignItem";
+import type { IPoint } from "../../../interfaces/IPoint";
+import type { ISize } from '../../../interfaces/ISize';
+import { OverlayLayerView } from "./overlayLayerView";
+import { IRect } from "../../../interfaces/IRect.js";
+export declare class Snaplines {
+    snapOffset: number;
+    private _overlayLayerView;
+    private _containerItem;
+    private _positionsH;
+    private _positionsMiddleH;
+    private _positionsV;
+    private _positionsMiddleV;
+    private _outerRect;
+    constructor(overlayLayer: OverlayLayerView);
+    initialize(containerItem: IDesignItem): void;
+    clearSnaplines(): void;
+    calculateSnaplines(ignoredItems: IDesignItem[]): void;
+    snapToPosition(position: IPoint, size: ISize, moveDirection: IPoint): IPoint;
+    drawSnaplines(position: IPoint, size: ISize, rectsH: IRect[], rectsV: IRect[]): void;
+}

package/dist/elements/widgets/designerView/Snaplines.js

@@ -1,220 +1,220 @@
-import { OverlayLayer } from "./extensions/OverlayLayer.js";
-const overlayLayer = OverlayLayer.Normal;
-export class Snaplines {
-    snapOffset = 15;
-    _overlayLayerView;
-    _containerItem;
-    _positionsH = [];
-    _positionsMiddleH = [];
-    _positionsV = [];
-    _positionsMiddleV = [];
-    _outerRect;
-    constructor(overlayLayer) {
-        this._overlayLayerView = overlayLayer;
-    }
-    initialize(containerItem) {
-        //add snapline layer
-        this._containerItem = containerItem;
-    }
-    clearSnaplines() {
-        if (this._overlayLayerView.removeAllNodesWithClass)
-            this._overlayLayerView.removeAllNodesWithClass('svg-snapline');
-        this._positionsH = [];
-        this._positionsMiddleH = [];
-        this._positionsV = [];
-        this._positionsMiddleV = [];
-    }
-    calculateSnaplines(ignoredItems) {
-        this.clearSnaplines();
-        const providedSnaplines = this._containerItem.serviceContainer.snaplinesProviderService.provideSnaplines(this._containerItem, ignoredItems);
-        this._outerRect = providedSnaplines.outerRect;
-        this._positionsH = providedSnaplines.positionsH;
-        this._positionsMiddleH = providedSnaplines.positionsMiddleH;
-        this._positionsV = providedSnaplines.positionsV;
-        this._positionsMiddleV = providedSnaplines.positionsMiddleV;
-    }
-    //return the snapped position
-    snapToPosition(position, size, moveDirection) {
-        let minDiff = this.snapOffset + 1;
-        let pH = undefined;
-        let posH = undefined;
-        for (let i = 0; i < this._positionsH.length; i++) {
-            let akDiff1 = Math.abs(this._positionsH[i][0] - position.x);
-            if (akDiff1 < minDiff || (akDiff1 === minDiff && pH === undefined)) {
-                minDiff = akDiff1;
-                pH = [];
-                posH = this._positionsH[i][0];
-            }
-            let akDiff2;
-            if (size) {
-                akDiff2 = Math.abs(position.x + size.width - this._positionsH[i][0]);
-                if (akDiff2 < minDiff || (akDiff2 === minDiff && pH === undefined)) {
-                    minDiff = akDiff2;
-                    pH = [];
-                    posH = this._positionsH[i][0] - size.width;
-                }
-            }
-            if (akDiff1 === minDiff) {
-                pH.push(this._positionsH[i][1]);
-            }
-            if (size) {
-                if (akDiff2 === minDiff && akDiff1 !== minDiff) {
-                    pH.push(this._positionsH[i][1]);
-                }
-            }
-        }
-        if (size) {
-            for (let i = 0; i < this._positionsMiddleH.length; i++) {
-                let akDiff1 = Math.abs(this._positionsMiddleH[i][0] - (position.x + size.width / 2));
-                if (akDiff1 < minDiff || (akDiff1 === minDiff && pH === undefined)) {
-                    minDiff = akDiff1;
-                    pH = [];
-                    posH = this._positionsMiddleH[i][0] - size.width / 2;
-                }
-                if (akDiff1 === minDiff) {
-                    pH.push(this._positionsMiddleH[i][1]);
-                }
-            }
-        }
-        minDiff = this.snapOffset + 1;
-        let pV = undefined;
-        let posV = undefined;
-        for (let i = 0; i < this._positionsV.length; i++) {
-            let akDiff1 = Math.abs(this._positionsV[i][0] - position.y);
-            if (akDiff1 < minDiff || (akDiff1 === minDiff && pV === undefined)) {
-                minDiff = akDiff1;
-                pV = [];
-                posV = this._positionsV[i][0];
-            }
-            let akDiff2;
-            if (size) {
-                akDiff2 = Math.abs(position.y + size.height - this._positionsV[i][0]);
-                if (akDiff2 < minDiff || (akDiff2 === minDiff && pV === undefined)) {
-                    minDiff = akDiff2;
-                    pV = [];
-                    posV = this._positionsV[i][0] - size.height;
-                }
-            }
-            if (akDiff1 === minDiff) {
-                pV.push(this._positionsV[i][1]);
-            }
-            if (size) {
-                if (akDiff2 === minDiff && akDiff1 !== minDiff) {
-                    pV.push(this._positionsV[i][1]);
-                }
-            }
-        }
-        if (size) {
-            for (let i = 0; i < this._positionsMiddleV.length; i++) {
-                let akDiff1 = Math.abs(this._positionsMiddleV[i][0] - (position.y + size.height / 2));
-                if (akDiff1 < minDiff || (akDiff1 === minDiff && pV === undefined)) {
-                    minDiff = akDiff1;
-                    pV = [];
-                    posV = this._positionsMiddleV[i][0] - size.height / 2;
-                }
-                if (akDiff1 === minDiff) {
-                    pV.push(this._positionsMiddleV[i][1]);
-                }
-            }
-        }
-        this._overlayLayerView.removeAllNodesWithClass('svg-snapline');
-        if (pH !== undefined || pV !== undefined) {
-            let pos = { x: pH !== undefined ? posH : position.x, y: pV !== undefined ? posV : position.y };
-            this.drawSnaplines(pos, size, pH, pV);
-            return { x: pH !== undefined ? posH : null, y: pV !== undefined ? posV : null };
-        }
-        return { x: null, y: null };
-    }
-    drawSnaplines(position, size, rectsH, rectsV) {
-        if (rectsH) {
-            let minY = position.y;
-            let maxY = position.y;
-            for (const r of rectsH) {
-                let ry = r.y - this._outerRect.top;
-                minY = minY < ry ? minY : ry;
-                maxY = maxY > ry ? maxY : ry;
-            }
-            for (const r of rectsH) {
-                if (r.x - this._outerRect.left == position.x || (size && r.x - this._outerRect.left == position.x + size.width)) {
-                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-                    line.setAttribute('x1', (r.x - this._outerRect.x));
-                    line.setAttribute('x2', (r.x - this._outerRect.x));
-                    line.setAttribute('y1', (minY));
-                    line.setAttribute('y2', (maxY));
-                    line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
-                }
-                if (r.x - this._outerRect.left + r.width == position.x || (size && r.x - this._outerRect.left + r.width == position.x + size.width)) {
-                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-                    line.setAttribute('x1', (r.x - this._outerRect.x + r.width));
-                    line.setAttribute('x2', (r.x - this._outerRect.x + r.width));
-                    line.setAttribute('y1', (minY));
-                    line.setAttribute('y2', (maxY));
-                    line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
-                }
-                if (size && r.x - this._outerRect.left + r.width / 2 == position.x + size.width / 2) {
-                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-                    line.setAttribute('x1', (r.x - this._outerRect.x + r.width / 2));
-                    line.setAttribute('x2', (r.x - this._outerRect.x + r.width / 2));
-                    line.setAttribute('y1', (minY));
-                    line.setAttribute('y2', (maxY));
-                    line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
-                }
-                let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-                rect.setAttribute('x', (r.x - this._outerRect.x));
-                rect.setAttribute('width', (r.width));
-                rect.setAttribute('y', (r.y - this._outerRect.y));
-                rect.setAttribute('height', (r.height));
-                rect.setAttribute('class', 'svg-snapline');
-                this._overlayLayerView.addOverlay(rect, overlayLayer);
-            }
-        }
-        if (rectsV) {
-            let minX = position.x;
-            let maxX = position.x;
-            for (const r of rectsV) {
-                let rx = r.x - this._outerRect.left;
-                minX = minX < rx ? minX : rx;
-                maxX = maxX > rx ? maxX : rx;
-            }
-            for (const r of rectsV) {
-                if (r.y - this._outerRect.top == position.y || (size && r.y - this._outerRect.top == position.y + size.height)) {
-                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-                    line.setAttribute('x1', (minX));
-                    line.setAttribute('x2', (maxX));
-                    line.setAttribute('y1', (r.y - this._outerRect.y));
-                    line.setAttribute('y2', (r.y - this._outerRect.y));
-                    line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
-                }
-                if (r.y - this._outerRect.top + r.height == position.y || (size && r.y - this._outerRect.top + r.height == position.y + size.height)) {
-                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-                    line.setAttribute('x1', (minX));
-                    line.setAttribute('x2', (maxX));
-                    line.setAttribute('y1', (r.y - this._outerRect.y + r.height));
-                    line.setAttribute('y2', (r.y - this._outerRect.y + r.height));
-                    line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
-                }
-                if (size && r.y - this._outerRect.top + r.height / 2 == position.y + size.height / 2) {
-                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-                    line.setAttribute('x1', (minX));
-                    line.setAttribute('x2', (maxX));
-                    line.setAttribute('y1', (r.y - this._outerRect.y + r.height / 2));
-                    line.setAttribute('y2', (r.y - this._outerRect.y + r.height / 2));
-                    line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
-                }
-                let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-                rect.setAttribute('x', (r.x - this._outerRect.x));
-                rect.setAttribute('width', (r.width));
-                rect.setAttribute('y', (r.y - this._outerRect.y));
-                rect.setAttribute('height', (r.height));
-                rect.setAttribute('class', 'svg-snapline');
-                this._overlayLayerView.addOverlay(rect, overlayLayer);
-            }
-        }
-    }
-}
+import { OverlayLayer } from "./extensions/OverlayLayer.js";
+const overlayLayer = OverlayLayer.Normal;
+export class Snaplines {
+    snapOffset = 5;
+    _overlayLayerView;
+    _containerItem;
+    _positionsH = [];
+    _positionsMiddleH = [];
+    _positionsV = [];
+    _positionsMiddleV = [];
+    _outerRect;
+    constructor(overlayLayer) {
+        this._overlayLayerView = overlayLayer;
+    }
+    initialize(containerItem) {
+        //add snapline layer
+        this._containerItem = containerItem;
+    }
+    clearSnaplines() {
+        if (this._overlayLayerView.removeAllNodesWithClass)
+            this._overlayLayerView.removeAllNodesWithClass('svg-snapline');
+        this._positionsH = [];
+        this._positionsMiddleH = [];
+        this._positionsV = [];
+        this._positionsMiddleV = [];
+    }
+    calculateSnaplines(ignoredItems) {
+        this.clearSnaplines();
+        const providedSnaplines = this._containerItem.serviceContainer.snaplinesProviderService.provideSnaplines(this._containerItem, ignoredItems);
+        this._outerRect = providedSnaplines.outerRect;
+        this._positionsH = providedSnaplines.positionsH;
+        this._positionsMiddleH = providedSnaplines.positionsMiddleH;
+        this._positionsV = providedSnaplines.positionsV;
+        this._positionsMiddleV = providedSnaplines.positionsMiddleV;
+    }
+    //return the snapped position
+    snapToPosition(position, size, moveDirection) {
+        let minDiff = this.snapOffset + 1;
+        let pH = undefined;
+        let posH = undefined;
+        for (let i = 0; i < this._positionsH.length; i++) {
+            let akDiff1 = Math.abs(this._positionsH[i][0] - position.x);
+            if (akDiff1 < minDiff || (akDiff1 === minDiff && pH === undefined)) {
+                minDiff = akDiff1;
+                pH = [];
+                posH = this._positionsH[i][0];
+            }
+            let akDiff2;
+            if (size) {
+                akDiff2 = Math.abs(position.x + size.width - this._positionsH[i][0]);
+                if (akDiff2 < minDiff || (akDiff2 === minDiff && pH === undefined)) {
+                    minDiff = akDiff2;
+                    pH = [];
+                    posH = this._positionsH[i][0] - size.width;
+                }
+            }
+            if (akDiff1 === minDiff) {
+                pH.push(this._positionsH[i][1]);
+            }
+            if (size) {
+                if (akDiff2 === minDiff && akDiff1 !== minDiff) {
+                    pH.push(this._positionsH[i][1]);
+                }
+            }
+        }
+        if (size) {
+            for (let i = 0; i < this._positionsMiddleH.length; i++) {
+                let akDiff1 = Math.abs(this._positionsMiddleH[i][0] - (position.x + size.width / 2));
+                if (akDiff1 < minDiff || (akDiff1 === minDiff && pH === undefined)) {
+                    minDiff = akDiff1;
+                    pH = [];
+                    posH = this._positionsMiddleH[i][0] - size.width / 2;
+                }
+                if (akDiff1 === minDiff) {
+                    pH.push(this._positionsMiddleH[i][1]);
+                }
+            }
+        }
+        minDiff = this.snapOffset + 1;
+        let pV = undefined;
+        let posV = undefined;
+        for (let i = 0; i < this._positionsV.length; i++) {
+            let akDiff1 = Math.abs(this._positionsV[i][0] - position.y);
+            if (akDiff1 < minDiff || (akDiff1 === minDiff && pV === undefined)) {
+                minDiff = akDiff1;
+                pV = [];
+                posV = this._positionsV[i][0];
+            }
+            let akDiff2;
+            if (size) {
+                akDiff2 = Math.abs(position.y + size.height - this._positionsV[i][0]);
+                if (akDiff2 < minDiff || (akDiff2 === minDiff && pV === undefined)) {
+                    minDiff = akDiff2;
+                    pV = [];
+                    posV = this._positionsV[i][0] - size.height;
+                }
+            }
+            if (akDiff1 === minDiff) {
+                pV.push(this._positionsV[i][1]);
+            }
+            if (size) {
+                if (akDiff2 === minDiff && akDiff1 !== minDiff) {
+                    pV.push(this._positionsV[i][1]);
+                }
+            }
+        }
+        if (size) {
+            for (let i = 0; i < this._positionsMiddleV.length; i++) {
+                let akDiff1 = Math.abs(this._positionsMiddleV[i][0] - (position.y + size.height / 2));
+                if (akDiff1 < minDiff || (akDiff1 === minDiff && pV === undefined)) {
+                    minDiff = akDiff1;
+                    pV = [];
+                    posV = this._positionsMiddleV[i][0] - size.height / 2;
+                }
+                if (akDiff1 === minDiff) {
+                    pV.push(this._positionsMiddleV[i][1]);
+                }
+            }
+        }
+        this._overlayLayerView.removeAllNodesWithClass('svg-snapline');
+        if (pH !== undefined || pV !== undefined) {
+            let pos = { x: pH !== undefined ? posH : position.x, y: pV !== undefined ? posV : position.y };
+            this.drawSnaplines(pos, size, pH, pV);
+            return { x: pH !== undefined ? posH : null, y: pV !== undefined ? posV : null };
+        }
+        return { x: null, y: null };
+    }
+    drawSnaplines(position, size, rectsH, rectsV) {
+        if (rectsH) {
+            let minY = position.y;
+            let maxY = position.y;
+            for (const r of rectsH) {
+                let ry = r.y - this._outerRect.top;
+                minY = minY < ry ? minY : ry;
+                maxY = maxY > ry ? maxY : ry;
+            }
+            for (const r of rectsH) {
+                if (r.x - this._outerRect.left == position.x || (size && r.x - this._outerRect.left == position.x + size.width)) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (r.x - this._outerRect.x));
+                    line.setAttribute('x2', (r.x - this._outerRect.x));
+                    line.setAttribute('y1', (minY));
+                    line.setAttribute('y2', (maxY));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                }
+                if (r.x - this._outerRect.left + r.width == position.x || (size && r.x - this._outerRect.left + r.width == position.x + size.width)) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (r.x - this._outerRect.x + r.width));
+                    line.setAttribute('x2', (r.x - this._outerRect.x + r.width));
+                    line.setAttribute('y1', (minY));
+                    line.setAttribute('y2', (maxY));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                }
+                if (size && r.x - this._outerRect.left + r.width / 2 == position.x + size.width / 2) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (r.x - this._outerRect.x + r.width / 2));
+                    line.setAttribute('x2', (r.x - this._outerRect.x + r.width / 2));
+                    line.setAttribute('y1', (minY));
+                    line.setAttribute('y2', (maxY));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                }
+                let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                rect.setAttribute('x', (r.x - this._outerRect.x));
+                rect.setAttribute('width', (r.width));
+                rect.setAttribute('y', (r.y - this._outerRect.y));
+                rect.setAttribute('height', (r.height));
+                rect.setAttribute('class', 'svg-snapline');
+                this._overlayLayerView.addOverlay(rect, overlayLayer);
+            }
+        }
+        if (rectsV) {
+            let minX = position.x;
+            let maxX = position.x;
+            for (const r of rectsV) {
+                let rx = r.x - this._outerRect.left;
+                minX = minX < rx ? minX : rx;
+                maxX = maxX > rx ? maxX : rx;
+            }
+            for (const r of rectsV) {
+                if (r.y - this._outerRect.top == position.y || (size && r.y - this._outerRect.top == position.y + size.height)) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (minX));
+                    line.setAttribute('x2', (maxX));
+                    line.setAttribute('y1', (r.y - this._outerRect.y));
+                    line.setAttribute('y2', (r.y - this._outerRect.y));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                }
+                if (r.y - this._outerRect.top + r.height == position.y || (size && r.y - this._outerRect.top + r.height == position.y + size.height)) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (minX));
+                    line.setAttribute('x2', (maxX));
+                    line.setAttribute('y1', (r.y - this._outerRect.y + r.height));
+                    line.setAttribute('y2', (r.y - this._outerRect.y + r.height));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                }
+                if (size && r.y - this._outerRect.top + r.height / 2 == position.y + size.height / 2) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (minX));
+                    line.setAttribute('x2', (maxX));
+                    line.setAttribute('y1', (r.y - this._outerRect.y + r.height / 2));
+                    line.setAttribute('y2', (r.y - this._outerRect.y + r.height / 2));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                }
+                let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                rect.setAttribute('x', (r.x - this._outerRect.x));
+                rect.setAttribute('width', (r.width));
+                rect.setAttribute('y', (r.y - this._outerRect.y));
+                rect.setAttribute('height', (r.height));
+                rect.setAttribute('class', 'svg-snapline');
+                this._overlayLayerView.addOverlay(rect, overlayLayer);
+            }
+        }
+    }
+}

package/dist/elements/widgets/designerView/defaultConfiguredDesignerView.d.ts

@@ -1,5 +1,5 @@
-import { DesignerView } from "./designerView";
-export declare class DefaultConfiguredDesignerView extends DesignerView {
-    constructor();
-    ready(): Promise<void>;
-}
+import { DesignerView } from "./designerView";
+export declare class DefaultConfiguredDesignerView extends DesignerView {
+    constructor();
+    ready(): Promise<void>;
+}