@node-projects/web-component-designer 0.1.44 → 0.1.46

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/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -164,6 +164,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                 rect.style.width = '7px';
                 rect.style.height = '7px';
                 rect.style.border = '1px white solid';
+                rect.style.cursor = 'pointer';
                 if (p.propertyType != PropertyType.complex)
                     rectContainer.appendChild(rect);
                 this._div.appendChild(rectContainer);
@@ -171,6 +172,10 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                     event.preventDefault();
                     this.openContextMenu(event, p);
                 };
+                rect.onclick = (event) => {
+                    event.preventDefault();
+                    this.openContextMenu(event, p);
+                };
                 if (p.type == 'addNew') {
                     let input = editor.element;
                     input.disabled = true;

package/package.json

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