@node-projects/web-component-designer 0.0.100 → 0.0.101
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/services/placementService/DefaultPlacementService.js +2 -0
- package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtension.js +3 -0
- package/dist/elements/widgets/designerView/tools/PointerTool.d.ts +1 -0
- package/dist/elements/widgets/designerView/tools/PointerTool.js +13 -8
- package/package.json +9 -9
|
@@ -13,6 +13,8 @@ export class DefaultPlacementService {
|
|
|
13
13
|
return false;
|
|
14
14
|
if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
|
|
15
15
|
return false;
|
|
16
|
+
if (!items.every(x => !x.element.contains(container.element)))
|
|
17
|
+
return false;
|
|
16
18
|
return true;
|
|
17
19
|
}
|
|
18
20
|
canLeave(container, items) {
|
|
@@ -10,6 +10,9 @@ export class ElementDragTitleExtension extends AbstractExtension {
|
|
|
10
10
|
const boundRect = this.extendedItem.element.getBoundingClientRect();
|
|
11
11
|
this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
|
|
12
12
|
this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
|
|
13
|
+
const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
|
|
14
|
+
title.textContent = this.extendedItem.name;
|
|
15
|
+
this._text.appendChild(title);
|
|
13
16
|
this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
|
|
14
17
|
this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
|
|
15
18
|
this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
|
|
@@ -7,6 +7,7 @@ export declare class PointerTool implements ITool {
|
|
|
7
7
|
private _initialPoint;
|
|
8
8
|
private _actionType?;
|
|
9
9
|
private _actionStartedDesignItem?;
|
|
10
|
+
private _actionStartedDesignItems?;
|
|
10
11
|
private _previousEventName;
|
|
11
12
|
private _dragOverExtensionItem;
|
|
12
13
|
private _dragExtensionItem;
|
|
@@ -9,6 +9,7 @@ export class PointerTool {
|
|
|
9
9
|
_initialPoint;
|
|
10
10
|
_actionType;
|
|
11
11
|
_actionStartedDesignItem;
|
|
12
|
+
_actionStartedDesignItems;
|
|
12
13
|
_previousEventName;
|
|
13
14
|
_dragOverExtensionItem;
|
|
14
15
|
_dragExtensionItem;
|
|
@@ -69,6 +70,7 @@ export class PointerTool {
|
|
|
69
70
|
this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, currentElement);
|
|
70
71
|
if (event.type == EventNames.PointerDown) {
|
|
71
72
|
this._actionStartedDesignItem = currentDesignItem;
|
|
73
|
+
this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
|
|
72
74
|
designerCanvas.snapLines.clearSnaplines();
|
|
73
75
|
if (currentDesignItem !== designerCanvas.rootDesignItem) {
|
|
74
76
|
this._actionType = PointerActionType.Drag;
|
|
@@ -106,6 +108,7 @@ export class PointerTool {
|
|
|
106
108
|
_resetTool() {
|
|
107
109
|
this._actionType = null;
|
|
108
110
|
this._actionStartedDesignItem = null;
|
|
111
|
+
this._actionStartedDesignItems = null;
|
|
109
112
|
this._movedSinceStartedAction = false;
|
|
110
113
|
this._initialPoint = null;
|
|
111
114
|
}
|
|
@@ -154,6 +157,7 @@ export class PointerTool {
|
|
|
154
157
|
if (designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem) < 0)
|
|
155
158
|
designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
|
|
156
159
|
}
|
|
160
|
+
this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
|
|
157
161
|
if (designerCanvas.alignOnSnap)
|
|
158
162
|
designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
|
|
159
163
|
break;
|
|
@@ -177,7 +181,7 @@ export class PointerTool {
|
|
|
177
181
|
else {
|
|
178
182
|
designerCanvas.extensionManager.refreshExtension(dragItem, ExtensionType.ContainerDrag);
|
|
179
183
|
}
|
|
180
|
-
const canLeave = currentContainerService.canLeave(this._actionStartedDesignItem.parent,
|
|
184
|
+
const canLeave = currentContainerService.canLeave(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
|
|
181
185
|
let newContainerElementDesignItem = null;
|
|
182
186
|
let newContainerService = null;
|
|
183
187
|
if (canLeave) {
|
|
@@ -203,7 +207,7 @@ export class PointerTool {
|
|
|
203
207
|
const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
|
|
204
208
|
newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
|
|
205
209
|
if (newContainerService) {
|
|
206
|
-
if (newContainerService.canEnter(newContainerElementDesignItem,
|
|
210
|
+
if (newContainerService.canEnter(newContainerElementDesignItem, this._actionStartedDesignItems)) {
|
|
207
211
|
break;
|
|
208
212
|
}
|
|
209
213
|
else {
|
|
@@ -237,17 +241,18 @@ export class PointerTool {
|
|
|
237
241
|
const oldOffset = currentContainerService.getElementOffset(this._actionStartedDesignItem.parent, this._actionStartedDesignItem);
|
|
238
242
|
const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem);
|
|
239
243
|
this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
|
|
240
|
-
currentContainerService.leaveContainer(this._actionStartedDesignItem.parent,
|
|
241
|
-
|
|
244
|
+
currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
|
|
245
|
+
for (let di of this._actionStartedDesignItems)
|
|
246
|
+
newContainerElementDesignItem._insertChildInternal(di); //todo -> maybe in enter container???
|
|
242
247
|
const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
|
|
243
|
-
newContainerService.enterContainer(newContainerElementDesignItem,
|
|
244
|
-
newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp,
|
|
248
|
+
newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems);
|
|
249
|
+
newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
|
|
245
250
|
}
|
|
246
251
|
else {
|
|
247
252
|
const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
|
|
248
|
-
currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp,
|
|
253
|
+
currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
|
|
249
254
|
}
|
|
250
|
-
designerCanvas.extensionManager.refreshExtensions(
|
|
255
|
+
designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems);
|
|
251
256
|
}
|
|
252
257
|
}
|
|
253
258
|
break;
|
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.
|
|
4
|
+
"version": "0.0.101",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"author": "",
|
|
@@ -19,20 +19,20 @@
|
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"@node-projects/lean-he-esm": "^3.3.0",
|
|
21
21
|
"@node-projects/node-html-parser-esm": "^2.4.1",
|
|
22
|
-
"@papyrs/stylo": "^0.0.
|
|
22
|
+
"@papyrs/stylo": "^0.0.30",
|
|
23
23
|
"@types/codemirror": "^5.60.5",
|
|
24
24
|
"@types/jquery": "^3.5.14",
|
|
25
25
|
"@types/jquery.fancytree": "0.0.7",
|
|
26
|
-
"ace-builds": "^1.
|
|
27
|
-
"codemirror": "^
|
|
28
|
-
"esprima-next": "^5.8.
|
|
26
|
+
"ace-builds": "^1.7.1",
|
|
27
|
+
"codemirror": "^6.0.1",
|
|
28
|
+
"esprima-next": "^5.8.3",
|
|
29
29
|
"html2canvas": "*",
|
|
30
|
-
"jest": "^28.1.
|
|
30
|
+
"jest": "^28.1.2",
|
|
31
31
|
"jquery": "^3.6.0",
|
|
32
|
-
"jquery.fancytree": "^2.38.
|
|
32
|
+
"jquery.fancytree": "^2.38.2",
|
|
33
33
|
"monaco-editor": "^0.33.0",
|
|
34
|
-
"ts-jest": "^28.0.
|
|
35
|
-
"typescript": "^4.7.
|
|
34
|
+
"ts-jest": "^28.0.5",
|
|
35
|
+
"typescript": "^4.7.4",
|
|
36
36
|
"typescript-lit-html-plugin": "^0.9.0"
|
|
37
37
|
},
|
|
38
38
|
"repository": {
|