@node-projects/web-component-designer 0.0.35 → 0.0.39

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

@@ -0,0 +1,29 @@
+import { AbstractExtension } from "./AbstractExtension";
+export class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        if (computedStyle.margin !== '0px') {
+            const xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
+            const yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
+            const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+            const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+            const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
+            const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
+            this._drawRect(xOffset - left, yOffset - top, left + itemRect.width + right, top, 'svg-margin');
+            this._drawRect(xOffset - left, yOffset, left, itemRect.height, 'svg-margin');
+            this._drawRect(xOffset + itemRect.width, yOffset, right, itemRect.height, 'svg-margin');
+            this._drawRect(xOffset - left, yOffset + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
+        }
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/PermamentCursorExtensionProvider copy.d.ts

@@ -0,0 +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 CanvasExtensionProvider 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/PermamentCursorExtensionProvider copy.js

@@ -0,0 +1,15 @@
+import { CanvasExtension } from './CanvasExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class CanvasExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'block')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new CanvasExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-margin { fill: #ff944722; }
+  `;
+}

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

@@ -0,0 +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 CanvasExtensionProvider 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/PermamentCursorExtensionProvider.js

@@ -0,0 +1,15 @@
+import { CanvasExtension } from './CanvasExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class CanvasExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'block')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new CanvasExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-margin { fill: #ff944722; }
+  `;
+}

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

@@ -1,5 +1,9 @@
 import { AbstractExtension } from "./AbstractExtension";
 export class PositionExtension extends AbstractExtension {
+    _line1;
+    _line2;
+    _line3;
+    _line4;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -9,8 +13,8 @@ export class PositionExtension extends AbstractExtension {
     refresh() {
         const computedStyle = getComputedStyle(this.extendedItem.element);
         let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
-        const yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
+        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;
@@ -30,10 +34,10 @@ export class PositionExtension extends AbstractExtension {
             tx = Number.parseFloat(transforms[4]);
             ty = Number.parseFloat(transforms[5].replace(')', ''));
         }
-        this._line1 = this._drawLineOverlay(xOffset - left - tx, yOffset + itemRect.height / 2, xOffset, yOffset + itemRect.height / 2, 'svg-position', this._line1);
-        this._line2 = this._drawLineOverlay(xOffset + itemRect.width / 2, yOffset - top - ty, xOffset + itemRect.width / 2, yOffset, 'svg-position', this._line2);
-        this._line3 = this._drawLineOverlay(xOffset + itemRect.width, yOffset + itemRect.height / 2, xOffset + itemRect.width + right + -1 * tx, yOffset + itemRect.height / 2, 'svg-position', this._line3);
-        this._line4 = this._drawLineOverlay(xOffset + itemRect.width / 2, yOffset + itemRect.height, xOffset + itemRect.width / 2, yOffset + itemRect.height + bottom + -1 * ty, 'svg-position', this._line4);
+        this._line1 = this._drawLine(xOffset - left - tx, yOffset + itemRect.height / 2, xOffset, yOffset + itemRect.height / 2, 'svg-position', this._line1);
+        this._line2 = this._drawLine(xOffset + itemRect.width / 2, yOffset - top - ty, xOffset + itemRect.width / 2, yOffset, 'svg-position', this._line2);
+        this._line3 = this._drawLine(xOffset + itemRect.width, yOffset + itemRect.height / 2, xOffset + itemRect.width + right + -1 * tx, yOffset + itemRect.height / 2, 'svg-position', this._line3);
+        this._line4 = this._drawLine(xOffset + itemRect.width / 2, yOffset + itemRect.height, xOffset + itemRect.width / 2, yOffset + itemRect.height + bottom + -1 * ty, 'svg-position', this._line4);
     }
     dispose() {
         this._removeAllOverlays();

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

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

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

@@ -1,6 +1,18 @@
 import { EventNames } from "../../../../enums/EventNames";
 import { AbstractExtension } from './AbstractExtension';
 export class ResizeExtension extends AbstractExtension {
+    resizeAllSelected;
+    _initialSizes;
+    _actionModeStarted;
+    _initialPoint;
+    _circle1;
+    _circle2;
+    _circle3;
+    _circle4;
+    _circle5;
+    _circle6;
+    _circle7;
+    _circle8;
     constructor(extensionManager, designerView, extendedItem, resizeAllSelected) {
         super(extensionManager, designerView, extendedItem);
         this.resizeAllSelected = resizeAllSelected;
@@ -9,14 +21,14 @@ export class ResizeExtension extends AbstractExtension {
     }
     refresh() {
         const rect = this.extendedItem.element.getBoundingClientRect();
-        this._circle1 = this._drawResizerOverlay(rect.x - this.designerView.containerBoundingRect.x, rect.y - this.designerView.containerBoundingRect.y, 'nw-resize', this._circle1);
-        this._circle2 = this._drawResizerOverlay(rect.x + (rect.width / 2) - this.designerView.containerBoundingRect.x, rect.y - this.designerView.containerBoundingRect.y, 'n-resize', this._circle2);
-        this._circle3 = this._drawResizerOverlay(rect.x + rect.width - this.designerView.containerBoundingRect.x, rect.y - this.designerView.containerBoundingRect.y, 'ne-resize', this._circle3);
-        this._circle4 = this._drawResizerOverlay(rect.x - this.designerView.containerBoundingRect.x, rect.y + rect.height - this.designerView.containerBoundingRect.y, 'sw-resize', this._circle4);
-        this._circle5 = this._drawResizerOverlay(rect.x + (rect.width / 2) - this.designerView.containerBoundingRect.x, rect.y + rect.height - this.designerView.containerBoundingRect.y, 's-resize', this._circle5);
-        this._circle6 = this._drawResizerOverlay(rect.x + rect.width - this.designerView.containerBoundingRect.x, rect.y + rect.height - this.designerView.containerBoundingRect.y, 'se-resize', this._circle6);
-        this._circle7 = this._drawResizerOverlay(rect.x - this.designerView.containerBoundingRect.x, rect.y + (rect.height / 2) - this.designerView.containerBoundingRect.y, 'w-resize', this._circle7);
-        this._circle8 = this._drawResizerOverlay(rect.x + rect.width - this.designerView.containerBoundingRect.x, rect.y + (rect.height / 2) - this.designerView.containerBoundingRect.y, 'e-resize', this._circle8);
+        this._circle1 = this._drawResizerOverlay(rect.x - this.designerCanvas.containerBoundingRect.x, rect.y - this.designerCanvas.containerBoundingRect.y, 'nw-resize', this._circle1);
+        this._circle2 = this._drawResizerOverlay(rect.x + (rect.width / 2) - this.designerCanvas.containerBoundingRect.x, rect.y - this.designerCanvas.containerBoundingRect.y, 'n-resize', this._circle2);
+        this._circle3 = this._drawResizerOverlay(rect.x + rect.width - this.designerCanvas.containerBoundingRect.x, rect.y - this.designerCanvas.containerBoundingRect.y, 'ne-resize', this._circle3);
+        this._circle4 = this._drawResizerOverlay(rect.x - this.designerCanvas.containerBoundingRect.x, rect.y + rect.height - this.designerCanvas.containerBoundingRect.y, 'sw-resize', this._circle4);
+        this._circle5 = this._drawResizerOverlay(rect.x + (rect.width / 2) - this.designerCanvas.containerBoundingRect.x, rect.y + rect.height - this.designerCanvas.containerBoundingRect.y, 's-resize', this._circle5);
+        this._circle6 = this._drawResizerOverlay(rect.x + rect.width - this.designerCanvas.containerBoundingRect.x, rect.y + rect.height - this.designerCanvas.containerBoundingRect.y, 'se-resize', this._circle6);
+        this._circle7 = this._drawResizerOverlay(rect.x - this.designerCanvas.containerBoundingRect.x, rect.y + (rect.height / 2) - this.designerCanvas.containerBoundingRect.y, 'w-resize', this._circle7);
+        this._circle8 = this._drawResizerOverlay(rect.x + rect.width - this.designerCanvas.containerBoundingRect.x, rect.y + (rect.height / 2) - this.designerCanvas.containerBoundingRect.y, 'e-resize', this._circle8);
         if (rect.width < 12) {
             this._circle2.style.display = 'none';
             this._circle5.style.display = 'none';
@@ -35,7 +47,7 @@ export class ResizeExtension extends AbstractExtension {
         }
     }
     _drawResizerOverlay(x, y, cursor, oldCircle) {
-        let circle = this._drawCircleOverlay(x, y, 3, 'svg-primary-resizer', oldCircle);
+        let circle = this._drawCircle(x, y, 3, 'svg-primary-resizer', oldCircle);
         if (!oldCircle) {
             circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, cursor));
             circle.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, cursor));
@@ -46,26 +58,24 @@ export class ResizeExtension extends AbstractExtension {
     }
     _pointerActionTypeResize(event, actionMode = 'se-resize') {
         event.stopPropagation();
-        const currentPoint = this.designerView.getDesignerMousepoint(event, this.extendedItem.element, event.type === 'pointerdown' ? null : this._initialPoint);
+        const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event); //, this.extendedItem.element, event.type === 'pointerdown' ? null : this._initialPoint);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
                 this._initialPoint = currentPoint;
                 this._initialSizes = [];
                 this._actionModeStarted = actionMode;
-                for (const designItem of this.designerView.instanceServiceContainer.selectionService.selectedElements) {
+                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                     let rect = designItem.element.getBoundingClientRect();
                     this._initialSizes.push({ width: rect.width, height: rect.height });
                 }
-                if (this.designerView.alignOnSnap)
-                    this.designerView.snapLines.calculateSnaplines(this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                if (this.designerCanvas.alignOnSnap)
+                    this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
-                    this._initialPoint.offsetInControlX = 0;
-                    this._initialPoint.offsetInControlY = 0;
-                    const containerService = this.designerView.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent));
-                    const diff = containerService.placePoint(event, this.designerView, this.extendedItem.parent, this._initialPoint, currentPoint, this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                    const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent));
+                    const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                     let trackX = diff.x - this._initialPoint.x;
                     let trackY = diff.y - this._initialPoint.y;
                     let i = 0;
@@ -74,7 +84,7 @@ export class ResizeExtension extends AbstractExtension {
                             this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
                             this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
                             if (this.resizeAllSelected) {
-                                for (const designItem of this.designerView.instanceServiceContainer.selectionService.selectedElements) {
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
                                         designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
@@ -85,7 +95,7 @@ export class ResizeExtension extends AbstractExtension {
                         case 's-resize':
                             this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
                             if (this.resizeAllSelected) {
-                                for (const designItem of this.designerView.instanceServiceContainer.selectionService.selectedElements) {
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
                                     }
@@ -95,7 +105,7 @@ export class ResizeExtension extends AbstractExtension {
                         case 'e-resize':
                             this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
                             if (this.resizeAllSelected) {
-                                for (const designItem of this.designerView.instanceServiceContainer.selectionService.selectedElements) {
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
                                     }
@@ -104,16 +114,16 @@ export class ResizeExtension extends AbstractExtension {
                             break;
                         //for other resize modes we need a replacement
                     }
-                    this.extensionManager.refreshExtensions(this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                    this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 }
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                let cg = this.extendedItem.openGroup("Resize Elements", this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                let cg = this.extendedItem.openGroup("Resize Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
                 this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
                 if (this.resizeAllSelected) {
-                    for (const designItem of this.designerView.instanceServiceContainer.selectionService.selectedElements) {
+                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                         if (designItem !== this.extendedItem) {
                             designItem.setStyle('width', designItem.element.style.width);
                             designItem.setStyle('height', designItem.element.style.height);

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

@@ -1,5 +1,6 @@
 import { ResizeExtension } from "./ResizeExtension";
 export class ResizeExtensionProvider {
+    resizeAllSelected;
     constructor(resizeAllSelected = false) {
         this.resizeAllSelected = resizeAllSelected;
     }

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

@@ -26,7 +26,7 @@ export class RotateExtension extends AbstractExtension {
         g.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeRotate(event));
         g.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeRotate(event));
         g.setAttribute('class', 'svg-primary-rotate');
-        g.setAttribute('transform', 'translate(' + (itemRect.x - this.designerView.containerBoundingRect.x - 13) + ',' + (itemRect.y - this.designerView.containerBoundingRect.y - 8.5) + ')');
+        g.setAttribute('transform', 'translate(' + (itemRect.x - this.designerCanvas.containerBoundingRect.x - 13) + ',' + (itemRect.y - this.designerCanvas.containerBoundingRect.y - 8.5) + ')');
         this.overlayLayerView.addOverlay(g);
         this.overlays.push(g);
     }
@@ -48,10 +48,10 @@ export class RotateExtension extends AbstractExtension {
                     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
                     var degree = (radians * (180 / Math.PI) * -1) + 90;
                     img.css('-moz-transform', 'rotate(' + degree + 'deg)');*/
-                this.extensionManager.refreshExtensions(this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 break;
             case EventNames.PointerUp:
-                let cg = this.extendedItem.openGroup("Rotate Elements", this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                let cg = this.extendedItem.openGroup("Rotate Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 /*for (const designItem of this.instanceServiceContainer.selectionService.selectedElements) {
                   designItem.setStyle('width', (<HTMLElement>designItem.element).style.width);
                   designItem.setStyle('height', (<HTMLElement>designItem.element).style.height);

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

@@ -1,15 +1,13 @@
 import { RotateExtension } from "./RotateExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class RotateExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-primary-rotate { stroke: #3899ec; fill: #3899ec; pointer-events: all }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new RotateExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-primary-rotate { stroke: #3899ec; fill: #3899ec; pointer-events: all }
+  `;
 }

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

@@ -1,5 +1,6 @@
 import { AbstractExtension } from './AbstractExtension';
 export class SelectionDefaultExtension extends AbstractExtension {
+    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -13,7 +14,7 @@ export class SelectionDefaultExtension extends AbstractExtension {
         const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
         const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
         const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-        this._rect = this._drawRect(itemRect.x - this.designerView.containerBoundingRect.x - left, itemRect.y - this.designerView.containerBoundingRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-selection', this._rect);
+        this._rect = this._drawRect(itemRect.x - this.designerCanvas.containerBoundingRect.x - left, itemRect.y - this.designerCanvas.containerBoundingRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-selection', this._rect);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -1,15 +1,13 @@
 import { SelectionDefaultExtension } from "./SelectionDefaultExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class SelectionDefaultExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; /*pointer-events: all;*/ }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new SelectionDefaultExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; /*pointer-events: all;*/ }
+  `;
 }

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

@@ -1,6 +1,9 @@
 import { EventNames } from "../../../../enums/EventNames";
 import { AbstractExtension } from './AbstractExtension';
 export class TransformOriginExtension extends AbstractExtension {
+    _startPos;
+    _circle;
+    _circle2;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -8,9 +11,9 @@ export class TransformOriginExtension extends AbstractExtension {
         const rect = this.extendedItem.element.getBoundingClientRect();
         const computed = getComputedStyle(this.extendedItem.element);
         const to = computed.transformOrigin.split(' ');
-        this._circle = this._drawCircleOverlay(rect.x - this.designerView.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')), rect.y - this.designerView.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')), 5, 'svg-transform-origin');
+        this._circle = this._drawCircle(rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')), rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')), 5, 'svg-transform-origin');
         this._circle.setAttribute('style', 'cursor: pointer');
-        this._circle2 = this._drawCircleOverlay(rect.x - this.designerView.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')), rect.y - this.designerView.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')), 1, 'svg-transform-origin');
+        this._circle2 = this._drawCircle(rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')), rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')), 1, 'svg-transform-origin');
         this._circle2.setAttribute('style', 'pointer-events: none');
         this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
@@ -30,10 +33,10 @@ export class TransformOriginExtension extends AbstractExtension {
                 if (this._startPos && event.buttons > 0) {
                     const dx = event.x - this._startPos.x;
                     const dy = event.y - this._startPos.y;
-                    this._circle.setAttribute('cx', (rect.x - this.designerView.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle.setAttribute('cy', (rect.y - this.designerView.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
-                    this._circle2.setAttribute('cx', (rect.x - this.designerView.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle2.setAttribute('cy', (rect.y - this.designerView.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
+                    this._circle.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
+                    this._circle.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
+                    this._circle2.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
+                    this._circle2.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
                 }
                 break;
             case EventNames.PointerUp:

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

@@ -1,11 +1,6 @@
 import { TransformOriginExtension } from "./TransformOriginExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class TransformOriginExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-transform-origin { stroke: #3899ec; fill: black; pointer-events: all }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         if (designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg'))
             return true;
@@ -14,4 +9,7 @@ export class TransformOriginExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new TransformOriginExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-transform-origin { stroke: #3899ec; fill: black; pointer-events: all }
+  `;
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js

@@ -1,7 +1,5 @@
 export class MultipleItemsSelectedContextMenu {
-    constructor() {
-        this.orderIndex = 60;
-    }
+    orderIndex = 60;
     shouldProvideContextmenu(event, designerView, designItem) {
         if (designItem.instanceServiceContainer.selectionService.selectedElements.length > 1) {
             return true;

package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.d.ts

@@ -0,0 +1,11 @@
+import { IDesignItem } from "../../../../item/IDesignItem.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { IExtensionManager } from "../IExtensionManger.js";
+import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
+import { AbstractExtensionBase } from '../AbstractExtensionBase';
+export declare abstract class AbstractDesignerPointerExtension extends AbstractExtensionBase implements IDesignerPointerExtension {
+    protected extendedItem: IDesignItem;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
+    abstract refresh(event: PointerEvent): any;
+    abstract dispose(): any;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js

@@ -0,0 +1,11 @@
+import { AbstractExtensionBase } from '../AbstractExtensionBase';
+//todo:
+//move draw functions to overlay layer
+//implement designerpointerextension
+//create ruler
+export class AbstractDesignerPointerExtension extends AbstractExtensionBase {
+    extendedItem;
+    constructor(extensionManager, designerCanvas) {
+        super(extensionManager, designerCanvas);
+    }
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractExtension.d.ts

@@ -0,0 +1,22 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+import { OverlayLayerView } from '../overlayLayerView';
+import { OverlayLayer } from './OverlayLayer';
+export declare abstract class AbstractExtension implements IDesignerExtension {
+    protected overlays: SVGGraphicsElement[];
+    protected overlayLayerView: OverlayLayerView;
+    protected extensionManager: IExtensionManager;
+    protected designerView: IDesignerCanvas;
+    protected extendedItem: IDesignItem;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    abstract extend(): any;
+    abstract refresh(): any;
+    abstract dispose(): any;
+    protected _removeAllOverlays(): void;
+    _drawLineOverlay(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    _drawCircleOverlay(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
+    _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractExtension.js

@@ -0,0 +1,78 @@
+export class AbstractExtension {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerView;
+    extendedItem;
+    constructor(extensionManager, designerView, extendedItem) {
+        this.extensionManager = extensionManager;
+        this.designerView = designerView;
+        this.extendedItem = extendedItem;
+        this.overlayLayerView = designerView.overlayLayer;
+    }
+    _removeAllOverlays() {
+        for (let o of this.overlays) {
+            try {
+                this.overlayLayerView.removeOverlay(o);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        this.overlays = [];
+    }
+    _drawLineOverlay(x1, y1, x2, y2, className, line, overlayLayer) {
+        if (!line) {
+            line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            this.overlayLayerView.addOverlay(line, overlayLayer);
+            this.overlays.push(line);
+        }
+        line.setAttribute('x1', x1);
+        line.setAttribute('y1', y1);
+        line.setAttribute('x2', x2);
+        line.setAttribute('y2', y2);
+        if (className)
+            line.setAttribute('class', className);
+        return line;
+    }
+    _drawCircleOverlay(x, y, radius, className, circle, overlayLayer) {
+        if (!circle) {
+            circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            this.overlayLayerView.addOverlay(circle, overlayLayer);
+            this.overlays.push(circle);
+        }
+        circle.setAttribute('cx', x);
+        circle.setAttribute('cy', y);
+        circle.setAttribute('r', radius);
+        if (className)
+            circle.setAttribute('class', className);
+        return circle;
+    }
+    _drawRect(x, y, w, h, className, rect, overlayLayer) {
+        if (!rect) {
+            rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+            this.overlayLayerView.addOverlay(rect, overlayLayer);
+            this.overlays.push(rect);
+        }
+        rect.setAttribute('x', x);
+        rect.setAttribute('y', y);
+        rect.setAttribute('width', w);
+        rect.setAttribute('height', h);
+        if (className)
+            rect.setAttribute('class', className);
+        return rect;
+    }
+    _drawText(text, x, y, className, textEl, overlayLayer) {
+        if (!textEl) {
+            textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            this.overlayLayerView.addOverlay(textEl, overlayLayer);
+            this.overlays.push(textEl);
+        }
+        textEl.setAttribute('x', x);
+        textEl.setAttribute('y', y);
+        textEl.textContent = text;
+        if (className)
+            textEl.setAttribute('class', className);
+        return textEl;
+    }
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension copy.d.ts

@@ -0,0 +1,13 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    private _lineOffset;
+    private _lineLength;
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+    style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension copy.js

@@ -0,0 +1,27 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    _lineOffset = 5;
+    _lineLength = 10;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    extend(event) {
+        this.refresh(event);
+    }
+    refresh(event) {
+        let mp = this.designerView.getNormalizedEventCoordinates(event);
+        this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foregorund);
+        this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foregorund);
+        this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foregorund);
+        this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+    style = css `
+    .svg-cursor-line { stroke: black; pointer-events: none }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.d.ts

@@ -0,0 +1,13 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
+    private _lineOffset;
+    private _lineLength;
+    private _circle;
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+    style: CSSStyleSheet;
+}