@node-projects/web-component-designer 0.0.35 → 0.0.39

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

@@ -18,11 +18,11 @@ export class FlexBoxPlacementService {
         //TODO: offset could be bigger, when it was in a other cell???
         return container.element.getBoundingClientRect();
     }
-    placePoint(event, placementView, container, startPoint, newPoint, items) {
+    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         return null;
     }
-    place(event, placementView, container, startPoint, newPoint, items) {
+    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }
-    finishPlace(event, placementView, container, startPoint, newPoint, items) {
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }
 }

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

@@ -1,7 +1,6 @@
 import type { IPoint } from '../../../interfaces/IPoint.js';
 import type { IPlacementService } from './IPlacementService.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
-import { IDesignerMousePoint } from '../../../interfaces/IDesignerMousePoint.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class GridPlacementService implements IPlacementService {
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
@@ -10,7 +9,7 @@ export declare class GridPlacementService implements IPlacementService {
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): IPoint;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): void;
+    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
 }

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

@@ -18,11 +18,11 @@ export class GridPlacementService {
         //TODO: offset could be bigger, when it was in a other cell???
         return container.element.getBoundingClientRect();
     }
-    placePoint(event, placementView, container, startPoint, newPoint, items) {
+    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         return null;
     }
-    place(event, placementView, container, startPoint, newPoint, items) {
+    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }
-    finishPlace(event, placementView, container, startPoint, newPoint, items) {
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }
 }

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

@@ -1,7 +1,6 @@
 import { IService } from "../IService";
 import { IDesignItem } from "../../item/IDesignItem";
 import { IPlacementView } from "../../widgets/designerView/IPlacementView";
-import { IDesignerMousePoint } from "../../../interfaces/IDesignerMousePoint";
 import { IPoint } from "../../../interfaces/IPoint";
 export interface IPlacementService extends IService {
     serviceForContainer(container: IDesignItem): any;
@@ -10,7 +9,7 @@ export interface IPlacementService extends IService {
     enterContainer(container: IDesignItem, items: IDesignItem[]): any;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): any;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): IPoint;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): any;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): any;
+    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
+    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
 }

package/dist/elements/services/popupService/PopupService.js

@@ -1,8 +1,10 @@
 export class PopupService {
+    container;
+    zindex;
+    ;
     constructor(container) {
         this.container = container;
     }
-    ;
     showPopup(element, popupPlacement) {
         this.container.appendChild(element);
         this.bringToFront(element);

package/dist/elements/services/propertiesService/propertyEditors/BasePropertyEditor.js

@@ -1,8 +1,11 @@
 import { ValueType } from '../ValueType';
 import { PropertyChangeAction } from "../../undoService/transactionItems/PropertyChangeAction";
 export class BasePropertyEditor {
+    element;
+    property;
+    designItems;
+    disableChangeNotification = false;
     constructor(property) {
-        this.disableChangeNotification = false;
         this.property = property;
     }
     _valueChanged(newValue) {
@@ -27,7 +30,12 @@ export class BasePropertyEditor {
         else
             this.element.classList.remove('unset-value');
         this.disableChangeNotification = true;
-        this.refreshValue(valueType, value);
+        try {
+            this.refreshValue(valueType, value);
+        }
+        catch (err) {
+            console.error(err);
+        }
         this.disableChangeNotification = false;
     }
 }

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor.js

@@ -1,6 +1,13 @@
 import { BasePropertyEditor } from './BasePropertyEditor';
 import { html } from '@node-projects/base-custom-webcomponent';
 export class JsonPropertyEditor extends BasePropertyEditor {
+    static template = html `
+    <div style="display: flex;">
+      <input id="input" type="text">
+      <button style="width: 30px;">...</button>
+    </div>
+  `;
+    _input;
     constructor(property) {
         super(property);
         let el = JsonPropertyEditor.template.content.cloneNode(true);
@@ -12,9 +19,3 @@ export class JsonPropertyEditor extends BasePropertyEditor {
         this._input.value = value;
     }
 }
-JsonPropertyEditor.template = html `
-    <div style="display: flex;">
-      <input id="input" type="text">
-      <button style="width: 30px;">...</button>
-    </div>
-  `;

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.js

@@ -1,13 +1,13 @@
 import { html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 export class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend {
-    constructor() {
-        super();
-        //codeview
-    }
-}
-JsonPropertyPopupEditor.template = html `
+    static template = html `
     <div style="display: flex;">
       <input id="input" type="text">
       <button style="width: 30px;">...</button>
     </div>
   `;
+    constructor() {
+        super();
+        //codeview
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/NumberPropertyEditor.js

@@ -11,6 +11,6 @@ export class NumberPropertyEditor extends BasePropertyEditor {
         this.element = element;
     }
     refreshValue(valueType, value) {
-        this.element.value = value;
+        this.element.value = value === undefined ? null : value;
     }
 }

package/dist/elements/services/propertiesService/propertyEditors/TextPropertyEditor.js

@@ -6,9 +6,8 @@ export class TextPropertyEditor extends BasePropertyEditor {
         element.type = "text";
         element.onchange = (e) => this._valueChanged(element.value);
         element.onfocus = (e) => {
-            var _a;
             element.selectionStart = 0;
-            element.selectionEnd = (_a = element.value) === null || _a === void 0 ? void 0 : _a.length;
+            element.selectionEnd = element.value?.length;
         };
         this.element = element;
     }

package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js

@@ -5,10 +5,10 @@ export class ThicknessPropertyEditor extends BasePropertyEditor {
         super(property);
         const selector = new ThicknessEditor();
         selector.property = property.name;
-        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue));
         this.element = selector;
     }
     refreshValue(valueType, value) {
-        this.element.value = value;
+        this.element.valueLeft = value;
     }
 }

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

@@ -1,8 +1,6 @@
 import { ValueType } from "../ValueType";
 export class AttributesPropertiesService {
-    constructor() {
-        this.name = "attributes";
-    }
+    name = "attributes";
     isHandledElement(designItem) {
         return true;
     }

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

@@ -1,10 +1,7 @@
 import { BaseCustomWebComponentLazyAppend, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { AbstractBasePropertiesService } from './AbstractBasePropertiesService';
 export class BaseCustomWebComponentPropertiesService extends AbstractBasePropertiesService {
-    constructor() {
-        super(...arguments);
-        this.name = "baseCustomWebComponent";
-    }
+    name = "baseCustomWebComponent";
     isHandledElement(designItem) {
         return designItem.element instanceof BaseCustomWebComponentLazyAppend || designItem.element instanceof BaseCustomWebComponentConstructorAppend;
     }

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

@@ -1,28 +1,26 @@
 import { ValueType } from "../ValueType";
 export class CommonPropertiesService {
-    constructor() {
-        //@ts-ignore
-        this.commonProperties = [
-            {
-                name: "id",
-                type: "string",
-                service: this
-            }, {
-                name: "class",
-                type: "string",
-                service: this
-            }, {
-                name: "title",
-                type: "string",
-                service: this
-            }, {
-                name: "tabindex",
-                type: "number",
-                service: this
-            }
-        ];
-        this.name = "common";
-    }
+    //@ts-ignore
+    commonProperties = [
+        {
+            name: "id",
+            type: "string",
+            service: this
+        }, {
+            name: "class",
+            type: "string",
+            service: this
+        }, {
+            name: "title",
+            type: "string",
+            service: this
+        }, {
+            name: "tabindex",
+            type: "number",
+            service: this
+        }
+    ];
+    name = "common";
     isHandledElement(designItem) {
         return true;
     }

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

@@ -2,192 +2,203 @@ import { ValueType } from '../ValueType';
 import { NodeType } from '../../../item/NodeType';
 import { BindingTarget } from '../../../item/BindingTarget.js';
 export class CssPropertiesService {
+    //@ts-ignore
+    styles = [
+        {
+            name: "color",
+            type: "color",
+            service: this
+        }, {
+            name: "background-color",
+            type: "color",
+            service: this
+        }, {
+            name: "box-sizing",
+            type: "list",
+            values: ["border-box", "content-box"],
+            service: this
+        }, {
+            name: "border",
+            type: "string",
+            default: "0px none rbg(0,0,0)",
+            service: this
+        }, {
+            name: "box-shadow",
+            type: "string",
+            default: "none",
+            service: this
+        }, {
+            name: "opacity",
+            type: "number",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            service: this
+        }, {
+            name: "padding",
+            type: "thickness",
+            service: this
+        }, {
+            name: "margin",
+            type: "thickness",
+            service: this
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this
+        }, {
+            name: "left",
+            type: "css-length",
+            service: this
+        }, {
+            name: "top",
+            type: "css-length",
+            service: this
+        }, {
+            name: "right",
+            type: "css-length",
+            service: this
+        }, {
+            name: "bottom",
+            type: "css-length",
+            service: this
+        }, {
+            name: "width",
+            type: "css-length",
+            service: this
+        }, {
+            name: "height",
+            type: "css-length",
+            service: this
+        }, {
+            name: "font-size",
+            type: "css-length",
+            service: this
+        }, {
+            name: "font-weight",
+            type: "list",
+            values: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900", "lighter", "bolder"],
+            service: this
+        }
+    ];
+    //@ts-ignore
+    alignment = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this
+        }, {
+            name: "inset",
+            type: "thickness",
+            service: this
+        }, {
+            name: "margin",
+            type: "thickness",
+            service: this
+        }, {
+            name: "padding",
+            type: "thickness",
+            service: this
+        }
+    ];
+    //@ts-ignore
+    grid = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this
+        }, {
+            name: "grid-template-columns",
+            type: "string",
+            service: this
+        }, {
+            name: "grid-template-rows",
+            type: "string",
+            service: this
+        }, {
+            name: "column-gap",
+            type: "css-length",
+            service: this
+        }, {
+            name: "row-gap",
+            type: "css-length",
+            service: this
+        }, {
+            name: "align-content",
+            type: "img-list",
+            values: ["center", "space-between", "space-around", "space-evenly", "stretch"],
+            service: this
+        }, {
+            name: "justify-content",
+            type: "img-list",
+            values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
+            service: this
+        }, {
+            name: "align-items",
+            type: "img-list",
+            values: ["center", "start", "end", "stretch", "baseline"],
+            service: this
+        }, {
+            name: "justify-items",
+            type: "img-list",
+            values: ["center", "start", "end", "stretch"],
+            service: this
+        }
+    ];
+    //@ts-ignore
+    flex = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this
+        }, {
+            name: "flex-direction",
+            type: "img-list",
+            values: ["row", "column"],
+            service: this
+        }, {
+            name: "flex-wrap",
+            type: "img-list",
+            values: ["nowrap", "wrap"],
+            service: this
+        }, {
+            name: "align-content",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "stretch"],
+            service: this
+        }, {
+            name: "justify-content",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"],
+            service: this
+        }, {
+            name: "align-items",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
+            service: this
+        }
+    ];
+    name;
     constructor(name) {
-        //@ts-ignore
-        this.styles = [
-            {
-                name: "color",
-                type: "color",
-                service: this
-            }, {
-                name: "background-color",
-                type: "color",
-                service: this
-            }, {
-                name: "box-sizing",
-                type: "list",
-                values: ["border-box", "content-box"],
-                service: this
-            }, {
-                name: "border",
-                type: "string",
-                default: "0px none rbg(0,0,0)",
-                service: this
-            }, {
-                name: "box-shadow",
-                type: "string",
-                default: "none",
-                service: this
-            }, {
-                name: "opacity",
-                type: "number",
-                min: 0,
-                max: 1,
-                step: 0.1,
-                service: this
-            }, {
-                name: "padding",
-                type: "thickness",
-                service: this
-            }, {
-                name: "margin",
-                type: "thickness",
-                service: this
-            }, {
-                name: "position",
-                type: "list",
-                values: ["static", "relative", "absolute"],
-                service: this
-            }, {
-                name: "left",
-                type: "css-length",
-                service: this
-            }, {
-                name: "top",
-                type: "css-length",
-                service: this
-            }, {
-                name: "right",
-                type: "css-length",
-                service: this
-            }, {
-                name: "bottom",
-                type: "css-length",
-                service: this
-            }, {
-                name: "width",
-                type: "css-length",
-                service: this
-            }, {
-                name: "height",
-                type: "css-length",
-                service: this
-            }, {
-                name: "font-size",
-                type: "css-length",
-                service: this
-            }, {
-                name: "font-weight",
-                type: "list",
-                values: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900", "lighter", "bolder"],
-                service: this
-            }
-        ];
-        //@ts-ignore
-        this.alignment = [
-            {
-                name: "display",
-                type: "list",
-                values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-                service: this
-            }, {
-                name: "position",
-                type: "list",
-                values: ["static", "relative", "absolute"],
-                service: this
-            }, {
-                name: "inset",
-                type: "thickness",
-                service: this
-            }, {
-                name: "margin",
-                type: "thickness",
-                service: this
-            }, {
-                name: "padding",
-                type: "thickness",
-                service: this
-            }
-        ];
-        //@ts-ignore
-        this.grid = [
-            {
-                name: "display",
-                type: "list",
-                values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-                service: this
-            }, {
-                name: "grid-template-columns",
-                type: "string",
-                service: this
-            }, {
-                name: "grid-template-rows",
-                type: "string",
-                service: this
-            }, {
-                name: "column-gap",
-                type: "css-length",
-                service: this
-            }, {
-                name: "row-gap",
-                type: "css-length",
-                service: this
-            }, {
-                name: "align-content",
-                type: "img-list",
-                values: ["center", "space-between", "space-around", "space-evenly", "stretch"],
-                service: this
-            }, {
-                name: "justify-content",
-                type: "img-list",
-                values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
-                service: this
-            }, {
-                name: "align-items",
-                type: "img-list",
-                values: ["center", "start", "end", "stretch", "baseline"],
-                service: this
-            }, {
-                name: "justify-items",
-                type: "img-list",
-                values: ["center", "start", "end", "stretch"],
-                service: this
-            }
-        ];
-        //@ts-ignore
-        this.flex = [
-            {
-                name: "display",
-                type: "list",
-                values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-                service: this
-            }, {
-                name: "flex-direction",
-                type: "img-list",
-                values: ["row", "column"],
-                service: this
-            }, {
-                name: "flex-wrap",
-                type: "img-list",
-                values: ["nowrap", "wrap"],
-                service: this
-            }, {
-                name: "align-content",
-                type: "img-list",
-                values: ["center", "flex-start", "flex-end", "space-between", "space-around", "stretch"],
-                service: this
-            }, {
-                name: "justify-content",
-                type: "img-list",
-                values: ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"],
-                service: this
-            }, {
-                name: "align-items",
-                type: "img-list",
-                values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
-                service: this
-            }
-        ];
         this.name = name;
     }
     isHandledElement(designItem) {

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

@@ -1,9 +1,9 @@
 import { UnkownElementPropertiesService } from './UnkownElementPropertiesService';
 export class ListPropertiesService extends UnkownElementPropertiesService {
+    name = "list";
+    _propertys = new Map();
     constructor(propertyDefinitions) {
         super();
-        this.name = "list";
-        this._propertys = new Map();
         for (let e in propertyDefinitions) {
             let parr = [];
             this._propertys.set(e, parr);