@node-projects/web-component-designer 0.1.70 → 0.1.72

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

@@ -12,7 +12,7 @@ export declare function addVectors(vectorA: [number, number], vectorB: [number,
 export declare function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element: HTMLElement, designerCanvas: IDesignerCanvas): DOMPoint;
 export declare function getResultingTransformationBetweenElementAndAllAncestors(element: HTMLElement, ancestor: HTMLElement, excludeAncestor?: boolean, cache?: Record<string | symbol, any>): DOMMatrix;
 export declare function getByParentsTransformedPointRelatedToCanvas(element: HTMLElement, point: DOMPoint, designerCanvas: IDesignerCanvas, cache?: Record<string | symbol, any>): IPoint;
-export declare function getDesignerCanvasNormalizedTransformedPoint(element: HTMLElement, point: IPoint, designerCanvas: IDesignerCanvas): IPoint;
+export declare function getDesignerCanvasNormalizedTransformedPoint(element: HTMLElement, point: IPoint, designerCanvas: IDesignerCanvas, cache: Record<string | symbol, any>): IPoint;
 export declare function getElementSize(element: HTMLElement): {
     width: number;
     height: number;

package/dist/elements/helper/TransformHelper.js

@@ -177,8 +177,8 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
     }
     return byParentTransformedPointRelatedToCanvas;
 }
-export function getDesignerCanvasNormalizedTransformedPoint(element, point, designerCanvas) {
-    return getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, { x: -point.x, y: -point.y }, designerCanvas)[0];
+export function getDesignerCanvasNormalizedTransformedPoint(element, point, designerCanvas, cache) {
+    return getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, { x: -point.x, y: -point.y }, designerCanvas, cache)[0];
 }
 export function getElementSize(element) {
     let width = element.offsetWidth;

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

@@ -120,8 +120,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     * {
       touch-action: none;
     }
-    #node-projects-designer-canvas-canvas {
+    #node-projects-designer-canvas-canvasContainer {
       background: var(--node-projects-web-component-designer-background, border-box fixed 0px 0px repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAFXmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjIwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMjAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIyMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMjAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjMwMC8xIgogICB0aWZmOllSZXNvbHV0aW9uPSIzMDAvMSIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMi0xMi0wOFQwOToxNTo0OCswMTowMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0xMi0wOFQwOToxNTo0OCswMTowMCI+CiAgIDxkYzp0aXRsZT4KICAgIDxyZGY6QWx0PgogICAgIDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+QmFja2dyb3VuZGdyaWRfMTBweDwvcmRmOmxpPgogICAgPC9yZGY6QWx0PgogICA8L2RjOnRpdGxlPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS4xMC42IgogICAgICBzdEV2dDp3aGVuPSIyMDIyLTEyLTA4VDA5OjE1OjQ4KzAxOjAwIi8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz4fvgn+AAABgWlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8GjRhRLCiLl7BCftTExmLkV2ExnvJr8+bNvBk1b+b13kiyVbaKEhu/FvwFbJW1UkRKlrImNug5b2ZqJplzO/d87vfec7r3XPCpSd10KnrATGXs8FhImZtfUPwvBKjCTx/Nmu5YUzOjKiXt854yL952ebVKn/vXaqIxR4eyKuEh3bIzwuPCk6sZy+Md4UY9oUWFz4Q7bbmg8J2nR3L86nE8x98e22p4GHz1wkq8iCNFrCdsU1heTpuZXNHz9/FeEoilZmcktoq34BBmjBAKE4wwTJBeBmUO0iX96ZYVJfJ7svnTpCVXl9liDZtl4iTI0CnqilSPSTREj8lIsub1/29fHaO/L1c9EILKZ9d9bwf/Nvxsue7Xkev+HEP5E1ymCvnpQxj4EH2roLUdQN0GnF8VtMguXGxC06Ol2VpWKhf3GQa8nULtPDTcQPVirmf5fU4eQF2Xr7qGvX3okPN1S790cWfsRnax1QAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAC9JREFUOI1jfPr0KQNuICUlhUeWCY8cQTCqeWRoZvz//z8e6WfPntHK5lHNI0MzAMChCNMTuPcnAAAAAElFTkSuQmCC));
+    }
+    #node-projects-designer-canvas-canvas {
       image-rendering: pixelated;
       box-sizing: border-box;
       width: 100%;
@@ -341,21 +343,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 .getStylesheets()
                 .map(x => cssFromString(x.content)));
         }
-        let backgroundSet = false;
-        for (const s of styles) {
-            for (let r of s.cssRules) {
-                if (r instanceof CSSStyleRule) {
-                    if (r.selectorText.split(',').includes(':host')) {
-                        if (r.style.background) {
-                            this._canvas.style.background = r.style.background;
-                            backgroundSet = true;
-                        }
-                    }
-                }
-            }
-        }
-        if (!backgroundSet)
-            this._canvas.style.background = '';
         this._canvasShadowRoot.adoptedStyleSheets = styles;
     }
     /* --- start IUiCommandHandler --- */
@@ -442,10 +429,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     disableBackgroud() {
-        this._canvas.style.backgroundImage = 'none';
+        this._canvasContainer.style.backgroundImage = 'none';
     }
     enableBackground() {
-        this._canvas.style.backgroundImage = 'var(--node-projects-web-component-designer-background)';
+        this._canvasContainer.style.backgroundImage = 'var(--node-projects-web-component-designer-background)';
     }
     zoomToFit() {
         const autoZomOffset = 10;

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

@@ -9,4 +9,5 @@ export declare abstract class AbstractExtension extends AbstractExtensionBase im
     abstract extend(cache: Record<string | symbol, any>, event?: Event): any;
     abstract refresh(cache: Record<string | symbol, any>, event?: Event): any;
     abstract dispose(): any;
+    remove(): void;
 }

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

@@ -5,4 +5,7 @@ export class AbstractExtension extends AbstractExtensionBase {
         super(extensionManager, designerView);
         this.extendedItem = extendedItem;
     }
+    remove() {
+        this.extensionManager.removeExtensionInstance(this.extendedItem, this);
+    }
 }

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

@@ -12,6 +12,7 @@ export declare class ExtensionManager implements IExtensionManager {
     private _selectedElementsChanged;
     applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
     applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): void;
+    removeExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension): void;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
     removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): void;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): void;

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

@@ -133,6 +133,24 @@ export class ExtensionManager {
         }
         this.designerCanvas.overlayLayer.endBatch();
     }
+    removeExtensionInstance(designItem, extension) {
+        for (let e of designItem.appliedDesignerExtensions) {
+            const idx = e[1].indexOf(extension);
+            if (idx >= 0) {
+                try {
+                    extension.dispose();
+                }
+                catch (err) {
+                    console.error(err);
+                }
+                e[1].splice(idx, 1);
+                if (e[1].length == 0)
+                    designItem.appliedDesignerExtensions.delete(e[0]);
+                if (!designItem.appliedDesignerExtensions.size)
+                    this.designItemsWithExtentions.delete(designItem);
+            }
+        }
+    }
     removeExtension(designItem, extensionType) {
         if (designItem) {
             if (extensionType) {
@@ -218,15 +236,20 @@ export class ExtensionManager {
     refreshExtension(designItem, extensionType, event) {
         if (designItem) {
             if (extensionType) {
-                let exts = designItem.appliedDesignerExtensions.get(extensionType);
-                if (exts) {
-                    const cache = {};
-                    for (let e of exts) {
-                        try {
-                            e.refresh(cache, event);
-                        }
-                        catch (err) {
-                            console.error(err);
+                if (!designItem.element.isConnected) {
+                    this.removeExtension(designItem, extensionType);
+                }
+                else {
+                    let exts = designItem.appliedDesignerExtensions.get(extensionType);
+                    if (exts) {
+                        const cache = {};
+                        for (let e of exts) {
+                            try {
+                                e.refresh(cache, event);
+                            }
+                            catch (err) {
+                                console.error(err);
+                            }
                         }
                     }
                 }
@@ -253,22 +276,27 @@ export class ExtensionManager {
             if (extensionType) {
                 const cache = {};
                 outer1: for (let i of designItems) {
-                    let exts = i.appliedDesignerExtensions.get(extensionType);
-                    if (exts) {
-                        for (let e of exts) {
-                            try {
-                                if (e != ignoredExtension)
-                                    e.refresh(cache, event);
-                                if (timeout) {
-                                    const end = performance.now();
-                                    if (end - start > timeout) {
-                                        console.warn("refreshExtensions() took too long, stopped refreshing");
-                                        break outer1;
+                    if (!i.element.isConnected) {
+                        this.removeExtension(i, extensionType);
+                    }
+                    else {
+                        let exts = i.appliedDesignerExtensions.get(extensionType);
+                        if (exts) {
+                            for (let e of exts) {
+                                try {
+                                    if (e != ignoredExtension)
+                                        e.refresh(cache, event);
+                                    if (timeout) {
+                                        const end = performance.now();
+                                        if (end - start > timeout) {
+                                            console.warn("refreshExtensions() took too long, stopped refreshing");
+                                            break outer1;
+                                        }
                                     }
                                 }
-                            }
-                            catch (err) {
-                                console.error(err);
+                                catch (err) {
+                                    console.error(err);
+                                }
                             }
                         }
                     }

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

@@ -6,6 +6,7 @@ export interface IExtensionManager {
     applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): any;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
     removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): any;
+    removeExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension): any;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): any;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension, timeout?: number): any;
     refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): any;

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

@@ -28,6 +28,10 @@ export class ResizeExtension extends AbstractExtension {
     refresh(cache, event) {
         //#region Resizer circles
         let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
+        if (isNaN(transformedCornerPoints[0].x) || isNaN(transformedCornerPoints[1].x)) {
+            this.remove();
+            return;
+        }
         this._circle1 = this._drawResizerOverlay(transformedCornerPoints[0].x, transformedCornerPoints[0].y, 'nw-resize', this._circle1);
         this._circle2 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[1].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[1].y - transformedCornerPoints[0].y) / 2), 'n-resize', this._circle2);
         this._circle3 = this._drawResizerOverlay(transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'ne-resize', this._circle3);

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

@@ -10,9 +10,9 @@ export declare class RotateExtension extends AbstractExtension {
     private _textAngle;
     private _actualRotationAngle;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    _drawRotateOverlay(itemRect: DOMRect, oldRotateIcon: any): any;
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
+    _drawRotateOverlay(itemRect: DOMRect, oldRotateIcon: any, cache: Record<string | symbol, any>): any;
     _pointerActionTypeRotate(event: PointerEvent): void;
     dispose(): void;
 }

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

@@ -11,17 +11,21 @@ export class RotateExtension extends AbstractExtension {
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
-    extend() {
-        this.refresh();
+    extend(cache, event) {
+        this.refresh(cache, event);
     }
-    refresh() {
+    refresh(cache, event) {
         const rect = this.extendedItem.element.getBoundingClientRect();
         this._actualRotationAngle = getRotationAngleFromMatrix(null, new DOMMatrix(this.extendedItem.element.style.transform));
-        this._rotateIcon = this._drawRotateOverlay(rect, this._rotateIcon);
+        this._rotateIcon = this._drawRotateOverlay(rect, this._rotateIcon, cache);
     }
-    _drawRotateOverlay(itemRect, oldRotateIcon) {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 10, y: 10 }, this.designerCanvas);
+    _drawRotateOverlay(itemRect, oldRotateIcon, cache) {
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 10, y: 10 }, this.designerCanvas, cache);
         let rotateIconPosition = transformedCornerPoints[0];
+        if (isNaN(transformedCornerPoints[0].x) || isNaN(transformedCornerPoints[1].x)) {
+            this.remove();
+            return;
+        }
         if (!oldRotateIcon) {
             const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
             const line = document.createElementNS("http://www.w3.org/2000/svg", "circle");

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

@@ -20,6 +20,10 @@ export class SelectionDefaultExtension extends AbstractExtension {
         }
         else
             transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
+        if (isNaN(transformedCornerPoints[0].x) || isNaN(transformedCornerPoints[1].x)) {
+            this.remove();
+            return;
+        }
         this._line1 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'svg-selection', this._line1);
         this._line2 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, 'svg-selection', this._line2);
         this._line3 = this._drawLine(transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'svg-selection', this._line3);

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

@@ -8,8 +8,8 @@ export declare class TransformOriginExtension extends AbstractExtension {
     private _circle2;
     private _oldValue;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
     pointerEvent(event: PointerEvent): void;
-    refresh(): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
     dispose(): void;
 }

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

@@ -10,10 +10,14 @@ export class TransformOriginExtension extends AbstractExtension {
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
-    extend() {
+    extend(cache, event) {
         const computed = getComputedStyle(this.extendedItem.element);
         const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
-        const toDOMPoint = getDesignerCanvasNormalizedTransformedPoint(this.extendedItem.element, { x: parseFloat(to[0]) * this.designerCanvas.zoomFactor, y: parseFloat(to[1]) * this.designerCanvas.zoomFactor }, this.designerCanvas);
+        const toDOMPoint = getDesignerCanvasNormalizedTransformedPoint(this.extendedItem.element, { x: parseFloat(to[0]) * this.designerCanvas.zoomFactor, y: parseFloat(to[1]) * this.designerCanvas.zoomFactor }, this.designerCanvas, cache);
+        if (isNaN(toDOMPoint.x) || isNaN(toDOMPoint.y)) {
+            this.remove();
+            return;
+        }
         this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
         this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         this._circle.style.cursor = 'pointer';
@@ -78,15 +82,17 @@ export class TransformOriginExtension extends AbstractExtension {
                     }
                     else
                         this.extendedItem.updateStyleInSheetOrLocal('transform-origin', newX + 'px' + ' ' + newY + 'px');
-                    this.refresh();
+                    this.refresh(null, null);
                     this._startPos = null;
                 }
                 break;
         }
     }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
+    refresh(cache, event) {
+        if (this._circle) {
+            this._removeAllOverlays();
+            this.extend(cache, event);
+        }
     }
     dispose() {
         this._removeAllOverlays();

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",