@node-projects/web-component-designer 0.0.79 → 0.0.83

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

@@ -1,10 +1,13 @@
-import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
+import { IndentedTextWriter } from "../../helper/IndentedTextWriter.js";
 export class DomConverter {
-    static normalizeAttributeValue(value) {
+    static normalizeAttributeValue(value, useSingleQuotes = false) {
         if (typeof value === 'number')
             value = value.toString();
-        if (value)
+        if (value) {
+            if (useSingleQuotes)
+                return value.replaceAll('\'', ''');
             return value.replaceAll('"', '"');
+        }
         return value;
     }
     static normalizeContentValue(value) {
@@ -31,7 +34,7 @@ export class DomConverter {
     }
     static ConvertToString(designItems, designItemsAssignmentList) {
         let itw = new IndentedTextWriter();
-        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true };
+        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
         designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, options, designItemsAssignmentList);
         return itw.getString();
     }

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -53,6 +53,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     set designerWidth(value: string);
     get designerHeight(): string;
     set designerHeight(value: string);
+    get designerOffsetWidth(): number;
+    get designerOffsetHeight(): number;
     set additionalStyle(value: CSSStyleSheet);
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;

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

@@ -138,10 +138,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
-        this.instanceServiceContainer = new InstanceServiceContainer(this);
-        this.instanceServiceContainer.register("undoService", new UndoService(this));
-        this.instanceServiceContainer.register("selectionService", new SelectionService);
-        this.extensionManager = new ExtensionManager(this);
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
         this._onDblClickBound = this._onDblClick.bind(this);
@@ -163,6 +159,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer.style.height = value;
         this.zoomFactorChanged();
     }
+    get designerOffsetWidth() {
+        return this._canvasContainer.offsetWidth;
+    }
+    get designerOffsetHeight() {
+        return this._canvasContainer.offsetHeight;
+    }
     set additionalStyle(value) {
         if (value) {
             for (let r of value.rules) {
@@ -301,8 +303,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     initialize(serviceContainer) {
         this.serviceContainer = serviceContainer;
+        this.instanceServiceContainer = new InstanceServiceContainer(this);
+        this.instanceServiceContainer.register("undoService", new UndoService(this));
+        this.instanceServiceContainer.register("selectionService", new SelectionService);
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
         this.instanceServiceContainer.register("contentService", new ContentService(this.rootDesignItem));
+        this.extensionManager = new ExtensionManager(this);
         this.overlayLayer = new OverlayLayerView(serviceContainer);
         this.overlayLayer.style.pointerEvents = 'none';
         this._canvasContainer.appendChild(this.overlayLayer);
@@ -358,6 +364,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.snapLines.clearSnaplines();
     }
     setDesignItems(designItems) {
+        this._fillCalculationrects();
         this.instanceServiceContainer.undoService.clear();
         this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);

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/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.onpointerdown = (e) => this._pointerEvent(e);
+        iframe.contentWindow.onpointermove = (e) => this._pointerEvent(e);
+        iframe.contentWindow.onpointerup = (e) => this._pointerEvent(e);
+    }
+    _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

@@ -2,6 +2,7 @@ import { IDesignItem } from "../../../item/IDesignItem";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { AbstractExtension } from "./AbstractExtension";
 import "../../../helper/PathDataPolyfill";
+import { IPoint } from "../../../../interfaces/IPoint";
 import { IExtensionManager } from "./IExtensionManger";
 import { PathData } from "../../../helper/PathDataPolyfill";
 export declare class PathExtension extends AbstractExtension {
@@ -14,9 +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): void;
     _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
     _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
+    _checkCircleIndex(p: PathData, circlePos: IPoint): boolean;
     refresh(): void;
     dispose(): void;
 }