@node-projects/web-component-designer 0.0.109 → 0.0.112

package/dist/elements/services/ServiceContainer.d.ts

@@ -28,6 +28,10 @@ import { IBindableObjectsService } from "./bindableObjectsService/IBindableObjec
 import { IBindableObjectDragDropService } from "./bindableObjectsService/IBindableObjectDragDropService.js";
 import { IDesignViewToolbarButtonProvider } from "../widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js";
 import { IElementInteractionService } from './elementInteractionService/IElementInteractionService';
+import { IProperty } from "./propertiesService/IProperty.js";
+import { IDesignItem } from "../item/IDesignItem.js";
+import { IBinding } from "../item/IBinding";
+import { BindingTarget } from "../item/BindingTarget";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -52,6 +56,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     readonly config: {
         codeViewWidget: new (...args: any[]) => ICodeView & HTMLElement;
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
+        openBindingsEditor?: (property: IProperty, designItems: IDesignItem[], binding: IBinding, bindingTarget: BindingTarget) => Promise<void>;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
     removeDesignerExtensionOfType(container: (ExtensionType | string), lambda: new (...args: any[]) => IDesignerExtensionProvider): void;

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

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

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

@@ -2,6 +2,7 @@ import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
+import { IBinding } from "../../../item/IBinding.js";
 import { BindingTarget } from "../../../item/BindingTarget";
 export declare class AttributesPropertiesService implements IPropertiesService {
     name: string;
@@ -13,5 +14,6 @@ export declare class AttributesPropertiesService implements IPropertiesService {
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string;
+    getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

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

@@ -62,6 +62,13 @@ export class AttributesPropertiesService {
         }
         return null;
     }
+    getBinding(designItems, property) {
+        //TODO: optimize perf, do not call bindings service for each property. 
+        const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+            return s.getBindings(designItems[0]);
+        });
+        return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name);
+    }
     getUnsetValue(designItems, property) {
         return property.defaultValue;
     }

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

@@ -3,6 +3,7 @@ import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
+import { IBinding } from "../../../item/IBinding";
 export declare class CommonPropertiesService implements IPropertiesService {
     private commonProperties;
     name: string;
@@ -14,5 +15,6 @@ export declare class CommonPropertiesService implements IPropertiesService {
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
+    getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

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

@@ -106,6 +106,13 @@ export class CommonPropertiesService {
         }
         return null;
     }
+    getBinding(designItems, property) {
+        //TODO: optimize perf, do not call bindings service for each property. 
+        const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+            return s.getBindings(designItems[0]);
+        });
+        return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name);
+    }
     getUnsetValue(designItems, property) {
         return property.defaultValue;
     }

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

@@ -3,6 +3,7 @@ import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from '../ValueType';
 import { BindingTarget } from '../../../item/BindingTarget.js';
+import { IBinding } from '../../../item/IBinding';
 export declare class CssPropertiesService implements IPropertiesService {
     private styles;
     private alignment;
@@ -18,5 +19,6 @@ export declare class CssPropertiesService implements IPropertiesService {
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string;
+    getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

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

@@ -312,6 +312,13 @@ export class CssPropertiesService {
         }
         return null;
     }
+    getBinding(designItems, property) {
+        //TODO: optimize perf, do not call bindings service for each property. 
+        const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+            return s.getBindings(designItems[0]);
+        });
+        return bindings.find(x => (x.target == BindingTarget.css) && x.targetName == property.name);
+    }
     //todo: optimize perf, call window.getComputedStyle only once per item, and not per property
     getUnsetValue(designItems, property) {
         if (designItems != null && designItems.length !== 0) {

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

@@ -3,6 +3,7 @@ import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
+import { IBinding } from "../../../item/IBinding";
 export declare abstract class UnkownElementPropertiesService implements IPropertiesService {
     isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
@@ -12,6 +13,7 @@ export declare abstract class UnkownElementPropertiesService implements IPropert
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
     getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

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

@@ -69,11 +69,24 @@ export class UnkownElementPropertiesService {
                 all = all && has;
                 some = some || has;
             });
+            //TODO: optimize perf, do not call bindings service for each property. 
+            const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.getBindings(designItems[0]);
+            });
+            if (bindings && bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name))
+                return ValueType.bound;
         }
         else
             return ValueType.none;
         return all ? ValueType.all : some ? ValueType.some : ValueType.none;
     }
+    getBinding(designItems, property) {
+        //TODO: optimize perf, do not call bindings service for each property. 
+        const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+            return s.getBindings(designItems[0]);
+        });
+        return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name);
+    }
     getValue(designItems, property) {
         if (designItems != null && designItems.length !== 0) {
             let attributeName = PropertiesHelper.camelToDashCase(property.name);

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.d.ts

@@ -1,3 +1,4 @@
+import { IProperty } from '../../services/propertiesService/IProperty';
 import { ServiceContainer } from '../../services/ServiceContainer';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
 import { IDesignItem } from '../../item/IDesignItem';
@@ -12,6 +13,7 @@ export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazy
     constructor(serviceContainer: ServiceContainer);
     setPropertiesService(propertiesService: IPropertiesService): void;
     createElements(designItem: IDesignItem): void;
+    openContextMenu(event: MouseEvent, property: IProperty): void;
     designItemsChanged(designItems: IDesignItem[]): void;
     refreshForDesignItems(items: IDesignItem[]): void;
 }

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

@@ -114,10 +114,10 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                         rect.style.border = '1px white solid';
                         rectContainer.appendChild(rect);
                         this._div.appendChild(rectContainer);
-                        ContextMenuHelper.addContextMenu(rectContainer, [
-                            { title: 'clear', action: (e) => p.service.clearValue(this._designItems, p) },
-                            { title: 'new binding', action: (e) => alert('new binding() ' + p.name) }
-                        ]);
+                        rect.oncontextmenu = (event) => {
+                            event.preventDefault();
+                            this.openContextMenu(event, p);
+                        };
                         let label = document.createElement("label");
                         label.htmlFor = p.name;
                         label.textContent = p.name;
@@ -131,6 +131,23 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
             }
         }
     }
+    openContextMenu(event, property) {
+        const ctxMenu = [
+            { title: 'clear', action: (e) => property.service.clearValue(this._designItems, property) },
+        ];
+        if (this._serviceContainer.config.openBindingsEditor) {
+            ctxMenu.push(...[
+                { title: '-' },
+                { title: 'edit binding', action: () => {
+                        let target = this._propertiesService.getPropertyTarget(this._designItems[0], property);
+                        let binding = this._propertiesService.getBinding(this._designItems, property);
+                        this._serviceContainer.config.openBindingsEditor(property, this._designItems, binding, target);
+                    } }
+            ]);
+        }
+        ;
+        ContextMenuHelper.showContextMenu(null, event, null, ctxMenu);
+    }
     designItemsChanged(designItems) {
         this._designItems = designItems;
         for (let m of this._propertyMap) {
@@ -141,6 +158,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         for (let m of this._propertyMap) {
             let s = this._propertiesService.isSet(items, m[0]);
             let v = this._propertiesService.getValue(items, m[0]);
+            m[1].isSetElement.title = s;
             if (s == ValueType.none) {
                 m[1].isSetElement.style.background = '';
                 v = this._propertiesService.getUnsetValue(items, m[0]);

package/dist/index.d.ts

@@ -14,6 +14,9 @@ export * from "./elements/helper/Helper.js";
 export type { IContextMenuItem } 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";
+export * from "./elements/item/BindingMode.js";
+export * from "./elements/item/BindingTarget.js";
 export * from "./elements/services/bindableObjectsService/BindableObjectType.js";
 export type { IBindableObject } from "./elements/services/bindableObjectsService/IBindableObject.js";
 export type { IBindableObjectsService } from "./elements/services/bindableObjectsService/IBindableObjectsService.js";

package/dist/index.js

@@ -12,6 +12,8 @@ export * from "./elements/helper/w3color.js";
 export * from "./elements/helper/contextMenu/ContextMenuHelper.js";
 export * from "./elements/helper/Helper.js";
 export * from "./elements/item/DesignItem.js";
+export * from "./elements/item/BindingMode.js";
+export * from "./elements/item/BindingTarget.js";
 export * from "./elements/services/bindableObjectsService/BindableObjectType.js";
 export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
 export * from "./elements/services/bindingsService/SpecialTagsBindingService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.109",
+  "version": "0.0.112",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,26 +13,26 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.9.1",
+    "@node-projects/base-custom-webcomponent": "^0.9.2",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.34",
+    "@papyrs/stylo": "^0.0.37",
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.14",
     "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.7.1",
+    "ace-builds": "^1.9.6",
     "codemirror": "^6.0.1",
     "esprima-next": "^5.8.3",
     "html2canvas": "*",
-    "jest": "^28.1.3",
-    "jquery": "^3.6.0",
+    "jest": "^28.0.8",
+    "jquery": "^3.6.1",
     "jquery.fancytree": "^2.38.2",
-    "monaco-editor": "^0.33.0",
-    "ts-jest": "^28.0.7",
-    "typescript": "^4.7.4",
+    "monaco-editor": "^0.34.0",
+    "ts-jest": "^28.0.8",
+    "typescript": "^4.8.2",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {