@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.
- package/.vscode/settings.json +1 -1
- package/ACKNOWLEDGMENTS +7 -0
- package/dist/elements/controls/DesignerTabControl.js +4 -2
- package/dist/elements/controls/PlainScrollbar.d.ts +15 -0
- package/dist/elements/controls/PlainScrollbar.js +482 -0
- package/dist/elements/controls/SimpleSplitView.d.ts +11 -0
- package/dist/elements/controls/SimpleSplitView.js +67 -0
- package/dist/elements/documentContainer.d.ts +4 -1
- package/dist/elements/documentContainer.js +45 -19
- package/dist/elements/helper/PathDataPolyfill.d.ts +5 -1
- package/dist/elements/helper/PathDataPolyfill.js +49 -1
- package/dist/elements/helper/contextMenu/ContextMenuHelper.js +1 -0
- package/dist/elements/services/DefaultServiceBootstrap.js +10 -0
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.js +2 -0
- package/dist/elements/services/placementService/DefaultPlacementService.js +1 -1
- package/dist/elements/services/placementService/ISnaplinesProviderService.d.ts +5 -4
- package/dist/elements/services/placementService/SnaplinesProviderService.d.ts +5 -4
- package/dist/elements/services/placementService/SnaplinesProviderService.js +15 -13
- package/dist/elements/services/undoService/UndoService.js +3 -0
- package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts +4 -0
- package/dist/elements/widgets/designerView/IPlacementView.d.ts +2 -0
- package/dist/elements/widgets/designerView/Snaplines.d.ts +2 -1
- package/dist/elements/widgets/designerView/designerCanvas.d.ts +8 -1
- package/dist/elements/widgets/designerView/designerCanvas.js +49 -26
- package/dist/elements/widgets/designerView/designerView.d.ts +5 -1
- package/dist/elements/widgets/designerView/designerView.js +81 -18
- package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension.js +3 -3
- package/dist/elements/widgets/designerView/extensions/MouseOverExtension.js +1 -1
- package/dist/elements/widgets/designerView/extensions/PositionExtension.js +4 -4
- package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension.js +2 -2
- package/dist/elements/widgets/designerView/extensions/ResizeExtension.d.ts +2 -1
- package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +19 -15
- package/dist/elements/widgets/designerView/extensions/RotateExtension.js +1 -1
- package/dist/elements/widgets/designerView/extensions/SelectionDefaultExtension.js +2 -2
- package/dist/elements/widgets/designerView/extensions/TransformOriginExtension.js +2 -2
- package/dist/elements/widgets/designerView/overlayLayerView.d.ts +1 -0
- package/dist/elements/widgets/designerView/overlayLayerView.js +6 -0
- package/dist/elements/widgets/designerView/tools/DrawEllipsisTool.d.ts +15 -0
- package/dist/elements/widgets/designerView/tools/DrawEllipsisTool.js +90 -0
- package/dist/elements/widgets/designerView/tools/DrawLineTool.d.ts +13 -0
- package/dist/elements/widgets/designerView/tools/DrawLineTool.js +75 -0
- package/dist/elements/widgets/designerView/tools/DrawPathTool.d.ts +0 -2
- package/dist/elements/widgets/designerView/tools/DrawPathTool.js +5 -18
- package/dist/elements/widgets/designerView/tools/DrawRectTool.d.ts +18 -0
- package/dist/elements/widgets/designerView/tools/DrawRectTool.js +105 -0
- package/dist/elements/widgets/designerView/tools/NamedTools.d.ts +3 -0
- package/dist/elements/widgets/designerView/tools/NamedTools.js +3 -0
- package/dist/elements/widgets/designerView/tools/PanTool.js +14 -0
- package/dist/elements/widgets/designerView/tools/PointerTool.js +7 -0
- package/dist/elements/widgets/designerView/tools/RectangleSelectorTool.js +2 -2
- package/dist/elements/widgets/paletteView/paletteTreeView.js +0 -5
- package/dist/elements/widgets/propertyGrid/PropertyGrid.js +1 -0
- package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js +1 -0
- package/dist/elements/widgets/treeView/treeView.js +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -0
- package/package.json +1 -1
- package/dist/elements/widgets/designerView/ButtonSeperatorProvider copy.d.ts +0 -7
- package/dist/elements/widgets/designerView/ButtonSeperatorProvider copy.js +0 -11
- package/dist/elements/widgets/designerView/extensions/GridExtensionConfigButtons.d.ts +0 -5
- package/dist/elements/widgets/designerView/extensions/GridExtensionConfigButtons.js +0 -12
- package/dist/elements/widgets/designerView/extensions/GridExtensionProvider copy.d.ts +0 -10
- package/dist/elements/widgets/designerView/extensions/GridExtensionProvider copy.js +0 -18
- package/dist/elements/widgets/designerView/extensions/GridExtensionProviderConfigButtons.d.ts +0 -5
- package/dist/elements/widgets/designerView/extensions/GridExtensionProviderConfigButtons.js +0 -12
- package/dist/elements/widgets/designerView/extensions/GridExtensionProviderOptions.d.ts +0 -10
- package/dist/elements/widgets/designerView/extensions/GridExtensionProviderOptions.js +0 -18
- package/dist/elements/widgets/designerView/extensions/IDesignViewConfigButtonsProvider.d.ts +0 -0
- package/dist/elements/widgets/designerView/extensions/IDesignViewConfigButtonsProvider.js +0 -1
- package/dist/elements/widgets/designerView/extensions/IExtensionConfiguration.d.ts +0 -3
- package/dist/elements/widgets/designerView/extensions/IExtensionConfiguration.js +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EventNames } from '../../../../enums/EventNames';
|
|
2
|
-
import {
|
|
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("
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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,
|
|
@@ -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.
|
|
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 +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,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,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
|
-
}
|
|
File without changes
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|