@node-projects/web-component-designer 0.1.104 → 0.1.105

package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtension.js

@@ -0,0 +1,34 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+export class FlexToolbarExtension extends AbstractExtension {
+    static template = html `
+    <div style="height: 100%; width: 100%;">
+      <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
+        <option>block</option>
+        <option selected>flex</option>
+        <option>grid</option>
+      </select>
+    </div>
+  `;
+    _toolbar;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        this._toolbar = this.createToolbar(FlexToolbarExtension.template, 200, 30);
+        const displayTypeEl = this._toolbar.getById('displayType');
+        displayTypeEl.onchange = () => {
+            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
+        };
+        this.refresh(cache, event);
+    }
+    refresh(cache, event) {
+        if (event) {
+            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
+            this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 36) });
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtensionProvider.d.ts

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

package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtensionProvider.js

@@ -0,0 +1,12 @@
+import { FlexToolbarExtension } from './FlexToolbarExtension.js';
+import { NodeType } from '../../../../item/NodeType.js';
+export class GridToolbarExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'grid')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new FlexToolbarExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ChildContextMenu.d.ts

@@ -0,0 +1,11 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class ChildContextMenu implements IContextMenuExtension {
+    private _title;
+    private _contextMenus;
+    constructor(title: string, ...contextMenus: IContextMenuExtension[]);
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ChildContextMenu.js

@@ -0,0 +1,14 @@
+export class ChildContextMenu {
+    _title;
+    _contextMenus;
+    constructor(title, ...contextMenus) {
+        this._title = title;
+        this._contextMenus = contextMenus;
+    }
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return this._contextMenus.some(x => x.shouldProvideContextmenu(event, designerView, designItem, initiator));
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [{ title: this._title, children: this._contextMenus.map(x => x.provideContextMenuItems(event, designerView, designItem)).flat() }];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js

@@ -5,10 +5,10 @@ export class CopyPasteContextMenu {
     }
     provideContextMenuItems(event, designerView, designItem) {
         return [
-            { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); }, shortCut: 'Ctrl + C' },
-            { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); }, shortCut: 'Ctrl + X' },
+            { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); }, shortCut: 'Ctrl + C', disabled: designItem === null },
+            { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); }, shortCut: 'Ctrl + X', disabled: designItem === null },
             { title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); }, shortCut: 'Ctrl + V' },
-            { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); }, shortCut: 'Del' },
+            { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); }, shortCut: 'Del', disabled: designItem === null },
         ];
     }
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js

@@ -1,6 +1,6 @@
 export class JumpToElementContextMenu {
     shouldProvideContextmenu(event, designerCanvas, designItem, initiator) {
-        return true;
+        return designItem !== null;
     }
     provideContextMenuItems(event, designerCanvas, designItem) {
         return [

package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js

@@ -3,7 +3,7 @@ import { DesignItem } from '../../../../item/DesignItem.js';
 export class MultipleItemsSelectedContextMenu {
     orderIndex = 60;
     shouldProvideContextmenu(event, designerCanvas, designItem, initiator) {
-        if (designItem.instanceServiceContainer.selectionService.selectedElements.length > 1) {
+        if (designItem?.instanceServiceContainer.selectionService.selectedElements.length > 1) {
             return true;
         }
         return false;

package/dist/elements/widgets/designerView/extensions/contextMenu/PathContextMenu.js

@@ -1,7 +1,7 @@
 import { createPathD } from '../../../../helper/PathDataPolyfill.js';
 export class PathContextMenu {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        if (designItem.element instanceof SVGPathElement)
+        if (designItem?.element instanceof SVGPathElement)
             return true;
         return false;
     }

package/dist/elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js

@@ -3,7 +3,7 @@ import { DeleteAction } from '../../../../services/undoService/transactionItems/
 import { InsertAction } from '../../../../services/undoService/transactionItems/InsertAction.js';
 export class RectContextMenu {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        if (designItem.element instanceof SVGRectElement)
+        if (designItem?.element instanceof SVGRectElement)
             return true;
         return false;
     }

package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js

@@ -2,7 +2,7 @@ import { CommandType } from '../../../../../commandHandling/CommandType.js';
 import { NodeType } from '../../../../item/NodeType.js';
 export class RotateLeftAndRight {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        return !designItem.isRootItem && designItem.nodeType == NodeType.Element;
+        return !designItem?.isRootItem && designItem?.nodeType == NodeType.Element;
     }
     provideContextMenuItems(event, designerView, designItem) {
         return [

package/dist/elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js

@@ -1,7 +1,7 @@
 import { NodeType } from "../../../../item/NodeType.js";
 export class SelectAllChildrenContextMenu {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        return designItem.hasChildren;
+        return designItem?.hasChildren;
     }
     provideContextMenuItems(event, designerCanvas, designItem) {
         return [{

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js

@@ -2,7 +2,7 @@ import { CommandType } from '../../../../../commandHandling/CommandType.js';
 import { NodeType } from '../../../../item/NodeType.js';
 export class ZMoveContextMenu {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        return !designItem.isRootItem && designItem.nodeType == NodeType.Element;
+        return !designItem?.isRootItem && designItem?.nodeType == NodeType.Element;
     }
     provideContextMenuItems(event, designerView, designItem) {
         return [

package/dist/elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js

@@ -1,7 +1,7 @@
 const offset = 10;
 export class ZoomToElementContextMenu {
     shouldProvideContextmenu(event, designerCanvas, designItem, initiator) {
-        return true;
+        return designItem !== null;
     }
     provideContextMenuItems(event, designerCanvas, designItem) {
         return [

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtension.d.ts

@@ -0,0 +1,12 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class FlexToolbarExtension extends AbstractExtension {
+    private static template;
+    private _toolbar;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js

@@ -0,0 +1,35 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+export class FlexToolbarExtension extends AbstractExtension {
+    static template = html `
+    <div style="height: 100%; width: 100%;">
+      <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
+        <option>block</option>
+        <option selected>flex</option>
+        <option>grid</option>
+      </select>
+    </div>
+  `;
+    _toolbar;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        this._toolbar = this.createToolbar(FlexToolbarExtension.template, 200, 30);
+        const displayTypeEl = this._toolbar.getById('displayType');
+        displayTypeEl.onchange = () => {
+            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
+            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
+        };
+        this.refresh(cache, event);
+    }
+    refresh(cache, event) {
+        if (event) {
+            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
+            this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 44) });
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.d.ts

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

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js

@@ -0,0 +1,12 @@
+import { FlexToolbarExtension } from './FlexToolbarExtension.js';
+import { NodeType } from '../../../../item/NodeType.js';
+export class FlexToolbarExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'flex')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new FlexToolbarExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtension.d.ts

@@ -0,0 +1,12 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class GridToolbarExtension extends AbstractExtension {
+    private static template;
+    private _toolbar;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtension.js

@@ -0,0 +1,66 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+export class GridToolbarExtension extends AbstractExtension {
+    static template = html `
+    <div style="height: 100%; width: 100%;">
+      <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
+        <option>block</option>
+        <option>flex</option>
+        <option selected>grid</option>
+      </select>
+      <select id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
+        <option>1x1</option>
+        <option>1x16</option>
+        <option>2x8</option>
+        <option>4x4</option>
+        <option>8x2</option>
+        <option>16x1</option>
+        <option>custom</option>
+      </select>
+    </div>
+  `;
+    _toolbar;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        const style = getComputedStyle(this.extendedItem.element);
+        this._toolbar = this.createToolbar(GridToolbarExtension.template, 200, 30);
+        const displayTypeEl = this._toolbar.getById('displayType');
+        displayTypeEl.onchange = () => {
+            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
+        };
+        const gridTypeEl = this._toolbar.getById('gridType');
+        let op = document.createElement('option');
+        op.innerText = style.gridTemplateColumns.split(' ').length + 'x' + style.gridTemplateRows.split(' ').length;
+        gridTypeEl.insertAdjacentElement('afterbegin', op);
+        gridTypeEl.selectedIndex = 0;
+        gridTypeEl.onchange = () => {
+            if (gridTypeEl.value == 'custom') {
+                const columns = prompt("Number of columns?", '4');
+                if (!columns)
+                    return;
+                const rows = prompt("Number of rows?", '4');
+                if (!rows)
+                    return;
+                this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
+                this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
+            }
+            else {
+                const parts = gridTypeEl.value.split('x');
+                this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
+                this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
+            }
+        };
+        this.refresh(cache, event);
+    }
+    refresh(cache, event) {
+        if (event) {
+            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
+            this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 36) });
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtensionProvider.d.ts

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

@@ -0,0 +1,17 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { GridToolbarExtension } from './GridToolbarExtension.js';
+import { NodeType } from '../../../../item/NodeType.js';
+export class GridToolbarExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'grid')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new GridToolbarExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-toolbar-container { overflow: visible }
+    .svg-toolbar-container div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.d.ts

@@ -8,6 +8,7 @@ export declare class DisplayGridExtension extends AbstractExtension {
     private _gaps;
     private _group;
     private gridInformation;
+    private _lastEvent;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event?: Event): void;
     refresh(cache: Record<string | symbol, any>, event?: Event): void;

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.js

@@ -8,6 +8,7 @@ export class DisplayGridExtension extends AbstractExtension {
     _gaps;
     _group;
     gridInformation;
+    _lastEvent;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -18,15 +19,17 @@ export class DisplayGridExtension extends AbstractExtension {
     refresh(cache, event) {
         this.gridInformation = calculateGridInformation(this.extendedItem);
         let cells = this.gridInformation.cells;
-        if (!this._group) {
-            this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
-            this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
-            this._group.style.transformOrigin = '0 0';
-            this._group.style.transformBox = 'fill-box';
-        }
+        if (event)
+            this._lastEvent = event;
         if (cells[0][0] && !isNaN(cells[0][0].height) && !isNaN(cells[0][0].width)) {
             if (this.gridInformation.cells.length != this._cells.length || this.gridInformation.cells[0].length != this._cells[0].length)
                 this._initSVGArrays();
+            if (!this._group) {
+                this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
+                this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
+                this._group.style.transformOrigin = '0 0';
+                this._group.style.transformBox = 'fill-box';
+            }
             //draw gaps
             this.gridInformation.gaps.forEach((gap, i) => {
                 this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Background);
@@ -41,8 +44,8 @@ export class DisplayGridExtension extends AbstractExtension {
                         this._texts[i][j] = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', this._texts[i][j], OverlayLayer.Background);
                         this._texts[i][j].setAttribute("dominant-baseline", "hanging");
                     }
-                    if (event && event instanceof MouseEvent) {
-                        let crd = this.designerCanvas.getNormalizedEventCoordinates(event);
+                    if (this._lastEvent && this._lastEvent instanceof MouseEvent) {
+                        let crd = this.designerCanvas.getNormalizedEventCoordinates(this._lastEvent);
                         if (crd.x >= cell.x && crd.y >= cell.y && crd.x <= cell.x + cell.width && crd.y <= cell.y + cell.height) {
                             this._cells[i][j].setAttribute("class", "svg-grid-current-cell");
                         }
@@ -56,6 +59,7 @@ export class DisplayGridExtension extends AbstractExtension {
     }
     _initSVGArrays() {
         this._removeAllOverlays();
+        this._group = null;
         this.gridInformation = calculateGridInformation(this.extendedItem);
         this._cells = new Array(this.gridInformation.cells.length);
         this.gridInformation.cells.forEach((row, i) => this._cells[i] = new Array(row.length));

package/dist/elements/widgets/designerView/extensions/grid/GridChildResizeExtension.d.ts

@@ -0,0 +1,27 @@
+import { IDesignItem } from "../../../../item/IDesignItem.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from "../IExtensionManger.js";
+export declare class GridChildResizeExtension extends AbstractExtension {
+    private _initialSizes;
+    private _actionModeStarted;
+    private _initialPoint;
+    private _offsetPoint;
+    private _circle1;
+    private _circle2;
+    private _circle3;
+    private _circle4;
+    private _circle5;
+    private _circle6;
+    private _circle7;
+    private _circle8;
+    private _initialComputedTransformOrigins;
+    private _initialTransformOrigins;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
+    _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
+    _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string): void;
+    private prepareResize;
+    dispose(): void;
+}