@node-projects/web-component-designer 0.1.126 → 0.1.127

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/GridChildToolbarExtensionProvider.d.ts

@@ -4,6 +4,6 @@ import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { IDesignerExtension } from '../IDesignerExtension.js';
 import { IExtensionManager } from '../IExtensionManger.js';
 export declare class GridChildToolbarExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
 }

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

@@ -1,11 +1,12 @@
 import { NodeType } from '../../../../item/NodeType.js';
 import { GridChildToolbarExtension } from './GridChildToolbarExtension.js';
+import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js';
 export class GridChildToolbarExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.nodeType === NodeType.Element && designItem.parent) {
             const cs = designItem.parent?.getComputedStyle();
             if (cs != null && (cs.display === 'grid' || cs.display === 'inline-grid'))
-                return true;
+                return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false;
         }
         return false;
     }

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension copy.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/grid/GridToolbarExtension copy.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 - 44) });
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider copy.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/grid/GridToolbarExtensionProvider copy.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/GridToolbarExtensionProvider.d.ts

@@ -4,6 +4,6 @@ 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;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
 }

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

@@ -1,10 +1,12 @@
 import { GridToolbarExtension } from './GridToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
+import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js';
 export class GridToolbarExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.nodeType === NodeType.Element) {
             const d = getComputedStyle(designItem.element).display;
-            return d === 'grid' || d === 'inline-grid';
+            if (d === 'grid' || d === 'inline-grid')
+                return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false;
         }
         return false;
     }

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

@@ -0,0 +1,28 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class ResizeExtension extends AbstractExtension {
+    private resizeAllSelected;
+    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, resizeAllSelected: boolean);
+    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;
+}