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

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

@@ -70,6 +70,12 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             offsetTop += bbox.y;
             element = element.ownerSVGElement;
         }
+        else if (element instanceof HTMLBodyElement) {
+            element = element.parentElement;
+        }
+        else if (element instanceof HTMLHtmlElement) {
+            element = element.parentElement;
+        }
         else {
             offsetLeft += element.offsetLeft;
             offsetTop += element.offsetTop;
@@ -78,3 +84,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/helper/GridHelper.d.ts

@@ -12,5 +12,7 @@ export declare function CalculateGridInformation(designItem: IDesignItem): {
         y: number;
         width: number;
         height: number;
+        column?: number;
+        row?: number;
     }[];
 };

package/dist/elements/helper/GridHelper.js

@@ -85,13 +85,13 @@ export function CalculateGridInformation(designItem) {
         retVal.cells.push(cellList);
         for (let yIdx = 0; yIdx < columns.length; yIdx++) {
             const c = columns[yIdx];
-            if (x > 0 && xGap) {
-                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY });
+            if (x > 0) {
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY, column: yIdx, row: xIdx });
                 x += xGap;
             }
             const currX = Number.parseFloat(c.replace('px', ''));
-            if (y > 0 && yGap) {
-                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap });
+            if (y > 0) {
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap, column: yIdx, row: xIdx });
             }
             let name = null;
             if (areas && areas[cl]) {

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/AbstractClassElementParserService.d.ts

@@ -0,0 +1,12 @@
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { ServiceContainer } from '../ServiceContainer.js';
+import { IHtmlParserService } from './IHtmlParserService.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+export declare abstract class AbstractClassElementParserService implements IHtmlParserService {
+    private _parserUrl;
+    private _esprimaUrl;
+    constructor(parserUrl?: string, esprimaUrl?: string);
+    parse(module: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    private _parseDiv;
+    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+}

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

@@ -0,0 +1,120 @@
+import { DesignItem } from '../../item/DesignItem.js';
+import { CssAttributeParser } from '../../helper/CssAttributeParser.js';
+import { newElementFromString } from '../../helper/ElementHelper.js';
+import * as esprima from "esprima-next/dist/esm/esprima";
+function* getChildNodes(node) {
+    switch (node.type) {
+        case esprima.Syntax.Program:
+            yield node.body;
+            break;
+        case esprima.Syntax.ClassDeclaration:
+            yield node.body;
+            break;
+        case esprima.Syntax.MethodDefinition:
+            yield node.value;
+            break;
+    }
+}
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class AbstractClassElementParserService {
+    _parserUrl;
+    _esprimaUrl;
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js', esprimaUrl = '../../../../../esprima-next/dist/esm/esprima.js') {
+        this._parserUrl = parserUrl;
+        this._esprimaUrl = esprimaUrl;
+    }
+    async parse(module, serviceContainer, instanceServiceContainer) {
+        let esprima = await import(this._esprimaUrl);
+        const parsedModule = esprima.parseModule(module);
+        const classDecl = parsedModule.body.find(x => x.type == esprima.Syntax.ClassDeclaration);
+        const renderMethod = classDecl.body.body.find(x => x.type == esprima.Syntax.MethodDefinition && x.key.name == 'render');
+        const renderMethodStatement = renderMethod.value.body.body[0];
+        const taggedTemplate = renderMethodStatement.argument;
+        const templateLiteral = taggedTemplate.quasi;
+        const html = templateLiteral.quasis.map(x => x.value.raw).join();
+        //@ts-ignore
+        let parser = await import(this._parserUrl);
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _parseDiv = document.createElement("div");
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            let manualCreatedElement = false;
+            if (!namespace)
+                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
+            if (!element) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+                manualCreatedElement = true;
+            }
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            let hideAtDesignTime = false;
+            let hideAtRunTime = false;
+            let lockAtDesignTime = false;
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                if (a !== 'style') {
+                    designItem._withoutUndoSetAttribute(a, attr[a]);
+                    if (manualCreatedElement) {
+                        element.setAttribute(a, attr[a]);
+                    }
+                    if (a === 'node-projects-hide-at-design-time')
+                        hideAtDesignTime = true;
+                    else if (a === 'node-projects-hide-at-run-time')
+                        hideAtRunTime = true;
+                    else if (a === 'node-projects-lock-at-design-time')
+                        lockAtDesignTime = true;
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    designItem._withoutUndoSetStyle(s.name, s.value);
+                    if (manualCreatedElement) {
+                        element.style[s.name] = s.value;
+                    }
+                }
+            }
+            if (!lockAtDesignTime && (element instanceof HTMLElement || element instanceof SVGElement)) {
+                requestAnimationFrame(() => element.style.pointerEvents = 'auto');
+            }
+            designItem.hideAtDesignTime = hideAtDesignTime;
+            designItem.hideAtRunTime = hideAtRunTime;
+            designItem.lockAtDesignTime = lockAtDesignTime;
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
+                designItem._insertChildInternal(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

package/dist/elements/services/htmlParserService/LitElementParserService copy.d.ts

@@ -0,0 +1,12 @@
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { ServiceContainer } from '../ServiceContainer.js';
+import { IHtmlParserService } from './IHtmlParserService.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+export declare class LitElementParserService implements IHtmlParserService {
+    private _parserUrl;
+    private _esprimaUrl;
+    constructor(parserUrl?: string, esprimaUrl?: string);
+    parse(module: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    private _parseDiv;
+    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+}

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

@@ -0,0 +1,120 @@
+import { DesignItem } from '../../item/DesignItem.js';
+import { CssAttributeParser } from '../../helper/CssAttributeParser.js';
+import { newElementFromString } from '../../helper/ElementHelper.js';
+import * as esprima from "esprima-next/dist/esm/esprima";
+function* getChildNodes(node) {
+    switch (node.type) {
+        case esprima.Syntax.Program:
+            yield node.body;
+            break;
+        case esprima.Syntax.ClassDeclaration:
+            yield node.body;
+            break;
+        case esprima.Syntax.MethodDefinition:
+            yield node.value;
+            break;
+    }
+}
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class LitElementParserService {
+    _parserUrl;
+    _esprimaUrl;
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js', esprimaUrl = '../../../../../esprima-next/dist/esm/esprima.js') {
+        this._parserUrl = parserUrl;
+        this._esprimaUrl = esprimaUrl;
+    }
+    async parse(module, serviceContainer, instanceServiceContainer) {
+        let esprima = await import(this._esprimaUrl);
+        const parsedModule = esprima.parseModule(module);
+        const classDecl = parsedModule.body.find(x => x.type == esprima.Syntax.ClassDeclaration);
+        const renderMethod = classDecl.body.body.find(x => x.type == esprima.Syntax.MethodDefinition && x.key.name == 'render');
+        const renderMethodStatement = renderMethod.value.body.body[0];
+        const taggedTemplate = renderMethodStatement.argument;
+        const templateLiteral = taggedTemplate.quasi;
+        const html = templateLiteral.quasis.map(x => x.value.raw).join();
+        //@ts-ignore
+        let parser = await import(this._parserUrl);
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _parseDiv = document.createElement("div");
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            let manualCreatedElement = false;
+            if (!namespace)
+                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
+            if (!element) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+                manualCreatedElement = true;
+            }
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            let hideAtDesignTime = false;
+            let hideAtRunTime = false;
+            let lockAtDesignTime = false;
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                if (a !== 'style') {
+                    designItem._withoutUndoSetAttribute(a, attr[a]);
+                    if (manualCreatedElement) {
+                        element.setAttribute(a, attr[a]);
+                    }
+                    if (a === 'node-projects-hide-at-design-time')
+                        hideAtDesignTime = true;
+                    else if (a === 'node-projects-hide-at-run-time')
+                        hideAtRunTime = true;
+                    else if (a === 'node-projects-lock-at-design-time')
+                        lockAtDesignTime = true;
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    designItem._withoutUndoSetStyle(s.name, s.value);
+                    if (manualCreatedElement) {
+                        element.style[s.name] = s.value;
+                    }
+                }
+            }
+            if (!lockAtDesignTime && (element instanceof HTMLElement || element instanceof SVGElement)) {
+                requestAnimationFrame(() => element.style.pointerEvents = 'auto');
+            }
+            designItem.hideAtDesignTime = hideAtDesignTime;
+            designItem.hideAtRunTime = hideAtRunTime;
+            designItem.lockAtDesignTime = lockAtDesignTime;
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
+                designItem._insertChildInternal(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

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/IDesignerCanvas.d.ts

@@ -21,7 +21,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly extensionManager: IExtensionManager;
     readonly clickOverlay: HTMLDivElement;
     readonly snapLines: Snaplines;
-    readonly shadowRoot: ShadowRoot;
+    readonly shadowRoot: ShadowRoot | null;
     readonly alignOnGrid: boolean;
     readonly alignOnSnap: boolean;
     readonly onContentChanged: TypedEvent<void>;

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

@@ -150,15 +150,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }  
   `;
     static template = html `
-    <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
-      <div style="width: 100%;height: 100%;">
-        <div id="node-projects-designer-canvas-outercanvas2" style="width:100%;height:100%;position:relative;">
+    <div style="display: flex;flex-direction: column;width: 100%;height: 100%; margin: 0 !important; padding: 0 !important; border: none !important;">
+      <div style="width: 100%;height: 100%; margin: 0 !important; padding: 0 !important; border: none !important;">
+        <div id="node-projects-designer-canvas-outercanvas2" style="width:100%;height:100%;position:relative; margin: 0 !important; padding: 0 !important; border: none !important;">
           <div id="node-projects-designer-canvas-canvasContainer"
-          style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;user-select: none;">
-          <div id="node-projects-designer-canvas-canvas" part="canvas"></div>
+          style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;user-select: none; margin: 0 !important; padding: 0 !important; border: none !important;">
+          <div id="node-projects-designer-canvas-canvas" part="canvas" style=" margin: 0 !important; padding: 0 !important; border: none !important;"></div>
         </div>
       </div>
-      <div id="node-projects-designer-canvas-clickOverlay" tabindex="0" style="pointer-events: auto;"></div>
+      <div id="node-projects-designer-canvas-clickOverlay" tabindex="0" style="pointer-events: auto;  margin: 0 !important; padding: 0 !important; border: none !important;"></div>
       </div>
     </div>`;
     extensionManager;
@@ -437,6 +437,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.extensionManager = new ExtensionManager(this);
         this.overlayLayer = new OverlayLayerView(serviceContainer);
         this.overlayLayer.style.pointerEvents = 'none';
+        this.overlayLayer.style.setProperty('margin', '0', 'important');
+        this.overlayLayer.style.setProperty('padding', '0', 'important');
+        this.overlayLayer.style.setProperty('border', 'none', 'important');
         this.clickOverlay.appendChild(this.overlayLayer);
         this.snapLines = new Snaplines(this.overlayLayer);
         this.snapLines.initialize(this.rootDesignItem);

package/dist/elements/widgets/designerView/extensions/GridExtension.d.ts

@@ -3,8 +3,26 @@ import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { AbstractExtension } from './AbstractExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare class GridExtension extends AbstractExtension {
+    private _initialPoint;
+    private _initialSizes;
+    private _rects;
+    private _gaps;
+    private _resizeCircles;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;
     dispose(): void;
+    _drawResizeCircles(gap: any, oldCircle?: SVGCircleElement): SVGCircleElement;
+    _pointerActionTypeResize(event: PointerEvent, circle: SVGCircleElement, gapColumn: any, gapRow: any): void;
+    _getInitialSizes(style: CSSStyleDeclaration): {
+        x: any[];
+        y: any[];
+        xUnit: any[];
+        yUnit: any[];
+    };
+    _parseInitValue(stringValue: string): {
+        value: number;
+        unit: string;
+    };
+    _calculateNewSize(iSizes: any, iUnits: any, diff: any, gapIndex: any, itemWidth?: number, itemHeight?: number): string;
 }

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

@@ -1,30 +1,233 @@
+import { EventNames } from "../../../../enums/EventNames";
 import { CalculateGridInformation } from "../../../helper/GridHelper.js";
 import { AbstractExtension } from './AbstractExtension.js';
 import { OverlayLayer } from "./OverlayLayer.js";
 export class GridExtension extends AbstractExtension {
+    _initialPoint;
+    _initialSizes;
+    _rects;
+    _gaps;
+    _resizeCircles;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        const gridInformation = CalculateGridInformation(this.extendedItem);
-        for (let gap of gridInformation.gaps) {
-            this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', null, OverlayLayer.Background);
-        }
-        for (let cellRow of gridInformation.cells) {
-            for (let cell of cellRow) {
-                this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', null, OverlayLayer.Background);
+        var gridInformation = CalculateGridInformation(this.extendedItem);
+        this._rects = new Array(gridInformation.cells.length);
+        gridInformation.cells.forEach((cellRow, i) => {
+            this._rects[i] = new Array(cellRow.length);
+        });
+        this._gaps = new Array(gridInformation.gaps.length);
+        this._resizeCircles = new Array(gridInformation.gaps.length);
+        this.refresh();
+    }
+    refresh() {
+        var gridInformation = CalculateGridInformation(this.extendedItem);
+        gridInformation.gaps.forEach((gap, i) => {
+            this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Foregorund);
+            this._resizeCircles[i] = this._drawResizeCircles(gap, this._resizeCircles[i]);
+        });
+        gridInformation.cells.forEach((cellRow, i) => {
+            cellRow.forEach((cell, j) => {
+                this._rects[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._rects[i][j], OverlayLayer.Background);
                 if (cell.name) {
                     const text = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', null, OverlayLayer.Background);
                     text.setAttribute("dominant-baseline", "hanging");
                 }
-            }
-        }
-    }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
+            });
+        });
     }
     dispose() {
         this._removeAllOverlays();
     }
+    _drawResizeCircles(gap, oldCircle) {
+        var resizeCircle = this._drawCircle((gap.x + (gap.width / 2)), (gap.y + (gap.height / 2)), 1.5, 'svg-grid-reziser', oldCircle, OverlayLayer.Foregorund);
+        resizeCircle.style.pointerEvents = "all";
+        resizeCircle.style.cursor = gap.width < gap.height ? "ew-resize" : "ns-resize";
+        if (!oldCircle) {
+            resizeCircle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, resizeCircle, gap.column, gap.row));
+            resizeCircle.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, resizeCircle, gap.column, gap.row));
+            resizeCircle.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, resizeCircle, gap.column, gap.row));
+        }
+        return resizeCircle;
+    }
+    _pointerActionTypeResize(event, circle, gapColumn, gapRow) {
+        event.stopPropagation();
+        switch (event.type) {
+            case EventNames.PointerDown:
+                circle.setPointerCapture(event.pointerId);
+                this._initialPoint = { x: event.clientX, y: event.clientY };
+                this._initialSizes = this._getInitialSizes(this.extendedItem.element.style);
+                break;
+            case EventNames.PointerMove:
+                if (this._initialPoint) {
+                    var elementStyle = this.extendedItem.element.style;
+                    this.extendedItem.element.getBoundingClientRect;
+                    switch (circle.style.cursor) {
+                        case "ew-resize":
+                            elementStyle.gridTemplateColumns = this._calculateNewSize(this._initialSizes.x, this._initialSizes.xUnit, (event.clientX - this._initialPoint.x) / this.designerCanvas.zoomFactor, gapColumn, parseFloat(elementStyle.width.substring(0, elementStyle.width.length - 2)), null);
+                            break;
+                        case "ns-resize":
+                            elementStyle.gridTemplateRows = this._calculateNewSize(this._initialSizes.y, this._initialSizes.yUnit, (event.clientY - this._initialPoint.y) / this.designerCanvas.zoomFactor, gapRow, null, parseFloat(elementStyle.height.substring(0, elementStyle.height.length - 2)));
+                            break;
+                    }
+                    this.refresh();
+                }
+                break;
+            case EventNames.PointerUp:
+                circle.releasePointerCapture(event.pointerId);
+                this._initialPoint = null;
+                this._initialSizes = null;
+                if (this.extendedItem.getStyle("grid-template-columns") != this.extendedItem.element.style.gridTemplateColumns)
+                    this.extendedItem.setStyle("grid-template-columns", this.extendedItem.element.style.gridTemplateColumns);
+                if (this.extendedItem.getStyle("grid-template-rows") != this.extendedItem.element.style.gridTemplateRows)
+                    this.extendedItem.setStyle("grid-template-rows", this.extendedItem.element.style.gridTemplateRows);
+                break;
+        }
+    }
+    _getInitialSizes(style) {
+        var retX = [];
+        var retY = [];
+        var retXUnit = [];
+        var retYUnit = [];
+        var tmpX = style.gridTemplateColumns.split(' ');
+        tmpX.forEach(x => {
+            var r = this._parseInitValue(x);
+            retX.push(r.value);
+            retXUnit.push(r.unit);
+        });
+        var tmpY = style.gridTemplateRows.split(' ');
+        tmpY.forEach(y => {
+            var r = this._parseInitValue(y);
+            retY.push(r.value);
+            retYUnit.push(r.unit);
+        });
+        return { x: retX, y: retY, xUnit: retXUnit, yUnit: retYUnit };
+    }
+    _parseInitValue(stringValue) {
+        var i = stringValue.length;
+        while (isNaN(parseInt(stringValue.substring(i - 1, stringValue.length))))
+            i--;
+        return { value: parseFloat(stringValue.substring(0, i)), unit: stringValue.substring(i, stringValue.length) };
+    }
+    _calculateNewSize(iSizes, iUnits, diff, gapIndex, itemWidth, itemHeight) {
+        var newSizes = [];
+        var newUnits = [];
+        var unitFactors = [];
+        var edited = [];
+        for (var i = 0; i < iSizes.length; i++) {
+            if (i + 1 == gapIndex || i == gapIndex) {
+                if (iUnits[i] == "%") {
+                    var percentDiff = itemWidth ? (1 - ((itemWidth - diff) / itemWidth)) * 100 : itemHeight ? (1 - ((itemHeight - diff) / itemHeight)) * 100 : null;
+                    newSizes.push(i + 1 == gapIndex ? iSizes[i] + percentDiff : i == gapIndex ? iSizes[i] - percentDiff : null);
+                    unitFactors.push(null);
+                    edited.push(true);
+                }
+                else if (iUnits[i] == "fr") {
+                    newSizes.push(iSizes[i]);
+                    unitFactors.push(null);
+                    edited.push(true);
+                }
+                else {
+                    var unitFactor;
+                    switch (iUnits[i]) {
+                        case "mm":
+                            unitFactor = 1 / 3.78;
+                            break;
+                        case "cm":
+                            unitFactor = 1 / 37.8;
+                            break;
+                        case "in":
+                            unitFactor = 1 / 96;
+                            break;
+                        case "px":
+                            unitFactor = 1;
+                            break;
+                        case "pt":
+                            unitFactor = 3;
+                            break;
+                        case "pc":
+                            unitFactor = 16;
+                            break;
+                    }
+                    newSizes.push(i + 1 == gapIndex ? iSizes[i] + diff * unitFactor : i == gapIndex ? iSizes[i] - diff * unitFactor : null);
+                    unitFactors.push(unitFactor);
+                    edited.push(true);
+                }
+            }
+            else {
+                newSizes.push(iSizes[i]);
+                unitFactors.push(null);
+                edited.push(false);
+            }
+            newUnits.push(iUnits[i]);
+        }
+        var retVal = "";
+        var minPixelSize = 10;
+        var minPercentSize = itemHeight ? minPixelSize / itemHeight * 100 : itemWidth ? minPixelSize / itemWidth * 100 : null;
+        for (var i = 0; i < newSizes.length; i++) {
+            if (newUnits[i] == "%" && newSizes[i] < minPercentSize) {
+                if (edited[i + 1] && newUnits[i + 1] == "%") {
+                    newSizes[i + 1] = iSizes[i] + iSizes[i + 1] - minPercentSize;
+                    newSizes[i] = minPercentSize;
+                    break;
+                }
+                else if (edited[i - 1] && newUnits[i - 1] == "%") {
+                    newSizes[i - 1] = iSizes[i] + iSizes[i - 1] - minPercentSize;
+                    newSizes[i] = minPercentSize;
+                    break;
+                }
+            }
+            else if (newUnits[i] == "fr") {
+                var editedIndex;
+                if (edited[i + 1])
+                    editedIndex = i + 1;
+                else if (edited[i - 1])
+                    editedIndex = i - 1;
+                else
+                    continue;
+                if (newUnits[editedIndex] == "px") {
+                    if (newSizes[editedIndex] < minPixelSize)
+                        newSizes[editedIndex] = minPixelSize;
+                    var totalSize = itemWidth ? itemWidth : itemHeight ? itemHeight : null;
+                    var totalSizeExceptFr = 0;
+                    newSizes.forEach(newSize => totalSizeExceptFr += newSize);
+                    var totalSizeExceptEdited = 0;
+                    newSizes.forEach((newSize, k) => { if (!edited[k])
+                        totalSizeExceptEdited += newSize; });
+                    if (totalSize - totalSizeExceptFr < minPixelSize)
+                        newSizes[editedIndex] = totalSize - totalSizeExceptEdited - minPixelSize;
+                }
+                else if (newUnits[editedIndex] == "%") {
+                    if (newSizes[editedIndex] < minPercentSize)
+                        newSizes[editedIndex] = minPercentSize;
+                    var totalSize = 100;
+                    var totalSizeExceptFr = 0;
+                    newSizes.forEach(newSize => totalSizeExceptFr += newSize);
+                    var totalSizeExceptEdited = 0;
+                    newSizes.forEach((newSize, k) => { if (!edited[k])
+                        totalSizeExceptEdited += newSize; });
+                    if (totalSize - totalSizeExceptFr < minPercentSize)
+                        newSizes[editedIndex] = totalSize - totalSizeExceptEdited - minPercentSize;
+                }
+            }
+            else {
+                if (newSizes[i] / unitFactors[i] < minPixelSize) {
+                    if (edited[i + 1]) {
+                        newSizes[i + 1] = iSizes[i] + iSizes[i + 1] - minPixelSize * unitFactors[i + 1];
+                        newSizes[i] = minPixelSize * unitFactors[i];
+                        break;
+                    }
+                    else if (edited[i - 1]) {
+                        newSizes[i - 1] = iSizes[i] + iSizes[i - 1] - minPixelSize * unitFactors[i - 1];
+                        newSizes[i] = minPixelSize * unitFactors[i];
+                        break;
+                    }
+                }
+            }
+        }
+        for (var i = 0; i < newSizes.length; i++)
+            retVal += newSizes[i] + newUnits[i] + " ";
+        return retVal;
+    }
 }

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

@@ -15,5 +15,6 @@ export class GridExtensionProvider {
     .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
     .svg-grid-area { font-size: 8px; }
     .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
+    .svg-grid-reziser { background: white; border: 1px solid black; }
   `;
 }

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.160",
+  "version": "0.0.163",
   "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",