@node-projects/web-component-designer 0.0.88 → 0.0.89

package/dist/elements/controls/SimpleSplitView.js

@@ -8,7 +8,7 @@ export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
       position: relative;
       height: 100%;
       width: 100%;
-      grid-template-rows: calc(var(--split) * 1%) 5px calc((100 - var(--split)) * 1%);
+      grid-template-rows: calc(var(--split) * 1%) 5px calc(((100 - var(--split)) * 1%) - 5px);
       display: grid;
       align-items: center;
     }

package/dist/elements/documentContainer.js

@@ -62,9 +62,11 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
         this.codeView = new serviceContainer.config.codeViewWidget();
         this.codeView.slot = 'bottom';
+        this.codeView.style.position = 'relative';
         this._codeDiv = document.createElement("div");
         this._tabControl.appendChild(this._codeDiv);
         this._codeDiv.title = 'Code';
+        this._codeDiv.style.position = 'relative';
         this._codeDiv.appendChild(this.codeView);
         this.codeView.onTextChanged.on(text => {
             if (!this._disableChangeNotificationDesigner) {

package/dist/elements/services/undoService/UndoService.js

@@ -19,7 +19,7 @@ export class UndoService {
         let itm = this._transactionStack.pop();
         if (itm !== transactionItem) {
             this.clear();
-            throw "UndoService - Commited Transation was not the last";
+            throw "UndoService - Commited Transaction was not the last";
         }
         if (itm.undoStack.length)
             this._undoStack.push(itm);
@@ -29,7 +29,7 @@ export class UndoService {
         let itm = this._transactionStack.pop();
         if (itm !== transactionItem) {
             this.clear();
-            throw "UndoService - Aborted Transation was not the last";
+            throw "UndoService - Aborted Transaction was not the last";
         }
         itm.undo();
     }

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

@@ -32,10 +32,12 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
     getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
+    removeCurrentPointerEventHandler(): any;
     getDesignSurfaceDimensions(): ISize;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
     getItemsBelowMouse(event: MouseEvent): Element[];
-    zoomTowardsPointer(point: IPoint, scalechange: number): void;
+    zoomTowardsPoint(point: IPoint, scalechange: number): void;
+    zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
 }

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

@@ -87,16 +87,18 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private onKeyUp;
     private onKeyDown;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    convertEventToViewPortCoordinates(point: IPoint): IPoint;
     getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     _rect: SVGRectElement;
     private _pointerEventHandler;
+    removeCurrentPointerEventHandler(): void;
     private _fillCalculationrects;
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
     getItemsBelowMouse(event: MouseEvent): Element[];
-    zoomOntoRectangle(startpoint: IPoint, endPoint: IPoint, scalechange: number): void;
-    zoomTowardsPointer(point: IPoint, newZoom: number): void;
+    zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
+    zoomTowardsPoint(canvasPoint: IPoint, newZoom: number): void;
 }

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

@@ -616,6 +616,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             y: offsetOfOuterY - offsetOfCanvasY / this.zoomFactor
         };
     }
+    convertEventToViewPortCoordinates(point) {
+        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x;
+        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y;
+        return {
+            x: (point.x + offsetOfCanvasX / this.zoomFactor) * this.zoomFactor,
+            y: (point.y + offsetOfCanvasY / this.zoomFactor) * this.zoomFactor
+        };
+    }
     getViewportCoordinates(event) {
         return {
             x: (event.clientX - this.outerRect.x),
@@ -734,12 +742,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._fillCalculationrects();
         let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer);
         this._canvas.style.cursor = tool.cursor;
-        tool.pointerEventHandler(this, event, currentElement);
         if (event.type == EventNames.PointerDown) {
             this._lastPointerDownHandler = (evt) => tool.pointerEventHandler(this, evt, currentElement);
         }
         tool.pointerEventHandler(this, event, currentElement);
     }
+    removeCurrentPointerEventHandler() {
+        this._lastPointerDownHandler = null;
+    }
     _fillCalculationrects() {
         this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
         this.outerRect = this._outercanvas2.getBoundingClientRect();
@@ -784,10 +794,25 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         return lstEl;
     }
-    zoomOntoRectangle(startpoint, endPoint, scalechange) {
+    zoomOntoRectangle(startPoint, endPoint) {
+        let rect = {
+            x: startPoint.x < endPoint.x ? startPoint.x : endPoint.x,
+            y: startPoint.y < endPoint.y ? startPoint.y : endPoint.y,
+            width: Math.abs(startPoint.x - endPoint.x),
+            height: Math.abs(startPoint.y - endPoint.y),
+        };
+        let zFactorWidth = this.outerRect.width / rect.width;
+        let zFactorHeight = this.outerRect.height / rect.height;
+        let zoomFactor = zFactorWidth >= zFactorHeight ? zFactorHeight : zFactorWidth;
+        let rectCenter = {
+            x: (rect.width / 2) + rect.x,
+            y: (rect.height / 2) + rect.y
+        };
+        this.zoomTowardsPoint(rectCenter, zoomFactor);
     }
-    zoomTowardsPointer(point, newZoom) {
+    zoomTowardsPoint(canvasPoint, newZoom) {
         const scaleChange = newZoom / this.zoomFactor;
+        const point = this.convertEventToViewPortCoordinates(canvasPoint);
         const newCanvasOffset = {
             x: -(point.x * (scaleChange - 1) + scaleChange * -this.canvasOffsetUnzoomed.x),
             y: -(point.y * (scaleChange - 1) + scaleChange * -this.canvasOffsetUnzoomed.y)

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

@@ -247,8 +247,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             zf += event.deltaY * -0.001; //deltamode = 0
             if (zf < 0.02)
                 zf = 0.02;
-            const vp = this.designerCanvas.getViewportCoordinates(event);
-            this.designerCanvas.zoomTowardsPointer(vp, zf);
+            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,6 +24,7 @@ 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();

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.js

@@ -37,6 +37,7 @@ export class PointerTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 break;
         }
         if (!event.altKey)
@@ -189,7 +190,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 +198,7 @@ export class PointerTool {
                                             if (old === newContainerElement) {
                                                 newContainerElementDesignItem = null;
                                                 newContainerService = null;
+                                                newContainerElement = null;
                                                 break;
                                             }
                                         }
@@ -297,7 +299,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,6 +46,7 @@ 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();

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

@@ -3,6 +3,7 @@ import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class ZoomTool implements ITool {
     cursor: string;
+    private _rect;
     private _startPoint;
     private _endPoint;
     private _pointerMovementTolerance;

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

@@ -1,6 +1,7 @@
-import { EventNames } from '../../../../index.js';
+import { EventNames, OverlayLayer } from '../../../../index.js';
 export class ZoomTool {
     cursor = 'zoom-in';
+    _rect;
     _startPoint;
     _endPoint;
     _pointerMovementTolerance = 5;
@@ -8,10 +9,40 @@ export class ZoomTool {
     activated(serviceContainer) {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
-        const eventPoint = designerCanvas.getViewportCoordinates(event);
+        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;
@@ -22,6 +53,9 @@ export class ZoomTool {
                         this._zoomOnto(isLeftClick, this._startPoint, this._endPoint, designerCanvas);
                         break;
                 }
+                designerCanvas.overlayLayer.removeOverlay(this._rect);
+                this._rect = null;
+                this._startPoint = null;
                 break;
         }
     }
@@ -29,9 +63,10 @@ export class ZoomTool {
         if (this._isPositionEqual(startPoint, endPoint)) {
             const oldZoom = designerCanvas.zoomFactor;
             const newZoom = isZoomInto ? oldZoom + this._zoomStepSize : oldZoom - this._zoomStepSize;
-            designerCanvas.zoomTowardsPointer(endPoint, newZoom);
+            designerCanvas.zoomTowardsPoint(endPoint, newZoom);
         }
         else {
+            designerCanvas.zoomOntoRectangle(startPoint, endPoint);
         }
     }
     _isPositionEqual(startPoint, endPoint) {

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/package.json

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