@node-projects/web-component-designer 0.0.110 → 0.0.113

package/README.md

@@ -1,20 +1,15 @@
 # web-component-designer
 
-## Caution - this is a preview Version, a RC1 is now planed for May 2022 - it's already usable but big Refactoring could still happen
+```This is a preview version. It's already useable but big refactorings could still happen.```
 
-
-A HTML WebComponent for Designing Webcomponents and HTML Pages.
-
-Based on PolymerLabs Wizzywid (but it does not use Polymer any more.)
-
-This is a Designer Framework wich could easily be included in your own Software..
+A HTML web component for designing web components and HTML pages based on PolymerLabs wizzywid which can easily be integrated in your own software.
+Meanwhile polymer is not used anymore.
 
 ![image](https://user-images.githubusercontent.com/364896/117482820-358e2d80-af65-11eb-97fd-9d15ebf1966f.png)
 
 ## NPM Package
 
-At the moment there is no NPM Package.
-But there will be one when project is in Release Candidate state.
+At the moment there is no npm package available, but there will be one as soon as the software has reached RC status.
 
 ## Demo
 
@@ -35,9 +30,7 @@ repository: https://github.com/node-projects/web-component-designer-simple-demo
 
 ## Features we are workin on
 
- - CSS Grid Positioning (planed)
- - look at the issues
- - Much, much more ...
+https://github.com/node-projects/web-component-designer/issues
 
 ## Developing
 
@@ -46,38 +39,39 @@ repository: https://github.com/node-projects/web-component-designer-simple-demo
   $ npm install
 ```
 
-  * Compile Typescript after doing changes
+  * Compile typescript after doing changes
 ```
-  $ npm run build
+  $ npm run build (if you use Visual Studio Code, you can also run the build task via Ctrl + Shift + B > tsc:build - tsconfig.json)
 ```
 
-## Using
-
-at first you have to setup a service container, providing services for History, Properties, Elements, ....
+  * *Link node module*<br/>
+```
+  $ npm link 
+```
 
-## Configuring
+## Using
 
-## For some Widgets the Designer needs Additional Dependencies
+At first you have to setup a service container providing services for history, properties, elements, ...
 
 ## Code Editor
 
-You can select to use on of 3 Code Editors Available (ACE, CodeMirrow, Monaco).
-If you use one of the Widgets, you need to include the JS lib in you index.html and then use the specific widget.
+You can select to use one of 3 code editors available (ACE, CodeMirrow, Monaco).
+If you use one of the widgets, you need to include the JS lib in your index.html and then use the specific widget.
 
 ## TreeView
 
-We have 2 Tree Components. One Dependend Less and one Feature Rich wich uses FancyTree (and cause of this it needs JQuery and JqueryUI)
+We have 2 tree components. One independent and one feature rich which uses FancyTree (and cause of this it needs JQuery and JqueryUI).
 
 ## DragDrop
 
-If you'd like to use the Designer on Mobile, you need the mobile-drag-drop npm Library and include our polyfill.
-Your addition to your index.html should look like this:
+If you'd like to use the designer on mobile, you need the mobile-drag-drop npm library and include our polyfill.
+Your index.html should be extended as follows:
 
     <link rel="stylesheet" href="/node_modules/mobile-drag-drop/default.css">
     <script src="/node_modules/mobile-drag-drop/index.js"></script>
     <script src="/node_modules/@node-projects/web-component-designer/dist/polyfill/mobileDragDrop.js"></script>
 
-## Copyright notice:
+## Copyright notice
 
 The Library uses Images from the Chrome Dev Tools, see
 https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src

package/dist/elements/controls/DesignerTabControl.js

@@ -136,8 +136,13 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         let w = 0;
         DomHelper.removeAllChildnodes(this._moreContainer);
         DomHelper.removeAllChildnodes(this._headerDiv);
+        let reloadOnce = true;
         for (let item of this.children) {
             let htmlItem = item;
+            if (!this._elementMap.has(htmlItem) && reloadOnce) {
+                this.refreshItems();
+                reloadOnce = false;
+            }
             const tabHeaderDiv = this._elementMap.get(htmlItem);
             this._moreContainer.appendChild(tabHeaderDiv);
             if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {

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

@@ -15,8 +15,8 @@ export type { IContextMenuItem } from "./elements/helper/contextMenu/IContextmen
 export * from "./elements/item/DesignItem.js";
 export type { IDesignItem } from "./elements/item/IDesignItem.js";
 export type { IBinding } from "./elements/item/IBinding.js";
-export type { BindingMode } from "./elements/item/BindingMode.js";
-export type { BindingTarget } from "./elements/item/BindingTarget.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.110",
+  "version": "0.0.113",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",