@node-projects/web-component-designer 0.1.43 → 0.1.45

package/dist/elements/services/propertiesService/services/CssCustomPropertiesService.d.ts

@@ -6,8 +6,9 @@ import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { ValueType } from '../ValueType.js';
 import { BindingTarget } from '../../../item/BindingTarget.js';
 export declare class CssCustomPropertiesService extends CommonPropertiesService {
+    removeInheritedCustomProperties: boolean;
+    constructor(removeInheritedCustomProperties?: boolean);
     getRefreshMode(designItem: IDesignItem): RefreshMode;
-    constructor();
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];

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

@@ -4,12 +4,14 @@ import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { ValueType } from '../ValueType.js';
 import { BindingTarget } from '../../../item/BindingTarget.js';
 export class CssCustomPropertiesService extends CommonPropertiesService {
-    getRefreshMode(designItem) {
-        return RefreshMode.fullOnValueChange;
-    }
-    constructor() {
+    removeInheritedCustomProperties;
+    constructor(removeInheritedCustomProperties = true) {
         super();
         this.name = 'customProperties';
+        this.removeInheritedCustomProperties = removeInheritedCustomProperties;
+    }
+    getRefreshMode(designItem) {
+        return RefreshMode.fullOnValueChange;
     }
     isHandledElement(designItem) {
         return true;
@@ -22,7 +24,9 @@ export class CssCustomPropertiesService extends CommonPropertiesService {
             return null;
         let rootMap = Array.from(designItem.instanceServiceContainer.designerCanvas.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--"));
         let props = Array.from(designItem.element.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--"));
-        let arr = props.filter(x => !rootMap.includes(x)).map(x => ({
+        if (this.removeInheritedCustomProperties)
+            props = props.filter(x => !rootMap.includes(x));
+        let arr = props.map(x => ({
             name: x,
             service: this,
             propertyType: PropertyType.cssValue

package/dist/elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.d.ts

@@ -9,6 +9,8 @@ export declare class TransformToolPopup extends BaseCustomWebComponentConstructo
     private _inputX;
     private _inputY;
     private _inputR;
+    private _inputSpacingX;
+    private _inputSpacingY;
     private _originTopLeft;
     private _originTopMid;
     private _originTopRight;
@@ -28,4 +30,5 @@ export declare class TransformToolPopup extends BaseCustomWebComponentConstructo
     private _calculateTransformOriginPosition;
     private _checkOrigin;
     private _calculateTransform;
+    private _applySpacing;
 }

package/dist/elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.js

@@ -11,6 +11,8 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
     _inputX;
     _inputY;
     _inputR;
+    _inputSpacingX;
+    _inputSpacingY;
     _originTopLeft;
     _originTopMid;
     _originTopRight;
@@ -96,6 +98,15 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
         margin-top: 20px;
         margin-left: 20px;
       }
+      #spacing-div{
+        display: inline-grid;
+        grid-template-rows: 20px 20px;
+        grid-template-columns: 95px 95px;
+        gap: 5px;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+      }
       `;
     static template = html `
         <div class="container">
@@ -116,6 +127,13 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
               <button id="transform-button-relative">relative</button>
             </div>
 
+            <div id="spacing-div">
+                <span>X spacing</span>
+                <span>Y spacing</span>
+                <input type="number" id="spacing-input-x">
+                <input type="number" id="spacing-input-y">
+            </div>
+
             <div style="justify-content: center; display: grid; height: 100px">
               <div id="cube-background"></div>
                 <div id="cube">
@@ -144,6 +162,8 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
         this._inputX = this._getDomElement("transform-input-x");
         this._inputY = this._getDomElement("transform-input-y");
         this._inputR = this._getDomElement("transform-input-r");
+        this._inputSpacingX = this._getDomElement("spacing-input-x");
+        this._inputSpacingY = this._getDomElement("spacing-input-y");
         this._originTopLeft = this._getDomElement("origin-top-left");
         this._originTopMid = this._getDomElement("origin-top-mid");
         this._originTopRight = this._getDomElement("origin-top-right");
@@ -220,6 +240,7 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
                 else
                     item.removeStyle("transform");
             }
+            this._applySpacing(selection);
             grp.commit();
         }
     }
@@ -289,5 +310,27 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
         };
         return newPoint;
     }
+    _applySpacing(selection) {
+        let xSpacing = this._inputSpacingX.valueAsNumber;
+        let ySpacing = this._inputSpacingY.valueAsNumber;
+        if (!isNaN(xSpacing)) {
+            let sortedSelectionX = selection.sort((a, b) => {
+                return parseFloat(a.getStyle("left")) - parseFloat(b.getStyle("left"));
+            });
+            let xStartPos = parseFloat(sortedSelectionX[0].getStyle("left"));
+            for (let i = 0; i < sortedSelectionX.length; i++) {
+                sortedSelectionX[i].setStyle("left", (i * xSpacing + xStartPos) + "px");
+            }
+        }
+        if (!isNaN(ySpacing)) {
+            let sortedSelectionY = selection.sort((a, b) => {
+                return parseFloat(a.getStyle("top")) - parseFloat(b.getStyle("top"));
+            });
+            let yStartPos = parseFloat(sortedSelectionY[0].getStyle("top"));
+            for (let i = 0; i < sortedSelectionY.length; i++) {
+                sortedSelectionY[i].setStyle("top", (i * ySpacing + yStartPos) + "px");
+            }
+        }
+    }
 }
 customElements.define('node-projects-designer-transformtool-popup', TransformToolPopup);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",