@node-projects/web-component-designer 0.0.38 → 0.0.44

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/controls/ThicknessEditor.js

@@ -123,7 +123,6 @@ export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
     }
     ready() {
         this._parseAttributesToProperties();
-        this._updateValue();
         this._leftInput = this._getDomElement('left');
         this._topInput = this._getDomElement('top');
         this._rightInput = this._getDomElement('right');
@@ -140,6 +139,7 @@ export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
         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/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/ServiceContainer.d.ts

@@ -21,6 +21,8 @@ import { ISnaplinesProviderService } from "./placementService/ISnaplinesProvider
 import { IPrepareElementsForDesignerService } from './instanceService/IPrepareElementsForDesignerService';
 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;
@@ -36,6 +38,7 @@ interface ServiceNameMap {
     "prepareElementsForDesignerService": IPrepareElementsForDesignerService;
     "dragDropService": IDragDropService;
     "copyPasteService": ICopyPasteService;
+    "modelCommandService": IModelCommandService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -43,6 +46,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;
     readonly designerTools: Map<string | NamedTools, ITool>;
@@ -60,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

@@ -8,6 +8,7 @@ export class ServiceContainer extends BaseServiceContainer {
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();
+    designerPointerExtensions = [];
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);
     designerTools = new Map();
@@ -53,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;