@node-projects/web-component-designer 0.0.32 → 0.0.36

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

@@ -7,7 +7,6 @@ import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base
 import { dragDropFormatName } from '../../../Constants';
 import { ContentService } from '../../services/contentService/ContentService';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
-import { DomConverter } from './DomConverter';
 import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction';
@@ -23,13 +22,97 @@ import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelpe
 import { OverlayLayer } from "./extensions/OverlayLayer";
 import { OverlayLayerView } from './overlayLayerView';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
+    // Public Properties
+    serviceContainer;
+    instanceServiceContainer;
+    containerBoundingRect;
+    outerRect;
+    // IPlacementView
+    gridSize = 10;
+    alignOnGrid = false;
+    alignOnSnap = true;
+    snapLines;
+    overlayLayer;
+    rootDesignItem;
+    eatEvents;
+    _zoomFactor = 1;
+    get zoomFactor() {
+        return this._zoomFactor;
+    }
+    set zoomFactor(value) {
+        this._zoomFactor = value;
+        this.zoomFactorChanged();
+    }
+    // Private Variables
+    _canvas;
+    _canvasContainer;
+    _outercanvas2;
+    _lastHoverDesignItem;
+    _onContextMenuBound;
+    _pointerEventHandlerBound;
+    _firstConnect;
+    _onKeyDownBound;
+    _onKeyUpBound;
+    static style = css `
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      position: relative;
+      transform: translateZ(0);
+      overflow: hidden;
+    }
+    * {
+      touch-action: none;
+    }
+    #node-projects-designer-canvas-canvas {
+      background-color: var(--canvas-background, white);
+      /* 10px grid, using http://www.patternify.com/ */
+      background-image: url(data:image/png;base64,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);
+      background-position: 0px 0px;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      transform-origin: 0 0;
+    }
+
+    #node-projects-designer-canvas-canvas.dragFileActive {
+      outline: blue 4px solid;
+      outline-offset: -4px;
+    }
+
+    node-projects-overlay-layer-view {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      overflow: visible;
+      user-select: none;
+      z-index: 999999999999;
+    }
+    
+    #node-projects-designer-canvas-canvas * {
+      cursor: pointer;
+      user-select: none;
+    }`;
+    static template = html `
+        <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
+          <div style="width: 100%;height: 100%;">
+            <div id="node-projects-designer-canvas-outercanvas2" style="width: 100%;height: 100%;position: relative;overflow: auto;">
+              <div id="node-projects-designer-canvas-canvasContainer" style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;/* bottom: 0; does not work with fixed sized when size is bigger then view */left: 0;user-select: none;">
+                <!-- <div id="zoomHelper" style="width: 10px; height: 10px; position: absolute; top: 0; left: 0; pointer-events: none;"></div> -->
+                <div id="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
+              </div>
+            </div>
+          </div>
+        </div>`;
+    extensionManager;
+    _onDblClickBound;
     constructor() {
         super();
-        // IPlacementView
-        this.gridSize = 10;
-        this.alignOnGrid = false;
-        this.alignOnSnap = true;
-        this._zoomFactor = 1;
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
@@ -44,13 +127,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._pointerEventHandlerBound = this._pointerEventHandler.bind(this);
         this._canvas.oncontextmenu = this._onContextMenuBound;
     }
-    get zoomFactor() {
-        return this._zoomFactor;
-    }
-    set zoomFactor(value) {
-        this._zoomFactor = value;
-        this.zoomFactorChanged();
-    }
     get designerWidth() {
         return this._canvasContainer.style.width;
     }
@@ -134,6 +210,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             case CommandType.paste:
                 this.handlePasteCommand();
                 break;
+            case CommandType.selectAll:
+                this.handleSelectAll();
+                break;
         }
     }
     canExecuteCommand(command) {
@@ -149,15 +228,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return true;
     }
     /* --- end IUiCommandHandler --- */
-    handleCopyCommand() {
-        const copyText = DomConverter.ConvertToString(this.instanceServiceContainer.selectionService.selectedElements, null);
-        navigator.clipboard.writeText(copyText);
+    handleSelectAll() {
+        this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
+    }
+    async handleCopyCommand() {
+        await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
     }
     async handlePasteCommand() {
-        const text = await navigator.clipboard.readText();
-        const parserService = this.serviceContainer.htmlParserService;
+        const designItems = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
-        const designItems = await parserService.parse(text, this.serviceContainer, this.instanceServiceContainer);
         if (designItems) {
             for (let di of designItems) {
                 this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
@@ -178,7 +257,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.selectionService.setSelectedElements(null);
     }
     handleMoveCommand(command) {
-        //TODO: -> via undo redo service
         let sel = this.instanceServiceContainer.selectionService.primarySelection;
         if (command == CommandType.moveBackward)
             this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.previousElementSibling), 'beforebegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
@@ -217,20 +295,20 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this._outercanvas2.addEventListener(EventNames.PointerDown, this._pointerEventHandlerBound);
             this._outercanvas2.addEventListener(EventNames.PointerMove, this._pointerEventHandlerBound);
             this._outercanvas2.addEventListener(EventNames.PointerUp, this._pointerEventHandlerBound);
-            this._canvas.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
-            this._canvas.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
-            this._canvas.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
-            this._canvas.addEventListener(EventNames.Drop, event => this._onDrop(event));
+            this._outercanvas2.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
+            this._outercanvas2.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
+            this._outercanvas2.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
+            this._outercanvas2.addEventListener(EventNames.Drop, event => this._onDrop(event));
             this._canvas.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
             this._canvas.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
             this._canvas.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
-            this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
         }
     }
     zoomFactorChanged() {
         //@ts-ignore
         this._canvasContainer.style.zoom = this._zoomFactor;
-        //this._zoomInput.value = (this._zoomFactor * 100).toFixed(0) + '%';
+        //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+')';
+        //this._canvasContainer.style.transformOrigin = '0 0';
         this._canvasContainer.style.bottom = this._outercanvas2.offsetHeight >= this._canvasContainer.offsetHeight ? '0' : '';
         this._canvasContainer.style.right = this._outercanvas2.offsetWidth >= this._canvasContainer.offsetWidth ? '0' : '';
         this.snapLines.clearSnaplines();
@@ -294,29 +372,19 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         else {
             this._fillCalculationrects();
-            let transferData = event.dataTransfer.getData(dragDropFormatName);
-            let elementDefinition = JSON.parse(transferData);
-            let di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
-            let grp = di.openGroup("Insert");
+            const position = this.getNormalizedEventCoordinates(event);
+            const transferData = event.dataTransfer.getData(dragDropFormatName);
+            const elementDefinition = JSON.parse(transferData);
+            const di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
+            const grp = di.openGroup("Insert");
             di.setStyle('position', 'absolute');
-            const targetRect = event.target.getBoundingClientRect();
-            di.setStyle('top', event.offsetY + targetRect.top - this.containerBoundingRect.y + 'px');
-            di.setStyle('left', event.offsetX + targetRect.left - this.containerBoundingRect.x + 'px');
+            di.setStyle('left', position.x + 'px');
+            di.setStyle('top', position.y + 'px');
             this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
             grp.commit();
             requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
         }
     }
-    _onWheel(event) {
-        if (event.ctrlKey) {
-            event.preventDefault();
-            this._zoomFactor += event.deltaY * -0.001; //deltamode = 0
-            if (this._zoomFactor < 0.1)
-                this._zoomFactor = 0.1;
-            this.zoomFactorChanged();
-            //TODO: we should zoom on the current cursor position, so it stays the center
-        }
-    }
     _onContextMenu(event) {
         event.preventDefault();
         const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
@@ -359,6 +427,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.executeCommand({ type: CommandType.redo });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'y')
             this.executeCommand({ type: CommandType.redo });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'a')
+            this.executeCommand({ type: CommandType.selectAll });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'c')
+            this.executeCommand({ type: CommandType.copy });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'v')
+            this.executeCommand({ type: CommandType.paste });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'x')
+            this.executeCommand({ type: CommandType.cut });
         else {
             let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
             if (!primarySelection) {
@@ -400,18 +476,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         event.preventDefault();
     }
-    getDesignerMousepoint(event, target, startPoint) {
-        let targetRect = target.getBoundingClientRect();
+    getNormalizedEventCoordinates(event) {
+        const offsetOfOuterX = (event.clientX - this.outerRect.x) / this.zoomFactor;
+        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x / this.zoomFactor;
+        const offsetOfOuterY = (event.clientY - this.outerRect.y) / this.zoomFactor;
+        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y / this.zoomFactor;
         return {
-            originalX: event.x - this.containerBoundingRect.x,
-            //containerOriginalX: event.x - this._ownBoundingRect.x,
-            x: (event.x - this.containerBoundingRect.x) / this._zoomFactor,
-            originalY: event.y - this.containerBoundingRect.y,
-            //containerOriginalY: event.y - this._ownBoundingRect.y,
-            y: (event.y - this.containerBoundingRect.y) / this._zoomFactor,
-            offsetInControlX: (startPoint ? startPoint.offsetInControlX : event.x - targetRect.x),
-            offsetInControlY: (startPoint ? startPoint.offsetInControlY : event.y - targetRect.y),
-            zoom: this._zoomFactor
+            x: offsetOfOuterX - offsetOfCanvasX,
+            y: offsetOfOuterY - offsetOfCanvasY
         };
     }
     //todo remove, is in base custom webcomp domhelper
@@ -464,8 +536,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         return currentElement;
     }
+    _rect;
     _pointerEventHandler(event) {
-        var _a, _b, _c;
+        this._fillCalculationrects();
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
         if (event.button == 2)
@@ -487,15 +560,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (currentElement && DesignerCanvas.getHost(currentElement.parentNode) === this.overlayLayer) {
             if (this.eatEvents)
                 return;
-            currentElement = (_b = (_a = this.instanceServiceContainer.selectionService.primarySelection) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : this._canvas;
+            currentElement = this.instanceServiceContainer.selectionService.primarySelection?.element ?? this._canvas;
         }
         this._fillCalculationrects();
-        let tool = (_c = this.serviceContainer.globalContext.tool) !== null && _c !== void 0 ? _c : this.serviceContainer.designerTools.get(NamedTools.Pointer);
+        let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer);
         this._canvas.style.cursor = tool.cursor;
         tool.pointerEventHandler(this, event, currentElement);
     }
     _fillCalculationrects() {
         this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
+        this.outerRect = this._outercanvas2.getBoundingClientRect();
     }
     addOverlay(element, overlayLayer = OverlayLayer.Normal) {
         this.overlayLayer.addOverlay(element, overlayLayer);
@@ -504,60 +578,4 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.overlayLayer.removeOverlay(element);
     }
 }
-DesignerCanvas.style = css `
-    :host {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      position: relative;
-      transform: translateZ(0);
-      overflow: hidden;
-    }
-    * {
-      touch-action: none;
-    }
-    #node-projects-designer-canvas-canvas {
-      background-color: var(--canvas-background, white);
-      /* 10px grid, using http://www.patternify.com/ */
-      background-image: url(data:image/png;base64,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);
-      background-position: 0px 0px;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      transform-origin: 0 0;
-    }
-
-    #node-projects-designer-canvas-canvas.dragFileActive {
-      outline: blue 4px solid;
-      outline-offset: -4px;
-    }
-
-    node-projects-overlay-layer-view {
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      overflow: visible;
-      user-select: none;
-      z-index: 999999999999;
-    }
-    
-    #node-projects-designer-canvas-canvas * {
-      cursor: pointer;
-      user-select: none;
-    }`;
-DesignerCanvas.template = html `
-        <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
-          <div style="width: 100%;height: 100%;">
-            <div id="node-projects-designer-canvas-outercanvas2" style="width: 100%;height: 100%;position: relative;overflow: auto;">
-              <div id="node-projects-designer-canvas-canvasContainer" style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;/* bottom: 0; does not work with fixed sized when size is bigger then view */left: 0;user-select: none;">
-                <!-- <div id="zoomHelper" style="width: 10px; height: 10px; position: absolute; top: 0; left: 0; pointer-events: none;"></div> -->
-                <div id="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
-              </div>
-            </div>
-          </div>
-        </div>`;
 customElements.define('node-projects-designer-canvas', DesignerCanvas);

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

@@ -16,6 +16,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     static readonly template: HTMLTemplateElement;
     private _designerCanvas;
     constructor();
+    private _onWheel;
     get designerWidth(): string;
     set designerWidth(value: string);
     get designerHeight(): string;

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

@@ -2,32 +2,8 @@ import { css, DomHelper, html, BaseCustomWebComponentConstructorAppend } from '@
 import { DesignerCanvas } from "./designerCanvas.js";
 import { DomConverter } from './DomConverter.js';
 import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
+import { EventNames } from '../../../enums/EventNames.js';
 export class DesignerView extends BaseCustomWebComponentConstructorAppend {
-    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.onchange = () => { this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100; };
-        this._zoomInput.onclick = this._zoomInput.select;
-        let zoomIncrease = this._getDomElement('zoomIncrease');
-        zoomIncrease.onclick = () => { this._designerCanvas.zoomFactor += 0.1; };
-        let zoomDecrease = this._getDomElement('zoomDecrease');
-        zoomDecrease.onclick = () => { this._designerCanvas.zoomFactor -= 0.1; };
-        let zoomReset = this._getDomElement('zoomReset');
-        zoomReset.onclick = () => { this._designerCanvas.zoomFactor = 1; };
-        let zoomFit = this._getDomElement('zoomFit');
-        zoomFit.onclick = () => { this._designerCanvas.zoomFactor = 7.7; };
-        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' : '';
-    }
     get serviceContainer() {
         return this._designerCanvas.serviceContainer;
     }
@@ -40,61 +16,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     set instanceServiceContainer(value) {
         this._designerCanvas.instanceServiceContainer = value;
     }
-    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);
-    }
-    getHTML(designItemsAssignmentList) {
-        this.instanceServiceContainer.selectionService.setSelectedElements(null);
-        return DomConverter.ConvertToString([...this._designerCanvas.rootDesignItem.children()], designItemsAssignmentList);
-    }
-    async parseHTML(html) {
-        const parserService = this.serviceContainer.htmlParserService;
-        if (!html) {
-            this.instanceServiceContainer.undoService.clear();
-            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;
-    }
-}
-DesignerView.style = css `
+    _zoomInput;
+    static style = css `
     :host {
       display: block;
       box-sizing: border-box;
@@ -153,7 +76,7 @@ DesignerView.style = css `
     .snap-guide {
       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYVJREFUeNqkU7tKA1EQnbs3CnlVqbQNARMjFilS+AnZQhIbW0ER/AA/wlYbhXR2wUKx0iKNYGMKDViEdEIgieBujGvCPpyz7sK6iWLIwJk798zsuXsfIxzHoXksAqcoij+vMbYq7MoszGxaEB3wtODlH3i5E5uojck210RCgq7SJie4MC0TsdO1cim/lMmkwHdarZWni+t16/1jz/FElJBAGc5imLzyakXNG0IuVo+OnwHE4JCzgisG7BJu/I3CQjyRuq1dvWi6vg8gBofcOHgGAZO+AFv88/VNDofDEcd3IBCD43ycfhEowY28Sazfnzh1cKMggWsUQvi4waiqKuVyud16/d7JZrOHxWJxKudMuQV3C81mk3RdX0wmk9Tr9UxN06jb7dJgMPjBwQRUAu/AtWg0SpZl7TDSUso2/1UVNWHOMIwJARzWBhcQwMXu1oJb9Ufbtsk0zYktPLrvgD8E/mWeYoNxxlj2xoZ3qI2/YrePQs10PksjTRPozCog5m3nLwEGABrLzseuHT6IAAAAAElFTkSuQmCC);
     }`;
-DesignerView.template = html `
+    static template = html `
         <div id="outer">          
           <div id="lowertoolbar">
             <input id="zoomInput" type="text" value="100%">
@@ -169,4 +92,117 @@ DesignerView.template = html `
             <div title="snap to elements" id="alignSnap" class="toolbar-control snap-guide"></div>
           </div>
         </div>`;
+    _designerCanvas;
+    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.zoomFactor = 1;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        let zoomFit = this._getDomElement('zoomFit');
+        zoomFit.onclick = () => {
+            this._designerCanvas.zoomFactor = 7.7;
+            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' : '';
+    }
+    _onWheel(event) {
+        if (event.ctrlKey) {
+            event.preventDefault();
+            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
+        }
+    }
+    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);
+    }
+    getHTML(designItemsAssignmentList) {
+        this.instanceServiceContainer.selectionService.setSelectedElements(null);
+        return DomConverter.ConvertToString([...this._designerCanvas.rootDesignItem.children()], designItemsAssignmentList);
+    }
+    async parseHTML(html) {
+        const parserService = this.serviceContainer.htmlParserService;
+        if (!html) {
+            this.instanceServiceContainer.undoService.clear();
+            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.js

@@ -1,6 +1,10 @@
 export class AbstractExtension {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerView;
+    extendedItem;
     constructor(extensionManager, designerView, extendedItem) {
-        this.overlays = [];
         this.extensionManager = extensionManager;
         this.designerView = designerView;
         this.extendedItem = extendedItem;

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

@@ -1,6 +1,8 @@
 import { AbstractExtension } from "./AbstractExtension";
 import { OverlayLayer } from "./OverlayLayer.js";
 export class AltToEnterContainerExtension extends AbstractExtension {
+    _text;
+    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }

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

@@ -1,16 +1,14 @@
 import { AltToEnterContainerExtension } from './AltToEnterContainerExtension';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class AltToEnterContainerExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
-    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
+    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
+  `;
 }

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

@@ -0,0 +1,10 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}