@node-projects/web-component-designer 0.0.164 → 0.0.166

package/dist/elements/helper/contextMenu/ContextMenu.js

@@ -10,6 +10,7 @@ export class ContextMenu {
 		transform-origin: top left;
 		padding: 0;
 		z-index: 2147483647;
+		color: black;
 	  }
 	  
 	  .context_menu.display {

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

@@ -6,6 +6,7 @@ import { NodeType } from './NodeType.js';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
 import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension.js';
 import { ISize } from '../../interfaces/ISize.js';
+import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
 export declare class DesignItem implements IDesignItem {
     lastContainerSize: ISize;
     parsedNode: any;
@@ -13,6 +14,7 @@ export declare class DesignItem implements IDesignItem {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
+    shouldAppliedDesignerExtensions: Map<ExtensionType, IDesignerExtensionProvider[]>;
     clone(): Promise<IDesignItem>;
     replaceNode(newNode: Node): void;
     get nodeType(): NodeType;

package/dist/elements/item/DesignItem.js

@@ -17,6 +17,7 @@ export class DesignItem {
     serviceContainer;
     instanceServiceContainer;
     appliedDesignerExtensions = new Map();
+    shouldAppliedDesignerExtensions = new Map();
     async clone() {
         const html = DomConverter.ConvertToString([this], null, false);
         const parsed = await this.serviceContainer.htmlParserService.parse(html, this.serviceContainer, this.instanceServiceContainer);

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

@@ -5,6 +5,7 @@ import { NodeType } from './NodeType.js';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
 import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension.js';
 import { ISize } from "../../interfaces/ISize.js";
+import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
 export interface IDesignItem {
     lastContainerSize: ISize;
     replaceNode(newNode: Node): any;
@@ -44,6 +45,7 @@ export interface IDesignItem {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
+    shouldAppliedDesignerExtensions: Map<ExtensionType, IDesignerExtensionProvider[]>;
     getOrCreateDesignItem(node: Node): any;
     openGroup(title: string): ChangeGroup;
     styles(): Iterable<[name: string, value: string]>;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -16,7 +16,7 @@ import { TransformOriginExtensionProvider } from '../widgets/designerView/extens
 import { CanvasExtensionProvider } from '../widgets/designerView/extensions/CanvasExtensionProvider.js';
 import { PositionExtensionProvider } from '../widgets/designerView/extensions/PositionExtensionProvider.js';
 import { PathExtensionProvider } from '../widgets/designerView/extensions/svg/PathExtensionProvider.js';
-import { MouseOverExtensionProvider } from '../widgets/designerView/extensions/MouseOverExtensionProvider.js';
+import { HighlightElementExtensionProvider } from '../widgets/designerView/extensions/HighlightElementExtensionProvider.js';
 import { NamedTools } from '../widgets/designerView/tools/NamedTools.js';
 import { PointerTool } from '../widgets/designerView/tools/PointerTool.js';
 import { DrawPathTool } from '../widgets/designerView/tools/DrawPathTool.js';
@@ -34,7 +34,7 @@ import { PickColorTool } from '../widgets/designerView/tools/PickColorTool.js';
 import { TextTool } from '../widgets/designerView/tools/TextTool.js';
 import { GrayOutExtensionProvider } from '../widgets/designerView/extensions/GrayOutExtensionProvider.js';
 import { AltToEnterContainerExtensionProvider } from '../widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js';
-import { InvisibleDivExtensionProvider } from '../widgets/designerView/extensions/InvisibleDivExtensionProvider.js';
+import { InvisibleElementExtensionProvider } from '../widgets/designerView/extensions/InvisibleElementExtensionProvider.js';
 import { ItemsBelowContextMenu } from '../widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js';
 import { GridPlacementService } from './placementService/GridPlacementService.js';
 import { ElementAtPointService } from './elementAtPointService/ElementAtPointService.js';
@@ -47,7 +47,6 @@ import { DefaultModelCommandService } from './modelCommandService/DefaultModelCo
 import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider.js';
 import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons.js';
 import { DemoProviderService } from './demoProviderService/DemoProviderService.js';
-//import { CursorLinePointerExtensionProvider } from '../widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js';
 import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
 import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
 import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
@@ -72,6 +71,7 @@ import { PropertyGroupsService } from './propertiesService/PropertyGroupsService
 import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js';
 import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/FlexboxExtensionProvider.js';
 import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js';
+import { InvisibleElementExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -96,7 +96,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("demoProviderService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         // new ResizeExtensionProvider(false),
-        new InvisibleDivExtensionProvider(),
+        new InvisibleElementExtensionProvider(),
         // new ElementDragTitleExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
@@ -121,7 +121,7 @@ export function createDefaultServiceContainer() {
         new FlexboxExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [
-        new MouseOverExtensionProvider()
+        new HighlightElementExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Placement, [
         new PlacementExtensionProvider()
@@ -154,7 +154,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );
-    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons());
     serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(5), new TextToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),

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

@@ -29,16 +29,28 @@ export class AbstractPropertiesService {
                     attributeName = PropertiesHelper.camelToDashCase(property.name);
                 if (property.type === 'object') {
                     const json = JSON.stringify(value);
-                    d.setAttribute(attributeName, json);
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.setAttribute(attributeName, json);
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = value;
                 }
                 else if (property.type == 'boolean' && !value) {
-                    d.removeAttribute(attributeName);
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.removeAttribute(attributeName);
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = false;
                 }
                 else if (property.type == 'boolean' && value) {
-                    d.setAttribute(attributeName, "");
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.setAttribute(attributeName, "");
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = true;
                 }
                 else {
-                    d.setAttribute(attributeName, value);
+                    if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.setAttribute(attributeName, value);
+                    if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
+                        d.element[property.name] = value;
                 }
             }
             this._notifyChangedProperty(d, property, value);

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

@@ -10,7 +10,7 @@ export class CssPropertiesService extends CommonPropertiesService {
         {
             name: "display",
             type: "list",
-            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            values: ["block", "inline", "inline-block", "flex", "inline-flex", "contents", "grid", "inline-grid", "inherit", "initial", "none"],
             service: this,
             propertyType: PropertyType.cssValue
         },

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

@@ -520,6 +520,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.addDesignItems(designItems);
         this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
         this.instanceServiceContainer.selectionService._withoutUndoSetSelectedElements(null);
+        setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 50);
     }
     addDesignItems(designItems) {
         if (designItems) {

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

@@ -17,4 +17,6 @@ export declare class ExtensionManager implements IExtensionManager {
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, ignoredExtension?: any): void;
     refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: any): void;
     refreshAllAppliedExtentions(): void;
+    reapplyAllAppliedExtentions(): void;
+    private static getAllChildElements;
 }

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

@@ -50,6 +50,11 @@ export class ExtensionManager {
             let extensions = [];
             if (extProv) {
                 for (let e of extProv) {
+                    let shouldAppE = designItem.shouldAppliedDesignerExtensions.get(extensionType);
+                    if (!shouldAppE)
+                        shouldAppE = [];
+                    shouldAppE.push(e);
+                    designItem.shouldAppliedDesignerExtensions.set(extensionType, shouldAppE);
                     if (e.shouldExtend(this, this.designerCanvas, designItem)) {
                         let appE = designItem.appliedDesignerExtensions.get(extensionType);
                         if (!appE)
@@ -83,6 +88,11 @@ export class ExtensionManager {
             if (extProv) {
                 for (let e of extProv) {
                     for (let i of designItems) {
+                        let shouldAppE = i.shouldAppliedDesignerExtensions.get(extensionType);
+                        if (!shouldAppE)
+                            shouldAppE = [];
+                        shouldAppE.push(e);
+                        i.shouldAppliedDesignerExtensions.set(extensionType, shouldAppE);
                         if (i.nodeType == NodeType.Element && e.shouldExtend(this, this.designerCanvas, i)) {
                             let appE = i.appliedDesignerExtensions.get(extensionType);
                             if (!appE)
@@ -111,6 +121,7 @@ export class ExtensionManager {
     removeExtension(designItem, extensionType) {
         if (designItem) {
             if (extensionType) {
+                designItem.shouldAppliedDesignerExtensions.delete(extensionType);
                 let exts = designItem.appliedDesignerExtensions.get(extensionType);
                 if (exts) {
                     for (let e of exts) {
@@ -127,6 +138,7 @@ export class ExtensionManager {
                 }
             }
             else {
+                designItem.shouldAppliedDesignerExtensions.clear();
                 for (let appE of designItem.appliedDesignerExtensions) {
                     for (let e of appE[1]) {
                         try {
@@ -146,6 +158,7 @@ export class ExtensionManager {
         if (designItems) {
             if (extensionType) {
                 for (let i of designItems) {
+                    i.shouldAppliedDesignerExtensions.delete(extensionType);
                     let exts = i.appliedDesignerExtensions.get(extensionType);
                     if (exts) {
                         for (let e of exts) {
@@ -164,6 +177,7 @@ export class ExtensionManager {
             }
             else {
                 for (let i of designItems) {
+                    i.shouldAppliedDesignerExtensions.clear();
                     for (let appE of i.appliedDesignerExtensions) {
                         for (let e of appE[1]) {
                             try {
@@ -262,4 +276,24 @@ export class ExtensionManager {
     refreshAllAppliedExtentions() {
         this.refreshAllExtensions([...this.designItemsWithExtentions]);
     }
+    //todo does not work with permanant, when not applied... maybe we need to do in another way
+    //maybe store the "shouldAppliedExtensions??"
+    reapplyAllAppliedExtentions() {
+        for (let d of ExtensionManager.getAllChildElements(this.designerCanvas.rootDesignItem)) {
+            const keys = [...d.shouldAppliedDesignerExtensions.keys()];
+            for (let e of keys) {
+                this.removeExtension(d, e);
+                this.applyExtension(d, e);
+            }
+        }
+    }
+    static *getAllChildElements(designItem) {
+        if (designItem.nodeType == NodeType.Element)
+            yield designItem;
+        if (designItem.hasChildren) {
+            for (let c of designItem.children())
+                for (let di of ExtensionManager.getAllChildElements(c))
+                    yield di;
+        }
+    }
 }

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

@@ -15,6 +15,7 @@ export class FlexboxExtensionDesignViewConfigButtons {
                 btn.classList.add('selected');
             else
                 btn.classList.remove('selected');
+            designerCanvas.extensionManager.reapplyAllAppliedExtentions();
         };
         return [btn];
     }

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

@@ -5,7 +5,7 @@ import { IDesignerExtension } from './IDesignerExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare const flexboxExtensionShowOverlayOptionName = "flexboxExtensionShowOverlay";
 export declare class FlexboxExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
     readonly style: CSSStyleSheet;
 }

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

@@ -2,14 +2,14 @@ import { css } from "@node-projects/base-custom-webcomponent";
 import { FlexboxExtension } from './FlexboxExtension.js';
 export const flexboxExtensionShowOverlayOptionName = 'flexboxExtensionShowOverlay';
 export class FlexboxExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         const display = getComputedStyle(designItem.element).display;
         if (display == 'flex' || display == 'inline-flex')
-            return designerView.instanceServiceContainer.designContext.extensionOptions[flexboxExtensionShowOverlayOptionName] !== false;
+            return designerCanvas.instanceServiceContainer.designContext.extensionOptions[flexboxExtensionShowOverlayOptionName] !== false;
         return false;
     }
-    getExtension(extensionManager, designerView, designItem) {
-        return new FlexboxExtension(extensionManager, designerView, designItem);
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new FlexboxExtension(extensionManager, designerCanvas, designItem);
     }
     style = css `
     .svg-flexbox { stroke: orange; fill: #9a47ff22; }

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

@@ -8,21 +8,13 @@ export declare class GridExtension extends AbstractExtension {
     private _rects;
     private _gaps;
     private _resizeCircles;
+    private minPixelSize;
     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;
+    _calculateNewSize(iSizes: any, diff: any, gapIndex: any, percentTarget: 'width' | 'heigth'): string;
+    _getCssUnit(cssValue: string): string;
 }

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

@@ -1,4 +1,5 @@
 import { EventNames } from "../../../../enums/EventNames.js";
+import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../helper/CssUnitConverter.js";
 import { CalculateGridInformation } from "../../../helper/GridHelper.js";
 import { AbstractExtension } from './AbstractExtension.js';
 import { OverlayLayer } from "./OverlayLayer.js";
@@ -8,11 +9,12 @@ export class GridExtension extends AbstractExtension {
     _rects;
     _gaps;
     _resizeCircles;
+    minPixelSize = 10;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        var gridInformation = CalculateGridInformation(this.extendedItem);
+        let gridInformation = CalculateGridInformation(this.extendedItem);
         this._rects = new Array(gridInformation.cells.length);
         gridInformation.cells.forEach((cellRow, i) => {
             this._rects[i] = new Array(cellRow.length);
@@ -22,7 +24,7 @@ export class GridExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        var gridInformation = CalculateGridInformation(this.extendedItem);
+        let 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]);
@@ -41,7 +43,7 @@ export class GridExtension extends AbstractExtension {
         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);
+        let resizeCircle = this._drawCircle((gap.x + (gap.width / 2)), (gap.y + (gap.height / 2)), 1.5, 'svg-grid-resizer', oldCircle, OverlayLayer.Foregorund);
         resizeCircle.style.pointerEvents = "all";
         resizeCircle.style.cursor = gap.width < gap.height ? "ew-resize" : "ns-resize";
         if (!oldCircle) {
@@ -57,18 +59,18 @@ export class GridExtension extends AbstractExtension {
             case EventNames.PointerDown:
                 circle.setPointerCapture(event.pointerId);
                 this._initialPoint = { x: event.clientX, y: event.clientY };
-                this._initialSizes = this._getInitialSizes(this.extendedItem.element.style);
+                this._initialSizes = { x: this.extendedItem.element.style.gridTemplateColumns.split(' '), y: this.extendedItem.element.style.gridTemplateRows.split(' ') };
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
-                    var elementStyle = this.extendedItem.element.style;
+                    let 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);
+                            elementStyle.gridTemplateColumns = this._calculateNewSize(this._initialSizes.x, (event.clientX - this._initialPoint.x) / this.designerCanvas.zoomFactor, gapColumn, "width");
                             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)));
+                            elementStyle.gridTemplateRows = this._calculateNewSize(this._initialSizes.y, (event.clientY - this._initialPoint.y) / this.designerCanvas.zoomFactor, gapRow, "heigth");
                             break;
                     }
                     this.refresh();
@@ -85,149 +87,73 @@ export class GridExtension extends AbstractExtension {
                 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++) {
+    _calculateNewSize(iSizes, diff, gapIndex, percentTarget) {
+        let newSizes = [];
+        let edited = [];
+        for (let 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") {
+                if (this._getCssUnit(iSizes[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);
+                    let convertedDiff = parseFloat(convertCssUnit(diff, this.extendedItem.element, percentTarget, this._getCssUnit(iSizes[i])).toString());
+                    newSizes.push((i + 1 == gapIndex ? parseFloat(iSizes[i]) + convertedDiff : i == gapIndex ? parseFloat(iSizes[i]) - convertedDiff : null) + this._getCssUnit(iSizes[i]));
                     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;
+        for (let i = 0; i < newSizes.length; i++) {
+            if (this._getCssUnit(newSizes[i]) == "fr") {
+                let 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;
+                //check if newSize smaller than minimum
+                if (convertCssUnitToPixel(newSizes[editedIndex], this.extendedItem.element, percentTarget) < this.minPixelSize) {
+                    newSizes[editedIndex] = convertCssUnit(this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(newSizes[editedIndex]));
                 }
-                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;
+                //check if fr is smaller than 10px
+                let totalSize = parseFloat(percentTarget == "width" ? this.extendedItem.element.style.width : this.extendedItem.element.style.height);
+                let totalGapSize = percentTarget == "width" ?
+                    parseFloat(this.extendedItem.element.style.columnGap) * this.extendedItem.element.style.gridTemplateColumns.split(' ').length - 1 :
+                    parseFloat(this.extendedItem.element.style.rowGap) * this.extendedItem.element.style.gridTemplateColumns.split(' ').length - 1;
+                let totalSizeExceptFr = 0;
+                newSizes.forEach(newSize => {
+                    if (this._getCssUnit(newSize) != "fr")
+                        totalSizeExceptFr += convertCssUnitToPixel(newSize, this.extendedItem.element, percentTarget);
+                });
+                let totalSizeExceptEdited = 0;
+                newSizes.forEach((newSize, k) => {
+                    if (!edited[k])
+                        totalSizeExceptEdited += convertCssUnitToPixel(newSize, this.extendedItem.element, percentTarget);
+                });
+                if (totalSize - totalSizeExceptFr - totalGapSize < this.minPixelSize) {
+                    newSizes[editedIndex] = convertCssUnit(totalSize - totalSizeExceptEdited - totalGapSize - this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(iSizes[editedIndex]));
                 }
             }
             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;
-                    }
+                if (convertCssUnitToPixel(newSizes[i], this.extendedItem.element, percentTarget) < this.minPixelSize) {
+                    let index = edited[i + 1] ? i + 1 : edited[i - 1] ? i - 1 : null;
+                    if (this._getCssUnit(newSizes[index]) != "fr")
+                        newSizes[index] = convertCssUnit(convertCssUnitToPixel(newSizes[i], this.extendedItem.element, percentTarget) + convertCssUnitToPixel(newSizes[index], this.extendedItem.element, percentTarget) - this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(newSizes[index]));
+                    newSizes[i] = convertCssUnit(this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(newSizes[i]));
+                    break;
                 }
             }
         }
-        for (var i = 0; i < newSizes.length; i++)
-            retVal += newSizes[i] + newUnits[i] + " ";
+        let retVal = "";
+        newSizes.forEach(newSize => retVal += newSize + ' ');
         return retVal;
     }
+    _getCssUnit(cssValue) {
+        return cssValue.substring(cssValue.length - 2, cssValue.length) == "fr" ? "fr" : getCssUnit(cssValue);
+    }
 }

package/dist/elements/widgets/designerView/extensions/GridExtensionDesignViewConfigButtons copy.d.ts

@@ -1,5 +1,5 @@
 import { DesignerView } from "../designerView.js";
-import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
 export declare class GridExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
     provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];

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

@@ -15,6 +15,7 @@ export class GridExtensionDesignViewConfigButtons {
                 btn.classList.add('selected');
             else
                 btn.classList.remove('selected');
+            designerCanvas.extensionManager.reapplyAllAppliedExtentions();
         };
         return [btn];
     }

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

@@ -5,7 +5,7 @@ import { IDesignerExtension } from './IDesignerExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare const gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
 export declare class GridExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
     readonly style: CSSStyleSheet;
 }

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

@@ -2,19 +2,19 @@ import { GridExtension } from './GridExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
 export class GridExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         const display = getComputedStyle(designItem.element).display;
         if (display == 'grid' || display == 'inline-grid')
-            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
+            return designerCanvas.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
         return false;
     }
-    getExtension(extensionManager, designerView, designItem) {
-        return new GridExtension(extensionManager, designerView, designItem);
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new GridExtension(extensionManager, designerCanvas, designItem);
     }
     style = css `
     .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; }
+    .svg-grid-resizer { fill: white; stroke: #3899ec }
   `;
 }

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

@@ -0,0 +1,11 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class HighlightElementExtension extends AbstractExtension {
+    private _rect;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,20 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+const offset = 3;
+export class HighlightElementExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: offset, y: offset }, this.designerCanvas);
+        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-hover', this._rect);
+        this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class HighlightElementExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,13 @@
+import { HighlightElementExtension } from './HighlightElementExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class HighlightElementExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new HighlightElementExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-hover { stroke: #90caf9; fill: none; }
+  `;
+}

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

@@ -10,4 +10,5 @@ export interface IExtensionManager {
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
     refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: any): any;
     refreshAllAppliedExtentions(): any;
+    reapplyAllAppliedExtentions(): any;
 }

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

@@ -0,0 +1,6 @@
+import { DesignerView } from "../designerView.js";
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
+export declare class InvisibleDivExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,22 @@
+import { invisibleDivExtensionShowOverlayOptionName } from "./InvisibleElementExtensionProvider.js";
+export class InvisibleDivExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'I';
+        btn.title = 'show invisible div overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[invisibleDivExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[invisibleDivExtensionShowOverlayOptionName];
+            extensionOptions[invisibleDivExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[invisibleDivExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+            designerCanvas.extensionManager.reapplyAllAppliedExtentions();
+        };
+        return [btn];
+    }
+}

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

@@ -3,6 +3,7 @@ import { IDesignItem } from '../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { IDesignerExtension } from './IDesignerExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
+export declare const invisibleDivExtensionShowOverlayOptionName = "invisibleDivExtensionShowOverlay";
 export declare class InvisibleDivExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

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

@@ -1,10 +1,13 @@
 import { InvisibleDivExtension } from './InvisibleDivExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
+export const invisibleDivExtensionShowOverlayOptionName = 'invisibleDivExtensionShowOverlay';
 export class InvisibleDivExtensionProvider {
     shouldExtend(extensionManager, designerCanvas, designItem) {
-        if (designItem.name == 'div') {
-            const st = window.getComputedStyle(designItem.element);
-            return st.backgroundColor == 'rgba(0, 0, 0, 0)' && st.borderStyle == 'none';
+        if (designerCanvas.instanceServiceContainer.designContext.extensionOptions[invisibleDivExtensionShowOverlayOptionName] !== false) {
+            if (designItem.name == 'div') {
+                const st = window.getComputedStyle(designItem.element);
+                return st.backgroundColor == 'rgba(0, 0, 0, 0)' && st.borderStyle == 'none';
+            }
         }
         return false;
     }

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

@@ -0,0 +1,11 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class InvisibleElementExtension extends AbstractExtension {
+    private _rect;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,19 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from "./OverlayLayer.js";
+export class InvisibleElementExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerCanvas, extendedItem) {
+        super(extensionManager, designerCanvas, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-invisible-div', this._rect, OverlayLayer.Background);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,6 @@
+import { DesignerView } from "../designerView.js";
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
+export declare class InvisibleElementExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,22 @@
+import { invisibleElementExtensionShowOverlayOptionName } from "./InvisibleElementExtensionProvider.js";
+export class InvisibleElementExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'I';
+        btn.title = 'show invisible div overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[invisibleElementExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[invisibleElementExtensionShowOverlayOptionName];
+            extensionOptions[invisibleElementExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[invisibleElementExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+            designerCanvas.extensionManager.reapplyAllAppliedExtentions();
+        };
+        return [btn];
+    }
+}

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

@@ -0,0 +1,13 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare const invisibleElementExtensionShowOverlayOptionName = "invisibleElementExtensionShowOverlay";
+export declare class InvisibleElementExtensionProvider implements IDesignerExtensionProvider {
+    elementFilter: (designItem: IDesignItem) => boolean;
+    constructor(elementFilter?: (designItem: IDesignItem) => boolean);
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,24 @@
+import { InvisibleElementExtension as InvisibleElementExtension } from './InvisibleElementExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export const invisibleElementExtensionShowOverlayOptionName = 'invisibleElementExtensionShowOverlay';
+export class InvisibleElementExtensionProvider {
+    elementFilter;
+    constructor(elementFilter = (d) => d.name == 'div' && window.getComputedStyle(d.element).display != 'inline') {
+        this.elementFilter = elementFilter;
+    }
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        if (designerCanvas.instanceServiceContainer.designContext.extensionOptions[invisibleElementExtensionShowOverlayOptionName] !== false) {
+            if (this.elementFilter(designItem)) {
+                const st = window.getComputedStyle(designItem.element);
+                return st.backgroundColor == 'rgba(0, 0, 0, 0)' && st.borderStyle == 'none';
+            }
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new InvisibleElementExtension(extensionManager, designerCanvas, designItem);
+    }
+    style = css `
+    .svg-invisible-div { stroke: lightgray; fill: transparent; stroke-width: 1;
+  `;
+}

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

@@ -4,6 +4,8 @@ import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { IDesignerExtension } from './IDesignerExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare class TransformOriginExtensionProvider implements IDesignerExtensionProvider {
+    showOnlyWhenSet: boolean;
+    constructor(showOnlyWhenSet?: boolean);
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
     readonly style: CSSStyleSheet;

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

@@ -1,10 +1,21 @@
 import { TransformOriginExtension } from './TransformOriginExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class TransformOriginExtensionProvider {
+    showOnlyWhenSet;
+    constructor(showOnlyWhenSet = true) {
+        this.showOnlyWhenSet = showOnlyWhenSet;
+    }
     shouldExtend(extensionManager, designerView, designItem) {
         if (designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg')) {
-            let r = designItem.element.getBoundingClientRect();
-            return r.width > 10 && r.height > 10;
+            if (!this.showOnlyWhenSet)
+                return true;
+            if (designItem.hasStyle('transformOrigin'))
+                return true;
+            if (getComputedStyle(designItem.element).display != 'inline' && designItem.element.getBoundingClientRect) {
+                const r = designItem.element.getBoundingClientRect();
+                if (getComputedStyle(designItem.element).transformOrigin != r.width / 2 + 'px ' + r.height / 2 + 'px')
+                    return true;
+            }
         }
         return false;
     }

package/dist/index.d.ts

@@ -168,10 +168,11 @@ export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContain
 export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";
-export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
-export * from "./elements/widgets/designerView/extensions/MouseOverExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/InvisibleElementExtension.js";
+export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/HighlightElementExtension.js";
+export * from "./elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtension.js";

package/dist/index.js

@@ -125,10 +125,11 @@ export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContain
 export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";
-export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
-export * from "./elements/widgets/designerView/extensions/MouseOverExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/InvisibleElementExtension.js";
+export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/HighlightElementExtension.js";
+export * from "./elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.164",
+  "version": "0.0.166",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",