@node-projects/web-component-designer 0.0.37 → 0.0.43

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -0,0 +1,68 @@
+import { CommandType } from "../../../commandHandling/CommandType.js";
+import { DesignItem } from "../../item/DesignItem.js";
+import { MoveElementInDomAction } from "../undoService/transactionItems/MoveElementInDomAction.js";
+export class DefaultModelCommandService {
+    canExecuteCommand(designerCanvas, command) {
+        if (command.type == CommandType.moveBackward ||
+            command.type == CommandType.moveForward ||
+            command.type == CommandType.moveToBack ||
+            command.type == CommandType.moveToFront)
+            return designerCanvas.instanceServiceContainer.selectionService.primarySelection != null;
+        if (command.type == CommandType.arrangeBottom ||
+            command.type == CommandType.arrangeCenter ||
+            command.type == CommandType.arrangeLeft ||
+            command.type == CommandType.arrangeMiddle ||
+            command.type == CommandType.arrangeRight ||
+            command.type == CommandType.arrangeTop ||
+            command.type == CommandType.unifyHeight ||
+            command.type == CommandType.unifyWidth)
+            return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1;
+        return null;
+    }
+    async executeCommand(designerCanvas, command) {
+        let sel = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
+        if (command.type == CommandType.moveBackward)
+            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.previousElementSibling), 'beforebegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
+        else if (command.type == CommandType.moveForward)
+            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.nextElementSibling), 'afterend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
+        else if (command.type == CommandType.moveToBack)
+            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'afterbegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
+        else if (command.type == CommandType.moveToFront)
+            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'beforeend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
+        else if (command.type == CommandType.arrangeLeft) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeLeft');
+            const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('left', left);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.arrangeTop) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeTop');
+            const top = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('top');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('top', top);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.unifyHeight) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyHeight');
+            const height = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('height');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('height', height);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.unifyWidth) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyWidth');
+            const width = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('width');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('width', width);
+            }
+            grp.commit();
+        }
+        else
+            return null;
+        return true;
+    }
+}

package/dist/elements/services/modelCommandService/IInstanceService.d.ts

@@ -0,0 +1,8 @@
+import { IService } from '../IService';
+import { IElementDefinition } from '../elementsService/IElementDefinition';
+import type { ServiceContainer } from '../ServiceContainer';
+import type { InstanceServiceContainer } from '../InstanceServiceContainer';
+import { IDesignItem } from '../../item/IDesignItem';
+export interface IInstanceService extends IService {
+    getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem>;
+}

package/dist/elements/services/modelCommandService/IInstanceService.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/modelCommandService/IModelCommandService.d.ts

@@ -0,0 +1,7 @@
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
+import { IService } from '../IService';
+export interface IModelCommandService extends IService {
+    canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): boolean | null;
+    executeCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): any;
+}

package/dist/elements/services/modelCommandService/IModelCommandService.js

@@ -0,0 +1 @@
+export {};

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

@@ -89,9 +89,9 @@ export class DefaultPlacementService {
         let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         for (const designItem of items) {
             let movedElement = designItem.element;
-            let oldLeft = parseInt(movedElement.style.left);
+            let oldLeft = parseFloat(movedElement.style.left);
             oldLeft = Number.isNaN(oldLeft) ? 0 : oldLeft;
-            let oldTop = parseInt(movedElement.style.top);
+            let oldTop = parseFloat(movedElement.style.top);
             oldTop = Number.isNaN(oldTop) ? 0 : oldTop;
             //let oldPosition = movedElement.style.position;
             designItem.element.style.transform = null;

package/dist/elements/services/propertiesService/propertyEditors/BasePropertyEditor.js

@@ -30,7 +30,12 @@ export class BasePropertyEditor {
         else
             this.element.classList.remove('unset-value');
         this.disableChangeNotification = true;
-        this.refreshValue(valueType, value);
+        try {
+            this.refreshValue(valueType, value);
+        }
+        catch (err) {
+            console.error(err);
+        }
         this.disableChangeNotification = false;
     }
 }

package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js

@@ -5,10 +5,10 @@ export class ThicknessPropertyEditor extends BasePropertyEditor {
         super(property);
         const selector = new ThicknessEditor();
         selector.property = property.name;
-        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue));
         this.element = selector;
     }
     refreshValue(valueType, value) {
-        this.element.value = value;
+        this.element.valueLeft = value;
     }
 }

package/dist/elements/services/undoService/UndoService.d.ts

@@ -2,10 +2,13 @@ import { ITransactionItem } from './ITransactionItem.js';
 import { ChangeGroup } from "./ChangeGroup.js";
 import { IUndoService } from './IUndoService.js';
 import { IDesignItem } from '../../item/IDesignItem';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export declare class UndoService implements IUndoService {
     private _undoStack;
     private _redoStack;
     private _transactionStack;
+    private _designerCanvas;
+    constructor(designerCanvas?: IDesignerCanvas);
     openGroup(title: string, affectedItems: IDesignItem[]): ChangeGroup;
     private commitTransactionItem;
     private abortTransactionItem;

package/dist/elements/services/undoService/UndoService.js

@@ -6,6 +6,10 @@ export class UndoService {
     _undoStack = [];
     _redoStack = [];
     _transactionStack = [];
+    _designerCanvas;
+    constructor(designerCanvas) {
+        this._designerCanvas = designerCanvas;
+    }
     openGroup(title, affectedItems) {
         let t = new ChangeGroup(title, affectedItems, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t));
         this._transactionStack.push(t);
@@ -37,6 +41,7 @@ export class UndoService {
         else {
             this._transactionStack[this._transactionStack.length - 1].execute(item);
         }
+        this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
     }
     clear() {
         this._undoStack = [];
@@ -57,6 +62,7 @@ export class UndoService {
             this.clear();
             throw err;
         }
+        this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
     }
     redo() {
         if (!this.canRedo())
@@ -72,6 +78,7 @@ export class UndoService {
             this.clear();
             throw err;
         }
+        this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
     }
     canUndo() {
         return this._undoStack.length > 0;

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

@@ -2,12 +2,12 @@ import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
 export class DomConverter {
     static normalizeAttributeValue(value) {
         if (value)
-            return value.replace(/"/g, '"');
+            return value.replaceAll('"', '"');
         return value;
     }
     static normalizeContentValue(value) {
         if (value)
-            return value.replace(/</g, '&lt;');
+            return value.replaceAll('<', '&lt;').replaceAll(' ', '&nbsp;'); // !caution! -> this is not normal space, it's nbsp
         return value;
     }
     static IsSelfClosingElement(tag) {

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

@@ -6,7 +6,6 @@ import { IDesignerCanvas } from './IDesignerCanvas';
 import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { IPlacementView } from './IPlacementView';
-import { CommandType } from '../../../commandHandling/CommandType';
 import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
 import { IUiCommand } from '../../../commandHandling/IUiCommand';
 import { IExtensionManager } from "./extensions/IExtensionManger";
@@ -40,6 +39,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     extensionManager: IExtensionManager;
+    private _pointerextensions;
     private _onDblClickBound;
     constructor();
     get designerWidth(): string;
@@ -53,7 +53,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     handleCopyCommand(): Promise<void>;
     handlePasteCommand(): Promise<void>;
     handleDeleteCommand(): void;
-    handleMoveCommand(command: CommandType): void;
     initialize(serviceContainer: ServiceContainer): void;
     elementFromPoint(x: number, y: number): Element;
     connectedCallback(): void;

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

@@ -11,7 +11,6 @@ import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction';
 import { CommandType } from '../../../commandHandling/CommandType';
-import { MoveElementInDomAction } from '../../services/undoService/transactionItems/MoveElementInDomAction';
 import { DefaultHtmlParserService } from "../../services/htmlParserService/DefaultHtmlParserService";
 import { ExtensionType } from "./extensions/ExtensionType";
 import { ExtensionManager } from "./extensions/ExtensionManager";
@@ -103,13 +102,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
           <div style="width: 100%;height: 100%;">
             <div id="node-projects-designer-canvas-outercanvas2" style="width: 100%;height: 100%;position: relative;overflow: auto;">
               <div id="node-projects-designer-canvas-canvasContainer" style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;/* bottom: 0; does not work with fixed sized when size is bigger then view */left: 0;user-select: none;">
-                <!-- <div id="zoomHelper" style="width: 10px; height: 10px; position: absolute; top: 0; left: 0; pointer-events: none;"></div> -->
                 <div id="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
               </div>
             </div>
           </div>
         </div>`;
     extensionManager;
+    _pointerextensions;
     _onDblClickBound;
     constructor() {
         super();
@@ -117,7 +116,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
         this.instanceServiceContainer = new InstanceServiceContainer();
-        this.instanceServiceContainer.register("undoService", new UndoService);
+        this.instanceServiceContainer.register("undoService", new UndoService(this));
         this.instanceServiceContainer.register("selectionService", new SelectionService);
         this.extensionManager = new ExtensionManager(this);
         this._onKeyDownBound = this.onKeyDown.bind(this);
@@ -162,6 +161,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     /* --- start IUiCommandHandler --- */
     async executeCommand(command) {
+        let handeled = this.serviceContainer.modelCommandService.executeCommand(this, command);
+        if (handeled != null)
+            return;
         switch (command.type) {
             case CommandType.screenshot:
                 {
@@ -194,12 +196,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             case CommandType.redo:
                 this.instanceServiceContainer.undoService.redo();
                 break;
-            case CommandType.moveToFront:
-            case CommandType.moveForward:
-            case CommandType.moveBackward:
-            case CommandType.moveToBack:
-                this.handleMoveCommand(command.type);
-                break;
             case CommandType.copy:
                 this.handleCopyCommand();
                 break;
@@ -216,6 +212,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     canExecuteCommand(command) {
+        let handeled = this.serviceContainer.modelCommandService.canExecuteCommand(this, command);
+        if (handeled !== null)
+            return handeled;
         if (command.type === CommandType.undo) {
             return this.instanceServiceContainer.undoService.canUndo();
         }
@@ -256,17 +255,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.undoService.execute(new DeleteAction(items, this.extensionManager));
         this.instanceServiceContainer.selectionService.setSelectedElements(null);
     }
-    handleMoveCommand(command) {
-        let sel = this.instanceServiceContainer.selectionService.primarySelection;
-        if (command == CommandType.moveBackward)
-            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.previousElementSibling), 'beforebegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
-        else if (command == CommandType.moveForward)
-            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.nextElementSibling), 'afterend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
-        else if (command == CommandType.moveToBack)
-            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'afterbegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
-        else if (command == CommandType.moveToFront)
-            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'beforeend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
-    }
     initialize(serviceContainer) {
         this.serviceContainer = serviceContainer;
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
@@ -276,6 +264,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer.appendChild(this.overlayLayer);
         this.snapLines = new Snaplines(this.overlayLayer);
         this.snapLines.initialize(this.rootDesignItem);
+        if (this.serviceContainer.designerPointerExtensions)
+            for (let pe of this.serviceContainer.designerPointerExtensions) {
+                if (!this._pointerextensions)
+                    this._pointerextensions = [];
+                this._pointerextensions.push(pe.getExtension(this));
+            }
         if (this.children) {
             let children = this.children;
             if (this.children.length == 1 && this.children[0] instanceof HTMLSlotElement) {
@@ -548,6 +542,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _rect;
     _pointerEventHandler(event) {
         this._fillCalculationrects();
+        if (this._pointerextensions) {
+            for (let pe of this._pointerextensions)
+                pe.refresh(event);
+        }
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
         if (event.button == 2)

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

@@ -0,0 +1,22 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+import { OverlayLayerView } from '../overlayLayerView';
+import { OverlayLayer } from './OverlayLayer';
+export declare abstract class AbstractExtension implements IDesignerExtension {
+    protected overlays: SVGGraphicsElement[];
+    protected overlayLayerView: OverlayLayerView;
+    protected extensionManager: IExtensionManager;
+    protected designerView: IDesignerCanvas;
+    protected extendedItem: IDesignItem;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    abstract extend(): any;
+    abstract refresh(): any;
+    abstract dispose(): any;
+    protected _removeAllOverlays(): void;
+    _drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
+    _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+}

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

@@ -0,0 +1,52 @@
+export class AbstractExtension {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerView;
+    extendedItem;
+    constructor(extensionManager, designerView, extendedItem) {
+        this.extensionManager = extensionManager;
+        this.designerView = designerView;
+        this.extendedItem = extendedItem;
+        this.overlayLayerView = designerView.overlayLayer;
+    }
+    _removeAllOverlays() {
+        for (let o of this.overlays) {
+            try {
+                this.overlayLayerView.removeOverlay(o);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        this.overlays = [];
+    }
+    _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+        const newLine = this.overlayLayerView.drawLine(x1, y1, x2, y2, className, line, overlayLayer);
+        if (!line) {
+            this.overlays.push(newLine);
+        }
+        return newLine;
+    }
+    _drawCircle(x, y, radius, className, circle, overlayLayer) {
+        const newCircle = this.overlayLayerView.drawCircle(x, y, radius, className, circle, overlayLayer);
+        if (!circle) {
+            this.overlays.push(newCircle);
+        }
+        return circle;
+    }
+    _drawRect(x, y, w, h, className, rect, overlayLayer) {
+        const newRect = this.overlayLayerView.drawRect(x, y, w, h, className, rect, overlayLayer);
+        if (!rect) {
+            this.overlays.push(newRect);
+        }
+        return newRect;
+    }
+    _drawText(text, x, y, className, textEl, overlayLayer) {
+        const newText = this.overlayLayerView.drawText(text, x, y, className, textEl, overlayLayer);
+        if (!textEl) {
+            this.overlays.push(newText);
+        }
+        return newText;
+    }
+}

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

@@ -2,21 +2,11 @@ import { IDesignItem } from "../../../item/IDesignItem";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { IDesignerExtension } from "./IDesignerExtension";
 import { IExtensionManager } from "./IExtensionManger";
-import { OverlayLayerView } from '../overlayLayerView';
-import { OverlayLayer } from './OverlayLayer';
-export declare abstract class AbstractExtension implements IDesignerExtension {
-    protected overlays: SVGGraphicsElement[];
-    protected overlayLayerView: OverlayLayerView;
-    protected extensionManager: IExtensionManager;
-    protected designerView: IDesignerCanvas;
+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 dispose(): any;
-    protected _removeAllOverlays(): void;
-    _drawLineOverlay(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
-    _drawCircleOverlay(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
-    _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
-    _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
 }

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

@@ -1,78 +1,8 @@
-export class AbstractExtension {
-    overlays = [];
-    overlayLayerView;
-    extensionManager;
-    designerView;
+import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
+export class AbstractExtension extends AbstractExtensionBase {
     extendedItem;
     constructor(extensionManager, designerView, extendedItem) {
-        this.extensionManager = extensionManager;
-        this.designerView = designerView;
+        super(extensionManager, designerView);
         this.extendedItem = extendedItem;
-        this.overlayLayerView = designerView.overlayLayer;
-    }
-    _removeAllOverlays() {
-        for (let o of this.overlays) {
-            try {
-                this.overlayLayerView.removeOverlay(o);
-            }
-            catch (err) {
-                console.error(err);
-            }
-        }
-        this.overlays = [];
-    }
-    _drawLineOverlay(x1, y1, x2, y2, className, line, overlayLayer) {
-        if (!line) {
-            line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            this.overlayLayerView.addOverlay(line, overlayLayer);
-            this.overlays.push(line);
-        }
-        line.setAttribute('x1', x1);
-        line.setAttribute('y1', y1);
-        line.setAttribute('x2', x2);
-        line.setAttribute('y2', y2);
-        if (className)
-            line.setAttribute('class', className);
-        return line;
-    }
-    _drawCircleOverlay(x, y, radius, className, circle, overlayLayer) {
-        if (!circle) {
-            circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-            this.overlayLayerView.addOverlay(circle, overlayLayer);
-            this.overlays.push(circle);
-        }
-        circle.setAttribute('cx', x);
-        circle.setAttribute('cy', y);
-        circle.setAttribute('r', radius);
-        if (className)
-            circle.setAttribute('class', className);
-        return circle;
-    }
-    _drawRect(x, y, w, h, className, rect, overlayLayer) {
-        if (!rect) {
-            rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-            this.overlayLayerView.addOverlay(rect, overlayLayer);
-            this.overlays.push(rect);
-        }
-        rect.setAttribute('x', x);
-        rect.setAttribute('y', y);
-        rect.setAttribute('width', w);
-        rect.setAttribute('height', h);
-        if (className)
-            rect.setAttribute('class', className);
-        return rect;
-    }
-    _drawText(text, x, y, className, textEl, overlayLayer) {
-        if (!textEl) {
-            textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
-            this.overlayLayerView.addOverlay(textEl, overlayLayer);
-            this.overlays.push(textEl);
-        }
-        textEl.setAttribute('x', x);
-        textEl.setAttribute('y', y);
-        textEl.textContent = text;
-        if (className)
-            textEl.setAttribute('class', className);
-        return textEl;
     }
 }

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

@@ -0,0 +1,16 @@
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IExtensionManager } from "./IExtensionManger";
+import { OverlayLayerView } from '../overlayLayerView';
+import { OverlayLayer } from './OverlayLayer';
+export declare abstract class AbstractExtensionBase {
+    protected overlays: SVGGraphicsElement[];
+    protected overlayLayerView: OverlayLayerView;
+    protected extensionManager: IExtensionManager;
+    protected designerCanvas: IDesignerCanvas;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
+    protected _removeAllOverlays(): void;
+    protected _drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    protected _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
+    protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    protected _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+}

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

@@ -0,0 +1,50 @@
+export class AbstractExtensionBase {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerCanvas;
+    constructor(extensionManager, designerCanvas) {
+        this.extensionManager = extensionManager;
+        this.designerCanvas = designerCanvas;
+        this.overlayLayerView = designerCanvas.overlayLayer;
+    }
+    _removeAllOverlays() {
+        for (let o of this.overlays) {
+            try {
+                this.overlayLayerView.removeOverlay(o);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        this.overlays = [];
+    }
+    _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+        const newLine = this.overlayLayerView.drawLine(x1, y1, x2, y2, className, line, overlayLayer);
+        if (!line) {
+            this.overlays.push(newLine);
+        }
+        return newLine;
+    }
+    _drawCircle(x, y, radius, className, circle, overlayLayer) {
+        const newCircle = this.overlayLayerView.drawCircle(x, y, radius, className, circle, overlayLayer);
+        if (!circle) {
+            this.overlays.push(newCircle);
+        }
+        return newCircle;
+    }
+    _drawRect(x, y, w, h, className, rect, overlayLayer) {
+        const newRect = this.overlayLayerView.drawRect(x, y, w, h, className, rect, overlayLayer);
+        if (!rect) {
+            this.overlays.push(newRect);
+        }
+        return newRect;
+    }
+    _drawText(text, x, y, className, textEl, overlayLayer) {
+        const newText = this.overlayLayerView.drawText(text, x, y, className, textEl, overlayLayer);
+        if (!textEl) {
+            this.overlays.push(newText);
+        }
+        return newText;
+    }
+}

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

@@ -11,8 +11,8 @@ export class AltToEnterContainerExtension extends AbstractExtension {
     }
     refresh() {
         let itemRect = this.extendedItem.element.getBoundingClientRect();
-        this._text = this._drawText("Press ALT to enter container", itemRect.x - this.designerView.containerBoundingRect.x + 5, itemRect.y - this.designerView.containerBoundingRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Background);
-        this._rect = this._drawRect(itemRect.x - this.designerView.containerBoundingRect.x, itemRect.y - this.designerView.containerBoundingRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Background);
+        this._text = this._drawText("Press ALT to enter container", itemRect.x - this.designerCanvas.containerBoundingRect.x + 5, itemRect.y - this.designerCanvas.containerBoundingRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Background);
+        this._rect = this._drawRect(itemRect.x - this.designerCanvas.containerBoundingRect.x, itemRect.y - this.designerCanvas.containerBoundingRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Background);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -7,8 +7,8 @@ export class CanvasExtension extends AbstractExtension {
         let itemRect = this.extendedItem.element.getBoundingClientRect();
         const computedStyle = getComputedStyle(this.extendedItem.element);
         if (computedStyle.margin !== '0px') {
-            const xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
-            const yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
+            const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
+            const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
             const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
             const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
             const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));

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

@@ -29,13 +29,13 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.addEventListener('input', this._contentEditedBound);
         this.extendedItem.element.addEventListener('blur', this._blurBound);
         this.extendedItem.element.focus();
-        this.designerView.eatEvents = this.extendedItem.element;
+        this.designerCanvas.eatEvents = this.extendedItem.element;
         let itemRect = this.extendedItem.element.getBoundingClientRect();
         const elements = EditTextExtension.template.content.cloneNode(true);
         elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
         let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerView.containerBoundingRect.x));
-        foreignObject.setAttribute('y', '' + (itemRect.y - this.designerView.containerBoundingRect.y - 30));
+        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x));
+        foreignObject.setAttribute('y', '' + (itemRect.y - this.designerCanvas.containerBoundingRect.y - 30));
         foreignObject.setAttribute('width', '96');
         foreignObject.setAttribute('height', '24');
         foreignObject.appendChild(elements);
@@ -50,7 +50,7 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.removeAttribute('contenteditable');
         this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
         this.extendedItem.element.removeEventListener('blur', this._blurBound);
-        this.designerView.eatEvents = null;
+        this.designerCanvas.eatEvents = null;
         this.extendedItem.updateChildrenFromNodesChildren();
     }
     _contentEdited() {

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

@@ -12,4 +12,5 @@ export declare class ExtensionManager implements IExtensionManager {
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
+    refreshAllExtensions(designItems: IDesignItem[]): void;
 }