@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.
Files changed (12) hide show
  1. package/dist/elements/documentContainer.js +1 -1
  2. package/dist/elements/services/placementService/DefaultPlacementService.js +2 -0
  3. package/dist/elements/widgets/designerView/designerCanvas.d.ts +1 -1
  4. package/dist/elements/widgets/designerView/designerCanvas.js +15 -12
  5. package/dist/elements/widgets/designerView/designerView.d.ts +1 -1
  6. package/dist/elements/widgets/designerView/designerView.js +2 -2
  7. package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtension.js +3 -0
  8. package/dist/elements/widgets/designerView/extensions/GrayOutExtension.d.ts +1 -1
  9. package/dist/elements/widgets/designerView/extensions/GrayOutExtension.js +7 -8
  10. package/dist/elements/widgets/designerView/tools/PointerTool.d.ts +1 -0
  11. package/dist/elements/widgets/designerView/tools/PointerTool.js +13 -8
  12. package/package.json +9 -9
package/dist/elements/documentContainer.js CHANGED
@@ -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.additionalStyle = cssFromString(style);
13
+ this.designerView.additionalStyles = [cssFromString(style)];
14
14
  }
15
15
  ;
16
16
  get additionalStyleString() {
package/dist/elements/services/placementService/DefaultPlacementService.js CHANGED
@@ -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) {
package/dist/elements/widgets/designerView/designerCanvas.d.ts CHANGED
@@ -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 additionalStyle(value: CSSStyleSheet);
67
+ set additionalStyles(value: CSSStyleSheet[]);
68
68
  executeCommand(command: IUiCommand): Promise<void>;
69
69
  canExecuteCommand(command: IUiCommand): boolean;
70
70
  handleSelectAll(): void;
package/dist/elements/widgets/designerView/designerCanvas.js CHANGED
@@ -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 additionalStyle(value) {
202
+ set additionalStyles(value) {
203
203
  if (value) {
204
- for (let r of value.rules) {
205
- if (r instanceof CSSStyleRule) {
206
- let parts = r.selectorText.split(',');
207
- let t = '';
208
- for (let p of parts) {
209
- if (r.selectorText)
210
- t += ',';
211
- t += '#canvas ' + p;
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, value];
219
+ this.shadowRoot.adoptedStyleSheets = [this.constructor.style, cssFromString(style)];
217
220
  }
218
221
  else
219
222
  this.shadowRoot.adoptedStyleSheets = [this.constructor.style];
package/dist/elements/widgets/designerView/designerView.d.ts CHANGED
@@ -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 additionalStyle(value: CSSStyleSheet);
32
+ set additionalStyles(value: CSSStyleSheet[]);
33
33
  setDesignItems(designItems: IDesignItem[]): void;
34
34
  executeCommand(command: IUiCommand): Promise<void>;
35
35
  canExecuteCommand(command: IUiCommand): boolean;
package/dist/elements/widgets/designerView/designerView.js CHANGED
@@ -297,8 +297,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
297
297
  set designerHeight(value) {
298
298
  this._designerCanvas.designerHeight = value;
299
299
  }
300
- set additionalStyle(value) {
301
- this._designerCanvas.additionalStyle = value;
300
+ set additionalStyles(value) {
301
+ this._designerCanvas.additionalStyles = value;
302
302
  }
303
303
  setDesignItems(designItems) {
304
304
  this._designerCanvas.setDesignItems(designItems);
package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtension.js CHANGED
@@ -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));
package/dist/elements/widgets/designerView/extensions/GrayOutExtension.d.ts CHANGED
@@ -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(rect: IRect): void;
11
+ drawGrayOut(r: IRect): void;
12
12
  dispose(): void;
13
13
  }
package/dist/elements/widgets/designerView/extensions/GrayOutExtension.js CHANGED
@@ -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 itemRect = this.extendedItem.element.getBoundingClientRect();
19
- this.drawGrayOut(itemRect);
18
+ let normalizedRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
19
+ this.drawGrayOut(normalizedRect);
20
20
  }
21
- drawGrayOut(rect) {
22
- let r = { x: rect.x - this.designerCanvas.containerBoundingRect.x, y: rect.y - this.designerCanvas.containerBoundingRect.y, width: rect.width, height: rect.height };
23
- const pathPoints = "M0 0 L0 " + this.designerCanvas.containerBoundingRect.height + "L" + r.x + " " + this.designerCanvas.containerBoundingRect.height + "L" + r.x + " 0" + " L0 0" +
24
- "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + this.designerCanvas.containerBoundingRect.width + " " + r.y + "L" + this.designerCanvas.containerBoundingRect.width + " 0" + "L" + r.x + " 0" +
25
- "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + this.designerCanvas.containerBoundingRect.height + "L" + this.designerCanvas.containerBoundingRect.width + " " + this.designerCanvas.containerBoundingRect.height + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
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() {
package/dist/elements/widgets/designerView/tools/PointerTool.d.ts CHANGED
@@ -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;
package/dist/elements/widgets/designerView/tools/PointerTool.js CHANGED
@@ -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, [this._actionStartedDesignItem]);
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, [this._actionStartedDesignItem])) {
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, [this._actionStartedDesignItem]);
241
- newContainerElementDesignItem._insertChildInternal(this._actionStartedDesignItem);
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, [this._actionStartedDesignItem]);
244
- newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
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, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
253
+ currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
249
254
  }
250
- designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
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.99",
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.15",
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.4.14",
27
- "codemirror": "^5.65.3",
28
- "esprima-next": "^5.8.1",
26
+ "ace-builds": "^1.7.1",
27
+ "codemirror": "^6.0.1",
28
+ "esprima-next": "^5.8.3",
29
29
  "html2canvas": "*",
30
- "jest": "^27.5.1",
30
+ "jest": "^28.1.2",
31
31
  "jquery": "^3.6.0",
32
- "jquery.fancytree": "^2.38.1",
32
+ "jquery.fancytree": "^2.38.2",
33
33
  "monaco-editor": "^0.33.0",
34
- "ts-jest": "^27.1.4",
35
- "typescript": "^4.6.3",
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": {