@node-projects/web-component-designer 0.0.91 → 0.0.94

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

@@ -1,93 +1,94 @@
-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 DrawEllipsisTool {
-    cursor = 'crosshair';
-    _path;
-    _startPoint;
-    _radius;
-    _cx;
-    _cy;
-    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);
-                this._path = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
-                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("cx", currentPoint.x.toString());
-                this._path.setAttribute("cy", currentPoint.y.toString());
-                this._path.setAttribute("rx", "0");
-                this._path.setAttribute("ry", "0");
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._path) {
-                    this._radius = { x: Math.abs(currentPoint.x - this._startPoint.x), y: Math.abs(currentPoint.y - this._startPoint.y) };
-                    if (event.ctrlKey) {
-                        this._path.setAttribute("cx", this._startPoint.x.toString());
-                        this._path.setAttribute("cy", this._startPoint.y.toString());
-                        this._cx = this._startPoint.x;
-                        this._cy = this._startPoint.y;
-                        if (event.shiftKey) {
-                            const radius = calculateNormLegth(this._startPoint, currentPoint);
-                            this._path.setAttribute("rx", radius.toString());
-                            this._path.setAttribute("ry", radius.toString());
-                        }
-                        else {
-                            this._path.setAttribute("rx", this._radius.x.toString());
-                            this._path.setAttribute("ry", this._radius.y.toString());
-                        }
-                    }
-                    else {
-                        if (event.shiftKey) {
-                            const radius = calculateNormLegth(this._startPoint, currentPoint);
-                            this._radius = { x: radius, y: radius };
-                        }
-                        this._cx = currentPoint.x < this._startPoint.x ? this._startPoint.x - this._radius.x / 2 : this._startPoint.x + this._radius.x / 2;
-                        this._cy = currentPoint.y < this._startPoint.y ? this._startPoint.y - this._radius.y / 2 : this._startPoint.y + this._radius.y / 2;
-                        this._path.setAttribute("cx", this._cx.toString());
-                        this._path.setAttribute("cy", this._cy.toString());
-                        this._path.setAttribute("rx", (this._radius.x / 2).toString());
-                        this._path.setAttribute("ry", (this._radius.y / 2).toString());
-                    }
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
-                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;
-                svg.appendChild(this._path);
-                this._path.setAttribute("cx", (this._cx - mvX).toString());
-                this._path.setAttribute("cy", (this._cy - mvY).toString());
-                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) { }
-}
+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 DrawEllipsisTool {
+    cursor = 'crosshair';
+    _path;
+    _startPoint;
+    _radius;
+    _cx;
+    _cy;
+    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", "ellipse");
+                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("cx", currentPoint.x.toString());
+                this._path.setAttribute("cy", currentPoint.y.toString());
+                this._path.setAttribute("rx", "0");
+                this._path.setAttribute("ry", "0");
+                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._path) {
+                    this._radius = { x: Math.abs(currentPoint.x - this._startPoint.x), y: Math.abs(currentPoint.y - this._startPoint.y) };
+                    if (event.ctrlKey) {
+                        this._path.setAttribute("cx", this._startPoint.x.toString());
+                        this._path.setAttribute("cy", this._startPoint.y.toString());
+                        this._cx = this._startPoint.x;
+                        this._cy = this._startPoint.y;
+                        if (event.shiftKey) {
+                            const radius = calculateNormLegth(this._startPoint, currentPoint);
+                            this._path.setAttribute("rx", radius.toString());
+                            this._path.setAttribute("ry", radius.toString());
+                        }
+                        else {
+                            this._path.setAttribute("rx", this._radius.x.toString());
+                            this._path.setAttribute("ry", this._radius.y.toString());
+                        }
+                    }
+                    else {
+                        if (event.shiftKey) {
+                            const radius = calculateNormLegth(this._startPoint, currentPoint);
+                            this._radius = { x: radius, y: radius };
+                        }
+                        this._cx = currentPoint.x < this._startPoint.x ? this._startPoint.x - this._radius.x / 2 : this._startPoint.x + this._radius.x / 2;
+                        this._cy = currentPoint.y < this._startPoint.y ? this._startPoint.y - this._radius.y / 2 : this._startPoint.y + this._radius.y / 2;
+                        this._path.setAttribute("cx", this._cx.toString());
+                        this._path.setAttribute("cy", this._cy.toString());
+                        this._path.setAttribute("rx", (this._radius.x / 2).toString());
+                        this._path.setAttribute("ry", (this._radius.y / 2).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;
+                svg.appendChild(this._path);
+                this._path.setAttribute("cx", (this._cx - mvX).toString());
+                this._path.setAttribute("cy", (this._cy - mvY).toString());
+                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/tools/DrawLineTool.d.ts

@@ -1,14 +1,14 @@
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-export declare class DrawLineTool implements ITool {
-    readonly cursor = "crosshair";
-    private _path;
-    private _startPoint;
-    private _endPoint;
-    constructor();
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-}
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+export declare class DrawLineTool implements ITool {
+    readonly cursor = "crosshair";
+    private _path;
+    private _startPoint;
+    private _endPoint;
+    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/tools/DrawLineTool.js

@@ -1,78 +1,79 @@
-import { EventNames } from '../../../../enums/EventNames';
-import { OverlayLayer } from '../extensions/OverlayLayer.js';
-import { straightenLine } from '../../../helper/PathDataPolyfill';
-import { DesignItem } from '../../../item/DesignItem';
-import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
-export class DrawLineTool {
-    cursor = 'crosshair';
-    _path;
-    _startPoint;
-    _endPoint;
-    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);
-                this._path = document.createElementNS("http://www.w3.org/2000/svg", "line");
-                // this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
-                // this._path.setAttribute("d", this._pathD);
-                this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
-                this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
-                this._path.setAttribute("x1", currentPoint.x.toString());
-                this._path.setAttribute("y1", currentPoint.y.toString());
-                this._path.setAttribute("x2", currentPoint.x.toString());
-                this._path.setAttribute("y2", currentPoint.y.toString());
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._path) {
-                    if (event.shiftKey) {
-                        let straightLine = straightenLine(this._startPoint, currentPoint);
-                        this._path.setAttribute("x2", straightLine.x.toString());
-                        this._path.setAttribute("y2", straightLine.y.toString());
-                        this._endPoint = straightLine;
-                    }
-                    else {
-                        //this._path.setAttribute("d", this._pathD + "L" + currentPoint.x + " " + currentPoint.y);
-                        this._path.setAttribute("x2", currentPoint.x.toString());
-                        this._path.setAttribute("y2", currentPoint.y.toString());
-                        this._endPoint = currentPoint;
-                    }
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
-                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("x1", (this._startPoint.x - mvX).toString());
-                this._path.setAttribute("y1", (this._startPoint.y - mvY).toString());
-                this._path.setAttribute("x2", (this._endPoint.x - mvX).toString());
-                this._path.setAttribute("y2", (this._endPoint.y - 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) { }
-}
+import { EventNames } from '../../../../enums/EventNames';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+import { straightenLine } from '../../../helper/PathDataPolyfill';
+import { DesignItem } from '../../../item/DesignItem';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
+export class DrawLineTool {
+    cursor = 'crosshair';
+    _path;
+    _startPoint;
+    _endPoint;
+    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", "line");
+                // this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
+                // this._path.setAttribute("d", this._pathD);
+                this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
+                this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
+                this._path.setAttribute("x1", currentPoint.x.toString());
+                this._path.setAttribute("y1", currentPoint.y.toString());
+                this._path.setAttribute("x2", currentPoint.x.toString());
+                this._path.setAttribute("y2", currentPoint.y.toString());
+                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._path) {
+                    if (event.shiftKey) {
+                        let straightLine = straightenLine(this._startPoint, currentPoint);
+                        this._path.setAttribute("x2", straightLine.x.toString());
+                        this._path.setAttribute("y2", straightLine.y.toString());
+                        this._endPoint = straightLine;
+                    }
+                    else {
+                        //this._path.setAttribute("d", this._pathD + "L" + currentPoint.x + " " + currentPoint.y);
+                        this._path.setAttribute("x2", currentPoint.x.toString());
+                        this._path.setAttribute("y2", currentPoint.y.toString());
+                        this._endPoint = currentPoint;
+                    }
+                }
+                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("x1", (this._startPoint.x - mvX).toString());
+                this._path.setAttribute("y1", (this._startPoint.y - mvY).toString());
+                this._path.setAttribute("x2", (this._endPoint.x - mvX).toString());
+                this._path.setAttribute("y2", (this._endPoint.y - 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/tools/DrawPathTool.d.ts

@@ -1,20 +1,20 @@
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-export declare class DrawPathTool implements ITool {
-    readonly cursor = "crosshair";
-    private _pathD;
-    private _path;
-    private _samePoint;
-    private _p2pMode;
-    private _dragMode;
-    private _pointerMoved;
-    private _eventStarted;
-    private _lastPoint;
-    private _startPoint;
-    constructor();
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-}
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+export declare class DrawPathTool implements ITool {
+    readonly cursor = "crosshair";
+    private _pathD;
+    private _path;
+    private _samePoint;
+    private _p2pMode;
+    private _dragMode;
+    private _pointerMoved;
+    private _eventStarted;
+    private _lastPoint;
+    private _startPoint;
+    constructor();
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+}