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

package/dist/elements/services/propertiesService/propertyEditors/FontPropertyEditor.js

@@ -5,8 +5,12 @@ export class FontPropertyEditor extends BasePropertyEditor {
         super(property);
         let element = document.createElement("select");
         this.element = element;
+        FontPropertyEditor.addFontsToSelect(element);
+        this.element.onchange = (e) => this._valueChanged(this.element.value);
+    }
+    static addFontsToSelect(select) {
         if (FontPropertyEditor.fontList) {
-            this.parseFontList();
+            FontPropertyEditor.parseFontList(select);
             //@ts-ignore
         }
         else if (window.queryLocalFonts) {
@@ -14,22 +18,21 @@ export class FontPropertyEditor extends BasePropertyEditor {
             window.queryLocalFonts().then(x => {
                 //@ts-ignore
                 FontPropertyEditor.fontList = [...new Set(x.map(y => y.family))];
-                this.parseFontList();
+                FontPropertyEditor.parseFontList(select);
             });
         }
         else {
             FontPropertyEditor.fontList = ["Verdana", "Arial", "Tahoma", "Trebuchet MS", "Times New Roman", "Georgia", "Garamond", "Courier New", "Brush Script MT"];
-            this.parseFontList();
+            FontPropertyEditor.parseFontList(select);
         }
     }
-    parseFontList() {
+    static parseFontList(select) {
         for (let v of FontPropertyEditor.fontList) {
             let option = document.createElement("option");
             option.value = v;
             option.text = v;
-            this.element.appendChild(option);
+            select.appendChild(option);
         }
-        this.element.onchange = (e) => this._valueChanged(this.element.value);
     }
     refreshValue(valueType, value) {
         this.element.value = value;

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;
+    _formatSelection(type: string, value?: string): void;
 }

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

@@ -1,96 +1,103 @@
 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";
+import { shadowrootGetSelection, wrapSelectionInSpans } from "../../../../helper/SelectionHelper.js";
+import { FontPropertyEditor } from "../../../../services/propertiesService/propertyEditors/FontPropertyEditor.js";
 export class EditTextExtension extends AbstractExtension {
     static template = html `
-    <div style="height: 24px; display: flex;">
-      <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 style="height: 24px; display: flex; gap: 2px;">
+      <button data-command="font-weight" data-command-parameter="800" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
+      <button data-command="font-style" data-command-parameter="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
+      <button data-command="text-decoration" data-command-parameter="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
+      <button data-command="text-decoration" data-command-parameter="line-through" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
+      <button data-command="text-decoration" data-command-parameter="overline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><span style="text-decoration: overline">o</span></button>
+      <select data-command="fontSize" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
+        <option>8px</option>
+        <option>9px</option>
+        <option>10px</option>
+        <option>11px</option>
+        <option>12px</option>
+        <option>14px</option>
+        <option>16px</option>
+        <option>18px</option>
+        <option>20px</option>
+        <option>24px</option>
+        <option>28px</option>
+        <option>32px</option>
+        <option>36px</option>
+      </select>
+      <select id="fontFamily" data-command="font-family" style="pointer-events: all; height: 24px; width: 90px; padding: 0;">
+        
+      </select>
     </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']));
+        FontPropertyEditor.addFontsToSelect(elements.querySelector('#fontFamily'));
+        elements.querySelectorAll('button').forEach(x => x.onpointerdown = () => this._formatSelection(x.dataset['command'], x.dataset['commandParameter']));
+        elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
+        //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);
         foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
-        foreignObject.setAttribute('width', '96');
+        foreignObject.setAttribute('width', '300');
         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';
     }
     handlesPointerEvent(designerCanvas, event, currentElement) {
-        let p = event.composedPath();
+        const p = event.composedPath();
         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);
+    _formatSelection(type, value) {
+        const selection = shadowrootGetSelection(this.designerCanvas.rootDesignItem.element.shadowRoot);
+        const spans = wrapSelectionInSpans(selection);
+        for (const span of spans)
+            span.style[type] = value;
         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/ElementDragTitleExtension.js

@@ -19,7 +19,8 @@ export class ElementDragTitleExtension extends AbstractExtension {
             let text = this.extendedItem.name;
             this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
             this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
-            this._text = this._drawHTML('<span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + text + '</span>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
+            this._text = this._drawHTML('<div style="position:relative"><span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 0;">' + text + '</span></div>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
+            this._text.style.overflow = 'visible';
             this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
@@ -47,8 +48,7 @@ export class ElementDragTitleExtension extends AbstractExtension {
                 this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
                 this._text.setAttribute('height', '' + h);
                 this._text.setAttribute('width', '' + w);
-                this._text.style.transformBox = 'fill-box';
-                this._text.style.rotate = angle + 'deg';
+                this._text.children[0].children[0].style.rotate = angle + 'deg';
             }
         }
     }

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,15 +270,26 @@ 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);
                                 this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
                                 currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
-                                newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems);
+                                newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems, 'normal');
                                 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();
+}