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

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/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/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/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,14 +2,14 @@ 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; }

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.165",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",