@node-projects/web-component-designer 0.0.93 → 0.0.96

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

@@ -1,39 +1,41 @@
-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();
-    zoomReset(): void;
-    zoomToFit(): void;
-    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;
+    private _tooldock;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor();
+    ready(): Promise<void>;
+    zoomReset(): void;
+    zoomToFit(): void;
+    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,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';
-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;
+    _tooldock;
     static style = css `
     :host {
       display: block;
@@ -77,9 +78,16 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       height: 100%;
     }
     #canvas {
-      width: calc(100% - 16px);
+      left: 24px;
+      width: calc(100% - 24px - 16px);
       height: calc(100% - 32px);
     }
+
+    #tool-bar{
+      width: 24px;
+      height: calc(100% - 32px);
+      position: absolute;
+    }
   
     .zoom-in {
       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAn9JREFUeNqkU11o01AUTtI06U/6tzHWbnNVS+k67FAG/gwfZEOcCrpNEBwEH2Q+Otqxh+5VEaHYV18UwQd9sk4Q+6CUKogbtSoM10qftJS2iGuT/iRpshvvDZu4DHHggY+TnHu+795zz7m4qqrYxfA6pjerlcHMZvMQQRCL8Hccoh+iBJECAMQEQci3Wk2MxP5iqgqmJUmIB3xkdTRoKgQG6Wr1JxBX1oTQx3UxCdcjMO2ZJiCK4g4y3HUIACV+bsL5dSRAWfwe636z0WBzWEFzn5vku5xyIZGsx2UF5AhEaDYbO8Dz3KLPi1X9B2iTy0pRiDx5/Z2bJgmGwDH8WMhuDxzEf6A8TYDneT3GR4JMzcVQThNlcCtANaM48pICutodxXTkkI1HeVslSPor6B/wWL7B3Z1n2KR3O3h05rkDOkd2eYoSxM025PVrAgAQeoFSuSLI3Q66jpJNRsIWPLvM5JJTTUkGGsqVtgJ5JU3AaLTqBVKZT9xh7yDT2Gh05G4bNQBzGETkBbkMVAxbzdadMJbSBDzCHXgKgKGZQJCp0IP32dnEaKhd6nOZAay7mXk6UUGeIHDDh88NKb0qumjaHiN391/1GjtrJ6ZPSb33H9eJYomuTJ601Qf7SKVYVlqplZblxRvOThrtEaC28qSOPAwncCYSWbzJsrO3XP4br9KZa1fTmcaOSTQYLDFFaeURh/yDfLynp/fCwkI0yrKX79ZqG49sUr2A44a3u+d08/fXVhfAeZ8vcDocjs6z7KV7xeL3JzBcwPZgmoAkScGlpdvzc3NXHuZyXxIwlMX2aJoAfFkvx8aGnRzH5WEpr7cXuerKPwVw1Lb/sV8CDACbf0U37X3NqwAAAABJRU5ErkJggg==);
@@ -116,11 +124,13 @@ 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>
-      <node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll"></node-projects-plain-scrollbar>
+      <node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll">
+      </node-projects-plain-scrollbar>
+      <node-projects-designer-tools-dock id="tool-bar" class="tool-bar"></node-projects-designer-tools-dock>
       <div class="bottom-right"></div>
       <div id="lowertoolbar">
         <input id="zoomInput" type="text" value="100%">
@@ -135,194 +145,205 @@ 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._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 = () => {
-            if (this._designerCanvas.zoomFactor > 0.1)
-                this._designerCanvas.zoomFactor += 0.1;
-            else
-                this._designerCanvas.zoomFactor += 0.01;
-        };
-        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.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 = 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));
-    }
-    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() {
-        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);
-        const dimensions = this.designerCanvas.getDesignSurfaceDimensions();
-        if (dimensions.width)
-            scaleX = cvRect.width / dimensions.width;
-        if (dimensions.height)
-            scaleY = cvRect.height / dimensions.height;
-        this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
-        this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
-    }
-    _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;
-            const vp = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this.designerCanvas.zoomTowardsPoint(vp, zf);
-        }
-        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();
+        this._restoreCachedInititalValues();
+        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._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 = () => {
+            if (this._designerCanvas.zoomFactor > 0.1)
+                this._designerCanvas.zoomFactor += 0.1;
+            else
+                this._designerCanvas.zoomFactor += 0.01;
+        };
+        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.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 = 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));
+    }
+    async ready() {
+        this._tooldock = await this._getDomElement('tool-bar');
+        this._tooldock.initialize(this.serviceContainer, this);
+    }
+    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() {
+        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);
+        const dimensions = this.designerCanvas.getDesignSurfaceDimensions();
+        if (dimensions.width)
+            scaleX = cvRect.width / dimensions.width;
+        if (dimensions.height)
+            scaleY = cvRect.height / dimensions.height;
+        this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
+        this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+    }
+    _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 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;
+    }
+}