@node-projects/web-component-designer 0.0.37 → 0.0.43

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

@@ -137,7 +137,7 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
             let htmlItem = item;
             const tabHeaderDiv = this._elementMap.get(htmlItem);
             this._moreContainer.appendChild(tabHeaderDiv);
-            if (w < this._headerDiv.clientWidth) {
+            if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
                 this._headerDiv.appendChild(tabHeaderDiv);
                 w += tabHeaderDiv.clientWidth;
             }

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.d.ts

@@ -6,10 +6,26 @@ export declare type ThicknessEditorValueChangedEventArgs = {
 export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
-    private _value;
-    get value(): string;
-    set value(value: string);
-    valueChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    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;

package/dist/elements/controls/ThicknessEditor.js

@@ -57,23 +57,88 @@ export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
       <div id="rect"></div>
     </div>
   `;
-    _value;
-    get value() {
-        return this._value;
+    _leftInput;
+    _topInput;
+    _rightInput;
+    _bottomInput;
+    _valueLeft;
+    get valueLeft() {
+        return this._valueLeft;
     }
-    set value(value) {
-        const oldValue = this._value;
-        this._value = value;
-        this._updateValue();
-        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
+    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 });
+        }
     }
-    valueChanged = new TypedEvent();
+    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();
     }
 }

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