@node-projects/web-component-designer 0.0.54 → 0.0.58

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 (15) hide show
  1. package/dist/elements/helper/CssAttributeParser.d.ts +1 -1
  2. package/dist/elements/helper/CssAttributeParser.js +6 -3
  3. package/dist/elements/helper/GridHelper.js +7 -3
  4. package/dist/elements/helper/LayoutHelper.d.ts +1 -0
  5. package/dist/elements/helper/LayoutHelper.js +16 -4
  6. package/dist/elements/services/placementService/DefaultPlacementService.d.ts +1 -1
  7. package/dist/elements/services/placementService/DefaultPlacementService.js +10 -16
  8. package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts +1 -1
  9. package/dist/elements/services/placementService/FlexBoxPlacementService.js +2 -2
  10. package/dist/elements/services/placementService/GridPlacementService.d.ts +1 -1
  11. package/dist/elements/services/placementService/GridPlacementService.js +2 -2
  12. package/dist/elements/services/placementService/IPlacementService.d.ts +1 -1
  13. package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +2 -1
  14. package/dist/elements/widgets/designerView/tools/PointerTool.js +8 -4
  15. package/package.json +1 -1
package/dist/elements/helper/CssAttributeParser.d.ts CHANGED
@@ -5,5 +5,5 @@ export declare class CssEntry {
5
5
  }
6
6
  export declare class CssAttributeParser {
7
7
  entries: CssEntry[];
8
- parse(text: string): void;
8
+ parse(text: string, quoteType?: string): void;
9
9
  }
package/dist/elements/helper/CssAttributeParser.js CHANGED
@@ -14,7 +14,7 @@ export class CssEntry {
14
14
  }
15
15
  export class CssAttributeParser {
16
16
  entries = [];
17
- parse(text) {
17
+ parse(text, quoteType = '\'') {
18
18
  this.entries = [];
19
19
  let name = '';
20
20
  let value = '';
@@ -38,7 +38,7 @@ export class CssAttributeParser {
38
38
  token = Token.Name;
39
39
  }
40
40
  else {
41
- if (c === '\'') {
41
+ if (c === quoteType) {
42
42
  token = Token.InQuote;
43
43
  }
44
44
  value += c;
@@ -51,10 +51,13 @@ export class CssAttributeParser {
51
51
  c = text[n];
52
52
  value += c;
53
53
  }
54
- if (c === '\'') {
54
+ else if (c === quoteType) {
55
55
  value += c;
56
56
  token = Token.Value;
57
57
  }
58
+ else {
59
+ value += c;
60
+ }
58
61
  }
59
62
  }
60
63
  if (name.trim() !== '') {
package/dist/elements/helper/GridHelper.js CHANGED
@@ -1,8 +1,12 @@
1
1
  export function CalculateGridInformation(designItem) {
2
+ //todo:
3
+ //same name should combine columns/rows
2
4
  let itemRect = designItem.element.getBoundingClientRect();
3
5
  const computedStyle = getComputedStyle(designItem.element);
4
6
  const rows = computedStyle.gridTemplateRows.split(' ');
5
7
  const columns = computedStyle.gridTemplateColumns.split(' ');
8
+ const paddingLeft = Number.parseFloat(computedStyle.paddingLeft);
9
+ const paddingTop = Number.parseFloat(computedStyle.paddingTop);
6
10
  let y = 0;
7
11
  let xGap = 0;
8
12
  let yGap = 0;
@@ -81,12 +85,12 @@ export function CalculateGridInformation(designItem) {
81
85
  for (let yIdx = 0; yIdx < columns.length; yIdx++) {
82
86
  const c = columns[yIdx];
83
87
  if (x > 0 && xGap) {
84
- retVal.gaps.push({ x: x + xOffset, y: y + yOffset, width: xGap, height: currY });
88
+ retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY });
85
89
  x += xGap;
86
90
  }
87
91
  const currX = Number.parseFloat(c.replace('px', ''));
88
92
  if (y > 0 && yGap) {
89
- retVal.gaps.push({ x: x + xOffset, y: y + yOffset - yGap, width: currX, height: yGap });
93
+ retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap });
90
94
  }
91
95
  let name = null;
92
96
  if (areas) {
@@ -95,7 +99,7 @@ export function CalculateGridInformation(designItem) {
95
99
  name = nm;
96
100
  }
97
101
  }
98
- const cell = { x: x + xOffset, y: y + yOffset, width: currX, height: currY, name: name };
102
+ const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, height: currY, name: name };
99
103
  cellList.push(cell);
100
104
  x += currX;
101
105
  cl++;
package/dist/elements/helper/LayoutHelper.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import { IPoint } from "../../interfaces/IPoint.js";
2
2
  import { IDesignItem } from "../item/IDesignItem.js";
3
+ export declare function filterChildPlaceItems(items: IDesignItem[]): IDesignItem[];
3
4
  export declare function placeDesignItem(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding'): void;
package/dist/elements/helper/LayoutHelper.js CHANGED
@@ -1,6 +1,19 @@
1
1
  //todo
2
2
  //this function should return the correct property to change a layout, for example left/right when left or right is used,
3
3
  //maybe margin on grid? or transform??
4
+ export function filterChildPlaceItems(items) {
5
+ const filterdPlaceItems = [];
6
+ next: for (let i of items) {
7
+ let par = i.parent;
8
+ while (par != null && !par.isRootItem) {
9
+ if (items.indexOf(par) >= 0)
10
+ continue next;
11
+ par = par.parent;
12
+ }
13
+ filterdPlaceItems.push(i);
14
+ }
15
+ return filterdPlaceItems;
16
+ }
4
17
  export function placeDesignItem(container, designItem, offset, mode) {
5
18
  const movedElement = designItem.element;
6
19
  const computedStyleMovedElement = getComputedStyle(movedElement);
@@ -44,10 +57,9 @@ export function placeDesignItem(container, designItem, offset, mode) {
44
57
  }
45
58
  }
46
59
  if (!hasPositionedLayout)
47
- designItem.element.style.transform = designItem.styles.get('transform') ?? '';
48
- designItem.setStyle('position', 'absolute');
49
- designItem.setStyle('left', (offset.x + oldLeft + containerLeft) + "px");
50
- designItem.setStyle('top', (offset.y + oldTop + containerTop) + "px");
60
+ designItem.setStyle('position', 'absolute');
61
+ designItem.setStyle('left', (offset.x + (oldLeft ?? 0) + containerLeft) + "px");
62
+ designItem.setStyle('top', (offset.y + (oldTop ?? 0) + containerTop) + "px");
51
63
  }
52
64
  }
53
65
  /*function placeViaPosition(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding') {
package/dist/elements/services/placementService/DefaultPlacementService.d.ts CHANGED
@@ -3,7 +3,7 @@ import type { IPlacementService } from './IPlacementService.js';
3
3
  import type { IDesignItem } from '../../item/IDesignItem.js';
4
4
  import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
5
5
  export declare class DefaultPlacementService implements IPlacementService {
6
- serviceForContainer(container: IDesignItem): boolean;
6
+ serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
7
7
  canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
8
8
  canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
9
9
  getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
package/dist/elements/services/placementService/DefaultPlacementService.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { DomConverter } from '../../widgets/designerView/DomConverter.js';
2
2
  import { combineTransforms } from '../../helper/TransformHelper.js';
3
- import { placeDesignItem } from '../../helper/LayoutHelper.js';
3
+ import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
4
4
  export class DefaultPlacementService {
5
- serviceForContainer(container) {
6
- if (container.element.style.display === 'grid' || container.element.style.display === 'inline-grid' ||
7
- container.element.style.display === 'flex' || container.element.style.display === 'inline-flex')
5
+ serviceForContainer(container, containerStyle) {
6
+ if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
7
+ containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
8
8
  return false;
9
9
  return true;
10
10
  }
@@ -78,14 +78,16 @@ export class DefaultPlacementService {
78
78
  //TODO:, this should revert all undo actions while active
79
79
  //maybe a undo actions returns itself or an id so it could be changed?
80
80
  let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
81
+ let filterdItems = filterChildPlaceItems(items);
81
82
  //TODO: -> what is if a transform already exists -> backup existing style.?
82
- for (const designItem of items) {
83
+ for (const designItem of filterdItems) {
83
84
  const newTransform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
84
85
  combineTransforms(designItem.element, designItem.styles.get('transform'), newTransform);
85
86
  }
86
87
  }
87
88
  enterContainer(container, items) {
88
- for (let i of items) {
89
+ let filterdItems = filterChildPlaceItems(items);
90
+ for (let i of filterdItems) {
89
91
  if (i.lastContainerSize) {
90
92
  if (!i.styles.has('width'))
91
93
  i.setStyle('width', i.lastContainerSize.width + 'px');
@@ -98,18 +100,10 @@ export class DefaultPlacementService {
98
100
  }
99
101
  finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
100
102
  let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
101
- for (const designItem of items) {
102
- /*let movedElement = designItem.element;
103
- let oldLeft = parseFloat((<HTMLElement>movedElement).style.left);
104
- oldLeft = Number.isNaN(oldLeft) ? 0 : oldLeft;
105
- let oldTop = parseFloat((<HTMLElement>movedElement).style.top);
106
- oldTop = Number.isNaN(oldTop) ? 0 : oldTop;*/
107
- //let oldPosition = movedElement.style.position;
103
+ let filterdItems = filterChildPlaceItems(items);
104
+ for (const designItem of filterdItems) {
108
105
  designItem.element.style.transform = designItem.styles.get('transform') ?? '';
109
106
  placeDesignItem(container, designItem, track, 'position');
110
- /*designItem.setStyle('position', 'absolute');
111
- designItem.setStyle('left', (track.x + oldLeft) + "px");
112
- designItem.setStyle('top', (track.y + oldTop) + "px");*/
113
107
  }
114
108
  }
115
109
  }
package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts CHANGED
@@ -5,7 +5,7 @@ import { IPlacementService } from './IPlacementService.js';
5
5
  export declare class FlexBoxPlacementService implements IPlacementService {
6
6
  enterContainer(container: IDesignItem, items: IDesignItem[]): void;
7
7
  leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
8
- serviceForContainer(container: IDesignItem): boolean;
8
+ serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
9
9
  canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
10
10
  canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
11
11
  getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
package/dist/elements/services/placementService/FlexBoxPlacementService.js CHANGED
@@ -10,8 +10,8 @@ export class FlexBoxPlacementService {
10
10
  }
11
11
  leaveContainer(container, items) {
12
12
  }
13
- serviceForContainer(container) {
14
- if (container.element.style.display == 'flex' || container.element.style.display == 'inline-flex')
13
+ serviceForContainer(container, containerStyle) {
14
+ if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex')
15
15
  return true;
16
16
  return false;
17
17
  }
package/dist/elements/services/placementService/GridPlacementService.d.ts CHANGED
@@ -5,7 +5,7 @@ import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
5
5
  export declare class GridPlacementService implements IPlacementService {
6
6
  enterContainer(container: IDesignItem, items: IDesignItem[]): void;
7
7
  leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
8
- serviceForContainer(container: IDesignItem): boolean;
8
+ serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
9
9
  canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
10
10
  canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
11
11
  getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
package/dist/elements/services/placementService/GridPlacementService.js CHANGED
@@ -20,8 +20,8 @@ export class GridPlacementService {
20
20
  }
21
21
  }
22
22
  }
23
- serviceForContainer(container) {
24
- if (container.element.style.display == 'grid' || container.element.style.display == 'inline-grid')
23
+ serviceForContainer(container, containerStyle) {
24
+ if (containerStyle.display == 'grid' || containerStyle.display == 'inline-grid')
25
25
  return true;
26
26
  return false;
27
27
  }
package/dist/elements/services/placementService/IPlacementService.d.ts CHANGED
@@ -3,7 +3,7 @@ import { IDesignItem } from "../../item/IDesignItem";
3
3
  import { IPlacementView } from "../../widgets/designerView/IPlacementView";
4
4
  import { IPoint } from "../../../interfaces/IPoint";
5
5
  export interface IPlacementService extends IService {
6
- serviceForContainer(container: IDesignItem): any;
6
+ serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): any;
7
7
  canEnter(container: IDesignItem, items: IDesignItem[]): any;
8
8
  canLeave(container: IDesignItem, items: IDesignItem[]): any;
9
9
  enterContainer(container: IDesignItem, items: IDesignItem[]): any;
package/dist/elements/widgets/designerView/extensions/ResizeExtension.js CHANGED
@@ -74,7 +74,8 @@ export class ResizeExtension extends AbstractExtension {
74
74
  break;
75
75
  case EventNames.PointerMove:
76
76
  if (this._initialPoint) {
77
- const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent));
77
+ const containerStyle = getComputedStyle(this.extendedItem.parent.element);
78
+ const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent, containerStyle));
78
79
  const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
79
80
  let trackX = diff.x - this._initialPoint.x;
80
81
  let trackY = diff.y - this._initialPoint.y;
package/dist/elements/widgets/designerView/tools/PointerTool.js CHANGED
@@ -140,7 +140,8 @@ export class PointerTool {
140
140
  this._actionType = PointerActionType.Drag;
141
141
  }
142
142
  if (this._movedSinceStartedAction) {
143
- const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent));
143
+ const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
144
+ const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
144
145
  if (currentContainerService) {
145
146
  const dragItem = this._actionStartedDesignItem.parent;
146
147
  if (this._dragExtensionItem != dragItem) {
@@ -166,7 +167,8 @@ export class PointerTool {
166
167
  }
167
168
  else if (newContainerElement == designerCanvas.rootDesignItem.element) {
168
169
  newContainerElementDesignItem = designerCanvas.rootDesignItem;
169
- newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem));
170
+ const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
171
+ newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
170
172
  break;
171
173
  }
172
174
  else if (newContainerElement.getRootNode() !== designerCanvas.shadowRoot || newContainerElement === designerCanvas.overlayLayer || newContainerElement.parentElement === designerCanvas.overlayLayer) {
@@ -208,7 +210,8 @@ export class PointerTool {
208
210
  }
209
211
  //end check
210
212
  newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
211
- newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem));
213
+ const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
214
+ newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
212
215
  if (newContainerService) {
213
216
  if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
214
217
  break;
@@ -293,7 +296,8 @@ export class PointerTool {
293
296
  return;
294
297
  }
295
298
  if (this._movedSinceStartedAction) {
296
- let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent));
299
+ const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
300
+ let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
297
301
  const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
298
302
  if (containerService) {
299
303
  let cg = designerCanvas.rootDesignItem.openGroup("Move Elements", designerCanvas.instanceServiceContainer.selectionService.selectedElements);
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.54",
4
+ "version": "0.0.58",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "author": "",