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

package/dist/elements/item/DesignItem.d.ts

@@ -87,4 +87,5 @@ export declare class DesignItem implements IDesignItem {
     _removeChildInternal(designItem: IDesignItem): void;
     _refreshIfStyleSheet(): void;
     getPlacementService(style?: CSSStyleDeclaration): IPlacementService;
+    static createDesignItemFromImageBlob(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, data: Blob): Promise<IDesignItem>;
 }

package/dist/elements/item/DesignItem.js

@@ -482,4 +482,16 @@ export class DesignItem {
         style ??= getComputedStyle(this.element);
         return this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this, style));
     }
+    static createDesignItemFromImageBlob(serviceContainer, instanceServiceContainer, data) {
+        return new Promise(resolve => {
+            let reader = new FileReader();
+            reader.onloadend = () => {
+                const img = document.createElement('img');
+                img.src = reader.result;
+                const di = DesignItem.createDesignItemFromInstance(img, serviceContainer, instanceServiceContainer);
+                return resolve(di);
+            };
+            reader.readAsDataURL(data);
+        });
+    }
 }

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

@@ -1,11 +1,12 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
 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;
+    dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): void;
+    dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): void;
     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;
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindableObject: IBindableObject<any>, element: Element): void;
+    dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move';
+    dropOnProperty?(event: DragEvent, property: IProperty, bindableObject: IBindableObject<any>, designItems: IDesignItem[]): void;
 }

package/dist/elements/services/copyPasteService/CopyPasteAsJsonService.js

@@ -1,5 +1,6 @@
 import { DomConverter } from "../../widgets/designerView/DomConverter.js";
 import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js";
+import { DesignItem } from "../../item/DesignItem.js";
 export class CopyPasteAsJsonService {
     async copyItems(designItems) {
         const copyText = DomConverter.ConvertToString(designItems, false);
@@ -26,6 +27,15 @@ export class CopyPasteAsJsonService {
                 data = await (await items[0].getType('application/json'))?.text();
             }
             catch { }
+            try {
+                let imageFmt = items[0].types.find(x => x.startsWith("image/"));
+                if (imageFmt) {
+                    let imgData = await items[0].getType(imageFmt);
+                    let di = await DesignItem.createDesignItemFromImageBlob(serviceContainer, instanceServiceContainer, imgData);
+                    return [[di]];
+                }
+            }
+            catch { }
         }
         else {
             data = await getTextFromClipboard();

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

@@ -2,5 +2,5 @@ import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
 import { IExternalDragDropService } from "./IExternalDragDropService.js";
 export declare class ExternalDragDropService implements IExternalDragDropService {
     dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
-    drop(designerCanvas: IDesignerCanvas, event: DragEvent): void;
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent): Promise<void>;
 }

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

@@ -6,23 +6,17 @@ export class ExternalDragDropService {
             return 'copy';
         return 'none';
     }
-    drop(designerCanvas, event) {
+    async drop(designerCanvas, event) {
         if (event.dataTransfer.files[0].type.startsWith('image/')) {
-            let reader = new FileReader();
-            reader.onloadend = () => {
-                const img = document.createElement('img');
-                img.src = reader.result;
-                const di = DesignItem.createDesignItemFromInstance(img, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                let grp = di.openGroup("Insert of <img>");
-                di.setStyle('position', 'absolute');
-                const targetRect = event.target.getBoundingClientRect();
-                di.setStyle('top', event.offsetY + targetRect.top - designerCanvas.containerBoundingRect.y + 'px');
-                di.setStyle('left', event.offsetX + targetRect.left - designerCanvas.containerBoundingRect.x + 'px');
-                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                grp.commit();
-                requestAnimationFrame(() => designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]));
-            };
-            reader.readAsDataURL(event.dataTransfer.files[0]);
+            let di = await DesignItem.createDesignItemFromImageBlob(designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer, event.dataTransfer.files[0]);
+            let grp = di.openGroup("Insert of <img>");
+            di.setStyle('position', 'absolute');
+            const targetRect = event.target.getBoundingClientRect();
+            di.setStyle('top', event.offsetY + targetRect.top - designerCanvas.containerBoundingRect.y + 'px');
+            di.setStyle('left', event.offsetX + targetRect.left - designerCanvas.containerBoundingRect.x + 'px');
+            designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+            grp.commit();
+            requestAnimationFrame(() => designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]));
         }
     }
 }

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

@@ -7,6 +7,7 @@ import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor.js';
 import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor.js';
 import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor.js';
 import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
+import { FontPropertyEditor } from './propertyEditors/FontPropertyEditor.js';
 export class DefaultEditorTypesService {
     getEditorForProperty(property) {
         if (property.createEditor)
@@ -20,6 +21,10 @@ export class DefaultEditorTypesService {
                 {
                     return new ColorPropertyEditor(property);
                 }
+            case "font":
+                {
+                    return new FontPropertyEditor(property);
+                }
             case "date":
                 {
                     return new DatePropertyEditor(property);

package/dist/elements/services/propertiesService/propertyEditors/FontPropertyEditor.d.ts

@@ -0,0 +1,9 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class FontPropertyEditor extends BasePropertyEditor<HTMLSelectElement> {
+    static fontList: string[];
+    constructor(property: IProperty);
+    parseFontList(): void;
+    refreshValue(valueType: ValueType, value: any): void;
+}

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

@@ -0,0 +1,37 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class FontPropertyEditor extends BasePropertyEditor {
+    static fontList;
+    constructor(property) {
+        super(property);
+        let element = document.createElement("select");
+        this.element = element;
+        if (FontPropertyEditor.fontList) {
+            this.parseFontList();
+            //@ts-ignore
+        }
+        else if (window.queryLocalFonts) {
+            //@ts-ignore
+            window.queryLocalFonts().then(x => {
+                //@ts-ignore
+                FontPropertyEditor.fontList = [...new Set(x.map(y => y.family))];
+                this.parseFontList();
+            });
+        }
+        else {
+            FontPropertyEditor.fontList = ["Verdana", "Arial", "Tahoma", "Trebuchet MS", "Times New Roman", "Georgia", "Garamond", "Courier New", "Brush Script MT"];
+            this.parseFontList();
+        }
+    }
+    parseFontList() {
+        for (let v of FontPropertyEditor.fontList) {
+            let option = document.createElement("option");
+            option.value = v;
+            option.text = v;
+            this.element.appendChild(option);
+        }
+        this.element.onchange = (e) => this._valueChanged(this.element.value);
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/SelectPropertyEditor copy.d.ts

@@ -0,0 +1,7 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class SelectPropertyEditor extends BasePropertyEditor<HTMLSelectElement> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/SelectPropertyEditor copy.js

@@ -0,0 +1,28 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class SelectPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        let element = document.createElement("select");
+        if (property.type == 'enum') {
+            for (let v of property.enumValues) {
+                let option = document.createElement("option");
+                option.value = v[1];
+                option.text = v[0];
+                element.appendChild(option);
+            }
+        }
+        else {
+            for (let v of property.values) {
+                let option = document.createElement("option");
+                option.value = v;
+                option.text = v;
+                element.appendChild(option);
+            }
+        }
+        element.onchange = (e) => this._valueChanged(element.value);
+        this.element = element;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/services/CssProperties.json

@@ -281,7 +281,9 @@
     "floodOpacity": {},
     "font": {},
     "fontDisplay": {},
-    "fontFamily": {},
+    "fontFamily": {
+        "type": "font"
+    },
     "fontFeatureSettings": {},
     "fontKerning": {},
     "fontOpticalSizing": {},

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

@@ -32,6 +32,7 @@ export class CssPropertiesService extends CommonPropertiesService {
         "box-shadow",
         "opacity",
         "position",
+        "font-family",
         "font-size",
         "font-weight",
         "inset",

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -780,8 +780,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 const ddService = this.serviceContainer.bindableObjectDragDropService;
                 if (ddService) {
                     const el = this.getElementAtPoint({ x: event.x, y: event.y });
-                    const effect = ddService.drop(this, event, bo, el);
-                    event.dataTransfer.dropEffect = effect;
+                    ddService.drop(this, event, bo, el);
                 }
             }
             else {

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

@@ -224,7 +224,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         if (hasTransferDataBindingObject) {
             const ddService = this._serviceContainer.bindableObjectDragDropService;
             if (ddService) {
-                const effect = ddService.dragOverOnProperty(event, property);
+                const effect = ddService.dragOverOnProperty(event, property, this._designItems);
                 if ((effect ?? 'none') != 'none') {
                     label.classList.add('createBinding');
                     event.dataTransfer.dropEffect = effect;
@@ -238,11 +238,12 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _onDrop(event, property, label) {
         event.preventDefault();
         label.classList.remove('createBinding');
-        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
-        if (hasTransferDataBindingObject) {
+        const transferDataBindingObject = event.dataTransfer.getData(dragDropFormatNameBindingObject);
+        if (transferDataBindingObject) {
+            const bo = JSON.parse(transferDataBindingObject);
             const ddService = this._serviceContainer.bindableObjectDragDropService;
             if (ddService) {
-                ddService.dropOnProperty(event, property);
+                ddService.dropOnProperty(event, property, bo, this._designItems);
             }
         }
     }

package/package.json

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