@node-projects/web-component-designer 0.0.84 → 0.0.85

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

@@ -1,37 +1,37 @@
-import { ServiceContainer } from '../../services/ServiceContainer';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
-import { IUiCommand } from '../../../commandHandling/IUiCommand';
-import { DesignerCanvas } from "./designerCanvas.js";
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
-export declare class DesignerView extends BaseCustomWebComponentConstructorAppend implements IUiCommandHandler {
-    private _sVert;
-    private _sHor;
-    get serviceContainer(): ServiceContainer;
-    set serviceContainer(value: ServiceContainer);
-    get instanceServiceContainer(): InstanceServiceContainer;
-    set instanceServiceContainer(value: InstanceServiceContainer);
-    private _designerCanvas;
-    get designerCanvas(): DesignerCanvas;
-    private _zoomInput;
-    private _lowertoolbar;
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    constructor();
-    private _onScrollbar;
-    private _onWheel;
-    get designerWidth(): string;
-    set designerWidth(value: string);
-    get designerHeight(): string;
-    set designerHeight(value: string);
-    set additionalStyle(value: CSSStyleSheet);
-    setDesignItems(designItems: IDesignItem[]): void;
-    executeCommand(command: IUiCommand): Promise<void>;
-    canExecuteCommand(command: IUiCommand): boolean;
-    initialize(serviceContainer: ServiceContainer): void;
-    getHTML(designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;
-    parseHTML(html: string): Promise<void>;
-    static wrapInDesigner(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer): DesignerCanvas;
-}
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
+import { IUiCommand } from '../../../commandHandling/IUiCommand';
+import { DesignerCanvas } from "./designerCanvas.js";
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+export declare class DesignerView extends BaseCustomWebComponentConstructorAppend implements IUiCommandHandler {
+    private _sVert;
+    private _sHor;
+    get serviceContainer(): ServiceContainer;
+    set serviceContainer(value: ServiceContainer);
+    get instanceServiceContainer(): InstanceServiceContainer;
+    set instanceServiceContainer(value: InstanceServiceContainer);
+    private _designerCanvas;
+    get designerCanvas(): DesignerCanvas;
+    private _zoomInput;
+    private _lowertoolbar;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor();
+    private _onScrollbar;
+    private _onWheel;
+    get designerWidth(): string;
+    set designerWidth(value: string);
+    get designerHeight(): string;
+    set designerHeight(value: string);
+    set additionalStyle(value: CSSStyleSheet);
+    setDesignItems(designItems: IDesignItem[]): void;
+    executeCommand(command: IUiCommand): Promise<void>;
+    canExecuteCommand(command: IUiCommand): boolean;
+    initialize(serviceContainer: ServiceContainer): void;
+    getHTML(designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;
+    parseHTML(html: string): Promise<void>;
+    static wrapInDesigner(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer): DesignerCanvas;
+}

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

@@ -1,30 +1,30 @@
-import { css, DomHelper, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { DesignerCanvas } from "./designerCanvas.js";
-import { DomConverter } from './DomConverter.js';
-import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
-import { EventNames } from '../../../enums/EventNames.js';
-const autoZomOffset = 10;
-export class DesignerView extends BaseCustomWebComponentConstructorAppend {
-    _sVert;
-    _sHor;
-    get serviceContainer() {
-        return this._designerCanvas.serviceContainer;
-    }
-    set serviceContainer(value) {
-        this._designerCanvas.serviceContainer = value;
-    }
-    get instanceServiceContainer() {
-        return this._designerCanvas.instanceServiceContainer;
-    }
-    set instanceServiceContainer(value) {
-        this._designerCanvas.instanceServiceContainer = value;
-    }
-    _designerCanvas;
-    get designerCanvas() {
-        return this._designerCanvas;
-    }
-    _zoomInput;
-    _lowertoolbar;
+import { css, DomHelper, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { DesignerCanvas } from "./designerCanvas.js";
+import { DomConverter } from './DomConverter.js';
+import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
+import { EventNames } from '../../../enums/EventNames.js';
+const autoZomOffset = 10;
+export class DesignerView extends BaseCustomWebComponentConstructorAppend {
+    _sVert;
+    _sHor;
+    get serviceContainer() {
+        return this._designerCanvas.serviceContainer;
+    }
+    set serviceContainer(value) {
+        this._designerCanvas.serviceContainer = value;
+    }
+    get instanceServiceContainer() {
+        return this._designerCanvas.instanceServiceContainer;
+    }
+    set instanceServiceContainer(value) {
+        this._designerCanvas.instanceServiceContainer = value;
+    }
+    _designerCanvas;
+    get designerCanvas() {
+        return this._designerCanvas;
+    }
+    _zoomInput;
+    _lowertoolbar;
     static style = css `
     :host {
       display: block;
@@ -114,7 +114,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       right: 0;
       position: absolute;
       background: #f0f0f0;
-    }`;
+    }`;
     static template = html `
     <div id="outer">
       <node-projects-plain-scrollbar id="s-hor" value="0.5" class="bottom-scroll"></node-projects-plain-scrollbar>
@@ -133,171 +133,186 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         <div title="snap to grid" id="alignGrid" class="toolbar-control snap-grid"></div>
         <div title="snap to elements" id="alignSnap" class="toolbar-control snap-guide"></div>
       </div>
-    </div>`;
-    constructor() {
-        super();
-        const outer = this._getDomElement('outer');
-        this._designerCanvas = new DesignerCanvas();
-        this._designerCanvas.id = "canvas";
-        this._designerCanvas.appendChild(document.createElement("slot"));
-        outer.insertAdjacentElement('afterbegin', this._designerCanvas);
-        this._zoomInput = this._getDomElement('zoomInput');
-        this._zoomInput.onkeydown = (e) => {
-            if (e.key == 'Enter')
-                this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
-        };
-        this._zoomInput.onblur = () => {
-            this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
-        };
-        this._zoomInput.onclick = this._zoomInput.select;
-        let zoomIncrease = this._getDomElement('zoomIncrease');
-        zoomIncrease.onclick = () => {
-            this._designerCanvas.zoomFactor += 0.1;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
-        };
-        let zoomDecrease = this._getDomElement('zoomDecrease');
-        zoomDecrease.onclick = () => {
-            this._designerCanvas.zoomFactor -= 0.1;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
-        };
-        let zoomReset = this._getDomElement('zoomReset');
-        zoomReset.onclick = () => {
-            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
-            this._designerCanvas.zoomFactor = 1;
-            this._sVert.value = 0.5;
-            this._sHor.value = 0.5;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
-        };
-        let zoomFit = this._getDomElement('zoomFit');
-        zoomFit.onclick = () => {
-            let maxX = 0, maxY = 0, minX = 0, minY = 0;
-            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
-            this._designerCanvas.zoomFactor = 1;
-            for (let n of DomHelper.getAllChildNodes(this.designerCanvas.rootDesignItem.element)) {
-                if (n instanceof Element) {
-                    const rect = n.getBoundingClientRect();
-                    minX = minX < rect.x ? minX : rect.x;
-                    minY = minY < rect.y ? minY : rect.y;
-                    maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
-                    maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
-                }
-            }
-            const cvRect = this.designerCanvas.getBoundingClientRect();
-            maxX -= cvRect.x;
-            maxY -= cvRect.y;
-            let scaleX = cvRect.width / (maxX / this._designerCanvas.zoomFactor);
-            let scaleY = cvRect.height / (maxY / this._designerCanvas.zoomFactor);
-            this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
-        };
-        this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
-        let alignSnap = this._getDomElement('alignSnap');
-        alignSnap.onclick = () => { this._designerCanvas.alignOnSnap = !this._designerCanvas.alignOnSnap; alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : ''; };
-        alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : '';
-        let alignGrid = this._getDomElement('alignGrid');
-        alignGrid.onclick = () => { this._designerCanvas.alignOnGrid = !this._designerCanvas.alignOnGrid; alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : ''; };
-        alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : '';
-        this._lowertoolbar = this._getDomElement('lowertoolbar');
-        this._sVert = this._getDomElement('s-vert');
-        this._sHor = this._getDomElement('s-hor');
-        this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
-        this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
-    }
-    _onScrollbar(e) {
-        if (e?.detail == 'incrementLarge')
-            e.target.value += 0.25;
-        else if (e?.detail == 'decrementLarge')
-            e.target.value -= 0.25;
-        else if (e?.detail == 'incrementSmall')
-            e.target.value += 0.05;
-        else if (e?.detail == 'decrementSmall')
-            e.target.value -= 0.05;
-        const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth;
-        const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight;
-        const x = w * (this._sHor.value - 0.5) * -2;
-        const y = h * (this._sVert.value - 0.5) * -2;
-        this.designerCanvas.canvasOffset = { x, y };
-    }
-    _onWheel(event) {
-        event.preventDefault();
-        if (event.ctrlKey) {
-            let zf = this._designerCanvas.zoomFactor;
-            zf += event.deltaY * -0.001; //deltamode = 0
-            if (zf < 0.02)
-                zf = 0.02;
-            this._designerCanvas.zoomFactor = zf;
-            this._zoomInput.value = Math.round(zf * 100) + '%';
-            //TODO: we should zoom on the current cursor position, so it stays the center
-        }
-        else {
-            this._sHor.value += event.deltaX / 1000;
-            this._sVert.value += event.deltaY / 1000;
-            this._onScrollbar(null);
-        }
-    }
-    get designerWidth() {
-        return this._designerCanvas.designerWidth;
-    }
-    set designerWidth(value) {
-        this._designerCanvas.designerWidth = value;
-    }
-    get designerHeight() {
-        return this._designerCanvas.designerHeight;
-    }
-    set designerHeight(value) {
-        this._designerCanvas.designerHeight = value;
-    }
-    set additionalStyle(value) {
-        this._designerCanvas.additionalStyle = value;
-    }
-    setDesignItems(designItems) {
-        this._designerCanvas.setDesignItems(designItems);
-    }
-    /* --- start IUiCommandHandler --- */
-    async executeCommand(command) {
-        this._designerCanvas.executeCommand(command);
-    }
-    canExecuteCommand(command) {
-        return this._designerCanvas.canExecuteCommand(command);
-    }
-    /* --- end IUiCommandHandler --- */
-    initialize(serviceContainer) {
-        this.serviceContainer = serviceContainer;
-        this._designerCanvas.initialize(serviceContainer);
-        if (serviceContainer.designViewConfigButtons) {
-            for (let provider of serviceContainer.designViewConfigButtons) {
-                for (let btn of provider.provideButtons(this, this._designerCanvas))
-                    this._lowertoolbar.appendChild(btn);
-            }
-        }
-    }
-    getHTML(designItemsAssignmentList) {
-        //this.instanceServiceContainer.selectionService.setSelectedElements(null);
-        if (this._designerCanvas.rootDesignItem.childCount > 0)
-            return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), designItemsAssignmentList);
-        return '';
-    }
-    async parseHTML(html) {
-        const parserService = this.serviceContainer.htmlParserService;
-        if (!html) {
-            this.instanceServiceContainer.undoService.clear();
-            this._designerCanvas.overlayLayer.removeAllOverlays();
-            DomHelper.removeAllChildnodes(this._designerCanvas.overlayLayer);
-            this._designerCanvas.rootDesignItem.clearChildren();
-        }
-        else {
-            const designItems = await parserService.parse(html, this.serviceContainer, this.instanceServiceContainer);
-            this._designerCanvas.setDesignItems(designItems);
-        }
-    }
-    static wrapInDesigner(elements, serviceContainer) {
-        const designerCanvas = new DesignerCanvas();
-        designerCanvas.initialize(serviceContainer);
-        const parser = designerCanvas.serviceContainer.getLastServiceWhere('htmlParserService', x => x.constructor == DefaultHtmlParserService);
-        designerCanvas.addDesignItems(parser.createDesignItems(elements, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
-        return designerCanvas;
-    }
-}
-customElements.define('node-projects-designer-view', DesignerView);
+    </div>`;
+    constructor() {
+        super();
+        const outer = this._getDomElement('outer');
+        this._designerCanvas = new DesignerCanvas();
+        this._designerCanvas.id = "canvas";
+        this._designerCanvas.appendChild(document.createElement("slot"));
+        outer.insertAdjacentElement('afterbegin', this._designerCanvas);
+        this._zoomInput = this._getDomElement('zoomInput');
+        this._zoomInput.onkeydown = (e) => {
+            if (e.key == 'Enter')
+                this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        this._zoomInput.onblur = () => {
+            this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        this._zoomInput.onclick = this._zoomInput.select;
+        let zoomIncrease = this._getDomElement('zoomIncrease');
+        zoomIncrease.onclick = () => {
+            if (this._designerCanvas.zoomFactor > 0.1)
+                this._designerCanvas.zoomFactor += 0.1;
+            else
+                this._designerCanvas.zoomFactor += 0.01;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        let zoomDecrease = this._getDomElement('zoomDecrease');
+        zoomDecrease.onclick = () => {
+            if (this._designerCanvas.zoomFactor > 0.11)
+                this._designerCanvas.zoomFactor -= 0.1;
+            else
+                this._designerCanvas.zoomFactor -= 0.01;
+            if (this._designerCanvas.zoomFactor < 0.001)
+                this._designerCanvas.zoomFactor = 0.001;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        let zoomReset = this._getDomElement('zoomReset');
+        zoomReset.onclick = () => {
+            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
+            this._designerCanvas.zoomFactor = 1;
+            this._sVert.value = 0.5;
+            this._sHor.value = 0.5;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        let zoomFit = this._getDomElement('zoomFit');
+        zoomFit.onclick = () => {
+            let maxX = 0, maxY = 0, minX = 0, minY = 0;
+            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
+            this._designerCanvas.zoomFactor = 1;
+            for (let n of DomHelper.getAllChildNodes(this.designerCanvas.rootDesignItem.element)) {
+                if (n instanceof Element) {
+                    const rect = n.getBoundingClientRect();
+                    minX = minX < rect.x ? minX : rect.x;
+                    minY = minY < rect.y ? minY : rect.y;
+                    maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
+                    maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
+                }
+            }
+            const cvRect = this.designerCanvas.getBoundingClientRect();
+            maxX -= cvRect.x;
+            maxY -= cvRect.y;
+            let scaleX = cvRect.width / (maxX / this._designerCanvas.zoomFactor);
+            let scaleY = cvRect.height / (maxY / this._designerCanvas.zoomFactor);
+            this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
+        let alignSnap = this._getDomElement('alignSnap');
+        alignSnap.onclick = () => { this._designerCanvas.alignOnSnap = !this._designerCanvas.alignOnSnap; alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : ''; };
+        alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : '';
+        let alignGrid = this._getDomElement('alignGrid');
+        alignGrid.onclick = () => { this._designerCanvas.alignOnGrid = !this._designerCanvas.alignOnGrid; alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : ''; };
+        alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : '';
+        this._lowertoolbar = this._getDomElement('lowertoolbar');
+        this._sVert = this._getDomElement('s-vert');
+        this._sHor = this._getDomElement('s-hor');
+        this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
+        this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
+    }
+    _onScrollbar(e) {
+        if (e?.detail == 'incrementLarge')
+            e.target.value += 0.25;
+        else if (e?.detail == 'decrementLarge')
+            e.target.value -= 0.25;
+        else if (e?.detail == 'incrementSmall')
+            e.target.value += 0.05;
+        else if (e?.detail == 'decrementSmall')
+            e.target.value -= 0.05;
+        const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth;
+        const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight;
+        const x = w * (this._sHor.value - 0.5) * -2;
+        const y = h * (this._sVert.value - 0.5) * -2;
+        this.designerCanvas.canvasOffset = { x, y };
+    }
+    _onWheel(event) {
+        event.preventDefault();
+        if (event.ctrlKey) {
+            let zf = this._designerCanvas.zoomFactor;
+            zf += event.deltaY * -0.001; //deltamode = 0
+            if (zf < 0.02)
+                zf = 0.02;
+            this._designerCanvas.zoomFactor = zf;
+            this._zoomInput.value = Math.round(zf * 100) + '%';
+            const rect = this.getBoundingClientRect();
+            //const xc = this.designerCanvas.canvasOffset.x;
+            //const yc = this.designerCanvas.canvasOffset.y;
+            const xp = event.x - rect.x;
+            const yp = event.y - rect.y;
+            const x = xp / zf * (1 - zf);
+            const y = yp / zf * (1 - zf);
+            this.designerCanvas.canvasOffset = { x, y };
+        }
+        else {
+            this._sHor.value += event.deltaX / 1000;
+            this._sVert.value += event.deltaY / 1000;
+            this._onScrollbar(null);
+        }
+    }
+    get designerWidth() {
+        return this._designerCanvas.designerWidth;
+    }
+    set designerWidth(value) {
+        this._designerCanvas.designerWidth = value;
+    }
+    get designerHeight() {
+        return this._designerCanvas.designerHeight;
+    }
+    set designerHeight(value) {
+        this._designerCanvas.designerHeight = value;
+    }
+    set additionalStyle(value) {
+        this._designerCanvas.additionalStyle = value;
+    }
+    setDesignItems(designItems) {
+        this._designerCanvas.setDesignItems(designItems);
+    }
+    /* --- start IUiCommandHandler --- */
+    async executeCommand(command) {
+        this._designerCanvas.executeCommand(command);
+    }
+    canExecuteCommand(command) {
+        return this._designerCanvas.canExecuteCommand(command);
+    }
+    /* --- end IUiCommandHandler --- */
+    initialize(serviceContainer) {
+        this.serviceContainer = serviceContainer;
+        this._designerCanvas.initialize(serviceContainer);
+        if (serviceContainer.designViewConfigButtons) {
+            for (let provider of serviceContainer.designViewConfigButtons) {
+                for (let btn of provider.provideButtons(this, this._designerCanvas))
+                    this._lowertoolbar.appendChild(btn);
+            }
+        }
+    }
+    getHTML(designItemsAssignmentList) {
+        //this.instanceServiceContainer.selectionService.setSelectedElements(null);
+        if (this._designerCanvas.rootDesignItem.childCount > 0)
+            return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), designItemsAssignmentList);
+        return '';
+    }
+    async parseHTML(html) {
+        const parserService = this.serviceContainer.htmlParserService;
+        if (!html) {
+            this.instanceServiceContainer.undoService.clear();
+            this._designerCanvas.overlayLayer.removeAllOverlays();
+            DomHelper.removeAllChildnodes(this._designerCanvas.overlayLayer);
+            this._designerCanvas.rootDesignItem.clearChildren();
+        }
+        else {
+            const designItems = await parserService.parse(html, this.serviceContainer, this.instanceServiceContainer);
+            this._designerCanvas.setDesignItems(designItems);
+        }
+    }
+    static wrapInDesigner(elements, serviceContainer) {
+        const designerCanvas = new DesignerCanvas();
+        designerCanvas.initialize(serviceContainer);
+        const parser = designerCanvas.serviceContainer.getLastServiceWhere('htmlParserService', x => x.constructor == DefaultHtmlParserService);
+        designerCanvas.addDesignItems(parser.createDesignItems(elements, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
+        return designerCanvas;
+    }
+}
+customElements.define('node-projects-designer-view', DesignerView);

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

@@ -1,12 +1,12 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-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;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+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;
+}

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

@@ -1,8 +1,8 @@
-import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
-export class AbstractExtension extends AbstractExtensionBase {
-    extendedItem;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView);
-        this.extendedItem = extendedItem;
-    }
-}
+import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
+export class AbstractExtension extends AbstractExtensionBase {
+    extendedItem;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView);
+        this.extendedItem = extendedItem;
+    }
+}

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

@@ -1,16 +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;
-}
+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;
+}