@node-projects/web-component-designer 0.1.74 → 0.1.75
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/dist/elements/widgets/designerView/extensions/ElementDragTitleExtension.js +3 -3
- package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider.js +0 -1
- package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +1 -1
- package/dist/elements/widgets/designerView/tools/DrawElementTool.d.ts +2 -0
- package/dist/elements/widgets/designerView/tools/DrawElementTool.js +13 -5
- package/package.json +1 -1
|
@@ -18,10 +18,8 @@ export class ElementDragTitleExtension extends AbstractExtension {
|
|
|
18
18
|
let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints[1].x - transformedCornerPoints[0].x, 2) + Math.pow(transformedCornerPoints[1].y - transformedCornerPoints[0].y, 2));
|
|
19
19
|
let text = this.extendedItem.name;
|
|
20
20
|
this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
|
|
21
|
-
if (w > this._width)
|
|
22
|
-
text = this.extendedItem.name.substring(0, 10) + '…';
|
|
23
21
|
this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
|
|
24
|
-
this._text = this._drawHTML('<span>' + text + '</span>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
|
|
22
|
+
this._text = this._drawHTML('<span style="width: 100%;position: absolute;overflow: hidden;text-overflow: ellipsis;">' + text + '</span>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
|
|
25
23
|
this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
|
|
26
24
|
this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
|
|
27
25
|
this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
|
|
@@ -47,6 +45,8 @@ export class ElementDragTitleExtension extends AbstractExtension {
|
|
|
47
45
|
this._text.setAttribute('x', '' + transformedCornerPoints[0].x);
|
|
48
46
|
this._text.setAttribute('y', '' + transformedCornerPoints[0].y);
|
|
49
47
|
this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
|
|
48
|
+
this._text.setAttribute('height', '' + h);
|
|
49
|
+
this._text.setAttribute('width', '' + w);
|
|
50
50
|
this._text.style.transformBox = 'fill-box';
|
|
51
51
|
this._text.style.rotate = angle + 'deg';
|
|
52
52
|
}
|
|
@@ -32,7 +32,7 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
32
32
|
this.remove();
|
|
33
33
|
return;
|
|
34
34
|
}
|
|
35
|
-
if (this._valuesHaveChanges(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y)) {
|
|
35
|
+
if (this._valuesHaveChanges(this.designerCanvas.zoomFactor, transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y)) {
|
|
36
36
|
this._circle1 = this._drawResizerOverlay(transformedCornerPoints[0].x, transformedCornerPoints[0].y, 'nw-resize', this._circle1);
|
|
37
37
|
this._circle2 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[1].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[1].y - transformedCornerPoints[0].y) / 2), 'n-resize', this._circle2);
|
|
38
38
|
this._circle3 = this._drawResizerOverlay(transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'ne-resize', this._circle3);
|
|
@@ -6,6 +6,7 @@ export declare class DrawElementTool implements ITool {
|
|
|
6
6
|
private _elementDefinition;
|
|
7
7
|
private _createdItem;
|
|
8
8
|
private _startPosition;
|
|
9
|
+
private _changeGroup;
|
|
9
10
|
readonly cursor = "crosshair";
|
|
10
11
|
private _rect;
|
|
11
12
|
constructor(elementDefinition: IElementDefinition);
|
|
@@ -13,6 +14,7 @@ export declare class DrawElementTool implements ITool {
|
|
|
13
14
|
dispose(): void;
|
|
14
15
|
pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
|
|
15
16
|
keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
|
|
17
|
+
sizeOverlapThreshold: boolean;
|
|
16
18
|
private _onPointerDown;
|
|
17
19
|
private _onPointerMove;
|
|
18
20
|
private _onPointerUp;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { EventNames } from '../../../../enums/EventNames.js';
|
|
2
|
-
import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
|
|
3
2
|
import { OverlayLayer } from '../extensions/OverlayLayer.js';
|
|
4
3
|
export class DrawElementTool {
|
|
5
4
|
_elementDefinition;
|
|
6
5
|
_createdItem;
|
|
7
6
|
_startPosition;
|
|
7
|
+
_changeGroup;
|
|
8
8
|
cursor = 'crosshair';
|
|
9
9
|
_rect;
|
|
10
10
|
constructor(elementDefinition) {
|
|
@@ -30,9 +30,11 @@ export class DrawElementTool {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
keyboardEventHandler(designerCanvas, event, currentElement) { }
|
|
33
|
+
sizeOverlapThreshold = false;
|
|
33
34
|
async _onPointerDown(designerView, event) {
|
|
34
35
|
event.preventDefault();
|
|
35
36
|
this._startPosition = { x: event.x, y: event.y };
|
|
37
|
+
this._changeGroup = designerView.rootDesignItem.openGroup("Insert Item");
|
|
36
38
|
this._createdItem = await designerView.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(this._elementDefinition, designerView.serviceContainer, designerView.instanceServiceContainer));
|
|
37
39
|
const targetRect = event.target.getBoundingClientRect();
|
|
38
40
|
this._createdItem.setStyle('position', 'absolute');
|
|
@@ -41,15 +43,13 @@ export class DrawElementTool {
|
|
|
41
43
|
this._createdItem.setStyle('width', '0');
|
|
42
44
|
this._createdItem.setStyle('height', '0');
|
|
43
45
|
this._createdItem.element.style.overflow = 'hidden';
|
|
44
|
-
|
|
46
|
+
designerView.rootDesignItem.insertChild(this._createdItem);
|
|
45
47
|
//draw via containerService??? how to draw into a grid, a stackpanel???
|
|
46
|
-
designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, this._createdItem));
|
|
47
48
|
designerView.instanceServiceContainer.selectionService.clearSelectedElements();
|
|
48
49
|
}
|
|
49
50
|
async _onPointerMove(designerCanvas, event) {
|
|
50
51
|
if (this._createdItem) {
|
|
51
52
|
if (!this._rect) {
|
|
52
|
-
designerCanvas.rootDesignItem.element.appendChild(this._createdItem.element);
|
|
53
53
|
this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
54
54
|
designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foreground);
|
|
55
55
|
this._rect.setAttribute('class', 'svg-draw-new-element');
|
|
@@ -66,11 +66,19 @@ export class DrawElementTool {
|
|
|
66
66
|
this._rect.setAttribute('height', h);
|
|
67
67
|
this._createdItem.setStyle('height', h + 'px');
|
|
68
68
|
}
|
|
69
|
+
if (w > 5 || h > 5)
|
|
70
|
+
this.sizeOverlapThreshold = true;
|
|
69
71
|
}
|
|
70
72
|
}
|
|
71
73
|
async _onPointerUp(designerView, event) {
|
|
74
|
+
if (this.sizeOverlapThreshold) {
|
|
75
|
+
this._changeGroup.commit();
|
|
76
|
+
designerView.instanceServiceContainer.selectionService.setSelectedElements([this._createdItem]);
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
this._changeGroup.abort();
|
|
80
|
+
}
|
|
72
81
|
designerView.overlayLayer.removeOverlay(this._rect);
|
|
73
|
-
designerView.instanceServiceContainer.selectionService.setSelectedElements([this._createdItem]);
|
|
74
82
|
this._startPosition = null;
|
|
75
83
|
this._rect = null;
|
|
76
84
|
this._createdItem = null;
|