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

package/README.md

@@ -1,6 +1,7 @@
 # web-component-designer
 
-## Caution - this is a preview Version, a RC is planed for January 2022
+## Caution - this is a preview Version, a RC1 is now planed for May 2022 - it's already usable but big Refactoring could still happen
+
 
 A HTML WebComponent for Designing Webcomponents and HTML Pages.
 

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

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "../..";
+import { Orientation } from "../../enums/Orientation";
+export declare abstract class ArrangeHelper {
+    static arrangeElements(orientation: Orientation, designerCanvas: IDesignerCanvas): void;
+    private static arrange;
+    private static formGroup;
+}

package/dist/elements/helper/ArrangeHelper.js

@@ -0,0 +1,79 @@
+import { Orientation } from "../../enums/Orientation";
+export class ArrangeHelper {
+    static arrangeElements(orientation, designerCanvas) {
+        switch (orientation) {
+            case Orientation.TOP: {
+                const grp = this.formGroup(ArrangeDirection.TOP, designerCanvas);
+                const top = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('top');
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'top', top);
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.RIGHT: {
+                const grp = this.formGroup(ArrangeDirection.RIGHT, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const right = Math.floor(arrElement.x + arrElement.width);
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'left', (right - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).width)) + "px");
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.BOTTOM:
+                const grp = this.formGroup(ArrangeDirection.BOTTOM, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const top = Math.floor(arrElement.y + arrElement.height);
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'top', (top - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).height)) + "px");
+                }
+                grp.commit();
+                break;
+            case Orientation.LEFT: {
+                const grp = this.formGroup(ArrangeDirection.LEFT, designerCanvas);
+                const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'left', left);
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.VERTICAL_CENTER: {
+                const grp = this.formGroup(ArrangeDirection.VERTICAL_CENTER, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const ver_center = arrElement.y + arrElement.height / 2;
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'top', (ver_center - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).height) / 2) + "px");
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.HORIZONTAL_CENTER: {
+                const grp = this.formGroup(ArrangeDirection.HORIZONTAL_CENTER, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const hor_center = arrElement.x + (arrElement.width / 2);
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'left', (hor_center - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).width) / 2) + "px");
+                }
+                grp.commit();
+                break;
+            }
+        }
+    }
+    static arrange(element, attribut, value) {
+        element.setStyle(attribut, value);
+    }
+    static formGroup(name, designerCanvas) {
+        return designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup(name);
+    }
+}
+var ArrangeDirection;
+(function (ArrangeDirection) {
+    ArrangeDirection["TOP"] = "arrangeTop";
+    ArrangeDirection["RIGHT"] = "arrangeRight";
+    ArrangeDirection["BOTTOM"] = "arrangeBottom";
+    ArrangeDirection["LEFT"] = "arrangeLeft";
+    ArrangeDirection["HORIZONTAL_CENTER"] = "arrangeHorizontalCenter";
+    ArrangeDirection["VERTICAL_CENTER"] = "arrangeVerticalCenter";
+})(ArrangeDirection || (ArrangeDirection = {}));

package/dist/elements/helper/KeyNameHelper.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -1 +1,4 @@
+import { IPoint } from "../../index.js";
 export declare function combineTransforms(helperElement: HTMLElement, element: HTMLElement, transform1: string, transform2: string): void;
+export declare function getDomMatrix(element: HTMLElement): DOMMatrix;
+export declare function convertCoordinates(point: IPoint, matrix: DOMMatrix): DOMPoint;

package/dist/elements/helper/TransformHelper.js

@@ -12,3 +12,10 @@ export function combineTransforms(helperElement, element, transform1, transform2
     const result = matrix2.multiply(matrix1);
     element.style.transform = result.toString();
 }
+export function getDomMatrix(element) {
+    return new DOMMatrix(window.getComputedStyle(element).transform);
+}
+export function convertCoordinates(point, matrix) {
+    let domPoint = new DOMPoint(point.x, point.y);
+    return domPoint.matrixTransform(matrix.inverse());
+}

package/dist/elements/helper/contextMenu/IContextmenuItem.d.ts

@@ -3,4 +3,5 @@ export interface IContextMenuItem {
     readonly icon?: string;
     readonly action?: (e: HTMLElement, args?: Event) => void;
     readonly children?: IContextMenuItem[];
+    readonly shortCut?: string;
 }

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -53,6 +53,8 @@ import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
 import { HtmlWriterService } from './htmlWriterService/HtmlWriterService.js';
 import { RectContextMenu } from '../widgets/designerView/extensions/contextMenu/RectContextMenu.js';
 import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/PathContextMenu.js';
+import { SeperatorContextMenu } from '../widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js';
+import { ZoomToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -124,10 +126,14 @@ export function createDefaultServiceContainer() {
     serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),
+        new SeperatorContextMenu(),
+        new ZoomToElementContextMenu(),
+        new SeperatorContextMenu(),
         new ZMoveContextMenu(),
         new MultipleItemsSelectedContextMenu(),
         new PathContextMenu(),
         new RectContextMenu(),
+        new SeperatorContextMenu(),
         new ItemsBelowContextMenu(),
     ];
     return serviceContainer;

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -68,11 +68,12 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             }
             else if (designItem.hasContent) {
                 indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+                //this._conditionalyWriteNewline(indentedTextWriter, designItem);
             }
             if (!DomConverter.IsSelfClosingElement(designItem.name))
                 indentedTextWriter.write('</' + designItem.name + '>');
-            if (!contentSingleTextNode)
-                this._conditionalyWriteNewline(indentedTextWriter, designItem);
+            //if (!contentSingleTextNode)
+            this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
         if (designItemsAssignmentList) {
             designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -1,4 +1,6 @@
 import { CommandType } from "../../../commandHandling/CommandType.js";
+import { ArrangeHelper } from "../../helper/ArrangeHelper.js";
+import { Orientation } from "../../../enums/Orientation.js";
 export class DefaultModelCommandService {
     canExecuteCommand(designerCanvas, command) {
         if (command.type == CommandType.moveBackward ||
@@ -33,21 +35,23 @@ export class DefaultModelCommandService {
             sel.parent.insertChild(sel, 0);
         else if (command.type == CommandType.moveToFront)
             sel.parent.insertChild(sel);
+        else if (command.type == CommandType.arrangeTop) {
+            ArrangeHelper.arrangeElements(Orientation.TOP, designerCanvas);
+        }
+        else if (command.type == CommandType.arrangeRight) {
+            ArrangeHelper.arrangeElements(Orientation.RIGHT, designerCanvas);
+        }
         else if (command.type == CommandType.arrangeLeft) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeLeft');
-            const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('left', left);
-            }
-            grp.commit();
+            ArrangeHelper.arrangeElements(Orientation.LEFT, designerCanvas);
         }
-        else if (command.type == CommandType.arrangeTop) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeTop');
-            const top = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('top');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('top', top);
-            }
-            grp.commit();
+        else if (command.type == CommandType.arrangeBottom) {
+            ArrangeHelper.arrangeElements(Orientation.BOTTOM, designerCanvas);
+        }
+        else if (command.type == CommandType.arrangeCenter) {
+            ArrangeHelper.arrangeElements(Orientation.HORIZONTAL_CENTER, designerCanvas);
+        }
+        else if (command.type == CommandType.arrangeMiddle) {
+            ArrangeHelper.arrangeElements(Orientation.VERTICAL_CENTER, designerCanvas);
         }
         else if (command.type == CommandType.unifyHeight) {
             const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyHeight');

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -104,10 +104,10 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     }
     setSelection(position) {
         let model = this._monacoEditor.getModel();
-        let point2 = model.getPositionAt(position.start);
-        let point1 = model.getPositionAt(position.start + position.length);
+        let point1 = model.getPositionAt(position.start);
+        let point2 = model.getPositionAt(position.start + position.length);
         this._monacoEditor.setSelection({ startLineNumber: point1.lineNumber, startColumn: point1.column, endLineNumber: point2.lineNumber, endColumn: point2.column });
-        this._monacoEditor.revealLineInCenter(point2.lineNumber);
+        setTimeout(() => this._monacoEditor.revealLine(point1.lineNumber), 20);
     }
 }
 customElements.define('node-projects-code-view-monaco', CodeViewMonaco);

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

@@ -39,5 +39,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     elementFromPoint(x: number, y: number): Element;
     getItemsBelowMouse(event: MouseEvent): Element[];
     zoomTowardsPoint(point: IPoint, scalechange: number): void;
+    zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): void;
 }

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

@@ -31,6 +31,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _zoomFactor;
     private _scaleFactor;
     private _canvasOffset;
+    private _currentContextMenu;
     private _lastPointerDownHandler;
     get zoomFactor(): number;
     set zoomFactor(value: number);
@@ -45,7 +46,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _canvasContainer;
     private _outercanvas2;
     private _lastHoverDesignItem;
-    private _onContextMenuBound;
     private _pointerEventHandlerBound;
     private _firstConnect;
     private _onKeyDownBound;
@@ -81,7 +81,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _onDragLeave;
     private _onDragOver;
     private _onDrop;
-    private _onContextMenu;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
     private _onDblClick;
     private onKeyUp;
@@ -100,5 +99,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     removeOverlay(element: SVGGraphicsElement): void;
     getItemsBelowMouse(event: MouseEvent): Element[];
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
+    zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     zoomTowardsPoint(canvasPoint: IPoint, newZoom: number): void;
 }

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

@@ -39,6 +39,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
     _canvasOffset = { x: 0, y: 0 };
+    _currentContextMenu;
     _lastPointerDownHandler;
     get zoomFactor() {
         return this._zoomFactor;
@@ -70,7 +71,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _canvasContainer;
     _outercanvas2;
     _lastHoverDesignItem;
-    _onContextMenuBound;
     _pointerEventHandlerBound;
     _firstConnect;
     _onKeyDownBound;
@@ -166,9 +166,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
         this._onDblClickBound = this._onDblClick.bind(this);
-        this._onContextMenuBound = this._onContextMenu.bind(this);
         this._pointerEventHandlerBound = this._pointerEventHandler.bind(this);
-        this.clickOverlay.oncontextmenu = this._onContextMenuBound;
+        this.clickOverlay.oncontextmenu = (e) => e.preventDefault();
     }
     get designerWidth() {
         return this._canvasContainer.style.width;
@@ -395,6 +394,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer.style.bottom = this._outercanvas2.offsetHeight >= this._canvasContainer.offsetHeight ? '0' : '';
         this._canvasContainer.style.right = this._outercanvas2.offsetWidth >= this._canvasContainer.offsetWidth ? '0' : '';
         this._updateTransform();
+        this._fillCalculationrects();
         this.onZoomFactorChanged.emit(this._zoomFactor);
     }
     _updateTransform() {
@@ -514,30 +514,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             }
         }
     }
-    _onContextMenu(event) {
-        event.preventDefault();
-        if (!event.shiftKey) {
-            let items = this.getItemsBelowMouse(event);
-            if (items.indexOf(this.instanceServiceContainer.selectionService.primarySelection.element) >= 0)
-                this.showDesignItemContextMenu(this.instanceServiceContainer.selectionService.primarySelection, event);
-            else {
-                const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
-                if (!this.instanceServiceContainer.selectionService.isSelected(designItem)) {
-                    this.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
-                }
-                this.showDesignItemContextMenu(designItem, event);
-            }
-        }
-    }
     showDesignItemContextMenu(designItem, event) {
+        this._currentContextMenu?.close();
         const mnuItems = [];
         for (let cme of this.serviceContainer.designerContextMenuExtensions) {
             if (cme.shouldProvideContextmenu(event, this, designItem, 'designer')) {
                 mnuItems.push(...cme.provideContextMenuItems(event, this, designItem));
             }
         }
-        let ctxMnu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
-        return ctxMnu;
+        this._currentContextMenu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
+        return this._currentContextMenu;
     }
     _onDblClick(event) {
         event.preventDefault();
@@ -692,8 +678,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
-        if (event.buttons == 2)
-            return;
         let currentElement;
         if (forceElement)
             currentElement = forceElement;
@@ -808,7 +792,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             x: (rect.width / 2) + rect.x,
             y: (rect.height / 2) + rect.y
         };
-        this.zoomTowardsPoint(rectCenter, zoomFactor);
+        this.zoomPoint(rectCenter, zoomFactor);
+    }
+    zoomPoint(canvasPoint, newZoom) {
+        this.zoomFactor = newZoom;
+        const newCanvasOffset = {
+            x: -(canvasPoint.x) + this.outerRect.width / this.zoomFactor / 2,
+            y: -(canvasPoint.y) + this.outerRect.height / this.zoomFactor / 2
+        };
+        this.canvasOffset = newCanvasOffset;
     }
     zoomTowardsPoint(canvasPoint, newZoom) {
         const scaleChange = newZoom / this.zoomFactor;

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js

@@ -35,13 +35,9 @@ export class EditTextWithStyloExtension extends AbstractExtension {
         this.overlays.push(foreignObject);
         this._drawClickOverlayRects();
         this._rect1.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect1.addEventListener('pointerup', (e) => this._clickOutside(e));
         this._rect2.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect2.addEventListener('pointerup', (e) => this._clickOutside(e));
         this._rect3.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect3.addEventListener('pointerup', (e) => this._clickOutside(e));
         this._rect4.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect4.addEventListener('pointerup', (e) => this._clickOutside(e));
         requestAnimationFrame(() => {
             const stylo = foreignObject.querySelector('stylo-editor');
             //@ts-ignore

package/dist/elements/widgets/designerView/extensions/ResizeExtension.d.ts

@@ -16,7 +16,7 @@ export declare class ResizeExtension extends AbstractExtension {
     private _circle6;
     private _circle7;
     private _circle8;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem, resizeAllSelected: boolean);
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem, resizeAllSelected: boolean);
     extend(): void;
     refresh(): void;
     _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;

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

@@ -1,4 +1,5 @@
 import { EventNames } from "../../../../enums/EventNames";
+import { convertCoordinates, getDomMatrix } from "../../../helper/TransformHelper.js";
 import { AbstractExtension } from './AbstractExtension';
 export class ResizeExtension extends AbstractExtension {
     resizeAllSelected;
@@ -14,8 +15,8 @@ export class ResizeExtension extends AbstractExtension {
     _circle6;
     _circle7;
     _circle8;
-    constructor(extensionManager, designerView, extendedItem, resizeAllSelected) {
-        super(extensionManager, designerView, extendedItem);
+    constructor(extensionManager, designerCanvas, extendedItem, resizeAllSelected) {
+        super(extensionManager, designerCanvas, extendedItem);
         this.resizeAllSelected = resizeAllSelected;
     }
     extend() {
@@ -88,39 +89,41 @@ export class ResizeExtension extends AbstractExtension {
                     const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                     let trackX = diff.x - this._initialPoint.x - this._offsetPoint.x;
                     let trackY = diff.y - this._initialPoint.y - this._offsetPoint.y;
+                    let matrix = getDomMatrix(this.extendedItem.element);
+                    let transformedTrack = convertCoordinates({ x: trackX, y: trackY }, matrix);
                     let i = 0;
                     switch (this._actionModeStarted) {
                         case 'se-resize':
-                            this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
-                            this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
+                            this.extendedItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
+                            this.extendedItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
                             if (this.resizeAllSelected) {
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     i++;
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
-                                        designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
+                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
                                     }
                                 }
                             }
                             break;
                         case 's-resize':
-                            this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
+                            this.extendedItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'e-resize':
-                            this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
+                            this.extendedItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
+                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
                                     }
                                 }
                             }

package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu copy.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class CopyPasteContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu copy.js

@@ -0,0 +1,15 @@
+import { CommandType } from "../../../../../commandHandling/CommandType";
+export class CopyPasteContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); }, shortCut: 'Ctrl + C' },
+            { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); }, shortCut: 'Ctrl + X' },
+            { title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); }, shortCut: 'Ctrl + V' },
+            { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); }, shortCut: 'Del' },
+            { title: '-' }
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js

@@ -5,11 +5,10 @@ export class CopyPasteContextMenu {
     }
     provideContextMenuItems(event, designerView, designItem) {
         return [
-            { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); } },
-            { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); } },
-            { title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); } },
-            { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); } },
-            { title: '-' }
+            { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); }, shortCut: 'Ctrl + C' },
+            { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); }, shortCut: 'Ctrl + X' },
+            { title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); }, shortCut: 'Ctrl + V' },
+            { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); }, shortCut: 'Del' },
         ];
     }
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js

@@ -7,7 +7,7 @@ export class ItemsBelowContextMenu {
         const lstItems = designerCanvas.getItemsBelowMouse(event);
         if (lstItems.length > 0) {
             //TODO: create a submenu 'select items below...'
-            return [{ title: '-' }, ...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))];
+            return [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))];
         }
         return [];
     }

package/dist/elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js

@@ -9,7 +9,6 @@ export class RectContextMenu {
     }
     provideContextMenuItems(event, designerCanvas, designItem) {
         return [
-            { title: '-' },
             {
                 title: 'convert to path', action: () => {
                     let rect = designItem.element;

package/dist/elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class SeperatorContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js

@@ -0,0 +1,10 @@
+export class SeperatorContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: '-' }
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu copy.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class ZMoveContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu copy.js

@@ -0,0 +1,14 @@
+import { CommandType } from "../../../../../commandHandling/CommandType";
+export class ZMoveContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: 'to front', action: () => { designerView.executeCommand({ type: CommandType.moveToFront }); } },
+            { title: 'move forward', action: () => { designerView.executeCommand({ type: CommandType.moveForward }); } },
+            { title: 'move backward', action: () => { designerView.executeCommand({ type: CommandType.moveBackward }); } },
+            { title: 'to back', action: () => { designerView.executeCommand({ type: CommandType.moveToBack }); } },
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class ZoomToElementContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js

@@ -0,0 +1,27 @@
+const offset = 10;
+export class ZoomToElementContextMenu {
+    shouldProvideContextmenu(event, designerCanvas, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [
+            {
+                title: 'zoom to', action: () => {
+                    const coord = designerCanvas.getNormalizedElementCoordinates(designItem.element);
+                    const startPoint = { x: coord.x - offset, y: coord.y - offset };
+                    const endPoint = { x: coord.x + coord.width + offset, y: coord.y + coord.height + offset };
+                    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 = designerCanvas.outerRect.width / rect.width;
+                    let zFactorHeight = designerCanvas.outerRect.height / rect.height;
+                    let zoomFactor = zFactorWidth >= zFactorHeight ? zFactorHeight : zFactorWidth;
+                    designerCanvas.zoomPoint({ x: coord.x + coord.width / 2, y: coord.y + coord.height / 2 }, zoomFactor);
+                }
+            },
+        ];
+    }
+}

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) {

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

@@ -6,7 +6,6 @@ export declare class TextTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     readonly cursor = "text";
-    private _text;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -1,4 +1,7 @@
 import { EventNames } from '../../../../enums/EventNames.js';
+import { DesignItem } from '../../../item/DesignItem.js';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
+import { ExtensionType } from '../extensions/ExtensionType.js';
 export class TextTool {
     constructor() {
     }
@@ -7,26 +10,22 @@ export class TextTool {
     dispose() {
     }
     cursor = 'text';
-    _text;
     pointerEventHandler(designerCanvas, event, currentElement) {
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        //const offset = 50;
-        addEventListener("keyup", function (event) {
-            if (event.key === 'Enter') {
-                console.log("Enter Pressed");
-                event.preventDefault();
-            }
-        });
         switch (event.type) {
             case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                this._text = document.createElementNS("http://www.w3.org/2000/svg", "text");
-                this._text.setAttribute("x", currentPoint.x.toString());
-                this._text.setAttribute("y", currentPoint.y.toString());
-                break;
-            case EventNames.KeyUp:
-                //if(event.key === 'Enter'){
-                //}
+                const span = document.createElement('span');
+                const di = DesignItem.createDesignItemFromInstance(span, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                di.setStyle('position', 'absolute');
+                di.setStyle('left', currentPoint.x + 'px');
+                di.setStyle('top', currentPoint.y + 'px');
+                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                //TODO - don't apply doubleclick extension (maybe it is not the doubleclick one) - apply edit text extesion directly
+                designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick);
+                setTimeout(() => {
+                    span.focus();
+                }, 50);
                 break;
         }
     }

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

@@ -120,8 +120,11 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
             catch (err) {
                 console.warn('Error loading elements', err);
             }
-            //@ts-ignore
-            newNode.updateCounters();
+            try {
+                //@ts-ignore
+                newNode.updateCounters();
+            }
+            catch { }
         }
     }
 }

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

@@ -132,9 +132,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
         this.createTree(value.contentService.rootDesignItem);
     }
     selectionChanged(event) {
-        if (event.selectedElements.length > 0) {
-            this._selectTreeElements(event.selectedElements.map(x => this._mapElementTreeitem.get(x.element)));
-        }
+        this._selectTreeElements(event.selectedElements.map(x => this._mapElementTreeitem.get(x.element)));
     }
     _recomputeTree(parent, activeElement) {
         this._mapElementTreeitem = new Map();

package/dist/elements/widgets/treeView/treeViewExtended.d.ts

@@ -14,6 +14,7 @@ export declare class TreeViewExtended extends BaseCustomWebComponentConstructorA
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
+    _filterNodes(): void;
     _showHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
     _switchHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
     _showLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;

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

@@ -98,12 +98,20 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
         this._filter.onkeyup = () => {
-            let match = this._filter.value;
+            this._filterNodes();
+        };
+        this._treeDiv = this._getDomElement('treetable');
+    }
+    _filterNodes() {
+        let match = this._filter.value;
+        if (match) {
             this._tree.filterNodes((node) => {
                 return new RegExp(match, "i").test(node.title);
             });
-        };
-        this._treeDiv = this._getDomElement('treetable');
+        }
+        else {
+            this._tree.clearFilter();
+        }
     }
     _showHideAtDesignTimeState(img, designItem) {
         if (designItem.hideAtDesignTime)
@@ -337,9 +345,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         this.createTree(value.contentService.rootDesignItem);
     }
     selectionChanged(event) {
-        if (event.selectedElements.length > 0) {
-            this._highlight(event.selectedElements);
-        }
+        this._highlight(event.selectedElements);
     }
     _recomputeTree(rootItem) {
         this._tree.getRootNode().removeChildren();
@@ -347,6 +353,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         this._tree.expandAll();
         //@ts-ignore
         this._tree.getRootNode().updateCounters();
+        this._filterNodes();
     }
     _getChildren(item, currentNode) {
         if (currentNode == null) {

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/dist/index.d.ts

@@ -156,7 +156,11 @@ export type { IContextMenuExtension, ContextmenuInitiator } from "./elements/wid
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/PathContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";
 export type { IDesignerPointerExtension } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js";
 export type { IDesignerPointerExtensionProvider } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";

package/dist/index.js

@@ -116,7 +116,11 @@ export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithS
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/PathContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.89",
+  "version": "0.0.92",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,7 +13,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.5.3",
+    "@node-projects/base-custom-webcomponent": "^0.6.0",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
@@ -21,10 +21,10 @@
     "@node-projects/node-html-parser-esm": "^2.4.1",
     "@papyrs/stylo": "^0.0.8",
     "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.13",
+    "@types/jquery": "^3.5.14",
     "@types/jquery.fancytree": "0.0.7",
     "ace-builds": "^1.4.14",
-    "codemirror": "^5.65.1",
+    "codemirror": "^5.65.2",
     "esprima-next": "^5.8.1",
     "html2canvas": "*",
     "jest": "^27.5.1",