@node-projects/web-component-designer 0.0.68 → 0.0.69

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/dist/elements/helper/PathDataPolyfill.d.ts +1 -1
  2. package/dist/elements/item/IBinding.d.ts +1 -1
  3. package/dist/elements/widgets/designerView/designerCanvas.js +1 -1
  4. package/dist/elements/widgets/designerView/extensions/PathExtension.d.ts +8 -1
  5. package/dist/elements/widgets/designerView/extensions/PathExtension.js +63 -19
  6. package/dist/elements/widgets/designerView/tools/DrawPathTool.d.ts +1 -0
  7. package/dist/elements/widgets/designerView/tools/DrawPathTool.js +3 -1
  8. package/dist/elements/widgets/designerView/tools/TextTool.d.ts +1 -0
  9. package/dist/elements/widgets/designerView/tools/TextTool.js +22 -0
  10. package/dist/polyfill/mobileDragDrop.js +1 -1
  11. package/package.json +41 -39
package/dist/elements/helper/PathDataPolyfill.d.ts CHANGED
@@ -40,7 +40,7 @@ declare type PathDataA = {
40
40
  type: 'A' | 'a';
41
41
  values: [rx: number, ry: number, ang: number, flag1: 0 | 1, flag2: 0 | 1, x: number, y: number];
42
42
  };
43
- declare type PathData = {
43
+ export declare type PathData = {
44
44
  type: string;
45
45
  } & (PathDataM | PathDataL | PathDataH | PathDataV | PathDataZ | PathDataC | PathDataS | PathDataQ | PathDataT | PathDataA)[];
46
46
  export declare function straightenLine(p1: IPoint, p2: IPoint): IPoint;
package/dist/elements/item/IBinding.d.ts CHANGED
@@ -10,6 +10,6 @@ export interface IBinding {
10
10
  bindableObjectNames?: string[];
11
11
  mode?: BindingMode;
12
12
  invert?: boolean;
13
- changedEvent?: string;
13
+ changedEvents?: string[];
14
14
  nullSafe?: boolean;
15
15
  }
package/dist/elements/widgets/designerView/designerCanvas.js CHANGED
@@ -432,7 +432,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
432
432
  event.preventDefault();
433
433
  this._canvas.classList.remove('dragFileActive');
434
434
  this._fillCalculationrects();
435
- if (event.dataTransfer.files.length > 0) {
435
+ if (event.dataTransfer.files?.length > 0) {
436
436
  const ddService = this.serviceContainer.dragDropService;
437
437
  if (ddService) {
438
438
  ddService.drop(this, event);
package/dist/elements/widgets/designerView/extensions/PathExtension.d.ts CHANGED
@@ -3,12 +3,19 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
3
3
  import { AbstractExtension } from "./AbstractExtension";
4
4
  import "../../../helper/PathDataPolyfill";
5
5
  import { IExtensionManager } from "./IExtensionManger";
6
+ import { PathData } from "../../../helper/PathDataPolyfill";
6
7
  export declare class PathExtension extends AbstractExtension {
7
8
  private _lastPos;
8
9
  private _parentRect;
10
+ private _startPos;
11
+ private _circlePos;
12
+ private _originalPathPoint;
13
+ private _pathdata;
9
14
  constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
10
15
  extend(): void;
11
- _drawPathCircle(x: number, y: number): void;
16
+ pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
17
+ _drawPath(path: PathData[], index: number): void;
18
+ _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
12
19
  _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
13
20
  refresh(): void;
14
21
  dispose(): void;
package/dist/elements/widgets/designerView/extensions/PathExtension.js CHANGED
@@ -1,10 +1,15 @@
1
1
  import { AbstractExtension } from "./AbstractExtension";
2
2
  import "../../../helper/PathDataPolyfill";
3
+ import { EventNames } from "../../../../enums/EventNames";
3
4
  export class PathExtension extends AbstractExtension {
4
5
  //private _itemRect: DOMRect;
5
6
  //private _svgRect: DOMRect;
6
7
  _lastPos;
7
8
  _parentRect;
9
+ _startPos;
10
+ _circlePos;
11
+ _originalPathPoint;
12
+ _pathdata;
8
13
  constructor(extensionManager, designerView, extendedItem) {
9
14
  super(extensionManager, designerView, extendedItem);
10
15
  }
@@ -12,15 +17,15 @@ export class PathExtension extends AbstractExtension {
12
17
  //this._itemRect = this.extendedItem.element.getBoundingClientRect();
13
18
  //this._svgRect = (<SVGGeometryElement>this.extendedItem.element).ownerSVGElement.getBoundingClientRect();
14
19
  this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
15
- const pathdata = this.extendedItem.node.getPathData({ normalize: true });
16
- for (let p of pathdata) {
20
+ this._pathdata = this.extendedItem.node.getPathData({ normalize: true });
21
+ for (let p of this._pathdata) {
17
22
  switch (p.type) {
18
23
  case 'M':
19
- this._drawPathCircle(p.values[0], p.values[1]);
24
+ this._drawPathCircle(p.values[0], p.values[1], p, 0);
20
25
  this._lastPos = { x: p.values[0], y: p.values[1] };
21
26
  break;
22
27
  case 'L':
23
- this._drawPathCircle(p.values[0], p.values[1]);
28
+ this._drawPathCircle(p.values[0], p.values[1], p, 0);
24
29
  break;
25
30
  case 'H':
26
31
  break;
@@ -31,39 +36,78 @@ export class PathExtension extends AbstractExtension {
31
36
  case 'C':
32
37
  this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
33
38
  this._drawPathLine(p.values[4], p.values[5], p.values[2], p.values[3]);
34
- this._drawPathCircle(p.values[0], p.values[1]);
35
- this._drawPathCircle(p.values[2], p.values[3]);
36
- this._drawPathCircle(p.values[4], p.values[5]);
39
+ this._drawPathCircle(p.values[0], p.values[1], p, 0);
40
+ this._drawPathCircle(p.values[2], p.values[3], p, 2);
41
+ this._drawPathCircle(p.values[4], p.values[5], p, 4);
37
42
  this._lastPos = { x: p.values[4], y: p.values[5] };
38
43
  break;
39
44
  case 'c':
40
45
  this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
41
46
  this._drawPathLine(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p.values[2], p.values[3]);
42
- this._drawPathCircle(p.values[0], p.values[1]);
43
- this._drawPathCircle(p.values[2], p.values[3]);
44
- this._drawPathCircle(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5]);
47
+ this._drawPathCircle(p.values[0], p.values[1], p, 0);
48
+ this._drawPathCircle(p.values[2], p.values[3], p, 2);
49
+ this._drawPathCircle(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p, 4);
45
50
  this._lastPos = { x: p.values[4], y: p.values[5] };
46
51
  break;
47
52
  case 'S':
48
- this._drawPathCircle(p.values[0], p.values[1]);
49
- this._drawPathCircle(p.values[2], p.values[3]);
53
+ this._drawPathCircle(p.values[0], p.values[1], p, 0);
54
+ this._drawPathCircle(p.values[2], p.values[3], p, 2);
50
55
  break;
51
56
  case 'Q':
52
- this._drawPathCircle(p.values[0], p.values[1]);
53
- this._drawPathCircle(p.values[2], p.values[3]);
57
+ this._drawPathCircle(p.values[0], p.values[1], p, 0);
58
+ this._drawPathCircle(p.values[2], p.values[3], p, 2);
54
59
  break;
55
60
  case 'T':
56
- this._drawPathCircle(p.values[0], p.values[1]);
61
+ this._drawPathCircle(p.values[0], p.values[1], p, 0);
57
62
  break;
58
63
  case 'A':
59
- this._drawPathCircle(p.values[0], p.values[1]);
60
- this._drawPathCircle(p.values[5], p.values[6]);
64
+ this._drawPathCircle(p.values[0], p.values[1], p, 0);
65
+ this._drawPathCircle(p.values[5], p.values[6], p, 5);
61
66
  break;
62
67
  }
63
68
  }
64
69
  }
65
- _drawPathCircle(x, y) {
66
- this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 3, 'svg-path');
70
+ pointerEvent(event, circle, p, index) {
71
+ event.stopPropagation();
72
+ switch (event.type) {
73
+ case EventNames.PointerDown:
74
+ event.target.setPointerCapture(event.pointerId);
75
+ this._startPos = { x: event.x, y: event.y };
76
+ this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
77
+ this._originalPathPoint = { x: p.values[index], y: p.values[index + 1] };
78
+ break;
79
+ case EventNames.PointerMove:
80
+ if (this._startPos && event.buttons > 0) {
81
+ this._lastPos = { x: this._startPos.x, y: this._startPos.y };
82
+ const cx = event.x - this._lastPos.x + this._circlePos.x;
83
+ const cy = event.y - this._lastPos.y + this._circlePos.y;
84
+ const dx = cx - this._circlePos.x;
85
+ const dy = cy - this._circlePos.y;
86
+ p.values[index] = this._originalPathPoint.x + dx;
87
+ p.values[index + 1] = this._originalPathPoint.y + dy;
88
+ this._drawPath(this._pathdata, index);
89
+ }
90
+ break;
91
+ case EventNames.PointerUp:
92
+ event.target.releasePointerCapture(event.pointerId);
93
+ this._startPos = null;
94
+ this._circlePos = null;
95
+ this._lastPos = null;
96
+ break;
97
+ }
98
+ }
99
+ _drawPath(path, index) {
100
+ let pathD = "";
101
+ for (let p of path) {
102
+ pathD += p.type + p.values[index] + " " + p.values[index + 1];
103
+ }
104
+ this.extendedItem.setAttribute("d", pathD);
105
+ }
106
+ _drawPathCircle(x, y, p, index) {
107
+ let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 3, 'svg-path');
108
+ circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, p, index));
109
+ circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, p, index));
110
+ circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, p, index));
67
111
  }
68
112
  _drawPathLine(x1, y1, x2, y2) {
69
113
  this._drawLine(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');
package/dist/elements/widgets/designerView/tools/DrawPathTool.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare class DrawPathTool implements ITool {
12
12
  private _eventStarted;
13
13
  private _lastPoint;
14
14
  private _savedPoint;
15
+ private _startPoint;
15
16
  constructor();
16
17
  activated(serviceContainer: ServiceContainer): void;
17
18
  dispose(): void;
package/dist/elements/widgets/designerView/tools/DrawPathTool.js CHANGED
@@ -14,6 +14,7 @@ export class DrawPathTool {
14
14
  _eventStarted = false;
15
15
  _lastPoint = { x: 0, y: 0 };
16
16
  _savedPoint = { x: 0, y: 0 };
17
+ _startPoint = { x: 0, y: 0 };
17
18
  constructor() {
18
19
  }
19
20
  activated(serviceContainer) {
@@ -35,6 +36,7 @@ export class DrawPathTool {
35
36
  this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
36
37
  this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
37
38
  designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
39
+ this._startPoint = currentPoint;
38
40
  }
39
41
  if (this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {
40
42
  this._samePoint = true;
@@ -66,7 +68,7 @@ export class DrawPathTool {
66
68
  if (this._eventStarted && !this._pointerMoved) {
67
69
  this._p2pMode = true;
68
70
  }
69
- if (this._p2pMode && !this._samePoint) {
71
+ if (this._p2pMode && !this._samePoint && this._startPoint.x != currentPoint.x && this._startPoint.y != currentPoint.y) {
70
72
  if (this._path) {
71
73
  if (event.shiftKey) {
72
74
  let straightLine = straightenLine(this._savedPoint, currentPoint);
package/dist/elements/widgets/designerView/tools/TextTool.d.ts CHANGED
@@ -6,5 +6,6 @@ export declare class TextTool implements ITool {
6
6
  activated(serviceContainer: ServiceContainer): void;
7
7
  dispose(): void;
8
8
  readonly cursor = "text";
9
+ private _text;
9
10
  pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
10
11
  }
package/dist/elements/widgets/designerView/tools/TextTool.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { EventNames } from '../../../../enums/EventNames.js';
1
2
  export class TextTool {
2
3
  constructor() {
3
4
  }
@@ -6,6 +7,27 @@ export class TextTool {
6
7
  dispose() {
7
8
  }
8
9
  cursor = 'text';
10
+ _text;
9
11
  pointerEventHandler(designerCanvas, event, currentElement) {
12
+ const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
13
+ //const offset = 50;
14
+ addEventListener("keyup", function (event) {
15
+ if (event.key === 'Enter') {
16
+ console.log("Enter Pressed");
17
+ event.preventDefault();
18
+ }
19
+ });
20
+ switch (event.type) {
21
+ case EventNames.PointerDown:
22
+ event.target.setPointerCapture(event.pointerId);
23
+ this._text = document.createElementNS("http://www.w3.org/2000/svg", "text");
24
+ this._text.setAttribute("x", currentPoint.x.toString());
25
+ this._text.setAttribute("y", currentPoint.y.toString());
26
+ break;
27
+ case EventNames.KeyUp:
28
+ //if(event.key === 'Enter'){
29
+ //}
30
+ break;
31
+ }
10
32
  }
11
33
  }
package/dist/polyfill/mobileDragDrop.js CHANGED
@@ -29,4 +29,4 @@ function elementFromPoint(x, y) {
29
29
  return el;
30
30
  }
31
31
  }
32
- MobileDragDrop.polyfill({ tryFindDraggableTarget: tryFindDraggableTarget, elementFromPoint: elementFromPoint });
32
+ MobileDragDrop.polyfill({ forceApply: navigator.maxTouchPoints && navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome'), tryFindDraggableTarget: tryFindDraggableTarget, elementFromPoint: elementFromPoint });
package/package.json CHANGED
@@ -1,39 +1,41 @@
1
- {
2
- "description": "A UI designer for Polymer apps",
3
- "name": "@node-projects/web-component-designer",
4
- "version": "0.0.68",
5
- "type": "module",
6
- "main": "./dist/index.js",
7
- "author": "",
8
- "license": "MIT",
9
- "scripts": {
10
- "tsc": "tsc",
11
- "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
12
- },
13
- "dependencies": {
14
- "@node-projects/base-custom-webcomponent": "^0.3.7",
15
- "construct-style-sheets-polyfill": "^3.0.4"
16
- },
17
- "devDependencies": {
18
- "@node-projects/lean-he-esm": "^3.3.0",
19
- "@node-projects/node-html-parser-esm": "^2.4.1",
20
- "@types/codemirror": "^5.60.5",
21
- "@types/jquery": "^3.5.9",
22
- "@types/jquery.fancytree": "0.0.7",
23
- "ace-builds": "^1.4.13",
24
- "codemirror": "^5.64.0",
25
- "esprima-next": "^5.7.0",
26
- "html2canvas": "*",
27
- "jest": "^27.4.3",
28
- "jquery": "^3.6.0",
29
- "jquery.fancytree": "^2.38.0",
30
- "monaco-editor": "^0.30.1",
31
- "ts-jest": "^27.1.1",
32
- "typescript": "^4.5.2",
33
- "typescript-lit-html-plugin": "^0.9.0"
34
- },
35
- "repository": {
36
- "type": "git",
37
- "url": "git+https://github.com/node-projects/web-component-designer.git"
38
- }
39
- }
1
+ {
2
+ "description": "A UI designer for Polymer apps",
3
+ "name": "@node-projects/web-component-designer",
4
+ "version": "0.0.69",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "author": "",
8
+ "license": "MIT",
9
+ "scripts": {
10
+ "tsc": "tsc",
11
+ "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
12
+ "build": "tsc",
13
+ "prepublishOnly": "npm run build"
14
+ },
15
+ "dependencies": {
16
+ "@node-projects/base-custom-webcomponent": "^0.4.0",
17
+ "construct-style-sheets-polyfill": "^3.0.5"
18
+ },
19
+ "devDependencies": {
20
+ "@node-projects/lean-he-esm": "^3.3.0",
21
+ "@node-projects/node-html-parser-esm": "^2.4.1",
22
+ "@types/codemirror": "^5.60.5",
23
+ "@types/jquery": "^3.5.11",
24
+ "@types/jquery.fancytree": "0.0.7",
25
+ "ace-builds": "^1.4.13",
26
+ "codemirror": "^5.65.0",
27
+ "esprima-next": "^5.7.0",
28
+ "html2canvas": "*",
29
+ "jest": "^27.4.5",
30
+ "jquery": "^3.6.0",
31
+ "jquery.fancytree": "^2.38.0",
32
+ "monaco-editor": "^0.31.1",
33
+ "ts-jest": "^27.1.2",
34
+ "typescript": "^4.5.4",
35
+ "typescript-lit-html-plugin": "^0.9.0"
36
+ },
37
+ "repository": {
38
+ "type": "git",
39
+ "url": "git+https://github.com/node-projects/web-component-designer.git"
40
+ }
41
+ }