@node-projects/web-component-designer 0.0.84 → 0.0.88

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

@@ -1,12 +1,12 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-export declare class RectangleSelectorTool implements ITool {
-    cursor: string;
-    private _rect;
-    private _initialPoint;
-    activated(serviceContainer: ServiceContainer): void;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-    dispose(): void;
-}
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+export declare class RectangleSelectorTool implements ITool {
+    cursor: string;
+    private _rect;
+    private _initialPoint;
+    activated(serviceContainer: ServiceContainer): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+    dispose(): void;
+}

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

@@ -1,82 +1,82 @@
-import { EventNames } from '../../../../enums/EventNames';
-import { DesignItem } from '../../../item/DesignItem';
-import { OverlayLayer } from '../extensions/OverlayLayer.js';
-export class RectangleSelectorTool {
-    cursor = 'progress';
-    _rect;
-    _initialPoint;
-    activated(serviceContainer) {
-    }
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                this._initialPoint = currentPoint;
-                if (!this._rect)
-                    this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-                this._rect.setAttribute('class', 'svg-selector');
-                this._rect.setAttribute('x', (this._initialPoint.x * designerCanvas.scaleFactor));
-                this._rect.setAttribute('y', (this._initialPoint.y * designerCanvas.scaleFactor));
-                this._rect.setAttribute('width', 0);
-                this._rect.setAttribute('height', 0);
-                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._initialPoint) {
-                    let w = currentPoint.x - this._initialPoint.x;
-                    let h = currentPoint.y - this._initialPoint.y;
-                    if (w >= 0) {
-                        this._rect.setAttribute('x', this._initialPoint.x);
-                        this._rect.setAttribute('width', w);
-                    }
-                    else {
-                        this._rect.setAttribute('x', currentPoint.x);
-                        this._rect.setAttribute('width', (-1 * w));
-                    }
-                    if (h >= 0) {
-                        this._rect.setAttribute('y', this._initialPoint.y);
-                        this._rect.setAttribute('height', h);
-                    }
-                    else {
-                        this._rect.setAttribute('y', currentPoint.y);
-                        this._rect.setAttribute('height', (-1 * h));
-                    }
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
-                const inSelectionElements = [];
-                let point = designerCanvas.overlayLayer.createPoint();
-                for (let e of elements) {
-                    let elementRect = e.getBoundingClientRect();
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
-                    const p1 = this._rect.isPointInFill(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
-                    const p2 = p1 && this._rect.isPointInFill(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
-                    const p3 = p2 && this._rect.isPointInFill(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
-                    const p4 = p3 && this._rect.isPointInFill(point);
-                    if (p4) {
-                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                        inSelectionElements.push(desItem);
-                    }
-                }
-                designerCanvas.overlayLayer.removeOverlay(this._rect);
-                this._rect = null;
-                this._initialPoint = null;
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                break;
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    dispose() {
-    }
-}
+import { EventNames } from '../../../../enums/EventNames';
+import { DesignItem } from '../../../item/DesignItem';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+export class RectangleSelectorTool {
+    cursor = 'progress';
+    _rect;
+    _initialPoint;
+    activated(serviceContainer) {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._initialPoint = currentPoint;
+                if (!this._rect)
+                    this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                this._rect.setAttribute('class', 'svg-selector');
+                this._rect.setAttribute('x', (this._initialPoint.x * designerCanvas.scaleFactor));
+                this._rect.setAttribute('y', (this._initialPoint.y * designerCanvas.scaleFactor));
+                this._rect.setAttribute('width', 0);
+                this._rect.setAttribute('height', 0);
+                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._initialPoint) {
+                    let w = currentPoint.x - this._initialPoint.x;
+                    let h = currentPoint.y - this._initialPoint.y;
+                    if (w >= 0) {
+                        this._rect.setAttribute('x', this._initialPoint.x);
+                        this._rect.setAttribute('width', w);
+                    }
+                    else {
+                        this._rect.setAttribute('x', currentPoint.x);
+                        this._rect.setAttribute('width', (-1 * w));
+                    }
+                    if (h >= 0) {
+                        this._rect.setAttribute('y', this._initialPoint.y);
+                        this._rect.setAttribute('height', h);
+                    }
+                    else {
+                        this._rect.setAttribute('y', currentPoint.y);
+                        this._rect.setAttribute('height', (-1 * h));
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
+                const inSelectionElements = [];
+                let point = designerCanvas.overlayLayer.createPoint();
+                for (let e of elements) {
+                    let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
+                    point.x = elementRect.x;
+                    point.y = elementRect.y;
+                    const p1 = this._rect.isPointInFill(point);
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y;
+                    const p2 = p1 && this._rect.isPointInFill(point);
+                    point.x = elementRect.x;
+                    point.y = elementRect.y + elementRect.height;
+                    const p3 = p2 && this._rect.isPointInFill(point);
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y + elementRect.height;
+                    const p4 = p3 && this._rect.isPointInFill(point);
+                    if (p4) {
+                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                        inSelectionElements.push(desItem);
+                    }
+                }
+                designerCanvas.overlayLayer.removeOverlay(this._rect);
+                this._rect = null;
+                this._initialPoint = null;
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+    dispose() {
+    }
+}

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

@@ -1,12 +1,12 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-export declare class TextTool implements ITool {
-    constructor();
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-    readonly cursor = "text";
-    private _text;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-}
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+export declare class TextTool implements ITool {
+    constructor();
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    readonly cursor = "text";
+    private _text;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+}

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

@@ -1,34 +1,34 @@
-import { EventNames } from '../../../../enums/EventNames.js';
-export class TextTool {
-    constructor() {
-    }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-    cursor = 'text';
-    _text;
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        //const offset = 50;
-        addEventListener("keyup", function (event) {
-            if (event.key === 'Enter') {
-                console.log("Enter Pressed");
-                event.preventDefault();
-            }
-        });
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                this._text = document.createElementNS("http://www.w3.org/2000/svg", "text");
-                this._text.setAttribute("x", currentPoint.x.toString());
-                this._text.setAttribute("y", currentPoint.y.toString());
-                break;
-            case EventNames.KeyUp:
-                //if(event.key === 'Enter'){
-                //}
-                break;
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-}
+import { EventNames } from '../../../../enums/EventNames.js';
+export class TextTool {
+    constructor() {
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+    cursor = 'text';
+    _text;
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        //const offset = 50;
+        addEventListener("keyup", function (event) {
+            if (event.key === 'Enter') {
+                console.log("Enter Pressed");
+                event.preventDefault();
+            }
+        });
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                this._text.setAttribute("x", currentPoint.x.toString());
+                this._text.setAttribute("y", currentPoint.y.toString());
+                break;
+            case EventNames.KeyUp:
+                //if(event.key === 'Enter'){
+                //}
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+}

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

@@ -1,10 +1,16 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-export declare class ZoomTool implements ITool {
-    readonly cursor: string;
-    activated(serviceContainer: ServiceContainer): void;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-    dispose(): void;
-}
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+export declare class ZoomTool implements ITool {
+    cursor: string;
+    private _startPoint;
+    private _endPoint;
+    private _pointerMovementTolerance;
+    private _zoomStepSize;
+    activated(serviceContainer: ServiceContainer): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    private _zoomOnto;
+    private _isPositionEqual;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+    dispose(): void;
+}

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

@@ -1,10 +1,44 @@
-export class ZoomTool {
-    cursor = 'zoom-in';
-    activated(serviceContainer) {
-    }
-    pointerEventHandler(designerCanvas, event, currentElement) {
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    dispose() {
-    }
-}
+import { EventNames } from '../../../../index.js';
+export class ZoomTool {
+    cursor = 'zoom-in';
+    _startPoint;
+    _endPoint;
+    _pointerMovementTolerance = 5;
+    _zoomStepSize = 0.2; //number x 100 = Scale in percent
+    activated(serviceContainer) {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const eventPoint = designerCanvas.getViewportCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._startPoint = eventPoint;
+                break;
+            case EventNames.PointerUp:
+                this._endPoint = eventPoint;
+                let isLeftClick = event.button == 0;
+                switch (event.button) {
+                    case 0: //Left-Click
+                    case 2: //Right-Click
+                        this._zoomOnto(isLeftClick, this._startPoint, this._endPoint, designerCanvas);
+                        break;
+                }
+                break;
+        }
+    }
+    _zoomOnto(isZoomInto, startPoint, endPoint, designerCanvas) {
+        if (this._isPositionEqual(startPoint, endPoint)) {
+            const oldZoom = designerCanvas.zoomFactor;
+            const newZoom = isZoomInto ? oldZoom + this._zoomStepSize : oldZoom - this._zoomStepSize;
+            designerCanvas.zoomTowardsPointer(endPoint, newZoom);
+        }
+        else {
+        }
+    }
+    _isPositionEqual(startPoint, endPoint) {
+        let tolerance = this._pointerMovementTolerance;
+        return Math.abs(startPoint.x - endPoint.x) <= tolerance && Math.abs(startPoint.y - endPoint.y) <= tolerance;
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+    dispose() {
+    }
+}

package/dist/elements/widgets/miniatureView/IMiniatureView.d.ts

@@ -1,2 +1,2 @@
-export interface IMiniatureView {
-}
+export interface IMiniatureView {
+}

package/dist/elements/widgets/miniatureView/IMiniatureView.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.d.ts

@@ -1,10 +1,10 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { IDesignerCanvas } from "../designerView/IDesignerCanvas";
-import { IMiniatureView } from "./IMiniatureView";
-export declare class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend implements IMiniatureView {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _imgdiv;
-    constructor();
-    reRender(designerView: IDesignerCanvas): void;
-}
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { IDesignerCanvas } from "../designerView/IDesignerCanvas";
+import { IMiniatureView } from "./IMiniatureView";
+export declare class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend implements IMiniatureView {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _imgdiv;
+    constructor();
+    reRender(designerView: IDesignerCanvas): void;
+}

package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.js

@@ -1,20 +1,20 @@
-import { BaseCustomWebComponentLazyAppend, css, html, DomHelper } from '@node-projects/base-custom-webcomponent';
-export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
-    static style = css ``;
+import { BaseCustomWebComponentLazyAppend, css, html, DomHelper } from '@node-projects/base-custom-webcomponent';
+export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
+    static style = css ``;
     static template = html `
         <div class="imgdiv">
-        </div>`;
-    _imgdiv;
-    constructor() {
-        super();
-        this._imgdiv = this._getDomElement('imgdiv');
-    }
-    reRender(designerView) {
-        //@ts-ignore
-        html2canvas(designerView.rootDesignItem.element).then(canvas => {
-            DomHelper.removeAllChildnodes(this._imgdiv);
-            this._imgdiv.appendChild(canvas);
-        });
-    }
-}
-customElements.define('node-projects-html-2-canvas-miniature-view', Html2CanvasMiniatureView);
+        </div>`;
+    _imgdiv;
+    constructor() {
+        super();
+        this._imgdiv = this._getDomElement('imgdiv');
+    }
+    reRender(designerView) {
+        //@ts-ignore
+        html2canvas(designerView.rootDesignItem.element).then(canvas => {
+            DomHelper.removeAllChildnodes(this._imgdiv);
+            this._imgdiv.appendChild(canvas);
+        });
+    }
+}
+customElements.define('node-projects-html-2-canvas-miniature-view', Html2CanvasMiniatureView);

package/dist/elements/widgets/paletteView/paletteElements.d.ts

@@ -1,10 +1,10 @@
-import { IElementDefinition } from '../../services/elementsService/IElementDefinition';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from '../../services/ServiceContainer';
-export declare class PaletteElements extends BaseCustomWebComponentLazyAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _table;
-    constructor();
-    loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[]): void;
-}
+import { IElementDefinition } from '../../services/elementsService/IElementDefinition';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { ServiceContainer } from '../../services/ServiceContainer';
+export declare class PaletteElements extends BaseCustomWebComponentLazyAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _table;
+    constructor();
+    loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[]): void;
+}

package/dist/elements/widgets/paletteView/paletteElements.js

@@ -1,7 +1,7 @@
-import { dragDropFormatNameElementDefinition } from '../../../Constants';
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
-import { DrawElementTool } from '../designerView/tools/DrawElementTool';
-export class PaletteElements extends BaseCustomWebComponentLazyAppend {
+import { dragDropFormatNameElementDefinition } from '../../../Constants';
+import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { DrawElementTool } from '../designerView/tools/DrawElementTool';
+export class PaletteElements extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
       display: block;
@@ -40,74 +40,74 @@ export class PaletteElements extends BaseCustomWebComponentLazyAppend {
       font-weight: bold;
       padding: 4px 14px;
     }
-    `;
+    `;
     static template = html `
     <table id="table">
     </table>
-  `;
-    _table;
-    constructor() {
-        super();
-        this._table = this._getDomElement('table');
-    }
-    loadElements(serviceContainer, elementDefintions) {
-        for (const elementDefintion of elementDefintions) {
-            let option = document.createElement("option");
-            option.value = elementDefintion.tag;
-            const tr = document.createElement("tr");
-            const tdEl = document.createElement("td");
-            const button = document.createElement("button");
-            button.innerText = elementDefintion.name ? elementDefintion.name : elementDefintion.tag;
-            button.draggable = true;
-            button.ondragstart = (e) => {
-                e.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(elementDefintion));
-                e.currentTarget.style.outline = "dashed";
-                if (elementDefintion.ghostElement) {
-                    if (typeof elementDefintion.ghostElement === 'string') {
-                        const range = document.createRange();
-                        range.selectNode(document.body);
-                        const fragment = range.createContextualFragment(elementDefintion.ghostElement);
-                        let elem = fragment.firstChild;
-                        elem.style.position = "absolute";
-                        elem.style.top = "-1000px";
-                        document.body.appendChild(elem);
-                        e.dataTransfer.setDragImage(elem, 0, 0);
-                        requestAnimationFrame(() => document.body.removeChild(elem));
-                    }
-                    else {
-                        e.dataTransfer.setDragImage(elementDefintion.ghostElement, 0, 0);
-                    }
-                }
-                else if (elementDefintion.defaultWidth && elementDefintion.defaultHeight && !elementDefintion.import) {
-                    let elem = document.createElement(elementDefintion.tag);
-                    if (elementDefintion.defaultContent)
-                        elem.innerHTML = elementDefintion.defaultContent;
-                    elem.style.width = elementDefintion.defaultWidth;
-                    elem.style.height = elementDefintion.defaultHeight;
-                    elem.style.position = "absolute";
-                    elem.style.top = "-" + elementDefintion.defaultHeight;
-                    document.body.appendChild(elem);
-                    e.dataTransfer.setDragImage(elem, 0, 0);
-                    requestAnimationFrame(() => document.body.removeChild(elem));
-                }
-            };
-            button.ondragend = (e) => {
-                elementDefintion.import = null;
-                e.currentTarget.style.outline = "none";
-            };
-            button.ontouchstart = (e) => {
-                e.preventDefault();
-            };
-            button.onclick = (x) => {
-                serviceContainer.globalContext.tool = new DrawElementTool(elementDefintion);
-            };
-            tdEl.appendChild(button);
-            tr.appendChild(tdEl);
-            const tdDesc = document.createElement("td");
-            tdDesc.innerText = elementDefintion.description ?? "";
-            tr.appendChild(tdDesc);
-            this._table.appendChild(tr);
-        }
-    }
-}
-customElements.define('node-projects-palette-elements', PaletteElements);
+  `;
+    _table;
+    constructor() {
+        super();
+        this._table = this._getDomElement('table');
+    }
+    loadElements(serviceContainer, elementDefintions) {
+        for (const elementDefintion of elementDefintions) {
+            let option = document.createElement("option");
+            option.value = elementDefintion.tag;
+            const tr = document.createElement("tr");
+            const tdEl = document.createElement("td");
+            const button = document.createElement("button");
+            button.innerText = elementDefintion.name ? elementDefintion.name : elementDefintion.tag;
+            button.draggable = true;
+            button.ondragstart = (e) => {
+                e.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(elementDefintion));
+                e.currentTarget.style.outline = "dashed";
+                if (elementDefintion.ghostElement) {
+                    if (typeof elementDefintion.ghostElement === 'string') {
+                        const range = document.createRange();
+                        range.selectNode(document.body);
+                        const fragment = range.createContextualFragment(elementDefintion.ghostElement);
+                        let elem = fragment.firstChild;
+                        elem.style.position = "absolute";
+                        elem.style.top = "-1000px";
+                        document.body.appendChild(elem);
+                        e.dataTransfer.setDragImage(elem, 0, 0);
+                        requestAnimationFrame(() => document.body.removeChild(elem));
+                    }
+                    else {
+                        e.dataTransfer.setDragImage(elementDefintion.ghostElement, 0, 0);
+                    }
+                }
+                else if (elementDefintion.defaultWidth && elementDefintion.defaultHeight && !elementDefintion.import) {
+                    let elem = document.createElement(elementDefintion.tag);
+                    if (elementDefintion.defaultContent)
+                        elem.innerHTML = elementDefintion.defaultContent;
+                    elem.style.width = elementDefintion.defaultWidth;
+                    elem.style.height = elementDefintion.defaultHeight;
+                    elem.style.position = "absolute";
+                    elem.style.top = "-" + elementDefintion.defaultHeight;
+                    document.body.appendChild(elem);
+                    e.dataTransfer.setDragImage(elem, 0, 0);
+                    requestAnimationFrame(() => document.body.removeChild(elem));
+                }
+            };
+            button.ondragend = (e) => {
+                elementDefintion.import = null;
+                e.currentTarget.style.outline = "none";
+            };
+            button.ontouchstart = (e) => {
+                e.preventDefault();
+            };
+            button.onclick = (x) => {
+                serviceContainer.globalContext.tool = new DrawElementTool(elementDefintion);
+            };
+            tdEl.appendChild(button);
+            tr.appendChild(tdEl);
+            const tdDesc = document.createElement("td");
+            tdDesc.innerText = elementDefintion.description ?? "";
+            tr.appendChild(tdDesc);
+            this._table.appendChild(tr);
+        }
+    }
+}
+customElements.define('node-projects-palette-elements', PaletteElements);