@node-projects/web-component-designer 0.0.72 → 0.0.76

package/README.md

@@ -1,6 +1,6 @@
 # web-component-designer
 
-## Caution - this is a preview Version, a RC is planed for Q3/2021
+## Caution - this is a preview Version, a RC is planed for January 2022
 
 A HTML WebComponent for Designing Webcomponents and HTML Pages.
 
@@ -81,4 +81,4 @@ Your addition to your index.html should look like this:
 The Library uses Images from the Chrome Dev Tools, see
 https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src
 and
-https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE
+https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE

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

@@ -4,6 +4,7 @@ export declare class BaseServiceContainer<NameMap> {
     getLastService<K extends keyof NameMap>(service: K): NameMap[K];
     getServices<K extends keyof NameMap>(service: K): NameMap[K][];
     register<K extends keyof NameMap>(name: K, service: NameMap[K]): void;
+    registerMultiple<K extends keyof NameMap>(names: K[], service: NameMap[K]): void;
     forSomeServicesTillResult<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): Y;
     getLastServiceWhere<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): NameMap[K];
 }

package/dist/elements/services/BaseServiceContainer.js

@@ -14,6 +14,13 @@ export class BaseServiceContainer {
             this._services.set(name, []);
         this._services.get(name).push(service);
     }
+    registerMultiple(names, service) {
+        for (const name of names) {
+            if (!this._services.has(name))
+                this._services.set(name, []);
+            this._services.get(name).push(service);
+        }
+    }
     forSomeServicesTillResult(service, callback) {
         let services = this.getServices(service);
         if (services == null) {

package/dist/elements/services/demoProviderService/DemoProviderService.js

@@ -21,7 +21,7 @@ export class DemoProviderService {
             }
             doc.write("document.body.style.display='';");
             doc.write('</script>');
-            doc.write('<body style="display:none">' + code + '</body>');
+            doc.write('<body style="display:none; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute;">' + code + '</body>');
             doc.close();
         });
     }

package/dist/elements/services/elementsService/IElementDefinition.d.ts

@@ -1,3 +1,4 @@
+import { IBinding } from "../../item/IBinding";
 export interface IElementDefinition {
     tag: string;
     name?: string;
@@ -28,4 +29,5 @@ export interface IElementDefinition {
      * If none, the DrawElementTool is used
      */
     tool?: string;
+    defaultBinding?: IBinding;
 }

package/dist/elements/services/elementsService/IElementsJson.d.ts

@@ -1,4 +1,5 @@
 import { IElementDefinition } from './IElementDefinition';
 export interface IElementsJson {
+    "imports"?: string[];
     "elements": (string | IElementDefinition)[];
 }

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/instanceService/DefaultInstanceService.js

@@ -53,7 +53,7 @@ export class DefaultInstanceService {
         if (definition.defaultProperties) {
             let propertiesService = null;
             if (definition.type) {
-                propertiesService = serviceContainer.getLastServiceWhere('propertyService', (x) => x.name == definition.type);
+                propertiesService = serviceContainer.getLastServiceWhere('propertyService', (x) => x.isHandledElement(designItem));
             }
             let properties = propertiesService.getProperties(designItem);
             for (let a in definition.defaultProperties) {

package/dist/elements/services/manifestLoaders/WebcomponentManifestParserService.d.ts

@@ -0,0 +1,26 @@
+import { IDesignItem } from "../../..";
+import { BindingTarget } from "../../item/BindingTarget";
+import { IElementDefinition } from "../elementsService/IElementDefinition";
+import { IElementsService } from "../elementsService/IElementsService";
+import { IPropertiesService } from "../propertiesService/IPropertiesService";
+import { IProperty } from "../propertiesService/IProperty";
+import { ValueType } from "../propertiesService/ValueType";
+export declare class WebcomponentManifestParserService implements IElementsService, IPropertiesService {
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _resolveStored;
+    private _rejectStored;
+    constructor(name: string, file: string);
+    getElements(): Promise<IElementDefinition[]>;
+    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): void;
+    clearValue(designItems: IDesignItem[], property: IProperty): void;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): void;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): void;
+}

package/dist/elements/services/manifestLoaders/WebcomponentManifestParserService.js

@@ -0,0 +1,69 @@
+export class WebcomponentManifestParserService {
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _resolveStored;
+    _rejectStored;
+    constructor(name, file) {
+        this._name = name;
+        import(file, { assert: { type: 'json' } }).then(module => {
+            this._packageData = module.default;
+            this._elementList = [];
+            for (let m of this._packageData.modules) {
+                for (let e of m.exports) {
+                    if (e.kind == 'custom-element-definition') {
+                        this._elementList.push({ tag: e.name });
+                    }
+                }
+                if (this._resolveStored) {
+                    this._resolveStored.forEach(x => x(this._elementList));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            }
+        }).catch(err => {
+            if (this._rejectStored) {
+                this._rejectStored.forEach(x => x(err));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        });
+    }
+    async getElements() {
+        if (this._packageData)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+    isHandledElement(designItem) {
+        throw new Error("Method not implemented.");
+    }
+    getProperties(designItem) {
+        throw new Error("Method not implemented.");
+    }
+    getProperty(designItem, name) {
+        throw new Error("Method not implemented.");
+    }
+    getPropertyTarget(designItem, property) {
+        throw new Error("Method not implemented.");
+    }
+    setValue(designItems, property, value) {
+        throw new Error("Method not implemented.");
+    }
+    clearValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    isSet(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    getValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    getUnsetValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+}

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.d.ts

@@ -0,0 +1,23 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { IElementDefinition } from "../elementsService/IElementDefinition";
+import { IElementsService } from "../elementsService/IElementsService";
+import { IPropertiesService } from "../propertiesService/IPropertiesService";
+import { IProperty } from "../propertiesService/IProperty";
+import { IDesignItem } from "../../item/IDesignItem";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export declare class WebcomponentManifestParserService extends UnkownElementPropertiesService implements IElementsService, IPropertiesService {
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _propertiesList;
+    private _resolveStored;
+    private _rejectStored;
+    constructor(name: string, file: string);
+    private manifestClassPropertyTypeToEditorPropertyType;
+    getElements(): Promise<IElementDefinition[]>;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+}

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js

@@ -0,0 +1,80 @@
+import { BindingTarget } from "../../item/BindingTarget";
+import { PropertyType } from "../propertiesService/PropertyType";
+import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
+export class WebcomponentManifestParserService extends UnkownElementPropertiesService {
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _propertiesList;
+    _resolveStored;
+    _rejectStored;
+    constructor(name, file) {
+        super();
+        this._name = name;
+        let path = file.split('/').slice(0, -1).join('/');
+        import(file, { assert: { type: 'json' } }).then(module => {
+            this._packageData = module.default;
+            this._elementList = [];
+            this._propertiesList = {};
+            for (let m of this._packageData.modules) {
+                for (let e of m.exports) {
+                    if (e.kind == 'custom-element-definition') {
+                        this._elementList.push({ tag: e.name, import: path + '/' + e.declaration.module });
+                        let properties = [];
+                        let declaration = m.declarations.find(x => x.name == e.declaration.name);
+                        for (let d of declaration.members) {
+                            if (d.kind == 'field') {
+                                let pType = PropertyType.property;
+                                pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
+                                properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
+                            }
+                        }
+                        this._propertiesList[e.name] = properties;
+                    }
+                }
+                if (this._resolveStored) {
+                    this._resolveStored.forEach(x => x(this._elementList));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            }
+        }).catch(err => {
+            if (this._rejectStored) {
+                this._rejectStored.forEach(x => x(err));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        });
+    }
+    manifestClassPropertyTypeToEditorPropertyType(type) {
+        if (type) {
+            if (type.toLowerCase() === 'boolean')
+                return 'boolean';
+            if (type.toLowerCase() === 'number')
+                return 'number';
+        }
+        return type;
+    }
+    async getElements() {
+        if (this._packageData)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+    isHandledElement(designItem) {
+        return this._elementList.find(x => x.tag == designItem.name) != null;
+    }
+    getProperties(designItem) {
+        return this._propertiesList[designItem.name];
+    }
+    getProperty(designItem, name) {
+        return this._propertiesList[designItem.name].find(x => x.name == name);
+    }
+    getPropertyTarget(designItem, property) {
+        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
+    }
+}

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

@@ -49,7 +49,6 @@ export class DefaultEditorTypesService {
                     return new ThicknessPropertyEditor(property);
                 }
             case "css-length":
-            case "thickness":
             case "string":
             default:
                 {

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

@@ -4,7 +4,6 @@ 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;

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

@@ -1,9 +1,12 @@
 import { IPropertiesService } from './IPropertiesService';
 import { IPropertyEditor } from './IPropertyEditor';
+import { PropertyType } from './PropertyType';
 export interface IProperty {
     name: string;
+    propertyName?: string;
+    attributeName?: string;
     description?: string;
-    type?: string;
+    type?: 'json' | 'color' | 'date' | 'number' | 'list' | 'enum' | 'boolean' | 'img-lis' | 'thickness' | 'css-length' | 'string' | string;
     default?: any;
     min?: number;
     max?: number;
@@ -14,4 +17,5 @@ export interface IProperty {
     value?: any;
     service: IPropertiesService;
     defaultValue?: any;
+    propertyType: PropertyType;
 }

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

@@ -0,0 +1,6 @@
+export declare enum PropertyType {
+    property = "property",
+    attribute = "attribute",
+    propertyAndAttribute = "propertyAndAttribute",
+    cssValue = "cssvalue"
+}

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

@@ -0,0 +1,7 @@
+export var PropertyType;
+(function (PropertyType) {
+    PropertyType["property"] = "property";
+    PropertyType["attribute"] = "attribute";
+    PropertyType["propertyAndAttribute"] = "propertyAndAttribute";
+    PropertyType["cssValue"] = "cssvalue";
+})(PropertyType || (PropertyType = {}));

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

@@ -1,5 +1,6 @@
 import { PropertiesHelper } from './PropertiesHelper';
 import { UnkownElementPropertiesService } from "./UnkownElementPropertiesService";
+import { PropertyType } from '../PropertyType';
 export class AbstractBasePropertiesService extends UnkownElementPropertiesService {
     getProperties(designItem) {
         if (!this.isHandledElement(designItem))
@@ -14,27 +15,27 @@ export class AbstractBasePropertiesService extends UnkownElementPropertiesServic
             if (polymerProperty.type)
                 type = polymerProperty.type;
             if (type === String) {
-                let property = { name: name, type: "string", service: this };
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Object) {
-                let property = { name: name, type: "object", service: this };
+                let property = { name: name, type: "object", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Number) {
-                let property = { name: name, type: "number", service: this };
+                let property = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Date) {
-                let property = { name: name, type: "date", service: this };
+                let property = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (type === Boolean) {
-                let property = { name: name, type: "boolean", service: this };
+                let property = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
             else if (PropertiesHelper.isTypescriptEnum(type)) {
-                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this };
+                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
         }