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

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

@@ -103,10 +103,8 @@ export class ContextMenuHelper {
             window.removeEventListener('resize', this._closeBound);
             window.removeEventListener('mousedown', this._closeOnDownBound);
             window.removeEventListener('mouseup', this._closeOnUpBound);
-            if (this._shadowRoot === document)
-                document.body.removeChild(this._element);
-            else
-                this._shadowRoot.removeChild(this._element);
+            if (this._element.parentElement)
+                this._element.parentElement.removeChild(this._element);
         });
     }
     show() {

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/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,6 +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

@@ -99,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

@@ -394,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() {
@@ -791,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/designerView.d.ts

@@ -20,6 +20,8 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
+    zoomReset(): void;
+    zoomToFit(): void;
     private _onScrollbar;
     private _onWheel;
     get designerWidth(): string;

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

@@ -179,38 +179,11 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         };
         let zoomReset = this._getDomElement('zoomReset');
         zoomReset.onclick = () => {
-            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
-            this._designerCanvas.zoomFactor = 1;
-            this._sVert.value = 0.5;
-            this._sHor.value = 0.5;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+            this.zoomReset();
         };
         let zoomFit = this._getDomElement('zoomFit');
         zoomFit.onclick = () => {
-            let maxX = 0, maxY = 0, minX = 0, minY = 0;
-            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
-            this._designerCanvas.zoomFactor = 1;
-            for (let n of DomHelper.getAllChildNodes(this.designerCanvas.rootDesignItem.element)) {
-                if (n instanceof Element) {
-                    const rect = n.getBoundingClientRect();
-                    minX = minX < rect.x ? minX : rect.x;
-                    minY = minY < rect.y ? minY : rect.y;
-                    maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
-                    maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
-                }
-            }
-            const cvRect = this.designerCanvas.getBoundingClientRect();
-            maxX -= cvRect.x;
-            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) + '%';
+            this.zoomToFit();
         };
         this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
         let alignSnap = this._getDomElement('alignSnap');
@@ -225,6 +198,39 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
         this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
     }
+    zoomReset() {
+        this._designerCanvas.canvasOffset = { x: 0, y: 0 };
+        this._designerCanvas.zoomFactor = 1;
+        this._sVert.value = 0.5;
+        this._sHor.value = 0.5;
+        this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+    }
+    zoomToFit() {
+        let maxX = 0, maxY = 0, minX = 0, minY = 0;
+        this._designerCanvas.canvasOffset = { x: 0, y: 0 };
+        this._designerCanvas.zoomFactor = 1;
+        for (let n of DomHelper.getAllChildNodes(this.designerCanvas.rootDesignItem.element)) {
+            if (n instanceof Element) {
+                const rect = n.getBoundingClientRect();
+                minX = minX < rect.x ? minX : rect.x;
+                minY = minY < rect.y ? minY : rect.y;
+                maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
+                maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
+            }
+        }
+        const cvRect = this.designerCanvas.getBoundingClientRect();
+        maxX -= cvRect.x;
+        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) + '%';
+    }
     _onScrollbar(e) {
         if (e?.detail == 'incrementLarge')
             e.target.value += 0.25;

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/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/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.90",
+  "version": "0.0.93",
   "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",