@node-projects/web-component-designer 0.1.126 → 0.1.128

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

@@ -0,0 +1,68 @@
+import { assetsPath } from "../../../../Constants.js";
+import { AbstractExtension } from "./AbstractExtension.js";
+export class BasicStackedToolbarExtension extends AbstractExtension {
+    static basicTemplate = `
+      <node-projects-image-button-list-selector id="inline" no-value-in-header property="inline">
+        <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
+        <img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
+      </node-projects-image-button-list-selector>
+      <select title="display" id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
+        <option>block</option>
+        <option>flex</option>
+        <option>grid</option>
+      </select>
+  `;
+    _toolbar;
+    _size = { width: 200, height: 30 };
+    _display;
+    _inline;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        const cs = getComputedStyle(this.extendedItem.element);
+        this._display = cs.display.replace('inline-', '').replace('inline', 'block');
+        this._inline = cs.display.startsWith('inline') ? 'inline' : 'block';
+        //@ts-ignore
+        this._toolbar = this.createToolbar(this.constructor.template, this._size.width, this._size.height);
+        const displayTypeEl = this._toolbar.getById('displayType');
+        displayTypeEl.value = this._display;
+        displayTypeEl.onchange = async () => {
+            this._display = displayTypeEl.value;
+            await this.updateDisplayValue();
+            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
+        };
+        const inlineEl = this._toolbar.getById('inline');
+        inlineEl.value = this._inline;
+        inlineEl.addEventListener('value-changed', async () => {
+            this._inline = inlineEl.value;
+            if (this._inline && cs.position === 'absolute')
+                this.extendedItem.setStyle('position', 'static');
+            await this.updateDisplayValue();
+            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
+        });
+    }
+    async updateDisplayValue() {
+        let v = (this._inline == 'inline' ? 'inline ' : '') + this._display;
+        if (v === 'inline block')
+            v = 'inline';
+        await this.extendedItem.updateStyleInSheetOrLocalAsync('display', v);
+    }
+    refresh(cache, event) {
+        if (event) {
+            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
+            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
+        }
+    }
+    _addStyleButton(styleAndControlName) {
+        const cs = getComputedStyle(this.extendedItem.element);
+        const ctl = this._toolbar.getById(styleAndControlName);
+        ctl.addEventListener('value-changed', async () => {
+            await this.extendedItem.updateStyleInSheetOrLocalAsync(styleAndControlName, ctl.value);
+        });
+        ctl.value = cs[styleAndControlName];
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -2,6 +2,7 @@ import { AbstractExtension, toolbarObject } from "./AbstractExtension.js";
 import { IExtensionManager } from "./IExtensionManger.js";
 import { IDesignerCanvas } from "../IDesignerCanvas.js";
 import { IDesignItem } from "../../../item/IDesignItem.js";
+export declare const basicStackedToolbarExtensionOverlayOptionName = "basicStackedToolbarExtensionShowOverlay";
 export declare class BasicStackedToolbarExtension extends AbstractExtension {
     protected static basicTemplate: string;
     protected static toolBars: toolbarObject[];

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

@@ -1,5 +1,6 @@
 import { assetsPath } from "../../../../Constants.js";
 import { AbstractExtension } from "./AbstractExtension.js";
+export const basicStackedToolbarExtensionOverlayOptionName = 'basicStackedToolbarExtensionShowOverlay';
 export class BasicStackedToolbarExtension extends AbstractExtension {
     static basicTemplate = `
       <node-projects-image-button-list-selector id="inline" no-value-in-header property="inline">

package/dist/elements/widgets/designerView/extensions/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/BlockToolbarExtension.js

@@ -0,0 +1,40 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { assetsPath } from "../../../../../Constants.js";
+export class BlockToolbarExtension extends AbstractExtension {
+    static template = html `
+    <div style="height: 100%; width: 100%;">
+      <node-projects-image-button-list-selector>
+        <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
+        <img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
+      </node-projects-image-button-list-selector>
+      <select title="display" 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 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/ConditionExtensionProvider.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 class ConditionExtensionProvider implements IDesignerExtensionProvider {
+    constructor(extensionProvider: IDesignerExtensionProvider, condition: (designItem: IDesignItem) => boolean);
+    extensionProvider: IDesignerExtensionProvider;
+    condition: (designItem: IDesignItem) => boolean;
+    style: CSSStyleSheet;
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

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

@@ -0,0 +1,18 @@
+export class ConditionExtensionProvider {
+    constructor(extensionProvider, condition) {
+        this.extensionProvider = extensionProvider;
+        this.condition = condition;
+        this.style = extensionProvider.style;
+    }
+    extensionProvider;
+    condition;
+    style;
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (!this.condition(designItem))
+            return false;
+        return this.extensionProvider.shouldExtend(extensionManager, designerView, designItem);
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return this.extensionProvider.getExtension(extensionManager, designerView, designItem);
+    }
+}

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

@@ -0,0 +1,18 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from '../IExtensionManger.js';
+export type handlesPointerEvent = {
+    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
+};
+export declare class EditTextExtension extends AbstractExtension implements handlesPointerEvent {
+    private static template;
+    private _foreignObject;
+    private _path;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
+    _formatSelection(type: string, value?: string): void;
+}

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

@@ -0,0 +1,107 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../../helper/TransformHelper.js";
+import { shadowrootGetSelection, wrapSelectionInSpans } from "../../../../helper/SelectionHelper.js";
+import { FontPropertyEditor } from "../../../../services/propertiesService/propertyEditors/FontPropertyEditor.js";
+export class EditTextExtension extends AbstractExtension {
+    static template = html `
+    <div style="height: 24px; display: flex; gap: 2px;">
+      <button data-command="font-weight" data-command-parameter="800" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
+      <button data-command="font-style" data-command-parameter="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
+      <button data-command="text-decoration" data-command-parameter="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
+      <button data-command="text-decoration" data-command-parameter="line-through" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
+      <button data-command="text-decoration" data-command-parameter="overline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><span style="text-decoration: overline">o</span></button>
+      <select data-command="fontSize" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
+        <option>8px</option>
+        <option>9px</option>
+        <option>10px</option>
+        <option>11px</option>
+        <option>12px</option>
+        <option>14px</option>
+        <option>16px</option>
+        <option>18px</option>
+        <option>20px</option>
+        <option>24px</option>
+        <option>28px</option>
+        <option>32px</option>
+        <option>36px</option>
+      </select>
+      <select id="fontFamily" data-command="font-family" style="pointer-events: all; height: 24px; width: 90px; padding: 0;">
+        
+      </select>
+    </div>
+  `;
+    _foreignObject;
+    _path;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        //TODO: -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        this.extendedItem.removeDesignerAttributesAndStylesFromChildren();
+        this.extendedItem.element.setAttribute('contenteditable', '');
+        this.extendedItem.element.focus();
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const elements = EditTextExtension.template.content.cloneNode(true);
+        FontPropertyEditor.addFontsToSelect(elements.querySelector('#fontFamily'));
+        elements.querySelectorAll('button').forEach(x => x.onpointerdown = (e) => {
+            this.designerCanvas.ignoreEvent(e);
+            this._formatSelection(x.dataset['command'], x.dataset['commandParameter']);
+        });
+        elements.querySelectorAll('select').forEach(x => x.onpointerdown = (e) => this.designerCanvas.ignoreEvent(e));
+        elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
+        //Button overlay
+        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        this._foreignObject = foreignObject;
+        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
+        foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
+        foreignObject.setAttribute('width', '300');
+        foreignObject.setAttribute('height', '24');
+        foreignObject.appendChild(elements);
+        this._addOverlay(foreignObject, OverlayLayer.Foreground);
+        //TODO - nice way to disable click overlay
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
+        //overlay to detect click outside
+        this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this._path.setAttribute('class', 'svg-edit-text-clickoutside');
+        this._path.setAttribute('fill-rule', 'evenodd');
+        this._path.style.pointerEvents = 'auto';
+        this._path.onpointerdown = (e) => {
+            this.extensionManager.removeExtensionInstance(this.extendedItem, this);
+        };
+        this._addOverlay(this._path, OverlayLayer.Background);
+        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
+        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
+        data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
+        this._path.setAttribute("d", data);
+    }
+    refresh() {
+        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
+        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
+        data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
+        this._path.setAttribute("d", data);
+    }
+    dispose() {
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.extendedItem.updateChildrenFromNodesChildren();
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
+    }
+    handlesPointerEvent(designerCanvas, event, currentElement) {
+        const p = event.composedPath();
+        const stylo = this._foreignObject.querySelector('stylo-editor');
+        return p.indexOf(stylo) >= 0;
+    }
+    _formatSelection(type, value) {
+        const selection = shadowrootGetSelection(this.designerCanvas.rootDesignItem.element.shadowRoot);
+        const spans = wrapSelectionInSpans(selection);
+        for (const span of spans)
+            span.style[type] = value;
+        this.extendedItem.element.focus();
+    }
+}

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/ResizeExtension.js

@@ -241,40 +241,46 @@ export class ResizeExtension extends AbstractExtension {
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
                 let cg = this.extendedItem.openGroup((this.resizeAllSelected && this.designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1) ? "Resize Elements" : "Resize <" + this.extendedItem.name + ">");
-                this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
-                this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
-                this.extendedItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(this.extendedItem.element, 'left'))) + 'px');
-                this.extendedItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(this.extendedItem.element, 'top'))) + 'px');
-                let p3Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
-                this.extendedItem.element.style.transformOrigin = this._initialTransformOrigins[0];
-                let p1Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
-                let p1 = new DOMPoint(p1Abs.x - p3Abs.x, -(p1Abs.y - p3Abs.y));
-                let matrix = new DOMMatrix(getComputedStyle(this.extendedItem.element).transform);
-                let deltaX = 0;
-                let deltaY = 0;
-                let p1transformed = transformPointByInverseMatrix(p1, matrix);
-                let p2Abs = new DOMPoint(p3Abs.x + p1transformed.x, p3Abs.y - p1transformed.y);
-                let p1p2 = new DOMPoint(p2Abs.x - p1Abs.x, -(p2Abs.y - p1Abs.y));
-                let p1p2transformed = p1p2.matrixTransform(matrix);
-                let p4Abs = new DOMPoint(p1Abs.x + p1p2transformed.x, p1Abs.y - p1p2transformed.y);
-                deltaX = p4Abs.x - p1Abs.x;
-                deltaY = p4Abs.y - p1Abs.y;
-                this.extendedItem.element.style.transform = matrix.translate(deltaX, deltaY).toString();
-                if (matrix.isIdentity) {
-                    this.extendedItem.element.style.transform = '';
-                }
-                this.extendedItem.setStyle('transform', this.extendedItem.element.style.transform);
-                if (this.resizeAllSelected) {
-                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                        if (designItem !== this.extendedItem) {
-                            designItem.setStyle('width', designItem.element.style.width);
-                            designItem.setStyle('height', designItem.element.style.height);
-                            designItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'left'))) + 'px');
-                            designItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'top'))) + 'px');
+                try {
+                    this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
+                    this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
+                    this.extendedItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(this.extendedItem.element, 'left'))) + 'px');
+                    this.extendedItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(this.extendedItem.element, 'top'))) + 'px');
+                    let p3Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
+                    this.extendedItem.element.style.transformOrigin = this._initialTransformOrigins[0];
+                    let p1Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
+                    let p1 = new DOMPoint(p1Abs.x - p3Abs.x, -(p1Abs.y - p3Abs.y));
+                    let matrix = new DOMMatrix(getComputedStyle(this.extendedItem.element).transform);
+                    let deltaX = 0;
+                    let deltaY = 0;
+                    let p1transformed = transformPointByInverseMatrix(p1, matrix);
+                    let p2Abs = new DOMPoint(p3Abs.x + p1transformed.x, p3Abs.y - p1transformed.y);
+                    let p1p2 = new DOMPoint(p2Abs.x - p1Abs.x, -(p2Abs.y - p1Abs.y));
+                    let p1p2transformed = p1p2.matrixTransform(matrix);
+                    let p4Abs = new DOMPoint(p1Abs.x + p1p2transformed.x, p1Abs.y - p1p2transformed.y);
+                    deltaX = p4Abs.x - p1Abs.x;
+                    deltaY = p4Abs.y - p1Abs.y;
+                    this.extendedItem.element.style.transform = matrix.translate(deltaX, deltaY).toString();
+                    if (matrix.isIdentity) {
+                        this.extendedItem.element.style.transform = '';
+                    }
+                    this.extendedItem.setStyle('transform', this.extendedItem.element.style.transform);
+                    if (this.resizeAllSelected) {
+                        for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                            if (designItem !== this.extendedItem) {
+                                designItem.setStyle('width', designItem.element.style.width);
+                                designItem.setStyle('height', designItem.element.style.height);
+                                designItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'left'))) + 'px');
+                                designItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'top'))) + 'px');
+                            }
                         }
                     }
+                    cg.commit();
+                }
+                catch (err) {
+                    cg.abort();
+                    console.error(err);
                 }
-                cg.commit();
                 this._initialSizes = null;
                 this._initialPoint = null;
                 break;

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

@@ -4,6 +4,6 @@ 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;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
 }

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

@@ -1,10 +1,12 @@
 import { BlockToolbarExtension } from './BlockToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
+import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js';
 export class BlockToolbarExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.nodeType === NodeType.Element) {
             const d = getComputedStyle(designItem.element).display;
-            return d === 'block' || d === 'inline';
+            if (d === 'block' || d === 'inline' || d === 'inline-block')
+                return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false;
         }
         return false;
     }

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;
+}

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

@@ -0,0 +1,34 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+export class FlexToolbarExtension 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>block</option>
+        <option selected>flex</option>
+        <option>grid</option>
+      </select>
+    </div>
+  `;
+    _toolbar;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        this._toolbar = this.createToolbar(FlexToolbarExtension.template, 200, 30);
+        const displayTypeEl = this._toolbar.getById('displayType');
+        displayTypeEl.onchange = () => {
+            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
+        };
+        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 - 36) });
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtensionProvider.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 GridToolbarExtensionProvider 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/FlexToolbarExtensionProvider.js

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

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

@@ -0,0 +1,4 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

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

@@ -0,0 +1,7 @@
+import { gridExtensionShowOverlayOptionName } from "../grid/DisplayGridExtensionProvider.js";
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(gridExtensionShowOverlayOptionName, "G", "show grid overlay");
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.d.ts

@@ -0,0 +1,4 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class ToolbarExtensionsDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js

@@ -0,0 +1,7 @@
+import { basicStackedToolbarExtensionOverlayOptionName } from "../BasicStackedToolbarExtension.js";
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class ToolbarExtensionsDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(basicStackedToolbarExtensionOverlayOptionName, "T", "show Toolbars");
+    }
+}

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.d.ts

@@ -4,6 +4,6 @@ import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { IDesignerExtension } from '../IDesignerExtension.js';
 import { IExtensionManager } from '../IExtensionManger.js';
 export declare class FlexToolbarExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
 }

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js

@@ -1,10 +1,12 @@
 import { FlexToolbarExtension } from './FlexToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
+import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js';
 export class FlexToolbarExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.nodeType === NodeType.Element) {
             const d = getComputedStyle(designItem.element).display;
-            return d === 'flex' || d === 'inline-flex';
+            if (d === 'flex' || d === 'inline-flex')
+                return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false;
         }
         return false;
     }