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

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

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

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

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

@@ -1,12 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
-export declare abstract class AbstractExtension extends AbstractExtensionBase implements IDesignerExtension {
-    protected extendedItem: IDesignItem;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    abstract extend(): any;
-    abstract refresh(): any;
-    abstract dispose(): any;
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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