@node-projects/web-component-designer 0.1.129 → 0.1.131

package/dist/elements/helper/GridHelper.d.ts

@@ -20,4 +20,6 @@ export declare function calculateGridInformation(designItem: IDesignItem): {
         row?: number;
         type: 'h' | 'v';
     }[];
+    xGap: number;
+    yGap: number;
 };

package/dist/elements/helper/GridHelper.js

@@ -91,7 +91,7 @@ export function calculateGridInformation(designItem) {
         yGap += gp;
         yOffset += gp;
     }
-    const retVal = { cells: [], gaps: [] };
+    const retVal = { cells: [], gaps: [], xGap, yGap };
     for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) {
         const r = rows[rowIdx];
         let areas = null;

package/dist/elements/services/placementService/DefaultPlacementService.d.ts

@@ -2,7 +2,6 @@ import type { IPoint } from '../../../interfaces/IPoint.js';
 import type { IPlacementService } from './IPlacementService.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
-import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export declare class DefaultPlacementService implements IPlacementService {
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): boolean;
@@ -11,8 +10,8 @@ export declare class DefaultPlacementService implements IPlacementService {
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     private calculateTrack;
     placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
-    startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
     enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;

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

@@ -6,4 +6,5 @@ export interface IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
     style?: CSSStyleSheet | CSSStyleSheet[];
+    svgDefs?: string;
 }

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

@@ -11,4 +11,5 @@ export declare class DisplayGridExtensionProvider implements IDesignerExtensionP
     shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
     readonly style: CSSStyleSheet;
+    readonly svgDefs = "\n    <pattern id=\"pattern-stripe\" \n      width=\"4\" height=\"4\" \n      patternUnits=\"userSpaceOnUse\"\n      patternTransform=\"rotate(45)\">\n      <rect width=\"1\" height=\"4\" transform=\"translate(0,0)\" fill=\"white\"></rect>\n    </pattern>\n    <mask id=\"mask-stripe\">\n      <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#pattern-stripe)\" />\n    </mask>";
 }

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

@@ -21,8 +21,18 @@ export class DisplayGridExtensionProvider {
     .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: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: #0000ff22; }
+    .svg-grid-gap { stroke: transparent; fill: var(--svg-grid-stroke-color); opacity: 0.3; mask: url(#mask-stripe) }
     .svg-grid-header { fill: var(--svg-grid-fill-color); stroke: var(--svg-grid-stroke-color); }
     .svg-grid-plus-sign { stroke: black; }
   `;
+    svgDefs = `
+    <pattern id="pattern-stripe" 
+      width="4" height="4" 
+      patternUnits="userSpaceOnUse"
+      patternTransform="rotate(45)">
+      <rect width="1" height="4" transform="translate(0,0)" fill="white"></rect>
+    </pattern>
+    <mask id="mask-stripe">
+      <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
+    </mask>`;
 }

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

@@ -1,5 +1,6 @@
 import { EventNames } from "../../../../../enums/EventNames.js";
 import { getContentBoxContentOffsets } from "../../../../helper/ElementHelper.js";
+import { calculateGridInformation } from "../../../../helper/GridHelper.js";
 import { roundValue } from "../../../../helper/LayoutHelper.js";
 import { getDesignerCanvasNormalizedTransformedCornerDOMPoints, getElementCombinedTransform, transformPointByInverseMatrix, normalizeToAbsolutePosition } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from "../AbstractExtension.js";
@@ -45,7 +46,7 @@ export class GridChildResizeExtension extends AbstractExtension {
         //#endregion Circles
     }
     _drawResizerOverlay(x, y, cursor, oldCircle) {
-        let circle = this._drawCircle(x, y, 3 / this.designerCanvas.zoomFactor, 'svg-primary-resizer', oldCircle);
+        let circle = this._drawCircle(x, y, 3 / this.designerCanvas.zoomFactor, 'svg-grid-resizer', oldCircle);
         circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         if (!oldCircle) {
             circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(circle, event, cursor));
@@ -84,8 +85,6 @@ export class GridChildResizeExtension extends AbstractExtension {
                 const transformOrigin = new DOMPoint(toArr[0], toArr[1]);
                 this._initialComputedTransformOrigins.push(transformOrigin);
                 this._initialTransformOrigins.push(this.extendedItem.element.style.transformOrigin);
-                if (this.designerCanvas.alignOnSnap)
-                    this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 this.prepareResize(this.extendedItem, this._actionModeStarted);
                 break;
             case EventNames.PointerMove:
@@ -103,50 +102,61 @@ export class GridChildResizeExtension extends AbstractExtension {
                         deltaX = deltaX < deltaY ? deltaX : deltaY;
                         deltaY = deltaX;
                     }
-                    let i = 0;
-                    let width = null;
-                    let height = null;
-                    switch (this._actionModeStarted) {
-                        case 'e-resize':
-                            width = (this._initialSizes[i].width + deltaX);
-                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
-                            break;
-                        case 'se-resize':
-                            width = (this._initialSizes[i].width + deltaX);
-                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
-                            height = (this._initialSizes[i].height + deltaY);
-                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
-                            break;
-                        case 's-resize':
-                            height = (this._initialSizes[i].height + deltaY);
-                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
-                            break;
-                        case 'sw-resize':
-                            width = (this._initialSizes[i].width - deltaX);
-                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
-                            height = (this._initialSizes[i].height + deltaY);
-                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
-                            break;
-                        case 'w-resize':
-                            width = (this._initialSizes[i].width - deltaX);
-                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
-                            break;
-                        case 'nw-resize':
-                            width = (this._initialSizes[i].width - deltaX);
-                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
-                            height = (this._initialSizes[i].height - deltaY);
-                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
-                            break;
-                        case 'n-resize':
-                            height = (this._initialSizes[i].height - deltaY);
-                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
-                            break;
-                        case 'ne-resize':
-                            width = (this._initialSizes[i].width + deltaX);
-                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
-                            height = (this._initialSizes[i].height - deltaY);
-                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
-                            break;
+                    let posX = 0;
+                    let posY = 0;
+                    let cellX = 0;
+                    let cellY = 0;
+                    const gridInformation = calculateGridInformation(this.extendedItem.parent);
+                    const gridPos = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.parent.element);
+                    const evPos = this.designerCanvas.getNormalizedEventCoordinates(event);
+                    const cs = getComputedStyle(this.extendedItem.element);
+                    this.extendedItem.element.style.gridColumnStart = cs.gridColumnStart;
+                    this.extendedItem.element.style.gridColumnEnd = cs.gridColumnEnd === 'auto' ? '' + (parseInt(cs.gridColumnStart) + 1) : cs.gridColumnEnd;
+                    this.extendedItem.element.style.gridRowStart = cs.gridRowStart;
+                    this.extendedItem.element.style.gridRowEnd = cs.gridRowEnd === 'auto' ? '' + (parseInt(cs.gridRowStart) + 1) : cs.gridRowEnd;
+                    if (this._actionModeStarted == 'nw-resize' || this._actionModeStarted == 'w-resize' || this._actionModeStarted == 'sw-resize') {
+                        for (let i = 0; i < gridInformation.cells.length; i++) {
+                            const cell = gridInformation.cells[i][0];
+                            const cellMiddlePos = posX + (cell.width / 2);
+                            if (evPos.x > gridPos.x + cellMiddlePos) {
+                                cellX = i;
+                            }
+                            posX += cell.width + gridInformation.xGap;
+                        }
+                        this.extendedItem.element.style.gridColumnStart = '' + (cellX + 2);
+                    }
+                    if (this._actionModeStarted == 'nw-resize' || this._actionModeStarted == 'n-resize' || this._actionModeStarted == 'ne-resize') {
+                        for (let i = 0; i < gridInformation.cells.length; i++) {
+                            const cell = gridInformation.cells[i][0];
+                            const cellMiddlePos = posY + (cell.height / 2);
+                            if (evPos.y > gridPos.y + cellMiddlePos) {
+                                cellY = i;
+                            }
+                            posY += cell.height + gridInformation.yGap;
+                        }
+                        this.extendedItem.element.style.gridRowStart = '' + (cellY + 2);
+                    }
+                    if (this._actionModeStarted == 'se-resize' || this._actionModeStarted == 'e-resize' || this._actionModeStarted == 'ne-resize') {
+                        for (let i = 0; i < gridInformation.cells.length; i++) {
+                            const cell = gridInformation.cells[i][0];
+                            const cellMiddlePos = posX + (cell.width / 2);
+                            if (evPos.x > gridPos.x + cellMiddlePos) {
+                                cellX = i;
+                            }
+                            posX += cell.width + gridInformation.xGap;
+                        }
+                        this.extendedItem.element.style.gridColumnEnd = '' + (cellX + 2);
+                    }
+                    if (this._actionModeStarted == 'sw-resize' || this._actionModeStarted == 's-resize' || this._actionModeStarted == 'se-resize') {
+                        for (let i = 0; i < gridInformation.cells[0].length; i++) {
+                            const cell = gridInformation.cells[0][i];
+                            const cellMiddlePos = posY + (cell.height / 2);
+                            if (evPos.y > gridPos.y + cellMiddlePos) {
+                                cellY = i;
+                            }
+                            posY += cell.height + gridInformation.yGap;
+                        }
+                        this.extendedItem.element.style.gridRowEnd = '' + (cellY + 2);
                     }
                     const resizedElements = [this.extendedItem, this.extendedItem.parent];
                     this.extensionManager.refreshExtensions(resizedElements);

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

@@ -11,6 +11,6 @@ export class GridChildResizeExtensionProvider {
         return new GridChildResizeExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
+    .svg-grid-resizer { stroke: #3899ec; fill: white; pointer-events: all }
   `;
 }

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.d.ts

@@ -3,4 +3,5 @@ import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
 export interface IDesignerPointerExtensionProvider {
     getExtension(designerView: IDesignerCanvas): IDesignerPointerExtension;
     style?: CSSStyleSheet;
+    svgDefs?: string;
 }

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

@@ -59,20 +59,45 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         this._initialize();
     }
     _initialize() {
-        let styles = [OverlayLayerView.style];
+        const styles = [OverlayLayerView.style];
+        const alreadyApplied = new Set();
         for (const extList of this._serviceContainer.designerExtensions) {
             for (const ext of extList[1]) {
                 if (ext.style) {
-                    if (Array.isArray(ext.style))
-                        styles.push(...ext.style);
-                    else
-                        styles.push(ext.style);
+                    if (!alreadyApplied.has(ext.style)) {
+                        alreadyApplied.add(ext.style);
+                        if (Array.isArray(ext.style))
+                            styles.push(...ext.style);
+                        else
+                            styles.push(ext.style);
+                    }
+                }
+                if (ext.svgDefs) {
+                    if (!alreadyApplied.has(ext.svgDefs)) {
+                        alreadyApplied.add(ext.svgDefs);
+                        const a = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+                        a.innerHTML = ext.svgDefs;
+                        for (let n of [...a.children])
+                            this._defs.appendChild(n);
+                    }
                 }
             }
         }
         for (const ext of this._serviceContainer.designerPointerExtensions) {
             if (ext.style) {
-                styles.push(ext.style);
+                if (!alreadyApplied.has(ext.style)) {
+                    alreadyApplied.add(ext.style);
+                    styles.push(ext.style);
+                }
+            }
+            if (ext.svgDefs) {
+                if (!alreadyApplied.has(ext.svgDefs)) {
+                    alreadyApplied.add(ext.svgDefs);
+                    const a = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+                    a.innerHTML = ext.svgDefs;
+                    for (let n of [...a.children])
+                        this._defs.appendChild(n);
+                }
             }
         }
         this.shadowRoot.adoptedStyleSheets = styles;

package/dist/index.d.ts

@@ -88,7 +88,7 @@ export type { IMultiplayerService } from "./elements/services/multiplayerService
 export * from "./elements/services/multiplayerService/MultiplayerService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
-export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";
+export type { IPropertiesService, RefreshMode } from "./elements/services/propertiesService/IPropertiesService.js";
 export type { IProperty } from "./elements/services/propertiesService/IProperty.js";
 export type { IPropertyEditor } from "./elements/services/propertiesService/IPropertyEditor.js";
 export type { IPropertyGroup } from "./elements/services/propertiesService/IPropertyGroup.js";

package/package.json

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