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

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

@@ -60,7 +60,7 @@ export class AbstractStylesheetService {
             this._allStylesheets.set(s[0], s[1]);
         }
     }
-    //todo: rename to externalStylesheets
+    //TODO: rename to externalStylesheets
     getStylesheets() {
         let stylesheets = [];
         for (let item of this._stylesheets) {

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

@@ -35,7 +35,7 @@ export class DomConverter {
     }
     static ConvertToString(designItems, beautifyOutput, updatePositions = false) {
         let itw = beautifyOutput !== false ? new IndentedTextWriter() : new SimpleTextWriter();
-        //todo: check how we could support this beautify here, cause it's now a setting of the writer...
+        //TODO: check how we could support this beautify here, cause it's now a setting of the writer...
         //let options: HtmlWriterOptions = { beautifyOutput: beautifyOutput !== false, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
         designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, updatePositions);
         return itw.getString();

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

@@ -945,7 +945,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         const normEl = this.getNormalizedElementCoordinates(element);
         return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
     }
-    //todo: remove
+    //TODO: remove
     elementFromPoint(x, y) {
         let elements = this.shadowRoot.elementsFromPoint(x, y);
         let element = elements[0];

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

@@ -23,7 +23,7 @@ export class EditTextExtension extends AbstractExtension {
         this._focusBound = this._focus.bind(this);
     }
     extend() {
-        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //TODO: -> check what to do with extensions, do not loose edit on mouse click,...
         //maybe use a html edit framework
         this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
         //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
@@ -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);
@@ -66,14 +66,14 @@ export class EditTextExtension extends AbstractExtension {
         return p.indexOf(stylo) >= 0;
     }
     _contentEdited() {
-        //todo -> save???
+        //TODO: -> save???
         //this.extendedItem.content = this.extendedItem.element.innerHTML;
         //console.log(this.extendedItem.element.innerHTML)
     }
     _blur() {
         if (!this._blurTimeout) {
             this._blurTimeout = setTimeout(() => {
-                //todo, don't remove doubleclick extension (another type could be used), remove extension itself
+                //TODO: don't remove doubleclick extension (another type could be used), remove extension itself
                 //maybe also configureable when when to remove the extension
                 this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
             }, 150);

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,26 @@ 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) {
+                                        console.warn("refreshExtensions() took too long, stopped refreshing");
+                                        break outer1;
+                                    }
+                                }
                             }
                             catch (err) {
                                 console.error(err);
@@ -254,12 +270,21 @@ 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) {
+                                            console.warn("refreshExtensions() took too long, stopped refreshing");
+                                            break outer2;
+                                        }
+                                    }
+                                }
                             }
                             catch (err) {
                                 console.error(err);
@@ -269,8 +294,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,13 +313,15 @@ 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]);
     }
-    //todo does not work with permanant, when not applied... maybe we need to do in another way
+    //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 +329,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/AbstractDesignerPointerExtension.js

@@ -1,8 +1,5 @@
 import { AbstractExtensionBase } from '../AbstractExtensionBase.js';
-//todo:
-//move draw functions to overlay layer
-//implement designerpointerextension
-//create ruler
+//TODO: move draw functions to overlay layer, implement designerpointerextension, create ruler
 export class AbstractDesignerPointerExtension extends AbstractExtensionBase {
     extendedItem;
     constructor(extensionManager, designerCanvas) {

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/TextTool.js

@@ -28,7 +28,7 @@ export class TextTool {
                     di.setStyle('left', currentPoint.x + 'px');
                     di.setStyle('top', currentPoint.y + 'px');
                     designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                    //todo: Maybe we could also remove the eatEvents property
+                    //TODO: Maybe we could also remove the eatEvents property
                     //TODO - don't apply doubleclick extension (maybe it is not the doubleclick one) - apply edit text extesion directly
                     //should we configure the editTextExtension anywhere??
                     this._textEditExtensions = designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick, event);

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/dist/elements/widgets/treeView/treeView.js

@@ -10,7 +10,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
     _contentChangedHandler;
     _mapElementTreeitem;
     _rootItem;
-    //TODO, buuton so key events can be transfered to designer Cnvas (so you can move controls with keys)
+    //TODO: buton so key events can be transfered to designerCanvas (so you can move controls with keys)
     static style = css `
     :host {
       --horz-margin: 20px;

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