@node-projects/web-component-designer 0.0.264 → 0.0.266

package/dist/elements/services/bindableObjectsService/IBindableObjectDragDropService.d.ts

@@ -1,8 +1,11 @@
 import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IProperty } from "../propertiesService/IProperty.js";
 import { IBindableObject } from "./IBindableObject.js";
 export interface IBindableObjectDragDropService {
     dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): any;
     dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): any;
     dragOver(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): 'none' | 'copy' | 'link' | 'move';
     drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindableObject: IBindableObject<any>, element: Element): any;
+    dragOverOnProperty?(event: DragEvent, property: IProperty): 'none' | 'copy' | 'link' | 'move';
+    dropOnProperty?(event: DragEvent, property: IProperty): any;
 }

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

@@ -17,6 +17,9 @@ export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazy
     createElements(designItem: IDesignItem): void;
     private createPropertyGroups;
     private createPropertyEditors;
+    private _onDragLeave;
+    private _onDragOver;
+    private _onDrop;
     openContextMenu(event: MouseEvent, property: IProperty): void;
     static openContextMenu(event: MouseEvent, designItems: IDesignItem[], property: IProperty): void;
     designItemsChanged(designItems: IDesignItem[]): void;

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

@@ -3,6 +3,7 @@ import { RefreshMode } from '../../services/propertiesService/IPropertiesService
 import { ValueType } from '../../services/propertiesService/ValueType.js';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 import { PropertyType } from '../../services/propertiesService/PropertyType.js';
+import { dragDropFormatNameBindingObject } from '../../../Constants.js';
 export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _div;
     _propertyMap = new Map();
@@ -90,6 +91,10 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
       font-size: 10px;
       text-decoration: underline;
     }
+    .createBinding {
+      outline: 2px dashed orange;
+      outline-offset: -2px;
+    }
     `;
     }
     constructor(serviceContainer) {
@@ -181,6 +186,9 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                         label.htmlFor = p.name;
                         label.textContent = p.name;
                         label.title = p.name;
+                        label.ondragleave = (e) => this._onDragLeave(e, p, label);
+                        label.ondragover = (e) => this._onDragOver(e, p, label);
+                        label.ondrop = (e) => this._onDrop(e, p, label);
                         this._div.appendChild(label);
                     }
                     else {
@@ -206,6 +214,38 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
             }
         }
     }
+    _onDragLeave(event, property, label) {
+        event.preventDefault();
+        label.classList.remove('createBinding');
+    }
+    _onDragOver(event, property, label) {
+        event.preventDefault();
+        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
+        if (hasTransferDataBindingObject) {
+            const ddService = this._serviceContainer.bindableObjectDragDropService;
+            if (ddService) {
+                const effect = ddService.dragOverOnProperty(event, property);
+                if ((effect ?? 'none') != 'none') {
+                    label.classList.add('createBinding');
+                    event.dataTransfer.dropEffect = effect;
+                }
+                else {
+                    label.classList.remove('createBinding');
+                }
+            }
+        }
+    }
+    _onDrop(event, property, label) {
+        event.preventDefault();
+        label.classList.remove('createBinding');
+        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
+        if (hasTransferDataBindingObject) {
+            const ddService = this._serviceContainer.bindableObjectDragDropService;
+            if (ddService) {
+                ddService.dropOnProperty(event, property);
+            }
+        }
+    }
     openContextMenu(event, property) {
         PropertyGridPropertyList.openContextMenu(event, this._designItems, property);
     }

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

@@ -15,7 +15,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     }
     div.root {
       display: grid;
-      grid-template-columns: 15px  15px auto 1fr;
+      grid-template-columns: 11px 11px auto 1fr;
       padding: 3px 6px;
       font-family: monospace; 
       align-items: center;
@@ -84,7 +84,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         };
         this._innerRect.oncontextmenu = (event) => {
             event.preventDefault();
-            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty);
+            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.innerHtmlProperty);
         };
         this._id.onkeydown = e => {
             if (e.key == 'Enter')

package/package.json

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