@node-projects/web-component-designer 0.1.88 → 0.1.89

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.
Files changed (3) hide show
  1. package/dist/elements/widgets/designerView/extensions/ResizeExtension.d.ts +1 -0
  2. package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +86 -72
  3. package/package.json +1 -1
package/dist/elements/widgets/designerView/extensions/ResizeExtension.d.ts CHANGED
@@ -23,5 +23,6 @@ export declare class ResizeExtension extends AbstractExtension {
23
23
  refresh(cache: Record<string | symbol, any>, event?: Event): void;
24
24
  _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
25
25
  _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string): void;
26
+ private prepareResize;
26
27
  dispose(): void;
27
28
  }
package/dist/elements/widgets/designerView/extensions/ResizeExtension.js CHANGED
@@ -2,6 +2,8 @@ import { EventNames } from '../../../../enums/EventNames.js';
2
2
  import { getContentBoxContentOffsets } from '../../../helper/ElementHelper.js';
3
3
  import { transformPointByInverseMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition, getElementCombinedTransform } from "../../../helper/TransformHelper.js";
4
4
  import { AbstractExtension } from './AbstractExtension.js';
5
+ //TODO: use PlacementService, size is not always width/height could also be margin etc...
6
+ // also when elment aligned to bottom, will it later also be?
5
7
  export class ResizeExtension extends AbstractExtension {
6
8
  resizeAllSelected;
7
9
  _initialSizes;
@@ -92,72 +94,13 @@ export class ResizeExtension extends AbstractExtension {
92
94
  }
93
95
  if (this.designerCanvas.alignOnSnap)
94
96
  this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
95
- let i = 0;
96
- let top = null;
97
- let bottom = null;
98
- let left = null;
99
- let right = null;
100
- switch (this._actionModeStarted) {
101
- case 'e-resize':
102
- left = getComputedStyle(this.extendedItem.element).left;
103
- this.extendedItem.element.style.removeProperty('right');
104
- this.extendedItem.element.style.left = left;
105
- this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
106
- break;
107
- case 'se-resize':
108
- top = getComputedStyle(this.extendedItem.element).top;
109
- this.extendedItem.element.style.removeProperty('bottom');
110
- this.extendedItem.element.style.top = top;
111
- left = getComputedStyle(this.extendedItem.element).left;
112
- this.extendedItem.element.style.removeProperty('right');
113
- this.extendedItem.element.style.left = left;
114
- this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
115
- break;
116
- case 's-resize':
117
- top = getComputedStyle(this.extendedItem.element).top;
118
- this.extendedItem.element.style.removeProperty('bottom');
119
- this.extendedItem.element.style.top = top;
120
- this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
121
- break;
122
- case 'sw-resize':
123
- top = getComputedStyle(this.extendedItem.element).top;
124
- this.extendedItem.element.style.removeProperty('bottom');
125
- this.extendedItem.element.style.top = top;
126
- right = getComputedStyle(this.extendedItem.element).right;
127
- this.extendedItem.element.style.removeProperty('left');
128
- this.extendedItem.element.style.right = right;
129
- this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
130
- break;
131
- case 'w-resize':
132
- right = getComputedStyle(this.extendedItem.element).right;
133
- this.extendedItem.element.style.removeProperty('left');
134
- this.extendedItem.element.style.right = right;
135
- this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
136
- break;
137
- case 'nw-resize':
138
- bottom = getComputedStyle(this.extendedItem.element).bottom;
139
- this.extendedItem.element.style.removeProperty('top');
140
- this.extendedItem.element.style.bottom = bottom;
141
- right = getComputedStyle(this.extendedItem.element).right;
142
- this.extendedItem.element.style.removeProperty('left');
143
- this.extendedItem.element.style.right = right;
144
- this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
145
- break;
146
- case 'n-resize':
147
- bottom = getComputedStyle(this.extendedItem.element).bottom;
148
- this.extendedItem.element.style.removeProperty('top');
149
- this.extendedItem.element.style.bottom = bottom;
150
- this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
151
- break;
152
- case 'ne-resize':
153
- bottom = getComputedStyle(this.extendedItem.element).bottom;
154
- this.extendedItem.element.style.removeProperty('top');
155
- this.extendedItem.element.style.bottom = bottom;
156
- left = getComputedStyle(this.extendedItem.element).left;
157
- this.extendedItem.element.style.removeProperty('right');
158
- this.extendedItem.element.style.left = left;
159
- this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
160
- break;
97
+ this.prepareResize(this.extendedItem, this._actionModeStarted);
98
+ if (this.resizeAllSelected) {
99
+ for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
100
+ if (designItem !== this.extendedItem) {
101
+ this.prepareResize(designItem, this._actionModeStarted);
102
+ }
103
+ }
161
104
  }
162
105
  break;
163
106
  case EventNames.PointerMove:
@@ -227,7 +170,7 @@ export class ResizeExtension extends AbstractExtension {
227
170
  i++;
228
171
  for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
229
172
  if (designItem !== this.extendedItem) {
230
- designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
173
+ designItem.element.style.width = this._initialSizes[i].width - deltaX + 'px';
231
174
  designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
232
175
  }
233
176
  }
@@ -240,7 +183,7 @@ export class ResizeExtension extends AbstractExtension {
240
183
  i++;
241
184
  for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
242
185
  if (designItem !== this.extendedItem) {
243
- designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
186
+ designItem.element.style.width = this._initialSizes[i].width - deltaX + 'px';
244
187
  }
245
188
  }
246
189
  }
@@ -254,8 +197,8 @@ export class ResizeExtension extends AbstractExtension {
254
197
  i++;
255
198
  for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
256
199
  if (designItem !== this.extendedItem) {
257
- designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
258
- designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
200
+ designItem.element.style.width = this._initialSizes[i].width - deltaX + 'px';
201
+ designItem.element.style.height = this._initialSizes[i].height - deltaY + 'px';
259
202
  }
260
203
  }
261
204
  }
@@ -267,7 +210,7 @@ export class ResizeExtension extends AbstractExtension {
267
210
  i++;
268
211
  for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
269
212
  if (designItem !== this.extendedItem) {
270
- designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
213
+ designItem.element.style.height = this._initialSizes[i].height - deltaY + 'px';
271
214
  }
272
215
  }
273
216
  }
@@ -282,7 +225,7 @@ export class ResizeExtension extends AbstractExtension {
282
225
  for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
283
226
  if (designItem !== this.extendedItem) {
284
227
  designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
285
- designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
228
+ designItem.element.style.height = this._initialSizes[i].height - deltaY + 'px';
286
229
  }
287
230
  }
288
231
  }
@@ -325,6 +268,8 @@ export class ResizeExtension extends AbstractExtension {
325
268
  if (designItem !== this.extendedItem) {
326
269
  designItem.setStyle('width', designItem.element.style.width);
327
270
  designItem.setStyle('height', designItem.element.style.height);
271
+ designItem.setStyle('left', normalizeToAbsolutePosition(designItem.element, 'left'));
272
+ designItem.setStyle('top', normalizeToAbsolutePosition(designItem.element, 'top'));
328
273
  }
329
274
  }
330
275
  }
@@ -334,6 +279,75 @@ export class ResizeExtension extends AbstractExtension {
334
279
  break;
335
280
  }
336
281
  }
282
+ prepareResize(designItem, mode) {
283
+ let i = 0;
284
+ let top = null;
285
+ let bottom = null;
286
+ let left = null;
287
+ let right = null;
288
+ switch (this._actionModeStarted) {
289
+ case 'e-resize':
290
+ left = getComputedStyle(designItem.element).left;
291
+ designItem.element.style.removeProperty('right');
292
+ designItem.element.style.left = left;
293
+ designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
294
+ break;
295
+ case 'se-resize':
296
+ top = getComputedStyle(designItem.element).top;
297
+ designItem.element.style.removeProperty('bottom');
298
+ designItem.element.style.top = top;
299
+ left = getComputedStyle(designItem.element).left;
300
+ designItem.element.style.removeProperty('right');
301
+ designItem.element.style.left = left;
302
+ designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
303
+ break;
304
+ case 's-resize':
305
+ top = getComputedStyle(designItem.element).top;
306
+ designItem.element.style.removeProperty('bottom');
307
+ designItem.element.style.top = top;
308
+ designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
309
+ break;
310
+ case 'sw-resize':
311
+ top = getComputedStyle(designItem.element).top;
312
+ designItem.element.style.removeProperty('bottom');
313
+ designItem.element.style.top = top;
314
+ right = getComputedStyle(designItem.element).right;
315
+ designItem.element.style.removeProperty('left');
316
+ designItem.element.style.right = right;
317
+ designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
318
+ break;
319
+ case 'w-resize':
320
+ right = getComputedStyle(designItem.element).right;
321
+ designItem.element.style.removeProperty('left');
322
+ designItem.element.style.right = right;
323
+ designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
324
+ break;
325
+ case 'nw-resize':
326
+ bottom = getComputedStyle(designItem.element).bottom;
327
+ designItem.element.style.removeProperty('top');
328
+ designItem.element.style.bottom = bottom;
329
+ right = getComputedStyle(designItem.element).right;
330
+ designItem.element.style.removeProperty('left');
331
+ designItem.element.style.right = right;
332
+ designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
333
+ break;
334
+ case 'n-resize':
335
+ bottom = getComputedStyle(designItem.element).bottom;
336
+ designItem.element.style.removeProperty('top');
337
+ designItem.element.style.bottom = bottom;
338
+ designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
339
+ break;
340
+ case 'ne-resize':
341
+ bottom = getComputedStyle(designItem.element).bottom;
342
+ designItem.element.style.removeProperty('top');
343
+ designItem.element.style.bottom = bottom;
344
+ left = getComputedStyle(designItem.element).left;
345
+ designItem.element.style.removeProperty('right');
346
+ designItem.element.style.left = left;
347
+ designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
348
+ break;
349
+ }
350
+ }
337
351
  dispose() {
338
352
  this._removeAllOverlays();
339
353
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "description": "A UI designer for Polymer apps",
3
3
  "name": "@node-projects/web-component-designer",
4
- "version": "0.1.88",
4
+ "version": "0.1.89",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "author": "jochen.kuehner@gmx.de",