@node-projects/web-component-designer 0.0.32 → 0.0.36

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/CursorRectangleExtension.d.ts

@@ -0,0 +1,7 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorRectangleExtension extends AbstractDesignerPointerExtension {
+    private _rect;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,20 @@
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorRectangleExtension extends AbstractDesignerPointerExtension {
+    _rect;
+    extend(event) {
+        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+    }
+    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));
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,7 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    private _rect;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,20 @@
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    _rect;
+    extend(event) {
+        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+    }
+    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));
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,7 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    private _rect;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,20 @@
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    _rect;
+    extend(event) {
+        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+    }
+    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));
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+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;
+    style?: CSSStyleSheet;
+}

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

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

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

@@ -0,0 +1,7 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    private _rect;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,20 @@
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    _rect;
+    extend(event) {
+        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+    }
+    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));
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,7 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class RulerPointerExtension extends AbstractDesignerPointerExtension {
+    private _rect;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,20 @@
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class RulerPointerExtension extends AbstractDesignerPointerExtension {
+    _rect;
+    extend(event) {
+        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+    }
+    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));
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/overlay/EditTextOverlay.js

@@ -1,9 +1,9 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
 export class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
-}
-EditTextOverlay.style = css ``;
-EditTextOverlay.template = html `
+    static style = css ``;
+    static template = html `
     <div>
       <input type="text">
     </div>
   `;
+}

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

@@ -1,6 +1,34 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from './extensions/OverlayLayer.js';
 export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
+    static template = html `
+    <svg id="svg" style="pointer-events: none;">
+      <g id="background"></g>
+      <g id="normal"></g>
+      <g id="foreground"></g>
+    </svg>`;
+    static style = css `
+    svg {
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+
+    .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
+    .svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; }
+    .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: all }
+    .svg-text { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
+    .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
+    .svg-position  { stroke: black; stroke-dasharray: 2; }
+    .svg-path { stroke: #3899ec; fill: orange; pointer-events: all }
+    .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
+    .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }`;
+    static is = 'node-projects-overlay-layer-view';
+    _serviceContainer;
+    _svg;
+    _gBackground;
+    _gNormal;
+    _gForeground;
     constructor(serviceContainer) {
         super();
         this._serviceContainer = serviceContainer;
@@ -52,28 +80,4 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         return this.shadowRoot.elementFromPoint(x, y);
     }
 }
-OverlayLayerView.template = html `
-    <svg id="svg" style="pointer-events: none;">
-      <g id="background"></g>
-      <g id="normal"></g>
-      <g id="foreground"></g>
-    </svg>`;
-OverlayLayerView.style = css `
-    svg {
-      width: 100%;
-      height: 100%;
-      overflow: visible;
-    }
-
-    .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
-    /*.svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; }*/
-    .svg-selector { stroke: black; fill: transparent; stroke-width: 1; stroke-dasharray: 2; }
-    .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: all }
-    .svg-text { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
-    .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
-    .svg-position  { stroke: black; stroke-dasharray: 2; }
-    .svg-path { stroke: #3899ec; fill: orange; pointer-events: all }
-    .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
-    .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }`;
-OverlayLayerView.is = 'node-projects-overlay-layer-view';
 customElements.define(OverlayLayerView.is, OverlayLayerView);

package/dist/elements/widgets/designerView/tools/DrawElementTool.js

@@ -2,8 +2,12 @@ import { EventNames } from '../../../../enums/EventNames';
 import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
 import { OverlayLayer } from '../extensions/OverlayLayer.js';
 export class DrawElementTool {
+    _elementDefinition;
+    _createdItem;
+    _startPosition;
+    cursor = 'crosshair';
+    _rect;
     constructor(elementDefinition) {
-        this.cursor = 'crosshair';
         this._elementDefinition = elementDefinition;
     }
     activated(serviceContainer) {

package/dist/elements/widgets/designerView/tools/DrawPathTool.d.ts

@@ -5,7 +5,6 @@ export declare class DrawPathTool implements ITool {
     readonly cursor = "crosshair";
     private _pathD;
     private _path;
-    private _initialPoint;
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;

package/dist/elements/widgets/designerView/tools/DrawPathTool.js

@@ -4,20 +4,21 @@ import { InsertAction } from '../../../services/undoService/transactionItems/Ins
 import { DesignItem } from '../../../item/DesignItem';
 import { OverlayLayer } from '../extensions/OverlayLayer.js';
 export class DrawPathTool {
+    cursor = 'crosshair';
+    _pathD;
+    _path;
     constructor() {
-        this.cursor = 'crosshair';
     }
     activated(serviceContainer) {
     }
     dispose() {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getDesignerMousepoint(event, currentElement, event.type === 'pointerdown' ? null : this._initialPoint);
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
         const offset = 50;
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
-                this._initialPoint = currentPoint;
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
                 this._path.setAttribute("D", this._pathD);

package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.d.ts

@@ -5,7 +5,6 @@ export declare class MagicWandSelectorTool implements ITool {
     cursor: string;
     private _pathD;
     private _path;
-    private _initialPoint;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;

package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.js

@@ -2,15 +2,14 @@ import { EventNames } from '../../../../enums/EventNames';
 import { DesignItem } from '../../../item/DesignItem';
 import { OverlayLayer } from '../extensions/OverlayLayer.js';
 export class MagicWandSelectorTool {
-    constructor() {
-        this.cursor = 'progress';
-    }
+    cursor = 'progress';
+    _pathD;
+    _path;
     pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getDesignerMousepoint(event, currentElement, event.type === 'pointerdown' ? null : this._initialPoint);
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
-                this._initialPoint = currentPoint;
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._path.setAttribute('class', 'svg-selector');
                 this._pathD = "M" + currentPoint.x + " " + currentPoint.y;

package/dist/elements/widgets/designerView/tools/PanTool.js

@@ -1,7 +1,5 @@
 export class PanTool {
-    constructor() {
-        this.cursor = 'grab';
-    }
+    cursor = 'grab';
     pointerEventHandler(designerCanvas, event, currentElement) {
     }
     activated(serviceContainer) {

package/dist/elements/widgets/designerView/tools/PickColorTool.js

@@ -1,7 +1,5 @@
 export class PickColorTool {
-    constructor() {
-        this.cursor = 'crosshair';
-    }
+    cursor = 'crosshair';
     async activated(serviceContainer) {
         try {
             //@ts-ignore

package/dist/elements/widgets/designerView/tools/PointerTool.d.ts

@@ -12,10 +12,11 @@ export declare class PointerTool implements ITool {
     private _dragOverExtensionItem;
     private _dragExtensionItem;
     private _moveItemsOffset;
+    private _initialOffset;
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
-    pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     private _pointerActionTypeDrawSelection;
     private _resetPointerEventsForClickThrough;
     private _pointerActionTypeDragOrSelect;