@node-projects/web-component-designer 0.0.70 → 0.0.74

package/dist/elements/helper/CssCombiner.js

@@ -1,6 +1,7 @@
 export class CssCombiner {
     static _helperElement = document.createElement('div');
     //todo: inset, flex flow, place content...
+    //flex => flex-grow, flex-shrink, flex-basis
     static combine(styles, globalStyles) {
         let e = CssCombiner._helperElement;
         e.setAttribute('style', '');

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

@@ -24,12 +24,14 @@ export declare class DesignItem implements IDesignItem {
     get id(): string;
     set id(value: string);
     get isRootItem(): boolean;
-    private _childArray;
+    _childArray: IDesignItem[];
     get hasChildren(): boolean;
     children(): IterableIterator<IDesignItem>;
     get childCount(): number;
     get firstChild(): IDesignItem;
     get parent(): IDesignItem;
+    indexOf(designItem: IDesignItem): number;
+    insertAdjacentElement(designItem: IDesignItem, where: InsertPosition): void;
     insertChild(designItem: IDesignItem, index?: number): void;
     removeChild(designItem: IDesignItem): void;
     remove(): void;
@@ -57,4 +59,6 @@ export declare class DesignItem implements IDesignItem {
     removeStyle(name: string): void;
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;
+    _insertChildInternal(designItem: IDesignItem, index?: number): void;
+    _removeChildInternal(designItem: IDesignItem): void;
 }

package/dist/elements/item/DesignItem.js

@@ -2,9 +2,10 @@ import { CssStyleChangeAction } from '../services/undoService/transactionItems/C
 import { NodeType } from './NodeType';
 import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
-import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 import { CssAttributeParser } from '../helper/CssAttributeParser.js';
 import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
+import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction';
+import { DeleteAction } from '../..';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
@@ -69,44 +70,41 @@ export class DesignItem {
     get parent() {
         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);
+    indexOf(designItem) {
+        return this._childArray.indexOf(designItem);
+    }
+    insertAdjacentElement(designItem, where) {
+        if (where == 'afterbegin') {
+            this._insertChildInternal(designItem, 0);
         }
-        this.removeChild(designItem);
-        if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
-            this._childArray.push(designItem);
-            this.element.appendChild(designItem.node);
+        else if (where == 'beforeend') {
+            this._insertChildInternal(designItem);
         }
-        else {
-            let el = this._childArray[index];
-            this.node.insertBefore(designItem.node, el.element);
-            this._childArray.splice(index, 0, designItem);
+        else if (where == 'beforebegin') {
+            this.parent._insertChildInternal(designItem, this.parent.indexOf(this));
+        }
+        else if (where == 'afterend') {
+            this.parent._insertChildInternal(designItem, this.parent.indexOf(this) + 1);
         }
-        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
-            designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+    }
+    insertChild(designItem, index) {
+        const action = new InsertChildAction(designItem, this, index);
+        this.instanceServiceContainer.undoService.execute(action);
     }
     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);
-            designItem.element.remove();
-        }
+        const action = new DeleteAction([designItem]);
+        this.instanceServiceContainer.undoService.execute(action);
     }
     remove() {
-        this.parent.removeChild(this);
+        this.parent._removeChildInternal(this);
     }
     clearChildren() {
-        this._childArray = [];
-        DomHelper.removeAllChildnodes(this.element);
+        for (let i = this._childArray.length - 1; i >= 0; i--) {
+            let di = this._childArray[i];
+            di.remove();
+        }
     }
-    //abstract text content to own property. so only chnage via designer api will use it.
+    //abstract text content to own property. so only change via designer api will use it.
     get hasContent() {
         return this.nodeType == NodeType.TextNode || (this._childArray.length === 0 && this.content !== null);
     }
@@ -259,4 +257,33 @@ export class DesignItem {
         const action = new AttributeChangeAction(this, name, null, this.attributes.get(name));
         this.instanceServiceContainer.undoService.execute(action);
     }
+    // Internal implementations wich don't use undo/redo
+    _insertChildInternal(designItem, index) {
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+        if (designItem.parent) {
+            designItem.parent._removeChildInternal(designItem);
+        }
+        if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
+            this._childArray.push(designItem);
+            this.element.appendChild(designItem.node);
+        }
+        else {
+            let el = this._childArray[index];
+            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);
+    }
+    _removeChildInternal(designItem) {
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+        designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtensions([designItem]);
+        const index = this._childArray.indexOf(designItem);
+        if (index > -1) {
+            this._childArray.splice(index, 1);
+            designItem.element.remove();
+        }
+    }
 }

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

@@ -21,6 +21,10 @@ export interface IDesignItem {
     readonly childCount: number;
     readonly firstChild: IDesignItem;
     readonly parent: IDesignItem;
+    _insertChildInternal(designItem: IDesignItem, index?: number): any;
+    _removeChildInternal(designItem: IDesignItem): any;
+    indexOf(designItem: IDesignItem): number;
+    insertAdjacentElement(designItem: IDesignItem, where: InsertPosition): any;
     insertChild(designItem: IDesignItem, index?: number): any;
     removeChild(designItem: IDesignItem): any;
     remove(): any;

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.d.ts

@@ -1,8 +1,10 @@
 import { IDesignItem } from "../../item/IDesignItem";
 import { IBinding } from '../../item/IBinding';
 import { IBindingService } from "./IBindingService";
+import { BindingTarget } from "../../item/BindingTarget.js";
 export declare class BaseCustomWebcomponentBindingsService implements IBindingService {
     static type: string;
     getBindings(designItem: IDesignItem): IBinding[];
     setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
 }

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js

@@ -66,4 +66,7 @@ export class BaseCustomWebcomponentBindingsService {
         designItem.setAttribute(nm, value);
         return true;
     }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        return true;
+    }
 }

package/dist/elements/services/bindingsService/IBindingService.d.ts

@@ -1,5 +1,6 @@
 import { IDesignItem } from "../../item/IDesignItem";
 import { IBinding } from "../../item/IBinding";
+import { BindingTarget } from "../../item/BindingTarget";
 /**
  * Can be used to parse bindings wich are done via special HTML Attributes or special Elements
  * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the
@@ -8,4 +9,5 @@ import { IBinding } from "../../item/IBinding";
 export interface IBindingService {
     getBindings(designItem: IDesignItem): IBinding[];
     setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
 }

package/dist/elements/services/bindingsService/SpecialTagsBindingService.d.ts

@@ -1,6 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem";
 import { IBinding } from "../../item/IBinding";
 import { IBindingService } from "./IBindingService";
+import { BindingTarget } from "../../item/BindingTarget.js";
 export declare class SpecialTagsBindingService implements IBindingService {
     static type: string;
     _bindingTagName: string;
@@ -11,4 +12,5 @@ export declare class SpecialTagsBindingService implements IBindingService {
     getBindings(designItem: IDesignItem): IBinding[];
     private _parseBindingElement;
     setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
 }

package/dist/elements/services/bindingsService/SpecialTagsBindingService.js

@@ -37,4 +37,7 @@ export class SpecialTagsBindingService {
     setBinding(designItem, binding) {
         return true;
     }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        return true;
+    }
 }

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -70,7 +70,7 @@ export class NodeHtmlParserService {
             element.draggable = false; //even if it should be true, for better designer exp.
             for (let c of item.childNodes) {
                 let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
-                designItem.insertChild(di);
+                designItem._insertChildInternal(di);
             }
         }
         else if (item.nodeType == 3) {

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

@@ -1,6 +1,4 @@
 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 ||
@@ -21,14 +19,20 @@ export class DefaultModelCommandService {
     }
     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'));
+        if (command.type == CommandType.moveBackward) {
+            let idx = sel.parent.indexOf(sel) - 1;
+            if (idx >= 0)
+                sel.parent.insertChild(sel, idx);
+        }
+        else if (command.type == CommandType.moveForward) {
+            let idx = sel.parent.indexOf(sel) + 1;
+            if (idx < sel.parent.childCount)
+                sel.parent.insertChild(sel, idx);
+        }
         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'));
+            sel.parent.insertChild(sel, 0);
         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'));
+            sel.parent.insertChild(sel);
         else if (command.type == CommandType.arrangeLeft) {
             const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeLeft');
             const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');

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

@@ -1,6 +1,8 @@
 import { IRect } from '../../../interfaces/IRect.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
 import { ISnaplinesProviderService } from './ISnaplinesProviderService.js';
+export declare const provideSnaplinesWithDistance = "provideSnaplinesWithDistance";
+export declare const provideSnaplinesWithDistanceDistance = "provideSnaplinesWithDistanceDistance";
 export declare class SnaplinesProviderService implements ISnaplinesProviderService {
     provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
         outerRect: DOMRect;

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

@@ -1,10 +1,14 @@
 import { DomHelper } from '@node-projects/base-custom-webcomponent';
+export const provideSnaplinesWithDistance = 'provideSnaplinesWithDistance';
+export const provideSnaplinesWithDistanceDistance = 'provideSnaplinesWithDistanceDistance';
 export class SnaplinesProviderService {
     provideSnaplines(containerItem, ignoredItems) {
         {
             const canvas = containerItem.instanceServiceContainer.designerCanvas;
             const ignMap = new Map(ignoredItems.map(i => [i.element, i]));
             const outerRect = containerItem.element.getBoundingClientRect();
+            const provideWithDist = canvas.instanceServiceContainer.designContext.extensionOptions[provideSnaplinesWithDistance] !== false;
+            const provideWithDistDist = canvas.instanceServiceContainer.designContext.extensionOptions[provideSnaplinesWithDistanceDistance] ?? 5;
             const positionsH = [];
             const positionsMiddleH = [];
             const positionsV = [];
@@ -20,16 +24,22 @@ export class SnaplinesProviderService {
                     const pMidV = (p.y - outerRect.y + p.height / 2) / canvas.scaleFactor;
                     const pBottom = (p.y - outerRect.y + p.height) / canvas.scaleFactor;
                     const transformedP = { x: pLeft + outerRect.x, y: pTop + outerRect.y, width: p.width / canvas.scaleFactor, height: p.height / canvas.scaleFactor };
+                    if (provideWithDist)
+                        positionsH.push([pLeft - provideWithDistDist, transformedP]);
                     positionsH.push([pLeft, transformedP]);
                     positionsMiddleH.push([pMidH, transformedP]);
                     positionsH.push([pRight, transformedP]);
+                    if (provideWithDist)
+                        positionsH.push([pRight + provideWithDistDist, transformedP]);
                     positionsV.push([pTop, transformedP]);
                     positionsMiddleV.push([pMidV, transformedP]);
                     positionsV.push([pBottom, transformedP]);
                 }
             }
+            positionsH.push([0, { x: 0, y: 0, width: 0, height: 0 }]);
             positionsH.sort((a, b) => a[0] - b[0]);
             positionsMiddleH.sort((a, b) => a[0] - b[0]);
+            positionsV.push([0, { x: 0, y: 0, width: 0, height: 0 }]);
             positionsV.sort((a, b) => a[0] - b[0]);
             positionsMiddleV.sort((a, b) => a[0] - b[0]);
             return { outerRect, positionsH, positionsMiddleH, positionsV, positionsMiddleV };

package/dist/elements/services/propertiesService/IPropertiesService.d.ts

@@ -2,11 +2,13 @@ import { IProperty } from './IProperty';
 import { IService } from '../IService';
 import { IDesignItem } from '../../item/IDesignItem';
 import { ValueType } from './ValueType';
+import { BindingTarget } from '../../item/BindingTarget';
 export interface IPropertiesService extends IService {
     readonly name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperties(designItem: IDesignItem): IProperty[];
     getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     setValue(designItems: IDesignItem[], property: IProperty, value: any): any;
     clearValue(designItems: IDesignItem[], property: IProperty): any;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;

package/dist/elements/services/propertiesService/services/AttributesPropertiesService.d.ts

@@ -2,12 +2,14 @@ import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export declare class AttributesPropertiesService implements IPropertiesService {
     name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string;

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

@@ -1,4 +1,5 @@
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export class AttributesPropertiesService {
     name = "attributes";
     isHandledElement(designItem) {
@@ -19,6 +20,9 @@ export class AttributesPropertiesService {
     }
     setValue(designItems, property, value) {
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.attribute;
+    }
     clearValue(designItems, property) {
     }
     isSet(designItems, property) {

package/dist/elements/services/propertiesService/services/CommonPropertiesService.d.ts

@@ -2,6 +2,7 @@ import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export declare class CommonPropertiesService implements IPropertiesService {
     private commonProperties;
     name: string;
@@ -9,6 +10,7 @@ export declare class CommonPropertiesService implements IPropertiesService {
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string | boolean;

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

@@ -1,4 +1,5 @@
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export class CommonPropertiesService {
     //@ts-ignore
     commonProperties = [
@@ -46,10 +47,16 @@ export class CommonPropertiesService {
             }
         }
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.property;
+    }
     clearValue(designItems, property) {
         for (let d of designItems) {
             d.attributes.delete(property.name);
             d.element.removeAttribute(property.name);
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
         }
     }
     isSet(designItems, property) {
@@ -62,6 +69,12 @@ export class CommonPropertiesService {
                 all = all && has;
                 some = some || has;
             });
+            //todo: optimize perf, do not call bindings service for each property. 
+            const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.getBindings(designItems[0]);
+            });
+            if (bindings && bindings.find(x => x.target == BindingTarget.property && x.targetName == property.name))
+                return ValueType.bound;
         }
         else
             return ValueType.none;

package/dist/elements/services/propertiesService/services/CssPropertiesService.d.ts

@@ -2,6 +2,7 @@ import { IPropertiesService } from '../IPropertiesService';
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from '../ValueType';
+import { BindingTarget } from '../../../item/BindingTarget.js';
 export declare class CssPropertiesService implements IPropertiesService {
     private styles;
     private alignment;
@@ -13,6 +14,7 @@ export declare class CssPropertiesService implements IPropertiesService {
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string;

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

@@ -226,10 +226,16 @@ export class CssPropertiesService {
         }
         cg.commit();
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.css;
+    }
     clearValue(designItems, property) {
         for (let d of designItems) {
             d.styles.delete(property.name);
             d.element.style[property.name] = '';
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
         }
     }
     isSet(designItems, property) {

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

@@ -22,6 +22,6 @@ export class PropertiesHelper {
         return text.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
     }
     static dashToCamelCase(text) {
-        return text.replace(/-([a-z])/i, (i) => i[1].toUpperCase());
+        return text.replace(/-([a-z])/g, (i) => i[1].toUpperCase());
     }
 }

package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.d.ts

@@ -2,6 +2,7 @@ import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export declare class UnkownElementPropertiesService implements IPropertiesService {
     readonly name: string;
     isHandledElement(designItem: IDesignItem): boolean;
@@ -9,6 +10,7 @@ export declare class UnkownElementPropertiesService implements IPropertiesServic
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string | boolean;

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

@@ -1,5 +1,6 @@
 import { ValueType } from "../ValueType";
 import { PropertiesHelper } from './PropertiesHelper';
+import { BindingTarget } from "../../../item/BindingTarget";
 export class UnkownElementPropertiesService {
     name = "unkown";
     isHandledElement(designItem) {
@@ -44,11 +45,17 @@ export class UnkownElementPropertiesService {
             cg.undo();
         }
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.property;
+    }
     clearValue(designItems, property) {
         const attributeName = PropertiesHelper.camelToDashCase(property.name);
         for (let d of designItems) {
             d.attributes.delete(attributeName);
             d.element.removeAttribute(attributeName);
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
             this._notifyChangedProperty(d, property, undefined);
         }
     }

package/dist/elements/services/undoService/transactionItems/DeleteAction.d.ts

@@ -1,14 +1,12 @@
 import { ITransactionItem } from '../ITransactionItem';
 import { IDesignItem } from '../../../item/IDesignItem';
-import { IExtensionManager } from '../../../widgets/designerView/extensions/IExtensionManger';
 export declare class DeleteAction implements ITransactionItem {
-    constructor(deletedItems: IDesignItem[], extensionManager: IExtensionManager);
+    constructor(deletedItems: IDesignItem[]);
     title?: string;
     get affectedItems(): IDesignItem[];
     undo(): void;
     do(): void;
     deletedItems: IDesignItem[];
-    extensionManager: IExtensionManager;
     private _parentItems;
     private _parentIndexes;
     mergeWith(other: ITransactionItem): boolean;

package/dist/elements/services/undoService/transactionItems/DeleteAction.js

@@ -1,9 +1,8 @@
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 export class DeleteAction {
-    constructor(deletedItems, extensionManager) {
+    constructor(deletedItems) {
         this.title = "Delete Items";
         this.deletedItems = deletedItems;
-        this.extensionManager = extensionManager;
     }
     title;
     get affectedItems() {
@@ -11,7 +10,7 @@ export class DeleteAction {
     }
     undo() {
         for (let n = 0; n < this.deletedItems.length; n++) {
-            this._parentItems[n].insertChild(this.deletedItems[n], this._parentIndexes[n]);
+            this._parentItems[n]._insertChildInternal(this.deletedItems[n], this._parentIndexes[n]);
         }
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: this.deletedItems });
     }
@@ -25,11 +24,9 @@ export class DeleteAction {
         for (let n = 0; n < this.deletedItems.length; n++) {
             this.deletedItems[n].remove();
         }
-        this.extensionManager.removeExtensions(this.deletedItems);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: this.deletedItems });
     }
     deletedItems;
-    extensionManager;
     _parentItems;
     _parentIndexes;
     mergeWith(other) {

package/dist/elements/services/undoService/transactionItems/InsertAction.js

@@ -14,7 +14,7 @@ export class InsertAction {
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
     }
     do() {
-        this.designItem.insertChild(this.newItem, this.index);
+        this.designItem._insertChildInternal(this.newItem, this.index);
         const prepService = this.designItem.serviceContainer.prepareElementsForDesignerService;
         if (prepService)
             requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));

package/dist/elements/services/undoService/transactionItems/InsertChildAction.d.ts

@@ -0,0 +1,16 @@
+import { ITransactionItem } from '../ITransactionItem';
+import { IDesignItem } from '../../../item/IDesignItem';
+export declare class InsertChildAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newParent: IDesignItem, newIndex: number);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newParent: IDesignItem;
+    newIndex: number;
+    oldParent: IDesignItem;
+    oldIndex: number;
+    newItem: IDesignItem;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/InsertChildAction.js

@@ -0,0 +1,31 @@
+export class InsertChildAction {
+    constructor(designItem, newParent, newIndex) {
+        this.title = "Move Item";
+        this.designItem = designItem;
+        this.newParent = newParent;
+        this.newIndex = newIndex;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem, this.newParent, this.oldParent];
+    }
+    undo() {
+        this.oldParent._insertChildInternal(this.designItem, this.newIndex);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    do() {
+        this.oldParent = this.designItem.parent;
+        this.oldIndex = this.designItem.parent.indexOf(this.designItem);
+        this.newParent._insertChildInternal(this.designItem, this.newIndex);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    designItem;
+    newParent;
+    newIndex;
+    oldParent;
+    oldIndex;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction copy.d.ts

@@ -0,0 +1,16 @@
+import { ITransactionItem } from '../ITransactionItem';
+import { IDesignItem } from '../../../item/IDesignItem';
+export declare class MoveElementInDomAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newTarget: IDesignItem, newPosition: InsertPosition, oldTarget: IDesignItem, oldPosition: InsertPosition);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newTarget: IDesignItem;
+    newPosition: InsertPosition;
+    oldTarget: IDesignItem;
+    oldPosition: InsertPosition;
+    newItem: IDesignItem;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction copy.js

@@ -0,0 +1,32 @@
+export class MoveElementInDomAction {
+    constructor(designItem, newTarget, newPosition, oldTarget, oldPosition) {
+        this.title = "Move Item";
+        this.designItem = designItem;
+        this.newTarget = newTarget;
+        this.newPosition = newPosition;
+        this.oldTarget = oldTarget;
+        this.oldPosition = oldPosition;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem, this.newTarget, this.oldTarget];
+    }
+    undo() {
+        this.oldTarget.element.insertAdjacentElement(this.oldPosition, this.designItem.element);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    do() {
+        //this.newTarget.insertChild(this.designItem, )
+        this.newTarget.element.insertAdjacentElement(this.newPosition, this.designItem.element);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    designItem;
+    newTarget;
+    newPosition;
+    oldTarget;
+    oldPosition;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -29,9 +29,8 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
     `;
     constructor() {
         super();
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
-        this.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._treeDiv = document.createElement('div');
         this._treeDiv.style.height = '100%';
         this._treeDiv.style.overflow = 'auto';

package/dist/elements/widgets/codeView/code-view-code-mirror.js

@@ -12,16 +12,15 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
       display: block;
       height: 100%;
       width: 100%;
-    }
-    `;
+    }`;
     static template = html `
-<style>@import "./node_modules/codemirror/lib/codemirror.css";</style>
-<div  style="width: 100%; height: 100%;">
-<div id="textarea"></div>
-</div>
-`;
+    <div  style="width: 100%; height: 100%;">
+      <div id="textarea"></div>
+    </div>`;
     constructor() {
         super();
+        //@ts-ignore
+        import("codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this.style.display = 'block';
         this._editor = this._getDomElement('textarea');
     }

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -18,8 +18,7 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     }
     `;
     static template = html `
-      <style>@import "./node_modules/monaco-editor/min/vs/editor/editor.main.css";</style>
-      <div id="container" style="width: 100%; height: 100%;"></div>
+      <div id="container" style="width: 100%; height: 100%; position: absolute;"></div>
   `;
     executeCommand(command) {
         switch (command.type) {
@@ -54,6 +53,9 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
         return false;
     }
     async ready() {
+        //@ts-ignore
+        const style = await import("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
+        this.shadowRoot.adoptedStyleSheets = [style.default, this.constructor.style];
         this._editor = this._getDomElement('container');
         //@ts-ignore
         require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
@@ -65,9 +67,9 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
                 value: this.code,
                 language: 'html',
                 minimap: {
-                    //@ts-ignore
                     size: 'fill'
-                }
+                },
+                fixedOverflowWidgets: true
             });
             this._monacoEditor.layout();
             let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {

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

@@ -290,7 +290,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     handleDeleteCommand() {
         let items = this.instanceServiceContainer.selectionService.selectedElements;
-        this.instanceServiceContainer.undoService.execute(new DeleteAction(items, this.extensionManager));
+        this.instanceServiceContainer.undoService.execute(new DeleteAction(items));
         this.instanceServiceContainer.selectionService.setSelectedElements(null);
     }
     initialize(serviceContainer) {
@@ -362,7 +362,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     addDesignItems(designItems) {
         if (designItems) {
             for (let di of designItems) {
-                this.rootDesignItem.insertChild(di);
+                this.rootDesignItem._insertChildInternal(di);
             }
         }
         const intializationService = this.serviceContainer.intializationService;

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

@@ -281,7 +281,7 @@ export class PointerTool {
                                 const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem);
                                 this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
                                 currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
-                                newContainerElementDesignItem.insertChild(this._actionStartedDesignItem);
+                                newContainerElementDesignItem._insertChildInternal(this._actionStartedDesignItem);
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                                 newContainerService.enterContainer(newContainerElementDesignItem, [this._actionStartedDesignItem]);
                                 newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -55,9 +55,8 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
   </div>`;
     constructor() {
         super();
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
-        this.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
         this._filter.onkeyup = () => {
             let match = this._filter.value;

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -89,9 +89,8 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
   </div>`;
     constructor() {
         super();
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
-        this.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
         this._filter.onkeyup = () => {
             let match = this._filter.value;
@@ -100,11 +99,6 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             });
         };
         this._treeDiv = this._getDomElement('treetable');
-        /*this._treeDiv = document.createElement('div');
-        this._treeDiv.style.height = 'calc(100% - 21px)'
-        this._treeDiv.style.overflow = 'auto';
-        this._treeDiv.setAttribute('id', 'tree');
-        this.shadowRoot.appendChild(this._treeDiv);*/
     }
     _showHideAtDesignTimeState(img, designItem) {
         if (designItem.hideAtDesignTime)

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export * from "./elements/services/propertiesService/DefaultEditorTypesService.j
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";
 export type { IProperty } from "./elements/services/propertiesService/IProperty.js";
+export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
@@ -79,7 +80,7 @@ export * from "./elements/services/undoService/transactionItems/AttributeChangeA
 export * from "./elements/services/undoService/transactionItems/CssStyleChangeAction.js";
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
-export * from "./elements/services/undoService/transactionItems/MoveElementInDomAction.js";
+export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/PropertyChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
@@ -172,3 +173,4 @@ export type { IDisposable } from "./interfaces/IDisposable.js";
 export type { IPoint } from "./interfaces/IPoint.js";
 export type { IRect } from "./interfaces/IRect.js";
 export type { ISize } from "./interfaces/ISize.js";
+export type { ICommandHandler } from "./interfaces/ICommandHandler.js";

package/dist/index.js

@@ -32,6 +32,7 @@ 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/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
@@ -48,7 +49,7 @@ export * from "./elements/services/undoService/transactionItems/AttributeChangeA
 export * from "./elements/services/undoService/transactionItems/CssStyleChangeAction.js";
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
-export * from "./elements/services/undoService/transactionItems/MoveElementInDomAction.js";
+export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/PropertyChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";

package/dist/interfaces/ICommandHandler.d.ts

@@ -0,0 +1,5 @@
+import { CommandType } from "../commandHandling/CommandType";
+export interface ICommandHandler {
+    executeCommand(type: CommandType, parameter: any): Promise<void>;
+    canExecuteCommand(type: CommandType, parameter: any): boolean;
+}

package/dist/interfaces/ICommandHandler.js

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

package/package.json

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

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

@@ -1,7 +0,0 @@
-import { IDesignerCanvas } from "./IDesignerCanvas.js";
-import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
-import { DesignerView } from './designerView';
-export declare class DesignerViewUseOverlayScollbars implements IDesignViewConfigButtonsProvider {
-    constructor();
-    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
-}

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

@@ -1,13 +0,0 @@
-//todo, element moving does not work atm, needs to be fixed
-export class DesignerViewUseOverlayScollbars {
-    constructor() {
-    }
-    provideButtons(designerView, designerCanvas) {
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/overlayscrollbars/css/OverlayScrollbars.min.css");';
-        designerCanvas.shadowRoot.appendChild(externalCss);
-        //@ts-ignore
-        setTimeout(() => OverlayScrollbars([designerCanvas._outercanvas2], {}), 5000);
-        return [];
-    }
-}