@node-projects/web-component-designer 0.0.273 → 0.0.274

package/dist/elements/controls/MetricsEditor.d.ts

@@ -8,7 +8,11 @@ export declare class MetricsEditor extends BaseCustomWebComponentConstructorAppe
     static readonly template: HTMLTemplateElement;
     property: string;
     unsetValue: string;
+    private _borderDiv;
+    private _elementDiv;
+    constructor();
     ready(): void;
     onDoubleClick(event: PointerEvent): void;
     onKeyDown(event: KeyboardEvent): void;
+    refresh(element: Element): void;
 }

package/dist/elements/controls/MetricsEditor.js

@@ -50,6 +50,10 @@ div.ct {
   vertical-align: middle;
 }
 
+div.ct.box {
+  border: dotted 2px black;
+}
+
 div.ct > div.ct {
   left: 0;
   top: 0;
@@ -83,17 +87,25 @@ span {
   text-overflow: ellipsis;
 }`;
     static template = html `
-  <div class="ct"><span title="position">position</span>
-  <div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="margin">margin</span>
-  <div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="border">border</span>
-  <div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="padding">padding</span>
-  <div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct" style="font-size:6px"><div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div>
+  <div id="position" class="ct"><span title="position">position</span>
+  <div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="margin" class="ct"><span title="margin">margin</span>
+  <div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="border" class="ct"><span title="border">border</span>
+  <div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="padding" class="ct"><span title="padding">padding</span>
+  <div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="element" class="ct" style="font-size:6px"><div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div>
   &nbsp;x&nbsp;
   <div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div>
   </div><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div>
   `;
     property;
     unsetValue;
+    _borderDiv;
+    _elementDiv;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this._borderDiv = this._getDomElement('border');
+        this._elementDiv = this._getDomElement('element');
+    }
     ready() {
         this._parseAttributesToProperties();
         this._assignEvents();
@@ -122,5 +134,18 @@ span {
             this.dispatchEvent(valueChangedEvent);
         }
     }
+    refresh(element) {
+        this._elementDiv.classList.remove('box');
+        this._borderDiv.classList.remove('box');
+        if (element) {
+            let cp = getComputedStyle(element);
+            if (cp.boxSizing == 'content-box') {
+                this._elementDiv.classList.add('box');
+            }
+            else {
+                this._borderDiv.classList.add('box');
+            }
+        }
+    }
 }
 customElements.define('node-projects-metrics-editor', MetricsEditor);

package/dist/elements/helper/GridHelper.d.ts

@@ -1,9 +1,9 @@
 import { IDesignItem } from "../item/IDesignItem.js";
-export declare function GetElementGridInformation(element: HTMLElement): {
+export declare function getElementGridInformation(element: HTMLElement): {
     colSpan: number;
     rowSpan: number;
 };
-export declare function CalculateGridInformation(designItem: IDesignItem): {
+export declare function calculateGridInformation(designItem: IDesignItem): {
     cells?: {
         x: number;
         y: number;

package/dist/elements/helper/GridHelper.js

@@ -1,19 +1,23 @@
 import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "./TransformHelper.js";
-export function GetElementGridInformation(element) {
+export function getElementGridInformation(element) {
     let cs = getComputedStyle(element);
     let rowSpan = 1;
     let colSpan = 1;
-    if (cs.gridRowEnd.startsWith('span'))
+    if (cs.gridRowEnd == 'auto')
+        rowSpan = 1;
+    else if (cs.gridRowEnd.startsWith('span'))
         rowSpan = parseInt(cs.gridRowEnd.substring(4));
     else
         rowSpan = parseInt(cs.gridRowEnd) - parseInt(cs.gridRowStart);
-    if (cs.gridColumnEnd.startsWith('span'))
+    if (cs.gridColumnEnd == 'auto')
+        colSpan = 1;
+    else if (cs.gridColumnEnd.startsWith('span'))
         colSpan = parseInt(cs.gridColumnEnd.substring(4));
     else
         colSpan = parseInt(cs.gridColumnEnd) - parseInt(cs.gridColumnStart);
     return { colSpan, rowSpan };
 }
-export function CalculateGridInformation(designItem) {
+export function calculateGridInformation(designItem) {
     //todo:
     //same name should combine columns/rows
     let itemRect = designItem.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(designItem.element);

package/dist/elements/helper/contextMenu/ContextMenu.d.ts

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from './IContextMenuItem.js';
+import { IContextMenu, IContextMenuItem } from './IContextMenuItem.js';
 export interface IContextMenuOptions {
     defaultIcon?: string;
     subIcon?: string;
@@ -6,7 +6,7 @@ export interface IContextMenuOptions {
     shadowRoot?: ShadowRoot | Document;
     mode?: 'normal' | 'undo';
 }
-export declare class ContextMenu {
+export declare class ContextMenu implements IContextMenu {
     private static _contextMenuCss;
     static count: number;
     menu: IContextMenuItem[];

package/dist/elements/helper/contextMenu/ContextMenu.js

@@ -183,12 +183,12 @@ export class ContextMenu {
                 else {
                     if (item.action)
                         li.addEventListener('click', (e) => {
-                            item.action(e, item, this.context);
+                            item.action(e, item, this.context, this);
                             this.close();
                         });
                     if (this.options?.mode == 'undo') {
                         li.addEventListener('mouseup', (e) => {
-                            item.action(e, item, this.context);
+                            item.action(e, item, this.context, this);
                             this.close();
                         });
                     }

package/dist/elements/helper/contextMenu/IContextMenuItem.d.ts

@@ -1,3 +1,6 @@
+export interface IContextMenu {
+    close: () => void;
+}
 export interface IContextMenuItem {
     readonly id?: string;
     readonly title?: string;
@@ -5,5 +8,5 @@ export interface IContextMenuItem {
     readonly children?: IContextMenuItem[];
     readonly disabled?: boolean;
     readonly shortCut?: string;
-    action?: (event: MouseEvent, item: IContextMenuItem, context?: any) => void;
+    action?: (event: MouseEvent, item: IContextMenuItem, context?: any, menu?: IContextMenu) => void;
 }

package/dist/elements/helper/contextMenu/IContextMenuItem.js

@@ -1,2 +1,3 @@
 ;
+;
 export {};

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

@@ -1,4 +1,4 @@
-import { CalculateGridInformation, GetElementGridInformation } from '../../helper/GridHelper.js';
+import { calculateGridInformation, getElementGridInformation } from '../../helper/GridHelper.js';
 import { pointInRect } from '../../helper/Helper.js';
 import { DefaultPlacementService } from './DefaultPlacementService.js';
 export class GridPlacementService {
@@ -49,15 +49,17 @@ export class GridPlacementService {
     startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        const gridInformation = CalculateGridInformation(container);
+        const gridInformation = calculateGridInformation(container);
         const pos = placementView.getNormalizedEventCoordinates(event);
+        //pos.x -= offsetInControl.x;
+        //pos.y -= offsetInControl.y;
         let row = 0;
         let column = 0;
         for (let cellRow of gridInformation.cells) {
             column = 0;
             for (let cell of cellRow) {
                 if (pointInRect(pos, cell)) {
-                    let info = GetElementGridInformation(items[0].element);
+                    let info = getElementGridInformation(items[0].element);
                     if (cell.name) {
                         items[0].element.style.gridColumn = '';
                         items[0].element.style.gridRow = '';
@@ -76,8 +78,10 @@ export class GridPlacementService {
         placementView.extensionManager.refreshAllExtensions([container]);
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        const gridInformation = CalculateGridInformation(container);
+        const gridInformation = calculateGridInformation(container);
         const pos = placementView.getNormalizedEventCoordinates(event);
+        //pos.x -= offsetInControl.x;
+        //pos.y -= offsetInControl.y;
         let row = 0;
         let column = 0;
         row = 0;
@@ -85,7 +89,7 @@ export class GridPlacementService {
             column = 0;
             for (let cell of cellRow) {
                 if (pointInRect(pos, cell)) {
-                    let info = GetElementGridInformation(items[0].element);
+                    let info = getElementGridInformation(items[0].element);
                     //Grid Area is shorthand for grid row/column, to make undo work correctly we need to set befor and after clear
                     if (cell.name) {
                         items[0].setStyle('grid-area', cell.name);

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

@@ -1,7 +1,9 @@
 import { IProperty } from '../IProperty.js';
 import { BasePropertyEditor } from './BasePropertyEditor.js';
 import { ValueType } from '../ValueType.js';
-export declare class SelectPropertyEditor extends BasePropertyEditor<HTMLSelectElement> {
+export declare class SelectPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    elementSelect: HTMLSelectElement;
+    elementInput: HTMLInputElement;
     constructor(property: IProperty);
     refreshValue(valueType: ValueType, value: any): void;
 }

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

@@ -1,14 +1,17 @@
 import { BasePropertyEditor } from './BasePropertyEditor.js';
 export class SelectPropertyEditor extends BasePropertyEditor {
+    elementSelect;
+    elementInput;
     constructor(property) {
         super(property);
-        let element = document.createElement("select");
+        let element = document.createElement("div");
+        let elementSel = document.createElement("select");
         if (property.type == 'enum') {
             for (let v of property.enumValues) {
                 let option = document.createElement("option");
                 option.value = v[1];
                 option.text = v[0];
-                element.appendChild(option);
+                elementSel.appendChild(option);
             }
         }
         else {
@@ -16,13 +19,27 @@ export class SelectPropertyEditor extends BasePropertyEditor {
                 let option = document.createElement("option");
                 option.value = v;
                 option.text = v;
-                element.appendChild(option);
+                elementSel.appendChild(option);
             }
         }
-        element.onchange = (e) => this._valueChanged(element.value);
+        elementSel.onchange = (e) => this._valueChanged(elementSel.value);
+        let elementInput = document.createElement("input");
+        elementInput.style.display = 'none';
+        elementInput.onchange = (e) => this._valueChanged(elementInput.value);
+        this.elementSelect = elementSel;
+        this.elementInput = elementInput;
+        element.appendChild(this.elementSelect);
+        element.appendChild(this.elementInput);
         this.element = element;
     }
     refreshValue(valueType, value) {
-        this.element.value = value;
+        this.elementSelect.style.display = 'block';
+        this.elementInput.style.display = 'none';
+        this.elementSelect.value = value;
+        if (this.elementSelect.value != value && value) {
+            this.elementInput.value = value;
+            this.elementSelect.style.display = 'none';
+            this.elementInput.style.display = 'block';
+        }
     }
 }

package/dist/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js

@@ -1,4 +1,5 @@
 import { BasePropertyEditor } from '../BasePropertyEditor.js';
+import { getElementGridInformation } from '../../../../helper/GridHelper.js';
 export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
     //Todo: multiple cell selection, grid area support, span support
     _root;
@@ -17,25 +18,25 @@ export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
             let container = this.designItems[0].element.parentElement;
             if (container) {
                 let styleContainer = getComputedStyle(container);
+                let info = getElementGridInformation(this.designItems[0].element);
                 let style = getComputedStyle(this.designItems[0].element);
                 let cntCol = styleContainer.gridTemplateColumns.split(' ').length;
                 let cntRow = styleContainer.gridTemplateRows.split(' ').length;
                 this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
                 this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
                 let rowStart = parseInt(style.gridRowStart);
-                let rowEnd = style.gridRowEnd == 'auto' ? rowStart : parseInt(style.gridRowEnd);
-                rowEnd = rowEnd <= rowStart ? rowStart + 1 : rowEnd;
+                let rowEnd = rowStart + info.rowSpan;
                 let colStart = parseInt(style.gridColumnStart);
-                let colEnd = style.gridColumnEnd == 'auto' ? colStart : parseInt(style.gridColumnEnd);
-                colEnd = colEnd <= colStart ? colStart + 1 : colEnd;
+                let colEnd = colStart + info.colSpan;
                 for (let p = 1; p <= cntRow; p++) {
                     for (let n = 1; n <= cntCol; n++) {
                         const b = document.createElement('button');
                         b.style.minHeight = '10px';
                         b.onclick = () => {
+                            let info = getElementGridInformation(this.designItems[0].element);
                             let grp = this.designItems[0].openGroup('Change grid row/column');
-                            this.designItems[0].setStyle("grid-row", p + ' / ' + (p + 1));
-                            this.designItems[0].setStyle("grid-column", n + ' / ' + (n + 1));
+                            this.designItems[0].setStyle("grid-row", p + ' / ' + (p + info.rowSpan));
+                            this.designItems[0].setStyle("grid-column", n + ' / ' + (n + info.colSpan));
                             grp.commit();
                         };
                         if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd)

package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js

@@ -10,6 +10,6 @@ export class MetricsPropertyEditor extends BasePropertyEditor {
         this.element = selector;
     }
     refreshValue(valueType, value) {
-        //this.element.valueLeft = value;
+        this.element.refresh(this.designItems?.[0]?.element);
     }
 }

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

@@ -42,6 +42,10 @@ export class AbstractPolymerLikePropertiesService extends AbstractPropertiesServ
                 let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute };
                 properties.push(property);
             }
+            else {
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
         }
         return properties;
     }

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

@@ -24,6 +24,11 @@ export class CommonPropertiesService extends AbstractPropertiesService {
             type: "string",
             service: this,
             propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "part",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "tabindex",
             type: "number",

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.js

@@ -1,4 +1,4 @@
-import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { calculateGridInformation } from "../../../../helper/GridHelper.js";
 import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from '../AbstractExtension.js';
 import { OverlayLayer } from "../OverlayLayer.js";
@@ -16,7 +16,7 @@ export class DisplayGridExtension extends AbstractExtension {
         this.refresh(event);
     }
     refresh(event) {
-        this.gridInformation = CalculateGridInformation(this.extendedItem);
+        this.gridInformation = calculateGridInformation(this.extendedItem);
         let cells = this.gridInformation.cells;
         if (!this._group) {
             this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
@@ -56,7 +56,7 @@ export class DisplayGridExtension extends AbstractExtension {
     }
     _initSVGArrays() {
         this._removeAllOverlays();
-        this.gridInformation = CalculateGridInformation(this.extendedItem);
+        this.gridInformation = calculateGridInformation(this.extendedItem);
         this._cells = new Array(this.gridInformation.cells.length);
         this.gridInformation.cells.forEach((row, i) => this._cells[i] = new Array(row.length));
         this._texts = new Array(this.gridInformation.cells.length);

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.d.ts

@@ -1,10 +1,10 @@
-import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { calculateGridInformation } from "../../../../helper/GridHelper.js";
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { AbstractExtension } from '../AbstractExtension.js';
 import { IExtensionManager } from '../IExtensionManger.js';
 export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
-    gridInformation: ReturnType<typeof CalculateGridInformation>;
+    gridInformation: ReturnType<typeof calculateGridInformation>;
     private _resizers;
     private _initalPos;
     private _initialSizes;

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.js

@@ -1,6 +1,6 @@
 import { EventNames } from "../../../../../enums/EventNames.js";
 import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../../helper/CssUnitConverter.js";
-import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { calculateGridInformation } from "../../../../helper/GridHelper.js";
 import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from '../AbstractExtension.js';
 import { OverlayLayer } from "../OverlayLayer.js";
@@ -17,7 +17,7 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
         this.refresh(event);
     }
     refresh(event) {
-        this.gridInformation = CalculateGridInformation(this.extendedItem);
+        this.gridInformation = calculateGridInformation(this.extendedItem);
         this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
         this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
         this._group.style.transformOrigin = '0 0';

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -185,7 +185,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                         let label = document.createElement("label");
                         label.htmlFor = p.name;
                         label.textContent = p.name;
-                        label.title = p.name;
+                        label.title = p.name + ' (type: ' + p.type + (p.defaultValue ? ', default: ' + p.defaultValue : '') + ', propertytype: ' + p.propertyType + ')';
                         label.ondragleave = (e) => this._onDragLeave(e, p, label);
                         label.ondragover = (e) => this._onDragOver(e, p, label);
                         label.ondrop = (e) => this._onDrop(e, p, label);
@@ -251,16 +251,29 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         PropertyGridPropertyList.openContextMenu(event, this._designItems, property);
     }
     static openContextMenu(event, designItems, property) {
-        const ctxMenu = [
+        const ctxMenuItems = [
             {
                 title: 'clear', action: (e) => {
                     property.service.clearValue(designItems, property, 'value');
                     designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
                 }
             },
+            {
+                title: 'edit as text', action: (e, _1, _2, menu) => {
+                    menu.close();
+                    setTimeout(() => {
+                        const oldValue = property.service.getValue(designItems, property);
+                        let value = prompt(`edit value of '${property.name}' as string:`, oldValue);
+                        if (value && value != oldValue) {
+                            property.service.setValue(designItems, property, value);
+                        }
+                        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
+                    }, 10);
+                }
+            },
         ];
         if (designItems[0].serviceContainer.config.openBindingsEditor) {
-            ctxMenu.push(...[
+            ctxMenuItems.push(...[
                 { title: '-' },
                 {
                     title: 'edit binding', action: () => {
@@ -278,7 +291,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
             ]);
         }
         ;
-        ContextMenu.show(ctxMenu, event);
+        ContextMenu.show(ctxMenuItems, event);
     }
     designItemsChanged(designItems) {
         this._designItems = designItems;

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export * from "./elements/helper/contextMenu/ContextMenu.js";
 export * from "./elements/helper/Helper.js";
 export * from "./elements/helper/SwitchContainerHelper.js";
 export * from "./elements/helper/NpmPackageLoader.js";
-export type { IContextMenuItem } from "./elements/helper/contextMenu/IContextMenuItem.js";
+export type { IContextMenuItem, IContextMenu } from "./elements/helper/contextMenu/IContextMenuItem.js";
 export * from "./elements/item/DesignItem.js";
 export type { IDesignItem } from "./elements/item/IDesignItem.js";
 export type { IBinding } from "./elements/item/IBinding.js";

package/package.json

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