@node-projects/web-component-designer 0.0.274 → 0.0.276

package/dist/Constants.d.ts

@@ -1,3 +1,4 @@
 export declare const dragDropFormatNameElementDefinition = "text/json/elementdefintion";
 export declare const dragDropFormatNameBindingObject = "text/json/bindingobject";
+export declare const dragDropFormatNamePropertyGrid = "text/json/propertydrop";
 export declare var assetsPath: string;

package/dist/Constants.js

@@ -1,5 +1,6 @@
 export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';
 export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
+export const dragDropFormatNamePropertyGrid = 'text/json/propertydrop';
 //export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
 let imporUrl = new URL((import.meta.url));
 export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';

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

@@ -42,6 +42,7 @@ import { IDesignItemDocumentPositionService } from './designItemDocumentPosition
 import { IDragDropService } from './dragDropService/IDragDropService.js';
 import { IDesignItemService } from './designItemService/IDesignItemService.js';
 import { IEventsService } from './eventsService/IEventsService.js';
+import { IPropertyGridDragDropService } from './dragDropService/IPropertyGridDragDropService.js';
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -65,6 +66,7 @@ interface ServiceNameMap {
     "dragDropService": IDragDropService;
     "designItemService": IDesignItemService;
     "eventsService": IEventsService;
+    "propertyGridDragDropService": IPropertyGridDragDropService;
     "undoService": (designerCanvas: IDesignerCanvas) => IUndoService;
     "selectionService": (designerCanvas: IDesignerCanvas) => ISelectionService;
     "contentService": (designerCanvas: IDesignerCanvas) => IContentService;
@@ -91,6 +93,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get bindingService(): IBindingService;
     get bindableObjectsServices(): IBindableObjectsService[];
     get bindableObjectDragDropService(): IBindableObjectDragDropService;
+    get propertyGridDragDropService(): IPropertyGridDragDropService;
     get dragDropService(): IDragDropService;
     get elementInteractionServices(): IElementInteractionService[];
     get propertiesServices(): IPropertiesService[];

package/dist/elements/services/ServiceContainer.js

@@ -34,6 +34,9 @@ export class ServiceContainer extends BaseServiceContainer {
     get bindableObjectDragDropService() {
         return this.getLastService('bindableObjectDragDropService');
     }
+    get propertyGridDragDropService() {
+        return this.getLastService('propertyGridDragDropService');
+    }
     get dragDropService() {
         return this.getLastService('dragDropService');
     }

package/dist/elements/services/dragDropService/IExternalDragDropService copy.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+export interface IExternalDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent): any;
+}

package/dist/elements/services/dragDropService/IExternalDragDropService copy.js

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

package/dist/elements/services/dragDropService/IPropertyGridDragDropService.d.ts

@@ -0,0 +1,6 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IProperty } from "../propertiesService/IProperty.js";
+export interface IPropertyGridDragDropService {
+    dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move';
+    dropOnProperty?(event: DragEvent, property: IProperty, dropObject: any, designItems: IDesignItem[]): void;
+}

package/dist/elements/services/dragDropService/IPropertyGridDragDropService.js

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

package/dist/elements/services/propertiesService/propertyEditors/ColorPropertyEditor.js

@@ -13,7 +13,7 @@ export class ColorPropertyEditor extends BasePropertyEditor {
     }
     refreshValue(valueType, value) {
         if (!value)
-            this.element.value = null;
+            this.element.value = '#000000';
         else {
             let w3Col = w3color.toColorObject(value);
             this.element.value = w3Col.toHexString();

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

@@ -3,7 +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';
+import { dragDropFormatNameBindingObject, dragDropFormatNamePropertyGrid } from '../../../Constants.js';
 export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _div;
     _propertyMap = new Map();
@@ -91,7 +91,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
       font-size: 10px;
       text-decoration: underline;
     }
-    .createBinding {
+    .dragOverProperty {
       outline: 2px dashed orange;
       outline-offset: -2px;
     }
@@ -216,7 +216,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     }
     _onDragLeave(event, property, label) {
         event.preventDefault();
-        label.classList.remove('createBinding');
+        label.classList.remove('dragOverProperty');
     }
     _onDragOver(event, property, label) {
         event.preventDefault();
@@ -226,18 +226,32 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
             if (ddService) {
                 const effect = ddService.dragOverOnProperty(event, property, this._designItems);
                 if ((effect ?? 'none') != 'none') {
-                    label.classList.add('createBinding');
+                    label.classList.add('dragOverProperty');
                     event.dataTransfer.dropEffect = effect;
                 }
                 else {
-                    label.classList.remove('createBinding');
+                    label.classList.remove('dragOverProperty');
+                }
+            }
+        }
+        const hasPropertyGrid = event.dataTransfer.types.indexOf(dragDropFormatNamePropertyGrid) >= 0;
+        if (hasPropertyGrid) {
+            const ddService = this._serviceContainer.propertyGridDragDropService;
+            if (ddService) {
+                const effect = ddService.dragOverOnProperty(event, property, this._designItems);
+                if ((effect ?? 'none') != 'none') {
+                    label.classList.add('dragOverProperty');
+                    event.dataTransfer.dropEffect = effect;
+                }
+                else {
+                    label.classList.remove('dragOverProperty');
                 }
             }
         }
     }
     _onDrop(event, property, label) {
         event.preventDefault();
-        label.classList.remove('createBinding');
+        label.classList.remove('dragOverProperty');
         const transferDataBindingObject = event.dataTransfer.getData(dragDropFormatNameBindingObject);
         if (transferDataBindingObject) {
             const bo = JSON.parse(transferDataBindingObject);
@@ -246,6 +260,14 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                 ddService.dropOnProperty(event, property, bo, this._designItems);
             }
         }
+        const transferDataPropertyGrid = event.dataTransfer.getData(dragDropFormatNamePropertyGrid);
+        if (transferDataPropertyGrid) {
+            const dropObj = JSON.parse(transferDataPropertyGrid);
+            const ddService = this._serviceContainer.propertyGridDragDropService;
+            if (ddService) {
+                ddService.dropOnProperty(event, property, dropObj, this._designItems);
+            }
+        }
     }
     openContextMenu(event, property) {
         PropertyGridPropertyList.openContextMenu(event, this._designItems, property);

package/dist/index.d.ts

@@ -50,6 +50,7 @@ export * from "./elements/services/designItemService/DesignItemService.js";
 export type { IDesignItemService } from "./elements/services/designItemService/IDesignItemService.js";
 export * from "./elements/services/dragDropService/ExternalDragDropService.js";
 export type { IExternalDragDropService } from "./elements/services/dragDropService/IExternalDragDropService.js";
+export type { IPropertyGridDragDropService } from "./elements/services/dragDropService/IPropertyGridDragDropService.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";

package/package.json

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