@node-projects/web-component-designer 0.0.62 → 0.0.66

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 (71) hide show
  1. package/.vscode/settings.json +1 -1
  2. package/ACKNOWLEDGMENTS +7 -0
  3. package/dist/elements/controls/DesignerTabControl.js +4 -2
  4. package/dist/elements/controls/PlainScrollbar.d.ts +15 -0
  5. package/dist/elements/controls/PlainScrollbar.js +482 -0
  6. package/dist/elements/controls/SimpleSplitView.d.ts +11 -0
  7. package/dist/elements/controls/SimpleSplitView.js +67 -0
  8. package/dist/elements/documentContainer.d.ts +4 -1
  9. package/dist/elements/documentContainer.js +45 -19
  10. package/dist/elements/helper/PathDataPolyfill.d.ts +5 -1
  11. package/dist/elements/helper/PathDataPolyfill.js +49 -1
  12. package/dist/elements/helper/contextMenu/ContextMenuHelper.js +1 -0
  13. package/dist/elements/services/DefaultServiceBootstrap.js +10 -0
  14. package/dist/elements/services/htmlParserService/NodeHtmlParserService.js +2 -0
  15. package/dist/elements/services/placementService/DefaultPlacementService.js +1 -1
  16. package/dist/elements/services/placementService/ISnaplinesProviderService.d.ts +5 -4
  17. package/dist/elements/services/placementService/SnaplinesProviderService.d.ts +5 -4
  18. package/dist/elements/services/placementService/SnaplinesProviderService.js +15 -13
  19. package/dist/elements/services/undoService/UndoService.js +3 -0
  20. package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts +4 -0
  21. package/dist/elements/widgets/designerView/IPlacementView.d.ts +2 -0
  22. package/dist/elements/widgets/designerView/Snaplines.d.ts +2 -1
  23. package/dist/elements/widgets/designerView/designerCanvas.d.ts +8 -1
  24. package/dist/elements/widgets/designerView/designerCanvas.js +49 -26
  25. package/dist/elements/widgets/designerView/designerView.d.ts +5 -1
  26. package/dist/elements/widgets/designerView/designerView.js +81 -18
  27. package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension.js +3 -3
  28. package/dist/elements/widgets/designerView/extensions/MouseOverExtension.js +1 -1
  29. package/dist/elements/widgets/designerView/extensions/PositionExtension.js +4 -4
  30. package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension.js +2 -2
  31. package/dist/elements/widgets/designerView/extensions/ResizeExtension.d.ts +2 -1
  32. package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +19 -15
  33. package/dist/elements/widgets/designerView/extensions/RotateExtension.js +1 -1
  34. package/dist/elements/widgets/designerView/extensions/SelectionDefaultExtension.js +2 -2
  35. package/dist/elements/widgets/designerView/extensions/TransformOriginExtension.js +2 -2
  36. package/dist/elements/widgets/designerView/overlayLayerView.d.ts +1 -0
  37. package/dist/elements/widgets/designerView/overlayLayerView.js +6 -0
  38. package/dist/elements/widgets/designerView/tools/DrawEllipsisTool.d.ts +15 -0
  39. package/dist/elements/widgets/designerView/tools/DrawEllipsisTool.js +90 -0
  40. package/dist/elements/widgets/designerView/tools/DrawLineTool.d.ts +13 -0
  41. package/dist/elements/widgets/designerView/tools/DrawLineTool.js +75 -0
  42. package/dist/elements/widgets/designerView/tools/DrawPathTool.d.ts +0 -2
  43. package/dist/elements/widgets/designerView/tools/DrawPathTool.js +5 -18
  44. package/dist/elements/widgets/designerView/tools/DrawRectTool.d.ts +18 -0
  45. package/dist/elements/widgets/designerView/tools/DrawRectTool.js +105 -0
  46. package/dist/elements/widgets/designerView/tools/NamedTools.d.ts +3 -0
  47. package/dist/elements/widgets/designerView/tools/NamedTools.js +3 -0
  48. package/dist/elements/widgets/designerView/tools/PanTool.js +14 -0
  49. package/dist/elements/widgets/designerView/tools/PointerTool.js +7 -0
  50. package/dist/elements/widgets/designerView/tools/RectangleSelectorTool.js +2 -2
  51. package/dist/elements/widgets/paletteView/paletteTreeView.js +0 -5
  52. package/dist/elements/widgets/propertyGrid/PropertyGrid.js +1 -0
  53. package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js +1 -0
  54. package/dist/elements/widgets/treeView/treeView.js +1 -1
  55. package/dist/index.d.ts +4 -0
  56. package/dist/index.js +4 -0
  57. package/package.json +1 -1
  58. package/dist/elements/widgets/designerView/ButtonSeperatorProvider copy.d.ts +0 -7
  59. package/dist/elements/widgets/designerView/ButtonSeperatorProvider copy.js +0 -11
  60. package/dist/elements/widgets/designerView/extensions/GridExtensionConfigButtons.d.ts +0 -5
  61. package/dist/elements/widgets/designerView/extensions/GridExtensionConfigButtons.js +0 -12
  62. package/dist/elements/widgets/designerView/extensions/GridExtensionProvider copy.d.ts +0 -10
  63. package/dist/elements/widgets/designerView/extensions/GridExtensionProvider copy.js +0 -18
  64. package/dist/elements/widgets/designerView/extensions/GridExtensionProviderConfigButtons.d.ts +0 -5
  65. package/dist/elements/widgets/designerView/extensions/GridExtensionProviderConfigButtons.js +0 -12
  66. package/dist/elements/widgets/designerView/extensions/GridExtensionProviderOptions.d.ts +0 -10
  67. package/dist/elements/widgets/designerView/extensions/GridExtensionProviderOptions.js +0 -18
  68. package/dist/elements/widgets/designerView/extensions/IDesignViewConfigButtonsProvider.d.ts +0 -0
  69. package/dist/elements/widgets/designerView/extensions/IDesignViewConfigButtonsProvider.js +0 -1
  70. package/dist/elements/widgets/designerView/extensions/IExtensionConfiguration.d.ts +0 -3
  71. package/dist/elements/widgets/designerView/extensions/IExtensionConfiguration.js +0 -1
@@ -1,5 +1,5 @@
1
1
  import { EventNames } from '../../../../enums/EventNames';
2
- import { movePathData } from '../../../helper/PathDataPolyfill';
2
+ import { moveSVGPath, straightenLine } from '../../../helper/PathDataPolyfill';
3
3
  import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
4
4
  import { DesignItem } from '../../../item/DesignItem';
5
5
  import { OverlayLayer } from '../extensions/OverlayLayer.js';
@@ -30,7 +30,7 @@ export class DrawPathTool {
30
30
  event.target.setPointerCapture(event.pointerId);
31
31
  this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
32
32
  this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
33
- this._path.setAttribute("D", this._pathD);
33
+ this._path.setAttribute("d", this._pathD);
34
34
  this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
35
35
  this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
36
36
  this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
@@ -56,7 +56,7 @@ export class DrawPathTool {
56
56
  if (this._path) {
57
57
  let straightLine = currentPoint;
58
58
  if (event.shiftKey)
59
- straightLine = this.straightenLine(this._savedPoint, currentPoint);
59
+ straightLine = straightenLine(this._savedPoint, currentPoint);
60
60
  this._path.setAttribute("d", this._pathD + "L" + straightLine.x + " " + straightLine.y);
61
61
  }
62
62
  }
@@ -69,7 +69,7 @@ export class DrawPathTool {
69
69
  if (this._p2pMode && !this._samePoint) {
70
70
  if (this._path) {
71
71
  if (event.shiftKey) {
72
- let straightLine = this.straightenLine(this._savedPoint, currentPoint);
72
+ let straightLine = straightenLine(this._savedPoint, currentPoint);
73
73
  this._pathD += "L" + straightLine.x + " " + straightLine.y;
74
74
  this._path.setAttribute("d", this._pathD);
75
75
  }
@@ -91,7 +91,7 @@ export class DrawPathTool {
91
91
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
92
92
  const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
93
93
  const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
94
- const d = movePathData(this._path, mvX, mvY);
94
+ const d = moveSVGPath(this._path, mvX, mvY);
95
95
  this._path.setAttribute("d", d);
96
96
  svg.appendChild(this._path);
97
97
  svg.style.left = (mvX) + 'px';
@@ -110,17 +110,4 @@ export class DrawPathTool {
110
110
  break;
111
111
  }
112
112
  }
113
- straightenLine(p1, p2) {
114
- let newP = { x: 0, y: 0 };
115
- let alpha = -1 * Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
116
- if (alpha < 0)
117
- alpha += 360;
118
- if (alpha > 0 && alpha < 45 || alpha > 315 && alpha < 360 || alpha > 135 && alpha < 225) // right or left
119
- newP = { x: p2.x, y: p1.y };
120
- else if (alpha > 45 && alpha < 135 || alpha > 225 && alpha < 315) // up or down
121
- newP = { x: p1.x, y: p2.y };
122
- else // something else
123
- newP = { x: p2.x, y: p2.y };
124
- return newP;
125
- }
126
113
  }
@@ -0,0 +1,18 @@
1
+ import { IDesignerCanvas } from '../IDesignerCanvas';
2
+ import { ITool } from './ITool';
3
+ import { ServiceContainer } from '../../../services/ServiceContainer.js';
4
+ export declare class DrawRectTool implements ITool {
5
+ readonly cursor = "crosshair";
6
+ private _path;
7
+ private _startPoint;
8
+ private _minX;
9
+ private _minY;
10
+ private _maxX;
11
+ private _maxY;
12
+ private _px;
13
+ private _py;
14
+ constructor();
15
+ activated(serviceContainer: ServiceContainer): void;
16
+ dispose(): void;
17
+ pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
18
+ }
@@ -0,0 +1,105 @@
1
+ import { EventNames } from '../../../../enums/EventNames';
2
+ import { OverlayLayer } from '../extensions/OverlayLayer.js';
3
+ import { calculateNormLegth } from '../../../helper/PathDataPolyfill';
4
+ import { DesignItem } from '../../../item/DesignItem';
5
+ import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
6
+ export class DrawRectTool {
7
+ cursor = 'crosshair';
8
+ _path;
9
+ _startPoint;
10
+ _minX;
11
+ _minY;
12
+ _maxX;
13
+ _maxY;
14
+ _px;
15
+ _py;
16
+ constructor() {
17
+ }
18
+ activated(serviceContainer) {
19
+ }
20
+ dispose() {
21
+ }
22
+ pointerEventHandler(designerCanvas, event, currentElement) {
23
+ const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
24
+ const offset = 50;
25
+ switch (event.type) {
26
+ case EventNames.PointerDown:
27
+ this._startPoint = currentPoint;
28
+ event.target.setPointerCapture(event.pointerId);
29
+ this._path = document.createElementNS("http://www.w3.org/2000/svg", "rect");
30
+ this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
31
+ this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
32
+ this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
33
+ this._path.setAttribute("x", currentPoint.x.toString());
34
+ this._path.setAttribute("y", currentPoint.y.toString());
35
+ this._path.setAttribute("width", "0");
36
+ this._path.setAttribute("height", "0");
37
+ designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
38
+ break;
39
+ case EventNames.PointerMove:
40
+ if (this._path) {
41
+ this._minX = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
42
+ this._maxX = currentPoint.x > this._startPoint.x ? currentPoint.x : this._startPoint.x;
43
+ this._minY = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
44
+ this._maxY = currentPoint.y > this._startPoint.y ? currentPoint.y : this._startPoint.y;
45
+ if (event.ctrlKey) {
46
+ if (event.shiftKey) {
47
+ const normLength = 2 * calculateNormLegth(this._startPoint, currentPoint);
48
+ this._px = this._startPoint.x - normLength / 2;
49
+ this._py = this._startPoint.y - normLength / 2;
50
+ this._path.setAttribute("width", (normLength).toString());
51
+ this._path.setAttribute("height", (normLength).toString());
52
+ }
53
+ else {
54
+ const w = 2 * (this._maxX - this._minX);
55
+ const h = 2 * (this._maxY - this._minY);
56
+ this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x - w / 2;
57
+ this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y - h / 2;
58
+ this._path.setAttribute("width", (w).toString());
59
+ this._path.setAttribute("height", (h).toString());
60
+ }
61
+ this._path.setAttribute("x", this._px.toString());
62
+ this._path.setAttribute("y", this._py.toString());
63
+ }
64
+ else {
65
+ if (event.shiftKey) {
66
+ const normLength = calculateNormLegth(this._startPoint, currentPoint);
67
+ this._px = currentPoint.x < this._startPoint.x ? this._startPoint.x - normLength : this._startPoint.x;
68
+ this._py = currentPoint.y < this._startPoint.y ? this._startPoint.y - normLength : this._startPoint.y;
69
+ this._path.setAttribute("width", (normLength).toString());
70
+ this._path.setAttribute("height", (normLength).toString());
71
+ }
72
+ else {
73
+ this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
74
+ this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
75
+ this._path.setAttribute("width", (this._maxX - this._minX).toString());
76
+ this._path.setAttribute("height", (this._maxY - this._minY).toString());
77
+ }
78
+ this._path.setAttribute("x", this._px.toString());
79
+ this._path.setAttribute("y", this._py.toString());
80
+ }
81
+ }
82
+ break;
83
+ case EventNames.PointerUp:
84
+ event.target.releasePointerCapture(event.pointerId);
85
+ const rect = this._path.getBoundingClientRect();
86
+ designerCanvas.overlayLayer.removeOverlay(this._path);
87
+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
88
+ const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
89
+ const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
90
+ this._path.setAttribute("x", (this._px - mvX).toString());
91
+ this._path.setAttribute("y", (this._py - mvY).toString());
92
+ svg.appendChild(this._path);
93
+ svg.style.left = (mvX) + 'px';
94
+ svg.style.top = (mvY) + 'px';
95
+ svg.style.position = 'absolute';
96
+ svg.style.width = (rect.width + 2 * offset) + 'px';
97
+ svg.style.height = (rect.height + 2 * offset) + 'px';
98
+ this._path = null;
99
+ const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
100
+ designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
101
+ designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
102
+ break;
103
+ }
104
+ }
105
+ }
@@ -2,6 +2,9 @@ export declare enum NamedTools {
2
2
  Pointer = "Pointer",
3
3
  DrawSelection = "DrawSelection",
4
4
  DrawPath = "DrawPath",
5
+ DrawRect = "DrawRect",
6
+ DrawEllipsis = "DrawEllipsis",
7
+ DrawLine = "DrawLine",
5
8
  Zoom = "Zoom",
6
9
  Pan = "Pan",
7
10
  MagicWandSelector = "MagicWandSelector",
@@ -3,6 +3,9 @@ export var NamedTools;
3
3
  NamedTools["Pointer"] = "Pointer";
4
4
  NamedTools["DrawSelection"] = "DrawSelection";
5
5
  NamedTools["DrawPath"] = "DrawPath";
6
+ NamedTools["DrawRect"] = "DrawRect";
7
+ NamedTools["DrawEllipsis"] = "DrawEllipsis";
8
+ NamedTools["DrawLine"] = "DrawLine";
6
9
  NamedTools["Zoom"] = "Zoom";
7
10
  NamedTools["Pan"] = "Pan";
8
11
  NamedTools["MagicWandSelector"] = "MagicWandSelector";
@@ -1,6 +1,20 @@
1
+ import { EventNames } from '../../../../enums/EventNames.js';
1
2
  export class PanTool {
2
3
  cursor = 'grab';
3
4
  pointerEventHandler(designerCanvas, event, currentElement) {
5
+ switch (event.type) {
6
+ case EventNames.PointerDown:
7
+ event.target.setPointerCapture(event.pointerId);
8
+ break;
9
+ case EventNames.PointerMove:
10
+ if (event.buttons == 1) {
11
+ designerCanvas.canvasOffset = { x: designerCanvas.canvasOffset.x + +event.movementX / designerCanvas.zoomFactor, y: designerCanvas.canvasOffset.y + event.movementY / designerCanvas.zoomFactor };
12
+ }
13
+ break;
14
+ case EventNames.PointerUp:
15
+ event.target.releasePointerCapture(event.pointerId);
16
+ break;
17
+ }
4
18
  }
5
19
  activated(serviceContainer) {
6
20
  }
@@ -23,6 +23,13 @@ export class PointerTool {
23
23
  dispose() {
24
24
  }
25
25
  pointerEventHandler(designerCanvas, event, currentElement) {
26
+ if (((event.ctrlKey || event.metaKey) && event.shiftKey) || event.buttons == 4) {
27
+ const panTool = designerCanvas.serviceContainer.designerTools.get(NamedTools.Pan);
28
+ if (panTool) {
29
+ panTool.pointerEventHandler(designerCanvas, event, currentElement);
30
+ return;
31
+ }
32
+ }
26
33
  switch (event.type) {
27
34
  case EventNames.PointerDown:
28
35
  event.target.setPointerCapture(event.pointerId);
@@ -16,8 +16,8 @@ export class RectangleSelectorTool {
16
16
  if (!this._rect)
17
17
  this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
18
18
  this._rect.setAttribute('class', 'svg-selector');
19
- this._rect.setAttribute('x', this._initialPoint.x);
20
- this._rect.setAttribute('y', this._initialPoint.y);
19
+ this._rect.setAttribute('x', (this._initialPoint.x * designerCanvas.scaleFactor));
20
+ this._rect.setAttribute('y', (this._initialPoint.y * designerCanvas.scaleFactor));
21
21
  this._rect.setAttribute('width', 0);
22
22
  this._rect.setAttribute('height', 0);
23
23
  designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
@@ -73,11 +73,6 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
73
73
  extensions: ['childcounter', 'dnd5', 'filter'],
74
74
  quicksearch: true,
75
75
  source: [],
76
- activate: (event, data) => {
77
- let node = data.node;
78
- let designItem = node.data.ref;
79
- designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
80
- },
81
76
  dnd5: {
82
77
  dropMarkerParent: this.shadowRoot,
83
78
  preventRecursion: true,
@@ -17,6 +17,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
17
17
  display: block;
18
18
  height: 100%;
19
19
  user-select: none;
20
+ -webkit-user-select: none;
20
21
  }
21
22
  button:hover {
22
23
  box-shadow: inset 0 3px 0 var(--light-grey);
@@ -6,6 +6,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
6
6
  display: block;
7
7
  height: 100%;
8
8
  user-select: none;
9
+ -webkit-user-select: none;
9
10
  background: var(--medium-grey, #2f3545);
10
11
  color: white;
11
12
  }
@@ -199,7 +199,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
199
199
  // If the target is a <span>, you clicked on the span inside the button
200
200
  // so you need to use currentTarget.
201
201
  let item = event.target;
202
- if (item.tagName === 'SPAN') {
202
+ if (item.localName === 'span') {
203
203
  item = item.parentElement;
204
204
  }
205
205
  this._selectTreeElements([item]);
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from "./elements/controls/DesignerTabControl.js";
2
+ export * from "./elements/controls/PlainScrollbar.js";
2
3
  export * from "./elements/services/DefaultServiceBootstrap.js";
3
4
  export * from "./elements/helper/CssAttributeParser.js";
4
5
  export * from "./elements/helper/CssCombiner.js";
@@ -96,6 +97,9 @@ export type { ITool } from "./elements/widgets/designerView/tools/ITool.js";
96
97
  export * from "./elements/widgets/designerView/tools/NamedTools.js";
97
98
  export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
98
99
  export * from "./elements/widgets/designerView/tools/DrawPathTool.js";
100
+ export * from "./elements/widgets/designerView/tools/DrawRectTool.js";
101
+ export * from "./elements/widgets/designerView/tools/DrawEllipsisTool.js";
102
+ export * from "./elements/widgets/designerView/tools/DrawLineTool.js";
99
103
  export * from "./elements/widgets/designerView/tools/MagicWandSelectorTool.js";
100
104
  export * from "./elements/widgets/designerView/tools/PanTool.js";
101
105
  export * from "./elements/widgets/designerView/tools/PickColorTool.js";
package/dist/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from "./elements/controls/DesignerTabControl.js";
2
+ export * from "./elements/controls/PlainScrollbar.js";
2
3
  export * from "./elements/services/DefaultServiceBootstrap.js";
3
4
  export * from "./elements/helper/CssAttributeParser.js";
4
5
  export * from "./elements/helper/CssCombiner.js";
@@ -61,6 +62,9 @@ export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js"
61
62
  export * from "./elements/widgets/designerView/tools/NamedTools.js";
62
63
  export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
63
64
  export * from "./elements/widgets/designerView/tools/DrawPathTool.js";
65
+ export * from "./elements/widgets/designerView/tools/DrawRectTool.js";
66
+ export * from "./elements/widgets/designerView/tools/DrawEllipsisTool.js";
67
+ export * from "./elements/widgets/designerView/tools/DrawLineTool.js";
64
68
  export * from "./elements/widgets/designerView/tools/MagicWandSelectorTool.js";
65
69
  export * from "./elements/widgets/designerView/tools/PanTool.js";
66
70
  export * from "./elements/widgets/designerView/tools/PickColorTool.js";
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.62",
4
+ "version": "0.0.66",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "author": "",
@@ -1,7 +0,0 @@
1
- import { IDesignerCanvas } from "./IDesignerCanvas.js";
2
- import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
3
- export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
4
- _space: number;
5
- constructor(space: number);
6
- provideButtons(designerCanvas: IDesignerCanvas): HTMLElement[];
7
- }
@@ -1,11 +0,0 @@
1
- export class ButtonSeperatorProvider {
2
- _space;
3
- constructor(space) {
4
- this._space = space;
5
- }
6
- provideButtons(designerCanvas) {
7
- const div = document.createElement('div');
8
- div.style.marginLeft = this._space + 'px';
9
- return [div];
10
- }
11
- }
@@ -1,5 +0,0 @@
1
- import { IDesignerCanvas } from "../IDesignerCanvas";
2
- import { IExtensionManager } from "./IExtensionManger";
3
- export declare class GridExtensionProviderConfigButtons {
4
- aaa(extensionManager: IExtensionManager, designerView: IDesignerCanvas): HTMLElement[];
5
- }
@@ -1,12 +0,0 @@
1
- import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
2
- export class GridExtensionProviderConfigButtons {
3
- aaa(extensionManager, designerView) {
4
- const extensionOptions = designerView.instanceServiceContainer.designContext.extensionOptions;
5
- const btn = document.createElement('div');
6
- btn.onclick = () => {
7
- const val = extensionOptions[gridExtensionShowOverlayOptionName];
8
- extensionOptions[gridExtensionShowOverlayOptionName] = val == true ? false : true;
9
- };
10
- return [btn];
11
- }
12
- }
@@ -1,10 +0,0 @@
1
- import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
2
- import { IDesignItem } from "../../../item/IDesignItem";
3
- import { IDesignerCanvas } from "../IDesignerCanvas";
4
- import { IDesignerExtension } from "./IDesignerExtension";
5
- import { IExtensionManager } from "./IExtensionManger";
6
- export declare class GridExtensionProvider implements IDesignerExtensionProvider {
7
- shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
8
- getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
9
- readonly style: CSSStyleSheet;
10
- }
@@ -1,18 +0,0 @@
1
- import { GridExtension } from './GridExtension';
2
- import { css } from "@node-projects/base-custom-webcomponent";
3
- const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
4
- export class GridExtensionProvider {
5
- shouldExtend(extensionManager, designerView, designItem) {
6
- if (getComputedStyle(designItem.element).display == 'grid')
7
- return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
8
- return false;
9
- }
10
- getExtension(extensionManager, designerView, designItem) {
11
- return new GridExtension(extensionManager, designerView, designItem);
12
- }
13
- style = css `
14
- .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
15
- .svg-grid-area { font-size: 8px; }
16
- .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
17
- `;
18
- }
@@ -1,5 +0,0 @@
1
- import { IDesignerCanvas } from "../IDesignerCanvas";
2
- import { IExtensionManager } from "./IExtensionManger";
3
- export declare class GridExtensionProviderConfigButtons {
4
- aaa(extensionManager: IExtensionManager, designerView: IDesignerCanvas): HTMLElement[];
5
- }
@@ -1,12 +0,0 @@
1
- import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
2
- export class GridExtensionProviderConfigButtons {
3
- aaa(extensionManager, designerView) {
4
- const extensionOptions = designerView.instanceServiceContainer.designContext.extensionOptions;
5
- const btn = document.createElement('div');
6
- btn.onclick = () => {
7
- const val = extensionOptions[gridExtensionShowOverlayOptionName];
8
- extensionOptions[gridExtensionShowOverlayOptionName] = val == true ? false : true;
9
- };
10
- return [btn];
11
- }
12
- }
@@ -1,10 +0,0 @@
1
- import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
2
- import { IDesignItem } from "../../../item/IDesignItem";
3
- import { IDesignerCanvas } from "../IDesignerCanvas";
4
- import { IDesignerExtension } from "./IDesignerExtension";
5
- import { IExtensionManager } from "./IExtensionManger";
6
- export declare class GridExtensionProvider implements IDesignerExtensionProvider {
7
- shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
8
- getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
9
- readonly style: CSSStyleSheet;
10
- }
@@ -1,18 +0,0 @@
1
- import { GridExtension } from './GridExtension';
2
- import { css } from "@node-projects/base-custom-webcomponent";
3
- const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
4
- export class GridExtensionProvider {
5
- shouldExtend(extensionManager, designerView, designItem) {
6
- if (getComputedStyle(designItem.element).display == 'grid')
7
- return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
8
- return false;
9
- }
10
- getExtension(extensionManager, designerView, designItem) {
11
- return new GridExtension(extensionManager, designerView, designItem);
12
- }
13
- style = css `
14
- .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
15
- .svg-grid-area { font-size: 8px; }
16
- .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
17
- `;
18
- }
@@ -1,3 +0,0 @@
1
- export interface IExtensionConfiguration {
2
- designerViewButtons?: HTMLElement[];
3
- }