@node-projects/web-component-designer 0.0.65 → 0.0.69

package/dist/elements/widgets/designerView/extensions/PathExtension.js

@@ -1,78 +1,122 @@
-import { AbstractExtension } from "./AbstractExtension";
-import "../../../helper/PathDataPolyfill";
-export class PathExtension extends AbstractExtension {
-    //private _itemRect: DOMRect;
-    //private _svgRect: DOMRect;
-    _lastPos;
-    _parentRect;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        //this._itemRect = this.extendedItem.element.getBoundingClientRect();
-        //this._svgRect = (<SVGGeometryElement>this.extendedItem.element).ownerSVGElement.getBoundingClientRect();
-        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
-        const pathdata = this.extendedItem.node.getPathData({ normalize: true });
-        for (let p of pathdata) {
-            switch (p.type) {
-                case 'M':
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._lastPos = { x: p.values[0], y: p.values[1] };
-                    break;
-                case 'L':
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    break;
-                case 'H':
-                    break;
-                case 'V':
-                    break;
-                case 'Z':
-                    break;
-                case 'C':
-                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
-                    this._drawPathLine(p.values[4], p.values[5], p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._drawPathCircle(p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[4], p.values[5]);
-                    this._lastPos = { x: p.values[4], y: p.values[5] };
-                    break;
-                case 'c':
-                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
-                    this._drawPathLine(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._drawPathCircle(p.values[2], p.values[3]);
-                    this._drawPathCircle(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5]);
-                    this._lastPos = { x: p.values[4], y: p.values[5] };
-                    break;
-                case 'S':
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._drawPathCircle(p.values[2], p.values[3]);
-                    break;
-                case 'Q':
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._drawPathCircle(p.values[2], p.values[3]);
-                    break;
-                case 'T':
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    break;
-                case 'A':
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._drawPathCircle(p.values[5], p.values[6]);
-                    break;
-            }
-        }
-    }
-    _drawPathCircle(x, y) {
-        this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 3, 'svg-path');
-    }
-    _drawPathLine(x1, y1, x2, y2) {
-        this._drawLine(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');
-    }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { AbstractExtension } from "./AbstractExtension";
+import "../../../helper/PathDataPolyfill";
+import { EventNames } from "../../../../enums/EventNames";
+export class PathExtension extends AbstractExtension {
+    //private _itemRect: DOMRect;
+    //private _svgRect: DOMRect;
+    _lastPos;
+    _parentRect;
+    _startPos;
+    _circlePos;
+    _originalPathPoint;
+    _pathdata;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        //this._itemRect = this.extendedItem.element.getBoundingClientRect();
+        //this._svgRect = (<SVGGeometryElement>this.extendedItem.element).ownerSVGElement.getBoundingClientRect();
+        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
+        this._pathdata = this.extendedItem.node.getPathData({ normalize: true });
+        for (let p of this._pathdata) {
+            switch (p.type) {
+                case 'M':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._lastPos = { x: p.values[0], y: p.values[1] };
+                    break;
+                case 'L':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    break;
+                case 'H':
+                    break;
+                case 'V':
+                    break;
+                case 'Z':
+                    break;
+                case 'C':
+                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
+                    this._drawPathLine(p.values[4], p.values[5], p.values[2], p.values[3]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    this._drawPathCircle(p.values[4], p.values[5], p, 4);
+                    this._lastPos = { x: p.values[4], y: p.values[5] };
+                    break;
+                case 'c':
+                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
+                    this._drawPathLine(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p.values[2], p.values[3]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    this._drawPathCircle(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p, 4);
+                    this._lastPos = { x: p.values[4], y: p.values[5] };
+                    break;
+                case 'S':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    break;
+                case 'Q':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    break;
+                case 'T':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    break;
+                case 'A':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[5], p.values[6], p, 5);
+                    break;
+            }
+        }
+    }
+    pointerEvent(event, circle, p, index) {
+        event.stopPropagation();
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._startPos = { x: event.x, y: event.y };
+                this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
+                this._originalPathPoint = { x: p.values[index], y: p.values[index + 1] };
+                break;
+            case EventNames.PointerMove:
+                if (this._startPos && event.buttons > 0) {
+                    this._lastPos = { x: this._startPos.x, y: this._startPos.y };
+                    const cx = event.x - this._lastPos.x + this._circlePos.x;
+                    const cy = event.y - this._lastPos.y + this._circlePos.y;
+                    const dx = cx - this._circlePos.x;
+                    const dy = cy - this._circlePos.y;
+                    p.values[index] = this._originalPathPoint.x + dx;
+                    p.values[index + 1] = this._originalPathPoint.y + dy;
+                    this._drawPath(this._pathdata, index);
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                this._startPos = null;
+                this._circlePos = null;
+                this._lastPos = null;
+                break;
+        }
+    }
+    _drawPath(path, index) {
+        let pathD = "";
+        for (let p of path) {
+            pathD += p.type + p.values[index] + " " + p.values[index + 1];
+        }
+        this.extendedItem.setAttribute("d", pathD);
+    }
+    _drawPathCircle(x, y, p, index) {
+        let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 3, 'svg-path');
+        circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, p, index));
+        circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, p, index));
+        circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, p, index));
+    }
+    _drawPathLine(x1, y1, x2, y2) {
+        this._drawLine(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/PathExtensionProvider.d.ts

@@ -1,9 +1,9 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class PathExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class PathExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/PathExtensionProvider.js

@@ -1,17 +1,17 @@
-import { PathExtension } from "./PathExtension";
-export class PathExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.node instanceof SVGPathElement ||
-            designItem.node instanceof SVGRectElement ||
-            designItem.node instanceof SVGCircleElement ||
-            designItem.node instanceof SVGEllipseElement ||
-            designItem.node instanceof SVGLineElement ||
-            designItem.node instanceof SVGPolylineElement ||
-            designItem.node instanceof SVGPolygonElement)
-            return true;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new PathExtension(extensionManager, designerView, designItem);
-    }
-}
+import { PathExtension } from "./PathExtension";
+export class PathExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.node instanceof SVGPathElement ||
+            designItem.node instanceof SVGRectElement ||
+            designItem.node instanceof SVGCircleElement ||
+            designItem.node instanceof SVGEllipseElement ||
+            designItem.node instanceof SVGLineElement ||
+            designItem.node instanceof SVGPolylineElement ||
+            designItem.node instanceof SVGPolygonElement)
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new PathExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/PositionExtension.d.ts

@@ -1,14 +1,14 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from "./AbstractExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class PositionExtension extends AbstractExtension {
-    private _line1;
-    private _line2;
-    private _line3;
-    private _line4;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class PositionExtension extends AbstractExtension {
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/PositionExtension.js

@@ -1,45 +1,45 @@
-import { AbstractExtension } from "./AbstractExtension";
-export class PositionExtension extends AbstractExtension {
-    _line1;
-    _line2;
-    _line3;
-    _line4;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
-        const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
-        let left = Number.parseFloat(computedStyle.left.replace('px', ''));
-        if (isNaN(left))
-            left = 0;
-        let top = Number.parseFloat(computedStyle.top.replace('px', ''));
-        if (isNaN(top))
-            top = 0;
-        let right = Number.parseFloat(computedStyle.right.replace('px', ''));
-        if (isNaN(right))
-            right = 0;
-        let bottom = Number.parseFloat(computedStyle.bottom.replace('px', ''));
-        if (isNaN(bottom))
-            bottom = 0;
-        let tx = 0;
-        let ty = 0;
-        if (computedStyle.transform !== 'none') {
-            const transforms = computedStyle.transform.replace('matrix(', '').split(',');
-            tx = Number.parseFloat(transforms[4]);
-            ty = Number.parseFloat(transforms[5].replace(')', ''));
-        }
-        this._line1 = this._drawLine((xOffset / this.designerCanvas.scaleFactor - left - tx), (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, xOffset / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, 'svg-position', this._line1);
-        this._line2 = this._drawLine((xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset / this.designerCanvas.scaleFactor) - top - ty, (xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, yOffset / this.designerCanvas.scaleFactor, 'svg-position', this._line2);
-        this._line3 = this._drawLine((xOffset + itemRect.width) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, (xOffset + itemRect.width + right + -1 * tx) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, 'svg-position', this._line3);
-        this._line4 = this._drawLine((xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height) / this.designerCanvas.scaleFactor, (xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height + bottom + -1 * ty) / this.designerCanvas.scaleFactor, 'svg-position', this._line4);
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { AbstractExtension } from "./AbstractExtension";
+export class PositionExtension extends AbstractExtension {
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
+        const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
+        let left = Number.parseFloat(computedStyle.left.replace('px', ''));
+        if (isNaN(left))
+            left = 0;
+        let top = Number.parseFloat(computedStyle.top.replace('px', ''));
+        if (isNaN(top))
+            top = 0;
+        let right = Number.parseFloat(computedStyle.right.replace('px', ''));
+        if (isNaN(right))
+            right = 0;
+        let bottom = Number.parseFloat(computedStyle.bottom.replace('px', ''));
+        if (isNaN(bottom))
+            bottom = 0;
+        let tx = 0;
+        let ty = 0;
+        if (computedStyle.transform !== 'none') {
+            const transforms = computedStyle.transform.replace('matrix(', '').split(',');
+            tx = Number.parseFloat(transforms[4]);
+            ty = Number.parseFloat(transforms[5].replace(')', ''));
+        }
+        this._line1 = this._drawLine((xOffset / this.designerCanvas.scaleFactor - left - tx), (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, xOffset / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, 'svg-position', this._line1);
+        this._line2 = this._drawLine((xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset / this.designerCanvas.scaleFactor) - top - ty, (xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, yOffset / this.designerCanvas.scaleFactor, 'svg-position', this._line2);
+        this._line3 = this._drawLine((xOffset + itemRect.width) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, (xOffset + itemRect.width + right + -1 * tx) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, 'svg-position', this._line3);
+        this._line4 = this._drawLine((xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height) / this.designerCanvas.scaleFactor, (xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height + bottom + -1 * ty) / this.designerCanvas.scaleFactor, 'svg-position', this._line4);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/PositionExtensionProvider.d.ts

@@ -1,9 +1,9 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class PositionExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class PositionExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/PositionExtensionProvider.js

@@ -1,12 +1,12 @@
-import { PositionExtension } from "./PositionExtension";
-export class PositionExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        const cs = getComputedStyle(designItem.element);
-        if (cs.position === 'relative' || cs.position === 'absolute')
-            return true;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new PositionExtension(extensionManager, designerView, designItem);
-    }
-}
+import { PositionExtension } from "./PositionExtension";
+export class PositionExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        const cs = getComputedStyle(designItem.element);
+        if (cs.position === 'relative' || cs.position === 'absolute')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new PositionExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension.d.ts

@@ -1,13 +1,13 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from './AbstractExtension';
-import { IExtensionManager } from "./IExtensionManger";
-export declare class PrimarySelectionDefaultExtension extends AbstractExtension {
-    private _rect;
-    private _text;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    _drawMoveOverlay(itemRect: DOMRect): void;
-    refresh(): void;
-    dispose(): void;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class PrimarySelectionDefaultExtension extends AbstractExtension {
+    private _rect;
+    private _text;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    _drawMoveOverlay(itemRect: DOMRect): void;
+    refresh(): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension.js

@@ -1,21 +1,21 @@
-import { AbstractExtension } from './AbstractExtension';
-export class PrimarySelectionDefaultExtension extends AbstractExtension {
-    _rect;
-    _text;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    _drawMoveOverlay(itemRect) {
-    }
-    refresh() {
-        const boundRect = this.extendedItem.element.getBoundingClientRect();
-        this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
-        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { AbstractExtension } from './AbstractExtension';
+export class PrimarySelectionDefaultExtension extends AbstractExtension {
+    _rect;
+    _text;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    _drawMoveOverlay(itemRect) {
+    }
+    refresh() {
+        const boundRect = this.extendedItem.element.getBoundingClientRect();
+        this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
+        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider.d.ts

@@ -1,10 +1,10 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class PrimarySelectionDefaultExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class PrimarySelectionDefaultExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider.js

@@ -1,13 +1,13 @@
-import { PrimarySelectionDefaultExtension } from "./PrimarySelectionDefaultExtension";
-import { css } from "@node-projects/base-custom-webcomponent";
-export class PrimarySelectionDefaultExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new PrimarySelectionDefaultExtension(extensionManager, designerView, designItem);
-    }
+import { PrimarySelectionDefaultExtension } from "./PrimarySelectionDefaultExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class PrimarySelectionDefaultExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new PrimarySelectionDefaultExtension(extensionManager, designerView, designItem);
+    }
     style = css `
     .svg-text-primary { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
-  `;
-}
+  `;
+}

package/dist/elements/widgets/designerView/extensions/ResizeExtension.d.ts

@@ -1,25 +1,25 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from './AbstractExtension';
-import { IExtensionManager } from "./IExtensionManger";
-export declare class ResizeExtension extends AbstractExtension {
-    private resizeAllSelected;
-    private _initialSizes;
-    private _actionModeStarted;
-    private _initialPoint;
-    private _offsetPoint;
-    private _circle1;
-    private _circle2;
-    private _circle3;
-    private _circle4;
-    private _circle5;
-    private _circle6;
-    private _circle7;
-    private _circle8;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem, resizeAllSelected: boolean);
-    extend(): void;
-    refresh(): void;
-    _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
-    _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode?: string): void;
-    dispose(): void;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class ResizeExtension extends AbstractExtension {
+    private resizeAllSelected;
+    private _initialSizes;
+    private _actionModeStarted;
+    private _initialPoint;
+    private _offsetPoint;
+    private _circle1;
+    private _circle2;
+    private _circle3;
+    private _circle4;
+    private _circle5;
+    private _circle6;
+    private _circle7;
+    private _circle8;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem, resizeAllSelected: boolean);
+    extend(): void;
+    refresh(): void;
+    _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
+    _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode?: string): void;
+    dispose(): void;
+}