@node-projects/web-component-designer 0.0.80 → 0.0.84

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

@@ -68,6 +68,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       background-color:rgba(164,206,249,.6);
     }
     #outer {
+      user-select: none;
       display: flex;
       flex-direction: column;
       width: 100%;
@@ -201,17 +202,27 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._lowertoolbar = this._getDomElement('lowertoolbar');
         this._sVert = this._getDomElement('s-vert');
         this._sHor = this._getDomElement('s-hor');
-        this._sVert.addEventListener('scrollbar-input', () => this._onScrollbar());
-        this._sHor.addEventListener('scrollbar-input', () => this._onScrollbar());
+        this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
+        this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
     }
-    _onScrollbar() {
-        const x = this.designerCanvas.offsetWidth * (this._sHor.value - 0.5) * -1;
-        const y = this.designerCanvas.offsetHeight * (this._sVert.value - 0.5) * -1;
+    _onScrollbar(e) {
+        if (e?.detail == 'incrementLarge')
+            e.target.value += 0.25;
+        else if (e?.detail == 'decrementLarge')
+            e.target.value -= 0.25;
+        else if (e?.detail == 'incrementSmall')
+            e.target.value += 0.05;
+        else if (e?.detail == 'decrementSmall')
+            e.target.value -= 0.05;
+        const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth;
+        const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight;
+        const x = w * (this._sHor.value - 0.5) * -2;
+        const y = h * (this._sVert.value - 0.5) * -2;
         this.designerCanvas.canvasOffset = { x, y };
     }
     _onWheel(event) {
+        event.preventDefault();
         if (event.ctrlKey) {
-            event.preventDefault();
             let zf = this._designerCanvas.zoomFactor;
             zf += event.deltaY * -0.001; //deltamode = 0
             if (zf < 0.02)
@@ -220,6 +231,11 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             this._zoomInput.value = Math.round(zf * 100) + '%';
             //TODO: we should zoom on the current cursor position, so it stays the center
         }
+        else {
+            this._sHor.value += event.deltaX / 1000;
+            this._sVert.value += event.deltaY / 1000;
+            this._onScrollbar(null);
+        }
     }
     get designerWidth() {
         return this._designerCanvas.designerWidth;
@@ -259,7 +275,9 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     }
     getHTML(designItemsAssignmentList) {
         //this.instanceServiceContainer.selectionService.setSelectedElements(null);
-        return DomConverter.ConvertToString([...this._designerCanvas.rootDesignItem.children()], designItemsAssignmentList);
+        if (this._designerCanvas.rootDesignItem.childCount > 0)
+            return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), designItemsAssignmentList);
+        return '';
     }
     async parseHTML(html) {
         const parserService = this.serviceContainer.htmlParserService;

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

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

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

@@ -0,0 +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();
+    }
+}

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

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

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

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

@@ -3,11 +3,12 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { ExtensionType } from './ExtensionType';
 import { IExtensionManager } from "./IExtensionManger";
 export declare class ExtensionManager implements IExtensionManager {
-    designerView: IDesignerCanvas;
-    constructor(designerView: IDesignerCanvas);
+    designerCanvas: IDesignerCanvas;
+    constructor(designerCanvas: IDesignerCanvas);
+    private _contentChanged;
     private _selectedElementsChanged;
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType): void;
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType): void;
+    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;

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

@@ -1,16 +1,32 @@
 import { DesignItem } from "../../../item/DesignItem";
 import { ExtensionType } from './ExtensionType';
 export class ExtensionManager {
-    designerView;
-    constructor(designerView) {
-        this.designerView = designerView;
-        designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));
-        //TODO: Create Permanent Extensions. We need a Event for new DesignItem Added and Removed from DOM
+    designerCanvas;
+    constructor(designerCanvas) {
+        this.designerCanvas = designerCanvas;
+        designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));
+        designerCanvas.instanceServiceContainer.contentService.onContentChanged.on(this._contentChanged.bind(this));
+    }
+    _contentChanged(contentChanged) {
+        switch (contentChanged.changeType) {
+            case 'added':
+                this.applyExtensions(contentChanged.designItems, ExtensionType.Permanent, true);
+                break;
+            case 'moved':
+                this.refreshExtensions(contentChanged.designItems, ExtensionType.Permanent);
+                break;
+            case 'parsed':
+                this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, true);
+                break;
+            case 'removed':
+                this.removeExtensions(contentChanged.designItems, ExtensionType.Permanent);
+                break;
+        }
     }
     _selectedElementsChanged(selectionChangedEvent) {
         if (selectionChangedEvent.oldSelectedElements && selectionChangedEvent.oldSelectedElements.length) {
             if (selectionChangedEvent.oldSelectedElements[0].parent) {
-                const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerView.serviceContainer, this.designerView.instanceServiceContainer);
+                const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
                 this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
                 this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelection);
                 this.removeExtensions(selectionChangedEvent.oldSelectedElements, ExtensionType.Selection);
@@ -19,21 +35,21 @@ export class ExtensionManager {
         if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
             this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection);
             this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection);
-            const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, this.designerView.serviceContainer, this.designerView.instanceServiceContainer);
+            const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
             this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
         }
         this.refreshExtensions(selectionChangedEvent.selectedElements);
     }
-    applyExtension(designItem, extensionType) {
+    applyExtension(designItem, extensionType, recursive = false) {
         if (designItem) {
-            const extProv = this.designerView.serviceContainer.designerExtensions.get(extensionType);
+            const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
             if (extProv) {
                 for (let e of extProv) {
-                    if (e.shouldExtend(this, this.designerView, designItem)) {
+                    if (e.shouldExtend(this, this.designerCanvas, designItem)) {
                         let appE = designItem.appliedDesignerExtensions.get(extensionType);
                         if (!appE)
                             appE = [];
-                        const ext = e.getExtension(this, this.designerView, designItem);
+                        const ext = e.getExtension(this, this.designerCanvas, designItem);
                         try {
                             ext.extend();
                         }
@@ -45,19 +61,24 @@ export class ExtensionManager {
                     }
                 }
             }
+            if (recursive) {
+                for (const d of designItem.children()) {
+                    this.applyExtension(d, extensionType, recursive);
+                }
+            }
         }
     }
-    applyExtensions(designItems, extensionType) {
+    applyExtensions(designItems, extensionType, recursive = false) {
         if (designItems) {
-            const extProv = this.designerView.serviceContainer.designerExtensions.get(extensionType);
+            const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
             if (extProv) {
                 for (let e of extProv) {
                     for (let i of designItems) {
-                        if (e.shouldExtend(this, this.designerView, i)) {
+                        if (e.shouldExtend(this, this.designerCanvas, i)) {
                             let appE = i.appliedDesignerExtensions.get(extensionType);
                             if (!appE)
                                 appE = [];
-                            const ext = e.getExtension(this, this.designerView, i);
+                            const ext = e.getExtension(this, this.designerCanvas, i);
                             try {
                                 ext.extend();
                             }
@@ -70,6 +91,11 @@ export class ExtensionManager {
                     }
                 }
             }
+            if (recursive) {
+                for (const d of designItems) {
+                    this.applyExtensions(Array.from(d.children()), extensionType, recursive);
+                }
+            }
         }
     }
     removeExtension(designItem, extensionType) {

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

@@ -1,8 +1,8 @@
 import { IDesignItem } from "../../../item/IDesignItem";
 import { ExtensionType } from './ExtensionType';
 export interface IExtensionManager {
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType): any;
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType): any;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): any;
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): any;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;

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

@@ -0,0 +1,11 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class IframeExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    _pointerEvent(event: PointerEvent): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,46 @@
+import { AbstractExtension } from './AbstractExtension';
+export class IframeExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        // forward events to designer, so iframe is selectable via click
+        let iframe = this.extendedItem.element;
+        iframe.contentWindow.addEventListener('pointerdown', (e) => this._pointerEvent(e), { capture: true });
+        iframe.contentWindow.addEventListener('pointermove', (e) => this._pointerEvent(e), { capture: true });
+        iframe.contentWindow.addEventListener('pointerup', (e) => this._pointerEvent(e), { capture: true });
+    }
+    _pointerEvent(event) {
+        const rect = this.extendedItem.element.getBoundingClientRect();
+        const that = this;
+        const handler = {
+            get(target, property) {
+                switch (property) {
+                    case 'composedPath':
+                        return () => [that.extendedItem.element];
+                    case 'x':
+                    case 'clientX':
+                    case 'offsetX':
+                    case 'pageX':
+                        return target[property] + rect.x;
+                    case 'y':
+                    case 'clientY':
+                    case 'offsetY':
+                    case 'pageY':
+                        return target[property] + rect.y;
+                }
+                return target[property];
+            }
+        };
+        event.preventDefault();
+        event.stopPropagation();
+        const proxy = new Proxy(event, handler);
+        //@ts-ignore
+        this.designerCanvas._pointerEventHandlerBound(proxy);
+    }
+    refresh() {
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

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

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

@@ -0,0 +1,9 @@
+import { IframeExtension } from "./IframeExtension.js";
+export class IframeExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        return designItem.name == 'iframe';
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new IframeExtension(extensionManager, designerCanvas, designItem);
+    }
+}

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

@@ -4,7 +4,7 @@ import { AbstractExtension } from './AbstractExtension';
 import { IExtensionManager } from "./IExtensionManger";
 export declare class InvisibleDivExtension extends AbstractExtension {
     private _rect;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;
     dispose(): void;

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

@@ -1,8 +1,8 @@
 import { AbstractExtension } from './AbstractExtension';
 export class InvisibleDivExtension extends AbstractExtension {
     _rect;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
+    constructor(extensionManager, designerCanvas, extendedItem) {
+        super(extensionManager, designerCanvas, extendedItem);
     }
     extend() {
         this.refresh();

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

@@ -4,7 +4,7 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { IDesignerExtension } from "./IDesignerExtension";
 import { IExtensionManager } from "./IExtensionManger";
 export declare class InvisibleDivExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
     readonly style: CSSStyleSheet;
 }

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

@@ -1,15 +1,15 @@
 import { InvisibleDivExtension } from "./InvisibleDivExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class InvisibleDivExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.name == 'div') {
             const st = window.getComputedStyle(designItem.element);
             return st.backgroundColor == 'rgba(0, 0, 0, 0)' && st.borderStyle == 'none';
         }
         return false;
     }
-    getExtension(extensionManager, designerView, designItem) {
-        return new InvisibleDivExtension(extensionManager, designerView, designItem);
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new InvisibleDivExtension(extensionManager, designerCanvas, designItem);
     }
     style = css `
     .svg-invisible-div { stroke: lightgray; fill: transparent; stroke-width: 1;

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

@@ -15,10 +15,9 @@ export declare class PathExtension extends AbstractExtension {
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
-    _drawPath(path: PathData[], index: number): string;
     _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
     _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
-    _drawHelpLine(pStart: IPoint, pEnd: IPoint): void;
+    _checkCircleIndex(p: PathData, circlePos: IPoint): boolean;
     refresh(): void;
     dispose(): void;
 }