@node-projects/web-component-designer 0.0.99 → 0.0.102
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/documentContainer.js +1 -1
- package/dist/elements/services/placementService/DefaultPlacementService.js +2 -0
- package/dist/elements/widgets/designerView/designerCanvas.d.ts +1 -1
- package/dist/elements/widgets/designerView/designerCanvas.js +15 -12
- package/dist/elements/widgets/designerView/designerView.d.ts +1 -1
- package/dist/elements/widgets/designerView/designerView.js +2 -2
- package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtension.js +3 -0
- package/dist/elements/widgets/designerView/extensions/GrayOutExtension.d.ts +1 -1
- package/dist/elements/widgets/designerView/extensions/GrayOutExtension.js +7 -8
- 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
|
@@ -10,7 +10,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
|
|
|
10
10
|
_additionalStyle;
|
|
11
11
|
set additionalStyleString(style) {
|
|
12
12
|
this._additionalStyle = style;
|
|
13
|
-
this.designerView.
|
|
13
|
+
this.designerView.additionalStyles = [cssFromString(style)];
|
|
14
14
|
}
|
|
15
15
|
;
|
|
16
16
|
get additionalStyleString() {
|
|
@@ -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) {
|
|
@@ -64,7 +64,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
|
|
|
64
64
|
getDesignSurfaceDimensions(): ISize;
|
|
65
65
|
get designerOffsetWidth(): number;
|
|
66
66
|
get designerOffsetHeight(): number;
|
|
67
|
-
set
|
|
67
|
+
set additionalStyles(value: CSSStyleSheet[]);
|
|
68
68
|
executeCommand(command: IUiCommand): Promise<void>;
|
|
69
69
|
canExecuteCommand(command: IUiCommand): boolean;
|
|
70
70
|
handleSelectAll(): void;
|
|
@@ -3,7 +3,7 @@ import { InstanceServiceContainer } from '../../services/InstanceServiceContaine
|
|
|
3
3
|
import { UndoService } from '../../services/undoService/UndoService';
|
|
4
4
|
import { SelectionService } from '../../services/selectionService/SelectionService';
|
|
5
5
|
import { DesignItem } from '../../item/DesignItem';
|
|
6
|
-
import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
|
|
6
|
+
import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
|
|
7
7
|
import { dragDropFormatNameElementDefinition, dragDropFormatNameBindingObject } from '../../../Constants';
|
|
8
8
|
import { ContentService } from '../../services/contentService/ContentService';
|
|
9
9
|
import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
|
|
@@ -199,21 +199,24 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
199
199
|
get designerOffsetHeight() {
|
|
200
200
|
return this._canvasContainer.offsetHeight;
|
|
201
201
|
}
|
|
202
|
-
set
|
|
202
|
+
set additionalStyles(value) {
|
|
203
203
|
if (value) {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
204
|
+
let style = '';
|
|
205
|
+
for (let s of value) {
|
|
206
|
+
for (let r of s.cssRules) {
|
|
207
|
+
if (r instanceof CSSStyleRule) {
|
|
208
|
+
let parts = r.selectorText.split(',');
|
|
209
|
+
let t = '';
|
|
210
|
+
for (let p of parts) {
|
|
211
|
+
if (t)
|
|
212
|
+
t += ',';
|
|
213
|
+
t += '#node-projects-designer-canvas-canvas ' + p;
|
|
214
|
+
}
|
|
215
|
+
style += t + '{' + r.style.cssText + '}';
|
|
212
216
|
}
|
|
213
|
-
r.selectorText = t;
|
|
214
217
|
}
|
|
215
218
|
}
|
|
216
|
-
this.shadowRoot.adoptedStyleSheets = [this.constructor.style,
|
|
219
|
+
this.shadowRoot.adoptedStyleSheets = [this.constructor.style, cssFromString(style)];
|
|
217
220
|
}
|
|
218
221
|
else
|
|
219
222
|
this.shadowRoot.adoptedStyleSheets = [this.constructor.style];
|
|
@@ -29,7 +29,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
|
|
|
29
29
|
set designerWidth(value: string);
|
|
30
30
|
get designerHeight(): string;
|
|
31
31
|
set designerHeight(value: string);
|
|
32
|
-
set
|
|
32
|
+
set additionalStyles(value: CSSStyleSheet[]);
|
|
33
33
|
setDesignItems(designItems: IDesignItem[]): void;
|
|
34
34
|
executeCommand(command: IUiCommand): Promise<void>;
|
|
35
35
|
canExecuteCommand(command: IUiCommand): boolean;
|
|
@@ -297,8 +297,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
297
297
|
set designerHeight(value) {
|
|
298
298
|
this._designerCanvas.designerHeight = value;
|
|
299
299
|
}
|
|
300
|
-
set
|
|
301
|
-
this._designerCanvas.
|
|
300
|
+
set additionalStyles(value) {
|
|
301
|
+
this._designerCanvas.additionalStyles = value;
|
|
302
302
|
}
|
|
303
303
|
setDesignItems(designItems) {
|
|
304
304
|
this._designerCanvas.setDesignItems(designItems);
|
|
@@ -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));
|
|
@@ -8,6 +8,6 @@ export declare class GrayOutExtension extends AbstractExtension {
|
|
|
8
8
|
constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
|
|
9
9
|
extend(): void;
|
|
10
10
|
refresh(): void;
|
|
11
|
-
drawGrayOut(
|
|
11
|
+
drawGrayOut(r: IRect): void;
|
|
12
12
|
dispose(): void;
|
|
13
13
|
}
|
|
@@ -15,15 +15,14 @@ export class GrayOutExtension extends AbstractExtension {
|
|
|
15
15
|
this.overlayLayerView.addOverlay(this._path, OverlayLayer.Background);
|
|
16
16
|
this.overlays.push(this._path);
|
|
17
17
|
}
|
|
18
|
-
let
|
|
19
|
-
this.drawGrayOut(
|
|
18
|
+
let normalizedRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
|
|
19
|
+
this.drawGrayOut(normalizedRect);
|
|
20
20
|
}
|
|
21
|
-
drawGrayOut(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
"M" + r.x + "
|
|
25
|
-
"M" + r.x + " " +
|
|
26
|
-
"M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y + r.height) + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
|
|
21
|
+
drawGrayOut(r) {
|
|
22
|
+
const pathPoints = "M0 0 L0 " + this.designerCanvas.outerRect.height + "L" + r.x + " " + this.designerCanvas.outerRect.height + "L" + r.x + " 0" + " L0 0" +
|
|
23
|
+
"M" + r.x + " 0 L" + r.x + " " + r.y + "L" + this.designerCanvas.outerRect.width + " " + r.y + "L" + this.designerCanvas.outerRect.width + " 0" + "L" + r.x + " 0" +
|
|
24
|
+
"M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + this.designerCanvas.outerRect.height + "L" + this.designerCanvas.outerRect.width + " " + this.designerCanvas.outerRect.height + "L" + this.designerCanvas.outerRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
|
|
25
|
+
"M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + this.designerCanvas.outerRect.width + " " + (r.y + r.height) + "L" + this.designerCanvas.outerRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
|
|
27
26
|
this._path.setAttribute("d", pathPoints);
|
|
28
27
|
}
|
|
29
28
|
dispose() {
|
|
@@ -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.102",
|
|
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": "^
|
|
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": "^
|
|
35
|
-
"typescript": "^4.
|
|
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": {
|