@node-projects/web-component-designer 0.1.87 → 0.1.88

package/assets/images/layout/AlignBot.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,-1,0,100)">
+        <g transform="matrix(-4.45326e-17,0.727273,1,6.12323e-17,5.03233e-16,-1.42109e-14)">
+            <rect x="0" y="0" width="11" height="100"/>
+        </g>
+        <g transform="matrix(-8.27464e-17,-1.35135,-1.55556,9.52503e-17,188.667,118.919)">
+            <path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
+        </g>
+        <g transform="matrix(-4.13732e-17,-0.675676,-1.55556,9.52503e-17,144.667,59.4595)">
+            <path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
+        </g>
+    </g>
+</svg>

package/assets/images/layout/AlignCenter.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-0.727273,0,0,1,54,0)">
+        <rect x="0" y="0" width="11" height="100"/>
+    </g>
+    <g transform="matrix(-1.35135,0,0,1.55556,118.919,-44.6667)">
+        <path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
+    </g>
+    <g transform="matrix(-0.675676,0,0,1.55556,84.4595,-88.6667)">
+        <path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
+    </g>
+</svg>

package/assets/images/layout/AlignCenterHorizontal.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-4.45326e-17,0.727273,1,6.12323e-17,3.30655e-15,46)">
+        <rect x="0" y="0" width="11" height="100"/>
+    </g>
+    <g transform="matrix(-8.27464e-17,-1.35135,-1.55556,9.52503e-17,188.667,118.919)">
+        <path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
+    </g>
+    <g transform="matrix(-4.13732e-17,-0.675676,-1.55556,9.52503e-17,144.667,84.4595)">
+        <path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
+    </g>
+</svg>

package/assets/images/layout/AlignLeft.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.727273,0,0,1,0,0)">
+        <rect x="0" y="0" width="11" height="100"/>
+    </g>
+    <g transform="matrix(1.35135,0,0,1.55556,-18.9189,-44.6667)">
+        <path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
+    </g>
+    <g transform="matrix(0.675676,0,0,1.55556,-9.45946,-88.6667)">
+        <path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
+    </g>
+</svg>

package/assets/images/layout/AlignRight.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-1,0,0,1,100,0)">
+        <g transform="matrix(0.727273,0,0,1,0,0)">
+            <rect x="0" y="0" width="11" height="100"/>
+        </g>
+        <g transform="matrix(1.35135,0,0,1.55556,-18.9189,-44.6667)">
+            <path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
+        </g>
+        <g transform="matrix(0.675676,0,0,1.55556,-9.45946,-88.6667)">
+            <path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
+        </g>
+    </g>
+</svg>

package/assets/images/layout/AlignTop.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-4.45326e-17,0.727273,1,6.12323e-17,5.03233e-16,-1.42109e-14)">
+        <rect x="0" y="0" width="11" height="100"/>
+    </g>
+    <g transform="matrix(-8.27464e-17,-1.35135,-1.55556,9.52503e-17,188.667,118.919)">
+        <path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
+    </g>
+    <g transform="matrix(-4.13732e-17,-0.675676,-1.55556,9.52503e-17,144.667,59.4595)">
+        <path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
+    </g>
+</svg>

package/assets/images/layout/BringOneToBack.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1.36364,0,0,1.36364,-6.63636,1.54545)">
+        <rect x="32" y="26" width="44" height="44" style="stroke:black;stroke-width:4.4px;"/>
+    </g>
+    <g transform="matrix(1.36364,0,0,1.36364,-40.6364,-32.4545)">
+        <rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:4.4px;"/>
+    </g>
+</svg>

package/assets/images/layout/BringOneToFront.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1.36364,0,0,1.36364,-40.6364,-32.4545)">
+        <rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:4.4px;"/>
+    </g>
+    <g transform="matrix(1.36364,0,0,1.36364,-6.63636,1.54545)">
+        <rect x="32" y="26" width="44" height="44" style="stroke:black;stroke-width:4.4px;"/>
+    </g>
+</svg>

package/assets/images/layout/BringToBack.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1.36364,0,0,1.36364,-23.6364,-15.4545)">
+        <rect x="32" y="26" width="44" height="44" style="stroke:black;stroke-width:4.4px;"/>
+    </g>
+    <g transform="matrix(0.863636,0,0,0.863636,-24.6364,-19.4545)">
+        <rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:6.95px;"/>
+    </g>
+    <g transform="matrix(0.863636,0,0,0.863636,31.3636,36.5455)">
+        <rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:6.95px;"/>
+    </g>
+</svg>

package/assets/images/layout/BringToFront.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(0.863636,0,0,0.863636,-24.6364,-19.4545)">
+        <rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:6.95px;"/>
+    </g>
+    <g transform="matrix(0.863636,0,0,0.863636,31.3636,36.5455)">
+        <rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:6.95px;"/>
+    </g>
+    <g transform="matrix(1.36364,0,0,1.36364,-23.6364,-15.4545)">
+        <rect x="32" y="26" width="44" height="44" style="stroke:black;stroke-width:4.4px;"/>
+    </g>
+</svg>

package/dist/elements/helper/TouchGesturehelper.d.ts

@@ -0,0 +1,17 @@
+export declare class TouchGestureHelper {
+    static addTouchEvents(element: HTMLElement): TouchGestureHelper;
+    private constructor();
+    private _target;
+    private _started;
+    private _startX_0;
+    private _startY_0;
+    private _lastZoom;
+    private _lastPanDistanceX;
+    private _lastPanDistanceY;
+    private _startZoomDistance;
+    multitouchEventActive: boolean;
+    private _mode;
+    _touchStart(e: TouchEvent): void;
+    _touchMove(e: TouchEvent): void;
+    _touchEnd(e: TouchEvent): void;
+}

package/dist/elements/helper/TouchGesturehelper.js

@@ -0,0 +1,89 @@
+const panThreshold = 10;
+const zoomThreshold = 10;
+//const rotateThreshold = 0;
+export class TouchGestureHelper {
+    static addTouchEvents(element) {
+        return new TouchGestureHelper(element);
+    }
+    constructor(element) {
+        this._target = element;
+        element.addEventListener('touchstart', (e) => this._touchStart(e));
+        element.addEventListener('touchmove', (e) => this._touchMove(e));
+        element.addEventListener('touchend', (e) => this._touchEnd(e));
+        element.addEventListener('touchcancel', (e) => this._touchEnd(e));
+    }
+    _target;
+    _started;
+    _startX_0;
+    _startY_0;
+    //private _startX_1: number;
+    //private _startY_1: number;
+    _lastZoom;
+    _lastPanDistanceX;
+    _lastPanDistanceY;
+    _startZoomDistance;
+    multitouchEventActive;
+    _mode = null;
+    _touchStart(e) {
+        if (e.touches.length === 2) {
+            this.multitouchEventActive = true;
+            this._mode = null;
+            this._started = true;
+            this._startX_0 = e.touches[0].screenX;
+            this._startY_0 = e.touches[0].screenY;
+            //this._startX_1 = e.touches[1].screenX;
+            //this._startY_1 = e.touches[1].screenY;
+            this._lastZoom = 0;
+            this._lastPanDistanceX = 0;
+            this._lastPanDistanceY = 0;
+            this._startZoomDistance = Math.hypot(e.touches[0].screenX - e.touches[1].screenX, e.touches[0].screenY - e.touches[1].screenY);
+        }
+        else {
+            this.multitouchEventActive = false;
+            this._started = false;
+        }
+    }
+    _touchMove(e) {
+        if (e.touches.length !== 2) {
+            this.multitouchEventActive = false;
+            this._started = false;
+        }
+        if (this._started) {
+            e.preventDefault();
+            let newZoomDistance = Math.hypot(e.touches[0].screenX - e.touches[1].screenX, e.touches[0].screenY - e.touches[1].screenY);
+            const newPanDistanceX = this._startX_0 - e.touches[0].screenX;
+            const newPanDistanceY = this._startY_0 - e.touches[0].screenY;
+            const panDiffX = newPanDistanceX - this._lastPanDistanceX;
+            const panDiffY = newPanDistanceY - this._lastPanDistanceY;
+            this._lastPanDistanceX = newPanDistanceX;
+            this._lastPanDistanceY = newPanDistanceY;
+            const zoom = newZoomDistance - this._startZoomDistance;
+            const zoomDiff = zoom - this._lastZoom;
+            this._lastZoom = zoom;
+            this._lastZoom;
+            if (!this._mode) {
+                if (Math.abs(zoom) > zoomThreshold) {
+                    this._mode = 'zoom';
+                }
+                if (Math.abs(newPanDistanceX) > panThreshold || Math.abs(newPanDistanceY) > panThreshold) {
+                    this._mode = 'pan';
+                }
+            }
+            if (this._mode) {
+                if (this._mode == 'zoom') {
+                    const event = new CustomEvent("zoom", { detail: { factor: zoom, diff: zoomDiff } });
+                    this._target.dispatchEvent(event);
+                }
+                else if (this._mode == 'pan') {
+                    const event = new CustomEvent("pan", { detail: { x: newPanDistanceX, deltaX: panDiffX, y: newPanDistanceY, deltaY: panDiffY } });
+                    this._target.dispatchEvent(event);
+                }
+            }
+        }
+    }
+    _touchEnd(e) {
+        this.multitouchEventActive = false;
+        if (e.touches.length !== 2) {
+        }
+    }
+}

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

@@ -23,7 +23,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     clickOverlay: HTMLDivElement;
     private _activeTool;
     private _gridSize;
-    private _moveGroup;
     get gridSize(): number;
     set gridSize(value: number);
     pasteOffset: number;
@@ -41,6 +40,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _currentContextMenu;
     private _backgroundImage;
     private _enableSelectTextNodesOnClick;
+    private _moveGroup;
+    private _touchGestureHelper;
     get zoomFactor(): number;
     set zoomFactor(value: number);
     get scaleFactor(): number;

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

@@ -20,6 +20,7 @@ import { NodeType } from '../../item/NodeType.js';
 import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js';
 import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
 import { filterChildPlaceItems } from '../../helper/LayoutHelper.js';
+import { TouchGestureHelper } from '../../helper/TouchGestureHelper.js';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -30,7 +31,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _activeTool;
     // IPlacementView
     _gridSize = 10;
-    _moveGroup;
     get gridSize() {
         return this._gridSize;
     }
@@ -67,6 +67,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _currentContextMenu;
     _backgroundImage;
     _enableSelectTextNodesOnClick = false;
+    _moveGroup;
+    _touchGestureHelper;
     get zoomFactor() {
         return this._zoomFactor;
     }
@@ -616,6 +618,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     connectedCallback() {
         if (!this._firstConnect) {
             this._firstConnect = true;
+            this._touchGestureHelper = TouchGestureHelper.addTouchEvents(this.clickOverlay);
             this.clickOverlay.addEventListener(EventNames.PointerDown, this._pointerEventHandler);
             this.clickOverlay.addEventListener(EventNames.PointerMove, this._pointerEventHandler);
             this.clickOverlay.addEventListener(EventNames.PointerUp, this._pointerEventHandler);
@@ -626,6 +629,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.clickOverlay.addEventListener(EventNames.KeyDown, this.onKeyDown, true);
             this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp, true);
             this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClick, true);
+            this.clickOverlay.addEventListener('zoom', (e) => {
+                this.zoomFactor = this.zoomFactor + (e.detail.diff / 10);
+            });
+            this.clickOverlay.addEventListener('pan', (e) => {
+                const newCanvasOffset = {
+                    x: (this.canvasOffset.x) - e.detail.deltaX,
+                    y: (this.canvasOffset.y) - e.detail.deltaY
+                };
+                this.canvasOffset = newCanvasOffset;
+            });
         }
         this.extensionManager.connected();
     }
@@ -1020,6 +1033,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _pointerEventHandler(event, forceElement = null) {
         if (!this.serviceContainer)
             return;
+        if (this._touchGestureHelper.multitouchEventActive)
+            return;
         this.fillCalculationrects();
         if (this._pointerextensions) {
             for (let pe of this._pointerextensions)

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

@@ -30,7 +30,7 @@ export class PointerTool {
     }
     _showContextMenu(event, designerCanvas) {
         event.preventDefault();
-        if (!event.shiftKey) {
+        if (!event.ctrlKey && !event.shiftKey) {
             let items = designerCanvas.elementsFromPoint(event.x, event.y);
             for (let e of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                 if (items.indexOf(e.element) >= 0) {
@@ -47,7 +47,7 @@ export class PointerTool {
         }
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
-        if (event.ctrlKey)
+        if (event.ctrlKey || event.shiftKey)
             this.cursor = 'copy';
         else
             this.cursor = 'default';
@@ -110,7 +110,7 @@ export class PointerTool {
                     this._actionType = PointerActionType.Drag;
                 }
                 else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) {
-                    if (!event.shiftKey)
+                    if (!event.ctrlKey && !event.shiftKey)
                         designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
                     this._actionType = PointerActionType.DrawSelection;
                 }

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

@@ -8,7 +8,7 @@ export class RectangleSelectorTool {
     activated(serviceContainer) {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
-        if (event.ctrlKey)
+        if (event.ctrlKey || event.shiftKey)
             this.cursor = 'copy';
         else if (event.altKey)
             this.cursor = 'default';
@@ -58,7 +58,7 @@ export class RectangleSelectorTool {
                 designerCanvas.releaseActiveTool();
                 const elements = designerCanvas.rootDesignItem.querySelectorAll('*');
                 let inSelectionElements = [];
-                if ((event.ctrlKey || event.altKey) && designerCanvas.instanceServiceContainer.selectionService.selectedElements)
+                if ((event.ctrlKey || event.shiftKey || event.altKey) && designerCanvas.instanceServiceContainer.selectionService.selectedElements)
                     inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {

package/dist/elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js

@@ -4,11 +4,11 @@ import { DrawToolPopup } from "../popups/DrawToolPopup.js";
 export class DrawToolButtonProvider {
     provideButton(designerCanvas) {
         const button = new DesignerToolbarButton(designerCanvas, {
-            'DrawLine': { icon: assetsPath + 'images/layout/DrawLineTool.svg' },
-            'DrawPath': { icon: assetsPath + 'images/layout/DrawPathTool.svg' },
-            'DrawRect': { icon: assetsPath + 'images/layout/DrawRectTool.svg' },
-            'DrawEllipsis': { icon: assetsPath + 'images/layout/DrawEllipTool.svg' },
-            'PickColor': { icon: assetsPath + 'images/layout/ColorPickerTool.svg' }
+            'DrawLine': { icon: assetsPath + 'images/tools/DrawLineTool.svg' },
+            'DrawPath': { icon: assetsPath + 'images/tools/DrawPathTool.svg' },
+            'DrawRect': { icon: assetsPath + 'images/tools/DrawRectTool.svg' },
+            'DrawEllipsis': { icon: assetsPath + 'images/tools/DrawEllipTool.svg' },
+            'PickColor': { icon: assetsPath + 'images/tools/ColorPickerTool.svg' }
         });
         button.popup = DrawToolPopup;
         return button;

package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js

@@ -2,6 +2,6 @@ import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
 import { assetsPath } from "../../../../../../Constants.js";
 export class PointerToolButtonProvider {
     provideButton(designerCanvas) {
-        return new DesignerToolbarButton(designerCanvas, { 'Pointer': { icon: assetsPath + 'images/layout/PointerTool.svg' } });
+        return new DesignerToolbarButton(designerCanvas, { 'Pointer': { icon: assetsPath + 'images/tools/PointerTool.svg' } });
     }
 }

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js

@@ -4,8 +4,8 @@ import { SelectionToolPopup } from "../popups/SelectionToolPopup.js";
 export class SelectorToolButtonProvider {
     provideButton(designerCanvas) {
         const button = new DesignerToolbarButton(designerCanvas, {
-            'RectangleSelector': { icon: assetsPath + 'images/layout/SelectRectTool.svg' },
-            'MagicWandSelector': { icon: assetsPath + 'images/layout/MagicWandTool.svg' }
+            'RectangleSelector': { icon: assetsPath + 'images/tools/SelectRectTool.svg' },
+            'MagicWandSelector': { icon: assetsPath + 'images/tools/MagicWandTool.svg' }
         });
         button.popup = SelectionToolPopup;
         return button;

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js

@@ -2,6 +2,6 @@ import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
 import { assetsPath } from "../../../../../../Constants.js";
 export class TextToolButtonProvider {
     provideButton(designerCanvas) {
-        return new DesignerToolbarButton(designerCanvas, { 'Text': { icon: assetsPath + 'images/layout/TextTool.svg' } });
+        return new DesignerToolbarButton(designerCanvas, { 'Text': { icon: assetsPath + 'images/tools/TextTool.svg' } });
     }
 }

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js

@@ -3,7 +3,7 @@ import { assetsPath } from "../../../../../../Constants.js";
 import { TransformToolPopup } from "../popups/TransformToolPopup.js";
 export class TransformToolButtonProvider {
     provideButton(designerCanvas) {
-        const button = new DesignerToolbarButton(designerCanvas, { '': { icon: assetsPath + 'images/layout/TransformTool.svg' } });
+        const button = new DesignerToolbarButton(designerCanvas, { '': { icon: assetsPath + 'images/tools/TransformTool.svg' } });
         button.popup = TransformToolPopup;
         return button;
     }

package/dist/elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js

@@ -2,6 +2,6 @@ import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
 import { assetsPath } from "../../../../../../Constants.js";
 export class ZoomToolButtonProvider {
     provideButton(designerCanvas) {
-        return new DesignerToolbarButton(designerCanvas, { 'Zoom': { icon: assetsPath + 'images/layout/ZoomTool.svg' } });
+        return new DesignerToolbarButton(designerCanvas, { 'Zoom': { icon: assetsPath + 'images/tools/ZoomTool.svg' } });
     }
 }

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js

@@ -58,11 +58,11 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
           <header><h2 id="title" style="margin: 0;">Draw</h2></header>
           <main id="content-area">
             <div class="tools">
-              <div class="tool" data-command="setTool" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/layout/ColorPickerTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/tools/DrawLineTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/tools/DrawPathTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/tools/DrawRectTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/tools/DrawEllipTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/tools/ColorPickerTool.svg');"></div>
             </div>
             <div class="inputs">
               <div class="input">

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.js

@@ -33,8 +33,8 @@ export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend
           <header><h2 id="title" style="margin: 0;">Selection</h2></header>
           <main id="content-area">
             <div class="tools">
-              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/layout/SelectRectTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/layout/MagicWandTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
             </div>
           </main>
         </div>`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.87",
+  "version": "0.1.88",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",

package/dist/elements/services/propertiesService/app.d.ts

@@ -1,2 +0,0 @@
-declare function getProtoProperties(target: any): string[];
-declare function getAttributesIfCustomElement(target: any): any;

package/dist/elements/services/propertiesService/app.js

@@ -1,71 +0,0 @@
-"use strict";
-function getProtoProperties(target) {
-    // If this is a custom element, you need to go up the prototype
-    // chain until you get proper HTMLElement, since everything under it
-    // is generated prototypes and will have propeties that are dupes (like:
-    // every observedAttribute is also mirrored as a property)
-    const isCustomElement = target.tagName.indexOf('-') !== -1;
-    let proto = target.__proto__;
-    if (isCustomElement) {
-        while (proto.constructor !== window.HTMLElement.prototype.constructor) {
-            proto = proto.__proto__;
-        }
-    }
-    let protoProps = {};
-    // We literally want nothing other than 'href' and 'target' from HTMLAnchorElement.
-    if (proto.constructor.name === 'HTMLAnchorElement') {
-        protoProps['href'] = Object.getOwnPropertyDescriptors(proto).href;
-        protoProps['target'] = Object.getOwnPropertyDescriptors(proto).target;
-        proto = proto.__proto__;
-    }
-    while (proto.constructor.name !== 'Element') {
-        Object.assign(protoProps, Object.getOwnPropertyDescriptors(proto));
-        proto = proto.__proto__;
-    }
-    let propNames = Object.keys(protoProps).sort();
-    // Skip some very specific Polymer/element properties.
-    let blacklist = [
-        // Polymer specific
-        'isAttached',
-        'constructor', 'created', 'ready', 'attached', 'detached',
-        'attributeChanged', 'is', 'listeners', 'observers', 'properties',
-        // Native elements ones we don't care about
-        'validity', 'useMap', 'innerText', 'outerText', 'style', 'accessKey',
-        'draggable', 'lang', 'spellcheck', 'tabIndex', 'translate', 'align', 'dir',
-        'isMap', 'useMap', 'hspace', 'vspace', 'referrerPolicy', 'crossOrigin',
-        'lowsrc', 'longDesc',
-        // Specific elements stuff
-        'receivedFocusFromKeyboard', 'pointerDown', 'valueAsNumber',
-        'selectionDirection', 'selectionStart', 'selectionEnd'
-    ];
-    let i = 0;
-    while (i < propNames.length) {
-        let name = propNames[i];
-        // Skip everything that starts with a _ which is a Polymer private/protected
-        // and you probably don't care about it.
-        // Also anything in the blacklist. Or that starts with webkit.
-        if (name.charAt(0) === '_' ||
-            name === 'keyEventTarget' ||
-            blacklist.indexOf(name) !== -1 ||
-            name.indexOf('webkit') === 0 ||
-            name.indexOf('on') === 0) {
-            propNames.splice(i, 1);
-            continue;
-        }
-        // Skip everything that doesn't have a setter.
-        if (!protoProps[name].set) {
-            propNames.splice(i, 1);
-            continue;
-        }
-        i++;
-    }
-    return propNames || [];
-}
-function getAttributesIfCustomElement(target) {
-    if (target.tagName.indexOf('-') !== -1) {
-        return target.constructor.observedAttributes;
-    }
-    else {
-        return [];
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup copy.d.ts

@@ -1,6 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style: CSSStyleSheet;
-    static template: HTMLTemplateElement;
-    constructor();
-}

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup copy.js

@@ -1,102 +0,0 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
-import { assetsPath } from "../../../../../../Constants.js";
-export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .container {
-          width: 220px;
-          min-height: 200px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-      }
-      .inputs{
-        float: left;
-        margin-top: 5px;
-        align-items: center;
-      }
-      .input {
-        display: flex;
-        align-items: center; 
-        margin-top: 5px;
-      }
-      .text {
-        margin-left: 5px;
-        font-size: 14px;
-      }
-      .strokecolor{ 
-        float: both;
-      }
-      .fillbrush{
-        float: both;
-      }
-      .strokethickness{
-        float: both;
-      }
-      
-      `;
-    static template = html `
-        <div class="container">
-          <header><h2 id="title" style="margin: 0;">Draw</h2></header>
-          <main id="content-area">
-            <div class="tools">
-              <div class="tool" data-command="setTool" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/layout/ColorPickerTool.svg');"></div>
-            </div>
-            <div class="inputs">
-              <div class="input">
-                <input id="strokecolor" class="strokecolor" type="color" title="stroke color" value="#000000" style="padding: 0; width:31px; height:31px;">
-                <text class="text">Stroke Color</text>
-              </div>
-              <div class="input">
-                <input id="fillbrush" class="fillbrush" type="color" title="fill brush" value="#ffffff" style="padding: 0; width:31px; height:31px;">
-                <text class="text">Fill Brush</text>
-              </div>
-              <div class="input">
-                <input id="strokethickness" class="strokethickness" type="range" title="stroke thickness" min="1" max="20" value="3" style="padding: 0; width:80px; height:20px; margin-right: 5px;">
-                <text class="text">Stroke Thickness</text>
-              </div>
-            </div>
-          </main>
-        </div>`;
-    constructor() {
-        super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
-        if (this.shadowRoot.querySelector("input.strokecolor")) {
-            let input = this._getDomElement("strokecolor");
-            input.onchange = () => this.getRootNode().host.setStrokeColor(input.value);
-        }
-        if (this.shadowRoot.querySelector("input.fillbrush")) {
-            let input = this._getDomElement("fillbrush");
-            input.onchange = () => this.getRootNode().host.setFillBrush(input.value);
-        }
-        if (this.shadowRoot.querySelector("input.strokethickness")) {
-            let input = this._getDomElement("strokethickness");
-            input.onchange = () => this.getRootNode().host.setStrokeThickness(input.value);
-        }
-    }
-}
-customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);