@node-projects/web-component-designer 0.1.111 → 0.1.113

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -148,7 +148,7 @@ export function createDefaultServiceContainer() {
         new ConditionExtensionProvider(new SelectionDefaultExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainerAndCanBeEntered, [
-        new DisplayGridExtensionProvider(),
+        new DisplayGridExtensionProvider('lightgray', '#8080807d'),
         new EditGridColumnRowSizesExtensionProvider(),
         new FlexboxExtensionProvider()
     ]);

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

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

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

@@ -8,9 +8,14 @@ export class DisplayGridExtension extends AbstractExtension {
     _gaps;
     _group;
     gridInformation;
+    gridInformationString;
     _lastEvent;
-    constructor(extensionManager, designerView, extendedItem) {
+    gridColor;
+    gridFillColor;
+    constructor(extensionManager, designerView, extendedItem, gridColor, gridFillColor) {
         super(extensionManager, designerView, extendedItem);
+        this.gridColor = gridColor;
+        this.gridFillColor = gridFillColor;
     }
     extend(cache, event) {
         this._initSVGArrays();
@@ -18,40 +23,46 @@ export class DisplayGridExtension extends AbstractExtension {
     }
     refresh(cache, event) {
         this.gridInformation = calculateGridInformation(this.extendedItem);
-        let cells = this.gridInformation.cells;
-        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);
-                this._group.appendChild(this._gaps[i]);
-            });
-            //draw cells
-            cells.forEach((row, i) => {
-                row.forEach((cell, j) => {
-                    this._cells[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._cells[i][j], OverlayLayer.Background);
-                    this._group.appendChild(this._cells[i][j]);
-                    if (cell.name) {
-                        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 (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");
+        const gridInformationString = JSON.stringify(this.gridInformation);
+        if (gridInformationString !== this.gridInformationString || (event != null && this._lastEvent !== event)) {
+            if (event)
+                this._lastEvent = event;
+            this.gridInformationString = gridInformationString;
+            let cells = this.gridInformation.cells;
+            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';
+                    this._group.style.setProperty("--svg-grid-stroke-color", this.gridColor);
+                    this._group.style.setProperty("--svg-grid-fill-color", this.gridFillColor);
+                }
+                //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);
+                    this._group.appendChild(this._gaps[i]);
+                });
+                //draw cells
+                cells.forEach((row, i) => {
+                    row.forEach((cell, j) => {
+                        this._cells[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._cells[i][j], OverlayLayer.Background);
+                        this._group.appendChild(this._cells[i][j]);
+                        if (cell.name) {
+                            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 (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");
+                            }
+                        }
+                    });
                 });
-            });
+            }
         }
     }
     dispose() {

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

@@ -5,6 +5,9 @@ import { IDesignerExtension } from '../IDesignerExtension.js';
 import { IExtensionManager } from '../IExtensionManger.js';
 export declare const gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
 export declare class DisplayGridExtensionProvider implements IDesignerExtensionProvider {
+    gridColor: string;
+    gridFillColor: string;
+    constructor(gridColor?: string, gridFillColor?: string);
     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/grid/DisplayGridExtensionProvider.js

@@ -2,6 +2,12 @@ import { css } from "@node-projects/base-custom-webcomponent";
 import { DisplayGridExtension } from './DisplayGridExtension.js';
 export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
 export class DisplayGridExtensionProvider {
+    gridColor;
+    gridFillColor;
+    constructor(gridColor = 'orange', gridFillColor = '#ff944722') {
+        this.gridColor = gridColor;
+        this.gridFillColor = gridFillColor;
+    }
     shouldExtend(extensionManager, designerCanvas, designItem) {
         const display = getComputedStyle(designItem.element).display;
         if (display == 'grid' || display == 'inline-grid')
@@ -9,14 +15,14 @@ export class DisplayGridExtensionProvider {
         return false;
     }
     getExtension(extensionManager, designerCanvas, designItem) {
-        return new DisplayGridExtension(extensionManager, designerCanvas, designItem);
+        return new DisplayGridExtension(extensionManager, designerCanvas, designItem, this.gridColor, this.gridFillColor);
     }
     style = css `
-    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
-    .svg-grid-current-cell { stroke: orange; stroke-dasharray: 5; fill: #e3ff4722; }
+    .svg-grid { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: var(--svg-grid-fill-color); }
+    .svg-grid-current-cell { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: #e3ff4722; }
     .svg-grid-area { font-size: 8px; }
-    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
-    .svg-grid-header { fill: #ff944722; stroke: orange; }
+    .svg-grid-gap { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: #0000ff22; }
+    .svg-grid-header { fill: var(--svg-grid-fill-color); stroke: var(--svg-grid-stroke-color); }
     .svg-grid-plus-sign { stroke: black; }
   `;
 }

package/dist/elements/widgets/propertyGrid/PropertyGrid.d.ts

@@ -13,6 +13,11 @@ export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     private _instanceServiceContainer;
     private _selectionChangedHandler;
     static readonly style: CSSStyleSheet;
+    static readonly properties: {
+        serviceContainer: ObjectConstructor;
+        instanceServiceContainer: ObjectConstructor;
+        selectedItems: ArrayConstructor;
+    };
     constructor();
     set serviceContainer(value: ServiceContainer);
     get serviceContainer(): ServiceContainer;

package/dist/elements/widgets/propertyGrid/PropertyGrid.js

@@ -26,6 +26,11 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
       box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
     }
     `;
+    static properties = {
+        serviceContainer: Object,
+        instanceServiceContainer: Object,
+        selectedItems: Array
+    };
     constructor() {
         super();
         this._restoreCachedInititalValues();

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -132,7 +132,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         };
     }
     set serviceContainer(value) {
-        this._waitForChildrenReady().then(() => this._pg.serviceContainer = value);
+        this._pg.serviceContainer = value;
     }
     set instanceServiceContainer(value) {
         this._instanceServiceContainer = value;

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.111",
+  "version": "0.1.113",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",