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

package/dist/elements/helper/ElementHelper.js

@@ -76,7 +76,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             let t = element.style.transform;
             element.style.transform = '';
             const bcEl = element.getBoundingClientRect();
-            const bcPar = element.parentElement.getBoundingClientRect();
+            const bcPar = element.parentElement ? element.parentElement.getBoundingClientRect() : element.getRootNode().host.getBoundingClientRect();
             element.style.transform = t;
             const currLeft = (bcEl.left - bcPar.left) / zoom;
             const currTop = (bcEl.top - bcPar.top) / zoom;
@@ -86,7 +86,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             const cacheEntry = { offsetLeft: currLeft, offsetTop: currTop };
             lst.push(cacheEntry);
             ch.set(element, cacheEntry);
-            element = element.parentElement;
+            element = element.parentElement ? element.parentElement : element.getRootNode().host;
         }
         else if (element instanceof SVGGraphicsElement) {
             let bbox = element.getBBox();
@@ -113,7 +113,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             ch.set(element, cacheEntry);
             offsetLeft += element.offsetLeft;
             offsetTop += element.offsetTop;
-            element = element.offsetParent;
+            element = element.offsetParent ? element.offsetParent : element.getRootNode().host;
         }
     }
     return { offsetLeft: offsetLeft, offsetTop: offsetTop };

package/dist/elements/helper/TransformHelper.js

@@ -1,4 +1,6 @@
 import { getElementsWindowOffsetWithoutSelfAndParentTransformations, getParentElementIncludingSlots } from "./ElementHelper.js";
+//TODO:
+//transform-box
 let identityMatrix = [
     1, 0, 0, 0,
     0, 1, 0, 0,
@@ -150,7 +152,7 @@ export function getResultingTransformationBetweenElementAndAllAncestors(element,
     return originalElementAndAllParentsMultipliedMatrix;
 }
 export function getByParentsTransformedPointRelatedToCanvas(element, point, designerCanvas, cache) {
-    const canvas = element.closest('#node-projects-designer-canvas-canvas');
+    const canvas = designerCanvas.rootDesignItem.node;
     let actualElement = element;
     let parentElementTransformOriginToPointVectorTransformed;
     let byParentTransformedPointRelatedToCanvas = { x: 0, y: 0 };

package/dist/elements/item/DesignItem.d.ts

@@ -73,6 +73,7 @@ export declare class DesignItem implements IDesignItem {
     get lockAtDesignTime(): boolean;
     set lockAtDesignTime(value: boolean);
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
+    querySelectorAll(selectors: string): NodeListOf<HTMLElement>;
     updateChildrenFromNodesChildren(): void;
     constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
     setView(node: Element): void;
@@ -85,7 +86,8 @@ export declare class DesignItem implements IDesignItem {
     updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean, forceSet?: boolean): void;
     getStyleFromSheetOrLocal(name: string, fallback?: string): string;
     getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): string;
-    getComputedStyle(name: string, fallback?: string): string;
+    getComputedStyleProperty(name: string, fallback?: string): string;
+    getComputedStyle(): CSSStyleDeclaration;
     _stylesCache: IStyleRule[];
     _cacheClearTimer: NodeJS.Timeout;
     getAllStyles(): IStyleRule[];

package/dist/elements/item/DesignItem.js

@@ -340,6 +340,14 @@ export class DesignItem {
         designItem.updateChildrenFromNodesChildren();
         return designItem;
     }
+    querySelectorAll(selectors) {
+        if (this.isRootItem) {
+            return this.node.shadowRoot.querySelectorAll(selectors);
+        }
+        else {
+            return this.element.querySelectorAll(selectors);
+        }
+    }
     updateChildrenFromNodesChildren() {
         this._childArray = [];
         if (this.nodeType == NodeType.Element) {
@@ -457,7 +465,7 @@ export class DesignItem {
         }
         return value ?? fallback;
     }
-    getComputedStyle(name, fallback = null) {
+    getComputedStyleProperty(name, fallback = null) {
         let nm = name;
         if (!nm.startsWith('--'))
             nm = PropertiesHelper.camelToDashCase(name);
@@ -467,6 +475,12 @@ export class DesignItem {
         }
         return value ?? fallback;
     }
+    getComputedStyle() {
+        /*if (this.isRootItem) {
+          return window.getComputedStyle((<ShadowRoot>this.node).host);
+        }*/
+        return window.getComputedStyle(this.element);
+    }
     _stylesCache = null;
     _cacheClearTimer;
     getAllStyles() {
@@ -512,7 +526,10 @@ export class DesignItem {
         }
         if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
             this._childArray.push(designItem);
-            if (this.view instanceof HTMLTemplateElement) {
+            if (this.isRootItem) {
+                this.node.shadowRoot.appendChild(designItem.view);
+            }
+            else if (this.view instanceof HTMLTemplateElement) {
                 this.view.content.appendChild(designItem.view);
             }
             else
@@ -520,7 +537,10 @@ export class DesignItem {
         }
         else {
             let el = this._childArray[index];
-            if (this.view instanceof HTMLTemplateElement) {
+            if (this.isRootItem) {
+                this.node.shadowRoot.insertBefore(designItem.view, el.element);
+            }
+            else if (this.view instanceof HTMLTemplateElement) {
                 this.view.content.insertBefore(designItem.view, el.element);
             }
             else

package/dist/elements/item/IDesignItem.d.ts

@@ -72,4 +72,7 @@ export interface IDesignItem {
     hideAtRunTime: boolean;
     lockAtDesignTime: boolean;
     getPlacementService(style?: CSSStyleDeclaration): IPlacementService;
+    getComputedStyleProperty(name: string, fallback: string): string;
+    getComputedStyle(): CSSStyleDeclaration;
+    querySelectorAll(selectors: string): NodeListOf<HTMLElement>;
 }

package/dist/elements/services/dragDropService/DragDropService.js

@@ -41,7 +41,7 @@ export class DragDropService {
         const di = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
         const grp = di.openGroup("Insert of <" + di.name + ">");
         di.setStyle('position', 'absolute');
-        const containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
+        const containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, newContainer.getComputedStyle()));
         containerService.enterContainer(newContainer, [di]);
         const containerPos = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
         const evCoord = designerCanvas.getNormalizedEventCoordinates(event);

package/dist/elements/services/stylesheetService/AbstractStylesheetService.d.ts

@@ -42,6 +42,4 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
     }>;
     stylesheetsChanged: TypedEvent<void>;
     protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): boolean;
-    static buildPatchedStyleSheet(value: CSSStyleSheet[]): string;
-    private static traverseAndCollectRules;
 }

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -89,67 +89,4 @@ export class AbstractStylesheetService {
         }
         return false;
     }
-    static buildPatchedStyleSheet(value) {
-        let style = '';
-        for (let s of value) {
-            style += this.traverseAndCollectRules(s);
-        }
-        return style;
-    }
-    static traverseAndCollectRules(ruleContainer, noPatch = false) {
-        let t = '';
-        for (let rule of ruleContainer.cssRules) {
-            if ((rule instanceof CSSContainerRule
-                || rule instanceof CSSSupportsRule
-                || rule instanceof CSSMediaRule)
-                && rule.cssRules) {
-                t += rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
-            }
-            else if (rule instanceof CSSKeyframesRule
-                && rule.cssRules) {
-                t += rule.cssText;
-            }
-            else if (rule instanceof CSSStyleRule) {
-                let sel = "";
-                if (!noPatch) {
-                    let parts = rule.selectorText.split(',');
-                    for (let p of parts) {
-                        if (sel)
-                            sel += ',';
-                        if (p.startsWith(':host')) {
-                            sel += p.replace(':host', DesignerCanvas.cssprefixConstant);
-                            continue;
-                        }
-                        else if (p == ':root')
-                            sel += p;
-                        else if (p.includes(DesignerCanvas.cssprefixConstant)) {
-                            sel += p;
-                            continue;
-                        }
-                        sel += DesignerCanvas.cssprefixConstant + p.trimStart();
-                    }
-                }
-                else {
-                    sel = rule.selectorText;
-                }
-                t += sel;
-                let cssText = rule.style.cssText;
-                //bugfix for chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1394353 
-                if (rule.styleMap && rule.styleMap.get('grid-template') && rule.styleMap.get('grid-template').toString().includes('repeat(')) {
-                    let entr = rule.styleMap.entries();
-                    cssText = '';
-                    for (let e of entr) {
-                        cssText += e[0] + ':' + e[1].toString() + ';';
-                    }
-                }
-                t += '{' + cssText;
-                if (rule.cssRules?.length) {
-                    const part = this.traverseAndCollectRules(rule, true);
-                    t += part;
-                }
-                t += '}';
-            }
-        }
-        return t;
-    }
 }

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

@@ -51,6 +51,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     onZoomFactorChanged: TypedEvent<number>;
     get canvas(): HTMLElement;
     private _canvas;
+    private _canvasShadowRoot;
     private _canvasContainer;
     private _outercanvas2;
     private _lastHoverDesignItem;

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

@@ -19,7 +19,6 @@ import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 import { NodeType } from '../../item/NodeType.js';
 import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js';
 import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
-import { AbstractStylesheetService } from '../../services/stylesheetService/AbstractStylesheetService.js';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -96,6 +95,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     // Private Variables
     _canvas;
+    _canvasShadowRoot;
     _canvasContainer;
     _outercanvas2;
     _lastHoverDesignItem;
@@ -115,19 +115,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       font-weight: inherit;
       font-style: inherit;
       line-height: inherit;
+      --node-projects-web-component-designer-background: inherit;
     }
     * {
       touch-action: none;
     }
     #node-projects-designer-canvas-canvas {
-      background-color: var(--canvas-background, white);
-      /* 10px grid, using http://www.patternify.com/ */
-      //background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAFFJREFUeNpicChb7DAQmMGhbLHD////GQjh8nW3qapu1OJRi0ctHiYWl6+7TRAnLbxCVXWjcTxq8ajFoxaPllyjcTxq8ajFI8hiAAAAAP//AwCQfdyctxBQfwAAAABJRU5ErkJggg==);
-      background-image: 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);
+      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));
       image-rendering: pixelated;
-      background-position: 0px 0px;
-      background-attachment: fixed;
-      background-origin: -box;
       box-sizing: border-box;
       width: 100%;
       height: 100%;
@@ -285,6 +280,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         super();
         this._restoreCachedInititalValues();
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
+        this._canvasShadowRoot = this._canvas.attachShadow({ mode: 'open' });
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
         this.clickOverlay = this._getDomElement('node-projects-designer-canvas-clickOverlay');
@@ -337,15 +333,30 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return this._additionalStyle;
     }
     applyAllStyles() {
-        let styles = [this.constructor.style];
+        let styles = [];
         if (this._additionalStyle)
-            styles.push(cssFromString(AbstractStylesheetService.buildPatchedStyleSheet(this._additionalStyle)));
+            styles.push(...this._additionalStyle);
         if (this.instanceServiceContainer.stylesheetService) {
             styles.push(...this.instanceServiceContainer.stylesheetService
                 .getStylesheets()
-                .map(x => cssFromString(AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(x.content)]))));
+                .map(x => cssFromString(x.content)));
         }
-        this.shadowRoot.adoptedStyleSheets = styles;
+        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 --- */
     async executeCommand(command) {
@@ -431,11 +442,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     disableBackgroud() {
-        this._backgroundImage = this._canvas.style.backgroundImage;
         this._canvas.style.backgroundImage = 'none';
     }
     enableBackground() {
-        this._canvas.style.backgroundImage = this._backgroundImage;
+        this._canvas.style.backgroundImage = 'var(--node-projects-web-component-designer-background)';
     }
     zoomToFit() {
         const autoZomOffset = 10;
@@ -571,6 +581,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.instanceServiceContainer.register("designItemDocumentPositionService", designItemDocumentPositionService(this));
         }
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this._canvas, this.serviceContainer, this.instanceServiceContainer);
+        //this.rootDesignItem.setView(<any>this._canvasShadowRoot);
         const contentService = this.serviceContainer.getLastService('contentService');
         if (contentService) {
             this.instanceServiceContainer.register("contentService", contentService(this));
@@ -695,7 +706,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     async reparseDocumentStylesheets() {
         if (this.instanceServiceContainer.stylesheetService) {
-            const styleElements = this.rootDesignItem.element.querySelectorAll('style');
+            const styleElements = this.rootDesignItem.querySelectorAll('style');
             let i = 1;
             const intStyleSheets = [...styleElements].map(x => ({ name: '&lt;style&gt; #' + (x.id ? x.id + '(' + i++ + ')' : i++), content: DesignItem.GetDesignItem(x).content, designItem: DesignItem.GetDesignItem(x) }));
             await this.instanceServiceContainer.stylesheetService.setDocumentStylesheets(intStyleSheets);
@@ -852,10 +863,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         let input = this._getDomElement('node-projects-designer-search-input');
         this._getDomElement('node-projects-designer-search-result').innerHTML = "0 selected";
         if (input.value != "") {
-            let selectedElements = this.shadowRoot.querySelectorAll(input.value);
+            let selectedElements = this._canvasShadowRoot.querySelectorAll(input.value);
             let designItems = [];
             for (let i = 0; i <= selectedElements.length; i++) {
-                if (this._canvasContainer.contains(selectedElements[i]))
+                if (this._canvasShadowRoot.contains(selectedElements[i]))
                     designItems.push(DesignItem.GetDesignItem(selectedElements[i]));
             }
             if (designItems.length > 0) {
@@ -978,54 +989,30 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     //TODO: remove
     elementFromPoint(x, y) {
-        let elements = this.shadowRoot.elementsFromPoint(x, y);
+        let elements = this._canvasShadowRoot.elementsFromPoint(x, y);
         let element = elements[0];
-        if (element === this.clickOverlay)
-            element = elements[1];
-        if (element === this.clickOverlay)
-            element = this._canvas;
         return element;
     }
     elementsFromPoint(x, y) {
         let retVal = [];
-        let elements = this.shadowRoot.elementsFromPoint(x, y);
+        let elements = this._canvasShadowRoot.elementsFromPoint(x, y);
         for (let e of elements) {
-            if (e == this.clickOverlay)
+            if (e.getRootNode() !== this._canvasShadowRoot)
                 continue;
-            if (e == this.overlayLayer)
-                continue;
-            if (e.getRootNode() !== this.shadowRoot)
-                continue;
-            if (e == this._outercanvas2)
-                break;
             retVal.push(e);
-            if (e === this._canvas)
-                break;
         }
         return retVal;
     }
     getElementAtPoint(point, ignoreElementCallback) {
-        const elements = this.shadowRoot.elementsFromPoint(point.x, point.y);
+        const elements = this._canvasShadowRoot.elementsFromPoint(point.x, point.y);
         let currentElement = null;
         for (let i = 0; i < elements.length; i++) {
             currentElement = elements[i];
-            if (currentElement == this._outercanvas2) {
-                currentElement = null;
-                break;
-            }
-            if (currentElement == this.clickOverlay) {
-                currentElement = null;
-                continue;
-            }
-            if (currentElement == this.overlayLayer) {
-                currentElement = null;
-                continue;
-            }
             if (ignoreElementCallback && ignoreElementCallback(currentElement)) {
                 currentElement = null;
                 continue;
             }
-            if (currentElement.getRootNode() !== this.shadowRoot) {
+            if (currentElement.getRootNode() !== this._canvasShadowRoot) {
                 currentElement = null;
                 continue;
             }

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

@@ -9,7 +9,7 @@ export class AltToEnterContainerExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foreground);
         this._text.style.fontSize = (14 / this.designerCanvas.scaleFactor) + 'px';
         this._text.setAttribute('x', '' + (itemRect.x + 5 / this.designerCanvas.scaleFactor));

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

@@ -4,7 +4,7 @@ export class CanvasExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const computedStyle = getComputedStyle(this.extendedItem.element);
         if (computedStyle.margin !== '0px') {
             const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));

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

@@ -7,9 +7,9 @@ export declare class ElementDragTitleExtension extends AbstractExtension {
     private _text;
     private _width;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
     _drawMoveOverlay(itemRect: DOMRect): void;
-    refresh(): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
     _pointerEvent(event: PointerEvent): void;
     dispose(): void;
 }

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

@@ -10,8 +10,8 @@ export class ElementDragTitleExtension extends AbstractExtension {
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
-    extend() {
-        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+    extend(cache, event) {
+        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
         if (!isNaN(transformedCornerPoints[0].x)) {
             const boundRect = this.extendedItem.element.getBoundingClientRect();
             let w = getTextWidth(this.extendedItem.name, '10px monospace');
@@ -28,13 +28,13 @@ export class ElementDragTitleExtension extends AbstractExtension {
             this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
-            this.refresh();
+            this.refresh(cache, event);
         }
     }
     _drawMoveOverlay(itemRect) {
     }
-    refresh() {
-        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 16 }, this.designerCanvas);
+    refresh(cache, event) {
+        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 16 }, this.designerCanvas, cache);
         const angle = Math.atan2((transformedCornerPoints[1].y - transformedCornerPoints[0].y), (transformedCornerPoints[1].x - transformedCornerPoints[0].x)) * 180 / Math.PI;
         const transformedCornerPointsTx = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 5 }, this.designerCanvas);
         if (!isNaN(transformedCornerPoints[0].x)) {

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

@@ -7,6 +7,7 @@ export declare class ExtensionManager implements IExtensionManager {
     designerCanvas: IDesignerCanvas;
     designItemsWithExtentions: Set<IDesignItem>;
     constructor(designerCanvas: IDesignerCanvas);
+    private refreshAllExtensionsTimeout;
     private _contentChanged;
     private _selectedElementsChanged;
     applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];

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

@@ -8,6 +8,11 @@ export class ExtensionManager {
         this.designerCanvas = designerCanvas;
         designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));
         designerCanvas.instanceServiceContainer.contentService.onContentChanged.on(this._contentChanged.bind(this));
+        setTimeout(() => this.refreshAllExtensionsTimeout(), 20);
+    }
+    refreshAllExtensionsTimeout() {
+        this.refreshAllAppliedExtentions();
+        setTimeout(() => this.refreshAllExtensionsTimeout(), 20);
     }
     _contentChanged(contentChanged) {
         requestAnimationFrame(() => {

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

@@ -4,8 +4,9 @@ import { AbstractExtension } from './AbstractExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare class InvisibleElementExtension extends AbstractExtension {
     private _rect;
+    private lastPoints;
     constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
     dispose(): void;
 }

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

@@ -3,15 +3,19 @@ import { AbstractExtension } from './AbstractExtension.js';
 import { OverlayLayer } from "./OverlayLayer.js";
 export class InvisibleElementExtension extends AbstractExtension {
     _rect;
+    lastPoints;
     constructor(extensionManager, designerCanvas, extendedItem) {
         super(extensionManager, designerCanvas, extendedItem);
     }
-    extend() {
-        this.refresh();
+    extend(cache, event) {
+        this.refresh(cache, event);
     }
-    refresh() {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
-        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-invisible-div', this._rect, OverlayLayer.Background);
+    refresh(cache, event) {
+        const t = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
+        if (!this.lastPoints || this.lastPoints[0].x != t[0].x || this.lastPoints[0].y != t[0].y || this.lastPoints[1].x != t[1].x || this.lastPoints[1].y != t[1].y || this.lastPoints[2].x != t[2].x || this.lastPoints[2].y != t[2].y || this.lastPoints[3].x != t[3].x || this.lastPoints[3].y != t[3].y) {
+            this.lastPoints = t;
+            this._rect = this._drawTransformedRect(t, 'svg-invisible-div', this._rect, OverlayLayer.Background);
+        }
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -14,7 +14,7 @@ export class PositionExtension extends AbstractExtension {
     }
     refresh() {
         const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        const itemParentRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element.parentElement);
+        const itemParentRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.parent.element);
         this._line1 = this._drawLine(itemParentRect.x, itemRect.y + itemRect.height / 2, itemRect.x, itemRect.y + itemRect.height / 2, 'svg-position', this._line1);
         this._line2 = this._drawLine(itemParentRect.x + itemParentRect.width, itemRect.y + itemRect.height / 2, itemRect.x + itemRect.width, itemRect.y + itemRect.height / 2, 'svg-position', this._line2);
         this._line3 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y, itemRect.x + itemRect.width / 2, itemRect.y, 'svg-position', this._line3);

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

@@ -19,8 +19,8 @@ export declare class ResizeExtension extends AbstractExtension {
     private _initialComputedTransformOrigins;
     private _initialTransformOrigins;
     constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem, resizeAllSelected: boolean);
-    extend(): void;
-    refresh(): void;
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
     _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
     _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string): void;
     dispose(): void;

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

@@ -22,12 +22,12 @@ export class ResizeExtension extends AbstractExtension {
         super(extensionManager, designerCanvas, extendedItem);
         this.resizeAllSelected = resizeAllSelected;
     }
-    extend() {
-        this.refresh();
+    extend(cache, event) {
+        this.refresh(cache, event);
     }
-    refresh() {
+    refresh(cache, event) {
         //#region Resizer circles
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
         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/tools/DrawEllipsisTool.js

@@ -79,6 +79,7 @@ export class DrawEllipsisTool {
                 this._path.setAttribute("cy", (this._cy - mvY).toString());
                 this._path.removeAttribute("stroke");
                 this._path.removeAttribute("stroke-width");
+                this._path.removeAttribute("overlay-source");
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
                 svg.style.position = 'absolute';

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

@@ -63,6 +63,7 @@ export class DrawLineTool {
                 this._path.setAttribute("y2", (this._endPoint.y - mvY).toString());
                 this._path.removeAttribute("stroke");
                 this._path.removeAttribute("stroke-width");
+                this._path.removeAttribute("overlay-source");
                 svg.appendChild(this._path);
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';

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

@@ -105,6 +105,7 @@ export class DrawPathTool {
                     this._path.setAttribute("d", d);
                     this._path.removeAttribute("stroke");
                     this._path.removeAttribute("stroke-width");
+                    this._path.removeAttribute("overlay-source");
                     svg.appendChild(this._path);
                     svg.style.left = (mvX) + 'px';
                     svg.style.top = (mvY) + 'px';

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

@@ -93,6 +93,7 @@ export class DrawRectTool {
                 this._path.setAttribute("y", (this._py - mvY).toString());
                 this._path.removeAttribute("stroke");
                 this._path.removeAttribute("stroke-width");
+                this._path.removeAttribute("overlay-source");
                 svg.appendChild(this._path);
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';

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

@@ -28,7 +28,7 @@ export class MagicWandSelectorTool {
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
                 designerCanvas.releaseActiveTool();
-                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
+                const elements = designerCanvas.rootDesignItem.querySelectorAll('*');
                 const inSelectionElements = [];
                 let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {

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

@@ -50,7 +50,7 @@ export class RectangleSelectorTool {
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
                 designerCanvas.releaseActiveTool();
-                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
+                const elements = designerCanvas.rootDesignItem.querySelectorAll('*');
                 let inSelectionElements = [];
                 let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {

package/package.json

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