@node-projects/web-component-designer 0.0.95 → 0.0.98

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

@@ -0,0 +1,128 @@
+import { EventNames } from '../../../../enums/EventNames';
+import { moveSVGPath, straightenLine } from '../../../helper/PathDataPolyfill';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
+import { DesignItem } from '../../../item/DesignItem';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+export class DrawPathTool {
+    cursor = 'crosshair';
+    _pathD;
+    _path;
+    _samePoint = false;
+    _p2pMode = false;
+    _dragMode = false;
+    _pointerMoved = false;
+    _eventStarted = false;
+    _lastPoint;
+    _startPoint;
+    constructor() {
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        const offset = 50;
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._eventStarted = true;
+                if (!this._p2pMode) {
+                    event.target.setPointerCapture(event.pointerId);
+                    designerCanvas.captureActiveTool(this);
+                    this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
+                    this._path.setAttribute("d", this._pathD);
+                    this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
+                    this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
+                    this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
+                    designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                    this._startPoint = currentPoint;
+                }
+                if (this._lastPoint != null && this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {
+                    this._samePoint = true;
+                }
+                if (this._lastPoint == null) {
+                    this._lastPoint = currentPoint;
+                }
+                if (this._startPoint == null) {
+                    this._startPoint = currentPoint;
+                }
+                break;
+            case EventNames.PointerMove:
+                if (this._eventStarted) {
+                    this._pointerMoved = true;
+                }
+                if (!this._p2pMode) {
+                    this._dragMode = true;
+                    if (this._path) {
+                        this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                        this._path.setAttribute("d", this._pathD);
+                    }
+                }
+                else { // shows line preview
+                    if (this._path) {
+                        let straightLine = currentPoint;
+                        if (event.shiftKey) {
+                            straightLine = straightenLine(this._lastPoint, currentPoint);
+                        }
+                        this._path.setAttribute("d", this._pathD + "L" + straightLine.x + " " + straightLine.y);
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                if (this._eventStarted && !this._pointerMoved) {
+                    this._p2pMode = true;
+                }
+                if (this._p2pMode && !this._samePoint && this._startPoint.x != currentPoint.x && this._startPoint.y != currentPoint.y) {
+                    if (this._path) {
+                        if (event.shiftKey) {
+                            let straightLine = straightenLine(this._lastPoint, currentPoint);
+                            this._pathD += "L" + straightLine.x + " " + straightLine.y;
+                            this._path.setAttribute("d", this._pathD);
+                            this._lastPoint = straightLine;
+                        }
+                        else {
+                            this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                            this._path.setAttribute("d", this._pathD);
+                            this._lastPoint = currentPoint;
+                        }
+                    }
+                }
+                if (this._samePoint && this._p2pMode || this._dragMode && !this._p2pMode) {
+                    event.target.releasePointerCapture(event.pointerId);
+                    designerCanvas.releaseActiveTool();
+                    this._eventStarted = false;
+                    this._p2pMode = false;
+                    this._pointerMoved = false;
+                    this._samePoint = false;
+                    this._dragMode = false;
+                    const rect = this._path.getBoundingClientRect();
+                    designerCanvas.overlayLayer.removeOverlay(this._path);
+                    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                    const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
+                    const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
+                    const d = moveSVGPath(this._path, mvX, mvY);
+                    this._path.setAttribute("d", d);
+                    svg.appendChild(this._path);
+                    svg.style.left = (mvX) + 'px';
+                    svg.style.top = (mvY) + 'px';
+                    svg.style.position = 'absolute';
+                    svg.style.width = (rect.width + 2 * offset) + 'px';
+                    svg.style.height = (rect.height + 2 * offset) + 'px';
+                    svg.style.overflow = 'visible';
+                    //designerView.rootDesignItem.element.appendChild(svg);
+                    this._path = null;
+                    this._pathD = null;
+                    this._lastPoint = null;
+                    const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                    designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+                    designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                }
+                //TODO: Better Path drawing (like in SVGEDIT & Adding via Undo Framework. And adding to correct container)
+                break;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+}

package/dist/elements/widgets/designerView/toolBar/DrawRectTool.d.ts

@@ -0,0 +1,19 @@
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+export declare class DrawRectTool implements ITool {
+    readonly cursor = "crosshair";
+    private _path;
+    private _startPoint;
+    private _minX;
+    private _minY;
+    private _maxX;
+    private _maxY;
+    private _px;
+    private _py;
+    constructor();
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+}

package/dist/elements/widgets/designerView/toolBar/DrawRectTool.js

@@ -0,0 +1,109 @@
+import { EventNames } from '../../../../enums/EventNames';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+import { calculateNormLegth } from '../../../helper/PathDataPolyfill';
+import { DesignItem } from '../../../item/DesignItem';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
+export class DrawRectTool {
+    cursor = 'crosshair';
+    _path;
+    _startPoint;
+    _minX;
+    _minY;
+    _maxX;
+    _maxY;
+    _px;
+    _py;
+    constructor() {
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        const offset = 50;
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._startPoint = currentPoint;
+                event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
+                this._path = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
+                this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
+                this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
+                this._path.setAttribute("x", currentPoint.x.toString());
+                this._path.setAttribute("y", currentPoint.y.toString());
+                this._path.setAttribute("width", "0");
+                this._path.setAttribute("height", "0");
+                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._path) {
+                    this._minX = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
+                    this._maxX = currentPoint.x > this._startPoint.x ? currentPoint.x : this._startPoint.x;
+                    this._minY = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
+                    this._maxY = currentPoint.y > this._startPoint.y ? currentPoint.y : this._startPoint.y;
+                    if (event.ctrlKey) {
+                        if (event.shiftKey) {
+                            const normLength = 2 * calculateNormLegth(this._startPoint, currentPoint);
+                            this._px = this._startPoint.x - normLength / 2;
+                            this._py = this._startPoint.y - normLength / 2;
+                            this._path.setAttribute("width", (normLength).toString());
+                            this._path.setAttribute("height", (normLength).toString());
+                        }
+                        else {
+                            const w = 2 * (this._maxX - this._minX);
+                            const h = 2 * (this._maxY - this._minY);
+                            this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x - w / 2;
+                            this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y - h / 2;
+                            this._path.setAttribute("width", (w).toString());
+                            this._path.setAttribute("height", (h).toString());
+                        }
+                        this._path.setAttribute("x", this._px.toString());
+                        this._path.setAttribute("y", this._py.toString());
+                    }
+                    else {
+                        if (event.shiftKey) {
+                            const normLength = calculateNormLegth(this._startPoint, currentPoint);
+                            this._px = currentPoint.x < this._startPoint.x ? this._startPoint.x - normLength : this._startPoint.x;
+                            this._py = currentPoint.y < this._startPoint.y ? this._startPoint.y - normLength : this._startPoint.y;
+                            this._path.setAttribute("width", (normLength).toString());
+                            this._path.setAttribute("height", (normLength).toString());
+                        }
+                        else {
+                            this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
+                            this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
+                            this._path.setAttribute("width", (this._maxX - this._minX).toString());
+                            this._path.setAttribute("height", (this._maxY - this._minY).toString());
+                        }
+                        this._path.setAttribute("x", this._px.toString());
+                        this._path.setAttribute("y", this._py.toString());
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.releaseActiveTool();
+                const rect = this._path.getBoundingClientRect();
+                designerCanvas.overlayLayer.removeOverlay(this._path);
+                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
+                const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
+                this._path.setAttribute("x", (this._px - mvX).toString());
+                this._path.setAttribute("y", (this._py - mvY).toString());
+                svg.appendChild(this._path);
+                svg.style.left = (mvX) + 'px';
+                svg.style.top = (mvY) + 'px';
+                svg.style.position = 'absolute';
+                svg.style.width = (rect.width + 2 * offset) + 'px';
+                svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.overflow = 'visible';
+                this._path = null;
+                const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+}

package/dist/elements/widgets/designerView/toolBar/ITool.d.ts

@@ -0,0 +1,9 @@
+import { IDisposable } from "../../../../interfaces/IDisposable";
+import { ServiceContainer } from "../../../services/ServiceContainer.js";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+export interface ITool extends IDisposable {
+    readonly cursor: string;
+    activated(serviceContainer: ServiceContainer): any;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): any;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): any;
+}

package/dist/elements/widgets/designerView/toolBar/ITool.js

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

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

@@ -0,0 +1,12 @@
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+export declare class MagicWandSelectorTool implements ITool {
+    cursor: string;
+    private _pathD;
+    private _path;
+    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/toolBar/MagicWandSelectorTool.js

@@ -0,0 +1,64 @@
+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);
+                designerCanvas.captureActiveTool(this);
+                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);
+                designerCanvas.releaseActiveTool();
+                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
+                const inSelectionElements = [];
+                let point = designerCanvas.overlayLayer.createPoint();
+                for (let e of elements) {
+                    let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
+                    point.x = elementRect.x;
+                    point.y = elementRect.y;
+                    const p1 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y;
+                    const p2 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
+                    point.x = elementRect.x;
+                    point.y = elementRect.y + elementRect.height;
+                    const p3 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y + 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/toolBar/NamedTools.d.ts

@@ -0,0 +1,15 @@
+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",
+    TextBoc = "TextBoc"
+}

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

@@ -0,0 +1,16 @@
+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["TextBoc"] = "TextBoc";
+})(NamedTools || (NamedTools = {}));

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

@@ -0,0 +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;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,26 @@
+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);
+                designerCanvas.captureActiveTool(this);
+                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);
+                designerCanvas.releaseActiveTool();
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+}

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

@@ -0,0 +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>;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+    dispose(): void;
+}

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

@@ -0,0 +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) {
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+    dispose() {
+    }
+}

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

@@ -0,0 +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 _dragOverExtensionItem;
+    private _dragExtensionItem;
+    private _moveItemsOffset;
+    private _initialOffset;
+    constructor();
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    private _showContextMenu;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    private _resetTool;
+    private _pointerActionTypeDrawSelection;
+    private _pointerActionTypeDragOrSelect;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+}