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

package/dist/elements/helper/ElementHelper.d.ts

@@ -1,3 +1,4 @@
+import { IPoint } from "../../interfaces/IPoint";
 export declare function newElementFromString(text: any): Element;
 export declare enum ElementDisplayType {
     none = 0,
@@ -14,3 +15,4 @@ export declare function getElementsWindowOffsetWithoutSelfAndParentTransformatio
     offsetLeft: number;
     offsetTop: number;
 };
+export declare function getContentBoxContentOffsets(element: any): IPoint;

package/dist/elements/helper/ElementHelper.js

@@ -78,3 +78,18 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
     }
     return { offsetLeft: offsetLeft, offsetTop: offsetTop };
 }
+export function getContentBoxContentOffsets(element) {
+    let xOffset = parseInt(getComputedStyle(element).paddingLeft.replace('px', ''))
+        + parseInt(getComputedStyle(element).marginLeft.replace('px', ''))
+        + parseInt(getComputedStyle(element).borderLeft.replace('px', ''))
+        + parseInt(getComputedStyle(element).paddingRight.replace('px', ''))
+        + parseInt(getComputedStyle(element).marginRight.replace('px', ''))
+        + parseInt(getComputedStyle(element).borderRight.replace('px', ''));
+    let yOffset = parseInt(getComputedStyle(element).paddingTop.replace('px', ''))
+        + parseInt(getComputedStyle(element).marginTop.replace('px', ''))
+        + parseInt(getComputedStyle(element).borderTop.replace('px', ''))
+        + parseInt(getComputedStyle(element).paddingBottom.replace('px', ''))
+        + parseInt(getComputedStyle(element).marginBottom.replace('px', ''))
+        + parseInt(getComputedStyle(element).borderBottom.replace('px', ''));
+    return { x: xOffset, y: yOffset };
+}

package/dist/elements/item/DesignItem.d.ts

@@ -8,6 +8,7 @@ import { IDesignerExtension } from '../widgets/designerView/extensions/IDesigner
 import { ISize } from '../../interfaces/ISize.js';
 export declare class DesignItem implements IDesignItem {
     lastContainerSize: ISize;
+    parsedNode: any;
     node: Node;
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
@@ -64,7 +65,7 @@ export declare class DesignItem implements IDesignItem {
     set lockAtDesignTime(value: boolean);
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
     updateChildrenFromNodesChildren(): void;
-    constructor(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
+    constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
     openGroup(title: string): ChangeGroup;
     getOrCreateDesignItem(node: Node): IDesignItem;
     static GetOrCreateDesignItem(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;

package/dist/elements/item/DesignItem.js

@@ -12,6 +12,7 @@ const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
 export class DesignItem {
     lastContainerSize;
+    parsedNode;
     node;
     serviceContainer;
     instanceServiceContainer;
@@ -219,7 +220,7 @@ export class DesignItem {
         }
     }
     static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
-        let designItem = new DesignItem(node, serviceContainer, instanceServiceContainer);
+        let designItem = new DesignItem(node, node, serviceContainer, instanceServiceContainer);
         if (designItem.nodeType == NodeType.Element) {
             for (let a of designItem.element.attributes) {
                 if (a.name !== 'style') {
@@ -260,8 +261,9 @@ export class DesignItem {
                 this._childArray.push(DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer));
         }
     }
-    constructor(node, serviceContainer, instanceServiceContainer) {
+    constructor(node, parsedNode, serviceContainer, instanceServiceContainer) {
         this.node = node;
+        this.parsedNode = parsedNode;
         this.serviceContainer = serviceContainer;
         this.instanceServiceContainer = instanceServiceContainer;
         this._attributes = new Map();
@@ -279,7 +281,7 @@ export class DesignItem {
             return null;
         let designItem = DesignItem._designItemMap.get(node);
         if (!designItem) {
-            designItem = new DesignItem(node, serviceContainer, instanceServiceContainer);
+            designItem = new DesignItem(node, node, serviceContainer, instanceServiceContainer);
         }
         return designItem;
     }

package/dist/elements/item/IDesignItem.d.ts

@@ -37,6 +37,8 @@ export interface IDesignItem {
     content: string;
     innerHTML?: string;
     readonly isEmptyTextNode: boolean;
+    /** Could be a special node if another parser is used */
+    readonly parsedNode: any;
     readonly node: Node;
     readonly element: Element;
     serviceContainer: ServiceContainer;

package/dist/elements/services/htmlParserService/LitElementParserService.js

@@ -47,7 +47,7 @@ export class LitElementParserService {
                     element = document.createElement(item.rawTagName);
                 manualCreatedElement = true;
             }
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
             let hideAtDesignTime = false;
             let hideAtRunTime = false;
             let lockAtDesignTime = false;
@@ -95,11 +95,11 @@ export class LitElementParserService {
         else if (item.nodeType == 3) {
             this._parseDiv.innerHTML = item.rawText;
             let element = this._parseDiv.childNodes[0];
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
         }
         else if (item.nodeType == 8) {
             let element = document.createComment(item.rawText);
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
         }
         return designItem;
     }

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -37,7 +37,7 @@ export class NodeHtmlParserService {
                     element = document.createElement(item.rawTagName);
                 manualCreatedElement = true;
             }
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
             let hideAtDesignTime = false;
             let hideAtRunTime = false;
             let lockAtDesignTime = false;
@@ -85,11 +85,11 @@ export class NodeHtmlParserService {
         else if (item.nodeType == 3) {
             this._parseDiv.innerHTML = item.rawText;
             let element = this._parseDiv.childNodes[0];
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
         }
         else if (item.nodeType == 8) {
             let element = document.createComment(item.rawText);
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
         }
         return designItem;
     }

package/dist/elements/services/propertiesService/services/AbstractPropertiesService.js

@@ -13,7 +13,12 @@ export class AbstractPropertiesService {
         const cg = designItems[0].openGroup("properties changed");
         for (let d of designItems) {
             if (property.propertyType == PropertyType.cssValue) {
-                d.setStyle(property.name, value);
+                if (d.getStyle(property.name) != value) {
+                    d.setStyle(property.name, value);
+                }
+                else {
+                    this.clearValue(designItems, property);
+                }
                 //unkown css property names do not trigger the mutation observer of property grid, 
                 //fixed by assinging stle again to the attribute
                 d.element.setAttribute('style', d.element.getAttribute('style'));

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -454,6 +454,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             const parser = this.serviceContainer.getLastServiceWhere('htmlParserService', x => x.constructor == DefaultHtmlParserService);
             this.addDesignItems(parser.createDesignItems(children, this.serviceContainer, this.instanceServiceContainer));
         }
+        if (!this.serviceContainer.options.zoomDesignerBackground) {
+            requestAnimationFrame(() => {
+                this._resizeBackgroundGrid();
+            });
+        }
     }
     connectedCallback() {
         if (!this._firstConnect) {
@@ -468,11 +473,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.clickOverlay.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
             this.clickOverlay.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
             this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
-            if (!this.serviceContainer.options.zoomDesignerBackground) {
-                setTimeout(() => {
-                    this._resizeBackgroundGrid();
-                }, 200);
-            }
         }
     }
     _zoomFactorChanged(refreshExtensions = true) {

package/dist/elements/widgets/designerView/extensions/ResizeExtension.js

@@ -1,4 +1,5 @@
 import { EventNames } from '../../../../enums/EventNames.js';
+import { getContentBoxContentOffsets } from '../../../helper/ElementHelper.js';
 import { transformPointByInverseMatrix, getDomMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition } from "../../../helper/TransformHelper.js";
 import { AbstractExtension } from './AbstractExtension.js';
 export class ResizeExtension extends AbstractExtension {
@@ -68,7 +69,11 @@ export class ResizeExtension extends AbstractExtension {
                 let rect = this.extendedItem.element.getBoundingClientRect();
                 this.extendedItem.element.style.transform = transformBackup;
                 //#endregion Calc element's dimension
-                this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                let contentBoxOffset = { x: 0, y: 0 };
+                if (getComputedStyle(this.extendedItem.element).boxSizing == 'content-box') {
+                    contentBoxOffset = getContentBoxContentOffsets(this.extendedItem.element);
+                }
+                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 });
                 this.extendedItem.element.style.width = this._initialSizes[0].width + 'px';
                 const toArr = getComputedStyle(this.extendedItem.element).transformOrigin.split(' ').map(x => parseFloat(x.replace('px', '')));
                 const transformOrigin = new DOMPoint(toArr[0], toArr[1]);

package/dist/elements/widgets/designerView/extensions/TransformOriginExtension.js

@@ -13,7 +13,7 @@ export class TransformOriginExtension extends AbstractExtension {
     extend() {
         const computed = getComputedStyle(this.extendedItem.element);
         const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
-        const toDOMPoint = getDesignerCanvasNormalizedTransformedPoint(this.extendedItem.element, { x: parseFloat(to[0]), y: parseFloat(to[1]) }, this.designerCanvas);
+        const toDOMPoint = getDesignerCanvasNormalizedTransformedPoint(this.extendedItem.element, { x: parseFloat(to[0]) * this.designerCanvas.zoomFactor, y: parseFloat(to[1]) * this.designerCanvas.zoomFactor }, this.designerCanvas);
         this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
         this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         this._circle.style.cursor = 'pointer';
@@ -35,8 +35,8 @@ export class TransformOriginExtension extends AbstractExtension {
         const y = 1;
         const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
         const toInPercentage = [];
-        toInPercentage[0] = parseInt(to[0]) / parseInt(this.extendedItem.element.style.width); // This value remains the same regardless of scalefactor
-        toInPercentage[1] = parseInt(to[1]) / parseInt(this.extendedItem.element.style.height); // This value remains the same regardless of scalefactor
+        toInPercentage[0] = parseFloat(to[0]) / parseFloat(this.extendedItem.element.style.width); // This value remains the same regardless of scalefactor
+        toInPercentage[1] = parseFloat(to[1]) / parseFloat(this.extendedItem.element.style.height); // This value remains the same regardless of scalefactor
         const toDOMPoint = new DOMPoint(rect.x + toInPercentage[x] * rect.width, rect.y + toInPercentage[y] * rect.height);
         const normalized = this.designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {

package/dist/elements/widgets/propertyGrid/PropertyGrid.js

@@ -36,7 +36,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         });
         this._itemsObserver = new MutationObserver((m) => {
             for (const a of this._propertyGridPropertyLists) {
-                if (a.propertiesService.getRefreshMode(this._selectedItems[0]) == RefreshMode.fullOnValueChange) {
+                if (a.propertiesService?.getRefreshMode(this._selectedItems[0]) == RefreshMode.fullOnValueChange) {
                     a.createElements(this._selectedItems[0]);
                     a.designItemsChanged(this._selectedItems);
                 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.159",
+  "version": "0.0.161",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,23 +13,23 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.10.5",
-    "@types/node": "^18.11.13",
+    "@node-projects/base-custom-webcomponent": "^0.10.7",
+    "@types/node": "^18.11.14",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.4.1",
+    "@node-projects/node-html-parser-esm": "^2.5.1",
     "@papyrs/stylo": "^0.0.41",
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.14",
     "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.13.2",
+    "ace-builds": "^1.14.0",
     "codemirror": "^6.0.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
     "jest": "^29.3.1",
-    "jquery": "^3.6.1",
+    "jquery": "^3.6.2",
     "jquery.fancytree": "^2.38.2",
     "monaco-editor": "^0.34.1",
     "ts-jest": "^29.0.3",