@node-projects/web-component-designer 0.0.215 → 0.0.217

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

@@ -1,40 +1,39 @@
-import { ServiceContainer } from '../../services/ServiceContainer.js';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
-import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
-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;
-    private _toolbar;
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    constructor();
-    zoomReset(): void;
-    zoomToFit(): void;
-    private _onScrollbar;
-    private _onWheel;
-    get designerWidth(): string;
-    set designerWidth(value: string);
-    get designerHeight(): string;
-    set designerHeight(value: string);
-    set additionalStyles(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, disableUndo?: boolean): Promise<void>;
-    static wrapInDesigner(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer): DesignerCanvas;
-}
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { DesignerCanvas } from "./designerCanvas.js";
+import { IDesignItem } from '../../item/IDesignItem.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;
+    private _toolbar;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor();
+    zoomReset(): void;
+    zoomToFit(): void;
+    private _onScrollbar;
+    private _onWheel;
+    get designerWidth(): string;
+    set designerWidth(value: string);
+    get designerHeight(): string;
+    set designerHeight(value: string);
+    set additionalStyles(value: CSSStyleSheet[]);
+    setDesignItems(designItems: IDesignItem[]): void;
+    executeCommand(command: IUiCommand): Promise<void>;
+    canExecuteCommand(command: IUiCommand): boolean;
+    initialize(serviceContainer: ServiceContainer): void;
+    getHTML(): string;
+    parseHTML(html: string, disableUndo?: boolean): Promise<void>;
+    static wrapInDesigner(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer): DesignerCanvas;
+}

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

@@ -1,31 +1,31 @@
-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';
-import { DesignerToolbar } from './tools/toolBar/DesignerToolbar.js';
-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;
-    _toolbar;
+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';
+import { DesignerToolbar } from './tools/toolBar/DesignerToolbar.js';
+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;
+    _toolbar;
     static style = css `
     :host {
       display: block;
@@ -127,7 +127,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>
@@ -147,190 +147,192 @@ 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();
-        this._restoreCachedInititalValues();
-        this._sVert = this._getDomElement('s-vert');
-        this._sHor = this._getDomElement('s-hor');
-        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._toolbar = new DesignerToolbar();
-        this._toolbar.id = 'tool-bar';
-        this._sVert.insertAdjacentElement('afterend', this._toolbar);
-        this._designerCanvas.onZoomFactorChanged.on(() => {
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
-            const pos = this.designerCanvas.canvasOffset;
-            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;
-            this._sHor.value = (pos.x / (-2 * w)) + 0.5;
-            this._sVert.value = (pos.y / (-2 * h)) + 0.5;
-        });
-        this._zoomInput = this._getDomElement('zoomInput');
-        this._zoomInput.onkeydown = (e) => {
-            if (e.key == 'Enter')
-                this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
-        };
-        this._zoomInput.onblur = () => {
-            this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
-        };
-        this._zoomInput.onclick = this._zoomInput.select;
-        let zoomIncrease = this._getDomElement('zoomIncrease');
-        zoomIncrease.onclick = () => {
-            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;
-            if (this._designerCanvas.zoomFactor > 0.1)
-                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor + 0.1);
-            else
-                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor + 0.01);
-        };
-        let zoomDecrease = this._getDomElement('zoomDecrease');
-        zoomDecrease.onclick = () => {
-            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;
-            if (this._designerCanvas.zoomFactor > 0.11)
-                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor - 0.1);
-            else
-                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor - 0.01);
-            if (this._designerCanvas.zoomFactor < 0.001)
-                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, 0.001);
-        };
-        let zoomReset = this._getDomElement('zoomReset');
-        zoomReset.onclick = () => {
-            this.zoomReset();
-        };
-        let zoomFit = this._getDomElement('zoomFit');
-        zoomFit.onclick = () => {
-            this.zoomToFit();
-        };
-        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.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
-        this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
-    }
-    zoomReset() {
-        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) + '%';
-    }
-    zoomToFit() {
-        this._designerCanvas.zoomToFit();
-    }
-    _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;
-            const wheel = event.deltaY < 0 ? 1 : (-1);
-            zf *= Math.exp(wheel * 0.2);
-            if (zf < 0.02)
-                zf = 0.02;
-            const vp = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this.designerCanvas.zoomTowardsPoint(vp, zf);
-        }
-        else if (event.shiftKey) {
-            this._sHor.value += event.deltaY / 10000;
-            this._onScrollbar(null);
-        }
-        else {
-            this._sVert.value += event.deltaY / 10000;
-            this._onScrollbar(null);
-            this._sHor.value += event.deltaX / 10000;
-            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 additionalStyles(value) {
-        this._designerCanvas.additionalStyles = 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);
-            }
-        }
-        this._toolbar.initialize(this.serviceContainer, this);
-    }
-    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, disableUndo = false) {
-        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);
-            if (disableUndo) {
-                this._designerCanvas._internalSetDesignItems(designItems);
-            }
-            else {
-                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();
+        this._restoreCachedInititalValues();
+        this._sVert = this._getDomElement('s-vert');
+        this._sHor = this._getDomElement('s-hor');
+        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._toolbar = new DesignerToolbar();
+        this._toolbar.id = 'tool-bar';
+        this._sVert.insertAdjacentElement('afterend', this._toolbar);
+        this._designerCanvas.onZoomFactorChanged.on(() => {
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+            const pos = this.designerCanvas.canvasOffset;
+            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;
+            this._sHor.value = (pos.x / (-2 * w)) + 0.5;
+            this._sVert.value = (pos.y / (-2 * h)) + 0.5;
+        });
+        this._zoomInput = this._getDomElement('zoomInput');
+        this._zoomInput.onkeydown = (e) => {
+            if (e.key == 'Enter')
+                this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
+        };
+        this._zoomInput.onblur = () => {
+            this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
+        };
+        this._zoomInput.onclick = this._zoomInput.select;
+        let zoomIncrease = this._getDomElement('zoomIncrease');
+        zoomIncrease.onclick = () => {
+            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;
+            if (this._designerCanvas.zoomFactor > 0.1)
+                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor + 0.1);
+            else
+                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor + 0.01);
+        };
+        let zoomDecrease = this._getDomElement('zoomDecrease');
+        zoomDecrease.onclick = () => {
+            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;
+            if (this._designerCanvas.zoomFactor > 0.11)
+                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor - 0.1);
+            else
+                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor - 0.01);
+            if (this._designerCanvas.zoomFactor < 0.001)
+                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, 0.001);
+        };
+        let zoomReset = this._getDomElement('zoomReset');
+        zoomReset.onclick = () => {
+            this.zoomReset();
+        };
+        let zoomFit = this._getDomElement('zoomFit');
+        zoomFit.onclick = () => {
+            this.zoomToFit();
+        };
+        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.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
+        this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
+    }
+    zoomReset() {
+        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) + '%';
+    }
+    zoomToFit() {
+        this._designerCanvas.zoomToFit();
+    }
+    _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;
+            const wheel = event.deltaY < 0 ? 1 : (-1);
+            zf *= Math.exp(wheel * 0.2);
+            if (zf < 0.02)
+                zf = 0.02;
+            const vp = this.designerCanvas.getNormalizedEventCoordinates(event);
+            this.designerCanvas.zoomTowardsPoint(vp, zf);
+        }
+        else if (event.shiftKey) {
+            this._sHor.value += event.deltaY / 10000;
+            this._onScrollbar(null);
+        }
+        else {
+            this._sVert.value += event.deltaY / 10000;
+            this._onScrollbar(null);
+            this._sHor.value += event.deltaX / 10000;
+            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 additionalStyles(value) {
+        this._designerCanvas.additionalStyles = 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);
+            }
+        }
+        this._toolbar.initialize(this.serviceContainer, this);
+    }
+    getHTML() {
+        //this.instanceServiceContainer.selectionService.setSelectedElements(null);
+        if (this._designerCanvas.rootDesignItem.childCount > 0) {
+            return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), true, true);
+        }
+        return '';
+    }
+    async parseHTML(html, disableUndo = false) {
+        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, false);
+            if (disableUndo) {
+                this._designerCanvas._internalSetDesignItems(designItems);
+            }
+            else {
+                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;
+    }
+}
+export { DesignerView };
+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.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-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.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+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,19 +1,19 @@
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IExtensionManager } from './IExtensionManger.js';
-import { OverlayLayerView } from '../overlayLayerView.js';
-import { OverlayLayer } from './OverlayLayer.js';
-import { IPoint } from '../../../../interfaces/IPoint.js';
-export declare abstract class AbstractExtensionBase {
-    protected overlays: SVGElement[];
-    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;
-    protected _drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
-    protected _drawTransformedRect(points: [IPoint, IPoint, IPoint, IPoint], className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
-}
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IExtensionManager } from './IExtensionManger.js';
+import { OverlayLayerView } from '../overlayLayerView.js';
+import { OverlayLayer } from './OverlayLayer.js';
+import { IPoint } from '../../../../interfaces/IPoint.js';
+export declare abstract class AbstractExtensionBase {
+    protected overlays: SVGElement[];
+    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;
+    protected _drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
+    protected _drawTransformedRect(points: [IPoint, IPoint, IPoint, IPoint], className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
+}