@node-projects/web-component-designer 0.0.292 → 0.1.0

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

@@ -1,96 +0,0 @@
-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 {
-    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>
-  `;
-    _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.PrimarySelectionAndCanBeEntered);
-        //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._addOverlay(foreignObject, OverlayLayer.Foregorund);
-        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();
-    }
-}

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

@@ -1,9 +0,0 @@
-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;
-}

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

@@ -1,11 +0,0 @@
-import { EditTextExtension } from "./EditTextExtension.js";
-export class EditTextExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.name === 'button' || designItem.name === 'input')
-            return false;
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new EditTextExtension(extensionManager, designerView, designItem);
-    }
-}

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

@@ -1,23 +0,0 @@
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from '../IExtensionManger.js';
-import { handlesPointerEvent } from './EditTextExtension.js';
-export declare class EditTextWithStyloExtension extends AbstractExtension implements handlesPointerEvent {
-    private _contentEditedBound;
-    private _blurBound;
-    private static template;
-    private _resizeObserver;
-    private _rect1;
-    private _rect2;
-    private _rect3;
-    private _rect4;
-    private _foreignObject;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    private _drawClickOverlayRects;
-    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
-    refresh(): void;
-    dispose(): void;
-    _clickOutside(e: any): void;
-}

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

@@ -1,87 +0,0 @@
-import { html } from "@node-projects/base-custom-webcomponent";
-import { TextTool } from '../../tools/TextTool.js';
-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;
-    _foreignObject;
-    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;
-        this.designerCanvas.serviceContainer.globalContext.tool = new TextTool(true);
-        const elements = EditTextWithStyloExtension.template.content.cloneNode(true);
-        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        this._foreignObject = foreignObject;
-        foreignObject.setAttribute('x', '0');
-        foreignObject.setAttribute('y', '0');
-        foreignObject.setAttribute('width', '100%');
-        foreignObject.setAttribute('height', '100%');
-        foreignObject.appendChild(elements);
-        this._addOverlay(foreignObject, OverlayLayer.Foregorund);
-        this._drawClickOverlayRects();
-        this._rect1.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect2.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect3.addEventListener('pointerdown', (e) => this._clickOutside(e));
-        this._rect4.addEventListener('pointerdown', (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);
-    }
-    handlesPointerEvent(designerCanvas, event, currentElement) {
-        let p = event.composedPath();
-        const stylo = this._foreignObject.querySelector('stylo-editor');
-        return p.indexOf(stylo) >= 0;
-    }
-    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 +0,0 @@
-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 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 +0,0 @@
-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,15 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class ElementDragTitleExtension extends AbstractExtension {
-    private _rect;
-    private _text;
-    private _width;
-    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,60 +0,0 @@
-import { getTextWidth } from '../../../helper/TextHelper.js';
-import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
-import { NamedTools } from "../tools/NamedTools.js";
-import { AbstractExtension } from './AbstractExtension.js';
-const extensionWidth = 60;
-export class ElementDragTitleExtension extends AbstractExtension {
-    _rect;
-    _text;
-    _width;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
-        const boundRect = this.extendedItem.element.getBoundingClientRect();
-        let w = getTextWidth(this.extendedItem.name, '10px monospace');
-        let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints[1].x - transformedCornerPoints[0].x, 2) + Math.pow(transformedCornerPoints[1].y - transformedCornerPoints[0].y, 2));
-        let text = this.extendedItem.name;
-        this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
-        if (w > this._width)
-            text = this.extendedItem.name.substring(0, 10) + '…';
-        this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
-        this._text = this._drawText(text, (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
-        const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
-        title.textContent = this.extendedItem.name;
-        this._text.appendChild(title);
-        this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
-        this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
-        this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
-        this.refresh();
-    }
-    _drawMoveOverlay(itemRect) {
-    }
-    refresh() {
-        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 16 }, this.designerCanvas);
-        const angle = Math.atan2((transformedCornerPoints[1].y - transformedCornerPoints[0].y), (transformedCornerPoints[1].x - transformedCornerPoints[0].x)) * 180 / Math.PI;
-        const transformedCornerPointsTx = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 5 }, this.designerCanvas);
-        const h = (15 / this.designerCanvas.scaleFactor);
-        const w = (this._width / this.designerCanvas.scaleFactor);
-        this._rect.setAttribute('x', '' + transformedCornerPoints[0].x);
-        this._rect.setAttribute('y', '' + transformedCornerPoints[0].y);
-        this._rect.style.rotate = angle + 'deg';
-        this._rect.style.transformBox = 'fill-box';
-        this._rect.setAttribute('height', '' + h);
-        this._rect.setAttribute('width', '' + w);
-        this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
-        this._text.setAttribute('x', '' + transformedCornerPointsTx[0].x);
-        this._text.setAttribute('y', '' + transformedCornerPointsTx[0].y);
-        this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
-        this._text.setAttribute('transform', 'rotate(' + angle + ' ' + transformedCornerPointsTx[0].x + ' ' + transformedCornerPointsTx[0].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 +0,0 @@
-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 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 +0,0 @@
-import { ElementDragTitleExtension } from './ElementDragTitleExtension.js';
-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; font-family: monospace; }
-  `;
-}

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

@@ -1,22 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { ExtensionType } from './ExtensionType.js';
-import { IExtensionManager } from './IExtensionManger.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-export declare class ExtensionManager implements IExtensionManager {
-    designerCanvas: IDesignerCanvas;
-    designItemsWithExtentions: Set<IDesignItem>;
-    constructor(designerCanvas: IDesignerCanvas);
-    private _contentChanged;
-    private _selectedElementsChanged;
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): void;
-    removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
-    removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): void;
-    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): void;
-    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension): void;
-    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): void;
-    refreshAllAppliedExtentions(): void;
-    reapplyAllAppliedExtentions(): void;
-    private static getAllChildElements;
-}