@node-projects/web-component-designer 0.1.0 → 0.1.2

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

@@ -0,0 +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';
+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

@@ -0,0 +1,339 @@
+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;
+    static style = css `
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      position: relative;
+      transform: translateZ(0);
+      overflow: hidden;
+    }
+    * {
+      touch-action: none;
+    }
+    #lowertoolbar {
+      height: 16px;
+      background: #787f82;
+      display: flex;
+      bottom: 0;
+      position: absolute;
+      font-size: 12px;
+      width: 100%;
+    }
+    input {
+      width: 40px;
+      height: 16px;
+      padding: 0;
+      border: 0;
+      font-size: 12px;
+      text-align: center;
+      margin-right: 1px;
+    }
+    .toolbar-control {
+      width: 16px;
+      height: 16px;
+      display: block;
+      margin-right: 1px;
+      cursor: default;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .selected {
+      background-color: deepskyblue;
+    }
+    .toolbar-control:hover {
+      background-color:rgba(164,206,249,.6);
+    }
+    #outer {
+      user-select: none;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+    }
+    #canvas {
+      left: 24px;
+      width: calc(100% - 24px - 16px);
+      height: calc(100% - 32px);
+    }
+
+    #tool-bar {
+      width: 24px;
+      height: calc(100% - 32px);
+      position: absolute;
+      background-color: lightgray;      
+    }
+  
+    .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==);
+    }
+    .zoom-out {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmVJREFUeNqkU01oE0EUnv3Nf0xsS01jEzWUNCUplh7U4kEiVVEQqyBYWDxor5am5JBeFRGCuXpRBA8KHqIHMYISohdTYlQo2kguaghJUNvd/O1udjvr7NKWZHuw4IMHM/v9zHu8t5iiKCAYDAKi/xQ4MHEdbIXFYgUmk2kUx/EouoZRulGWUaYhhHGe5wutVhOQKtk3/RToQ1HgjCjyCb+PrE0GjEW/x1Cr/YFCdoUPffwqpBAeQbRnmoEgCD1i9OoohHLi7EnHt3E/bfb0m/pwDGBeF04P77Mpex1SMZliE5IMV3FV0Gw2erJe56I+L6iNHDQYnRaaVsXb5uh8JGS3+w9hv1SeVkG9Xtd3EB4PDBecVtplpAmHKMMesN2R2Ymg7fer9PfwZgui3sC932X+gV53nGZSXj2Yf36B5oWNNtK5NQMIcT2nXKnyUt8eA6uSUf1YNyhKsFmptmWkK2sGFGXRG6Rzn7jDXo+1sdboSBSJEd0gVABYzrMOpEtrBi7+DqoCAnUn1JTo0IP3+dnkZKhdHnKaIEUSXRPCiA+fG2JmWXAaDPY4uXP+ipfqrBybOSEO3n/M4qWyoXrmuE30DJHWUkVupbMt44u3nJ2k7BGotAqkTjyGNvBiJBK9yTCzt5wjN15ncteuZnKNnk0kCHNcllsFVUN2iY8ODAyeX1yMxRjm8t319bVHNpEtYhjxbseago3t0+YU4Dmfzz+9sBCbZ5hL90qln0/Q5yLYRWgGoigGlpZuz8/NXXm4uvolqY4a7DI0A/RnvZyaGnNwHFdArbzZArla9p8GmDq2/4m/AgwATHQSD48kJDUAAAAASUVORK5CYII=);
+    }
+    .snap-grid {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAblJREFUeNqkUjtLA0EQnntFyKNKJdiFgIlGC5G0FlaaIsYgiKAgKIKdjbV/wM7GImBhI6JFMFWKK3yBimBAhJDuUEgimMSYS0hunbncHRtFjLjw7X7z7ezszM4KjDEQRRG+jnlEgvYAAgLAJpoT1tYdA9gzAAqLuC/DD4N1EZC87v1IYnZ0MBj0k/6Szw/nTs7GO+8f62gWBCuDHTRG+ABxgGScsd3JlYWlJogu9TSjkT41NzM0AEbr5uDocJmxLTv3CCJpgbRkAKcWpq14vP7scVqrVKsbBOKktayS7BL4RzB5uxvAo7++SfV6vYnmBenESaM9/qCESFt4pPUJJzrlLpe/vQ9pTeex8A0EQcggwILJo9EohMPhNVW9ZqFQaJvsWCzWozGuCxJ3gck1TYNGo+Hy+XxQKpXalUoFisUi1Go1RyM/uwtZLsADYkxRlGnMZLXT6QQkSSqglsIV0HY0XddTdgkqV4LD6YPJsgwYzLSJEygQraz70YDvRg9Hh3O8DdptM1uTEwzDMDnvTHVfWfy+D8592W4Jt1wJfXOnC0h8XMw/cbuEHOKZc/iNX9qC2cb/jE8BBgAvhdOb37HVsgAAAABJRU5ErkJggg==);
+    }
+    .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);
+    }
+    
+    .bottom-scroll {
+      width: calc(100% - 16px);
+      position: absolute;
+      bottom: 16px;
+      height: 16px;
+      box-sizing: border-box;
+      z-index: 1;
+    }
+    .right-scroll {
+      height: calc(100% - 32px);
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 16px;
+      box-sizing: border-box;
+      z-index: 1;
+    }
+    .bottom-right {
+      width: 16px;
+      height: 16px;
+      bottom: 16px;
+      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>
+      <div class="bottom-right"></div>
+      <div id="lowertoolbar">
+        <input id="zoomInput" type="text" value="100%">
+        <div title="decrease zoom" id="zoomIncrease" class="toolbar-control zoom-in"></div>
+        <div title="increase zoom" id="zoomDecrease" class="toolbar-control zoom-out"></div>
+        <div title="reset zoom" id="zoomReset" class="toolbar-control"
+          style="width: 16px; height: 16px; font-size: 14px; display: flex; align-items: center; justify-content: center;">1
+        </div>
+        <div title="zoom to fit" id="zoomFit" class="toolbar-control"
+          style="width: 16px; height: 16px; font-size: 8px; display: flex; align-items: center; justify-content: center;">
+          100%</div>
+        <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() {
+        //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;
+    }
+}
+customElements.define('node-projects-designer-view', DesignerView);

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

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

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,21 @@
+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 _addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
+    protected _drawGroup(className?: string, group?: SVGGElement, overlayLayer?: OverlayLayer): SVGGElement;
+    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;
+}

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

@@ -0,0 +1,77 @@
+import { OverlayLayer } from './OverlayLayer.js';
+export class AbstractExtensionBase {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerCanvas;
+    constructor(extensionManager, designerCanvas) {
+        this.extensionManager = extensionManager;
+        this.designerCanvas = designerCanvas;
+        this.overlayLayerView = designerCanvas.overlayLayer;
+    }
+    _removeAllOverlays() {
+        for (let o of this.overlays) {
+            try {
+                this.overlayLayerView.removeOverlay(o);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        this.overlays = [];
+    }
+    _addOverlay(element, overlayLayer = OverlayLayer.Normal) {
+        this.overlayLayerView.addOverlay(this.constructor.name, element, overlayLayer);
+        this.overlays.push(element);
+    }
+    _drawGroup(className, group, overlayLayer) {
+        const newGroup = this.overlayLayerView.drawGroup(this.constructor.name, className, group, overlayLayer);
+        if (!group) {
+            this.overlays.push(newGroup);
+        }
+        return newGroup;
+    }
+    _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+        const newLine = this.overlayLayerView.drawLine(this.constructor.name, x1, y1, x2, y2, className, line, overlayLayer);
+        if (!line) {
+            this.overlays.push(newLine);
+        }
+        return newLine;
+    }
+    _drawCircle(x, y, radius, className, circle, overlayLayer) {
+        const newCircle = this.overlayLayerView.drawCircle(this.constructor.name, x, y, radius, className, circle, overlayLayer);
+        if (!circle) {
+            this.overlays.push(newCircle);
+        }
+        return newCircle;
+    }
+    _drawRect(x, y, w, h, className, rect, overlayLayer) {
+        const newRect = this.overlayLayerView.drawRect(this.constructor.name, x, y, w, h, className, rect, overlayLayer);
+        if (!rect) {
+            this.overlays.push(newRect);
+        }
+        return newRect;
+    }
+    _drawText(text, x, y, className, textEl, overlayLayer) {
+        const newText = this.overlayLayerView.drawText(this.constructor.name, text, x, y, className, textEl, overlayLayer);
+        if (!textEl) {
+            this.overlays.push(newText);
+        }
+        return newText;
+    }
+    _drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer) {
+        const newEls = this.overlayLayerView.drawTextWithBackground(this.constructor.name, text, x, y, backgroundColor, className, existingEls, overlayLayer);
+        if (!existingEls) {
+            this.overlays.push(...newEls);
+        }
+        return newEls;
+    }
+    _drawTransformedRect(points, className, path, overlayLayer) {
+        let data = "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + "Z";
+        const newPath = this.overlayLayerView.drawPath(this.constructor.name, data, className, path, overlayLayer);
+        if (!path) {
+            this.overlays.push(newPath);
+        }
+        return newPath;
+    }
+}

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

@@ -0,0 +1,11 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class AltToEnterContainerExtension extends AbstractExtension {
+    private _text;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,21 @@
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from "./OverlayLayer.js";
+export class AltToEnterContainerExtension extends AbstractExtension {
+    _text;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
+        this._text.style.fontSize = (14 / this.designerCanvas.scaleFactor) + 'px';
+        this._text.setAttribute('x', '' + (itemRect.x + 5 / this.designerCanvas.scaleFactor));
+        this._text.setAttribute('y', '' + (itemRect.y + 12 / this.designerCanvas.scaleFactor));
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class AltToEnterContainerExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,13 @@
+import { AltToEnterContainerExtension } from './AltToEnterContainerExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class AltToEnterContainerExtensionProvider {
+    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-weight:800; font-family: monospace; }
+  `;
+}

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

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

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

@@ -0,0 +1,27 @@
+import { AbstractExtension } from './AbstractExtension.js';
+export class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        if (computedStyle.margin !== '0px') {
+            const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+            const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+            const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
+            const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
+            this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin');
+            this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin');
+            this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin');
+            this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
+        }
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class CanvasExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,15 @@
+import { CanvasExtension } from './CanvasExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class CanvasExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'block')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new CanvasExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-margin { fill: #ff944722; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.d.ts

@@ -0,0 +1,24 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from '../IExtensionManger.js';
+export type handlesPointerEvent = {
+    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
+};
+export declare class EditTextExtension extends AbstractExtension implements handlesPointerEvent {
+    private static template;
+    private _contentEditedBound;
+    private _blurBound;
+    private _blurTimeout;
+    private _foreignObject;
+    private _focusBound;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
+    _contentEdited(): void;
+    _blur(): void;
+    _focus(): void;
+    _formatSelection(type: string): void;
+}