@node-projects/web-component-designer 0.1.44 → 0.1.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,6 +9,8 @@ export declare class TransformToolPopup extends BaseCustomWebComponentConstructo
|
|
|
9
9
|
private _inputX;
|
|
10
10
|
private _inputY;
|
|
11
11
|
private _inputR;
|
|
12
|
+
private _inputSpacingX;
|
|
13
|
+
private _inputSpacingY;
|
|
12
14
|
private _originTopLeft;
|
|
13
15
|
private _originTopMid;
|
|
14
16
|
private _originTopRight;
|
|
@@ -28,4 +30,5 @@ export declare class TransformToolPopup extends BaseCustomWebComponentConstructo
|
|
|
28
30
|
private _calculateTransformOriginPosition;
|
|
29
31
|
private _checkOrigin;
|
|
30
32
|
private _calculateTransform;
|
|
33
|
+
private _applySpacing;
|
|
31
34
|
}
|
|
@@ -11,6 +11,8 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
|
|
|
11
11
|
_inputX;
|
|
12
12
|
_inputY;
|
|
13
13
|
_inputR;
|
|
14
|
+
_inputSpacingX;
|
|
15
|
+
_inputSpacingY;
|
|
14
16
|
_originTopLeft;
|
|
15
17
|
_originTopMid;
|
|
16
18
|
_originTopRight;
|
|
@@ -96,6 +98,15 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
|
|
|
96
98
|
margin-top: 20px;
|
|
97
99
|
margin-left: 20px;
|
|
98
100
|
}
|
|
101
|
+
#spacing-div{
|
|
102
|
+
display: inline-grid;
|
|
103
|
+
grid-template-rows: 20px 20px;
|
|
104
|
+
grid-template-columns: 95px 95px;
|
|
105
|
+
gap: 5px;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
align-items: center;
|
|
108
|
+
width: 100%;
|
|
109
|
+
}
|
|
99
110
|
`;
|
|
100
111
|
static template = html `
|
|
101
112
|
<div class="container">
|
|
@@ -116,6 +127,13 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
|
|
|
116
127
|
<button id="transform-button-relative">relative</button>
|
|
117
128
|
</div>
|
|
118
129
|
|
|
130
|
+
<div id="spacing-div">
|
|
131
|
+
<span>X spacing</span>
|
|
132
|
+
<span>Y spacing</span>
|
|
133
|
+
<input type="number" id="spacing-input-x">
|
|
134
|
+
<input type="number" id="spacing-input-y">
|
|
135
|
+
</div>
|
|
136
|
+
|
|
119
137
|
<div style="justify-content: center; display: grid; height: 100px">
|
|
120
138
|
<div id="cube-background"></div>
|
|
121
139
|
<div id="cube">
|
|
@@ -144,6 +162,8 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
|
|
|
144
162
|
this._inputX = this._getDomElement("transform-input-x");
|
|
145
163
|
this._inputY = this._getDomElement("transform-input-y");
|
|
146
164
|
this._inputR = this._getDomElement("transform-input-r");
|
|
165
|
+
this._inputSpacingX = this._getDomElement("spacing-input-x");
|
|
166
|
+
this._inputSpacingY = this._getDomElement("spacing-input-y");
|
|
147
167
|
this._originTopLeft = this._getDomElement("origin-top-left");
|
|
148
168
|
this._originTopMid = this._getDomElement("origin-top-mid");
|
|
149
169
|
this._originTopRight = this._getDomElement("origin-top-right");
|
|
@@ -220,6 +240,7 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
|
|
|
220
240
|
else
|
|
221
241
|
item.removeStyle("transform");
|
|
222
242
|
}
|
|
243
|
+
this._applySpacing(selection);
|
|
223
244
|
grp.commit();
|
|
224
245
|
}
|
|
225
246
|
}
|
|
@@ -289,5 +310,27 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
|
|
|
289
310
|
};
|
|
290
311
|
return newPoint;
|
|
291
312
|
}
|
|
313
|
+
_applySpacing(selection) {
|
|
314
|
+
let xSpacing = this._inputSpacingX.valueAsNumber;
|
|
315
|
+
let ySpacing = this._inputSpacingY.valueAsNumber;
|
|
316
|
+
if (!isNaN(xSpacing)) {
|
|
317
|
+
let sortedSelectionX = selection.sort((a, b) => {
|
|
318
|
+
return parseFloat(a.getStyle("left")) - parseFloat(b.getStyle("left"));
|
|
319
|
+
});
|
|
320
|
+
let xStartPos = parseFloat(sortedSelectionX[0].getStyle("left"));
|
|
321
|
+
for (let i = 0; i < sortedSelectionX.length; i++) {
|
|
322
|
+
sortedSelectionX[i].setStyle("left", (i * xSpacing + xStartPos) + "px");
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
if (!isNaN(ySpacing)) {
|
|
326
|
+
let sortedSelectionY = selection.sort((a, b) => {
|
|
327
|
+
return parseFloat(a.getStyle("top")) - parseFloat(b.getStyle("top"));
|
|
328
|
+
});
|
|
329
|
+
let yStartPos = parseFloat(sortedSelectionY[0].getStyle("top"));
|
|
330
|
+
for (let i = 0; i < sortedSelectionY.length; i++) {
|
|
331
|
+
sortedSelectionY[i].setStyle("top", (i * ySpacing + yStartPos) + "px");
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
292
335
|
}
|
|
293
336
|
customElements.define('node-projects-designer-transformtool-popup', TransformToolPopup);
|