@node-projects/web-component-designer 0.0.111 → 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,7 +69,7 @@ export class UnkownElementPropertiesService {
                 all = all && has;
                 some = some || has;
             });
-            //todo: optimize perf, do not call bindings service for each 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]);
             });
@@ -80,6 +80,13 @@ export class UnkownElementPropertiesService {
             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) {

package/package.json

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