@node-projects/web-component-designer 0.0.38 → 0.0.44

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

@@ -13,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;
@@ -34,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

@@ -12,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-primary', this._text);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -6,4 +6,5 @@ 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,4 +1,5 @@
 import { PrimarySelectionDefaultExtension } from "./PrimarySelectionDefaultExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
 export class PrimarySelectionDefaultExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
@@ -6,4 +7,7 @@ export class PrimarySelectionDefaultExtensionProvider {
     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.js

@@ -21,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';
@@ -47,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));
@@ -58,24 +58,24 @@ export class ResizeExtension extends AbstractExtension {
     }
     _pointerActionTypeResize(event, actionMode = 'se-resize') {
         event.stopPropagation();
-        const currentPoint = this.designerView.getNormalizedEventCoordinates(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) {
-                    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, { x: 0, y: 0 }, 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;
@@ -84,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';
@@ -95,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';
                                     }
@@ -105,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';
                                     }
@@ -114,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.d.ts

@@ -8,4 +8,5 @@ export declare class ResizeExtensionProvider implements IDesignerExtensionProvid
     constructor(resizeAllSelected?: boolean);
     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/ResizeExtensionProvider.js

@@ -1,4 +1,5 @@
 import { ResizeExtension } from "./ResizeExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
 export class ResizeExtensionProvider {
     resizeAllSelected;
     constructor(resizeAllSelected = false) {
@@ -10,4 +11,7 @@ export class ResizeExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new ResizeExtension(extensionManager, designerView, designItem, this.resizeAllSelected);
     }
+    style = css `
+    .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
+  `;
 }

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/SelectionDefaultExtension.js

@@ -14,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/TransformOriginExtension.js

@@ -11,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));
@@ -33,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/pointerExtensions/AbstractDesignerPointerExtension.d.ts

@@ -1,22 +1,11 @@
 import { IDesignItem } from "../../../../item/IDesignItem.js";
 import { IDesignerCanvas } from "../../IDesignerCanvas.js";
-import { OverlayLayerView } from "../../overlayLayerView.js";
 import { IExtensionManager } from "../IExtensionManger.js";
-import { OverlayLayer } from "../OverlayLayer.js";
 import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
-export declare abstract class AbstractDesignerPointerExtension implements IDesignerPointerExtension {
-    protected overlays: SVGGraphicsElement[];
-    protected overlayLayerView: OverlayLayerView;
-    protected extensionManager: IExtensionManager;
-    protected designerView: IDesignerCanvas;
+import { AbstractExtensionBase } from '../AbstractExtensionBase';
+export declare abstract class AbstractDesignerPointerExtension extends AbstractExtensionBase implements IDesignerPointerExtension {
     protected extendedItem: IDesignItem;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem?: IDesignItem);
-    abstract extend(event: PointerEvent): any;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
     abstract refresh(event: PointerEvent): 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/AbstractDesignerPointerExtension.js

@@ -1,82 +1,11 @@
+import { AbstractExtensionBase } from '../AbstractExtensionBase';
 //todo:
 //move draw functions to overlay layer
 //implement designerpointerextension
 //create ruler
-export class AbstractDesignerPointerExtension {
-    overlays = [];
-    overlayLayerView;
-    extensionManager;
-    designerView;
+export class AbstractDesignerPointerExtension extends AbstractExtensionBase {
     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;
+    constructor(extensionManager, designerCanvas) {
+        super(extensionManager, designerCanvas);
     }
 }

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;
+}

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

@@ -0,0 +1,26 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
+    _lineOffset = 5;
+    _lineLength = 10;
+    _circle;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    refresh(event) {
+        let mp = this.designerCanvas.getNormalizedEventCoordinates(event);
+        this._circle = this._drawCircle(mp.x, mp.y, 1, 'svg-cursor-line', this._circle, OverlayLayer.Foregorund);
+        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/CursorLinePointerExtensionProvider.d.ts

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerPointerExtension } from './IDesignerPointerExtension.js';
+import { IDesignerPointerExtensionProvider } from './IDesignerPointerExtensionProvider.js';
+export declare class CursorLinePointerExtensionProvider implements IDesignerPointerExtensionProvider {
+    getExtension(designerCanvas: IDesignerCanvas): IDesignerPointerExtension;
+    style: CSSStyleSheet;
+}

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

@@ -0,0 +1,10 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { CursorLinePointerExtension } from './CursorLinePointerExtension.js';
+export class CursorLinePointerExtensionProvider {
+    getExtension(designerCanvas) {
+        return new CursorLinePointerExtension(designerCanvas.extensionManager, designerCanvas);
+    }
+    style = css `
+    .svg-cursor-line { stroke: black; pointer-events: none }
+  `;
+}

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

@@ -1,7 +1,13 @@
 import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
 export declare class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
-    private _rect;
+    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/CursorRectanglePointerExtension copy.js

@@ -1,20 +1,27 @@
+import { css } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from '../OverlayLayer.js';
 import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
 export class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
-    _rect;
+    _lineOffset = 5;
+    _lineLength = 10;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
     extend(event) {
-        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+        this.refresh(event);
     }
     refresh(event) {
         let mp = this.designerView.getNormalizedEventCoordinates(event);
-        this._rect.setAttribute('class', 'svg-selector');
-        this._rect.setAttribute('x', (mp.x - 5));
-        this._rect.setAttribute('y', (mp.y - 5));
-        this._rect.setAttribute('width', (10));
-        this._rect.setAttribute('height', (10));
+        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/IDesignerPointerExtension.d.ts

@@ -1,5 +1,5 @@
 import { IDisposable } from "../../../../../interfaces/IDisposable.js";
 export interface IDesignerPointerExtension extends IDisposable {
-    extend(event: PointerEvent): any;
     refresh(event: PointerEvent): any;
+    style?: CSSStyleSheet;
 }

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

@@ -1,9 +1,6 @@
-import { IDesignItem } from "../../../../item/IDesignItem.js";
 import { IDesignerCanvas } from "../../IDesignerCanvas.js";
-import { IExtensionManager } from "../IExtensionManger.js";
 import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
 export interface IDesignerPointerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerPointerExtension;
+    getExtension(designerView: IDesignerCanvas): IDesignerPointerExtension;
     style?: CSSStyleSheet;
 }

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

@@ -17,4 +17,8 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     removeAllNodesWithClass(className: string): void;
     createPoint(): DOMPointInit;
     elementFromPoint(x: number, y: number): Element;
+    drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    drawCircle(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;
 }