@node-projects/web-component-designer 0.0.35 → 0.0.39

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

@@ -5,17 +5,24 @@ import { ExtensionType } from "../extensions/ExtensionType";
 import { NamedTools } from './NamedTools';
 import { DesignerCanvas } from '../designerCanvas';
 export class PointerTool {
+    cursor = 'default';
+    _movedSinceStartedAction = false;
+    _initialPoint;
+    _actionType;
+    _actionStartedDesignItem;
+    _previousEventName;
+    _clickThroughElements = [];
+    _dragOverExtensionItem;
+    _dragExtensionItem;
+    _moveItemsOffset = { x: 0, y: 0 };
+    _initialOffset;
     constructor() {
-        this.cursor = 'default';
-        this._movedSinceStartedAction = false;
-        this._clickThroughElements = [];
-        this._moveItemsOffset = { x: 0, y: 0 };
     }
     activated(serviceContainer) {
     }
     dispose() {
     }
-    pointerEventHandler(designerView, event, currentElement) {
+    pointerEventHandler(designerCanvas, event, currentElement) {
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
@@ -29,18 +36,19 @@ export class PointerTool {
             this._resetPointerEventsForClickThrough();
         if (!currentElement)
             return;
-        const currentPoint = designerView.getDesignerMousepoint(event, currentElement, event.type === 'pointerdown' ? null : this._initialPoint);
-        const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerView.serviceContainer, designerView.instanceServiceContainer);
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
         if (this._actionType == null) {
             this._initialPoint = currentPoint;
+            this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, currentElement);
             if (event.type == EventNames.PointerDown) {
                 this._actionStartedDesignItem = currentDesignItem;
-                designerView.snapLines.clearSnaplines();
-                if (currentDesignItem !== designerView.rootDesignItem) {
+                designerCanvas.snapLines.clearSnaplines();
+                if (currentDesignItem !== designerCanvas.rootDesignItem) {
                     this._actionType = PointerActionType.Drag;
                 }
-                else if (currentElement === designerView || currentElement === designerView.rootDesignItem.element || currentElement == null) {
-                    designerView.instanceServiceContainer.selectionService.setSelectedElements(null);
+                else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) {
+                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
                     this._actionType = PointerActionType.DrawSelection;
                 }
                 else {
@@ -54,16 +62,16 @@ export class PointerTool {
                 this._actionType = PointerActionType.DrawingSelection;
         }
         if (this._actionType == PointerActionType.DrawSelection || this._actionType == PointerActionType.DrawingSelection) {
-            this._pointerActionTypeDrawSelection(designerView, event, currentElement);
+            this._pointerActionTypeDrawSelection(designerCanvas, event, currentElement);
         }
         else if (this._actionType == PointerActionType.DragOrSelect || this._actionType == PointerActionType.Drag) {
-            this._pointerActionTypeDragOrSelect(designerView, event, currentDesignItem, currentPoint);
+            this._pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint);
         }
         if (event.type == EventNames.PointerUp) {
-            designerView.snapLines.clearSnaplines();
+            designerCanvas.snapLines.clearSnaplines();
             if (this._actionType == PointerActionType.DrawSelection) {
-                if (currentDesignItem !== designerView.rootDesignItem)
-                    designerView.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+                if (currentDesignItem !== designerCanvas.rootDesignItem)
+                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
             }
             this._actionType = null;
             this._actionStartedDesignItem = null;
@@ -86,15 +94,15 @@ export class PointerTool {
         }
         this._clickThroughElements = [];
     }
-    _pointerActionTypeDragOrSelect(designerView, event, currentDesignItem, currentPoint) {
+    _pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint) {
         if (event.altKey) {
             if (event.type == EventNames.PointerDown) {
                 this._clickThroughElements.push([currentDesignItem, currentDesignItem.element.style.pointerEvents]);
                 currentDesignItem.element.style.pointerEvents = 'none';
             }
-            let currentElement = designerView.elementFromPoint(event.x, event.y);
-            if (DesignerCanvas.getHost(currentElement) !== designerView.overlayLayer)
-                currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerView.serviceContainer, designerView.instanceServiceContainer);
+            let currentElement = designerCanvas.elementFromPoint(event.x, event.y);
+            if (DesignerCanvas.getHost(currentElement) !== designerCanvas.overlayLayer)
+                currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
         }
         else {
             this._resetPointerEventsForClickThrough();
@@ -105,24 +113,24 @@ export class PointerTool {
                     this._actionStartedDesignItem = currentDesignItem;
                     this._moveItemsOffset = { x: 0, y: 0 };
                     if (event.shiftKey || event.ctrlKey) {
-                        const index = designerView.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem);
+                        const index = designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem);
                         if (index >= 0) {
-                            let newSelectedList = designerView.instanceServiceContainer.selectionService.selectedElements.slice(0);
+                            let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);
                             newSelectedList.splice(index, 1);
-                            designerView.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
+                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
                         }
                         else {
-                            let newSelectedList = designerView.instanceServiceContainer.selectionService.selectedElements.slice(0);
+                            let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);
                             newSelectedList.push(currentDesignItem);
-                            designerView.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
+                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
                         }
                     }
                     else {
-                        if (designerView.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem) < 0)
-                            designerView.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem) < 0)
+                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
                     }
-                    if (designerView.alignOnSnap)
-                        designerView.snapLines.calculateSnaplines(designerView.instanceServiceContainer.selectionService.selectedElements);
+                    if (designerCanvas.alignOnSnap)
+                        designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                     break;
                 }
             case EventNames.PointerMove:
@@ -132,16 +140,16 @@ export class PointerTool {
                         this._actionType = PointerActionType.Drag;
                     }
                     if (this._movedSinceStartedAction) {
-                        const currentContainerService = designerView.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent));
+                        const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent));
                         if (currentContainerService) {
                             const dragItem = this._actionStartedDesignItem.parent;
                             if (this._dragExtensionItem != dragItem) {
-                                designerView.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
-                                designerView.extensionManager.applyExtension(dragItem, ExtensionType.ContainerDrag);
+                                designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
+                                designerCanvas.extensionManager.applyExtension(dragItem, ExtensionType.ContainerDrag);
                                 this._dragExtensionItem = dragItem;
                             }
                             else {
-                                designerView.extensionManager.refreshExtension(dragItem, ExtensionType.ContainerDrag);
+                                designerCanvas.extensionManager.refreshExtension(dragItem, ExtensionType.ContainerDrag);
                             }
                             const canLeave = currentContainerService.canLeave(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
                             let newContainerElementDesignItem = null;
@@ -150,22 +158,22 @@ export class PointerTool {
                                 //search for containers below mouse cursor.
                                 //to do this, we need to disable pointer events for each in a loop and search wich element is there
                                 let backupPEventsMap = new Map();
-                                let newContainerElement = designerView.elementFromPoint(event.x, event.y);
+                                let newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
                                 try {
                                     checkAgain: while (newContainerElement != null) {
                                         if (newContainerElement == this._actionStartedDesignItem.parent.element) {
                                             newContainerElement = null;
                                         }
-                                        else if (newContainerElement == designerView.rootDesignItem.element) {
-                                            newContainerElementDesignItem = designerView.rootDesignItem;
-                                            newContainerService = designerView.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem));
+                                        else if (newContainerElement == designerCanvas.rootDesignItem.element) {
+                                            newContainerElementDesignItem = designerCanvas.rootDesignItem;
+                                            newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem));
                                             break;
                                         }
-                                        else if (newContainerElement.getRootNode() !== designerView.shadowRoot || newContainerElement === designerView.overlayLayer || newContainerElement.parentElement === designerView.overlayLayer) {
+                                        else if (newContainerElement.getRootNode() !== designerCanvas.shadowRoot || newContainerElement === designerCanvas.overlayLayer || newContainerElement.parentElement === designerCanvas.overlayLayer) {
                                             backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
                                             newContainerElement.style.pointerEvents = 'none';
                                             const old = newContainerElement;
-                                            newContainerElement = designerView.elementFromPoint(event.x, event.y);
+                                            newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
                                             if (old === newContainerElement) {
                                                 newContainerElementDesignItem = null;
                                                 newContainerService = null;
@@ -176,7 +184,7 @@ export class PointerTool {
                                             backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
                                             newContainerElement.style.pointerEvents = 'none';
                                             const old = newContainerElement;
-                                            newContainerElement = designerView.elementFromPoint(event.x, event.y);
+                                            newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
                                             if (old === newContainerElement) {
                                                 newContainerElementDesignItem = null;
                                                 newContainerService = null;
@@ -191,7 +199,7 @@ export class PointerTool {
                                                     backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
                                                     newContainerElement.style.pointerEvents = 'none';
                                                     const old = newContainerElement;
-                                                    newContainerElement = designerView.elementFromPoint(event.x, event.y);
+                                                    newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
                                                     if (old === newContainerElement)
                                                         break;
                                                     continue checkAgain;
@@ -199,8 +207,8 @@ export class PointerTool {
                                                 par = par.parentElement;
                                             }
                                             //end check
-                                            newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerView.serviceContainer, designerView.instanceServiceContainer);
-                                            newContainerService = designerView.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem));
+                                            newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                                            newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem));
                                             if (newContainerService) {
                                                 if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
                                                     break;
@@ -212,7 +220,7 @@ export class PointerTool {
                                             }
                                             backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
                                             newContainerElement.style.pointerEvents = 'none';
-                                            const newC = designerView.elementFromPoint(event.x, event.y);
+                                            const newC = designerCanvas.elementFromPoint(event.x, event.y);
                                             if (newContainerElement === newC)
                                                 break;
                                             newContainerElement = newC;
@@ -227,7 +235,7 @@ export class PointerTool {
                                 if (newContainerElement != null) {
                                     let p = newContainerElement;
                                     while (p != null) {
-                                        if (p === designerView.rootDesignItem.element)
+                                        if (p === designerCanvas.rootDesignItem.element)
                                             break;
                                         p = p.parentElement;
                                     }
@@ -238,19 +246,19 @@ export class PointerTool {
                                 }
                                 //if we found a new enterable container create extensions 
                                 if (newContainerElement != null) {
-                                    const newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerView.serviceContainer, designerView.instanceServiceContainer);
+                                    const newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                                     if (this._dragOverExtensionItem != newContainerElementDesignItem) {
-                                        designerView.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
-                                        designerView.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver);
+                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
+                                        designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver);
                                         this._dragOverExtensionItem = newContainerElementDesignItem;
                                     }
                                     else {
-                                        designerView.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver);
+                                        designerCanvas.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver);
                                     }
                                 }
                                 else {
                                     if (this._dragOverExtensionItem) {
-                                        designerView.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
+                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
                                         this._dragOverExtensionItem = null;
                                     }
                                 }
@@ -262,15 +270,15 @@ export class PointerTool {
                                 this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
                                 currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
                                 newContainerElementDesignItem.insertChild(this._actionStartedDesignItem);
-                                const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y, originalX: currentPoint.originalX - this._moveItemsOffset.x, originalY: currentPoint.originalY - this._moveItemsOffset.y, offsetInControlX: currentPoint.offsetInControlX, offsetInControlY: currentPoint.offsetInControlY, zoom: currentPoint.zoom };
+                                const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                                 newContainerService.enterContainer(newContainerElementDesignItem, [this._actionStartedDesignItem]);
-                                newContainerService.place(event, designerView, this._actionStartedDesignItem.parent, this._initialPoint, cp, designerView.instanceServiceContainer.selectionService.selectedElements);
+                                newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                             }
                             else {
-                                const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y, originalX: currentPoint.originalX - this._moveItemsOffset.x, originalY: currentPoint.originalY - this._moveItemsOffset.y, offsetInControlX: currentPoint.offsetInControlX, offsetInControlY: currentPoint.offsetInControlY, zoom: currentPoint.zoom };
-                                currentContainerService.place(event, designerView, this._actionStartedDesignItem.parent, this._initialPoint, cp, designerView.instanceServiceContainer.selectionService.selectedElements);
+                                const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
+                                currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                             }
-                            designerView.extensionManager.refreshExtensions(designerView.instanceServiceContainer.selectionService.selectedElements);
+                            designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                         }
                     }
                     break;
@@ -279,24 +287,24 @@ export class PointerTool {
                 {
                     if (this._actionType == PointerActionType.DragOrSelect) {
                         if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey)
-                            designerView.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
                         return;
                     }
                     if (this._movedSinceStartedAction) {
-                        let containerService = designerView.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent));
-                        const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y, originalX: currentPoint.originalX - this._moveItemsOffset.x, originalY: currentPoint.originalY - this._moveItemsOffset.y, offsetInControlX: currentPoint.offsetInControlX, offsetInControlY: currentPoint.offsetInControlY, zoom: currentPoint.zoom };
+                        let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent));
+                        const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                         if (containerService) {
-                            let cg = designerView.rootDesignItem.openGroup("Move Elements", designerView.instanceServiceContainer.selectionService.selectedElements);
-                            containerService.finishPlace(event, designerView, this._actionStartedDesignItem.parent, this._initialPoint, cp, designerView.instanceServiceContainer.selectionService.selectedElements);
+                            let cg = designerCanvas.rootDesignItem.openGroup("Move Elements", designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                            containerService.finishPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                             cg.commit();
                         }
-                        designerView.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
+                        designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
                         this._dragExtensionItem = null;
-                        designerView.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
+                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
                         this._dragOverExtensionItem = null;
                         this._moveItemsOffset = { x: 0, y: 0 };
                     }
-                    designerView.extensionManager.refreshExtensions(designerView.instanceServiceContainer.selectionService.selectedElements);
+                    designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                     break;
                 }
         }

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

@@ -2,13 +2,13 @@ import { EventNames } from '../../../../enums/EventNames';
 import { DesignItem } from '../../../item/DesignItem';
 import { OverlayLayer } from '../extensions/OverlayLayer.js';
 export class RectangleSelectorTool {
-    constructor() {
-        this.cursor = 'progress';
-    }
+    cursor = 'progress';
+    _rect;
+    _initialPoint;
     activated(serviceContainer) {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getDesignerMousepoint(event, currentElement, event.type === 'pointerdown' ? null : this._initialPoint);
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
@@ -16,30 +16,31 @@ export class RectangleSelectorTool {
                 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.normalizedX);
-                this._rect.setAttribute('y', this._initialPoint.normalizedY);
+                this._rect.setAttribute('x', this._initialPoint.x);
+                this._rect.setAttribute('y', this._initialPoint.y);
                 this._rect.setAttribute('width', 0);
                 this._rect.setAttribute('height', 0);
                 designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
+                    console.warn(currentPoint);
                     let w = currentPoint.x - this._initialPoint.x;
                     let h = currentPoint.y - this._initialPoint.y;
                     if (w >= 0) {
-                        this._rect.setAttribute('x', this._initialPoint.normalizedX);
+                        this._rect.setAttribute('x', this._initialPoint.x);
                         this._rect.setAttribute('width', w);
                     }
                     else {
-                        this._rect.setAttribute('x', currentPoint.normalizedX);
+                        this._rect.setAttribute('x', currentPoint.x);
                         this._rect.setAttribute('width', (-1 * w));
                     }
                     if (h >= 0) {
-                        this._rect.setAttribute('y', this._initialPoint.normalizedY);
+                        this._rect.setAttribute('y', this._initialPoint.y);
                         this._rect.setAttribute('height', h);
                     }
                     else {
-                        this._rect.setAttribute('y', currentPoint.normalizedY);
+                        this._rect.setAttribute('y', currentPoint.y);
                         this._rect.setAttribute('height', (-1 * h));
                     }
                 }

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

@@ -1,11 +1,11 @@
 export class TextTool {
     constructor() {
-        this.cursor = 'text';
     }
     activated(serviceContainer) {
     }
     dispose() {
     }
+    cursor = 'text';
     pointerEventHandler(designerCanvas, event, currentElement) {
     }
 }

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

@@ -1,7 +1,5 @@
 export class ZoomTool {
-    constructor() {
-        this.cursor = 'zoom-in';
-    }
+    cursor = 'zoom-in';
     activated(serviceContainer) {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {

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

@@ -1,5 +1,10 @@
 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');
@@ -12,8 +17,4 @@ export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-Html2CanvasMiniatureView.style = css ``;
-Html2CanvasMiniatureView.template = html `
-        <div class="imgdiv">
-        </div>`;
 customElements.define('node-projects-html-2-canvas-miniature-view', Html2CanvasMiniatureView);

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

@@ -2,12 +2,55 @@ import { dragDropFormatName } 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;
+      box-sizing: border-box;
+      height: 100%;
+      overflow: auto;        
+    }
+
+    button {
+      background-color: transparent;
+      color: white;
+      border: none;
+      font-size: 13px;
+      display: block;
+      cursor: pointer;
+      width: 100%;
+      text-align: left;
+      padding: 8px 14px;
+    }
+    button:hover {
+      background: var(--light-grey, #383f52);
+    }
+
+    table {
+      width: 100%
+    }
+
+    td {
+      color: white;
+      font-size: 13px;
+    }
+
+    div {
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: bold;
+      padding: 4px 14px;
+    }
+    `;
+    static template = html `
+    <table id="table">
+    </table>
+  `;
+    _table;
     constructor() {
         super();
         this._table = this._getDomElement('table');
     }
     loadElements(serviceContainer, elementDefintions) {
-        var _a;
         for (const elementDefintion of elementDefintions) {
             let option = document.createElement("option");
             option.value = elementDefintion.tag;
@@ -61,53 +104,10 @@ export class PaletteElements extends BaseCustomWebComponentLazyAppend {
             tdEl.appendChild(button);
             tr.appendChild(tdEl);
             const tdDesc = document.createElement("td");
-            tdDesc.innerText = (_a = elementDefintion.description) !== null && _a !== void 0 ? _a : "";
+            tdDesc.innerText = elementDefintion.description ?? "";
             tr.appendChild(tdDesc);
             this._table.appendChild(tr);
         }
     }
 }
-PaletteElements.style = css `
-    :host {
-      display: block;
-      box-sizing: border-box;
-      height: 100%;
-      overflow: auto;        
-    }
-
-    button {
-      background-color: transparent;
-      color: white;
-      border: none;
-      font-size: 13px;
-      display: block;
-      cursor: pointer;
-      width: 100%;
-      text-align: left;
-      padding: 8px 14px;
-    }
-    button:hover {
-      background: var(--light-grey, #383f52);
-    }
-
-    table {
-      width: 100%
-    }
-
-    td {
-      color: white;
-      font-size: 13px;
-    }
-
-    div {
-      text-transform: uppercase;
-      font-size: 12px;
-      font-weight: bold;
-      padding: 4px 14px;
-    }
-    `;
-PaletteElements.template = html `
-    <table id="table">
-    </table>
-  `;
 customElements.define('node-projects-palette-elements', PaletteElements);

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

@@ -1,6 +1,58 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatName } from '../../../Constants';
 export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
+    _treeDiv;
+    _tree;
+    _filter;
+    static style = css `
+      * {
+          touch-action: none;
+      }
+
+      span.drag-source {
+        border: 1px solid grey;
+        border-radius: 3px;
+        padding: 2px;
+        background-color: silver;
+      }
+
+      span.fancytree-node.fancytree-drag-source {
+        outline: 1px dotted grey;
+      }
+      span.fancytree-node.fancytree-drop-accept {
+        outline: 1px dotted green;
+      }
+      span.fancytree-node.fancytree-drop-reject {
+        outline: 1px dotted red;
+      }
+      #tree ul {
+        border: none;
+      }
+      #tree ul:focus {
+        outline: none;
+      }
+      span.fancytree-title {
+        align-items: center;
+        flex-direction: row;
+        display: inline-flex;
+      }
+      td {
+        white-space: nowrap;
+      }
+      td:nth-child(n+2) {
+        text-align: center;
+      }
+      td > img {
+        vertical-align: middle;
+      }
+    `;
+    static template = html `
+  <div style="height: 100%;">
+    <input id="input" style="width: 100%; height:21px;" placeholder="Filter..." autocomplete="off">
+    <div style="height: calc(100% - 23px); overflow: auto;">
+      <div id="treetable" style="min-width: 100%;"></div>
+    </div>
+  </div>`;
     constructor() {
         super();
         let externalCss = document.createElement('style');
@@ -48,7 +100,6 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
         this._treeDiv.children[0].classList.add('fancytree-connectors');
     }
     async loadControls(serviceContainer, elementsServices) {
-        var _a;
         let rootNode = this._tree.getRootNode();
         rootNode.removeChildren();
         for (const s of elementsServices) {
@@ -59,7 +110,7 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
             let elements = await s.getElements();
             for (let e of elements) {
                 newNode.addChildren({
-                    title: (_a = e.name) !== null && _a !== void 0 ? _a : e.tag,
+                    title: e.name ?? e.tag,
                     folder: false,
                     //@ts-ignore
                     ref: e
@@ -70,53 +121,4 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
         }
     }
 }
-PaletteTreeView.style = css `
-      * {
-          touch-action: none;
-      }
-
-      span.drag-source {
-        border: 1px solid grey;
-        border-radius: 3px;
-        padding: 2px;
-        background-color: silver;
-      }
-
-      span.fancytree-node.fancytree-drag-source {
-        outline: 1px dotted grey;
-      }
-      span.fancytree-node.fancytree-drop-accept {
-        outline: 1px dotted green;
-      }
-      span.fancytree-node.fancytree-drop-reject {
-        outline: 1px dotted red;
-      }
-      #tree ul {
-        border: none;
-      }
-      #tree ul:focus {
-        outline: none;
-      }
-      span.fancytree-title {
-        align-items: center;
-        flex-direction: row;
-        display: inline-flex;
-      }
-      td {
-        white-space: nowrap;
-      }
-      td:nth-child(n+2) {
-        text-align: center;
-      }
-      td > img {
-        vertical-align: middle;
-      }
-    `;
-PaletteTreeView.template = html `
-  <div style="height: 100%;">
-    <input id="input" style="width: 100%; height:21px;" placeholder="Filter..." autocomplete="off">
-    <div style="height: calc(100% - 23px); overflow: auto;">
-      <div id="treetable" style="min-width: 100%;"></div>
-    </div>
-  </div>`;
 customElements.define('node-projects-palette-tree-view', PaletteTreeView);