@node-projects/web-component-designer 0.0.216 → 0.0.217

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

@@ -1,65 +1,65 @@
-export class AbstractExtensionBase {
-    overlays = [];
-    overlayLayerView;
-    extensionManager;
-    designerCanvas;
-    constructor(extensionManager, designerCanvas) {
-        this.extensionManager = extensionManager;
-        this.designerCanvas = designerCanvas;
-        this.overlayLayerView = designerCanvas.overlayLayer;
-    }
-    _removeAllOverlays() {
-        for (let o of this.overlays) {
-            try {
-                this.overlayLayerView.removeOverlay(o);
-            }
-            catch (err) {
-                console.error(err);
-            }
-        }
-        this.overlays = [];
-    }
-    _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
-        const newLine = this.overlayLayerView.drawLine(x1, y1, x2, y2, className, line, overlayLayer);
-        if (!line) {
-            this.overlays.push(newLine);
-        }
-        return newLine;
-    }
-    _drawCircle(x, y, radius, className, circle, overlayLayer) {
-        const newCircle = this.overlayLayerView.drawCircle(x, y, radius, className, circle, overlayLayer);
-        if (!circle) {
-            this.overlays.push(newCircle);
-        }
-        return newCircle;
-    }
-    _drawRect(x, y, w, h, className, rect, overlayLayer) {
-        const newRect = this.overlayLayerView.drawRect(x, y, w, h, className, rect, overlayLayer);
-        if (!rect) {
-            this.overlays.push(newRect);
-        }
-        return newRect;
-    }
-    _drawText(text, x, y, className, textEl, overlayLayer) {
-        const newText = this.overlayLayerView.drawText(text, x, y, className, textEl, overlayLayer);
-        if (!textEl) {
-            this.overlays.push(newText);
-        }
-        return newText;
-    }
-    _drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer) {
-        const newEls = this.overlayLayerView.drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer);
-        if (!existingEls) {
-            this.overlays.push(...newEls);
-        }
-        return newEls;
-    }
-    _drawTransformedRect(points, className, path, overlayLayer) {
-        let data = "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + "Z";
-        const newPath = this.overlayLayerView.drawPath(data, className, path, overlayLayer);
-        if (!path) {
-            this.overlays.push(newPath);
-        }
-        return newPath;
-    }
-}
+export class AbstractExtensionBase {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerCanvas;
+    constructor(extensionManager, designerCanvas) {
+        this.extensionManager = extensionManager;
+        this.designerCanvas = designerCanvas;
+        this.overlayLayerView = designerCanvas.overlayLayer;
+    }
+    _removeAllOverlays() {
+        for (let o of this.overlays) {
+            try {
+                this.overlayLayerView.removeOverlay(o);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        this.overlays = [];
+    }
+    _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+        const newLine = this.overlayLayerView.drawLine(x1, y1, x2, y2, className, line, overlayLayer);
+        if (!line) {
+            this.overlays.push(newLine);
+        }
+        return newLine;
+    }
+    _drawCircle(x, y, radius, className, circle, overlayLayer) {
+        const newCircle = this.overlayLayerView.drawCircle(x, y, radius, className, circle, overlayLayer);
+        if (!circle) {
+            this.overlays.push(newCircle);
+        }
+        return newCircle;
+    }
+    _drawRect(x, y, w, h, className, rect, overlayLayer) {
+        const newRect = this.overlayLayerView.drawRect(x, y, w, h, className, rect, overlayLayer);
+        if (!rect) {
+            this.overlays.push(newRect);
+        }
+        return newRect;
+    }
+    _drawText(text, x, y, className, textEl, overlayLayer) {
+        const newText = this.overlayLayerView.drawText(text, x, y, className, textEl, overlayLayer);
+        if (!textEl) {
+            this.overlays.push(newText);
+        }
+        return newText;
+    }
+    _drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer) {
+        const newEls = this.overlayLayerView.drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer);
+        if (!existingEls) {
+            this.overlays.push(...newEls);
+        }
+        return newEls;
+    }
+    _drawTransformedRect(points, className, path, overlayLayer) {
+        let data = "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + "Z";
+        const newPath = this.overlayLayerView.drawPath(data, className, path, overlayLayer);
+        if (!path) {
+            this.overlays.push(newPath);
+        }
+        return newPath;
+    }
+}

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

@@ -1,11 +1,11 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class AltToEnterContainerExtension extends AbstractExtension {
-    private _text;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-}
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class AltToEnterContainerExtension extends AbstractExtension {
+    private _text;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -1,21 +1,21 @@
-import { AbstractExtension } from './AbstractExtension.js';
-import { OverlayLayer } from "./OverlayLayer.js";
-export class AltToEnterContainerExtension extends AbstractExtension {
-    _text;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
-        this._text.style.fontSize = (14 / this.designerCanvas.scaleFactor) + 'px';
-        this._text.setAttribute('x', '' + (itemRect.x + 5 / this.designerCanvas.scaleFactor));
-        this._text.setAttribute('y', '' + (itemRect.y + 12 / this.designerCanvas.scaleFactor));
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from "./OverlayLayer.js";
+export class AltToEnterContainerExtension extends AbstractExtension {
+    _text;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
+        this._text.style.fontSize = (14 / this.designerCanvas.scaleFactor) + 'px';
+        this._text.setAttribute('x', '' + (itemRect.x + 5 / this.designerCanvas.scaleFactor));
+        this._text.setAttribute('y', '' + (itemRect.y + 12 / this.designerCanvas.scaleFactor));
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,10 +1,10 @@
-import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class AltToEnterContainerExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class AltToEnterContainerExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -1,13 +1,13 @@
-import { AltToEnterContainerExtension } from './AltToEnterContainerExtension.js';
-import { css } from "@node-projects/base-custom-webcomponent";
-export class AltToEnterContainerExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
-    }
+import { AltToEnterContainerExtension } from './AltToEnterContainerExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class AltToEnterContainerExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
+    }
     style = css `
     .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-weight:800; font-family: monospace; }
-  `;
-}
+  `;
+}

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

@@ -1,10 +1,10 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class CanvasExtension extends AbstractExtension {
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-}
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -1,27 +1,27 @@
-import { AbstractExtension } from './AbstractExtension.js';
-export class CanvasExtension extends AbstractExtension {
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        if (computedStyle.margin !== '0px') {
-            const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
-            const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
-            const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
-            const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-            this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin');
-            this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin');
-            this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin');
-            this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
-        }
-    }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { AbstractExtension } from './AbstractExtension.js';
+export class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        if (computedStyle.margin !== '0px') {
+            const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+            const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+            const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
+            const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
+            this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin');
+            this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin');
+            this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin');
+            this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
+        }
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,10 +1,10 @@
-import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class CanvasExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class CanvasExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -1,15 +1,15 @@
-import { CanvasExtension } from './CanvasExtension.js';
-import { css } from "@node-projects/base-custom-webcomponent";
-export class CanvasExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (getComputedStyle(designItem.element).display == 'block')
-            return true;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new CanvasExtension(extensionManager, designerView, designItem);
-    }
+import { CanvasExtension } from './CanvasExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class CanvasExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'block')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new CanvasExtension(extensionManager, designerView, designItem);
+    }
     style = css `
     .svg-margin { fill: #ff944722; }
-  `;
-}
+  `;
+}

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

@@ -1,24 +1,24 @@
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from '../IExtensionManger.js';
-export type handlesPointerEvent = {
-    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
-};
-export declare class EditTextExtension extends AbstractExtension implements handlesPointerEvent {
-    private static template;
-    private _contentEditedBound;
-    private _blurBound;
-    private _blurTimeout;
-    private _foreignObject;
-    private _focusBound;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
-    _contentEdited(): void;
-    _blur(): void;
-    _focus(): void;
-    _formatSelection(type: string): void;
-}
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from '../IExtensionManger.js';
+export type handlesPointerEvent = {
+    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
+};
+export declare class EditTextExtension extends AbstractExtension implements handlesPointerEvent {
+    private static template;
+    private _contentEditedBound;
+    private _blurBound;
+    private _blurTimeout;
+    private _foreignObject;
+    private _focusBound;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
+    _contentEdited(): void;
+    _blur(): void;
+    _focus(): void;
+    _formatSelection(type: string): void;
+}

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

@@ -1,8 +1,8 @@
-import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-import { ExtensionType } from "../ExtensionType.js";
-import { OverlayLayer } from "../OverlayLayer.js";
-export class EditTextExtension extends AbstractExtension {
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+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>
@@ -10,87 +10,88 @@ export class EditTextExtension extends AbstractExtension {
       <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;
-    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.Selection);
-        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']));
-        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('height', '24');
-        foreignObject.appendChild(elements);
-        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
-        this.overlays.push(foreignObject);
-        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
-        this.extendedItem.element.addEventListener('blur', this._blurBound);
-        this.extendedItem.element.addEventListener('focus', this._focusBound);
-    }
-    refresh() {
-        this.dispose();
-    }
-    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 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();
-    }
-}
+  `;
+    _contentEditedBound;
+    _blurBound;
+    _blurTimeout;
+    _foreignObject;
+    _focusBound;
+    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.Selection);
+        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']));
+        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('height', '24');
+        foreignObject.appendChild(elements);
+        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
+        this.overlays.push(foreignObject);
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.addEventListener('focus', this._focusBound);
+    }
+    refresh() {
+        this.dispose();
+    }
+    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 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();
+    }
+}
+export { EditTextExtension };

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

@@ -1,9 +1,9 @@
-import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { IDesignerExtension } from '../IDesignerExtension.js';
-import { IExtensionManager } from '../IExtensionManger.js';
-export declare class EditTextExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-}
+import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerExtension } from '../IDesignerExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class EditTextExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}