@node-projects/web-component-designer 0.0.40 → 0.0.46

package/dist/commandHandling/CommandType.d.ts

@@ -12,12 +12,12 @@ export declare enum CommandType {
     'moveToBack' = "moveToBack",
     'arrangeLeft' = "arrangeLeft",
     'arrangeCenter' = "arrangeCenter",
-    'arrangeRigtht' = "arrangeRigtht",
+    'arrangeRight' = "arrangeRight",
     'arrangeTop' = "arrangeTop",
     'arrangeMiddle' = "arrangeMiddle",
     'arrangeBottom' = "arrangeBottom",
-    'adjustWidth' = "adjustWidth",
-    'adjustHeight' = "adjustHeight",
+    'unifyWidth' = "unifyWidth",
+    'unifyHeight' = "unifyHeight",
     'distributeHorizontal' = "distributeHorizontaly",
     'distributeVertical' = "distributeVertical",
     'setTool' = "setTool",

package/dist/commandHandling/CommandType.js

@@ -13,12 +13,12 @@ export var CommandType;
     CommandType["moveToBack"] = "moveToBack";
     CommandType["arrangeLeft"] = "arrangeLeft";
     CommandType["arrangeCenter"] = "arrangeCenter";
-    CommandType["arrangeRigtht"] = "arrangeRigtht";
+    CommandType["arrangeRight"] = "arrangeRight";
     CommandType["arrangeTop"] = "arrangeTop";
     CommandType["arrangeMiddle"] = "arrangeMiddle";
     CommandType["arrangeBottom"] = "arrangeBottom";
-    CommandType["adjustWidth"] = "adjustWidth";
-    CommandType["adjustHeight"] = "adjustHeight";
+    CommandType["unifyWidth"] = "unifyWidth";
+    CommandType["unifyHeight"] = "unifyHeight";
     CommandType["distributeHorizontal"] = "distributeHorizontaly";
     CommandType["distributeVertical"] = "distributeVertical";
     CommandType["setTool"] = "setTool";

package/dist/elements/controls/NumericInput.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,6 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class NumericPopup extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    ready(): void;
+}

package/dist/elements/controls/NumericPopup.js

@@ -0,0 +1,39 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
+export class NumericPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    :host {
+    }
+    .predefined {
+      grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+      grid-template-columns: 1fr 1fr;
+    }
+  `;
+    static template = html `
+    <div>
+      <input type="range" min="0" max="100">
+      <input id="value">
+      <select>
+        <option>px</option>
+        <option>%</option>
+        <option>pt</option>
+        <option>em</option>
+        <option>rem</option>
+        <option>auto</option>
+      </select>
+    </div>
+    <div class="predefined">
+      <button>Auto</button>
+      <button>0</button>
+      <button>10</button>
+      <button>20</button>
+      <button>40</button>
+      <button>50</button>
+      <button>70</button>
+      <button>90</button>
+      <button>100</button>
+    </div>
+  `;
+    ready() {
+    }
+}
+customElements.define('node-projects-numeric-popup', NumericPopup);

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

@@ -0,0 +1,16 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare type ImageButtonListSelectorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _value;
+    get value(): string;
+    set value(value: string);
+    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
+    private _input;
+    constructor();
+    private _updateValue;
+}

package/dist/elements/controls/NumericStyleInput.js

@@ -0,0 +1,56 @@
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    :host {
+    }
+
+    input {
+      cursor: ew-resize;
+    }
+  `;
+    static template = html `
+    <input id="input" type="text">
+    <select id="select">
+      <option>px</option>
+      <option>%</option>
+      <option>pt</option>
+    </select>
+  `;
+    _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();
+    _input;
+    //private _select: HTMLSelectElement;
+    constructor() {
+        super();
+        this._input = this._getDomElement('input');
+        //this._select = this._getDomElement<HTMLSelectElement>('select');
+        let oldX = null;
+        this._input.onpointerdown = (e) => {
+            oldX = e.x;
+            this._input.setPointerCapture(e.pointerId);
+        };
+        this._input.onpointermove = (e) => {
+            if (oldX !== null) {
+                let diffX = e.x - oldX;
+                if (diffX != 0)
+                    this._input.value = parseInt(this._input.value) + diffX;
+            }
+        };
+        this._input.onpointerup = (e) => {
+            oldX = null;
+            this._input.releasePointerCapture(e.pointerId);
+        };
+    }
+    _updateValue() {
+    }
+}
+customElements.define('node-projects-numeric-style-input', NumericStyleInput);

package/dist/elements/controls/ThicknessEditor copy.d.ts

@@ -0,0 +1,33 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare type ThicknessEditorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _leftInput;
+    private _topInput;
+    private _rightInput;
+    private _bottomInput;
+    private _valueLeft;
+    get valueLeft(): string;
+    set valueLeft(value: string);
+    valueLeftChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueTop;
+    get valueTop(): string;
+    set valueTop(value: string);
+    valueTopChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueRight;
+    get valueRight(): string;
+    set valueRight(value: string);
+    valueRightChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueBottom;
+    get valueBottom(): string;
+    set valueBottom(value: string);
+    valueBottomChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    property: string;
+    unsetValue: string;
+    _updateValue(): void;
+    ready(): void;
+}

package/dist/elements/controls/ThicknessEditor copy.js

@@ -0,0 +1,145 @@
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+  :host {
+    margin: 4px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  #container {
+    display: grid;
+    grid-template-columns: minmax(30px, 40px) minmax(30px, 60px) minmax(30px, 40px);
+    grid-template-rows: auto;
+    grid-template-areas: 
+          "  .   top     ."
+          "left middle right"
+          "  .  bottom   .";
+    column-gap: 2px;
+    row-gap: 2px;
+  }
+  input {
+    width: 20px;
+    text-align: center;
+    font-size: 10px;
+    height: 20px;
+    padding: 0;
+  }
+  #left {
+    grid-area: left;
+    justify-self: end;
+  }
+  #top {
+    grid-area: top;
+    align-self: end;
+    justify-self: center;
+  }
+  #right {
+    grid-area: right;
+    justify-self: start;
+  }
+  #bottom {
+    grid-area: bottom;
+    align-self: start;
+    justify-self: center;
+  }
+  #rect {
+    grid-area: middle;
+    border: 1px solid black;
+    background: lightgray;
+  }
+  `;
+    static template = html `
+    <div id="container">
+      <input id="left">
+      <input id="top">
+      <input id="right">
+      <input id="bottom">
+      <div id="rect"></div>
+    </div>
+  `;
+    _leftInput;
+    _topInput;
+    _rightInput;
+    _bottomInput;
+    _valueLeft;
+    get valueLeft() {
+        return this._valueLeft;
+    }
+    set valueLeft(value) {
+        const oldValue = this._valueLeft;
+        this._valueLeft = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueLeftChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueLeftChanged = new TypedEvent();
+    _valueTop;
+    get valueTop() {
+        return this._valueTop;
+    }
+    set valueTop(value) {
+        const oldValue = this._valueTop;
+        this._valueTop = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueTopChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueTopChanged = new TypedEvent();
+    _valueRight;
+    get valueRight() {
+        return this._valueRight;
+    }
+    set valueRight(value) {
+        const oldValue = this._valueRight;
+        this._valueRight = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueRightChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueRightChanged = new TypedEvent();
+    _valueBottom;
+    get valueBottom() {
+        return this._valueBottom;
+    }
+    set valueBottom(value) {
+        const oldValue = this._valueBottom;
+        this._valueBottom = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueBottomChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueBottomChanged = new TypedEvent();
+    property;
+    unsetValue;
+    _updateValue() {
+        this._leftInput.value = this.valueLeft;
+        this._topInput.value = this.valueTop;
+        this._rightInput.value = this.valueRight;
+        this._bottomInput.value = this._valueBottom;
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this._leftInput = this._getDomElement('left');
+        this._topInput = this._getDomElement('top');
+        this._rightInput = this._getDomElement('right');
+        this._bottomInput = this._getDomElement('bottom');
+        this._leftInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueLeft = this._leftInput.value; };
+        this._topInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueTop = this._topInput.value; };
+        this._rightInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueRight = this._rightInput.value; };
+        this._bottomInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueBottom = this._bottomInput.value; };
+        this._leftInput.onblur = (e) => this._valueLeft = this._leftInput.value;
+        this._topInput.onblur = (e) => this._valueTop = this._topInput.value;
+        this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value;
+        this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value;
+        this._updateValue();
+    }
+}
+customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/helper/LayoutHelper.js

@@ -0,0 +1,4 @@
+"use strict";
+//todo
+//this function should return the correct property to change a layout, for example left/right when left or right is used,
+//maybe margin on grid? or transform??

package/dist/elements/item/DesignItem.js

@@ -1,6 +1,8 @@
 import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction';
 import { NodeType } from './NodeType';
 import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction';
+//import { PropertyChangeAction } from '../services/undoService/transactionItems/PropertyChangeAction';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 import { CssAttributeParser } from '../helper/CssAttributeParser.js';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
@@ -66,6 +68,9 @@ export class DesignItem {
         return this.getOrCreateDesignItem(this.element.parentNode);
     }
     insertChild(designItem, index) {
+        //todo... via undoredo system....
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
         if (designItem.parent) {
             designItem.parent.removeChild(designItem);
         }
@@ -79,8 +84,13 @@ export class DesignItem {
             this.node.insertBefore(designItem.node, el.element);
             this._childArray.splice(index, 0, designItem);
         }
+        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
     }
     removeChild(designItem) {
+        //todo... via undoredo system....
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
         const index = this._childArray.indexOf(designItem);
         if (index > -1) {
             this._childArray.splice(index, 1);

package/dist/elements/services/BaseServiceContainer.js

@@ -17,7 +17,6 @@ export class BaseServiceContainer {
     forSomeServicesTillResult(service, callback) {
         let services = this.getServices(service);
         if (services == null) {
-            console.warn('no services of type: ' + service + ' found');
             return null;
         }
         for (let index = services.length - 1; index >= 0; index--) {
@@ -31,7 +30,6 @@ export class BaseServiceContainer {
     getLastServiceWhere(service, callback) {
         let services = this.getServices(service);
         if (services == null) {
-            console.warn('no services of type: ' + service + ' found');
             return null;
         }
         for (let index = services.length - 1; index >= 0; index--) {

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -44,6 +44,7 @@ import { PrepareElementsForDesignerService } from './instanceService/PrepareElem
 import { DragDropService } from './dragDropService/DragDropService';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 import { CopyPasteService } from './copyPasteService/CopyPasteService';
+import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -63,6 +64,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("prepareElementsForDesignerService", new PrepareElementsForDesignerService());
     serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.register("copyPasteService", new CopyPasteService());
+    serviceContainer.register("modelCommandService", new DefaultModelCommandService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider()

package/dist/elements/services/InstanceServiceContainer.d.ts

@@ -3,6 +3,7 @@ import { IUndoService } from './undoService/IUndoService';
 import { BaseServiceContainer } from './BaseServiceContainer';
 import { IContentService } from './contentService/IContentService';
 import { IDesignContext } from '../widgets/designerView/IDesignContext';
+import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 interface InstanceServiceNameMap {
     "undoService": IUndoService;
     "selectionService": ISelectionService;
@@ -10,6 +11,8 @@ interface InstanceServiceNameMap {
 }
 export declare class InstanceServiceContainer extends BaseServiceContainer<InstanceServiceNameMap> {
     designContext: IDesignContext;
+    readonly designerCanvas: IDesignerCanvas;
+    constructor(designerCanvas: IDesignerCanvas);
     get undoService(): IUndoService;
     get selectionService(): ISelectionService;
     get contentService(): IContentService;

package/dist/elements/services/InstanceServiceContainer.js

@@ -2,6 +2,11 @@ import { BaseServiceContainer } from './BaseServiceContainer';
 import { DesignContext } from '../widgets/designerView/DesignContext';
 export class InstanceServiceContainer extends BaseServiceContainer {
     designContext = new DesignContext();
+    designerCanvas;
+    constructor(designerCanvas) {
+        super();
+        this.designerCanvas = designerCanvas;
+    }
     get undoService() {
         return this.getLastService('undoService');
     }

package/dist/elements/services/ServiceContainer.d.ts

@@ -22,6 +22,7 @@ import { IPrepareElementsForDesignerService } from './instanceService/IPrepareEl
 import { IDragDropService } from './dragDropService/IDragDropService';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
+import { IModelCommandService } from "./modelCommandService/IModelCommandService.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -37,6 +38,7 @@ interface ServiceNameMap {
     "prepareElementsForDesignerService": IPrepareElementsForDesignerService;
     "dragDropService": IDragDropService;
     "copyPasteService": ICopyPasteService;
+    "modelCommandService": IModelCommandService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -62,5 +64,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get prepareElementsForDesignerService(): IPrepareElementsForDesignerService;
     get dragDropService(): IDragDropService;
     get copyPasteService(): ICopyPasteService;
+    get modelCommandService(): IModelCommandService;
 }
 export {};

package/dist/elements/services/ServiceContainer.js

@@ -54,4 +54,7 @@ export class ServiceContainer extends BaseServiceContainer {
     get copyPasteService() {
         return this.getLastService('copyPasteService');
     }
+    get modelCommandService() {
+        return this.getLastService('modelCommandService');
+    }
 }

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -9,12 +9,12 @@ export class HtmlWriterService {
     }
     _conditionalyWriteIndent(indentedTextWriter, designItem) {
         if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
-            (designItem.element.previousSibling instanceof HTMLElement && !isInline(designItem.element.previousSibling)))
+            (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)))
             indentedTextWriter.writeIndent();
     }
     _conditionalyWriteNewline(indentedTextWriter, designItem) {
         if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
-            (designItem.element.nextSibling instanceof HTMLElement && !isInline(designItem.element.nextSibling)))
+            (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)))
             indentedTextWriter.writeNewline();
     }
     write(indentedTextWriter, designItem, options, designItemsAssignmentList) {

package/dist/elements/services/modelCommandService/DefaultInstanceService.d.ts

@@ -0,0 +1,8 @@
+import { IInstanceService } from './IInstanceService';
+import { IElementDefinition } from '../elementsService/IElementDefinition';
+import type { ServiceContainer } from '../ServiceContainer';
+import type { InstanceServiceContainer } from '../InstanceServiceContainer';
+import { IDesignItem } from '../../item/IDesignItem';
+export declare class DefaultInstanceService implements IInstanceService {
+    getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem>;
+}

package/dist/elements/services/modelCommandService/DefaultInstanceService.js

@@ -0,0 +1,14 @@
+import { DesignItem } from '../../item/DesignItem';
+export class DefaultInstanceService {
+    handleMoveCommand(command) {
+        let sel = this.instanceServiceContainer.selectionService.primarySelection;
+        if (command == CommandType.moveBackward)
+            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.previousElementSibling), 'beforebegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
+        else if (command == CommandType.moveForward)
+            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.nextElementSibling), 'afterend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
+        else if (command == CommandType.moveToBack)
+            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'afterbegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
+        else if (command == CommandType.moveToFront)
+            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'beforeend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
+    }
+}

package/dist/elements/services/modelCommandService/DefaultModelCommandService.d.ts

@@ -0,0 +1,7 @@
+import { IUiCommand } from "../../../commandHandling/IUiCommand.js";
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IModelCommandService } from "./IModelCommandService.js";
+export declare class DefaultModelCommandService implements IModelCommandService {
+    canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): boolean;
+    executeCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): Promise<boolean>;
+}

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -0,0 +1,68 @@
+import { CommandType } from "../../../commandHandling/CommandType.js";
+import { DesignItem } from "../../item/DesignItem.js";
+import { MoveElementInDomAction } from "../undoService/transactionItems/MoveElementInDomAction.js";
+export class DefaultModelCommandService {
+    canExecuteCommand(designerCanvas, command) {
+        if (command.type == CommandType.moveBackward ||
+            command.type == CommandType.moveForward ||
+            command.type == CommandType.moveToBack ||
+            command.type == CommandType.moveToFront)
+            return designerCanvas.instanceServiceContainer.selectionService.primarySelection != null;
+        if (command.type == CommandType.arrangeBottom ||
+            command.type == CommandType.arrangeCenter ||
+            command.type == CommandType.arrangeLeft ||
+            command.type == CommandType.arrangeMiddle ||
+            command.type == CommandType.arrangeRight ||
+            command.type == CommandType.arrangeTop ||
+            command.type == CommandType.unifyHeight ||
+            command.type == CommandType.unifyWidth)
+            return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1;
+        return null;
+    }
+    async executeCommand(designerCanvas, command) {
+        let sel = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
+        if (command.type == CommandType.moveBackward)
+            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.previousElementSibling), 'beforebegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
+        else if (command.type == CommandType.moveForward)
+            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.nextElementSibling), 'afterend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
+        else if (command.type == CommandType.moveToBack)
+            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'afterbegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
+        else if (command.type == CommandType.moveToFront)
+            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'beforeend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
+        else if (command.type == CommandType.arrangeLeft) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeLeft');
+            const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('left', left);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.arrangeTop) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeTop');
+            const top = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('top');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('top', top);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.unifyHeight) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyHeight');
+            const height = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('height');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('height', height);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.unifyWidth) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyWidth');
+            const width = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('width');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('width', width);
+            }
+            grp.commit();
+        }
+        else
+            return null;
+        return true;
+    }
+}

package/dist/elements/services/modelCommandService/IInstanceService.d.ts

@@ -0,0 +1,8 @@
+import { IService } from '../IService';
+import { IElementDefinition } from '../elementsService/IElementDefinition';
+import type { ServiceContainer } from '../ServiceContainer';
+import type { InstanceServiceContainer } from '../InstanceServiceContainer';
+import { IDesignItem } from '../../item/IDesignItem';
+export interface IInstanceService extends IService {
+    getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem>;
+}

package/dist/elements/services/modelCommandService/IInstanceService.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/modelCommandService/IModelCommandService.d.ts

@@ -0,0 +1,7 @@
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
+import { IService } from '../IService';
+export interface IModelCommandService extends IService {
+    canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): boolean | null;
+    executeCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): any;
+}

package/dist/elements/services/modelCommandService/IModelCommandService.js

@@ -0,0 +1 @@
+export {};

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

@@ -89,9 +89,9 @@ export class DefaultPlacementService {
         let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         for (const designItem of items) {
             let movedElement = designItem.element;
-            let oldLeft = parseInt(movedElement.style.left);
+            let oldLeft = parseFloat(movedElement.style.left);
             oldLeft = Number.isNaN(oldLeft) ? 0 : oldLeft;
-            let oldTop = parseInt(movedElement.style.top);
+            let oldTop = parseFloat(movedElement.style.top);
             oldTop = Number.isNaN(oldTop) ? 0 : oldTop;
             //let oldPosition = movedElement.style.position;
             designItem.element.style.transform = null;

package/dist/elements/services/undoService/UndoService.d.ts

@@ -2,10 +2,13 @@ import { ITransactionItem } from './ITransactionItem.js';
 import { ChangeGroup } from "./ChangeGroup.js";
 import { IUndoService } from './IUndoService.js';
 import { IDesignItem } from '../../item/IDesignItem';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export declare class UndoService implements IUndoService {
     private _undoStack;
     private _redoStack;
     private _transactionStack;
+    private _designerCanvas;
+    constructor(designerCanvas?: IDesignerCanvas);
     openGroup(title: string, affectedItems: IDesignItem[]): ChangeGroup;
     private commitTransactionItem;
     private abortTransactionItem;

package/dist/elements/services/undoService/UndoService.js

@@ -6,6 +6,10 @@ export class UndoService {
     _undoStack = [];
     _redoStack = [];
     _transactionStack = [];
+    _designerCanvas;
+    constructor(designerCanvas) {
+        this._designerCanvas = designerCanvas;
+    }
     openGroup(title, affectedItems) {
         let t = new ChangeGroup(title, affectedItems, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t));
         this._transactionStack.push(t);
@@ -37,6 +41,7 @@ export class UndoService {
         else {
             this._transactionStack[this._transactionStack.length - 1].execute(item);
         }
+        this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
     }
     clear() {
         this._undoStack = [];
@@ -57,6 +62,7 @@ export class UndoService {
             this.clear();
             throw err;
         }
+        this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
     }
     redo() {
         if (!this.canRedo())
@@ -72,6 +78,7 @@ export class UndoService {
             this.clear();
             throw err;
         }
+        this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
     }
     canUndo() {
         return this._undoStack.length > 0;

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

@@ -2,12 +2,12 @@ import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
 export class DomConverter {
     static normalizeAttributeValue(value) {
         if (value)
-            return value.replace(/"/g, '"');
+            return value.replaceAll('"', '"');
         return value;
     }
     static normalizeContentValue(value) {
         if (value)
-            return value.replace(/</g, '&lt;');
+            return value.replaceAll('<', '&lt;').replaceAll(' ', '&nbsp;'); // !caution! -> this is not normal space, it's nbsp
         return value;
     }
     static IsSelfClosingElement(tag) {

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -6,7 +6,6 @@ import { IDesignerCanvas } from './IDesignerCanvas';
 import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { IPlacementView } from './IPlacementView';
-import { CommandType } from '../../../commandHandling/CommandType';
 import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
 import { IUiCommand } from '../../../commandHandling/IUiCommand';
 import { IExtensionManager } from "./extensions/IExtensionManger";
@@ -54,7 +53,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     handleCopyCommand(): Promise<void>;
     handlePasteCommand(): Promise<void>;
     handleDeleteCommand(): void;
-    handleMoveCommand(command: CommandType): void;
     initialize(serviceContainer: ServiceContainer): void;
     elementFromPoint(x: number, y: number): Element;
     connectedCallback(): void;

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

@@ -11,7 +11,6 @@ import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction';
 import { CommandType } from '../../../commandHandling/CommandType';
-import { MoveElementInDomAction } from '../../services/undoService/transactionItems/MoveElementInDomAction';
 import { DefaultHtmlParserService } from "../../services/htmlParserService/DefaultHtmlParserService";
 import { ExtensionType } from "./extensions/ExtensionType";
 import { ExtensionManager } from "./extensions/ExtensionManager";
@@ -116,8 +115,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
-        this.instanceServiceContainer = new InstanceServiceContainer();
-        this.instanceServiceContainer.register("undoService", new UndoService);
+        this.instanceServiceContainer = new InstanceServiceContainer(this);
+        this.instanceServiceContainer.register("undoService", new UndoService(this));
         this.instanceServiceContainer.register("selectionService", new SelectionService);
         this.extensionManager = new ExtensionManager(this);
         this._onKeyDownBound = this.onKeyDown.bind(this);
@@ -162,6 +161,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     /* --- start IUiCommandHandler --- */
     async executeCommand(command) {
+        const modelCommandService = this.serviceContainer.modelCommandService;
+        if (modelCommandService) {
+            let handeled = await modelCommandService.executeCommand(this, command);
+            if (handeled != null)
+                return;
+        }
         switch (command.type) {
             case CommandType.screenshot:
                 {
@@ -194,12 +199,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             case CommandType.redo:
                 this.instanceServiceContainer.undoService.redo();
                 break;
-            case CommandType.moveToFront:
-            case CommandType.moveForward:
-            case CommandType.moveBackward:
-            case CommandType.moveToBack:
-                this.handleMoveCommand(command.type);
-                break;
             case CommandType.copy:
                 this.handleCopyCommand();
                 break;
@@ -216,6 +215,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     canExecuteCommand(command) {
+        const modelCommandService = this.serviceContainer.modelCommandService;
+        if (modelCommandService) {
+            let handeled = modelCommandService.canExecuteCommand(this, command);
+            if (handeled !== null)
+                return handeled;
+        }
         if (command.type === CommandType.undo) {
             return this.instanceServiceContainer.undoService.canUndo();
         }
@@ -256,17 +261,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.undoService.execute(new DeleteAction(items, this.extensionManager));
         this.instanceServiceContainer.selectionService.setSelectedElements(null);
     }
-    handleMoveCommand(command) {
-        let sel = this.instanceServiceContainer.selectionService.primarySelection;
-        if (command == CommandType.moveBackward)
-            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.previousElementSibling), 'beforebegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
-        else if (command == CommandType.moveForward)
-            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.nextElementSibling), 'afterend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
-        else if (command == CommandType.moveToBack)
-            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'afterbegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
-        else if (command == CommandType.moveToFront)
-            this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'beforeend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
-    }
     initialize(serviceContainer) {
         this.serviceContainer = serviceContainer;
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);

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

@@ -13,7 +13,7 @@ export class PrimarySelectionDefaultExtension extends AbstractExtension {
     refresh() {
         const boundRect = this.extendedItem.element.getBoundingClientRect();
         this._rect = this._drawRect(boundRect.x - this.designerCanvas.containerBoundingRect.x, boundRect.y - this.designerCanvas.containerBoundingRect.y - 16, 60, 15, 'svg-primary-selection-move', this._rect);
-        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', boundRect.x - this.designerCanvas.containerBoundingRect.x, boundRect.y - this.designerCanvas.containerBoundingRect.y - 5, 'svg-text', this._text);
+        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', boundRect.x - this.designerCanvas.containerBoundingRect.x, boundRect.y - this.designerCanvas.containerBoundingRect.y - 5, 'svg-text-primary', this._text);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -6,4 +6,5 @@ import { IExtensionManager } from "./IExtensionManger";
 export declare class PrimarySelectionDefaultExtensionProvider 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/PrimarySelectionDefaultExtensionProvider.js

@@ -1,4 +1,5 @@
 import { PrimarySelectionDefaultExtension } from "./PrimarySelectionDefaultExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
 export class PrimarySelectionDefaultExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
@@ -6,4 +7,7 @@ export class PrimarySelectionDefaultExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new PrimarySelectionDefaultExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-text-primary { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
+  `;
 }

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

@@ -8,4 +8,5 @@ export declare class ResizeExtensionProvider implements IDesignerExtensionProvid
     constructor(resizeAllSelected?: boolean);
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
 }

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

@@ -1,4 +1,5 @@
 import { ResizeExtension } from "./ResizeExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
 export class ResizeExtensionProvider {
     resizeAllSelected;
     constructor(resizeAllSelected = false) {
@@ -10,4 +11,7 @@ export class ResizeExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new ResizeExtension(extensionManager, designerView, designItem, this.resizeAllSelected);
     }
+    style = css `
+    .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
+  `;
 }

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

@@ -17,8 +17,6 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
     .svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; }
     .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: all }
-    .svg-text { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
-    .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
     .svg-position  { stroke: black; stroke-dasharray: 2; }
     .svg-path { stroke: #3899ec; fill: orange; pointer-events: all }
     .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }

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

@@ -24,7 +24,6 @@ export class RectangleSelectorTool {
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
-                    console.warn(currentPoint);
                     let w = currentPoint.x - this._initialPoint.x;
                     let h = currentPoint.y - this._initialPoint.y;
                     if (w >= 0) {

package/dist/index.d.ts

@@ -49,6 +49,8 @@ export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export type { IInstanceService } from "./elements/services/instanceService/IInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
 export type { IPrepareElementsForDesignerService } from "./elements/services/instanceService/IPrepareElementsForDesignerService.js";
+export type { IModelCommandService } from "./elements/services/modelCommandService/IModelCommandService.js";
+export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";

package/dist/index.js

@@ -28,6 +28,7 @@ export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
+export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.40",
+  "version": "0.0.46",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",