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

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

@@ -1,83 +1,83 @@
-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 EditTextWithStyloExtension extends AbstractExtension {
-    _contentEditedBound;
-    _blurBound;
+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 EditTextWithStyloExtension extends AbstractExtension {
+    _contentEditedBound;
+    _blurBound;
     static template = html `
     <stylo-editor></stylo-editor>
-  `;
-    _resizeObserver;
-    _rect1;
-    _rect2;
-    _rect3;
-    _rect4;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-        import('@papyrs/stylo/dist/esm/loader.js').then(d => d.defineCustomElements());
-    }
-    extend() {
-        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
-        this.extendedItem.element.setAttribute('contenteditable', 'true');
-        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
-        this.extendedItem.element.addEventListener('blur', this._blurBound);
-        this.extendedItem.element.focus();
-        this.designerCanvas.eatEvents = this.extendedItem.element;
-        const elements = EditTextWithStyloExtension.template.content.cloneNode(true);
-        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        foreignObject.setAttribute('x', '0');
-        foreignObject.setAttribute('y', '0');
-        foreignObject.setAttribute('width', '100%');
-        foreignObject.setAttribute('height', '100%');
-        foreignObject.appendChild(elements);
-        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
-        this.overlays.push(foreignObject);
-        this._drawClickOverlayRects();
-        this._rect1.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect1.addEventListener('pointerup', (e) => this._clickOutside(e));
-        this._rect2.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect2.addEventListener('pointerup', (e) => this._clickOutside(e));
-        this._rect3.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect3.addEventListener('pointerup', (e) => this._clickOutside(e));
-        this._rect4.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect4.addEventListener('pointerup', (e) => this._clickOutside(e));
-        requestAnimationFrame(() => {
-            const stylo = foreignObject.querySelector('stylo-editor');
-            //@ts-ignore
-            stylo.containerRef = this.extendedItem.element;
-            //@ts-ignore
-            stylo.config = {
-                dontInjectHeadCss: true
-            };
-        });
-        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
-        this._resizeObserver = new ResizeObserver(() => this._drawClickOverlayRects());
-        this._resizeObserver.observe(this.extendedItem.element);
-    }
-    _drawClickOverlayRects() {
-        const normalized = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        this._rect1 = this._drawRect(0, 0, this.designerCanvas.containerBoundingRect.width, normalized.y, 'svg-transparent', this._rect1, OverlayLayer.Normal);
-        this._rect2 = this._drawRect(0, 0, normalized.x, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect2, OverlayLayer.Normal);
-        this._rect3 = this._drawRect(normalized.x + normalized.width, 0, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect3, OverlayLayer.Normal);
-        this._rect4 = this._drawRect(0, normalized.y + normalized.height, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect4, OverlayLayer.Normal);
-    }
-    refresh() {
-        this.dispose();
-    }
-    dispose() {
-        this._resizeObserver.disconnect();
-        this._removeAllOverlays();
-        this.extendedItem.element.removeAttribute('contenteditable');
-        this.designerCanvas.eatEvents = null;
-        this.extendedItem.updateChildrenFromNodesChildren();
-        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
-    }
-    _clickOutside(e) {
-        this.extendedItem.innerHTML = this.extendedItem.element.innerHTML;
-        //TODO: the extension should remove itself, not the doubleclick extensions
-        //      cause the extension could be applied in another way
-        //maybe also the removal is maybe not desired (for example if it's permanet extension)
-        this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
-    }
-}
+  `;
+    _resizeObserver;
+    _rect1;
+    _rect2;
+    _rect3;
+    _rect4;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        import('@papyrs/stylo/dist/esm/loader.js').then(d => d.defineCustomElements());
+    }
+    extend() {
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        this.extendedItem.element.setAttribute('contenteditable', 'true');
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerCanvas.eatEvents = this.extendedItem.element;
+        const elements = EditTextWithStyloExtension.template.content.cloneNode(true);
+        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        foreignObject.setAttribute('x', '0');
+        foreignObject.setAttribute('y', '0');
+        foreignObject.setAttribute('width', '100%');
+        foreignObject.setAttribute('height', '100%');
+        foreignObject.appendChild(elements);
+        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
+        this.overlays.push(foreignObject);
+        this._drawClickOverlayRects();
+        this._rect1.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect1.addEventListener('pointerup', (e) => this._clickOutside(e));
+        this._rect2.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect2.addEventListener('pointerup', (e) => this._clickOutside(e));
+        this._rect3.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect3.addEventListener('pointerup', (e) => this._clickOutside(e));
+        this._rect4.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect4.addEventListener('pointerup', (e) => this._clickOutside(e));
+        requestAnimationFrame(() => {
+            const stylo = foreignObject.querySelector('stylo-editor');
+            //@ts-ignore
+            stylo.containerRef = this.extendedItem.element;
+            //@ts-ignore
+            stylo.config = {
+                dontInjectHeadCss: true
+            };
+        });
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
+        this._resizeObserver = new ResizeObserver(() => this._drawClickOverlayRects());
+        this._resizeObserver.observe(this.extendedItem.element);
+    }
+    _drawClickOverlayRects() {
+        const normalized = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._rect1 = this._drawRect(0, 0, this.designerCanvas.containerBoundingRect.width, normalized.y, 'svg-transparent', this._rect1, OverlayLayer.Normal);
+        this._rect2 = this._drawRect(0, 0, normalized.x, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect2, OverlayLayer.Normal);
+        this._rect3 = this._drawRect(normalized.x + normalized.width, 0, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect3, OverlayLayer.Normal);
+        this._rect4 = this._drawRect(0, normalized.y + normalized.height, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect4, OverlayLayer.Normal);
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this._resizeObserver.disconnect();
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.designerCanvas.eatEvents = null;
+        this.extendedItem.updateChildrenFromNodesChildren();
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
+    }
+    _clickOutside(e) {
+        this.extendedItem.innerHTML = this.extendedItem.element.innerHTML;
+        //TODO: the extension should remove itself, not the doubleclick extensions
+        //      cause the extension could be applied in another way
+        //maybe also the removal is maybe not desired (for example if it's permanet extension)
+        this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+    }
+}

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

@@ -1,10 +1,10 @@
-import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
-import { IDesignItem } from "../../../../item/IDesignItem";
-import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IDesignerExtension } from "../IDesignerExtension";
-import { IExtensionManager } from "../IExtensionManger";
-export declare class EditTextWithStyloExtensionProvider 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";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextWithStyloExtensionProvider 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/EditTextWithStyloExtensionProvider.js

@@ -1,15 +1,15 @@
-import { EditTextWithStyloExtension } from "./EditTextWithStyloExtension.js";
-import { css } from "@node-projects/base-custom-webcomponent";
-export class EditTextWithStyloExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.name === 'button' || designItem.name === 'input')
-            return false;
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new EditTextWithStyloExtension(extensionManager, designerView, designItem);
-    }
+import { EditTextWithStyloExtension } from "./EditTextWithStyloExtension.js";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class EditTextWithStyloExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.name === 'button' || designItem.name === 'input')
+            return false;
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextWithStyloExtension(extensionManager, designerView, designItem);
+    }
     style = css `
   .svg-transparent { stroke: none; fill: transparent; pointer-events: all; }
-`;
-}
+`;
+}

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

@@ -1,14 +1,14 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from './AbstractExtension';
-import { IExtensionManager } from "./IExtensionManger";
-export declare class ElementDragTitleExtension extends AbstractExtension {
-    private _rect;
-    private _text;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    _drawMoveOverlay(itemRect: DOMRect): void;
-    refresh(): void;
-    _pointerEvent(event: PointerEvent): void;
-    dispose(): void;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class ElementDragTitleExtension extends AbstractExtension {
+    private _rect;
+    private _text;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    _drawMoveOverlay(itemRect: DOMRect): void;
+    refresh(): void;
+    _pointerEvent(event: PointerEvent): void;
+    dispose(): void;
+}

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

@@ -1,38 +1,38 @@
-import { AbstractExtension } from './AbstractExtension';
-export class ElementDragTitleExtension extends AbstractExtension {
-    _rect;
-    _text;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        const boundRect = this.extendedItem.element.getBoundingClientRect();
-        this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
-        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
-        this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
-        this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
-        this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
-    }
-    _drawMoveOverlay(itemRect) {
-    }
-    refresh() {
-        const boundRect = this.extendedItem.element.getBoundingClientRect();
-        const xr = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
-        const yr = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16;
-        this._rect.setAttribute('x', xr);
-        this._rect.setAttribute('y', yr);
-        const x = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
-        const y = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5;
-        this._text.setAttribute('x', x);
-        this._text.setAttribute('y', y);
-    }
-    _pointerEvent(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        //@ts-ignore
-        this.designerCanvas._pointerEventHandlerBound(event, this.extendedItem.element);
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { NamedTools } from "../tools/NamedTools.js";
+import { AbstractExtension } from './AbstractExtension';
+export class ElementDragTitleExtension extends AbstractExtension {
+    _rect;
+    _text;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        const boundRect = this.extendedItem.element.getBoundingClientRect();
+        this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
+        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
+        this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
+        this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
+        this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
+    }
+    _drawMoveOverlay(itemRect) {
+    }
+    refresh() {
+        const boundRect = this.extendedItem.element.getBoundingClientRect();
+        const xr = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
+        const yr = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16;
+        this._rect.setAttribute('x', xr);
+        this._rect.setAttribute('y', yr);
+        const x = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
+        const y = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5;
+        this._text.setAttribute('x', x);
+        this._text.setAttribute('y', y);
+    }
+    _pointerEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,10 +1,10 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class ElementDragTitleExtensionProvider 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";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class ElementDragTitleExtensionProvider 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/ElementDragTitleExtensionProvider.js

@@ -1,13 +1,13 @@
-import { ElementDragTitleExtension } from "./ElementDragTitleExtension";
-import { css } from "@node-projects/base-custom-webcomponent";
-export class ElementDragTitleExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new ElementDragTitleExtension(extensionManager, designerView, designItem);
-    }
+import { ElementDragTitleExtension } from "./ElementDragTitleExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class ElementDragTitleExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new ElementDragTitleExtension(extensionManager, designerView, designItem);
+    }
     style = css `
     .svg-text-primary { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
-  `;
-}
+  `;
+}

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

@@ -1,17 +1,17 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { ExtensionType } from './ExtensionType';
-import { IExtensionManager } from "./IExtensionManger";
-export declare class ExtensionManager implements IExtensionManager {
-    designerCanvas: IDesignerCanvas;
-    constructor(designerCanvas: IDesignerCanvas);
-    private _contentChanged;
-    private _selectedElementsChanged;
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): void;
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): void;
-    removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
-    removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
-    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
-    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
-    refreshAllExtensions(designItems: IDesignItem[]): void;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { ExtensionType } from './ExtensionType';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class ExtensionManager implements IExtensionManager {
+    designerCanvas: IDesignerCanvas;
+    constructor(designerCanvas: IDesignerCanvas);
+    private _contentChanged;
+    private _selectedElementsChanged;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): void;
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): void;
+    removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
+    removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
+    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
+    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
+    refreshAllExtensions(designItems: IDesignItem[]): void;
+}