@node-projects/web-component-designer 0.1.103 → 0.1.105

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

@@ -1,18 +1,24 @@
+import { DesignItem } from '../../../item/DesignItem.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { ExtensionType } from './ExtensionType.js';
 import { IExtensionManager } from './IExtensionManger.js';
 import { IDesignerExtension } from './IDesignerExtension.js';
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
 export declare class ExtensionManager implements IExtensionManager {
     designerCanvas: IDesignerCanvas;
     designItemsWithExtentions: Set<IDesignItem>;
     _timeout: ReturnType<typeof setTimeout>;
+    _appliedDesignerExtensions: WeakMap<DesignItem, Map<ExtensionType, IDesignerExtension[]>>;
+    _shouldAppliedDesignerExtensions: WeakMap<DesignItem, Map<ExtensionType, IDesignerExtensionProvider[]>>;
+    _lastApplyEventPerType: WeakMap<DesignItem, Map<ExtensionType, Event>>;
     constructor(designerCanvas: IDesignerCanvas);
     connected(): void;
     disconnected(): void;
     private refreshAllExtensionsTimeout;
     private _contentChanged;
     private _selectedElementsChanged;
+    private _selectedElementsRefresh;
     applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
     applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): void;
     applyExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension): void;
@@ -21,8 +27,8 @@ export declare class ExtensionManager implements IExtensionManager {
     removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): void;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): void;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension, timeout?: number): void;
-    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): void;
-    refreshAllAppliedExtentions(): void;
-    reapplyAllAppliedExtentions(): void;
+    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension, event?: Event): void;
+    refreshAllAppliedExtentions(event?: Event): void;
+    reapplyAllAppliedExtentions(filterDesignItems?: IDesignItem[]): void;
     private static getAllChildElements;
 }

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

@@ -1,13 +1,25 @@
 import { DesignItem } from '../../../item/DesignItem.js';
 import { NodeType } from "../../../item/NodeType.js";
 import { ExtensionType } from './ExtensionType.js';
+function wmGet(designItem, weakMap) {
+    let val = weakMap.get(designItem);
+    if (val)
+        return val;
+    val = new Map();
+    weakMap.set(designItem, val);
+    return val;
+}
 export class ExtensionManager {
     designerCanvas;
     designItemsWithExtentions = new Set();
     _timeout;
+    _appliedDesignerExtensions = new WeakMap;
+    _shouldAppliedDesignerExtensions = new WeakMap;
+    _lastApplyEventPerType = new WeakMap;
     constructor(designerCanvas) {
         this.designerCanvas = designerCanvas;
         designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));
+        designerCanvas.instanceServiceContainer.selectionService.onSelectionRefresh.on(this._selectedElementsRefresh.bind(this));
         designerCanvas.instanceServiceContainer.contentService.onContentChanged.on(this._contentChanged.bind(this));
     }
     connected() {
@@ -48,21 +60,27 @@ export class ExtensionManager {
                 this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
                 this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
                 this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelection);
+                this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelectionRefreshed);
                 this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
                 this.removeExtensions(selectionChangedEvent.oldSelectedElements, false, ExtensionType.Selection);
             }
         }
         if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
-            this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection);
-            this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection);
+            this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection, selectionChangedEvent.event);
+            this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection, selectionChangedEvent.event);
             if (selectionChangedEvent.selectedElements[0].getPlacementService()?.isEnterableContainer(selectionChangedEvent.selectedElements[0]))
-                this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
+                this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered, selectionChangedEvent.event);
             const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
-            this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
+            this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer, selectionChangedEvent.event);
             if (primaryContainer.getPlacementService()?.isEnterableContainer(primaryContainer))
-                this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
+                this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered, selectionChangedEvent.event);
+        }
+    }
+    _selectedElementsRefresh(selectionChangedEvent) {
+        this.refreshAllAppliedExtentions(selectionChangedEvent.event);
+        if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
+            this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionRefreshed, selectionChangedEvent.event);
         }
-        //this.refreshExtensions(selectionChangedEvent.selectedElements);
     }
     applyExtension(designItem, extensionType, event, recursive = false) {
         if (designItem && designItem.nodeType == NodeType.Element) {
@@ -71,25 +89,29 @@ export class ExtensionManager {
             if (extProv) {
                 const cache = {};
                 for (let e of extProv) {
-                    let shouldAppE = designItem.shouldAppliedDesignerExtensions.get(extensionType);
+                    let shouldAppE = wmGet(designItem, this._shouldAppliedDesignerExtensions).get(extensionType);
                     if (!shouldAppE)
                         shouldAppE = [];
                     shouldAppE.push(e);
-                    designItem.shouldAppliedDesignerExtensions.set(extensionType, shouldAppE);
+                    wmGet(designItem, this._shouldAppliedDesignerExtensions).set(extensionType, shouldAppE);
                     if (e.shouldExtend(this, this.designerCanvas, designItem)) {
-                        let appE = designItem.appliedDesignerExtensions.get(extensionType);
+                        let appE = wmGet(designItem, this._appliedDesignerExtensions).get(extensionType);
                         if (!appE)
                             appE = [];
                         const ext = e.getExtension(this, this.designerCanvas, designItem);
                         try {
                             ext.extend(cache, event);
                             extensions.push(ext);
+                            if (event)
+                                wmGet(designItem, this._lastApplyEventPerType).set(extensionType, event);
+                            else
+                                wmGet(designItem, this._lastApplyEventPerType).delete(extensionType);
                         }
                         catch (err) {
                             console.error(err);
                         }
                         appE.push(ext);
-                        designItem.appliedDesignerExtensions.set(extensionType, appE);
+                        wmGet(designItem, this._appliedDesignerExtensions).set(extensionType, appE);
                         this.designItemsWithExtentions.add(designItem);
                     }
                 }
@@ -111,24 +133,28 @@ export class ExtensionManager {
                 const cache = {};
                 for (let e of extProv) {
                     for (let i of designItems) {
-                        let shouldAppE = i.shouldAppliedDesignerExtensions.get(extensionType);
+                        let shouldAppE = wmGet(i, this._shouldAppliedDesignerExtensions).get(extensionType);
                         if (!shouldAppE)
                             shouldAppE = [];
                         shouldAppE.push(e);
-                        i.shouldAppliedDesignerExtensions.set(extensionType, shouldAppE);
+                        wmGet(i, this._shouldAppliedDesignerExtensions).set(extensionType, shouldAppE);
                         if (e.shouldExtend(this, this.designerCanvas, i)) {
-                            let appE = i.appliedDesignerExtensions.get(extensionType);
+                            let appE = wmGet(i, this._appliedDesignerExtensions).get(extensionType);
                             if (!appE)
                                 appE = [];
                             const ext = e.getExtension(this, this.designerCanvas, i);
                             try {
                                 ext.extend(cache, event);
+                                if (event)
+                                    wmGet(i, this._lastApplyEventPerType).set(extensionType, event);
+                                else
+                                    wmGet(i, this._lastApplyEventPerType).delete(extensionType);
                             }
                             catch (err) {
                                 console.error(err);
                             }
                             appE.push(ext);
-                            i.appliedDesignerExtensions.set(extensionType, appE);
+                            wmGet(i, this._appliedDesignerExtensions).set(extensionType, appE);
                             this.designItemsWithExtentions.add(i);
                         }
                     }
@@ -143,7 +169,7 @@ export class ExtensionManager {
         this.designerCanvas.overlayLayer.endBatch();
     }
     applyExtensionInstance(designItem, extension) {
-        let appE = designItem.appliedDesignerExtensions.get(ExtensionType.Directly);
+        let appE = wmGet(designItem, this._appliedDesignerExtensions).get(ExtensionType.Directly);
         if (!appE)
             appE = [];
         try {
@@ -153,11 +179,11 @@ export class ExtensionManager {
             console.error(err);
         }
         appE.push(extension);
-        designItem.appliedDesignerExtensions.set(ExtensionType.Directly, appE);
+        wmGet(designItem, this._appliedDesignerExtensions).set(ExtensionType.Directly, appE);
         this.designItemsWithExtentions.add(designItem);
     }
     removeExtensionInstance(designItem, extension) {
-        for (let e of designItem.appliedDesignerExtensions) {
+        for (let e of wmGet(designItem, this._appliedDesignerExtensions)) {
             const idx = e[1].indexOf(extension);
             if (idx >= 0) {
                 try {
@@ -168,8 +194,8 @@ export class ExtensionManager {
                 }
                 e[1].splice(idx, 1);
                 if (e[1].length == 0)
-                    designItem.appliedDesignerExtensions.delete(e[0]);
-                if (!designItem.appliedDesignerExtensions.size)
+                    wmGet(designItem, this._appliedDesignerExtensions).delete(e[0]);
+                if (!wmGet(designItem, this._appliedDesignerExtensions).size)
                     this.designItemsWithExtentions.delete(designItem);
             }
         }
@@ -177,25 +203,26 @@ export class ExtensionManager {
     removeExtension(designItem, extensionType) {
         if (designItem) {
             if (extensionType) {
-                designItem.shouldAppliedDesignerExtensions.delete(extensionType);
-                let exts = designItem.appliedDesignerExtensions.get(extensionType);
+                wmGet(designItem, this._shouldAppliedDesignerExtensions).delete(extensionType);
+                let exts = wmGet(designItem, this._appliedDesignerExtensions).get(extensionType);
                 if (exts) {
                     for (let e of exts) {
                         try {
                             e.dispose();
+                            wmGet(designItem, this._lastApplyEventPerType).delete(extensionType);
                         }
                         catch (err) {
                             console.error(err);
                         }
                     }
-                    designItem.appliedDesignerExtensions.delete(extensionType);
-                    if (!designItem.appliedDesignerExtensions.size)
+                    wmGet(designItem, this._appliedDesignerExtensions).delete(extensionType);
+                    if (!wmGet(designItem, this._appliedDesignerExtensions).size)
                         this.designItemsWithExtentions.delete(designItem);
                 }
             }
             else {
-                designItem.shouldAppliedDesignerExtensions.clear();
-                for (let appE of designItem.appliedDesignerExtensions) {
+                wmGet(designItem, this._shouldAppliedDesignerExtensions).clear();
+                for (let appE of wmGet(designItem, this._appliedDesignerExtensions)) {
                     for (let e of appE[1]) {
                         try {
                             e.dispose();
@@ -205,7 +232,7 @@ export class ExtensionManager {
                         }
                     }
                 }
-                designItem.appliedDesignerExtensions.clear();
+                wmGet(designItem, this._appliedDesignerExtensions).clear();
                 this.designItemsWithExtentions.delete(designItem);
             }
         }
@@ -217,19 +244,20 @@ export class ExtensionManager {
                     if (recursive && i.hasChildren) {
                         this.removeExtensions([...i.children()], true, extensionType);
                     }
-                    i.shouldAppliedDesignerExtensions.delete(extensionType);
-                    let exts = i.appliedDesignerExtensions.get(extensionType);
+                    wmGet(i, this._shouldAppliedDesignerExtensions).delete(extensionType);
+                    let exts = wmGet(i, this._appliedDesignerExtensions).get(extensionType);
                     if (exts) {
                         for (let e of exts) {
                             try {
                                 e.dispose();
+                                wmGet(i, this._lastApplyEventPerType).delete(extensionType);
                             }
                             catch (err) {
                                 console.error(err);
                             }
                         }
-                        i.appliedDesignerExtensions.delete(extensionType);
-                        if (!i.appliedDesignerExtensions.size)
+                        wmGet(i, this._appliedDesignerExtensions).delete(extensionType);
+                        if (!wmGet(i, this._appliedDesignerExtensions).size)
                             this.designItemsWithExtentions.delete(i);
                     }
                 }
@@ -239,8 +267,8 @@ export class ExtensionManager {
                     if (recursive && i.hasChildren) {
                         this.removeExtensions([...i.children()], true, extensionType);
                     }
-                    i.shouldAppliedDesignerExtensions.clear();
-                    for (let appE of i.appliedDesignerExtensions) {
+                    wmGet(i, this._shouldAppliedDesignerExtensions).clear();
+                    for (let appE of wmGet(i, this._appliedDesignerExtensions)) {
                         for (let e of appE[1]) {
                             try {
                                 e.dispose();
@@ -250,7 +278,7 @@ export class ExtensionManager {
                             }
                         }
                     }
-                    i.appliedDesignerExtensions.clear();
+                    wmGet(i, this._appliedDesignerExtensions).clear();
                     this.designItemsWithExtentions.delete(i);
                 }
             }
@@ -263,12 +291,14 @@ export class ExtensionManager {
                     this.removeExtension(designItem, extensionType);
                 }
                 else {
-                    let exts = designItem.appliedDesignerExtensions.get(extensionType);
+                    let exts = wmGet(designItem, this._appliedDesignerExtensions).get(extensionType);
                     if (exts) {
                         const cache = {};
                         for (let e of exts) {
                             try {
                                 e.refresh(cache, event);
+                                if (event)
+                                    wmGet(designItem, this._lastApplyEventPerType).set(extensionType, event);
                             }
                             catch (err) {
                                 console.error(err);
@@ -279,7 +309,7 @@ export class ExtensionManager {
             }
             else {
                 const cache = {};
-                for (let appE of designItem.appliedDesignerExtensions) {
+                for (let appE of wmGet(designItem, this._appliedDesignerExtensions)) {
                     for (let e of appE[1]) {
                         try {
                             e.refresh(cache, event);
@@ -303,7 +333,7 @@ export class ExtensionManager {
                         this.removeExtension(i, extensionType);
                     }
                     else {
-                        let exts = i.appliedDesignerExtensions.get(extensionType);
+                        let exts = wmGet(i, this._appliedDesignerExtensions).get(extensionType);
                         if (exts) {
                             for (let e of exts) {
                                 try {
@@ -328,11 +358,13 @@ export class ExtensionManager {
             else {
                 const cache = {};
                 outer2: for (let i of designItems) {
-                    for (let appE of i.appliedDesignerExtensions) {
+                    for (let appE of wmGet(i, this._appliedDesignerExtensions)) {
                         for (let e of appE[1]) {
                             try {
                                 if (e != ignoredExtension) {
                                     e.refresh(cache, event);
+                                    if (event)
+                                        wmGet(i, this._lastApplyEventPerType).set(extensionType, event);
                                     if (timeout) {
                                         const end = performance.now();
                                         if (end - start > timeout) {
@@ -352,39 +384,42 @@ export class ExtensionManager {
         }
         this.designerCanvas.overlayLayer.endBatch();
     }
-    refreshAllExtensions(designItems, ignoredExtension) {
+    refreshAllExtensions(designItems, ignoredExtension, event) {
         this.designerCanvas.overlayLayer.startBatch();
         if (designItems) {
-            this.refreshExtensions(designItems, ExtensionType.Directly, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.Permanent, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.Selection, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.PrimarySelection, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.MouseOver, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.ContainerDragOverAndCanBeEntered, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.ContainerDrag, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.Doubleclick, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.Placement, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionAndCanBeEntered, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainerAndCanBeEntered, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Directly, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Permanent, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Selection, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelection, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.MouseOver, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDragOverAndCanBeEntered, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDrag, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Doubleclick, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Placement, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionAndCanBeEntered, event, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainerAndCanBeEntered, event, ignoredExtension);
         }
         this.designerCanvas.overlayLayer.endBatch();
     }
-    refreshAllAppliedExtentions() {
+    refreshAllAppliedExtentions(event) {
         this.designerCanvas.fillCalculationrects();
-        this.refreshAllExtensions([...this.designItemsWithExtentions]);
+        this.refreshAllExtensions([...this.designItemsWithExtentions], null, event);
     }
     //TODO: does not work with permanant, when not applied... maybe we need to do in another way
     //maybe store the "shouldAppliedExtensions??"
-    reapplyAllAppliedExtentions() {
+    reapplyAllAppliedExtentions(filterDesignItems) {
         this.designerCanvas.overlayLayer.startBatch();
         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);
+            if (!filterDesignItems || filterDesignItems.includes(d)) {
+                const keys = [...wmGet(d, this._shouldAppliedDesignerExtensions).keys()];
+                for (let t of keys) {
+                    const evt = wmGet(d, this._lastApplyEventPerType).get(t);
+                    this.removeExtension(d, t);
+                    this.applyExtension(d, t, evt);
+                }
             }
         }
         this.designerCanvas.overlayLayer.endBatch();

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

@@ -27,5 +27,9 @@ export declare enum ExtensionType {
      * do not display grid extension.
      */
     PrimarySelectionAndCanBeEntered = 13,
-    PrimarySelectionContainerAndCanBeEntered = 14
+    PrimarySelectionContainerAndCanBeEntered = 14,
+    /**
+     * Extension when the Primary Selection is refreshed, means clicked a second time
+     */
+    PrimarySelectionRefreshed = 15
 }

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

@@ -29,4 +29,8 @@ export var ExtensionType;
      */
     ExtensionType[ExtensionType["PrimarySelectionAndCanBeEntered"] = 13] = "PrimarySelectionAndCanBeEntered";
     ExtensionType[ExtensionType["PrimarySelectionContainerAndCanBeEntered"] = 14] = "PrimarySelectionContainerAndCanBeEntered";
+    /**
+     * Extension when the Primary Selection is refreshed, means clicked a second time
+     */
+    ExtensionType[ExtensionType["PrimarySelectionRefreshed"] = 15] = "PrimarySelectionRefreshed";
 })(ExtensionType || (ExtensionType = {}));

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

@@ -0,0 +1,12 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class GridToolbarExtension extends AbstractExtension {
+    private static template;
+    private _foreignObject;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,58 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+export class GridToolbarExtension extends AbstractExtension {
+    static template = html `
+    <div style="height: 30px; width: 200px;">
+      <span>GRID</span>
+      <select id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
+        <option>1x1</option>
+        <option>1x16</option>
+        <option>2x8</option>
+        <option>4x4</option>
+        <option>8x2</option>
+        <option>16x1</option>
+        <option>custom</option>
+      </select>
+    </div>
+  `;
+    _foreignObject;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        const element = GridToolbarExtension.template.content.cloneNode(true);
+        element.querySelectorAll('*').forEach(x => x.onpointerdown = (e) => {
+            this.designerCanvas.ignoreEvent(e);
+            //this._formatSelection(x.dataset['command'], x.dataset['commandParameter'])
+        });
+        //element.querySelectorAll('select').forEach(x => x.onpointerdown = (e) => this.designerCanvas.ignoreEvent(e));
+        const gridTypeEl = element.querySelector('#gridType');
+        gridTypeEl.onchange = () => {
+            const parts = gridTypeEl.value.split('x');
+            this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
+            this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
+        };
+        //elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
+        //overlay
+        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        this._foreignObject = foreignObject;
+        foreignObject.classList.add('svg-toolbar');
+        foreignObject.setAttribute('width', '1');
+        foreignObject.setAttribute('height', '1');
+        foreignObject.appendChild(element);
+        this.refresh(cache, event);
+        this._addOverlay(foreignObject, OverlayLayer.Foreground);
+    }
+    refresh(cache, event) {
+        if (event) {
+            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
+            //debugger;
+            this._foreignObject.setAttribute('x', '' + (pos.x - 16));
+            this._foreignObject.setAttribute('y', '' + (pos.y - 36));
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -10,9 +10,9 @@ export interface IExtensionManager {
     removeExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension): any;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): any;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension, timeout?: number): any;
-    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): any;
-    refreshAllAppliedExtentions(): any;
-    reapplyAllAppliedExtentions(): any;
+    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension, event?: Event): any;
+    refreshAllAppliedExtentions(event?: Event): any;
+    reapplyAllAppliedExtentions(filterDesignItems?: IDesignItem[]): any;
     connected(): any;
     disconnected(): any;
 }

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

@@ -11,9 +11,13 @@ export class TransformOriginExtensionProvider {
                 return true;
             if (designItem.hasStyle('transformOrigin'))
                 return true;
-            if (getComputedStyle(designItem.element).display != 'inline' && designItem.element.getBoundingClientRect) {
+            const cs = getComputedStyle(designItem.element);
+            if (cs.display != 'inline' && designItem.element.getBoundingClientRect) {
                 const r = designItem.element.getBoundingClientRect();
-                if (getComputedStyle(designItem.element).transformOrigin != r.width / 2 + 'px ' + r.height / 2 + 'px')
+                const pr = cs.transformOrigin.split(' ');
+                const x = parseFloat(pr[0]) - r.width / 2;
+                const y = parseFloat(pr[1]) - r.height / 2;
+                if (x > 0.5 || x < -0.5 || y > 0.5 || y < -0.5)
                     return true;
             }
         }

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtension.d.ts

@@ -0,0 +1,12 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class BlockToolbarExtension extends AbstractExtension {
+    private static template;
+    private _toolbar;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtension.js

@@ -0,0 +1,35 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+export class BlockToolbarExtension extends AbstractExtension {
+    static template = html `
+    <div style="height: 100%; width: 100%;">
+      <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
+        <option selected>block</option>
+        <option>flex</option>
+        <option>grid</option>
+      </select>
+    </div>
+  `;
+    _toolbar;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        this._toolbar = this.createToolbar(BlockToolbarExtension.template, 200, 30);
+        const displayTypeEl = this._toolbar.getById('displayType');
+        displayTypeEl.onchange = () => {
+            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
+            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
+        };
+        this.refresh(cache, event);
+    }
+    refresh(cache, event) {
+        if (event) {
+            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
+            this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 44) });
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.d.ts

@@ -0,0 +1,9 @@
+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 BlockToolbarExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js

@@ -0,0 +1,12 @@
+import { BlockToolbarExtension } from './BlockToolbarExtension.js';
+import { NodeType } from '../../../../item/NodeType.js';
+export class BlockToolbarExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'block')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new BlockToolbarExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtension.d.ts

@@ -0,0 +1,12 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class FlexToolbarExtension extends AbstractExtension {
+    private static template;
+    private _toolbar;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    dispose(): void;
+}