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

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

@@ -27,6 +27,7 @@ import { IDemoProviderService } from "./demoProviderService/IDemoProviderService
 import { IBindableObjectsService } from "./bindableObjectsService/IBindableObjectsService.js";
 import { IBindableObjectDragDropService } from "./bindableObjectsService/IBindableObjectDragDropService.js";
 import { IDesignViewToolbarButtonProvider } from "../widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js";
+import { IElementInteractionService } from './elementInteractionService/IElementInteractionService';
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -45,6 +46,7 @@ interface ServiceNameMap {
     "copyPasteService": ICopyPasteService;
     "modelCommandService": IModelCommandService;
     "demoProviderService": IDemoProviderService;
+    "elementInteractionService": IElementInteractionService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -62,6 +64,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get bindingService(): IBindingService;
     get bindableObjectsServices(): IBindableObjectsService[];
     get bindableObjectDragDropService(): IBindableObjectDragDropService;
+    get elementInteractionServices(): IElementInteractionService[];
     get propertiesServices(): IPropertiesService[];
     get containerServices(): IPlacementService[];
     get snaplinesProviderService(): ISnaplinesProviderService;

package/dist/elements/services/ServiceContainer.js

@@ -31,6 +31,9 @@ export class ServiceContainer extends BaseServiceContainer {
     get bindableObjectDragDropService() {
         return this.getLastService('bindableObjectDragDropService');
     }
+    get elementInteractionServices() {
+        return this.getServices('elementInteractionService');
+    }
     get propertiesServices() {
         return this.getServices('propertyService');
     }

package/dist/elements/services/elementInteractionService/IElementInteractionService.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IService } from "../IService";
+export interface IElementInteractionService extends IService {
+    stopEventHandling(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
+}

package/dist/elements/services/elementInteractionService/IElementInteractionService.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/elementsService/IElementDefinition.d.ts

@@ -4,6 +4,7 @@ export interface IElementDefinition {
     name?: string;
     description?: string;
     import?: string;
+    className?: string;
     type?: string;
     defaultContent?: any;
     defaultAttributes?: {

package/dist/elements/services/elementsService/WebcomponentManifestElementsService.js

@@ -15,24 +15,8 @@ export class WebcomponentManifestElementsService {
         for (let m of manifest.modules) {
             for (let e of m.exports) {
                 if (e.kind == 'custom-element-definition') {
-                    this._elementList.push({ tag: e.name, import: this._importPrefix + '/' + e.declaration.module, defaultWidth: "200px", defaultHeight: "200px" });
-                    try {
-                        //@ts-ignore
-                        if (importShim) {
-                            //@ts-ignore
-                            importShim(this._importPrefix + '/' + e.declaration.module).then(x => {
-                                customElements.define(e.name, x[e.declaration.name]);
-                            });
-                        }
-                        else {
-                            import(this._importPrefix + '/' + e.declaration.module).then(x => {
-                                customElements.define(e.name, x[e.declaration.name]);
-                            });
-                        }
-                    }
-                    catch (err) {
-                        console.warn(err);
-                    }
+                    let elDef = { tag: e.name, import: this._importPrefix + '/' + e.declaration.module, defaultWidth: "200px", defaultHeight: "200px", className: e.declaration.name };
+                    this._elementList.push(elDef);
                 }
             }
             if (this._resolveStored) {

package/dist/elements/services/instanceService/DefaultInstanceService.js

@@ -10,12 +10,18 @@ export class DefaultInstanceService {
             //@ts-ignore
             if (importShim) {
                 //@ts-ignore
-                importShim(importUri).then(() => {
+                importShim(importUri).then((x) => {
+                    let ctor = customElements.get(definition.tag);
+                    if (!ctor && definition.className && x[definition.className])
+                        customElements.define(definition.tag, x[definition.className]);
                     //TODO: refresh all extensions
                 });
             }
             else {
-                import(importUri).then(() => {
+                import(importUri).then((x) => {
+                    let ctor = customElements.get(definition.tag);
+                    if (!ctor && definition.className && x[definition.className])
+                        customElements.define(definition.tag, x[definition.className]);
                     //TODO: refresh all extensions
                 });
             }

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

@@ -69,6 +69,12 @@ 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;

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

@@ -25,7 +25,7 @@ export class WebcomponentManifestPropertiesService extends UnkownElementProperti
                     if (declaration) {
                         if (declaration.members) {
                             for (let d of declaration.members) {
-                                if (d.kind == 'field') {
+                                if (d.kind == 'field' && d.privacy !== 'private' && d.privacy !== 'protected') {
                                     let pType = PropertyType.property;
                                     if (declaration.attributes)
                                         pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -39,6 +39,12 @@ export class PointerTool {
         }
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
+        const interactionServices = designerCanvas.serviceContainer.elementInteractionServices;
+        if (interactionServices)
+            for (let s of interactionServices) {
+                if (s.stopEventHandling(designerCanvas, event, currentElement))
+                    return;
+            }
         if (event.button == 2) {
             this._showContextMenu(event, designerCanvas);
             return;

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

@@ -141,6 +141,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 type { BindingMode } from "./elements/item/BindingMode.js";
+export type { BindingTarget } 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";
@@ -38,6 +41,7 @@ export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export type { IDemoProviderService } from "./elements/services/demoProviderService/IDemoProviderService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export type { IDragDropService } from "./elements/services/dragDropService/IDragDropService.js";
+export type { IElementInteractionService } from "./elements/services/elementInteractionService/IElementInteractionService.js";
 export type { IElementDefinition } from "./elements/services/elementsService/IElementDefinition.js";
 export type { IElementsJson } from "./elements/services/elementsService/IElementsJson.js";
 export type { IElementsService } from "./elements/services/elementsService/IElementsService.js";

package/package.json

@@ -1,42 +1,42 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.0.107",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.9.1",
-    "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.30",
-    "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.14",
-    "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.7.1",
-    "codemirror": "^6.0.1",
-    "esprima-next": "^5.8.3",
-    "html2canvas": "*",
-    "jest": "^28.1.2",
-    "jquery": "^3.6.0",
-    "jquery.fancytree": "^2.38.2",
-    "monaco-editor": "^0.33.0",
-    "ts-jest": "^28.0.5",
-    "typescript": "^4.7.4",
-    "typescript-lit-html-plugin": "^0.9.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "A UI designer for Polymer apps",
+  "name": "@node-projects/web-component-designer",
+  "version": "0.0.110",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@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.37",
+    "@types/codemirror": "^5.60.5",
+    "@types/jquery": "^3.5.14",
+    "@types/jquery.fancytree": "0.0.7",
+    "ace-builds": "^1.9.6",
+    "codemirror": "^6.0.1",
+    "esprima-next": "^5.8.3",
+    "html2canvas": "*",
+    "jest": "^28.0.8",
+    "jquery": "^3.6.1",
+    "jquery.fancytree": "^2.38.2",
+    "monaco-editor": "^0.34.0",
+    "ts-jest": "^28.0.8",
+    "typescript": "^4.8.2",
+    "typescript-lit-html-plugin": "^0.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}