@node-projects/web-component-designer 0.1.108 → 0.1.110

package/assets/images/display/block.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="5" width="14" height="14" fill="black"/></svg>

package/assets/images/display/inline.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><line x1="5" y1="12" x2="19" y2="12" stroke="black" stroke-width="2"/></svg>

package/dist/elements/controls/ImageButtonListSelector.d.ts

@@ -1,17 +1,20 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export type ImageButtonListSelectorValueChangedEventArgs = {
-    newValue?: string;
-    oldValue?: string;
-};
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 export declare class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
+    static properties: {
+        value: StringConstructor;
+        property: StringConstructor;
+        unsetValue: StringConstructor;
+        noValueInHeader: BooleanConstructor;
+    };
+    constructor();
     private _value;
     get value(): string;
     set value(value: string);
-    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
     property: string;
     unsetValue: string;
+    noValueInHeader: boolean;
     _updateValue(): void;
     ready(): void;
 }

package/dist/elements/controls/ImageButtonListSelector.js

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
 export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     div {
@@ -29,23 +29,31 @@ export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAp
   `;
     static template = html `
     <div>
-      <div><span id="property"></span>: <span id="value"></span></div>
-      <div class="container"><slot id="slot"></slot></div>
+      <div id="header" style="display: none"><span id="property"></span><span id="vhd">: <span id="value"></span></span></div>
+      <div part="container" class="container"><slot id="slot"></slot></div>
     </div>
   `;
+    static properties = {
+        value: String,
+        property: String,
+        unsetValue: String,
+        noValueInHeader: Boolean
+    };
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+    }
     _value;
     get value() {
         return this._value;
     }
     set value(value) {
-        const oldValue = this._value;
         this._value = value;
         this._updateValue();
-        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
     }
-    valueChanged = new TypedEvent();
     property;
     unsetValue;
+    noValueInHeader;
     _updateValue() {
         if (this.value) {
             this._getDomElement('value').innerText = this.value;
@@ -64,12 +72,23 @@ export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAp
     }
     ready() {
         this._parseAttributesToProperties();
+        if (this.property)
+            this._getDomElement('header').style.display = 'block';
+        if (this.noValueInHeader)
+            this._getDomElement('vhd').style.display = 'none';
         const slot = this._getDomElement('slot');
         slot.onclick = (e) => {
             const path = e.composedPath();
             for (let e of slot.assignedElements()) {
                 if (path.indexOf(e) >= 0) {
+                    const oldValue = this._value;
                     this.value = e.dataset.value;
+                    const valueChangedEvent = new CustomEvent('value-changed', {
+                        detail: {
+                            newValue: this._value, oldValue: oldValue
+                        }
+                    });
+                    this.dispatchEvent(valueChangedEvent);
                 }
             }
         };

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

@@ -78,8 +78,10 @@ export declare class DesignItem implements IDesignItem {
     static GetOrCreateDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
     static GetDesignItem(node: Node): IDesignItem;
     setStyle(name: string, value?: string | null, important?: boolean): void;
+    setStyleAsync(name: string, value?: string | null, important?: boolean): Promise<void>;
     removeStyle(name: string): void;
     updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean, forceSet?: boolean): void;
+    updateStyleInSheetOrLocalAsync(name: string, value?: string | null, important?: boolean, forceSet?: boolean): Promise<void>;
     getStyleFromSheetOrLocal(name: string, fallback?: string): string;
     getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): string;
     getComputedStyleProperty(name: string, fallback?: string): string;

package/dist/elements/item/DesignItem.js

@@ -423,10 +423,39 @@ export class DesignItem {
         let nm = name;
         if (!nm.startsWith('--'))
             nm = PropertiesHelper.camelToDashCase(name);
-        if (this.isRootItem)
-            throw 'not allowed to set style on root item';
-        const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm));
-        this.instanceServiceContainer.undoService.execute(action);
+        if (this.isRootItem) {
+            throw 'not allowed to set style on root item or use async setStyle';
+        }
+        else {
+            const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm));
+            this.instanceServiceContainer.undoService.execute(action);
+        }
+    }
+    async setStyleAsync(name, value, important) {
+        let nm = name;
+        if (!nm.startsWith('--'))
+            nm = PropertiesHelper.camelToDashCase(name);
+        if (this.isRootItem) {
+            if (!this.instanceServiceContainer.stylesheetService)
+                throw 'not allowed to set style on root item';
+            else {
+                let rules = this.instanceServiceContainer.stylesheetService.getRules(':host');
+                if (rules === null || rules.length === 0) {
+                    const cg = this.openGroup('add rule and set style: ' + name);
+                    const sheets = this.instanceServiceContainer.stylesheetService.getStylesheets();
+                    const rule = await this.instanceServiceContainer.stylesheetService.addRule(sheets[0], ':host');
+                    this.instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(rule, name, value, important);
+                    cg.commit();
+                }
+                else {
+                    this.instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(rules[0], name, value, important);
+                }
+            }
+        }
+        else {
+            const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm));
+            this.instanceServiceContainer.undoService.execute(action);
+        }
     }
     removeStyle(name) {
         let nm = name;
@@ -454,6 +483,25 @@ export class DesignItem {
             this.instanceServiceContainer.stylesheetService.updateDeclarationValue(declarations[0], value, false);
         }
     }
+    async updateStyleInSheetOrLocalAsync(name, value, important, forceSet) {
+        let nm = name;
+        if (!nm.startsWith('--'))
+            nm = PropertiesHelper.camelToDashCase(name);
+        // Pre-sorted by specificity
+        let declarations = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
+        if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declarations?.length) {
+            // Set style locally
+            if (this.getStyle(nm) != value || forceSet) {
+                await this.setStyleAsync(nm, value);
+            }
+            else if (value == null) {
+                this.removeStyle(nm);
+            }
+        }
+        else {
+            this.instanceServiceContainer.stylesheetService.updateDeclarationValue(declarations[0], value, false);
+        }
+    }
     getStyleFromSheetOrLocal(name, fallback = null) {
         let nm = name;
         if (!nm.startsWith('--'))
@@ -488,10 +536,9 @@ export class DesignItem {
         return value ?? fallback;
     }
     getComputedStyle() {
-        /*if (this.isRootItem) {
-          return window.getComputedStyle((<ShadowRoot>this.node).host);
-        }*/
-        return window.getComputedStyle(this.element);
+        if (this.nodeType == NodeType.Element)
+            return window.getComputedStyle(this.element);
+        return null;
     }
     _stylesCache = null;
     _cacheClearTimer;

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

@@ -54,8 +54,10 @@ export interface IDesignItem {
     getStyle(name: string): string;
     hasStyle(name: string): boolean;
     setStyle(name: string, value?: string | null, important?: boolean): any;
+    setStyleAsync(name: string, value?: string | null, important?: boolean): Promise<void>;
     removeStyle(name: string): any;
     updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean, forceSet?: boolean): any;
+    updateStyleInSheetOrLocalAsync(name: string, value?: string | null, important?: boolean, forceSet?: boolean): Promise<void>;
     getStyleFromSheetOrLocal(name: string, fallback?: string): any;
     getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): any;
     getAllStyles(): IStyleRule[];

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -89,6 +89,7 @@ import { GridToolbarExtensionProvider } from '../widgets/designerView/extensions
 import { FlexToolbarExtensionProvider } from '../widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js';
 import { BlockToolbarExtensionProvider } from '../widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js';
 import { ChildContextMenu } from '../widgets/designerView/extensions/contextMenu/ChildContextMenu.js';
+import { GridChildToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -133,6 +134,7 @@ export function createDefaultServiceContainer() {
         new ConditionExtensionProvider(new MultipleSelectionRectExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionRefreshed, [
+        new GridChildToolbarExtensionProvider(),
         new GridToolbarExtensionProvider(),
         new FlexToolbarExtensionProvider(),
         new BlockToolbarExtensionProvider(),

package/dist/elements/services/dragDropService/DragDropService.js

@@ -15,6 +15,8 @@ export class DragDropService {
     }
     dragOver(designerCanvas, event) {
         let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event);
+        if (!newContainer)
+            newContainer = designerCanvas.rootDesignItem;
         if (this._dragOverExtensionItem != newContainer) {
             designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOverAndCanBeEntered);
             designerCanvas.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOverAndCanBeEntered, event);
@@ -40,7 +42,7 @@ export class DragDropService {
         const elementDefinition = JSON.parse(transferData);
         const di = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
         const grp = di.openGroup("Insert of <" + di.name + ">");
-        const containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, newContainer.getComputedStyle()));
+        const containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, newContainer.getComputedStyle(), di));
         containerService.enterContainer(newContainer, [di], 'drop');
         const containerPos = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
         const evCoord = designerCanvas.getNormalizedEventCoordinates(event);

package/dist/elements/services/placementService/DefaultPlacementService.d.ts

@@ -3,7 +3,7 @@ import type { IPlacementService } from './IPlacementService.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class DefaultPlacementService implements IPlacementService {
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -4,7 +4,9 @@ import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem } from
 import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
 import { straightenLine } from '../../helper/PathDataPolyfill.js';
 export class DefaultPlacementService {
-    serviceForContainer(container, containerStyle) {
+    serviceForContainer(container, containerStyle, item) {
+        if (item != null && item.getComputedStyle()?.position == 'absolute')
+            return true;
         if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
             containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
             return false;

package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts

@@ -7,7 +7,7 @@ export declare class FlexBoxPlacementService implements IPlacementService {
     constructor(basePlacementService: IPlacementService);
     enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): any;
     canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;

package/dist/elements/services/placementService/FlexBoxPlacementService.js

@@ -22,9 +22,12 @@ export class FlexBoxPlacementService {
             }
         }
     }
-    serviceForContainer(container, containerStyle) {
-        if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex')
+    serviceForContainer(container, containerStyle, item) {
+        if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex') {
+            if (item != null && item.getComputedStyle()?.position == 'absolute')
+                return false;
             return true;
+        }
         return false;
     }
     isEnterableContainer(container) {

package/dist/elements/services/placementService/GridPlacementService.d.ts

@@ -7,7 +7,7 @@ export declare class GridPlacementService implements IPlacementService {
     constructor(basePlacementService: IPlacementService);
     enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): any;
     canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;

package/dist/elements/services/placementService/GridPlacementService.js

@@ -26,9 +26,12 @@ export class GridPlacementService {
             }
         }
     }
-    serviceForContainer(container, containerStyle) {
-        if (containerStyle.display == 'grid' || containerStyle.display == 'inline-grid')
+    serviceForContainer(container, containerStyle, item) {
+        if (containerStyle.display == 'grid' || containerStyle.display == 'inline-grid') {
+            if (item != null && item.getComputedStyle()?.position == 'absolute')
+                return false;
             return true;
+        }
         return false;
     }
     isEnterableContainer(container) {

package/dist/elements/services/placementService/IPlacementService.d.ts

@@ -3,7 +3,7 @@ import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 import { IPoint } from '../../../interfaces/IPoint.js';
 export interface IPlacementService extends IService {
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;

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

@@ -53,8 +53,8 @@ export class PropertyGroupsService {
         let lst = this._pgList;
         if (designItems[0].element instanceof SVGElement)
             lst = this._svgPgList;
-        if (designItems[0].element.parentElement) {
-            const parentStyle = getComputedStyle(designItems[0].element.parentElement);
+        if (designItems[0].parent) {
+            const parentStyle = designItems[0].parent.getComputedStyle();
             if (parentStyle.display.includes('grid'))
                 lst = [...lst, this._gridChild[0]];
             else if (parentStyle.display.includes('flex'))

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.js

@@ -31,7 +31,7 @@ export class ImageButtonListPropertyEditor extends BasePropertyEditor {
                 selector.appendChild(button);
             }
         }
-        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        selector.addEventListener('value-changed', (e) => this._valueChanged(selector.value));
         this.element = selector;
     }
     refreshValue(valueType, value) {

package/dist/elements/services/stylesheetService/AbstractStylesheetService.d.ts

@@ -18,12 +18,15 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
     }>;
     protected _instanceServiceContainer: InstanceServiceContainer;
     constructor(designerCanvas: IDesignerCanvas);
+    abstract getRules(rule: string): IStyleRule[];
+    abstract addRule(stylesheet: IStylesheet, rule: string): Promise<IStyleRule>;
     setStylesheets(stylesheets: IStylesheet[]): Promise<void>;
     setDocumentStylesheets(stylesheets: IDocumentStylesheet[]): Promise<void>;
     internalSetStylesheets(stylesheets: IStylesheet[], targetMap: Map<string, {
         stylesheet: IStylesheet;
         ast: any;
     }>): Promise<void>;
+    protected internalReparseStylesheet(name: string): Promise<void>;
     protected abstract internalParse(style: string): Promise<any>;
     getStylesheets(): IStylesheet[];
     abstract getAppliedRules(designItem: IDesignItem): IStyleRule[];

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -62,6 +62,27 @@ export class AbstractStylesheetService {
             this._allStylesheets.set(s[0], s[1]);
         }
     }
+    async internalReparseStylesheet(name) {
+        let lst = this._allStylesheets;
+        if (this._documentStylesheets.has(name))
+            lst = this._documentStylesheets;
+        if (this._stylesheets.has(name))
+            lst = this._stylesheets;
+        const ss = lst.get(name);
+        let ast = null;
+        try {
+            ast = await this.internalParse(ss.stylesheet.content);
+        }
+        catch (err) {
+            console.warn("error parsing stylesheet", name, err);
+        }
+        const v = {
+            stylesheet: ss.stylesheet,
+            ast: ast
+        };
+        this._stylesheets.set(name, v);
+        this._allStylesheets.set(name, v);
+    }
     //TODO: rename to externalStylesheets
     getStylesheets() {
         let stylesheets = [];
@@ -80,6 +101,8 @@ export class AbstractStylesheetService {
     stylesheetChanged = new TypedEvent();
     stylesheetsChanged = new TypedEvent();
     elementMatchesASelector(designItem, selectors) {
+        if (designItem == null)
+            return true;
         for (let selector of selectors) {
             if (selector == ':host') {
                 selector = DesignerCanvas.cssprefixConstant;

package/dist/elements/services/stylesheetService/IStylesheetService.d.ts

@@ -23,6 +23,7 @@ export interface IDocumentStylesheet extends IStylesheet {
 export interface IStylesheetService {
     setStylesheets(stylesheets: IStylesheet[]): Promise<void>;
     getStylesheets(): IStylesheet[];
+    getRules(selector: string): IStyleRule[];
     setDocumentStylesheets(stylesheets: IDocumentStylesheet[]): Promise<void>;
     getAppliedRules(designItem: IDesignItem): IStyleRule[];
     getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
@@ -30,8 +31,9 @@ export interface IStylesheetService {
     updateDeclarationValueWithoutUndo(declaration: IStyleDeclaration, value: string, important: boolean): any;
     insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
-    updateCompleteStylesheet(name: string, newStyle: string): void;
-    updateCompleteStylesheetWithoutUndo(name: string, newStyle: string): void;
+    updateCompleteStylesheet(name: string, newStyle: string): Promise<void>;
+    updateCompleteStylesheetWithoutUndo(name: string, newStyle: string): Promise<void>;
+    addRule(stylesheet: IStylesheet, selector: string): Promise<IStyleRule>;
     stylesheetChanged: TypedEvent<{
         name: string;
         newStyle: string;

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

@@ -638,8 +638,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.clickOverlay.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
             this.clickOverlay.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
             this.clickOverlay.addEventListener(EventNames.Drop, event => this._onDrop(event));
-            this.clickOverlay.addEventListener(EventNames.KeyDown, this.onKeyDown, true);
-            this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp, true);
+            this.clickOverlay.addEventListener(EventNames.KeyDown, this.onKeyDown);
+            this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp);
             this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClick, true);
             this.clickOverlay.addEventListener('zoom', (e) => {
                 this.zoomFactor = this.zoomFactor + (e.detail.diff / 10);
@@ -849,6 +849,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     _onDblClick(event) {
         event.preventDefault();
+        if (event.target === this.overlayLayer)
+            return;
         if (this.serviceContainer.globalContext.tool == null || this.serviceContainer.globalContext.tool === this.serviceContainer.designerTools.get(NamedTools.Pointer)) {
             this.extensionManager.removeExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.PrimarySelectionRefreshed);
             this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
@@ -880,6 +882,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     onKeyUp(event) {
+        if (this._ignoreEvent === event)
+            return;
         if (this._moveGroup) {
             this._moveGroup.commit();
             this._moveGroup = null;
@@ -887,6 +891,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         event.preventDefault();
     }
     onKeyDown(event) {
+        if (this._ignoreEvent === event)
+            return;
         if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey)
             this.executeCommand({ type: CommandType.undo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'z' && event.shiftKey)

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

@@ -7,7 +7,7 @@ import { OverlayLayer } from './OverlayLayer.js';
 import { IPoint } from '../../../../interfaces/IPoint.js';
 export type toolbarObject = SVGForeignObjectElement & {
     updatePosition: (position: IPoint) => void;
-    getById: <T>(id: string) => T;
+    getById: <T extends HTMLElement>(id: string) => T;
 };
 export declare abstract class AbstractExtension extends AbstractExtensionBase implements IDesignerExtension {
     protected extendedItem: IDesignItem;

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

@@ -11,8 +11,18 @@ export class AbstractExtension extends AbstractExtensionBase {
     }
     createToolbar(template, width, height, overlayLayer = OverlayLayer.Foreground) {
         const element = template.content.cloneNode(true);
-        element.querySelectorAll('*').forEach(x => x.onpointerdown = (e) => {
-            this.designerCanvas.ignoreEvent(e);
+        element.querySelectorAll('*').forEach(x => {
+            x.onpointerdown = (e) => {
+                this.designerCanvas.ignoreEvent(e);
+            };
+            if (x instanceof HTMLInputElement) {
+                x.addEventListener('keydown', (e) => {
+                    this.designerCanvas.ignoreEvent(e);
+                }, { capture: true });
+                x.addEventListener('keyup', (e) => {
+                    this.designerCanvas.ignoreEvent(e);
+                }, { capture: true });
+            }
         });
         const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
         foreignObject.classList.add('svg-toolbar-container');
@@ -23,6 +33,17 @@ export class AbstractExtension extends AbstractExtensionBase {
         foreignObject.style.transformBox = 'fill-box';
         this._addOverlay(foreignObject, overlayLayer);
         foreignObject.updatePosition = (position) => {
+            foreignObject.style.scale = '' + 1 / this.designerCanvas.zoomFactor;
+            const rect = this.overlayLayerView.getBoundingClientRect();
+            const innerRect = foreignObject.children[0].getBoundingClientRect();
+            const scaleFactor = this.designerCanvas.scaleFactor;
+            const effectiveRectWidth = (rect.width / scaleFactor) - this.designerCanvas.canvasOffset.x * scaleFactor;
+            if (innerRect.width + (position.x * scaleFactor) > effectiveRectWidth) {
+                position.x = (effectiveRectWidth - innerRect.width) / scaleFactor;
+            }
+            if (position.x < -this.designerCanvas.canvasOffset.x) {
+                position.x = -this.designerCanvas.canvasOffset.x;
+            }
             foreignObject.setAttribute('x', '' + position.x);
             foreignObject.setAttribute('y', '' + position.y);
         };

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

@@ -0,0 +1,20 @@
+import { AbstractExtension, toolbarObject } from "./AbstractExtension.js";
+import { IExtensionManager } from "./IExtensionManger.js";
+import { IDesignerCanvas } from "../IDesignerCanvas.js";
+import { IDesignItem } from "../../../item/IDesignItem.js";
+export declare class BasicStackedToolbarExtension extends AbstractExtension {
+    protected static basicTemplate: string;
+    protected _toolbar: toolbarObject;
+    protected _size: {
+        width: number;
+        height: number;
+    };
+    protected _display: string;
+    protected _inline: string;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    updateDisplayValue(): Promise<void>;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    protected _addStyleButton(styleAndControlName: string): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,21 @@
+import { AbstractExtension, toolbarObject } from "./AbstractExtension.js";
+import { IExtensionManager } from "./IExtensionManger.js";
+import { IDesignerCanvas } from "../IDesignerCanvas.js";
+import { IDesignItem } from "../../../item/IDesignItem.js";
+export declare class BasicStackedToolbarExtension extends AbstractExtension {
+    protected static basicTemplate: string;
+    protected static toolBars: toolbarObject[];
+    protected _toolbar: toolbarObject;
+    protected _size: {
+        width: number;
+        height: number;
+    };
+    protected _display: string;
+    protected _inline: string;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    updateDisplayValue(): Promise<void>;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    protected _addStyleButton(styleAndControlName: string): void;
+    dispose(): void;
+}