@node-projects/web-component-designer 0.0.205 → 0.0.207

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.js

@@ -54,7 +54,11 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
     setValue(designItems, property, value) {
         // No selector means local style, styleDeclaration is null means new property
         if (property.styleRule?.selector !== null && property.styleDeclaration) {
-            const action = new StylesheetStyleChangeAction(designItems[0].instanceServiceContainer.stylesheetService, property.styleDeclaration, value, property.styleDeclaration.value);
+            // styleDeclaration stored Propertygrid is not refreshed after entering a new value, so we need to reload
+            // TODO: we do not respect if a same style is found in a media query or another @rule, maybe we need a refresh in the stylesheet parser
+            const decls = designItems[0].instanceServiceContainer.stylesheetService?.getDeclarations(designItems[0], property.styleDeclaration.name);
+            const currentDecl = decls.find(x => x.parent.selector == property.styleDeclaration.parent.selector && x.parent.stylesheetName == property.styleDeclaration.parent.stylesheetName);
+            const action = new StylesheetStyleChangeAction(designItems[0].instanceServiceContainer.stylesheetService, property.styleDeclaration, value, currentDecl.value);
             designItems[0].instanceServiceContainer.undoService.execute(action);
             this._notifyChangedProperty(designItems[0], property, value);
             return;

package/dist/elements/services/undoService/transactionItems/CssStyleChangeAction.js

@@ -35,10 +35,6 @@ export class CssStyleChangeAction {
     newValue;
     oldValue;
     mergeWith(other) {
-        if (other instanceof CssStyleChangeAction && this.designItem === other.designItem && this.name === other.name) {
-            this.newValue = other.newValue;
-            return true;
-        }
         return false;
     }
 }

package/dist/elements/services/undoService/transactionItems/InsertChildAction copy.d.ts

@@ -0,0 +1,16 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare class InsertChildAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newParent: IDesignItem, newIndex: number);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newParent: IDesignItem;
+    newIndex: number;
+    oldParent: IDesignItem;
+    oldIndex: number;
+    newItem: IDesignItem;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/InsertChildAction copy.js

@@ -0,0 +1,37 @@
+export class InsertChildAction {
+    constructor(designItem, newParent, newIndex) {
+        this.title = "Move or Insert Item";
+        this.designItem = designItem;
+        this.newParent = newParent;
+        this.newIndex = newIndex;
+    }
+    title;
+    get affectedItems() {
+        if (this.oldParent)
+            return [this.designItem, this.newParent, this.oldParent];
+        return [this.designItem, this.newParent];
+    }
+    undo() {
+        if (this.oldParent)
+            this.oldParent._insertChildInternal(this.designItem, this.oldIndex);
+        else
+            this.designItem.parent._removeChildInternal(this.designItem);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    do() {
+        this.oldParent = this.designItem.parent;
+        if (this.oldParent)
+            this.oldIndex = this.designItem.parent.indexOf(this.designItem);
+        this.newParent._insertChildInternal(this.designItem, this.newIndex);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    designItem;
+    newParent;
+    newIndex;
+    oldParent;
+    oldIndex;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/services/undoService/transactionItems/SetDesignItemsAction.d.ts

@@ -0,0 +1,12 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare class SetDesignItemsAction implements ITransactionItem {
+    constructor(newDesignItems: IDesignItem[], oldDesignItems: IDesignItem[]);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    newDesignItems: IDesignItem[];
+    oldDesignItems: IDesignItem[];
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/SetDesignItemsAction.js

@@ -0,0 +1,22 @@
+export class SetDesignItemsAction {
+    constructor(newDesignItems, oldDesignItems) {
+        this.title = "Set all DesignItems";
+        this.newDesignItems = newDesignItems;
+        this.oldDesignItems = oldDesignItems;
+    }
+    title;
+    get affectedItems() {
+        return this.newDesignItems;
+    }
+    undo() {
+        this.newDesignItems[0].instanceServiceContainer.designerCanvas._internalSetDesignItems(this.oldDesignItems);
+    }
+    do() {
+        this.newDesignItems[0].instanceServiceContainer.designerCanvas._internalSetDesignItems(this.newDesignItems);
+    }
+    newDesignItems;
+    oldDesignItems;
+    mergeWith(other) {
+        return false;
+    }
+}

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

@@ -49,6 +49,8 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     elementFromPoint(x: number, y: number): Element;
     elementsFromPoint(x: number, y: number): Element[];
     showHoverExtension(element: Element, event: Event): any;
+    setDesignItems(designItems: IDesignItem[]): any;
+    _internalSetDesignItems(designItems: IDesignItem[]): any;
     zoomTowardsPoint(point: IPoint, scalechange: number): void;
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;

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

@@ -83,6 +83,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _resizeBackgroundGrid;
     private _updateTransform;
     setDesignItems(designItems: IDesignItem[]): void;
+    _internalSetDesignItems(designItems: IDesignItem[]): void;
     addDesignItems(designItems: IDesignItem[]): void;
     _dragOverExtensionItem: IDesignItem;
     private _onDragEnter;

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

@@ -19,6 +19,7 @@ import { OverlayLayerView } from './overlayLayerView.js';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 import { NodeType } from '../../item/NodeType.js';
 import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js';
+import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -523,8 +524,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.snapLines.clearSnaplines();
     }
     setDesignItems(designItems) {
+        const setItemsAction = new SetDesignItemsAction(designItems, [...this.rootDesignItem.children()]);
+        this.instanceServiceContainer.undoService.execute(setItemsAction);
+    }
+    _internalSetDesignItems(designItems) {
         this._fillCalculationrects();
-        this.instanceServiceContainer.undoService.clear();
+        //this.instanceServiceContainer.undoService.clear();
         this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);
         for (let i of [...this.rootDesignItem.children()])

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

@@ -80,10 +80,11 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
         }
     }
     _convertCssUnits(pixelSizes, targetUnits, target, percentTarget) {
+        let cp = getComputedStyle(target);
         let bounding = target.getBoundingClientRect();
         let containerSize = bounding[percentTarget];
         let amountGaps = percentTarget == "height" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
-        let gapSize = convertCssUnitToPixel(percentTarget == "width" ? target.style.columnGap : target.style.rowGap, target, percentTarget) ?? 0;
+        let gapSize = convertCssUnitToPixel(percentTarget == "width" ? cp.columnGap : cp.rowGap, target, percentTarget) ?? 0;
         let containerSizeWithoutGaps = containerSize - gapSize * amountGaps;
         let sizeForFrs = containerSizeWithoutGaps;
         for (let i = 0; i < pixelSizes.length; i++) {
@@ -96,7 +97,7 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
                 result.push(convertCssUnit(pixelSizes[i], target, percentTarget, targetUnits[i]));
             }
             else {
-                result.push((pixelSizes[i] / sizeForFrs).toFixed(2) + 'fr');
+                result.push(((pixelSizes[i] / sizeForFrs) * 10).toFixed(2) + 'fr');
             }
         }
         return result;

package/dist/index.d.ts

@@ -118,6 +118,7 @@ export * from "./elements/services/undoService/transactionItems/InsertAction.js"
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/StylesheetChangedAction.js";
 export * from "./elements/services/undoService/transactionItems/StylesheetStyleChangeAction.js";
+export * from "./elements/services/undoService/transactionItems/SetDesignItemsAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export type { IService } from "./elements/services/IService.js";

package/dist/index.js

@@ -82,6 +82,7 @@ export * from "./elements/services/undoService/transactionItems/InsertAction.js"
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/StylesheetChangedAction.js";
 export * from "./elements/services/undoService/transactionItems/StylesheetStyleChangeAction.js";
+export * from "./elements/services/undoService/transactionItems/SetDesignItemsAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export * from "./elements/services/ServiceContainer.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.205",
+  "version": "0.0.207",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",