@node-projects/web-component-designer 0.0.66 → 0.0.70

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.d.ts

@@ -1,8 +1,8 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from '../../item/IBinding';
-import { IBindingService } from "./IBindingService";
-export declare class BaseCustomWebcomponentBindingsService implements IBindingService {
-    static type: string;
-    getBindings(designItem: IDesignItem): IBinding[];
-    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
-}
+import { IDesignItem } from "../../item/IDesignItem";
+import { IBinding } from '../../item/IBinding';
+import { IBindingService } from "./IBindingService";
+export declare class BaseCustomWebcomponentBindingsService implements IBindingService {
+    static type: string;
+    getBindings(designItem: IDesignItem): IBinding[];
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+}

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js

@@ -1,69 +1,69 @@
-import { BindingMode } from '../../item/BindingMode';
-import { BindingTarget } from "../../item/BindingTarget.js";
-export class BaseCustomWebcomponentBindingsService {
-    static type = 'base-custom-webcomponent-binding';
-    getBindings(designItem) {
-        let bindings = null;
-        for (let a of designItem.attributes) {
-            const name = a[0];
-            const value = a[1];
-            if ((value.startsWith('[[') || value.startsWith('{{')) && (value.endsWith('}}') || value.endsWith(']]'))) {
-                if (!bindings)
-                    bindings = [];
-                let bnd = { rawName: name, rawValue: value };
-                if (a[0].startsWith('css:')) {
-                    bnd.targetName = name.substring(4);
-                    bnd.target = BindingTarget.css;
-                    bnd.expression = value.substring(2, value.length - 4);
-                }
-                else if (a[0].startsWith('class:')) {
-                    bnd.targetName = name.substring(4);
-                    bnd.target = BindingTarget.class;
-                    bnd.expression = value.substring(2, value.length - 4);
-                }
-                else if (a[0].startsWith('$')) {
-                    bnd.targetName = name.substring(1);
-                    bnd.target = BindingTarget.attribute;
-                    bnd.expression = value.substring(2, value.length - 4);
-                }
-                else if (a[0].startsWith('@')) {
-                    bnd.targetName = name.substring(1);
-                    bnd.target = BindingTarget.event;
-                    bnd.expression = value.substring(2, value.length - 4);
-                }
-                else {
-                    bnd.targetName = name;
-                    bnd.target = BindingTarget.property;
-                    bnd.expression = value.substring(2, value.length - 4);
-                }
-                bnd.type = BaseCustomWebcomponentBindingsService.type;
-                bnd.targetName = bnd.targetName;
-                bindings.push(bnd);
-            }
-        }
-        return bindings;
-    }
-    setBinding(designItem, binding) {
-        if (binding.type !== BaseCustomWebcomponentBindingsService.type)
-            return false;
-        let nm = '';
-        switch (binding.target) {
-            case BindingTarget.css:
-                nm += 'css:';
-                break;
-            case BindingTarget.class:
-                nm += 'class';
-                break;
-            case BindingTarget.attribute:
-                nm += '$';
-                break;
-            case BindingTarget.event:
-                nm += '@';
-                break;
-        }
-        nm += binding.targetName;
-        let value = (binding.mode == BindingMode.oneWay ? '[[' : '{{') + binding.expression + (binding.mode == BindingMode.oneWay ? ']]' : '}}');
-        designItem.setAttribute(nm, value);
-        return true;
-    }
-}
+import { BindingMode } from '../../item/BindingMode';
+import { BindingTarget } from "../../item/BindingTarget.js";
+export class BaseCustomWebcomponentBindingsService {
+    static type = 'base-custom-webcomponent-binding';
+    getBindings(designItem) {
+        let bindings = null;
+        for (let a of designItem.attributes) {
+            const name = a[0];
+            const value = a[1];
+            if ((value.startsWith('[[') || value.startsWith('{{')) && (value.endsWith('}}') || value.endsWith(']]'))) {
+                if (!bindings)
+                    bindings = [];
+                let bnd = { rawName: name, rawValue: value };
+                if (a[0].startsWith('css:')) {
+                    bnd.targetName = name.substring(4);
+                    bnd.target = BindingTarget.css;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else if (a[0].startsWith('class:')) {
+                    bnd.targetName = name.substring(4);
+                    bnd.target = BindingTarget.class;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else if (a[0].startsWith('$')) {
+                    bnd.targetName = name.substring(1);
+                    bnd.target = BindingTarget.attribute;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else if (a[0].startsWith('@')) {
+                    bnd.targetName = name.substring(1);
+                    bnd.target = BindingTarget.event;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else {
+                    bnd.targetName = name;
+                    bnd.target = BindingTarget.property;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                bnd.type = BaseCustomWebcomponentBindingsService.type;
+                bnd.targetName = bnd.targetName;
+                bindings.push(bnd);
+            }
+        }
+        return bindings;
+    }
+    setBinding(designItem, binding) {
+        if (binding.type !== BaseCustomWebcomponentBindingsService.type)
+            return false;
+        let nm = '';
+        switch (binding.target) {
+            case BindingTarget.css:
+                nm += 'css:';
+                break;
+            case BindingTarget.class:
+                nm += 'class';
+                break;
+            case BindingTarget.attribute:
+                nm += '$';
+                break;
+            case BindingTarget.event:
+                nm += '@';
+                break;
+        }
+        nm += binding.targetName;
+        let value = (binding.mode == BindingMode.oneWay ? '[[' : '{{') + binding.expression + (binding.mode == BindingMode.oneWay ? ']]' : '}}');
+        designItem.setAttribute(nm, value);
+        return true;
+    }
+}

package/dist/elements/services/bindingsService/IBindingService.d.ts

@@ -1,11 +1,11 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from "../../item/IBinding";
-/**
- * Can be used to parse bindings wich are done via special HTML Attributes or special Elements
- * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the
- * htmlParserService
- */
-export interface IBindingService {
-    getBindings(designItem: IDesignItem): IBinding[];
-    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
-}
+import { IDesignItem } from "../../item/IDesignItem";
+import { IBinding } from "../../item/IBinding";
+/**
+ * Can be used to parse bindings wich are done via special HTML Attributes or special Elements
+ * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the
+ * htmlParserService
+ */
+export interface IBindingService {
+    getBindings(designItem: IDesignItem): IBinding[];
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+}

package/dist/elements/services/bindingsService/IBindingService.js

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

package/dist/elements/services/bindingsService/SpecialTagsBindingService.d.ts

@@ -1,14 +1,14 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from "../../item/IBinding";
-import { IBindingService } from "./IBindingService";
-export declare class SpecialTagsBindingService implements IBindingService {
-    static type: string;
-    _bindingTagName: string;
-    _elementIdAttribute: string;
-    _propertyNameAttribute: string;
-    _isStyleNameAttribute: string;
-    constructor();
-    getBindings(designItem: IDesignItem): IBinding[];
-    private _parseBindingElement;
-    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
-}
+import { IDesignItem } from "../../item/IDesignItem";
+import { IBinding } from "../../item/IBinding";
+import { IBindingService } from "./IBindingService";
+export declare class SpecialTagsBindingService implements IBindingService {
+    static type: string;
+    _bindingTagName: string;
+    _elementIdAttribute: string;
+    _propertyNameAttribute: string;
+    _isStyleNameAttribute: string;
+    constructor();
+    getBindings(designItem: IDesignItem): IBinding[];
+    private _parseBindingElement;
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+}

package/dist/elements/services/bindingsService/SpecialTagsBindingService.js

@@ -1,40 +1,40 @@
-import { BindingTarget } from "../../item/BindingTarget.js";
-import { BindingMode } from "../../item/BindingMode.js";
-/* Service wich read binings from special HTMl elements -> like tag-binding */
-export class SpecialTagsBindingService {
-    static type = 'visu-tagbinding-binding';
-    _bindingTagName = "visu-tagbinding";
-    _elementIdAttribute = "elemnt-id";
-    _propertyNameAttribute = "property";
-    _isStyleNameAttribute = "is-style";
-    constructor() {
-    }
-    getBindings(designItem) {
-        const bindings = [];
-        const directBindings = designItem.element.querySelectorAll(':scope > ' + this._bindingTagName);
-        for (let b of directBindings) {
-            bindings.push(this._parseBindingElement(b));
-        }
-        if (designItem.id) {
-            const nameBindings = designItem.instanceServiceContainer.contentService.rootDesignItem.element.querySelectorAll(this._bindingTagName + "[" + this._elementIdAttribute + "='" + designItem.id + "]");
-            for (let b of nameBindings) {
-                const bnd = this._parseBindingElement(b);
-                bnd.targetId = designItem.id;
-                bindings.push(bnd);
-            }
-        }
-        return null;
-    }
-    _parseBindingElement(b) {
-        let bnd = { targetName: b.getAttribute(this._propertyNameAttribute) };
-        bnd.target = b.hasAttribute(this._isStyleNameAttribute) ? BindingTarget.css : BindingTarget.property;
-        bnd.invert = b.hasAttribute('negative-logic');
-        bnd.rawValue = b.outerHTML;
-        bnd.type = SpecialTagsBindingService.type;
-        bnd.mode = b.hasAttribute('two-way') ? BindingMode.twoWay : BindingMode.oneWay;
-        return bnd;
-    }
-    setBinding(designItem, binding) {
-        return true;
-    }
-}
+import { BindingTarget } from "../../item/BindingTarget.js";
+import { BindingMode } from "../../item/BindingMode.js";
+/* Service wich read binings from special HTMl elements -> like tag-binding */
+export class SpecialTagsBindingService {
+    static type = 'visu-tagbinding-binding';
+    _bindingTagName = "visu-tagbinding";
+    _elementIdAttribute = "elemnt-id";
+    _propertyNameAttribute = "property";
+    _isStyleNameAttribute = "is-style";
+    constructor() {
+    }
+    getBindings(designItem) {
+        const bindings = [];
+        const directBindings = designItem.element.querySelectorAll(':scope > ' + this._bindingTagName);
+        for (let b of directBindings) {
+            bindings.push(this._parseBindingElement(b));
+        }
+        if (designItem.id) {
+            const nameBindings = designItem.instanceServiceContainer.contentService.rootDesignItem.element.querySelectorAll(this._bindingTagName + "[" + this._elementIdAttribute + "='" + designItem.id + "]");
+            for (let b of nameBindings) {
+                const bnd = this._parseBindingElement(b);
+                bnd.targetId = designItem.id;
+                bindings.push(bnd);
+            }
+        }
+        return null;
+    }
+    _parseBindingElement(b) {
+        let bnd = { targetName: b.getAttribute(this._propertyNameAttribute) };
+        bnd.target = b.hasAttribute(this._isStyleNameAttribute) ? BindingTarget.css : BindingTarget.property;
+        bnd.invert = b.hasAttribute('negative-logic');
+        bnd.rawValue = b.outerHTML;
+        bnd.type = SpecialTagsBindingService.type;
+        bnd.mode = b.hasAttribute('two-way') ? BindingMode.twoWay : BindingMode.oneWay;
+        return bnd;
+    }
+    setBinding(designItem, binding) {
+        return true;
+    }
+}

package/dist/elements/services/bindingsService/VueBindingsService.js

@@ -1,7 +1,7 @@
-"use strict";
-//read vue bindings:
-//v-bind:class
-//v-bind:style
-//v-if
-//v-else
-//v-show
+"use strict";
+//read vue bindings:
+//v-bind:class
+//v-bind:style
+//v-if
+//v-else
+//v-show

package/dist/elements/services/contentService/ContentService.d.ts

@@ -1,9 +1,9 @@
-import { IContentService } from './IContentService';
-import { IContentChanged } from './IContentChanged';
-import { IDesignItem } from '../../item/IDesignItem';
-import { TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare class ContentService implements IContentService {
-    constructor(rootElement: IDesignItem);
-    readonly rootDesignItem: IDesignItem;
-    readonly onContentChanged: TypedEvent<IContentChanged>;
-}
+import { IContentService } from './IContentService';
+import { IContentChanged } from './IContentChanged';
+import { IDesignItem } from '../../item/IDesignItem';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare class ContentService implements IContentService {
+    constructor(rootElement: IDesignItem);
+    readonly rootDesignItem: IDesignItem;
+    readonly onContentChanged: TypedEvent<IContentChanged>;
+}

package/dist/elements/services/contentService/ContentService.js

@@ -1,8 +1,8 @@
-import { TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class ContentService {
-    constructor(rootElement) {
-        this.rootDesignItem = rootElement;
-    }
-    rootDesignItem;
-    onContentChanged = new TypedEvent();
-}
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class ContentService {
+    constructor(rootElement) {
+        this.rootDesignItem = rootElement;
+    }
+    rootDesignItem;
+    onContentChanged = new TypedEvent();
+}

package/dist/elements/services/contentService/IContentChanged.d.ts

@@ -1,5 +1,5 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-export interface IContentChanged {
-    changeType: "added" | "removed" | "moved" | 'parsed';
-    designItems?: IDesignItem[];
-}
+import { IDesignItem } from "../../item/IDesignItem.js";
+export interface IContentChanged {
+    changeType: "added" | "removed" | "moved" | 'parsed';
+    designItems?: IDesignItem[];
+}

package/dist/elements/services/contentService/IContentChanged.js

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

package/dist/elements/services/contentService/IContentService.d.ts

@@ -1,7 +1,7 @@
-import { IContentChanged } from './IContentChanged';
-import { IDesignItem } from '../../item/IDesignItem';
-import { TypedEvent } from '@node-projects/base-custom-webcomponent';
-export interface IContentService {
-    readonly onContentChanged: TypedEvent<IContentChanged>;
-    readonly rootDesignItem: IDesignItem;
-}
+import { IContentChanged } from './IContentChanged';
+import { IDesignItem } from '../../item/IDesignItem';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export interface IContentService {
+    readonly onContentChanged: TypedEvent<IContentChanged>;
+    readonly rootDesignItem: IDesignItem;
+}

package/dist/elements/services/contentService/IContentService.js

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

package/dist/elements/services/copyPasteService/CopyPasteService.d.ts

@@ -1,8 +1,8 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-import { ICopyPasteService } from "./ICopyPasteService.js";
-import { ServiceContainer } from '../ServiceContainer';
-import { InstanceServiceContainer } from '../InstanceServiceContainer';
-export declare class CopyPasteService implements ICopyPasteService {
-    copyItems(designItems: IDesignItem[]): Promise<void>;
-    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
-}
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { ICopyPasteService } from "./ICopyPasteService.js";
+import { ServiceContainer } from '../ServiceContainer';
+import { InstanceServiceContainer } from '../InstanceServiceContainer';
+export declare class CopyPasteService implements ICopyPasteService {
+    copyItems(designItems: IDesignItem[]): Promise<void>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+}

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

@@ -1,12 +1,12 @@
-import { DomConverter } from "../../widgets/designerView/DomConverter.js";
-export class CopyPasteService {
-    async copyItems(designItems) {
-        const copyText = DomConverter.ConvertToString(designItems, null);
-        await navigator.clipboard.writeText(copyText);
-    }
-    async getPasteItems(serviceContainer, instanceServiceContainer) {
-        const text = await navigator.clipboard.readText();
-        const parserService = serviceContainer.htmlParserService;
-        return await parserService.parse(text, serviceContainer, instanceServiceContainer);
-    }
-}
+import { DomConverter } from "../../widgets/designerView/DomConverter.js";
+export class CopyPasteService {
+    async copyItems(designItems) {
+        const copyText = DomConverter.ConvertToString(designItems, null);
+        await navigator.clipboard.writeText(copyText);
+    }
+    async getPasteItems(serviceContainer, instanceServiceContainer) {
+        const text = await navigator.clipboard.readText();
+        const parserService = serviceContainer.htmlParserService;
+        return await parserService.parse(text, serviceContainer, instanceServiceContainer);
+    }
+}

package/dist/elements/services/copyPasteService/ICopyPasteService.d.ts

@@ -1,7 +1,7 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
-import { ServiceContainer } from "../ServiceContainer.js";
-export interface ICopyPasteService {
-    copyItems(designItems: IDesignItem[]): Promise<void>;
-    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
-}
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+export interface ICopyPasteService {
+    copyItems(designItems: IDesignItem[]): Promise<void>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+}

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

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

package/dist/elements/services/demoProviderService/DemoProviderService.d.ts

@@ -1,6 +1,6 @@
-import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
-import { ServiceContainer } from "../ServiceContainer.js";
-import { IDemoProviderService } from "./IDemoProviderService.js";
-export declare class DemoProviderService implements IDemoProviderService {
-    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
-}
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDemoProviderService } from "./IDemoProviderService.js";
+export declare class DemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/DemoProviderService.js

@@ -1,28 +1,28 @@
-import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
-export class DemoProviderService {
-    provideDemo(container, serviceContainer, instanceServiceContainer, code) {
-        return new Promise(resolve => {
-            const iframe = document.createElement('iframe');
-            iframe.style.width = '100%';
-            iframe.style.height = '100%';
-            iframe.style.border = 'none';
-            iframe.style.display = 'none';
-            DomHelper.removeAllChildnodes(container);
-            container.appendChild(iframe);
-            iframe.onload = () => {
-                iframe.style.display = 'block';
-                resolve();
-            };
-            const doc = iframe.contentWindow.document;
-            doc.open();
-            doc.write('<script type="module">');
-            for (let i of instanceServiceContainer.designContext.imports) {
-                doc.write("import '" + i + "';");
-            }
-            doc.write("document.body.style.display='';");
-            doc.write('</script>');
-            doc.write('<body style="display:none">' + code + '</body>');
-            doc.close();
-        });
-    }
-}
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
+export class DemoProviderService {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code) {
+        return new Promise(resolve => {
+            const iframe = document.createElement('iframe');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 'none';
+            iframe.style.display = 'none';
+            DomHelper.removeAllChildnodes(container);
+            container.appendChild(iframe);
+            iframe.onload = () => {
+                iframe.style.display = 'block';
+                resolve();
+            };
+            const doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write('<script type="module">');
+            for (let i of instanceServiceContainer.designContext.imports) {
+                doc.write("import '" + i + "';");
+            }
+            doc.write("document.body.style.display='';");
+            doc.write('</script>');
+            doc.write('<body style="display:none">' + code + '</body>');
+            doc.close();
+        });
+    }
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.d.ts

@@ -1,5 +1,5 @@
-import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
-import { ServiceContainer } from "../ServiceContainer.js";
-export interface IDemoProviderService {
-    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): any;
-}
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+export interface IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): any;
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.js

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

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

@@ -1,6 +1,6 @@
-import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
-import { IDragDropService } from "./IDragDropService.js";
-export declare class DragDropService implements IDragDropService {
-    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
-    drop(designerView: IDesignerCanvas, event: DragEvent): void;
-}
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IDragDropService } from "./IDragDropService.js";
+export declare class DragDropService implements IDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerView: IDesignerCanvas, event: DragEvent): void;
+}

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

@@ -1,28 +1,28 @@
-import { DesignItem } from '../../item/DesignItem';
-import { InsertAction } from "../undoService/transactionItems/InsertAction.js";
-export class DragDropService {
-    dragOver(event) {
-        if (event.dataTransfer.items[0].type.startsWith('image/'))
-            return 'copy';
-        return 'none';
-    }
-    drop(designerView, 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, designerView.serviceContainer, designerView.instanceServiceContainer);
-                let grp = di.openGroup("Insert");
-                di.setStyle('position', 'absolute');
-                const targetRect = event.target.getBoundingClientRect();
-                di.setStyle('top', event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px');
-                di.setStyle('left', event.offsetX + targetRect.left - designerView.containerBoundingRect.x + 'px');
-                designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, di));
-                grp.commit();
-                requestAnimationFrame(() => designerView.instanceServiceContainer.selectionService.setSelectedElements([di]));
-            };
-            reader.readAsDataURL(event.dataTransfer.files[0]);
-        }
-    }
-}
+import { DesignItem } from '../../item/DesignItem';
+import { InsertAction } from "../undoService/transactionItems/InsertAction.js";
+export class DragDropService {
+    dragOver(event) {
+        if (event.dataTransfer.items[0].type.startsWith('image/'))
+            return 'copy';
+        return 'none';
+    }
+    drop(designerView, 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, designerView.serviceContainer, designerView.instanceServiceContainer);
+                let grp = di.openGroup("Insert");
+                di.setStyle('position', 'absolute');
+                const targetRect = event.target.getBoundingClientRect();
+                di.setStyle('top', event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px');
+                di.setStyle('left', event.offsetX + targetRect.left - designerView.containerBoundingRect.x + 'px');
+                designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, di));
+                grp.commit();
+                requestAnimationFrame(() => designerView.instanceServiceContainer.selectionService.setSelectedElements([di]));
+            };
+            reader.readAsDataURL(event.dataTransfer.files[0]);
+        }
+    }
+}

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

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

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

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