@node-projects/web-component-designer 0.0.82 → 0.0.83

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -54,6 +54,7 @@ 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 { IframeExtensionProvider } from '../widgets/designerView/extensions/IframeExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -76,8 +77,9 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
     serviceContainer.register("demoProviderService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
-        new ResizeExtensionProvider(false),
-        new InvisibleDivExtensionProvider()
+        // new ResizeExtensionProvider(false),
+        new InvisibleDivExtensionProvider(),
+        new IframeExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new PrimarySelectionDefaultExtensionProvider(),

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

@@ -20,7 +20,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     constructor() {
         super();
         //@ts-ignore
-        import("/codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        import("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this.style.display = 'block';
         this._editor = this._getDomElement('textarea');
     }

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

@@ -138,10 +138,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
-        this.instanceServiceContainer = new InstanceServiceContainer(this);
-        this.instanceServiceContainer.register("undoService", new UndoService(this));
-        this.instanceServiceContainer.register("selectionService", new SelectionService);
-        this.extensionManager = new ExtensionManager(this);
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
         this._onDblClickBound = this._onDblClick.bind(this);
@@ -307,8 +303,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     initialize(serviceContainer) {
         this.serviceContainer = serviceContainer;
+        this.instanceServiceContainer = new InstanceServiceContainer(this);
+        this.instanceServiceContainer.register("undoService", new UndoService(this));
+        this.instanceServiceContainer.register("selectionService", new SelectionService);
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
         this.instanceServiceContainer.register("contentService", new ContentService(this.rootDesignItem));
+        this.extensionManager = new ExtensionManager(this);
         this.overlayLayer = new OverlayLayerView(serviceContainer);
         this.overlayLayer.style.pointerEvents = 'none';
         this._canvasContainer.appendChild(this.overlayLayer);
@@ -364,6 +364,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.snapLines.clearSnaplines();
     }
     setDesignItems(designItems) {
+        this._fillCalculationrects();
         this.instanceServiceContainer.undoService.clear();
         this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);

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

@@ -68,6 +68,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       background-color:rgba(164,206,249,.6);
     }
     #outer {
+      user-select: none;
       display: flex;
       flex-direction: column;
       width: 100%;
@@ -274,7 +275,9 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     }
     getHTML(designItemsAssignmentList) {
         //this.instanceServiceContainer.selectionService.setSelectedElements(null);
-        return DomConverter.ConvertToString([...this._designerCanvas.rootDesignItem.children()], designItemsAssignmentList);
+        if (this._designerCanvas.rootDesignItem.childCount > 0)
+            return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), designItemsAssignmentList);
+        return '';
     }
     async parseHTML(html) {
         const parserService = this.serviceContainer.htmlParserService;

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

@@ -3,11 +3,12 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { ExtensionType } from './ExtensionType';
 import { IExtensionManager } from "./IExtensionManger";
 export declare class ExtensionManager implements IExtensionManager {
-    designerView: IDesignerCanvas;
-    constructor(designerView: IDesignerCanvas);
+    designerCanvas: IDesignerCanvas;
+    constructor(designerCanvas: IDesignerCanvas);
+    private _contentChanged;
     private _selectedElementsChanged;
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType): void;
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType): void;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): void;
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): void;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;

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

@@ -1,16 +1,32 @@
 import { DesignItem } from "../../../item/DesignItem";
 import { ExtensionType } from './ExtensionType';
 export class ExtensionManager {
-    designerView;
-    constructor(designerView) {
-        this.designerView = designerView;
-        designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));
-        //TODO: Create Permanent Extensions. We need a Event for new DesignItem Added and Removed from DOM
+    designerCanvas;
+    constructor(designerCanvas) {
+        this.designerCanvas = designerCanvas;
+        designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));
+        designerCanvas.instanceServiceContainer.contentService.onContentChanged.on(this._contentChanged.bind(this));
+    }
+    _contentChanged(contentChanged) {
+        switch (contentChanged.changeType) {
+            case 'added':
+                this.applyExtensions(contentChanged.designItems, ExtensionType.Permanent, true);
+                break;
+            case 'moved':
+                this.refreshExtensions(contentChanged.designItems, ExtensionType.Permanent);
+                break;
+            case 'parsed':
+                this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, true);
+                break;
+            case 'removed':
+                this.removeExtensions(contentChanged.designItems, ExtensionType.Permanent);
+                break;
+        }
     }
     _selectedElementsChanged(selectionChangedEvent) {
         if (selectionChangedEvent.oldSelectedElements && selectionChangedEvent.oldSelectedElements.length) {
             if (selectionChangedEvent.oldSelectedElements[0].parent) {
-                const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerView.serviceContainer, this.designerView.instanceServiceContainer);
+                const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
                 this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
                 this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelection);
                 this.removeExtensions(selectionChangedEvent.oldSelectedElements, ExtensionType.Selection);
@@ -19,21 +35,21 @@ export class ExtensionManager {
         if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
             this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection);
             this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection);
-            const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, this.designerView.serviceContainer, this.designerView.instanceServiceContainer);
+            const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
             this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
         }
         this.refreshExtensions(selectionChangedEvent.selectedElements);
     }
-    applyExtension(designItem, extensionType) {
+    applyExtension(designItem, extensionType, recursive = false) {
         if (designItem) {
-            const extProv = this.designerView.serviceContainer.designerExtensions.get(extensionType);
+            const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
             if (extProv) {
                 for (let e of extProv) {
-                    if (e.shouldExtend(this, this.designerView, designItem)) {
+                    if (e.shouldExtend(this, this.designerCanvas, designItem)) {
                         let appE = designItem.appliedDesignerExtensions.get(extensionType);
                         if (!appE)
                             appE = [];
-                        const ext = e.getExtension(this, this.designerView, designItem);
+                        const ext = e.getExtension(this, this.designerCanvas, designItem);
                         try {
                             ext.extend();
                         }
@@ -45,19 +61,24 @@ export class ExtensionManager {
                     }
                 }
             }
+            if (recursive) {
+                for (const d of designItem.children()) {
+                    this.applyExtension(d, extensionType, recursive);
+                }
+            }
         }
     }
-    applyExtensions(designItems, extensionType) {
+    applyExtensions(designItems, extensionType, recursive = false) {
         if (designItems) {
-            const extProv = this.designerView.serviceContainer.designerExtensions.get(extensionType);
+            const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
             if (extProv) {
                 for (let e of extProv) {
                     for (let i of designItems) {
-                        if (e.shouldExtend(this, this.designerView, i)) {
+                        if (e.shouldExtend(this, this.designerCanvas, i)) {
                             let appE = i.appliedDesignerExtensions.get(extensionType);
                             if (!appE)
                                 appE = [];
-                            const ext = e.getExtension(this, this.designerView, i);
+                            const ext = e.getExtension(this, this.designerCanvas, i);
                             try {
                                 ext.extend();
                             }
@@ -70,6 +91,11 @@ export class ExtensionManager {
                     }
                 }
             }
+            if (recursive) {
+                for (const d of designItems) {
+                    this.applyExtensions(Array.from(d.children()), extensionType, recursive);
+                }
+            }
         }
     }
     removeExtension(designItem, extensionType) {

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

@@ -1,8 +1,8 @@
 import { IDesignItem } from "../../../item/IDesignItem";
 import { ExtensionType } from './ExtensionType';
 export interface IExtensionManager {
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType): any;
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType): any;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): any;
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): any;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;

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

@@ -0,0 +1,11 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class IframeExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    _pointerEvent(event: PointerEvent): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,46 @@
+import { AbstractExtension } from './AbstractExtension';
+export class IframeExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        // forward events to designer, so iframe is selectable via click
+        let iframe = this.extendedItem.element;
+        iframe.contentWindow.onpointerdown = (e) => this._pointerEvent(e);
+        iframe.contentWindow.onpointermove = (e) => this._pointerEvent(e);
+        iframe.contentWindow.onpointerup = (e) => this._pointerEvent(e);
+    }
+    _pointerEvent(event) {
+        const rect = this.extendedItem.element.getBoundingClientRect();
+        const that = this;
+        const handler = {
+            get(target, property) {
+                switch (property) {
+                    case 'composedPath':
+                        return () => [that.extendedItem.element];
+                    case 'x':
+                    case 'clientX':
+                    case 'offsetX':
+                    case 'pageX':
+                        return target[property] + rect.x;
+                    case 'y':
+                    case 'clientY':
+                    case 'offsetY':
+                    case 'pageY':
+                        return target[property] + rect.y;
+                }
+                return target[property];
+            }
+        };
+        event.preventDefault();
+        event.stopPropagation();
+        const proxy = new Proxy(event, handler);
+        //@ts-ignore
+        this.designerCanvas._pointerEventHandlerBound(proxy);
+    }
+    refresh() {
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,9 @@
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class IframeExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

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

@@ -0,0 +1,9 @@
+import { IframeExtension } from "./IframeExtension.js";
+export class IframeExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        return designItem.name == 'iframe';
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new IframeExtension(extensionManager, designerCanvas, designItem);
+    }
+}

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

@@ -4,7 +4,7 @@ import { AbstractExtension } from './AbstractExtension';
 import { IExtensionManager } from "./IExtensionManger";
 export declare class InvisibleDivExtension extends AbstractExtension {
     private _rect;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;
     dispose(): void;

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

@@ -1,8 +1,8 @@
 import { AbstractExtension } from './AbstractExtension';
 export class InvisibleDivExtension extends AbstractExtension {
     _rect;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
+    constructor(extensionManager, designerCanvas, extendedItem) {
+        super(extensionManager, designerCanvas, extendedItem);
     }
     extend() {
         this.refresh();

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

@@ -4,7 +4,7 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { IDesignerExtension } from "./IDesignerExtension";
 import { IExtensionManager } from "./IExtensionManger";
 export declare class InvisibleDivExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
     readonly style: CSSStyleSheet;
 }

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

@@ -1,15 +1,15 @@
 import { InvisibleDivExtension } from "./InvisibleDivExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class InvisibleDivExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.name == 'div') {
             const st = window.getComputedStyle(designItem.element);
             return st.backgroundColor == 'rgba(0, 0, 0, 0)' && st.borderStyle == 'none';
         }
         return false;
     }
-    getExtension(extensionManager, designerView, designItem) {
-        return new InvisibleDivExtension(extensionManager, designerView, designItem);
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new InvisibleDivExtension(extensionManager, designerCanvas, designItem);
     }
     style = css `
     .svg-invisible-div { stroke: lightgray; fill: transparent; stroke-width: 1;

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

@@ -2,6 +2,7 @@ import { IDesignItem } from "../../../item/IDesignItem";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { AbstractExtension } from "./AbstractExtension";
 import "../../../helper/PathDataPolyfill";
+import { IPoint } from "../../../../interfaces/IPoint";
 import { IExtensionManager } from "./IExtensionManger";
 import { PathData } from "../../../helper/PathDataPolyfill";
 export declare class PathExtension extends AbstractExtension {
@@ -16,6 +17,7 @@ export declare class PathExtension extends AbstractExtension {
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
     _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
     _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
+    _checkCircleIndex(p: PathData, circlePos: IPoint): boolean;
     refresh(): void;
     dispose(): void;
 }

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

@@ -125,6 +125,8 @@ export class PathExtension extends AbstractExtension {
         }
     }
     _drawPathCircle(x, y, p, index) {
+        let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 5, 'svg-path');
+        let circlePos = { x: x, y: y };
         const items = [];
         const pidx = this._pathdata.indexOf(p);
         items.push({
@@ -142,11 +144,19 @@ export class PathExtension extends AbstractExtension {
                 this.extendedItem.setAttribute('d', createPathD(this._pathdata));
             }
         });
-        if (pidx != 0) {
+        if (pidx != 0 && this._checkCircleIndex(p, circlePos)) {
             items.push({
                 title: 'convert to quadratic bézier', action: () => {
-                    const p1x = this._pathdata[pidx - 1].values[0];
-                    const p1y = this._pathdata[pidx - 1].values[1];
+                    let p1x = this._pathdata[pidx - 1].values[0];
+                    let p1y = this._pathdata[pidx - 1].values[1];
+                    if (this._pathdata[pidx - 1].type === 'C') {
+                        p1x = this._pathdata[pidx - 1].values[4];
+                        p1y = this._pathdata[pidx - 1].values[5];
+                    }
+                    else if (this._pathdata[pidx - 1].type === 'Q') {
+                        p1x = this._pathdata[pidx - 1].values[2];
+                        p1y = this._pathdata[pidx - 1].values[3];
+                    }
                     const p2x = this._pathdata[pidx].values[0];
                     const p2y = this._pathdata[pidx].values[1];
                     const mpx = (p2x + p1x) * 0.5;
@@ -164,11 +174,19 @@ export class PathExtension extends AbstractExtension {
                 }
             });
         }
-        if (pidx != 0) {
+        if (pidx != 0 && this._checkCircleIndex(p, circlePos)) {
             items.push({
                 title: 'convert to cubic bézier', action: () => {
-                    const p1x = this._pathdata[pidx - 1].values[0];
-                    const p1y = this._pathdata[pidx - 1].values[1];
+                    let p1x = this._pathdata[pidx - 1].values[0];
+                    let p1y = this._pathdata[pidx - 1].values[1];
+                    if (this._pathdata[pidx - 1].type === 'C') {
+                        p1x = this._pathdata[pidx - 1].values[4];
+                        p1y = this._pathdata[pidx - 1].values[5];
+                    }
+                    else if (this._pathdata[pidx - 1].type === 'Q') {
+                        p1x = this._pathdata[pidx - 1].values[2];
+                        p1y = this._pathdata[pidx - 1].values[3];
+                    }
                     const p2x = this._pathdata[pidx].values[0];
                     const p2y = this._pathdata[pidx].values[1];
                     const mpx = (p2x + p1x) * 0.5;
@@ -192,7 +210,6 @@ export class PathExtension extends AbstractExtension {
                 }
             });
         }
-        let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 5, 'svg-path');
         circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, p, index));
         circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, p, index));
         circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, p, index));
@@ -204,6 +221,24 @@ export class PathExtension extends AbstractExtension {
     _drawPathLine(x1, y1, x2, y2) {
         this._drawLine(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');
     }
+    _checkCircleIndex(p, circlePos) {
+        switch (p.type) {
+            case 'M':
+            case 'L':
+                if (p.values[0] == circlePos.x && p.values[1] == circlePos.y)
+                    return true;
+                break;
+            case 'Q':
+                if (p.values[2] == circlePos.x && p.values[3] == circlePos.y)
+                    return true;
+                break;
+            case 'C':
+                if (p.values[4] == circlePos.x && p.values[5] == circlePos.y)
+                    return true;
+                break;
+        }
+        return false;
+    }
     refresh() {
         this._removeAllOverlays();
         this.extend();

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

@@ -19,6 +19,7 @@ export class ResizeExtension extends AbstractExtension {
         this.resizeAllSelected = resizeAllSelected;
     }
     extend() {
+        this.refresh();
     }
     refresh() {
         const rect = this.extendedItem.element.getBoundingClientRect();
@@ -69,9 +70,13 @@ export class ResizeExtension extends AbstractExtension {
                 this._initialPoint = currentPoint;
                 this._initialSizes = [];
                 this._actionModeStarted = actionMode;
-                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                    let rect = designItem.element.getBoundingClientRect();
-                    this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                let rect = this.extendedItem.element.getBoundingClientRect();
+                this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                if (this.resizeAllSelected) {
+                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                        rect = designItem.element.getBoundingClientRect();
+                        this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                    }
                 }
                 if (this.designerCanvas.alignOnSnap)
                     this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
@@ -90,6 +95,7 @@ export class ResizeExtension extends AbstractExtension {
                             this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + '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';
@@ -100,6 +106,7 @@ export class ResizeExtension extends AbstractExtension {
                         case 's-resize':
                             this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + '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';
@@ -110,6 +117,7 @@ export class ResizeExtension extends AbstractExtension {
                         case 'e-resize':
                             this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + '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';

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

@@ -1,12 +1,13 @@
 import { ResizeExtension } from "./ResizeExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
+import { NodeType } from "../../../item/NodeType.js";
 export class ResizeExtensionProvider {
     resizeAllSelected;
     constructor(resizeAllSelected = false) {
         this.resizeAllSelected = resizeAllSelected;
     }
     shouldExtend(extensionManager, designerView, designItem) {
-        return true;
+        return designItem.nodeType == NodeType.Element;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new ResizeExtension(extensionManager, designerView, designItem, this.resizeAllSelected);

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

@@ -12,6 +12,7 @@ export declare class DrawElementTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     private _onPointerDown;
     private _onPointerMove;
     private _onPointerUp;

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

@@ -29,6 +29,7 @@ export class DrawElementTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
     async _onPointerDown(designerView, event) {
         event.preventDefault();
         this._startPosition = { x: event.x, y: event.y };

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

@@ -12,4 +12,5 @@ export declare class DrawEllipsisTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -88,4 +88,5 @@ export class DrawEllipsisTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

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

@@ -10,4 +10,5 @@ export declare class DrawLineTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -73,4 +73,5 @@ export class DrawLineTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

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

@@ -16,4 +16,5 @@ export declare class DrawPathTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -120,4 +120,5 @@ export class DrawPathTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

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

@@ -15,4 +15,5 @@ export declare class DrawRectTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -103,4 +103,5 @@ export class DrawRectTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

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

@@ -5,4 +5,5 @@ export interface ITool extends IDisposable {
     readonly cursor: string;
     activated(serviceContainer: ServiceContainer): any;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): any;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): any;
 }

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

@@ -6,6 +6,7 @@ export declare class MagicWandSelectorTool implements ITool {
     private _pathD;
     private _path;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
 }

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

@@ -54,6 +54,7 @@ export class MagicWandSelectorTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
     activated(serviceContainer) {
     }
     dispose() {

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

@@ -4,6 +4,7 @@ import { ITool } from './ITool';
 export declare class PanTool implements ITool {
     readonly cursor: string;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
 }

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

@@ -16,6 +16,7 @@ export class PanTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
     activated(serviceContainer) {
     }
     dispose() {

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

@@ -5,5 +5,6 @@ export declare class PickColorTool implements ITool {
     readonly cursor = "crosshair";
     activated(serviceContainer: ServiceContainer): Promise<void>;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): Promise<void>;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     dispose(): void;
 }

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

@@ -14,6 +14,7 @@ export class PickColorTool {
     }
     async pointerEventHandler(designerCanvas, event, currentElement) {
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
     dispose() {
     }
 }

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

@@ -20,4 +20,5 @@ export declare class PointerTool implements ITool {
     private _pointerActionTypeDrawSelection;
     private _resetPointerEventsForClickThrough;
     private _pointerActionTypeDragOrSelect;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -322,4 +322,5 @@ export class PointerTool {
                 }
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

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

@@ -7,5 +7,6 @@ export declare class RectangleSelectorTool implements ITool {
     private _initialPoint;
     activated(serviceContainer: ServiceContainer): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     dispose(): void;
 }

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

@@ -76,6 +76,7 @@ export class RectangleSelectorTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
     dispose() {
     }
 }

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

@@ -8,4 +8,5 @@ export declare class TextTool implements ITool {
     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

@@ -30,4 +30,5 @@ export class TextTool {
                 break;
         }
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

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

@@ -5,5 +5,6 @@ export declare class ZoomTool implements ITool {
     readonly cursor: string;
     activated(serviceContainer: ServiceContainer): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     dispose(): void;
 }

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

@@ -4,6 +4,7 @@ export class ZoomTool {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
     }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
     dispose() {
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.82",
+  "version": "0.0.83",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@node-projects/base-custom-webcomponent": "^0.5.0",
-    "construct-style-sheets-polyfill": "^3.0.5"
+    "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
@@ -22,7 +22,7 @@
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.13",
     "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.4.13",
+    "ace-builds": "^1.4.14",
     "codemirror": "^5.65.1",
     "custom-elements-manifest": "^1.0.0",
     "esprima-next": "^5.8.1",