@node-projects/web-component-designer 0.0.87 → 0.0.90

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

@@ -41,6 +41,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       height: 16px;
       background: #787f82;
       display: flex;
+      bottom: 0;
+      position: absolute;
     }
     input {
       width: 40px;
@@ -75,8 +77,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       height: 100%;
     }
     #canvas {
-      width: 100%;
-      height: 100%;
+      width: calc(100% - 16px);
+      height: calc(100% - 32px);
     }
   
     .zoom-in {
@@ -141,15 +143,21 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._designerCanvas.id = "canvas";
         this._designerCanvas.appendChild(document.createElement("slot"));
         outer.insertAdjacentElement('afterbegin', this._designerCanvas);
+        this._designerCanvas.onZoomFactorChanged.on(() => {
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+            const pos = this.designerCanvas.canvasOffset;
+            const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth;
+            const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight;
+            this._sHor.value = (pos.x / (-2 * w)) + 0.5;
+            this._sVert.value = (pos.y / (-2 * h)) + 0.5;
+        });
         this._zoomInput = this._getDomElement('zoomInput');
         this._zoomInput.onkeydown = (e) => {
             if (e.key == 'Enter')
                 this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
         };
         this._zoomInput.onblur = () => {
             this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
         };
         this._zoomInput.onclick = this._zoomInput.select;
         let zoomIncrease = this._getDomElement('zoomIncrease');
@@ -158,7 +166,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
                 this._designerCanvas.zoomFactor += 0.1;
             else
                 this._designerCanvas.zoomFactor += 0.01;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
         };
         let zoomDecrease = this._getDomElement('zoomDecrease');
         zoomDecrease.onclick = () => {
@@ -197,6 +204,11 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             maxY -= cvRect.y;
             let scaleX = cvRect.width / (maxX / this._designerCanvas.zoomFactor);
             let scaleY = cvRect.height / (maxY / this._designerCanvas.zoomFactor);
+            const dimensions = this.designerCanvas.getDesignSurfaceDimensions();
+            if (dimensions.width)
+                scaleX = cvRect.width / dimensions.width;
+            if (dimensions.height)
+                scaleY = cvRect.height / dimensions.height;
             this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
             this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
         };
@@ -235,16 +247,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             zf += event.deltaY * -0.001; //deltamode = 0
             if (zf < 0.02)
                 zf = 0.02;
-            this._designerCanvas.zoomFactor = zf;
-            this._zoomInput.value = Math.round(zf * 100) + '%';
-            const rect = this.getBoundingClientRect();
-            //const xc = this.designerCanvas.canvasOffset.x;
-            //const yc = this.designerCanvas.canvasOffset.y;
-            const xp = event.x - rect.x;
-            const yp = event.y - rect.y;
-            const x = xp / zf * (1 - zf);
-            const y = yp / zf * (1 - zf);
-            this.designerCanvas.canvasOffset = { x, y };
+            const vp = this.designerCanvas.getNormalizedEventCoordinates(event);
+            this.designerCanvas.zoomTowardsPoint(vp, zf);
         }
         else {
             this._sHor.value += event.deltaX / 1000;

package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtension.js

@@ -1,3 +1,4 @@
+import { NamedTools } from "../tools/NamedTools.js";
 import { AbstractExtension } from './AbstractExtension';
 export class ElementDragTitleExtension extends AbstractExtension {
     _rect;
@@ -29,8 +30,7 @@ export class ElementDragTitleExtension extends AbstractExtension {
     _pointerEvent(event) {
         event.preventDefault();
         event.stopPropagation();
-        //@ts-ignore
-        this.designerCanvas._pointerEventHandlerBound(event, this.extendedItem.element);
+        this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element);
     }
     dispose() {
         this._removeAllOverlays();

package/dist/elements/widgets/designerView/extensions/PathExtension.js

@@ -113,6 +113,7 @@ export class PathExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                this.designerCanvas.removeCurrentPointerEventHandler();
                 this._startPos = null;
                 this._circlePos = null;
                 this._lastPos = null;

package/dist/elements/widgets/designerView/extensions/ResizeExtension.js

@@ -60,7 +60,7 @@ export class ResizeExtension extends AbstractExtension {
     }
     _pointerActionTypeResize(circle, event, actionMode = 'se-resize') {
         event.stopPropagation();
-        const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event); //, this.extendedItem.element, event.type === 'pointerdown' ? null : this._initialPoint);
+        const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
                 const cx = parseFloat(circle.getAttribute('cx'));
@@ -135,6 +135,7 @@ export class ResizeExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                this.designerCanvas.removeCurrentPointerEventHandler();
                 let cg = this.extendedItem.openGroup("Resize Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
                 this.extendedItem.setStyle('height', this.extendedItem.element.style.height);

package/dist/elements/widgets/designerView/extensions/TransformOriginExtension.js

@@ -43,6 +43,7 @@ export class TransformOriginExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                this.designerCanvas.removeCurrentPointerEventHandler();
                 if (this._startPos) {
                     const dx = normalized.x - this._startPos.x;
                     const dy = normalized.y - this._startPos.y;

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

@@ -67,6 +67,7 @@ export class DrawEllipsisTool {
                 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");

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

@@ -50,6 +50,7 @@ export class DrawLineTool {
                 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");

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

@@ -70,6 +70,7 @@ export class DrawPathTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 if (this._eventStarted && !this._pointerMoved) {
                     this._p2pMode = true;
                 }

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

@@ -82,6 +82,7 @@ export class DrawRectTool {
                 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");

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

@@ -24,22 +24,23 @@ export class MagicWandSelectorTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 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;
+                    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.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y;
                     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;
+                    point.x = elementRect.x;
+                    point.y = elementRect.y + 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;
+                    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);

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

@@ -13,6 +13,7 @@ export class PanTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 break;
         }
     }

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

@@ -16,6 +16,7 @@ export declare class PointerTool implements ITool {
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
+    private _showContextMenu;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     private _pointerActionTypeDrawSelection;
     private _resetPointerEventsForClickThrough;

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

@@ -22,7 +22,26 @@ export class PointerTool {
     }
     dispose() {
     }
+    _showContextMenu(event, designerCanvas) {
+        event.preventDefault();
+        if (!event.shiftKey) {
+            let items = designerCanvas.getItemsBelowMouse(event);
+            if (items.indexOf(designerCanvas.instanceServiceContainer.selectionService.primarySelection?.element) >= 0)
+                designerCanvas.showDesignItemContextMenu(designerCanvas.instanceServiceContainer.selectionService.primarySelection, event);
+            else {
+                const designItem = DesignItem.GetOrCreateDesignItem(event.target, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) {
+                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+                }
+                designerCanvas.showDesignItemContextMenu(designItem, event);
+            }
+        }
+    }
     pointerEventHandler(designerCanvas, event, currentElement) {
+        if (event.button == 2) {
+            this._showContextMenu(event, designerCanvas);
+            return;
+        }
         if (((event.ctrlKey || event.metaKey) && event.shiftKey) || event.buttons == 4) {
             const panTool = designerCanvas.serviceContainer.designerTools.get(NamedTools.Pan);
             if (panTool) {
@@ -37,6 +56,7 @@ export class PointerTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 break;
         }
         if (!event.altKey)
@@ -189,7 +209,7 @@ export class PointerTool {
                                                 break;
                                             }
                                         }
-                                        else if (newContainerElement == this._actionStartedDesignItem.element) {
+                                        else if (newContainerElement == this._actionStartedDesignItem.element || newContainerElement == currentDesignItem.element) {
                                             backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
                                             newContainerElement.style.pointerEvents = 'none';
                                             const old = newContainerElement;
@@ -197,6 +217,7 @@ export class PointerTool {
                                             if (old === newContainerElement) {
                                                 newContainerElementDesignItem = null;
                                                 newContainerService = null;
+                                                newContainerElement = null;
                                                 break;
                                             }
                                         }
@@ -297,7 +318,7 @@ export class PointerTool {
                 }
             case EventNames.PointerUp:
                 {
-                    if (this._actionType == PointerActionType.DragOrSelect) {
+                    if (!this._movedSinceStartedAction || this._actionType == PointerActionType.DragOrSelect) {
                         if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey)
                             designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
                         return;

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

@@ -46,22 +46,23 @@ export class RectangleSelectorTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 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;
+                    let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
+                    point.x = elementRect.x;
+                    point.y = elementRect.y;
                     const p1 = this._rect.isPointInFill(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y;
                     const p2 = p1 && this._rect.isPointInFill(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
+                    point.x = elementRect.x;
+                    point.y = elementRect.y + elementRect.height;
                     const p3 = p2 && this._rect.isPointInFill(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y + elementRect.height;
                     const p4 = p3 && this._rect.isPointInFill(point);
                     if (p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);

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

@@ -2,9 +2,16 @@ import { ServiceContainer } from '../../../services/ServiceContainer.js';
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class ZoomTool implements ITool {
-    readonly cursor: string;
+    cursor: string;
+    private _rect;
+    private _startPoint;
+    private _endPoint;
+    private _pointerMovementTolerance;
+    private _zoomStepSize;
     activated(serviceContainer: ServiceContainer): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    private _zoomOnto;
+    private _isPositionEqual;
     keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     dispose(): void;
 }

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

@@ -1,8 +1,77 @@
+import { EventNames, OverlayLayer } from '../../../../index.js';
 export class ZoomTool {
     cursor = 'zoom-in';
+    _rect;
+    _startPoint;
+    _endPoint;
+    _pointerMovementTolerance = 5;
+    _zoomStepSize = 0.2; //number x 100 = Scale in percent
     activated(serviceContainer) {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
+        const eventPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._startPoint = eventPoint;
+                if (!this._rect)
+                    this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                this._rect.setAttribute('class', 'svg-selector');
+                this._rect.setAttribute('x', (this._startPoint.x * designerCanvas.zoomFactor));
+                this._rect.setAttribute('y', (this._startPoint.y * designerCanvas.zoomFactor));
+                this._rect.setAttribute('width', 0);
+                this._rect.setAttribute('height', 0);
+                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._startPoint) {
+                    let width = eventPoint.x - this._startPoint.x;
+                    let height = eventPoint.y - this._startPoint.y;
+                    if (width >= 0) {
+                        this._rect.setAttribute('x', this._startPoint.x);
+                        this._rect.setAttribute('width', width);
+                    }
+                    else {
+                        this._rect.setAttribute('x', eventPoint.x);
+                        this._rect.setAttribute('width', (-1 * width));
+                    }
+                    if (height >= 0) {
+                        this._rect.setAttribute('y', this._startPoint.y);
+                        this._rect.setAttribute('height', height);
+                    }
+                    else {
+                        this._rect.setAttribute('y', eventPoint.y);
+                        this._rect.setAttribute('height', (-1 * height));
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                this._endPoint = eventPoint;
+                let isLeftClick = event.button == 0;
+                switch (event.button) {
+                    case 0: //Left-Click
+                    case 2: //Right-Click
+                        this._zoomOnto(isLeftClick, this._startPoint, this._endPoint, designerCanvas);
+                        break;
+                }
+                designerCanvas.overlayLayer.removeOverlay(this._rect);
+                this._rect = null;
+                this._startPoint = null;
+                break;
+        }
+    }
+    _zoomOnto(isZoomInto, startPoint, endPoint, designerCanvas) {
+        if (this._isPositionEqual(startPoint, endPoint)) {
+            const oldZoom = designerCanvas.zoomFactor;
+            const newZoom = isZoomInto ? oldZoom + this._zoomStepSize : oldZoom - this._zoomStepSize;
+            designerCanvas.zoomTowardsPoint(endPoint, newZoom);
+        }
+        else {
+            designerCanvas.zoomOntoRectangle(startPoint, endPoint);
+        }
+    }
+    _isPositionEqual(startPoint, endPoint) {
+        let tolerance = this._pointerMovementTolerance;
+        return Math.abs(startPoint.x - endPoint.x) <= tolerance && Math.abs(startPoint.y - endPoint.y) <= tolerance;
     }
     keyboardEventHandler(designerCanvas, event, currentElement) { }
     dispose() {

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -72,6 +72,11 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
             extensions: ['childcounter', 'dnd5', 'filter'],
             quicksearch: true,
             source: [],
+            filter: {
+                autoExpand: true,
+                mode: 'hide',
+                highlight: true
+            },
             dnd5: {
                 dropMarkerParent: this.shadowRoot,
                 preventRecursion: true,

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -294,7 +294,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             },
             filter: {
                 autoApply: true,
-                autoExpand: false,
+                autoExpand: true,
                 counter: true,
                 fuzzy: true,
                 hideExpandedCounter: true,
@@ -365,18 +365,15 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         }
     }
     _highlight(activeElements) {
-        if (activeElements != null) {
-            this._tree.visit((node) => {
-                //@ts-ignore
-                if (activeElements.indexOf(node.data.ref) >= 0) {
-                    node.setSelected(true);
-                    node.makeVisible({ scrollIntoView: true });
-                }
-                else {
-                    node.setSelected(false);
-                }
-            });
-        }
+        this._tree.visit((node) => {
+            if (activeElements && activeElements.indexOf(node.data.ref) >= 0) {
+                node.setSelected(true);
+                node.makeVisible({ scrollIntoView: true });
+            }
+            else {
+                node.setSelected(false);
+            }
+        });
     }
 }
 customElements.define('node-projects-tree-view-extended', TreeViewExtended);

package/dist/enums/Orientation.d.ts

@@ -0,0 +1,8 @@
+export declare enum Orientation {
+    TOP = 0,
+    RIGHT = 1,
+    BOTTOM = 2,
+    LEFT = 3,
+    VERTICAL_CENTER = 4,
+    HORIZONTAL_CENTER = 5
+}

package/dist/enums/Orientation.js

@@ -0,0 +1,9 @@
+export var Orientation;
+(function (Orientation) {
+    Orientation[Orientation["TOP"] = 0] = "TOP";
+    Orientation[Orientation["RIGHT"] = 1] = "RIGHT";
+    Orientation[Orientation["BOTTOM"] = 2] = "BOTTOM";
+    Orientation[Orientation["LEFT"] = 3] = "LEFT";
+    Orientation[Orientation["VERTICAL_CENTER"] = 4] = "VERTICAL_CENTER";
+    Orientation[Orientation["HORIZONTAL_CENTER"] = 5] = "HORIZONTAL_CENTER";
+})(Orientation || (Orientation = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.87",
+  "version": "0.0.90",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",