@node-projects/web-component-designer 0.1.71 → 0.1.73

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/services/placementService/SnaplinesProviderService.js

@@ -1,4 +1,3 @@
-import { DomHelper } from '@node-projects/base-custom-webcomponent';
 export const provideSnaplinesWithDistance = 'provideSnaplinesWithDistance';
 export const provideSnaplinesWithDistanceDistance = 'provideSnaplinesWithDistanceDistance';
 export class SnaplinesProviderService {
@@ -13,8 +12,7 @@ export class SnaplinesProviderService {
             const positionsMiddleH = [];
             const positionsV = [];
             const positionsMiddleV = [];
-            let ignoreElements = ignoredItems.map(x => x.element);
-            for (let n of DomHelper.getAllChildNodes(containerItem.element, false, ignoreElements)) {
+            for (let n of containerItem.querySelectorAll('*')) {
                 if (!ignMap.has(n)) {
                     const p = n.getBoundingClientRect();
                     const pLeft = (p.x - outerRect.x) / canvas.scaleFactor;

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

@@ -439,7 +439,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         let maxX = 0, maxY = 0, minX = 0, minY = 0;
         this.canvasOffset = { x: 0, y: 0 };
         this.zoomFactor = 1;
-        for (let n of DomHelper.getAllChildNodes(this.rootDesignItem.element)) {
+        for (let n of this.rootDesignItem.querySelectorAll('*')) {
             if (n instanceof Element) {
                 const rect = n.getBoundingClientRect();
                 minX = minX < rect.x ? minX : rect.x;

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

@@ -314,7 +314,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._toolbar.initialize(this.serviceContainer, this);
     }
     getHTML() {
-        //this.instanceServiceContainer.selectionService.setSelectedElements(null);
         if (this._designerCanvas.rootDesignItem.childCount > 0) {
             return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), true, true);
         }

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.71",
+  "version": "0.1.73",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",