@node-projects/web-component-designer 0.1.90 → 0.1.91

package/assets/images/tools/PanTool.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.206 21.427l.185.573h-.566l-.187-.603-.063-.171c-.203-.545-.433-.775-.433-1.265a44.468 44.468 0 0 0 .195-4.722c-.056-.762-.025-1.491-.1-2.076-.062-.495-.112-.885-.112-1.09a7.746 7.746 0 0 0-.405-2.233 1.544 1.544 0 0 0-.805-1.014 2.121 2.121 0 0 0-.68-.12c-.396 0-.408.084-.3.764.047.293.108.66.118.703.198.872.3 1.204.07 1.204-.146 0-.47-.172-.5-.372-.012-.086-.331-1.839-.371-2.08A2.883 2.883 0 0 0 15.8 7.8a1.195 1.195 0 0 0-.841-.503.712.712 0 0 0-.646.198 1.77 1.77 0 0 0-.169.283c.014.003.118.535.214.852.097.319.271 1.548.357 1.676a.994.994 0 0 1 .15.645.147.147 0 0 1-.099.061 1.18 1.18 0 0 1-.53-.364c-.122-.156-.273-1.43-.426-1.89-.04-.12-.085-.272-.134-.435a5.147 5.147 0 0 0-.444-1.185 1.394 1.394 0 0 0-.835-.432.869.869 0 0 0-.829.344 1.363 1.363 0 0 0-.246.834 8.518 8.518 0 0 0 .164 1.391l.045.202a6.999 6.999 0 0 0 .401 1.204.174.174 0 0 1 .015.13c-.056.112-.275.116-.299.116a.301.301 0 0 1-.205-.062 7.393 7.393 0 0 1-.473-1.383c-.12-.533-.304-1.681-.645-1.748a1.285 1.285 0 0 0-.254-.025 1.023 1.023 0 0 0-.654.212 2.389 2.389 0 0 0-.742.998 5.79 5.79 0 0 0 .1 1.77c.712 2.656.774 2.617.796 2.788a2.123 2.123 0 0 0 .1.67c.07.203.233.645.251.696a1.967 1.967 0 0 1-.119.753l-.038.154a5.276 5.276 0 0 0-.114.624.082.082 0 0 1-.147.065 1.197 1.197 0 0 1-.241-.65 1.413 1.413 0 0 1 .071-.297.772.772 0 0 0 .043-.522 4.079 4.079 0 0 0-.163-.39 3.069 3.069 0 0 1-.145-.354 1.953 1.953 0 0 1-.067-.336 2.628 2.628 0 0 0-.16-.64 7.251 7.251 0 0 1-.229-.869 12.474 12.474 0 0 0-.287-1.431.685.685 0 0 0-.5-.282.642.642 0 0 0-.23.047.372.372 0 0 0-.205.377 36.57 36.57 0 0 0-.127 1.393.365.365 0 0 1-.071.192.407.407 0 0 0-.06.13 34.4 34.4 0 0 1-.385 1.269l-.08.256c-.032.105-.08.224-.129.347-.135.34-.303.761-.186.977a9.522 9.522 0 0 0 1.087 1.495 6.62 6.62 0 0 1 .57.65c.137.17.273.337.386.46a4.675 4.675 0 0 0 1.004.664c.131.074.252.14.342.196.112.069.265.178.442.305a11.3 11.3 0 0 0 .994.662c.124.071.188.101.376.196.569.28 1.336.705 1.609.85A3.88 3.88 0 0 1 14 22h-.717s-.341-.272-.756-.573a10.113 10.113 0 0 0-1.21-.658l-.18-.088a9.9 9.9 0 0 1-1.25-.8c-.185-.133-.325-.235-.43-.3-.06-.037-.32-.183-.32-.183a4.96 4.96 0 0 1-1.139-.77 8.711 8.711 0 0 1-.367-.434 7.55 7.55 0 0 0-.554-.64 9.849 9.849 0 0 1-1.202-1.64 1.73 1.73 0 0 1 .16-1.431 5.91 5.91 0 0 0 .115-.312l.061-.194c.1-.32.367-1.169.39-1.278a.976.976 0 0 1 .127-.302c.011-.164.069-.876.12-1.311a.913.913 0 0 1 .547-.874 1.185 1.185 0 0 1 .429-.086 1.043 1.043 0 0 1 .34.057 5.276 5.276 0 0 1-.03-1.314 2.742 2.742 0 0 1 .94-1.367 1.609 1.609 0 0 1 .988-.365 1.117 1.117 0 0 1 .47.097.84.84 0 0 1 .283.232 2.171 2.171 0 0 1 .283-.684 1.372 1.372 0 0 1 1.299-.617 1.872 1.872 0 0 1 1.258.634 1.617 1.617 0 0 1 .214.392 1.234 1.234 0 0 1 1.165-.43 1.741 1.741 0 0 1 1.218.74 4.562 4.562 0 0 1 .343.756.98.98 0 0 1 .64-.192 2.63 2.63 0 0 1 .905.17 2.235 2.235 0 0 1 1.087 1.413 8.22 8.22 0 0 1 .44 2.423c0 .17.048.55.11 1.026.08.631.045 1.349.1 2.103a41.59 41.59 0 0 1-.196 4.81 7.328 7.328 0 0 0 .502 1.353l.023.064z"/>
+<path fill="none" d="M0 0h24v24H0z"/>
+</svg>

package/config/elements-native.json

@@ -2,6 +2,7 @@
   "elements":
   [
     "div",
+    "label",
     "input",
     "textarea",
     "select",

package/dist/elements/helper/ElementHelper.js

@@ -76,12 +76,12 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             break;
         }
         let nextParent = element.offsetParent ? element.offsetParent : element.getRootNode().host;
-        if (element instanceof SVGGraphicsElement) {
-            nextParent = element.ownerSVGElement;
-        }
-        else if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
+        if (element instanceof SVGSVGElement || element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
             nextParent = element.parentElement ? element.parentElement : element.getRootNode().host;
         }
+        else if (element instanceof SVGGraphicsElement) {
+            nextParent = element.ownerSVGElement;
+        }
         let scrollLeft = 0;
         let scrollTop = 0;
         if (nextParent) {

package/dist/elements/item/DesignItem.d.ts

@@ -74,6 +74,7 @@ export declare class DesignItem implements IDesignItem {
     set lockAtDesignTime(value: boolean);
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
     querySelectorAll(selectors: string): NodeListOf<HTMLElement>;
+    removeDesignerAttributesAndStylesFromChildren(): void;
     updateChildrenFromNodesChildren(): void;
     constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
     setView(node: Element): void;

package/dist/elements/item/DesignItem.js

@@ -351,6 +351,16 @@ export class DesignItem {
             return this.element.querySelectorAll(selectors);
         }
     }
+    removeDesignerAttributesAndStylesFromChildren() {
+        const els = this.querySelectorAll('*');
+        for (let e of els) {
+            const di = DesignItem.GetDesignItem(e);
+            if (!di.hasAttribute("draggable"))
+                e.removeAttribute("draggable");
+            if (!di.hasStyle("pointer-events"))
+                e.style.pointerEvents = '';
+        }
+    }
     updateChildrenFromNodesChildren() {
         this._childArray = [];
         if (this.nodeType == NodeType.Element) {

package/dist/elements/item/IDesignItem.d.ts

@@ -39,6 +39,7 @@ export interface IDesignItem {
     removeChild(designItem: IDesignItem): any;
     remove(): any;
     clearChildren(): any;
+    removeDesignerAttributesAndStylesFromChildren(): any;
     updateChildrenFromNodesChildren(): any;
     readonly hasContent: boolean;
     content: string;

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

@@ -32,7 +32,6 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     canvasOffset: IPoint;
     canvas: HTMLElement;
     additionalStyles: CSSStyleSheet[];
-    eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
     getViewportCoordinates(event: MouseEvent): IPoint;

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

@@ -31,7 +31,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     snapLines: Snaplines;
     overlayLayer: OverlayLayerView;
     rootDesignItem: IDesignItem;
-    eatEvents: Element;
     private _currentPasteOffset;
     private _zoomFactor;
     private _scaleFactor;

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

@@ -58,7 +58,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     snapLines;
     overlayLayer;
     rootDesignItem;
-    eatEvents;
     _currentPasteOffset = this.pasteOffset;
     _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
@@ -869,8 +868,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     onKeyUp(event) {
-        if (event.composedPath().indexOf(this.eatEvents) >= 0)
-            return;
         if (this._moveGroup) {
             this._moveGroup.commit();
             this._moveGroup = null;
@@ -878,8 +875,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         event.preventDefault();
     }
     onKeyDown(event) {
-        if (event.composedPath().indexOf(this.eatEvents) >= 0)
-            return;
         if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey)
             this.executeCommand({ type: CommandType.undo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'z' && event.shiftKey)
@@ -1040,8 +1035,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             for (let pe of this._pointerextensions)
                 pe.refresh(event);
         }
-        if (event.composedPath().indexOf(this.eatEvents) >= 0)
-            return;
         let currentElement;
         if (forceElement)
             currentElement = forceElement;
@@ -1072,8 +1065,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.showHoverExtension(currentDesignItem.element, event);
         //TODO: needed ??
         if (currentElement && DomHelper.getHost(currentElement.parentNode) === this.overlayLayer) {
-            if (this.eatEvents)
-                return;
             currentElement = this.instanceServiceContainer.selectionService.primarySelection?.element ?? this._canvas;
         }
         let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer);

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

@@ -10,7 +10,7 @@ export class AltToEnterContainerExtension extends AbstractExtension {
     }
     refresh() {
         const 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.Foreground);
+        this._text = this._drawText("Press ALT (or hold) to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foreground);
         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));

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

@@ -7,18 +7,12 @@ export type handlesPointerEvent = {
 };
 export declare class EditTextExtension extends AbstractExtension implements handlesPointerEvent {
     private static template;
-    private _contentEditedBound;
-    private _blurBound;
-    private _blurTimeout;
     private _foreignObject;
-    private _focusBound;
+    private _path;
     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;
 }

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -1,41 +1,32 @@
 import { html } from "@node-projects/base-custom-webcomponent";
 import { AbstractExtension } from "../AbstractExtension.js";
-import { ExtensionType } from "../ExtensionType.js";
 import { OverlayLayer } from "../OverlayLayer.js";
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../../helper/TransformHelper.js";
 export class EditTextExtension extends AbstractExtension {
     static template = html `
-    <div style="height: 24px; display: flex;">
+    <div style="height: 24px; display: flex; gap: 2px;">
       <button data-command="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
       <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
       <button data-command="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
       <button data-command="strikeThrough" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
     </div>
   `;
-    _contentEditedBound;
-    _blurBound;
-    _blurTimeout;
     _foreignObject;
-    _focusBound;
+    _path;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
-        this._contentEditedBound = this._contentEdited.bind(this);
-        this._blurBound = this._blur.bind(this);
-        this._focusBound = this._focus.bind(this);
     }
     extend() {
         //TODO: -> check what to do with extensions, do not loose edit on mouse click,...
         //maybe use a html edit framework
         this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
-        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
-        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelectionAndCanBeEntered);
-        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.removeDesignerAttributesAndStylesFromChildren();
         this.extendedItem.element.setAttribute('contenteditable', '');
-        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
         this.extendedItem.element.focus();
-        this.designerCanvas.eatEvents = this.extendedItem.element;
         let itemRect = this.extendedItem.element.getBoundingClientRect();
         const elements = EditTextExtension.template.content.cloneNode(true);
-        elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
+        elements.querySelectorAll('button').forEach(x => x.onpointerdown = () => this._formatSelection(x.dataset['command']));
+        //Button overlay
         const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
         this._foreignObject = foreignObject;
         foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
@@ -44,19 +35,33 @@ export class EditTextExtension extends AbstractExtension {
         foreignObject.setAttribute('height', '24');
         foreignObject.appendChild(elements);
         this._addOverlay(foreignObject, OverlayLayer.Foreground);
+        //TODO - nice way to disable click overlay
         this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
-        this.extendedItem.element.addEventListener('blur', this._blurBound);
-        this.extendedItem.element.addEventListener('focus', this._focusBound);
+        //overlay to detect click outside
+        this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this._path.setAttribute('class', 'svg-edit-text-clickoutside');
+        this._path.setAttribute('fill-rule', 'evenodd');
+        this._path.style.pointerEvents = 'auto';
+        this._path.onpointerdown = (e) => {
+            this.extensionManager.removeExtensionInstance(this.extendedItem, this);
+        };
+        this._addOverlay(this._path, OverlayLayer.Background);
+        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
+        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
+        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";
+        this._path.setAttribute("d", data);
     }
     refresh() {
-        this.dispose();
+        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
+        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
+        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";
+        this._path.setAttribute("d", data);
     }
     dispose() {
         this._removeAllOverlays();
         this.extendedItem.element.removeAttribute('contenteditable');
-        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
-        this.extendedItem.element.removeEventListener('blur', this._blurBound);
-        this.designerCanvas.eatEvents = null;
         this.extendedItem.updateChildrenFromNodesChildren();
         this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
     }
@@ -65,31 +70,7 @@ export class EditTextExtension extends AbstractExtension {
         const stylo = this._foreignObject.querySelector('stylo-editor');
         return p.indexOf(stylo) >= 0;
     }
-    _contentEdited() {
-        //TODO: -> save???
-        //this.extendedItem.content = this.extendedItem.element.innerHTML;
-        //console.log(this.extendedItem.element.innerHTML)
-    }
-    _blur() {
-        if (!this._blurTimeout) {
-            this._blurTimeout = setTimeout(() => {
-                //TODO: don't remove doubleclick extension (another type could be used), remove extension itself
-                //maybe also configureable when when to remove the extension
-                this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
-            }, 150);
-        }
-    }
-    _focus() {
-        if (this._blurTimeout) {
-            clearTimeout(this._blurTimeout);
-            this._blurTimeout = null;
-        }
-    }
     _formatSelection(type) {
-        if (this._blurTimeout)
-            clearTimeout(this._blurTimeout);
-        this._blurTimeout = null;
-        //const selection = <Selection>(<any>this.designerView.shadowRoot).getSelection()
         document.execCommand(type, false, null);
         this.extendedItem.element.focus();
     }

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

@@ -6,4 +6,5 @@ import { IExtensionManager } from '../IExtensionManger.js';
 export declare class EditTextExtensionProvider 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/EditText/EditTextExtensionProvider.js

@@ -1,11 +1,15 @@
 import { EditTextExtension } from "./EditTextExtension.js";
+import { css } from '@node-projects/base-custom-webcomponent';
 export class EditTextExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.name === 'button' || designItem.name === 'input')
+        if (designItem.name === 'input')
             return false;
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new EditTextExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-edit-text-clickoutside { stroke: transparent; fill: lightgray; opacity: 0.7 }
+  `;
 }

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

@@ -15,6 +15,7 @@ export declare class ExtensionManager implements IExtensionManager {
     private _selectedElementsChanged;
     applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
     applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): void;
+    applyExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension): void;
     removeExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension): void;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
     removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): void;

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

@@ -142,6 +142,20 @@ export class ExtensionManager {
         }
         this.designerCanvas.overlayLayer.endBatch();
     }
+    applyExtensionInstance(designItem, extension) {
+        let appE = designItem.appliedDesignerExtensions.get(ExtensionType.Directly);
+        if (!appE)
+            appE = [];
+        try {
+            extension.extend(null, null);
+        }
+        catch (err) {
+            console.error(err);
+        }
+        appE.push(extension);
+        designItem.appliedDesignerExtensions.set(ExtensionType.Directly, appE);
+        this.designItemsWithExtentions.add(designItem);
+    }
     removeExtensionInstance(designItem, extension) {
         for (let e of designItem.appliedDesignerExtensions) {
             const idx = e[1].indexOf(extension);
@@ -341,6 +355,7 @@ export class ExtensionManager {
     refreshAllExtensions(designItems, ignoredExtension) {
         this.designerCanvas.overlayLayer.startBatch();
         if (designItems) {
+            this.refreshExtensions(designItems, ExtensionType.Directly, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.Permanent, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.Selection, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.PrimarySelection, null, ignoredExtension);

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

@@ -1,4 +1,5 @@
 export declare enum ExtensionType {
+    Directly = 0,//Extensions wich are applied directly, for example from Text Edit Tool
     Permanent = 1,
     Selection = 2,
     PrimarySelection = 3,
@@ -22,7 +23,7 @@ export declare enum ExtensionType {
     Placement = 12,
     /**
      * Extensions only when the container can be Entered.
-     * So for Example on a custome webcomponent wich uses a grid layout for it's root, but can not show children,
+     * So for Example on a custom webcomponent wich uses a grid layout for it's root, but can not show children,
      * do not display grid extension.
      */
     PrimarySelectionAndCanBeEntered = 13,

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

@@ -1,5 +1,6 @@
 export var ExtensionType;
 (function (ExtensionType) {
+    ExtensionType[ExtensionType["Directly"] = 0] = "Directly";
     ExtensionType[ExtensionType["Permanent"] = 1] = "Permanent";
     ExtensionType[ExtensionType["Selection"] = 2] = "Selection";
     ExtensionType[ExtensionType["PrimarySelection"] = 3] = "PrimarySelection";
@@ -23,7 +24,7 @@ export var ExtensionType;
     ExtensionType[ExtensionType["Placement"] = 12] = "Placement";
     /**
      * Extensions only when the container can be Entered.
-     * So for Example on a custome webcomponent wich uses a grid layout for it's root, but can not show children,
+     * So for Example on a custom webcomponent wich uses a grid layout for it's root, but can not show children,
      * do not display grid extension.
      */
     ExtensionType[ExtensionType["PrimarySelectionAndCanBeEntered"] = 13] = "PrimarySelectionAndCanBeEntered";

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

@@ -1,4 +1,3 @@
-import { IRect } from '../../../../interfaces/IRect.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { AbstractExtension } from './AbstractExtension.js';
@@ -8,6 +7,5 @@ export declare class GrayOutExtension extends AbstractExtension {
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;
-    drawGrayOut(r: IRect): void;
     dispose(): void;
 }

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

@@ -1,3 +1,4 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
 import { AbstractExtension } from './AbstractExtension.js';
 import { OverlayLayer } from "./OverlayLayer.js";
 export class GrayOutExtension extends AbstractExtension {
@@ -12,18 +13,14 @@ export class GrayOutExtension extends AbstractExtension {
         if (!this._path) {
             this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
             this._path.setAttribute('class', 'svg-gray-out');
+            this._path.setAttribute('fill-rule', 'evenodd');
             this._addOverlay(this._path, OverlayLayer.Background);
         }
-        let normalizedRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        this.drawGrayOut(normalizedRect);
-    }
-    drawGrayOut(r) {
+        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
         let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
-        const pathPoints = "M0 0 L0 " + outsideRect.height + "L" + r.x + " " + outsideRect.height + "L" + r.x + " 0" + " L0 0" +
-            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + outsideRect.width + " " + r.y + "L" + outsideRect.width + " 0" + "L" + r.x + " 0" +
-            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + outsideRect.height + "L" + outsideRect.width + " " + outsideRect.height + "L" + outsideRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
-            "M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + outsideRect.width + " " + (r.y + r.height) + "L" + outsideRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
-        this._path.setAttribute("d", pathPoints);
+        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
+        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";
+        this._path.setAttribute("d", data);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -4,6 +4,7 @@ import { IDesignerExtension } from './IDesignerExtension.js';
 export interface IExtensionManager {
     applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
     applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): any;
+    applyExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension): any;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
     removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): any;
     removeExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension): any;

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

@@ -15,10 +15,11 @@ export declare class PointerTool implements ITool {
     private _copiedItemsInserted;
     private _previousEventName;
     private _dragOverExtensionItem;
-    private _dragExtensionItem;
+    private _dragParentExtensionItem;
     private _moveItemsOffset;
     private _initialOffset;
     private _started;
+    private _holdTimeout;
     private _firstTimeInMove;
     private _secondTimeInMove;
     private _changeGroup;

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

@@ -14,11 +14,11 @@ export class PointerTool {
     _copiedItemsInserted = false;
     _previousEventName;
     _dragOverExtensionItem;
-    _dragExtensionItem;
+    _dragParentExtensionItem;
     _moveItemsOffset = { x: 0, y: 0 };
     _initialOffset;
     _started = false;
-    ;
+    _holdTimeout;
     _firstTimeInMove;
     _secondTimeInMove;
     _changeGroup;
@@ -154,7 +154,11 @@ export class PointerTool {
             drawSelectionTool.pointerEventHandler(designerView, event, currentElement);
         }
     }
-    async _pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint) {
+    async _pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint, raisedFromHold = false) {
+        if (this._holdTimeout) {
+            clearTimeout(this._holdTimeout);
+            this._holdTimeout = null;
+        }
         if (event.altKey) {
             if (event.type == EventNames.PointerDown) {
                 const currentSelection = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
@@ -235,10 +239,10 @@ export class PointerTool {
                         const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
                         if (currentContainerService) {
                             const dragItem = this._actionStartedDesignItem.parent;
-                            if (this._dragExtensionItem != dragItem) {
-                                designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
+                            if (this._dragParentExtensionItem != dragItem) {
+                                designerCanvas.extensionManager.removeExtension(this._dragParentExtensionItem, ExtensionType.ContainerDrag);
                                 designerCanvas.extensionManager.applyExtension(dragItem, ExtensionType.ContainerDrag, event);
-                                this._dragExtensionItem = dragItem;
+                                this._dragParentExtensionItem = dragItem;
                             }
                             else {
                                 designerCanvas.extensionManager.refreshExtension(dragItem, ExtensionType.ContainerDrag);
@@ -266,7 +270,12 @@ export class PointerTool {
                                     }
                                 }
                             }
-                            if (newContainerService && event.altKey) {
+                            if (newContainerService) {
+                                this._holdTimeout = setTimeout(() => {
+                                    this._pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint, true);
+                                }, 1000);
+                            }
+                            if (newContainerService && (event.altKey || raisedFromHold)) {
                                 //TODO: all items, fix position
                                 const oldOffset = currentContainerService.getElementOffset(this._actionStartedDesignItem.parent, this._actionStartedDesignItem);
                                 const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem);
@@ -275,6 +284,12 @@ export class PointerTool {
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                                 newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems);
                                 newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
+                                designerCanvas.extensionManager.removeExtension(this._dragParentExtensionItem, ExtensionType.ContainerDrag);
+                                designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDrag, event);
+                                this._dragParentExtensionItem = newContainerElementDesignItem;
+                                designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
+                                this._dragOverExtensionItem = null;
+                                designerCanvas.extensionManager.refreshAllAppliedExtentions();
                             }
                             else {
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
@@ -334,8 +349,8 @@ export class PointerTool {
                                 this._changeGroup.abort();
                             this._changeGroup = null;
                         }
-                        designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
-                        this._dragExtensionItem = null;
+                        designerCanvas.extensionManager.removeExtension(this._dragParentExtensionItem, ExtensionType.ContainerDrag);
+                        this._dragParentExtensionItem = null;
                         designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
                         this._dragOverExtensionItem = null;
                         this._moveItemsOffset = { x: 0, y: 0 };
@@ -373,6 +388,7 @@ export class PointerTool {
         let newContainerService = null;
         const designerCanvas = designItem.instanceServiceContainer.designerCanvas;
         const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y);
+        elementsFromPoint.push(designerCanvas.rootDesignItem.element);
         for (let e of elementsFromPoint) {
             if (e == designItem.element) {
                 continue;

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

@@ -1,7 +1,7 @@
 import { EventNames } from '../../../../enums/EventNames.js';
 import { DesignItem } from '../../../item/DesignItem.js';
 import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
-import { ExtensionType } from '../extensions/ExtensionType.js';
+import { EditTextExtension } from '../extensions/EditText/EditTextExtension.js';
 export class TextTool {
     _textEditExtensions;
     constructor(editExistingText) {
@@ -28,10 +28,8 @@ export class TextTool {
                     di.setStyle('left', currentPoint.x + 'px');
                     di.setStyle('top', currentPoint.y + 'px');
                     designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                    //TODO: Maybe we could also remove the eatEvents property
-                    //TODO - don't apply doubleclick extension (maybe it is not the doubleclick one) - apply edit text extesion directly
-                    //should we configure the editTextExtension anywhere??
-                    this._textEditExtensions = designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick, event);
+                    designerCanvas.extensionManager.applyExtensionInstance(di, new EditTextExtension(designerCanvas.extensionManager, designerCanvas, di));
+                    designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
                     setTimeout(() => { span.focus(); }, 50);
                 }
                 else {

package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js

@@ -1,7 +1,10 @@
 import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
 import { assetsPath } from "../../../../../../Constants.js";
+import { PointerToolPopup } from "../popups/PointerToolPopup.js";
 export class PointerToolButtonProvider {
     provideButton(designerCanvas) {
-        return new DesignerToolbarButton(designerCanvas, { 'Pointer': { icon: assetsPath + 'images/tools/PointerTool.svg' } });
+        const button = new DesignerToolbarButton(designerCanvas, { 'Pointer': { icon: assetsPath + 'images/tools/PointerTool.svg' } });
+        button.popup = PointerToolPopup;
+        return button;
     }
 }

package/dist/elements/widgets/designerView/tools/toolBar/popups/AbstractBaseToolPopup.d.ts

@@ -0,0 +1,5 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare abstract class AbstractBaseToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style: CSSStyleSheet | CSSStyleSheet[];
+    constructor();
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/AbstractBaseToolPopup.js

@@ -0,0 +1,37 @@
+import { BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+export class AbstractBaseToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .container {
+          width: 120px;
+          min-height: 100px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .tool {
+          height: 32px;
+          width: 32px;
+          background-color: rgb(255, 255, 255);
+          background-size: 65%;
+          background-repeat: no-repeat;
+          background-position: center center;
+          flex-shrink: 0;
+          border-bottom: 1px solid black;
+      }
+      .tools {
+          display: flex;
+          flex-wrap: wrap;
+          margin-bottom: 5px;
+          gap: 3px;
+      }`;
+    constructor() {
+        super();
+        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
+            let div = e;
+            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
+        }
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.d.ts

@@ -1,6 +1,6 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style: CSSStyleSheet;
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export declare class DrawToolPopup extends AbstractBaseToolPopup {
+    static style: CSSStyleSheet[];
     static template: HTMLTemplateElement;
     constructor();
 }

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js

@@ -1,33 +1,8 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { html, css } from '@node-projects/base-custom-webcomponent';
 import { assetsPath } from "../../../../../../Constants.js";
-export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .container {
-          width: 220px;
-          min-height: 200px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-          gap: 3px;
-      }
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export class DrawToolPopup extends AbstractBaseToolPopup {
+    static style = [super.style, css `
       .inputs{
         float: left;
         margin-top: 5px;
@@ -50,9 +25,7 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
       }
       .strokethickness{
         float: both;
-      }
-      
-      `;
+      }`];
     static template = html `
         <div class="container">
           <header><h2 id="title" style="margin: 0;">Draw</h2></header>
@@ -82,10 +55,6 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
         </div>`;
     constructor() {
         super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
         if (this.shadowRoot.querySelector("input.strokecolor")) {
             let input = this._getDomElement("strokecolor");
             input.onchange = () => this.getRootNode().host.setStrokeColor(input.value);

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup copy.d.ts

@@ -0,0 +1,6 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    constructor();
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup copy.js

@@ -0,0 +1,49 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+export class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .container {
+          width: 120px;
+          min-height: 100px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .tool {
+          height: 32px;
+          width: 32px;
+          background-color: rgb(255, 255, 255);
+          background-size: 65%;
+          background-repeat: no-repeat;
+          background-position: center center;
+          flex-shrink: 0;
+          border-bottom: 1px solid black;
+      }
+      .tools {
+          display: flex;
+          flex-wrap: wrap;
+          margin-bottom: 5px;
+          gap: 3px;
+      }`;
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
+            </div>
+          </main>
+        </div>`;
+    constructor() {
+        super();
+        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
+            let div = e;
+            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
+        }
+    }
+}
+customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup.d.ts

@@ -0,0 +1,4 @@
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export declare class PointerToolPopup extends AbstractBaseToolPopup {
+    static template: HTMLTemplateElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup.js

@@ -0,0 +1,16 @@
+import { html } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export class PointerToolPopup extends AbstractBaseToolPopup {
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" data-command-parameter="Pointer" title="Pointer" style="background-image: url('${assetsPath}images/tools/PointerTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="Pan" title="Pan" style="background-image: url('${assetsPath}images/tools/PanTool.svg');"></div>
+            </div>
+          </main>
+        </div>`;
+}
+customElements.define('node-projects-designer-pointer-tool-popup', PointerToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.d.ts

@@ -0,0 +1,6 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    constructor();
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.js

@@ -0,0 +1,49 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .container {
+          width: 120px;
+          min-height: 100px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .tool {
+          height: 32px;
+          width: 32px;
+          background-color: rgb(255, 255, 255);
+          background-size: 65%;
+          background-repeat: no-repeat;
+          background-position: center center;
+          flex-shrink: 0;
+          border-bottom: 1px solid black;
+      }
+      .tools {
+          display: flex;
+          flex-wrap: wrap;
+          margin-bottom: 5px;
+          gap: 3px;
+      }`;
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
+            </div>
+          </main>
+        </div>`;
+    constructor() {
+        super();
+        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
+            let div = e;
+            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
+        }
+    }
+}
+customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.d.ts

@@ -1,6 +1,4 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style: CSSStyleSheet;
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export declare class SelectionToolPopup extends AbstractBaseToolPopup {
     static template: HTMLTemplateElement;
-    constructor();
 }

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.js

@@ -1,33 +1,7 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { html } from '@node-projects/base-custom-webcomponent';
 import { assetsPath } from "../../../../../../Constants.js";
-export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .container {
-          width: 120px;
-          min-height: 100px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-          gap: 3px;
-      }`;
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export class SelectionToolPopup extends AbstractBaseToolPopup {
     static template = html `
         <div class="container">
           <header><h2 id="title" style="margin: 0;">Selection</h2></header>
@@ -38,12 +12,5 @@ export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend
             </div>
           </main>
         </div>`;
-    constructor() {
-        super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
-    }
 }
 customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);

package/dist/index.d.ts

@@ -166,8 +166,11 @@ export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorTo
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/AbstractBaseToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js";
 export type { IDesignViewToolbarButtonProvider } from "./elements/widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js";

package/dist/index.js

@@ -113,8 +113,11 @@ export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorTo
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/AbstractBaseToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";

package/package.json

@@ -1,24 +1,24 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.1.90",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "jochen.kuehner@gmx.de",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": ">=0.21.2"
-  },
-  "devDependencies": {
-    "mdn-data": "^2.3.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "A UI designer for Polymer apps",
+  "name": "@node-projects/web-component-designer",
+  "version": "0.1.91",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "jochen.kuehner@gmx.de",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": ">=0.23.0"
+  },
+  "devDependencies": {
+    "mdn-data": "^2.4.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}