@node-projects/web-component-designer 0.0.38 → 0.0.44

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,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     /* --- start IUiCommandHandler --- */
     async executeCommand(command) {
+        const modelCommandService = this.serviceContainer.modelCommandService;
+        if (modelCommandService) {
+            let handeled = modelCommandService.executeCommand(this, command);
+            if (handeled != null)
+                return;
+        }
         switch (command.type) {
             case CommandType.screenshot:
                 {
@@ -194,12 +199,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 +215,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     canExecuteCommand(command) {
+        const modelCommandService = this.serviceContainer.modelCommandService;
+        if (modelCommandService) {
+            let handeled = modelCommandService.canExecuteCommand(this, command);
+            if (handeled !== null)
+                return handeled;
+        }
         if (command.type === CommandType.undo) {
             return this.instanceServiceContainer.undoService.canUndo();
         }
@@ -256,17 +261,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 +270,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 +548,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;
 }

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

@@ -200,4 +200,18 @@ export class ExtensionManager {
             }
         }
     }
+    refreshAllExtensions(designItems) {
+        if (designItems) {
+            this.refreshExtensions(designItems, ExtensionType.Permanent);
+            this.refreshExtensions(designItems, ExtensionType.Selection);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelection);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer);
+            this.refreshExtensions(designItems, ExtensionType.MouseOver);
+            this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected);
+            this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDragOver);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDrag);
+            this.refreshExtensions(designItems, ExtensionType.Doubleclick);
+        }
+    }
 }

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

@@ -14,8 +14,5 @@ export declare enum ExtensionType {
      * Extension for the Current Container wich the dragged element is contained.
      */
     ContainerDrag = 256,
-    /**
-     * Extension for the Current Container wich the dragged element is contained.
-     */
     Doubleclick = 512
 }

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

@@ -15,8 +15,5 @@ export var ExtensionType;
      * Extension for the Current Container wich the dragged element is contained.
      */
     ExtensionType[ExtensionType["ContainerDrag"] = 256] = "ContainerDrag";
-    /**
-     * Extension for the Current Container wich the dragged element is contained.
-     */
     ExtensionType[ExtensionType["Doubleclick"] = 512] = "Doubleclick";
 })(ExtensionType || (ExtensionType = {}));

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

@@ -18,11 +18,11 @@ export class GrayOutExtension extends AbstractExtension {
         this.drawGrayOut(itemRect);
     }
     drawGrayOut(rect) {
-        let r = { x: rect.x - this.designerView.containerBoundingRect.x, y: rect.y - this.designerView.containerBoundingRect.y, width: rect.width, height: rect.height };
-        const pathPoints = "M0 0 L0 " + this.designerView.containerBoundingRect.height + "L" + r.x + " " + this.designerView.containerBoundingRect.height + "L" + r.x + " 0" + " L0 0" +
-            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + this.designerView.containerBoundingRect.width + " " + r.y + "L" + this.designerView.containerBoundingRect.width + " 0" + "L" + r.x + " 0" +
-            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + this.designerView.containerBoundingRect.height + "L" + this.designerView.containerBoundingRect.width + " " + this.designerView.containerBoundingRect.height + "L" + this.designerView.containerBoundingRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
-            "M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + this.designerView.containerBoundingRect.width + " " + (r.y + r.height) + "L" + this.designerView.containerBoundingRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
+        let r = { x: rect.x - this.designerCanvas.containerBoundingRect.x, y: rect.y - this.designerCanvas.containerBoundingRect.y, width: rect.width, height: rect.height };
+        const pathPoints = "M0 0 L0 " + this.designerCanvas.containerBoundingRect.height + "L" + r.x + " " + this.designerCanvas.containerBoundingRect.height + "L" + r.x + " 0" + " L0 0" +
+            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + this.designerCanvas.containerBoundingRect.width + " " + r.y + "L" + this.designerCanvas.containerBoundingRect.width + " 0" + "L" + r.x + " 0" +
+            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + this.designerCanvas.containerBoundingRect.height + "L" + this.designerCanvas.containerBoundingRect.width + " " + this.designerCanvas.containerBoundingRect.height + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
+            "M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y + r.height) + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
         this._path.setAttribute("d", pathPoints);
     }
     dispose() {

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

@@ -13,8 +13,8 @@ export class GridExtension extends AbstractExtension {
         let xGap = 0;
         let yGap = 0;
         let rw = 0;
-        let xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
-        let yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
+        let xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
+        let yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
         let gridA = null;
         if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
             gridA = computedStyle.gridTemplateAreas.split('\"');

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

@@ -7,4 +7,5 @@ export interface IExtensionManager {
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
+    refreshAllExtensions(designItems: IDesignItem[]): any;
 }

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

@@ -14,7 +14,7 @@ export class InvisibleDivExtension extends AbstractExtension {
         const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
         const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
         const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-        this._rect = this._drawRect(itemRect.x - this.designerView.containerBoundingRect.x - left, itemRect.y - this.designerView.containerBoundingRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-invisible-div', this._rect);
+        this._rect = this._drawRect(itemRect.x - this.designerCanvas.containerBoundingRect.x - left, itemRect.y - this.designerCanvas.containerBoundingRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-invisible-div', this._rect);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -10,8 +10,8 @@ export class MouseOverExtension extends AbstractExtension {
     }
     refresh() {
         let itemRect = this.extendedItem.element.getBoundingClientRect();
-        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;
         this._rect = this._drawRect(xOffset - offset, yOffset - offset, itemRect.width + offset + offset, itemRect.height + offset + offset, 'svg-hover', this._rect);
     }
     dispose() {

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

@@ -63,10 +63,10 @@ export class PathExtension extends AbstractExtension {
         }
     }
     _drawPathCircle(x, y) {
-        this._drawCircleOverlay(this._parentRect.x - this.designerView.containerBoundingRect.x + x, this._parentRect.y - this.designerView.containerBoundingRect.y + y, 3, 'svg-path');
+        this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 3, 'svg-path');
     }
     _drawPathLine(x1, y1, x2, y2) {
-        this._drawLineOverlay(this._parentRect.x - this.designerView.containerBoundingRect.x + x1, this._parentRect.y - this.designerView.containerBoundingRect.y + y1, this._parentRect.x - this.designerView.containerBoundingRect.x + x2, this._parentRect.y - this.designerView.containerBoundingRect.y + y2, 'svg-path-line');
+        this._drawLine(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');
     }
     refresh() {
         this._removeAllOverlays();