@node-projects/web-component-designer 0.1.11 → 0.1.12

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

@@ -15,7 +15,7 @@ export declare function getElementDisplaytype(element: HTMLElement): ElementDisp
 export declare function isEmptyTextNode(node: Node): boolean;
 export declare function getActiveElement(): Element;
 export declare function getParentElementIncludingSlots(element: Element): Element;
-export declare function getElementsWindowOffsetWithoutSelfAndParentTransformations(element: any, zoom: number): {
+export declare function getElementsWindowOffsetWithoutSelfAndParentTransformations(element: any, zoom: number, cache?: Record<string | symbol, any>): {
     offsetLeft: number;
     offsetTop: number;
 };

package/dist/elements/helper/ElementHelper.js

@@ -55,25 +55,45 @@ export function getParentElementIncludingSlots(element) {
     }
     return element.parentElement;
 }
-export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element, zoom) {
+const windowOffsetsCacheKey = Symbol('windowOffsetsCacheKey');
+export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element, zoom, cache = {}) {
     let offsetLeft = 0;
     let offsetTop = 0;
+    let ch = cache[windowOffsetsCacheKey] = cache[windowOffsetsCacheKey] ?? new Map();
+    let lst = [];
     while (element) {
+        let cachedObj = ch.get(element);
+        if (cachedObj) {
+            offsetLeft += cachedObj.offsetLeft;
+            offsetTop += cachedObj.offsetTop;
+            lst.forEach(x => { x.offsetLeft += cachedObj.offsetLeft; x.offsetTop += cachedObj.offsetTop; });
+            break;
+        }
         if (element instanceof SVGSVGElement) {
-            //todo - fix without transformation
+            //TODO: !huge Perf impact! - fix without transformation
             let t = element.style.transform;
             element.style.transform = '';
             const bcEl = element.getBoundingClientRect();
             const bcPar = element.parentElement.getBoundingClientRect();
             element.style.transform = t;
-            offsetLeft += (bcEl.left - bcPar.left) / zoom;
-            offsetTop += (bcEl.top - bcPar.top) / zoom;
+            const currLeft = (bcEl.left - bcPar.left) / zoom;
+            const currTop = (bcEl.top - bcPar.top) / zoom;
+            offsetLeft += currLeft;
+            offsetTop += currTop;
+            lst.forEach(x => { x.offsetLeft += currLeft; x.offsetTop += currTop; });
+            const cacheEntry = { offsetLeft: currLeft, offsetTop: currTop };
+            lst.push(cacheEntry);
+            ch.set(element, cacheEntry);
             element = element.parentElement;
         }
         else if (element instanceof SVGGraphicsElement) {
             let bbox = element.getBBox();
             offsetLeft += bbox.x;
             offsetTop += bbox.y;
+            lst.forEach(x => { x.offsetLeft += bbox.x; x.offsetTop += bbox.y; });
+            const cacheEntry = { offsetLeft: bbox.x, offsetTop: bbox.y };
+            lst.push(cacheEntry);
+            ch.set(element, cacheEntry);
             element = element.ownerSVGElement;
         }
         else if (element instanceof HTMLBodyElement) {
@@ -83,6 +103,12 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             element = element.parentElement;
         }
         else {
+            const currLeft = element.offsetLeft;
+            const currTop = element.offsetTop;
+            lst.forEach(x => { x.offsetLeft += currLeft; x.offsetTop += currTop; });
+            const cacheEntry = { offsetLeft: currLeft, offsetTop: currTop };
+            lst.push(cacheEntry);
+            ch.set(element, cacheEntry);
             offsetLeft += element.offsetLeft;
             offsetTop += element.offsetTop;
             element = element.offsetParent;

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

@@ -11,13 +11,13 @@ export declare function getRotationAngleFromMatrix(matrixArray: number[], domMat
 export declare function addVectors(vectorA: [number, number], vectorB: [number, number]): [number, number];
 export declare function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element: HTMLElement, designerCanvas: IDesignerCanvas): DOMPoint;
 export declare function getResultingTransformationBetweenElementAndAllAncestors(element: HTMLElement, ancestor: HTMLElement, excludeAncestor?: boolean): DOMMatrix;
-export declare function getByParentsTransformedPointRelatedToCanvas(element: HTMLElement, point: DOMPoint, designerCanvas: IDesignerCanvas): IPoint;
+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 getElementSize(element: HTMLElement): {
     width: number;
     height: number;
 };
-export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
+export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas, cache?: Record<string | symbol, any>): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
 export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
 export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;
 export declare function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top"): string;

package/dist/elements/helper/TransformHelper.js

@@ -109,6 +109,7 @@ export function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransfo
     return designerCanvasNormalizedTransformedOrigin;
 }
 export function getResultingTransformationBetweenElementAndAllAncestors(element, ancestor, excludeAncestor) {
+    //TODO: introduce cache and optimize
     let actualElement = element;
     let actualElementMatrix;
     let newElementMatrix;
@@ -128,14 +129,15 @@ export function getResultingTransformationBetweenElementAndAllAncestors(element,
     }
     return originalElementAndAllParentsMultipliedMatrix;
 }
-export function getByParentsTransformedPointRelatedToCanvas(element, point, designerCanvas) {
+export function getByParentsTransformedPointRelatedToCanvas(element, point, designerCanvas, cache) {
     const canvas = element.closest('#node-projects-designer-canvas-canvas');
     let actualElement = element;
     let parentElementTransformOriginToPointVectorTransformed;
     let byParentTransformedPointRelatedToCanvas = { x: 0, y: 0 };
     while (actualElement != canvas) {
         const parentElement = getParentElementIncludingSlots(actualElement);
-        const parentElementTransformOrigin = new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor).offsetLeft - designerCanvas.outerRect.x + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor).offsetTop - designerCanvas.outerRect.y + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
+        const elementWindowOffset = getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor, cache);
+        const parentElementTransformOrigin = new DOMPoint(elementWindowOffset.offsetLeft - designerCanvas.outerRect.x + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), elementWindowOffset.offsetTop - designerCanvas.outerRect.y + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
         if (actualElement == element) {
             parentElementTransformOrigin.x -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).x;
             parentElementTransformOrigin.y -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).y;
@@ -164,13 +166,13 @@ export function getElementSize(element) {
     }
     return { width, height };
 }
-export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas) {
+export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas, cache) {
     const topleft = 0;
     const topright = 1;
     const bottomleft = 2;
     const bottomright = 3;
     const intUntransformedCornerPointsOffset = untransformedCornerPointsOffset ? { x: untransformedCornerPointsOffset.x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset.y / designerCanvas.scaleFactor } : { x: 0, y: 0 };
-    const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor);
+    const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor, cache);
     const p0OffsetsRelatedToCanvas = DOMPoint.fromPoint({
         x: p0Offsets.offsetLeft - designerCanvas.containerBoundingRect.left,
         y: p0Offsets.offsetTop - designerCanvas.containerBoundingRect.top
@@ -193,13 +195,15 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
         x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
         y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
     });
+    const tfX = parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]);
+    const tfY = parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1]);
     const transformOriginWithoutTransformRelatedToCanvas = DOMPointReadOnly.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]),
-        y: p0OffsetsRelatedToCanvas.y + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1]),
+        x: p0OffsetsRelatedToCanvas.x + tfX,
+        y: p0OffsetsRelatedToCanvas.y + tfY,
         z: 0,
         w: 0
     });
-    const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor).offsetLeft - designerCanvas.outerRect.left + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor).offsetTop - designerCanvas.outerRect.top + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1])), designerCanvas);
+    const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(p0Offsets.offsetLeft - designerCanvas.outerRect.left + tfX, p0Offsets.offsetTop - designerCanvas.outerRect.top + tfY), designerCanvas, cache);
     let top0 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[topleft].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[topleft].y));
     let top1 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[topright].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[topright].y));
     let top2 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[bottomleft].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[bottomleft].y));

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

@@ -15,6 +15,7 @@ export declare class DesignItem implements IDesignItem {
     lastContainerSize: ISize;
     parsedNode: any;
     node: Node;
+    view: Node;
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
@@ -73,6 +74,7 @@ export declare class DesignItem implements IDesignItem {
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
     updateChildrenFromNodesChildren(): void;
     constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
+    setView(node: Element): void;
     openGroup(title: string): ChangeGroup;
     getOrCreateDesignItem(node: Node): IDesignItem;
     static GetOrCreateDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
@@ -88,7 +90,7 @@ export declare class DesignItem implements IDesignItem {
     getAllStyles(): IStyleRule[];
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;
-    _insertChildInternal(designItem: IDesignItem, index?: number): void;
+    _insertChildInternal(designItem: DesignItem, index?: number): void;
     _removeChildInternal(designItem: IDesignItem): void;
     _refreshIfStyleSheet(): void;
     getPlacementService(style?: CSSStyleDeclaration): IPlacementService;

package/dist/elements/item/DesignItem.js

@@ -18,6 +18,7 @@ export class DesignItem {
     lastContainerSize;
     parsedNode;
     node;
+    view;
     serviceContainer;
     instanceServiceContainer;
     appliedDesignerExtensions = new Map();
@@ -133,10 +134,10 @@ export class DesignItem {
     }
     static _designItemMap = new WeakMap();
     get element() {
-        return this.node;
+        return this.view;
     }
     get name() {
-        return this.element.localName;
+        return this.node.localName;
     }
     get id() {
         return this.element.id;
@@ -320,6 +321,7 @@ export class DesignItem {
     }
     constructor(node, parsedNode, serviceContainer, instanceServiceContainer) {
         this.node = node;
+        this.view = node;
         this.parsedNode = parsedNode;
         this.serviceContainer = serviceContainer;
         this.instanceServiceContainer = instanceServiceContainer;
@@ -327,6 +329,10 @@ export class DesignItem {
         this._styles = new Map();
         DesignItem._designItemMap.set(node, this);
     }
+    setView(node) {
+        this.view = node;
+        DesignItem._designItemMap.set(node, this);
+    }
     openGroup(title) {
         return this.instanceServiceContainer.undoService.openGroup(title);
     }
@@ -451,11 +457,11 @@ export class DesignItem {
         }
         if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
             this._childArray.push(designItem);
-            this.element.appendChild(designItem.node);
+            this.view.appendChild(designItem.view);
         }
         else {
             let el = this._childArray[index];
-            this.node.insertBefore(designItem.node, el.element);
+            this.view.insertBefore(designItem.view, el.element);
             this._childArray.splice(index, 0, designItem);
         }
         designItem._parent = this;
@@ -486,7 +492,7 @@ export class DesignItem {
             //Update Stylesheetservice with sheet info
             //Patch this sheetdata
             const realContent = this._childArray.reduce((a, b) => a + b.content, '');
-            this.node.textContent = AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(realContent)]);
+            this.view.textContent = AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(realContent)]);
             this.instanceServiceContainer.designerCanvas.lazyTriggerReparseDocumentStylesheets();
         }
         else if (this.name == 'link') {

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

@@ -11,6 +11,7 @@ import { IPlacementService } from '../services/placementService/IPlacementServic
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export interface IDesignItem {
     lastContainerSize: ISize;
+    setView(node: Element): any;
     replaceNode(newNode: Node): any;
     nodeReplaced: TypedEvent<void>;
     clone(): Promise<IDesignItem>;

package/dist/elements/services/BaseServiceContainer.d.ts

@@ -8,6 +8,7 @@ export declare class BaseServiceContainer<NameMap> {
     getLastService<K extends keyof NameMap>(service: K): NameMap[K];
     getServices<K extends keyof NameMap>(service: K): NameMap[K][];
     register<K extends keyof NameMap>(name: K, service: NameMap[K]): void;
+    registerLast<K extends keyof NameMap>(name: K, service: NameMap[K]): void;
     registerMultiple<K extends keyof NameMap>(names: K[], service: NameMap[K]): void;
     forSomeServicesTillResult<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): Y;
     getLastServiceWhere<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): NameMap[K];

package/dist/elements/services/BaseServiceContainer.js

@@ -17,6 +17,12 @@ export class BaseServiceContainer {
         this._services.get(name).push(service);
         this.servicesChanged.emit({ serviceName: name });
     }
+    registerLast(name, service) {
+        if (!this._services.has(name))
+            this._services.set(name, []);
+        this._services.get(name).unshift(service);
+        this.servicesChanged.emit({ serviceName: name });
+    }
     registerMultiple(names, service) {
         for (const name of names) {
             if (!this._services.has(name))

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -20,7 +20,7 @@ export class DefaultPlacementService {
     canEnter(container, items) {
         if (!this.isEnterableContainer(container))
             return false;
-        if (!items.every(x => !x.element.contains(container.element)))
+        if (!items.every(x => !x.element.contains(container.element) && x !== container))
             return false;
         return true;
     }

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.js

@@ -178,6 +178,13 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             case 'br':
             case 'img':
             case 'iframe':
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
                 return true;
         }
         return false;
@@ -205,6 +212,14 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
                 return this.imgProperties;
             case 'iframe':
                 return this.iframeProperties;
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
+                return [];
         }
         return null;
     }

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

@@ -6,7 +6,7 @@ import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
 export declare abstract class AbstractExtension extends AbstractExtensionBase implements IDesignerExtension {
     protected extendedItem: IDesignItem;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    abstract extend(): any;
-    abstract refresh(): any;
+    abstract extend(cache: Record<string | symbol, any>, event?: Event): any;
+    abstract refresh(cache: Record<string | symbol, any>, event?: Event): any;
     abstract dispose(): any;
 }

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

@@ -10,7 +10,7 @@ export class AltToEnterContainerExtension extends AbstractExtension {
     }
     refresh() {
         let 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.Foregorund);
+        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));
         this._text.setAttribute('y', '' + (itemRect.y + 12 / this.designerCanvas.scaleFactor));

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -43,7 +43,7 @@ export class EditTextExtension extends AbstractExtension {
         foreignObject.setAttribute('width', '96');
         foreignObject.setAttribute('height', '24');
         foreignObject.appendChild(elements);
-        this._addOverlay(foreignObject, OverlayLayer.Foregorund);
+        this._addOverlay(foreignObject, OverlayLayer.Foreground);
         this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
         this.extendedItem.element.addEventListener('blur', this._blurBound);
         this.extendedItem.element.addEventListener('focus', this._focusBound);

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

@@ -14,7 +14,7 @@ export declare class ExtensionManager implements IExtensionManager {
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
     removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): void;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): void;
-    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension): void;
+    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension, timeout?: number): void;
     refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): void;
     refreshAllAppliedExtentions(): void;
     reapplyAllAppliedExtentions(): void;

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

@@ -55,6 +55,7 @@ export class ExtensionManager {
             const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
             let extensions = [];
             if (extProv) {
+                const cache = {};
                 for (let e of extProv) {
                     let shouldAppE = designItem.shouldAppliedDesignerExtensions.get(extensionType);
                     if (!shouldAppE)
@@ -67,7 +68,7 @@ export class ExtensionManager {
                             appE = [];
                         const ext = e.getExtension(this, this.designerCanvas, designItem);
                         try {
-                            ext.extend(event);
+                            ext.extend(cache, event);
                             extensions.push(ext);
                         }
                         catch (err) {
@@ -89,9 +90,11 @@ export class ExtensionManager {
         return null;
     }
     applyExtensions(designItems, extensionType, event, recursive = false) {
+        this.designerCanvas.overlayLayer.startBatch();
         if (designItems) {
             const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
             if (extProv) {
+                const cache = {};
                 for (let e of extProv) {
                     for (let i of designItems) {
                         let shouldAppE = i.shouldAppliedDesignerExtensions.get(extensionType);
@@ -105,7 +108,7 @@ export class ExtensionManager {
                                 appE = [];
                             const ext = e.getExtension(this, this.designerCanvas, i);
                             try {
-                                ext.extend(event);
+                                ext.extend(cache, event);
                             }
                             catch (err) {
                                 console.error(err);
@@ -123,6 +126,7 @@ export class ExtensionManager {
                 }
             }
         }
+        this.designerCanvas.overlayLayer.endBatch();
     }
     removeExtension(designItem, extensionType) {
         if (designItem) {
@@ -211,9 +215,10 @@ export class ExtensionManager {
             if (extensionType) {
                 let exts = designItem.appliedDesignerExtensions.get(extensionType);
                 if (exts) {
+                    const cache = {};
                     for (let e of exts) {
                         try {
-                            e.refresh(event);
+                            e.refresh(cache, event);
                         }
                         catch (err) {
                             console.error(err);
@@ -222,10 +227,11 @@ export class ExtensionManager {
                 }
             }
             else {
+                const cache = {};
                 for (let appE of designItem.appliedDesignerExtensions) {
                     for (let e of appE[1]) {
                         try {
-                            e.refresh(event);
+                            e.refresh(cache, event);
                         }
                         catch (err) {
                             console.error(err);
@@ -235,16 +241,24 @@ export class ExtensionManager {
             }
         }
     }
-    refreshExtensions(designItems, extensionType, event, ignoredExtension) {
+    refreshExtensions(designItems, extensionType, event, ignoredExtension, timeout) {
+        this.designerCanvas.overlayLayer.startBatch();
+        const start = performance.now();
         if (designItems) {
             if (extensionType) {
-                for (let i of designItems) {
+                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(event);
+                                    e.refresh(cache, event);
+                                if (timeout) {
+                                    const end = performance.now();
+                                    if (end - start > timeout)
+                                        break outer1;
+                                }
                             }
                             catch (err) {
                                 console.error(err);
@@ -254,12 +268,19 @@ export class ExtensionManager {
                 }
             }
             else {
-                for (let i of designItems) {
+                const cache = {};
+                outer2: for (let i of designItems) {
                     for (let appE of i.appliedDesignerExtensions) {
                         for (let e of appE[1]) {
                             try {
-                                if (e != ignoredExtension)
-                                    e.refresh(event);
+                                if (e != ignoredExtension) {
+                                    e.refresh(cache, event);
+                                    if (timeout) {
+                                        const end = performance.now();
+                                        if (end - start > timeout)
+                                            break outer2;
+                                    }
+                                }
                             }
                             catch (err) {
                                 console.error(err);
@@ -269,8 +290,10 @@ export class ExtensionManager {
                 }
             }
         }
+        this.designerCanvas.overlayLayer.endBatch();
     }
     refreshAllExtensions(designItems, ignoredExtension) {
+        this.designerCanvas.overlayLayer.startBatch();
         if (designItems) {
             this.refreshExtensions(designItems, ExtensionType.Permanent, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.Selection, null, ignoredExtension);
@@ -286,6 +309,7 @@ export class ExtensionManager {
             this.refreshExtensions(designItems, ExtensionType.PrimarySelectionAndCanBeEntered, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainerAndCanBeEntered, null, ignoredExtension);
         }
+        this.designerCanvas.overlayLayer.endBatch();
     }
     refreshAllAppliedExtentions() {
         this.refreshAllExtensions([...this.designItemsWithExtentions]);
@@ -293,6 +317,7 @@ export class ExtensionManager {
     //todo does not work with permanant, when not applied... maybe we need to do in another way
     //maybe store the "shouldAppliedExtensions??"
     reapplyAllAppliedExtentions() {
+        this.designerCanvas.overlayLayer.startBatch();
         for (let d of ExtensionManager.getAllChildElements(this.designerCanvas.rootDesignItem)) {
             const keys = [...d.shouldAppliedDesignerExtensions.keys()];
             for (let e of keys) {
@@ -300,6 +325,7 @@ export class ExtensionManager {
                 this.applyExtension(d, e);
             }
         }
+        this.designerCanvas.overlayLayer.endBatch();
     }
     static *getAllChildElements(designItem) {
         if (designItem.nodeType == NodeType.Element)

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

@@ -1,5 +1,5 @@
 import { IDisposable } from '../../../../interfaces/IDisposable.js';
 export interface IDesignerExtension extends IDisposable {
-    extend(event?: Event): any;
-    refresh(event?: Event): any;
+    extend(cache: Record<string | symbol, any>, event?: Event): any;
+    refresh(cache: Record<string | symbol, any>, event?: Event): any;
 }

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

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

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

@@ -1,5 +1,5 @@
 export declare enum OverlayLayer {
     Background = 10,
     Normal = 20,
-    Foregorund = 30
+    Foreground = 30
 }

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

@@ -2,5 +2,5 @@ export var OverlayLayer;
 (function (OverlayLayer) {
     OverlayLayer[OverlayLayer["Background"] = 10] = "Background";
     OverlayLayer[OverlayLayer["Normal"] = 20] = "Normal";
-    OverlayLayer[OverlayLayer["Foregorund"] = 30] = "Foregorund";
+    OverlayLayer[OverlayLayer["Foreground"] = 30] = "Foreground";
 })(OverlayLayer || (OverlayLayer = {}));

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

@@ -8,7 +8,7 @@ export declare class SelectionDefaultExtension extends AbstractExtension {
     private _line3;
     private _line4;
     constructor(extensionManager: IExtensionManager, designerView: 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/SelectionDefaultExtension.js

@@ -9,17 +9,17 @@ export class SelectionDefaultExtension extends AbstractExtension {
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
-    extend() {
-        this.refresh();
+    extend(cache, event) {
+        this.refresh(cache);
     }
-    refresh() {
+    refresh(cache, event) {
         let transformedCornerPoints;
         if (this.extendedItem.nodeType == NodeType.TextNode) {
             let rect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
             transformedCornerPoints = [{ x: rect.x, y: rect.y }, { x: rect.x + rect.width, y: rect.y }, { x: rect.x, y: rect.y + rect.height }, { x: rect.x + rect.width, y: rect.y + rect.height }];
         }
         else
-            transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+            transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
         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/pointerExtensions/CursorLinePointerExtension.js

@@ -11,11 +11,11 @@ export class CursorLinePointerExtension extends AbstractDesignerPointerExtension
     _line4;
     refresh(event) {
         let mp = this.designerCanvas.getNormalizedEventCoordinates(event);
-        this._circle = this._drawCircle(mp.x, mp.y, 1, 'svg-cursor-line', this._circle, OverlayLayer.Foregorund);
-        this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foregorund);
-        this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foregorund);
-        this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foregorund);
-        this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foregorund);
+        this._circle = this._drawCircle(mp.x, mp.y, 1, 'svg-cursor-line', this._circle, OverlayLayer.Foreground);
+        this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foreground);
+        this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foreground);
+        this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foreground);
+        this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foreground);
     }
     dispose() {
         super._removeAllOverlays();

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

@@ -14,6 +14,12 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     private _id;
     constructor(serviceContainer: ServiceContainer);
     private _initialize;
+    backgroundFragment: DocumentFragment;
+    foregroundFragment: DocumentFragment;
+    normalFragment: DocumentFragment;
+    batchCount: number;
+    startBatch(): void;
+    endBatch(): void;
     addOverlay(overlaySource: string, element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGElement): void;
     removeAllNodesWithClass(className: string): void;

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

@@ -59,17 +59,52 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         }
         this.shadowRoot.adoptedStyleSheets = styles;
     }
+    backgroundFragment;
+    foregroundFragment;
+    normalFragment;
+    batchCount = 0;
+    startBatch() {
+        if (this.batchCount == 0) {
+            this.backgroundFragment = document.createDocumentFragment();
+            this.foregroundFragment = document.createDocumentFragment();
+            this.normalFragment = document.createDocumentFragment();
+        }
+        this.batchCount++;
+    }
+    endBatch() {
+        this.batchCount--;
+        if (this.batchCount == 0) {
+            if (this.backgroundFragment.hasChildNodes)
+                this._gBackground.appendChild(this.backgroundFragment);
+            if (this.foregroundFragment.hasChildNodes)
+                this._gForeground.appendChild(this.foregroundFragment);
+            if (this.normalFragment.hasChildNodes)
+                this._gNormal.appendChild(this.normalFragment);
+            this.backgroundFragment = null;
+            this.foregroundFragment = null;
+            this.normalFragment = null;
+        }
+    }
     addOverlay(overlaySource, element, overlayLayer = OverlayLayer.Normal) {
         element.setAttribute("overlay-source", overlaySource);
         switch (overlayLayer) {
             case OverlayLayer.Background:
-                this._gBackground.appendChild(element);
+                if (this.backgroundFragment)
+                    this.backgroundFragment.appendChild(element);
+                else
+                    this._gBackground.appendChild(element);
                 break;
-            case OverlayLayer.Foregorund:
-                this._gForeground.appendChild(element);
+            case OverlayLayer.Foreground:
+                if (this.foregroundFragment)
+                    this.foregroundFragment.appendChild(element);
+                else
+                    this._gForeground.appendChild(element);
                 break;
             default:
-                this._gNormal.appendChild(element);
+                if (this.normalFragment)
+                    this.normalFragment.appendChild(element);
+                else
+                    this._gNormal.appendChild(element);
                 break;
         }
     }

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

@@ -51,7 +51,7 @@ export class DrawElementTool {
             if (!this._rect) {
                 designerCanvas.rootDesignItem.element.appendChild(this._createdItem.element);
                 this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foreground);
                 this._rect.setAttribute('class', 'svg-draw-new-element');
                 this._rect.setAttribute('x', (this._startPosition.x - designerCanvas.containerBoundingRect.x));
                 this._rect.setAttribute('y', (this._startPosition.y - designerCanvas.containerBoundingRect.y));

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

@@ -32,7 +32,7 @@ export class DrawEllipsisTool {
                 this._path.setAttribute("cy", currentPoint.y.toString());
                 this._path.setAttribute("rx", "0");
                 this._path.setAttribute("ry", "0");
-                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foreground);
                 break;
             case EventNames.PointerMove:
                 if (this._path) {

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

@@ -31,7 +31,7 @@ export class DrawLineTool {
                 this._path.setAttribute("y1", currentPoint.y.toString());
                 this._path.setAttribute("x2", currentPoint.x.toString());
                 this._path.setAttribute("y2", currentPoint.y.toString());
-                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foreground);
                 break;
             case EventNames.PointerMove:
                 if (this._path) {

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

@@ -35,7 +35,7 @@ export class DrawPathTool {
                     this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
                     this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
                     this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
-                    designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
+                    designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foreground);
                     this._startPoint = currentPoint;
                 }
                 if (this._lastPoint != null && this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {

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

@@ -35,7 +35,7 @@ export class DrawRectTool {
                 this._path.setAttribute("y", currentPoint.y.toString());
                 this._path.setAttribute("width", "0");
                 this._path.setAttribute("height", "0");
-                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foreground);
                 break;
             case EventNames.PointerMove:
                 if (this._path) {

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

@@ -17,7 +17,7 @@ export class MagicWandSelectorTool {
                 this._path.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
                 this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
                 this._path.setAttribute("D", this._pathD);
-                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foreground);
                 break;
             case EventNames.PointerMove:
                 if (this._path) {

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

@@ -289,7 +289,7 @@ export class PointerTool {
                                 }
                                 currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
                             }
-                            designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems, null, event);
+                            designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems, null, event, null, 20);
                         }
                     }
                     break;
@@ -329,7 +329,7 @@ export class PointerTool {
                         this._dragOverExtensionItem = null;
                         this._moveItemsOffset = { x: 0, y: 0 };
                     }
-                    designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements, null, event);
+                    designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements, null, event, null, 20);
                     if (this._changeGroup) {
                         this._changeGroup.abort();
                         this._changeGroup = null;

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

@@ -23,7 +23,7 @@ export class RectangleSelectorTool {
                 this._rect.setAttribute('height', 0);
                 this._rect.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor);
                 this._rect.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
-                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foreground);
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {

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

@@ -23,7 +23,7 @@ export class ZoomTool {
                 this._rect.setAttribute('height', 0);
                 this._rect.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor);
                 this._rect.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
-                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foreground);
                 break;
             case EventNames.PointerMove:
                 if (this._startPoint) {

package/package.json

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