@node-projects/web-component-designer 0.0.237 → 0.0.238

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 (11) hide show
  1. package/README.md +8 -0
  2. package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.d.ts +2 -0
  3. package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.js +12 -3
  4. package/dist/elements/widgets/designerView/extensions/svg/PathExtension.d.ts +2 -0
  5. package/dist/elements/widgets/designerView/extensions/svg/PathExtension.js +13 -4
  6. package/dist/elements/widgets/designerView/extensions/svg/RectExtension.d.ts +3 -0
  7. package/dist/elements/widgets/designerView/extensions/svg/RectExtension.js +17 -5
  8. package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.js +2 -0
  9. package/dist/elements/widgets/designerView/tools/PointerTool.js +2 -1
  10. package/dist/elements/widgets/designerView/tools/RectangleSelectorTool.js +3 -1
  11. package/package.json +1 -1
package/README.md CHANGED
@@ -20,6 +20,14 @@ https://www.npmjs.com/package/@node-projects/web-component-designer
20
20
  - At the moment Chrome, and Firefox Nightly with Experimental Import Assertions enabled.
21
21
  But when import Assertions are landing in Safari and Firefox they will work again.
22
22
  And you could transpile them away in the meantime.
23
+
24
+ ## Projects using it
25
+
26
+ A ZPL Designer included in a comercial Application:
27
+ ![image](https://github.com/node-projects/web-component-designer/assets/364896/e1f1e3cc-29a3-4749-a676-389577fab69a)
28
+
29
+ A Materialflow Layout Editor in a comercial Application:
30
+ ![image](https://github.com/node-projects/web-component-designer/assets/364896/0062562a-4224-4b11-aaa4-03e31494fcfa)
23
31
 
24
32
  ## Demo
25
33
 
package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.d.ts CHANGED
@@ -20,6 +20,8 @@ export declare class EllipsisExtension extends AbstractExtension {
20
20
  private _circle2;
21
21
  private _circle3;
22
22
  private _circle4;
23
+ private _startScrollOffset;
24
+ private _deltaScrollOffset;
23
25
  private _parentCoordinates;
24
26
  private _offsetSvg;
25
27
  constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.js CHANGED
@@ -17,6 +17,8 @@ export class EllipsisExtension extends AbstractExtension {
17
17
  _circle2;
18
18
  _circle3;
19
19
  _circle4;
20
+ _startScrollOffset;
21
+ _deltaScrollOffset;
20
22
  _parentCoordinates;
21
23
  _offsetSvg = 10.0;
22
24
  constructor(extensionManager, designerView, extendedItem) {
@@ -25,6 +27,7 @@ export class EllipsisExtension extends AbstractExtension {
25
27
  extend() {
26
28
  this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
27
29
  this._ellipseElement = this.extendedItem.node;
30
+ this._startScrollOffset = this.designerCanvas.canvasOffset;
28
31
  this._cx = this._ellipseElement.cx.baseVal.value;
29
32
  this._cy = this._ellipseElement.cy.baseVal.value;
30
33
  this._rx = this._ellipseElement.rx.baseVal.value;
@@ -47,6 +50,10 @@ export class EllipsisExtension extends AbstractExtension {
47
50
  break;
48
51
  case EventNames.PointerMove:
49
52
  if (this._startPos && event.buttons > 0) {
53
+ this._deltaScrollOffset = {
54
+ x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
55
+ y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
56
+ };
50
57
  this._lastPos = { x: this._startPos.x, y: this._startPos.y };
51
58
  const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
52
59
  const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
@@ -88,8 +95,10 @@ export class EllipsisExtension extends AbstractExtension {
88
95
  this._startPos = null;
89
96
  this._circlePos = null;
90
97
  this._originalPoint = null;
91
- this.extendedItem.setAttribute("rx", this._newRx.toString());
92
- this.extendedItem.setAttribute("ry", this._newRy.toString());
98
+ if (this._newRx && this._newRy) {
99
+ this.extendedItem.setAttribute("rx", this._newRx.toString());
100
+ this.extendedItem.setAttribute("ry", this._newRy.toString());
101
+ }
93
102
  if (getComputedStyle(this._ellipseElement.parentElement).position == "absolute") {
94
103
  let group = this.extendedItem.openGroup('rearrangeSvg');
95
104
  let newEllipseCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._ellipseElement);
@@ -111,7 +120,7 @@ export class EllipsisExtension extends AbstractExtension {
111
120
  return circle;
112
121
  }
113
122
  _redrawPathCircle(x, y, oldCircle) {
114
- let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
123
+ let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x - this._deltaScrollOffset.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y - this._deltaScrollOffset.y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
115
124
  circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
116
125
  return circle;
117
126
  }
package/dist/elements/widgets/designerView/extensions/svg/PathExtension.d.ts CHANGED
@@ -16,6 +16,8 @@ export declare class PathExtension extends AbstractExtension {
16
16
  private _offsetSvg;
17
17
  private _pathElement;
18
18
  private _parentCoordinates;
19
+ private _startScrollOffset;
20
+ private _deltaScrollOffset;
19
21
  constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
20
22
  extend(): void;
21
23
  pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
package/dist/elements/widgets/designerView/extensions/svg/PathExtension.js CHANGED
@@ -13,6 +13,8 @@ export class PathExtension extends AbstractExtension {
13
13
  _offsetSvg = 10.0;
14
14
  _pathElement;
15
15
  _parentCoordinates;
16
+ _startScrollOffset;
17
+ _deltaScrollOffset;
16
18
  constructor(extensionManager, designerView, extendedItem) {
17
19
  super(extensionManager, designerView, extendedItem);
18
20
  }
@@ -21,6 +23,9 @@ export class PathExtension extends AbstractExtension {
21
23
  this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
22
24
  this._pathElement = this.extendedItem.node;
23
25
  this._lastPos = { x: 0, y: 0 };
26
+ this._startScrollOffset = this.designerCanvas.canvasOffset;
27
+ if (!this._deltaScrollOffset)
28
+ this._deltaScrollOffset = { x: 0, y: 0 };
24
29
  for (let p of this._pathdata) {
25
30
  switch (p.type) {
26
31
  case 'M':
@@ -119,6 +124,10 @@ export class PathExtension extends AbstractExtension {
119
124
  break;
120
125
  case EventNames.PointerMove:
121
126
  if (this._startPos && event.buttons > 0) {
127
+ this._deltaScrollOffset = {
128
+ x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
129
+ y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
130
+ };
122
131
  this._lastPos = { x: this._startPos.x, y: this._startPos.y };
123
132
  const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
124
133
  const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
@@ -293,8 +302,8 @@ export class PathExtension extends AbstractExtension {
293
302
  let newElementCoords = this.extendedItem.element.getBoundingClientRect();
294
303
  let parentLeft = (newElementCoords.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor - this._offsetSvg;
295
304
  let parentTop = (newElementCoords.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - this._offsetSvg;
296
- let heightSvgElement = newElementCoords.height + (2 * this._offsetSvg);
297
- let widthSvgElement = newElementCoords.width + (2 * this._offsetSvg);
305
+ let heightSvgElement = newElementCoords.height / this.designerCanvas.scaleFactor + (2 * this._offsetSvg);
306
+ let widthSvgElement = newElementCoords.width / this.designerCanvas.scaleFactor + (2 * this._offsetSvg);
298
307
  this.extendedItem.element.parentElement.style.setProperty("left", parentLeft.toString() + "px");
299
308
  this.extendedItem.element.parentElement.style.setProperty("top", parentTop.toString() + "px");
300
309
  this.extendedItem.element.parentElement.style.setProperty("height", heightSvgElement.toString() + "px");
@@ -302,8 +311,8 @@ export class PathExtension extends AbstractExtension {
302
311
  }
303
312
  _rearrangePointsFromElement(oldParentCoords, pathData) {
304
313
  let newParentCoords = this.extendedItem.element.parentElement.getBoundingClientRect();
305
- let diffX = oldParentCoords.x - newParentCoords.x;
306
- let diffY = oldParentCoords.y - newParentCoords.y;
314
+ let diffX = (oldParentCoords.x - newParentCoords.x) / this.designerCanvas.scaleFactor - this._deltaScrollOffset.x;
315
+ let diffY = (oldParentCoords.y - newParentCoords.y) / this.designerCanvas.scaleFactor - this._deltaScrollOffset.y;
307
316
  for (let i = 0; i < pathData.length; i++) {
308
317
  pathData[i].values[0] = pathData[i].values[0] + diffX;
309
318
  pathData[i].values[1] = pathData[i].values[1] + diffY;
package/dist/elements/widgets/designerView/extensions/svg/RectExtension.d.ts CHANGED
@@ -18,9 +18,12 @@ export declare class RectExtension extends AbstractExtension {
18
18
  private _circle2;
19
19
  private _circle3;
20
20
  private _circle4;
21
+ private _startScrollOffset;
22
+ private _deltaScrollOffset;
21
23
  private _rect;
22
24
  private _parentCoordinates;
23
25
  private _offsetSvg;
26
+ private _circleMoved;
24
27
  constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
25
28
  extend(): void;
26
29
  pointerEvent(event: PointerEvent, circle: SVGCircleElement, r: SVGRectElement, index: number): void;
package/dist/elements/widgets/designerView/extensions/svg/RectExtension.js CHANGED
@@ -15,15 +15,19 @@ export class RectExtension extends AbstractExtension {
15
15
  _circle2;
16
16
  _circle3;
17
17
  _circle4;
18
+ _startScrollOffset;
19
+ _deltaScrollOffset;
18
20
  _rect = { x: 0, y: 0, w: 0, h: 0 };
19
21
  _parentCoordinates;
20
22
  _offsetSvg = 10.0;
23
+ _circleMoved;
21
24
  constructor(extensionManager, designerView, extendedItem) {
22
25
  super(extensionManager, designerView, extendedItem);
23
26
  }
24
27
  extend() {
25
28
  this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
26
29
  this._rectElement = this.extendedItem.node;
30
+ this._startScrollOffset = this.designerCanvas.canvasOffset;
27
31
  this._x = this._rectElement.x.baseVal.value;
28
32
  this._y = this._rectElement.y.baseVal.value;
29
33
  this._w = this._rectElement.width.baseVal.value;
@@ -46,11 +50,17 @@ export class RectExtension extends AbstractExtension {
46
50
  break;
47
51
  case EventNames.PointerMove:
48
52
  if (this._startPos && event.buttons > 0) {
53
+ this._deltaScrollOffset = {
54
+ x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
55
+ y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
56
+ };
49
57
  this._lastPos = { x: this._startPos.x, y: this._startPos.y };
50
58
  const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
51
59
  const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
52
60
  let dx = cx - this._circlePos.x;
53
61
  let dy = cy - this._circlePos.y;
62
+ if (dx != 0 || dy != 0)
63
+ this._circleMoved = true;
54
64
  if (event.shiftKey) {
55
65
  if (Math.abs(dx) < Math.abs(dy)) {
56
66
  dx = 0;
@@ -91,10 +101,12 @@ export class RectExtension extends AbstractExtension {
91
101
  this._startPos = null;
92
102
  this._circlePos = null;
93
103
  this._originalPoint = null;
94
- this.extendedItem.setAttribute("x", this._rect.x.toString());
95
- this.extendedItem.setAttribute("y", this._rect.y.toString());
96
- this.extendedItem.setAttribute("width", this._rect.w.toString());
97
- this.extendedItem.setAttribute("height", this._rect.h.toString());
104
+ if (this._circleMoved) {
105
+ this.extendedItem.setAttribute("x", this._rect.x.toString());
106
+ this.extendedItem.setAttribute("y", this._rect.y.toString());
107
+ this.extendedItem.setAttribute("width", this._rect.w.toString());
108
+ this.extendedItem.setAttribute("height", this._rect.h.toString());
109
+ }
98
110
  if (getComputedStyle(this._rectElement.parentElement).position == "absolute") {
99
111
  let group = this.extendedItem.openGroup('rearrangeSvg');
100
112
  let newRectCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement);
@@ -116,7 +128,7 @@ export class RectExtension extends AbstractExtension {
116
128
  return circle;
117
129
  }
118
130
  _redrawPathCircle(x, y, oldCircle) {
119
- let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
131
+ let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x - this._deltaScrollOffset.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y - this._deltaScrollOffset.y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
120
132
  circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
121
133
  return circle;
122
134
  }
package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.js CHANGED
@@ -47,6 +47,8 @@ export class MagicWandSelectorTool {
47
47
  const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
48
48
  if (p1 && p2 && p3 && p4) {
49
49
  const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
50
+ if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
51
+ inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
50
52
  inSelectionElements.push(desItem);
51
53
  }
52
54
  }
package/dist/elements/widgets/designerView/tools/PointerTool.js CHANGED
@@ -110,7 +110,8 @@ export class PointerTool {
110
110
  this._actionType = PointerActionType.Drag;
111
111
  }
112
112
  else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) {
113
- designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
113
+ if (!event.shiftKey)
114
+ designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
114
115
  this._actionType = PointerActionType.DrawSelection;
115
116
  }
116
117
  else {
package/dist/elements/widgets/designerView/tools/RectangleSelectorTool.js CHANGED
@@ -51,7 +51,7 @@ export class RectangleSelectorTool {
51
51
  event.target.releasePointerCapture(event.pointerId);
52
52
  designerCanvas.releaseActiveTool();
53
53
  const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
54
- const inSelectionElements = [];
54
+ let inSelectionElements = [];
55
55
  let point = designerCanvas.overlayLayer.createPoint();
56
56
  for (let e of elements) {
57
57
  let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
@@ -69,6 +69,8 @@ export class RectangleSelectorTool {
69
69
  const p4 = p3 && this._rect.isPointInFill(point);
70
70
  if (p4) {
71
71
  const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
72
+ if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
73
+ inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
72
74
  inSelectionElements.push(desItem);
73
75
  }
74
76
  }
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.0.237",
4
+ "version": "0.0.238",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "author": "",