@node-projects/web-component-designer 0.0.160 → 0.0.161

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/helper/ElementHelper.d.ts +2 -0
  2. package/dist/elements/helper/ElementHelper.js +15 -0
  3. package/dist/elements/item/DesignItem.d.ts +2 -1
  4. package/dist/elements/item/DesignItem.js +5 -3
  5. package/dist/elements/item/IDesignItem.d.ts +2 -0
  6. package/dist/elements/services/htmlParserService/LitElementParserService.js +3 -3
  7. package/dist/elements/services/htmlParserService/NodeHtmlParserService.js +3 -3
  8. package/dist/elements/services/propertiesService/services/AbstractPropertiesService.js +6 -1
  9. package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +6 -1
  10. package/dist/elements/widgets/designerView/extensions/TransformOriginExtension.js +3 -3
  11. package/dist/elements/widgets/propertyGrid/PropertyGrid.js +1 -1
  12. package/package.json +6 -6
package/dist/elements/helper/ElementHelper.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { IPoint } from "../../interfaces/IPoint";
1
2
  export declare function newElementFromString(text: any): Element;
2
3
  export declare enum ElementDisplayType {
3
4
  none = 0,
@@ -14,3 +15,4 @@ export declare function getElementsWindowOffsetWithoutSelfAndParentTransformatio
14
15
  offsetLeft: number;
15
16
  offsetTop: number;
16
17
  };
18
+ export declare function getContentBoxContentOffsets(element: any): IPoint;
package/dist/elements/helper/ElementHelper.js CHANGED
@@ -78,3 +78,18 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
78
78
  }
79
79
  return { offsetLeft: offsetLeft, offsetTop: offsetTop };
80
80
  }
81
+ export function getContentBoxContentOffsets(element) {
82
+ let xOffset = parseInt(getComputedStyle(element).paddingLeft.replace('px', ''))
83
+ + parseInt(getComputedStyle(element).marginLeft.replace('px', ''))
84
+ + parseInt(getComputedStyle(element).borderLeft.replace('px', ''))
85
+ + parseInt(getComputedStyle(element).paddingRight.replace('px', ''))
86
+ + parseInt(getComputedStyle(element).marginRight.replace('px', ''))
87
+ + parseInt(getComputedStyle(element).borderRight.replace('px', ''));
88
+ let yOffset = parseInt(getComputedStyle(element).paddingTop.replace('px', ''))
89
+ + parseInt(getComputedStyle(element).marginTop.replace('px', ''))
90
+ + parseInt(getComputedStyle(element).borderTop.replace('px', ''))
91
+ + parseInt(getComputedStyle(element).paddingBottom.replace('px', ''))
92
+ + parseInt(getComputedStyle(element).marginBottom.replace('px', ''))
93
+ + parseInt(getComputedStyle(element).borderBottom.replace('px', ''));
94
+ return { x: xOffset, y: yOffset };
95
+ }
package/dist/elements/item/DesignItem.d.ts CHANGED
@@ -8,6 +8,7 @@ import { IDesignerExtension } from '../widgets/designerView/extensions/IDesigner
8
8
  import { ISize } from '../../interfaces/ISize.js';
9
9
  export declare class DesignItem implements IDesignItem {
10
10
  lastContainerSize: ISize;
11
+ parsedNode: any;
11
12
  node: Node;
12
13
  serviceContainer: ServiceContainer;
13
14
  instanceServiceContainer: InstanceServiceContainer;
@@ -64,7 +65,7 @@ export declare class DesignItem implements IDesignItem {
64
65
  set lockAtDesignTime(value: boolean);
65
66
  static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
66
67
  updateChildrenFromNodesChildren(): void;
67
- constructor(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
68
+ constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
68
69
  openGroup(title: string): ChangeGroup;
69
70
  getOrCreateDesignItem(node: Node): IDesignItem;
70
71
  static GetOrCreateDesignItem(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
package/dist/elements/item/DesignItem.js CHANGED
@@ -12,6 +12,7 @@ const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
12
12
  const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
13
13
  export class DesignItem {
14
14
  lastContainerSize;
15
+ parsedNode;
15
16
  node;
16
17
  serviceContainer;
17
18
  instanceServiceContainer;
@@ -219,7 +220,7 @@ export class DesignItem {
219
220
  }
220
221
  }
221
222
  static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
222
- let designItem = new DesignItem(node, serviceContainer, instanceServiceContainer);
223
+ let designItem = new DesignItem(node, node, serviceContainer, instanceServiceContainer);
223
224
  if (designItem.nodeType == NodeType.Element) {
224
225
  for (let a of designItem.element.attributes) {
225
226
  if (a.name !== 'style') {
@@ -260,8 +261,9 @@ export class DesignItem {
260
261
  this._childArray.push(DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer));
261
262
  }
262
263
  }
263
- constructor(node, serviceContainer, instanceServiceContainer) {
264
+ constructor(node, parsedNode, serviceContainer, instanceServiceContainer) {
264
265
  this.node = node;
266
+ this.parsedNode = parsedNode;
265
267
  this.serviceContainer = serviceContainer;
266
268
  this.instanceServiceContainer = instanceServiceContainer;
267
269
  this._attributes = new Map();
@@ -279,7 +281,7 @@ export class DesignItem {
279
281
  return null;
280
282
  let designItem = DesignItem._designItemMap.get(node);
281
283
  if (!designItem) {
282
- designItem = new DesignItem(node, serviceContainer, instanceServiceContainer);
284
+ designItem = new DesignItem(node, node, serviceContainer, instanceServiceContainer);
283
285
  }
284
286
  return designItem;
285
287
  }
package/dist/elements/item/IDesignItem.d.ts CHANGED
@@ -37,6 +37,8 @@ export interface IDesignItem {
37
37
  content: string;
38
38
  innerHTML?: string;
39
39
  readonly isEmptyTextNode: boolean;
40
+ /** Could be a special node if another parser is used */
41
+ readonly parsedNode: any;
40
42
  readonly node: Node;
41
43
  readonly element: Element;
42
44
  serviceContainer: ServiceContainer;
package/dist/elements/services/htmlParserService/LitElementParserService.js CHANGED
@@ -47,7 +47,7 @@ export class LitElementParserService {
47
47
  element = document.createElement(item.rawTagName);
48
48
  manualCreatedElement = true;
49
49
  }
50
- designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
50
+ designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
51
51
  let hideAtDesignTime = false;
52
52
  let hideAtRunTime = false;
53
53
  let lockAtDesignTime = false;
@@ -95,11 +95,11 @@ export class LitElementParserService {
95
95
  else if (item.nodeType == 3) {
96
96
  this._parseDiv.innerHTML = item.rawText;
97
97
  let element = this._parseDiv.childNodes[0];
98
- designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
98
+ designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
99
99
  }
100
100
  else if (item.nodeType == 8) {
101
101
  let element = document.createComment(item.rawText);
102
- designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
102
+ designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
103
103
  }
104
104
  return designItem;
105
105
  }
package/dist/elements/services/htmlParserService/NodeHtmlParserService.js CHANGED
@@ -37,7 +37,7 @@ export class NodeHtmlParserService {
37
37
  element = document.createElement(item.rawTagName);
38
38
  manualCreatedElement = true;
39
39
  }
40
- designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
40
+ designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
41
41
  let hideAtDesignTime = false;
42
42
  let hideAtRunTime = false;
43
43
  let lockAtDesignTime = false;
@@ -85,11 +85,11 @@ export class NodeHtmlParserService {
85
85
  else if (item.nodeType == 3) {
86
86
  this._parseDiv.innerHTML = item.rawText;
87
87
  let element = this._parseDiv.childNodes[0];
88
- designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
88
+ designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
89
89
  }
90
90
  else if (item.nodeType == 8) {
91
91
  let element = document.createComment(item.rawText);
92
- designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
92
+ designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
93
93
  }
94
94
  return designItem;
95
95
  }
package/dist/elements/services/propertiesService/services/AbstractPropertiesService.js CHANGED
@@ -13,7 +13,12 @@ export class AbstractPropertiesService {
13
13
  const cg = designItems[0].openGroup("properties changed");
14
14
  for (let d of designItems) {
15
15
  if (property.propertyType == PropertyType.cssValue) {
16
- d.setStyle(property.name, value);
16
+ if (d.getStyle(property.name) != value) {
17
+ d.setStyle(property.name, value);
18
+ }
19
+ else {
20
+ this.clearValue(designItems, property);
21
+ }
17
22
  //unkown css property names do not trigger the mutation observer of property grid,
18
23
  //fixed by assinging stle again to the attribute
19
24
  d.element.setAttribute('style', d.element.getAttribute('style'));
package/dist/elements/widgets/designerView/extensions/ResizeExtension.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { EventNames } from '../../../../enums/EventNames.js';
2
+ import { getContentBoxContentOffsets } from '../../../helper/ElementHelper.js';
2
3
  import { transformPointByInverseMatrix, getDomMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition } from "../../../helper/TransformHelper.js";
3
4
  import { AbstractExtension } from './AbstractExtension.js';
4
5
  export class ResizeExtension extends AbstractExtension {
@@ -68,7 +69,11 @@ export class ResizeExtension extends AbstractExtension {
68
69
  let rect = this.extendedItem.element.getBoundingClientRect();
69
70
  this.extendedItem.element.style.transform = transformBackup;
70
71
  //#endregion Calc element's dimension
71
- this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
72
+ let contentBoxOffset = { x: 0, y: 0 };
73
+ if (getComputedStyle(this.extendedItem.element).boxSizing == 'content-box') {
74
+ contentBoxOffset = getContentBoxContentOffsets(this.extendedItem.element);
75
+ }
76
+ this._initialSizes.push({ width: (rect.width - contentBoxOffset.x * this.designerCanvas.scaleFactor) / this.designerCanvas.scaleFactor, height: (rect.height - contentBoxOffset.y * this.designerCanvas.scaleFactor) / this.designerCanvas.scaleFactor });
72
77
  this.extendedItem.element.style.width = this._initialSizes[0].width + 'px';
73
78
  const toArr = getComputedStyle(this.extendedItem.element).transformOrigin.split(' ').map(x => parseFloat(x.replace('px', '')));
74
79
  const transformOrigin = new DOMPoint(toArr[0], toArr[1]);
package/dist/elements/widgets/designerView/extensions/TransformOriginExtension.js CHANGED
@@ -13,7 +13,7 @@ export class TransformOriginExtension extends AbstractExtension {
13
13
  extend() {
14
14
  const computed = getComputedStyle(this.extendedItem.element);
15
15
  const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
16
- const toDOMPoint = getDesignerCanvasNormalizedTransformedPoint(this.extendedItem.element, { x: parseFloat(to[0]), y: parseFloat(to[1]) }, this.designerCanvas);
16
+ const toDOMPoint = getDesignerCanvasNormalizedTransformedPoint(this.extendedItem.element, { x: parseFloat(to[0]) * this.designerCanvas.zoomFactor, y: parseFloat(to[1]) * this.designerCanvas.zoomFactor }, this.designerCanvas);
17
17
  this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
18
18
  this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
19
19
  this._circle.style.cursor = 'pointer';
@@ -35,8 +35,8 @@ export class TransformOriginExtension extends AbstractExtension {
35
35
  const y = 1;
36
36
  const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
37
37
  const toInPercentage = [];
38
- toInPercentage[0] = parseInt(to[0]) / parseInt(this.extendedItem.element.style.width); // This value remains the same regardless of scalefactor
39
- toInPercentage[1] = parseInt(to[1]) / parseInt(this.extendedItem.element.style.height); // This value remains the same regardless of scalefactor
38
+ toInPercentage[0] = parseFloat(to[0]) / parseFloat(this.extendedItem.element.style.width); // This value remains the same regardless of scalefactor
39
+ toInPercentage[1] = parseFloat(to[1]) / parseFloat(this.extendedItem.element.style.height); // This value remains the same regardless of scalefactor
40
40
  const toDOMPoint = new DOMPoint(rect.x + toInPercentage[x] * rect.width, rect.y + toInPercentage[y] * rect.height);
41
41
  const normalized = this.designerCanvas.getNormalizedEventCoordinates(event);
42
42
  switch (event.type) {
package/dist/elements/widgets/propertyGrid/PropertyGrid.js CHANGED
@@ -36,7 +36,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
36
36
  });
37
37
  this._itemsObserver = new MutationObserver((m) => {
38
38
  for (const a of this._propertyGridPropertyLists) {
39
- if (a.propertiesService.getRefreshMode(this._selectedItems[0]) == RefreshMode.fullOnValueChange) {
39
+ if (a.propertiesService?.getRefreshMode(this._selectedItems[0]) == RefreshMode.fullOnValueChange) {
40
40
  a.createElements(this._selectedItems[0]);
41
41
  a.designItemsChanged(this._selectedItems);
42
42
  }
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.160",
4
+ "version": "0.0.161",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "author": "",
@@ -13,23 +13,23 @@
13
13
  "prepublishOnly": "npm run build"
14
14
  },
15
15
  "dependencies": {
16
- "@node-projects/base-custom-webcomponent": "^0.10.5",
17
- "@types/node": "^18.11.13",
16
+ "@node-projects/base-custom-webcomponent": "^0.10.7",
17
+ "@types/node": "^18.11.14",
18
18
  "construct-style-sheets-polyfill": "^3.1.0"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@node-projects/lean-he-esm": "^3.3.0",
22
- "@node-projects/node-html-parser-esm": "^2.4.1",
22
+ "@node-projects/node-html-parser-esm": "^2.5.1",
23
23
  "@papyrs/stylo": "^0.0.41",
24
24
  "@types/codemirror": "^5.60.5",
25
25
  "@types/jquery": "^3.5.14",
26
26
  "@types/jquery.fancytree": "0.0.7",
27
- "ace-builds": "^1.13.2",
27
+ "ace-builds": "^1.14.0",
28
28
  "codemirror": "^6.0.1",
29
29
  "esprima-next": "^5.8.4",
30
30
  "html2canvas": "*",
31
31
  "jest": "^29.3.1",
32
- "jquery": "^3.6.1",
32
+ "jquery": "^3.6.2",
33
33
  "jquery.fancytree": "^2.38.2",
34
34
  "monaco-editor": "^0.34.1",
35
35
  "ts-jest": "^29.0.3",