@node-projects/web-component-designer 0.0.82 → 0.0.86

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

@@ -1,61 +1,62 @@
-import { EventNames } from '../../../../enums/EventNames';
-import { DesignItem } from '../../../item/DesignItem';
-import { OverlayLayer } from '../extensions/OverlayLayer.js';
-export class MagicWandSelectorTool {
-    cursor = 'progress';
-    _pathD;
-    _path;
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                this._path.setAttribute('class', 'svg-selector');
-                this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
-                this._path.setAttribute("D", this._pathD);
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._path) {
-                    this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
-                    this._path.setAttribute("d", this._pathD + "Z");
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
-                const inSelectionElements = [];
-                let point = designerCanvas.overlayLayer.createPoint();
-                for (let e of elements) {
-                    let elementRect = e.getBoundingClientRect();
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
-                    const p1 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
-                    const p2 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
-                    const p3 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
-                    const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    if (p1 && p2 && p3 && p4) {
-                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                        inSelectionElements.push(desItem);
-                    }
-                }
-                designerCanvas.overlayLayer.removeOverlay(this._path);
-                this._path = null;
-                this._pathD = null;
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                break;
-        }
-    }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-}
+import { EventNames } from '../../../../enums/EventNames';
+import { DesignItem } from '../../../item/DesignItem';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+export class MagicWandSelectorTool {
+    cursor = 'progress';
+    _pathD;
+    _path;
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._path.setAttribute('class', 'svg-selector');
+                this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
+                this._path.setAttribute("D", this._pathD);
+                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._path) {
+                    this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                    this._path.setAttribute("d", this._pathD + "Z");
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
+                const inSelectionElements = [];
+                let point = designerCanvas.overlayLayer.createPoint();
+                for (let e of elements) {
+                    let elementRect = e.getBoundingClientRect();
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
+                    const p1 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
+                    const p2 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
+                    const p3 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
+                    const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
+                    if (p1 && p2 && p3 && p4) {
+                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                        inSelectionElements.push(desItem);
+                    }
+                }
+                designerCanvas.overlayLayer.removeOverlay(this._path);
+                this._path = null;
+                this._pathD = null;
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+}

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

@@ -1,14 +1,14 @@
-export declare enum NamedTools {
-    Pointer = "Pointer",
-    DrawSelection = "DrawSelection",
-    DrawPath = "DrawPath",
-    DrawRect = "DrawRect",
-    DrawEllipsis = "DrawEllipsis",
-    DrawLine = "DrawLine",
-    Zoom = "Zoom",
-    Pan = "Pan",
-    MagicWandSelector = "MagicWandSelector",
-    RectangleSelector = "RectangleSelector",
-    PickColor = "PickColor",
-    Text = "Text"
-}
+export declare enum NamedTools {
+    Pointer = "Pointer",
+    DrawSelection = "DrawSelection",
+    DrawPath = "DrawPath",
+    DrawRect = "DrawRect",
+    DrawEllipsis = "DrawEllipsis",
+    DrawLine = "DrawLine",
+    Zoom = "Zoom",
+    Pan = "Pan",
+    MagicWandSelector = "MagicWandSelector",
+    RectangleSelector = "RectangleSelector",
+    PickColor = "PickColor",
+    Text = "Text"
+}

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

@@ -1,15 +1,15 @@
-export var NamedTools;
-(function (NamedTools) {
-    NamedTools["Pointer"] = "Pointer";
-    NamedTools["DrawSelection"] = "DrawSelection";
-    NamedTools["DrawPath"] = "DrawPath";
-    NamedTools["DrawRect"] = "DrawRect";
-    NamedTools["DrawEllipsis"] = "DrawEllipsis";
-    NamedTools["DrawLine"] = "DrawLine";
-    NamedTools["Zoom"] = "Zoom";
-    NamedTools["Pan"] = "Pan";
-    NamedTools["MagicWandSelector"] = "MagicWandSelector";
-    NamedTools["RectangleSelector"] = "RectangleSelector";
-    NamedTools["PickColor"] = "PickColor";
-    NamedTools["Text"] = "Text";
-})(NamedTools || (NamedTools = {}));
+export var NamedTools;
+(function (NamedTools) {
+    NamedTools["Pointer"] = "Pointer";
+    NamedTools["DrawSelection"] = "DrawSelection";
+    NamedTools["DrawPath"] = "DrawPath";
+    NamedTools["DrawRect"] = "DrawRect";
+    NamedTools["DrawEllipsis"] = "DrawEllipsis";
+    NamedTools["DrawLine"] = "DrawLine";
+    NamedTools["Zoom"] = "Zoom";
+    NamedTools["Pan"] = "Pan";
+    NamedTools["MagicWandSelector"] = "MagicWandSelector";
+    NamedTools["RectangleSelector"] = "RectangleSelector";
+    NamedTools["PickColor"] = "PickColor";
+    NamedTools["Text"] = "Text";
+})(NamedTools || (NamedTools = {}));

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

@@ -1,9 +1,10 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-export declare class PanTool implements ITool {
-    readonly cursor: string;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-}
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+export declare class PanTool implements ITool {
+    readonly cursor: string;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+}

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

@@ -1,23 +1,24 @@
-import { EventNames } from '../../../../enums/EventNames.js';
-export class PanTool {
-    cursor = 'grab';
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                break;
-            case EventNames.PointerMove:
-                if (event.buttons == 1) {
-                    designerCanvas.canvasOffset = { x: designerCanvas.canvasOffset.x + +event.movementX / designerCanvas.zoomFactor, y: designerCanvas.canvasOffset.y + event.movementY / designerCanvas.zoomFactor };
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                break;
-        }
-    }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-}
+import { EventNames } from '../../../../enums/EventNames.js';
+export class PanTool {
+    cursor = 'grab';
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                break;
+            case EventNames.PointerMove:
+                if (event.buttons == 1) {
+                    designerCanvas.canvasOffset = { x: designerCanvas.canvasOffset.x + +event.movementX / designerCanvas.zoomFactor, y: designerCanvas.canvasOffset.y + event.movementY / designerCanvas.zoomFactor };
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+}

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

@@ -1,9 +1,10 @@
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-import { ServiceContainer } from '../../../services/ServiceContainer';
-export declare class PickColorTool implements ITool {
-    readonly cursor = "crosshair";
-    activated(serviceContainer: ServiceContainer): Promise<void>;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): Promise<void>;
-    dispose(): void;
-}
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer';
+export declare class PickColorTool implements ITool {
+    readonly cursor = "crosshair";
+    activated(serviceContainer: ServiceContainer): Promise<void>;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): Promise<void>;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+    dispose(): void;
+}

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

@@ -1,19 +1,20 @@
-export class PickColorTool {
-    cursor = 'crosshair';
-    async activated(serviceContainer) {
-        try {
-            //@ts-ignore
-            const eyeDropper = new EyeDropper();
-            const colorSelectionResult = await eyeDropper.open();
-            const color = colorSelectionResult.sRGBHex;
-            serviceContainer.globalContext.strokeColor = color;
-        }
-        finally {
-            serviceContainer.globalContext.finishedWithTool(this);
-        }
-    }
-    async pointerEventHandler(designerCanvas, event, currentElement) {
-    }
-    dispose() {
-    }
-}
+export class PickColorTool {
+    cursor = 'crosshair';
+    async activated(serviceContainer) {
+        try {
+            //@ts-ignore
+            const eyeDropper = new EyeDropper();
+            const colorSelectionResult = await eyeDropper.open();
+            const color = colorSelectionResult.sRGBHex;
+            serviceContainer.globalContext.strokeColor = color;
+        }
+        finally {
+            serviceContainer.globalContext.finishedWithTool(this);
+        }
+    }
+    async pointerEventHandler(designerCanvas, event, currentElement) {
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+    dispose() {
+    }
+}

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

@@ -1,23 +1,24 @@
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { ITool } from "./ITool";
-import { ServiceContainer } from "../../../services/ServiceContainer.js";
-export declare class PointerTool implements ITool {
-    readonly cursor: string;
-    private _movedSinceStartedAction;
-    private _initialPoint;
-    private _actionType?;
-    private _actionStartedDesignItem?;
-    private _previousEventName;
-    private _clickThroughElements;
-    private _dragOverExtensionItem;
-    private _dragExtensionItem;
-    private _moveItemsOffset;
-    private _initialOffset;
-    constructor();
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    private _pointerActionTypeDrawSelection;
-    private _resetPointerEventsForClickThrough;
-    private _pointerActionTypeDragOrSelect;
-}
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { ITool } from "./ITool";
+import { ServiceContainer } from "../../../services/ServiceContainer.js";
+export declare class PointerTool implements ITool {
+    readonly cursor: string;
+    private _movedSinceStartedAction;
+    private _initialPoint;
+    private _actionType?;
+    private _actionStartedDesignItem?;
+    private _previousEventName;
+    private _clickThroughElements;
+    private _dragOverExtensionItem;
+    private _dragExtensionItem;
+    private _moveItemsOffset;
+    private _initialOffset;
+    constructor();
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    private _pointerActionTypeDrawSelection;
+    private _resetPointerEventsForClickThrough;
+    private _pointerActionTypeDragOrSelect;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+}