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

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('--'))

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/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);

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

@@ -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);

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

@@ -23,6 +23,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 BasicDisplayToolbarExtension 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 BasicDisplayToolbarExtension 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', () => {
+            this.extendedItem.updateStyleInSheetOrLocal(styleAndControlName, ctl.value);
+        });
+        ctl.value = cs[styleAndControlName];
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -24,6 +24,7 @@ export class ExtensionManager {
         designerCanvas.instanceServiceContainer.contentService.onContentChanged.on(this._contentChanged.bind(this));
         designerCanvas.serviceContainer.globalContext.onToolChanged.on(() => {
             this.removeExtension(designerCanvas.instanceServiceContainer.selectionService.primarySelection, ExtensionType.PrimarySelectionRefreshed);
+            this._lastPrimarySelectionRefreshItem = null;
         });
     }
     connected() {

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

@@ -1,12 +1,9 @@
 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;
+import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
+import { IExtensionManager } from "../IExtensionManger.js";
+export declare class BlockToolbarExtension extends BasicDisplayToolbarExtension {
+    protected static template: HTMLTemplateElement;
     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

@@ -1,35 +1,16 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-export class BlockToolbarExtension extends AbstractExtension {
+import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
+export class BlockToolbarExtension extends BasicDisplayToolbarExtension {
     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;
+      <div style="height: 100%; width: 100%;">
+        ${BasicDisplayToolbarExtension.basicTemplate}
+      </div>
+    `;
     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]);
-        };
+        super.extend(cache, event);
         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/block/BlockToolbarExtensionProvider.d.ts

@@ -6,4 +6,5 @@ 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;
+    readonly style: CSSStyleSheet;
 }

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

@@ -1,12 +1,31 @@
 import { BlockToolbarExtension } from './BlockToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
+import { css } from '@node-projects/base-custom-webcomponent';
 export class BlockToolbarExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'block')
-            return true;
+        if (designItem.nodeType === NodeType.Element) {
+            const d = getComputedStyle(designItem.element).display;
+            return d === 'block' || d === 'inline';
+        }
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new BlockToolbarExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+  node-projects-image-button-list-selector img {
+    height: 16px;
+    border: 1px solid black;
+    border-radius: 4px;
+    box-sizing: border-box;
+    pointer-events: auto;
+    cursor: pointer;
+  }
+  node-projects-image-button-list-selector img:hover {
+    background: lightgray;
+  }
+  node-projects-image-button-list-selector img:active {
+    translate: 1px 1px
+  }
+  `;
 }

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

@@ -1,12 +1,11 @@
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
 import { IExtensionManager } from '../IExtensionManger.js';
-export declare class FlexToolbarExtension extends AbstractExtension {
-    private static template;
-    private _toolbar;
+import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
+export declare class FlexToolbarExtension extends BasicDisplayToolbarExtension {
+    protected static template: HTMLTemplateElement;
     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;
+    protected _addFlexDirectionButton(): void;
+    rotateImagesAcordingFlexDirection(direction: string): void;
 }

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

@@ -1,35 +1,77 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-export class FlexToolbarExtension extends AbstractExtension {
+import { assetsPath } from "../../../../../Constants.js";
+import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
+export class FlexToolbarExtension extends BasicDisplayToolbarExtension {
     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>
+      ${BasicDisplayToolbarExtension.basicTemplate}
+      <node-projects-image-button-list-selector property="direction" no-value-in-header id="flex-direction">
+        <img data-value="row" src="${assetsPath}images/chromeDevtools/flex-direction-row-icon.svg">
+        <img data-value="column" src="${assetsPath}images/chromeDevtools/flex-direction-column-icon.svg">
+        <img data-value="row-reverse" style="transform: scaleX(-1);" src="${assetsPath}images/chromeDevtools/flex-direction-row-icon.svg">
+        <img data-value="column-reverse" style="transform: scaleY(-1);" src="${assetsPath}images/chromeDevtools/flex-direction-column-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="wrap" no-value-in-header id="flex-wrap">
+        <img data-value="nowrap" src="${assetsPath}images/chromeDevtools/flex-wrap-nowrap-icon.svg">
+        <img data-value="wrap" src="${assetsPath}images/chromeDevtools/flex-wrap-wrap-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="align-content" no-value-in-header id="align-content">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/align-content-flex-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/align-content-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/align-content-flex-end-icon.svg">
+        <img data-value="space-around" src="${assetsPath}images/chromeDevtools/align-content-space-around-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/align-content-space-evenly-icon.svg">
+        <img data-value="space-between" src="${assetsPath}images/chromeDevtools/align-content-space-between-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/align-content-stretch-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="justify-content" no-value-in-header id="justify-content">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/justify-content-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/justify-content-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/justify-content-end-icon.svg">
+        <img data-value="space-around" src="${assetsPath}images/chromeDevtools/justify-content-space-around-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/justify-content-space-evenly-icon.svg">
+        <img data-value="space-between" src="${assetsPath}images/chromeDevtools/justify-content-space-between-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="align-items" no-value-in-header id="align-items">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/align-items-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/align-items-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/align-items-end-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/align-items-stretch-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/align-items-baseline-icon.svg">
+      </node-projects-image-button-list-selector>
     </div>
   `;
-    _toolbar;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
+        this._size.width = 515;
     }
     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.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        };
+        super.extend(cache, event);
+        this._addFlexDirectionButton();
+        this._addStyleButton('flex-wrap');
+        this._addStyleButton('align-content');
+        this._addStyleButton('justify-content');
+        this._addStyleButton('align-items');
         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)) });
-        }
+    _addFlexDirectionButton() {
+        const cs = getComputedStyle(this.extendedItem.element);
+        const ctl = this._toolbar.getById('flex-direction');
+        ctl.addEventListener('value-changed', () => {
+            this.extendedItem.updateStyleInSheetOrLocal('flex-direction', ctl.value);
+            this.rotateImagesAcordingFlexDirection(ctl.value);
+        });
+        ctl.value = cs['flex-direction'];
+        this.rotateImagesAcordingFlexDirection(ctl.value);
     }
-    dispose() {
-        this._removeAllOverlays();
+    rotateImagesAcordingFlexDirection(direction) {
+        let angle = 0;
+        if (direction == 'column' || direction == 'column-reverse')
+            angle = -90;
+        this._toolbar.getById('flex-wrap').querySelectorAll('img').forEach(x => x.style.rotate = angle + 'deg');
+        this._toolbar.getById('align-content').querySelectorAll('img').forEach(x => x.style.rotate = angle + 'deg');
+        this._toolbar.getById('justify-content').querySelectorAll('img').forEach(x => x.style.rotate = angle + 'deg');
+        //@ts-ignore
+        this._toolbar.getById('align-items').querySelectorAll('img:nth-child(-n+4)').forEach(x => x.style.rotate = angle + 'deg');
     }
 }

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

@@ -2,8 +2,10 @@ import { FlexToolbarExtension } from './FlexToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
 export class FlexToolbarExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'flex')
-            return true;
+        if (designItem.nodeType === NodeType.Element) {
+            const d = getComputedStyle(designItem.element).display;
+            return d === 'flex' || d === 'inline-flex';
+        }
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

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

@@ -1,12 +1,9 @@
 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 _toolbar;
+import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
+export declare class GridToolbarExtension extends BasicDisplayToolbarExtension {
+    protected static template: HTMLTemplateElement;
     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/grid/GridToolbarExtension.js

@@ -1,14 +1,11 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-export class GridToolbarExtension extends AbstractExtension {
+import { BasicDisplayToolbarExtension } from "../BasicDisplayToolbarExtension.js";
+import { assetsPath } from "../../../../../Constants.js";
+export class GridToolbarExtension extends BasicDisplayToolbarExtension {
     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>flex</option>
-        <option selected>grid</option>
-      </select>
-      <select id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
+      ${BasicDisplayToolbarExtension.basicTemplate}
+      <select title="display" id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0; margin-right: 10px">
         <option>1x1</option>
         <option>1x16</option>
         <option>2x8</option>
@@ -17,20 +14,45 @@ export class GridToolbarExtension extends AbstractExtension {
         <option>16x1</option>
         <option>custom</option>
       </select>
+      <node-projects-image-button-list-selector property="align-content" no-value-in-header id="align-content">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/align-content-flex-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/align-content-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/align-content-flex-end-icon.svg">
+        <img data-value="space-around" src="${assetsPath}images/chromeDevtools/align-content-space-around-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/align-content-space-evenly-icon.svg">
+        <img data-value="space-between" src="${assetsPath}images/chromeDevtools/align-content-space-between-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/align-content-stretch-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="justify-content" no-value-in-header id="justify-content">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/justify-content-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/justify-content-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/justify-content-end-icon.svg">
+        <img data-value="space-around" src="${assetsPath}images/chromeDevtools/justify-content-space-around-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/justify-content-space-evenly-icon.svg">
+        <img data-value="space-between" src="${assetsPath}images/chromeDevtools/justify-content-space-between-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="align-items" no-value-in-header id="align-items">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/align-items-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/align-items-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/align-items-end-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/align-items-stretch-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/align-items-baseline-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="justify-items" no-value-in-header id="justify-items">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/justify-items-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/justify-items-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/justify-items-end-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/justify-items-stretch-icon.svg">
+      </node-projects-image-button-list-selector>
     </div>
   `;
-    _toolbar;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
+        this._size.width = 560;
     }
     extend(cache, event) {
+        super.extend(cache, event);
         const style = getComputedStyle(this.extendedItem.element);
-        this._toolbar = this.createToolbar(GridToolbarExtension.template, 200, 30);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.onchange = () => {
-            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
-            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        };
         const gridTypeEl = this._toolbar.getById('gridType');
         let op = document.createElement('option');
         op.innerText = style.gridTemplateColumns.split(' ').length + 'x' + style.gridTemplateRows.split(' ').length;
@@ -53,15 +75,10 @@ export class GridToolbarExtension extends AbstractExtension {
                 this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
             }
         };
+        this._addStyleButton('align-content');
+        this._addStyleButton('justify-content');
+        this._addStyleButton('align-items');
+        this._addStyleButton('justify-items');
         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/grid/GridToolbarExtensionProvider.js

@@ -2,8 +2,10 @@ import { GridToolbarExtension } from './GridToolbarExtension.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;
+        if (designItem.nodeType === NodeType.Element) {
+            const d = getComputedStyle(designItem.element).display;
+            return d === 'grid' || d === 'inline-grid';
+        }
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

package/dist/elements/widgets/designerView/tools/PointerTool.d.ts

@@ -6,6 +6,7 @@ import { ITool } from './ITool.js';
 import { ServiceContainer } from "../../../services/ServiceContainer.js";
 export declare class PointerTool implements ITool {
     cursor: string;
+    private _minMoveOffset;
     private _movedSinceStartedAction;
     private _initialPoint;
     private _actionType?;

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -5,6 +5,7 @@ import { ExtensionType } from '../extensions/ExtensionType.js';
 import { NamedTools } from './NamedTools.js';
 export class PointerTool {
     cursor = 'default';
+    _minMoveOffset = 5;
     _movedSinceStartedAction = false;
     _initialPoint;
     _actionType;
@@ -120,7 +121,7 @@ export class PointerTool {
             }
         }
         if (event.type === EventNames.PointerMove) {
-            this._movedSinceStartedAction = this._movedSinceStartedAction || currentPoint.x != this._initialPoint.x || currentPoint.y != this._initialPoint.y;
+            this._movedSinceStartedAction = this._movedSinceStartedAction || Math.abs(currentPoint.x - this._initialPoint.x) > this._minMoveOffset || Math.abs(currentPoint.y - this._initialPoint.y) > this._minMoveOffset;
             if (this._actionType == PointerActionType.DrawSelection)
                 this._actionType = PointerActionType.DrawingSelection;
         }

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -140,7 +140,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(async (e) => {
             this._pg.instanceServiceContainer = value;
             await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
-            if (this._instanceServiceContainer.selectionService.primarySelection.isRootItem) {
+            if (this._instanceServiceContainer.selectionService?.primarySelection?.isRootItem) {
                 this._configButton.style.display = 'none';
                 this._id.value = '';
                 this._content.value = '';

package/dist/index.d.ts

@@ -196,6 +196,7 @@ export * from "./elements/widgets/designerView/tools/ZoomTool.js";
 export type { IDesignerExtension } from "./elements/widgets/designerView/extensions/IDesignerExtension.js";
 export type { IDesignerExtensionProvider } from "./elements/widgets/designerView/extensions/IDesignerExtensionProvider.js";
 export type { IExtensionManager } from "./elements/widgets/designerView/extensions/IExtensionManger.js";
+export * from "./elements/widgets/designerView/extensions/BasicDisplayToolbarExtension.js";
 export * from "./elements/widgets/designerView/extensions/OverlayLayer.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";

package/dist/index.js

@@ -137,6 +137,7 @@ export * from "./elements/widgets/designerView/tools/PointerTool.js";
 export * from "./elements/widgets/designerView/tools/RectangleSelectorTool.js";
 export * from "./elements/widgets/designerView/tools/TextTool.js";
 export * from "./elements/widgets/designerView/tools/ZoomTool.js";
+export * from "./elements/widgets/designerView/extensions/BasicDisplayToolbarExtension.js";
 export * from "./elements/widgets/designerView/extensions/OverlayLayer.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
-  "description": "A UI designer for Polymer apps",
+  "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.108",
+  "version": "0.1.109",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",