@node-projects/web-component-designer 0.0.32 → 0.0.36

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

@@ -19,7 +19,7 @@ export class DefaultPlacementService {
     getElementOffset(container, designItem) {
         return container.element.getBoundingClientRect();
     }
-    calculateTrack(event, placementView, startPoint, newPoint, item) {
+    calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
         let trackX = newPoint.x - startPoint.x;
         let trackY = newPoint.y - startPoint.y;
         if (!event.ctrlKey) {
@@ -29,15 +29,15 @@ export class DefaultPlacementService {
             }
             else if (placementView.alignOnSnap) {
                 let rect = item.element.getBoundingClientRect();
-                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.originalX - startPoint.offsetInControlX, y: newPoint.originalY - startPoint.offsetInControlY }, { width: rect.width, height: rect.height }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, { width: rect.width, height: rect.height }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
                 if (newPos.x !== null) {
-                    trackX = newPos.x - Math.round(startPoint.originalX) + Math.round(startPoint.offsetInControlX);
+                    trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
                 }
                 else {
                     trackX = Math.round(trackX);
                 }
                 if (newPos.y !== null) {
-                    trackY = newPos.y - Math.round(startPoint.originalY) + Math.round(startPoint.offsetInControlY);
+                    trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y);
                 }
                 else {
                     trackY = Math.round(trackY);
@@ -46,7 +46,7 @@ export class DefaultPlacementService {
         }
         return { x: trackX, y: trackY };
     }
-    placePoint(event, placementView, container, startPoint, newPoint, items) {
+    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         let trackX = newPoint.x;
         let trackY = newPoint.y;
         if (!event.ctrlKey) {
@@ -55,7 +55,7 @@ export class DefaultPlacementService {
                 trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
             }
             else if (placementView.alignOnSnap) {
-                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.originalX - startPoint.offsetInControlX, y: newPoint.originalY - startPoint.offsetInControlY }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
                 if (newPos.x !== null) {
                     trackX = newPos.x;
                 }
@@ -72,10 +72,10 @@ export class DefaultPlacementService {
         }
         return { x: trackX, y: trackY };
     }
-    place(event, placementView, container, startPoint, newPoint, items) {
+    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         //TODO:, this should revert all undo actions while active
         //maybe a undo actions returns itself or an id so it could be changed?
-        let track = this.calculateTrack(event, placementView, startPoint, newPoint, items[0]);
+        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         //TODO: -> what is if a transform already exists -> backup existing style.?
         for (const designItem of items) {
             designItem.element.style.transform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
@@ -85,8 +85,8 @@ export class DefaultPlacementService {
     }
     leaveContainer(container, items) {
     }
-    finishPlace(event, placementView, container, startPoint, newPoint, items) {
-        let track = this.calculateTrack(event, placementView, startPoint, newPoint, items[0]);
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         for (const designItem of items) {
             let movedElement = designItem.element;
             let oldLeft = parseInt(movedElement.style.left);

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

@@ -1,4 +1,3 @@
-import { IDesignerMousePoint } from '../../../interfaces/IDesignerMousePoint.js';
 import { IPoint } from '../../../interfaces/IPoint.js';
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
@@ -10,7 +9,7 @@ export declare class FlexBoxPlacementService 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/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/DefaultEditorTypesService.js

@@ -5,6 +5,8 @@ import { NumberPropertyEditor } from "./propertyEditors/NumberPropertyEditor";
 import { SelectPropertyEditor } from "./propertyEditors/SelectPropertyEditor";
 import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor';
 import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor';
+import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor';
+import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
 export class DefaultEditorTypesService {
     getEditorForProperty(property) {
         if (property.createEditor)
@@ -38,6 +40,14 @@ export class DefaultEditorTypesService {
                 {
                     return new BooleanPropertyEditor(property);
                 }
+            case "img-list":
+                {
+                    return new ImageButtonListPropertyEditor(property);
+                }
+            case "thickness":
+                {
+                    return new ThicknessPropertyEditor(property);
+                }
             case "css-length":
             case "thickness":
             case "string":

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) {

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor copy.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from "../IProperty";
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ValueType } from "../ValueType";
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+export declare class ImageButtonListPropertyEditor extends BasePropertyEditor<ImageButtonListSelector> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor copy.js

@@ -0,0 +1,40 @@
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+import { PropertiesHelper } from "../services/PropertiesHelper.js";
+import { assetsPath } from "../../../../Constants.js";
+export class ImageButtonListPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        const selector = new ImageButtonListSelector();
+        selector.property = property.name;
+        selector.unsetValue = property.defaultValue;
+        const propName = PropertiesHelper.camelToDashCase(property.name);
+        if (property.type == 'enum') {
+            for (let v of property.enumValues) {
+                let button = document.createElement("button");
+                button.dataset.value = v[1];
+                let img = document.createElement("img");
+                img.title = v[1];
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v[1] + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        else {
+            for (let v of property.values) {
+                let button = document.createElement("button");
+                button.dataset.value = v;
+                let img = document.createElement("img");
+                img.title = v;
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from "../IProperty";
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ValueType } from "../ValueType";
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+export declare class ImageButtonListPropertyEditor extends BasePropertyEditor<ImageButtonListSelector> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

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

@@ -0,0 +1,40 @@
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+import { PropertiesHelper } from "../services/PropertiesHelper.js";
+import { assetsPath } from "../../../../Constants.js";
+export class ImageButtonListPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        const selector = new ImageButtonListSelector();
+        selector.property = property.name;
+        selector.unsetValue = property.defaultValue;
+        const propName = PropertiesHelper.camelToDashCase(property.name);
+        if (property.type == 'enum') {
+            for (let v of property.enumValues) {
+                let button = document.createElement("button");
+                button.dataset.value = v[1];
+                let img = document.createElement("img");
+                img.title = v[1];
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v[1] + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        else {
+            for (let v of property.values) {
+                let button = document.createElement("button");
+                button.dataset.value = v;
+                let img = document.createElement("img");
+                img.title = v;
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

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

@@ -0,0 +1,8 @@
+import { IProperty } from "../IProperty";
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ValueType } from "../ValueType";
+import { ThicknessEditor } from '../../../controls/ThicknessEditor';
+export declare class ThicknessPropertyEditor extends BasePropertyEditor<ThicknessEditor> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

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

@@ -0,0 +1,14 @@
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ThicknessEditor } from '../../../controls/ThicknessEditor';
+export class ThicknessPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        const selector = new ThicknessEditor();
+        selector.property = property.name;
+        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = 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.d.ts

@@ -6,8 +6,9 @@ export declare class CssPropertiesService implements IPropertiesService {
     private styles;
     private alignment;
     private grid;
-    name: 'alignment' | 'styles' | 'grid';
-    constructor(name: 'alignment' | 'styles' | 'grid');
+    private flex;
+    name: 'set-styles' | 'alignment' | 'styles' | 'grid' | 'flex';
+    constructor(name: 'set-styles' | 'alignment' | 'styles' | 'grid' | 'flex');
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];