@node-projects/web-component-designer 0.0.132 → 0.0.133

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

@@ -12,6 +12,7 @@ export declare class DesignItem implements IDesignItem {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
+    clone(): Promise<IDesignItem>;
     replaceNode(newNode: Node): void;
     get nodeType(): NodeType;
     get hasAttributes(): boolean;

package/dist/elements/item/DesignItem.js

@@ -6,6 +6,7 @@ import { CssAttributeParser } from '../helper/CssAttributeParser.js';
 import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
 import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction';
 import { DeleteAction } from '../..';
+import { DomConverter } from '../widgets/designerView/DomConverter';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
@@ -15,6 +16,11 @@ export class DesignItem {
     serviceContainer;
     instanceServiceContainer;
     appliedDesignerExtensions = new Map();
+    async clone() {
+        const html = DomConverter.ConvertToString([this], null, false);
+        const parsed = await this.serviceContainer.htmlParserService.parse(html, this.serviceContainer, this.instanceServiceContainer);
+        return parsed[0];
+    }
     replaceNode(newNode) {
         DesignItem._designItemMap.delete(this.node);
         DesignItem._designItemMap.set(newNode, this);

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

@@ -8,6 +8,7 @@ import { ISize } from "../../interfaces/ISize.js";
 export interface IDesignItem {
     lastContainerSize: ISize;
     replaceNode(newNode: Node): any;
+    clone(): Promise<IDesignItem>;
     readonly nodeType: NodeType;
     readonly name: string;
     id: string;

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -231,18 +231,31 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                     data.dropEffect = data.originalEvent.ctrlKey ? 'copy' : 'move';
                     return true;
                 },
-                dragDrop: (node, data) => {
-                    const sourceDesignitems = data.otherNodeList.map(x => x.data.ref);
+                dragDrop: async (node, data) => {
+                    let sourceDesignitems = data.otherNodeList.map(x => x.data.ref);
+                    if (data.dropEffectSuggested == 'copy') {
+                        let newSourceDesignitems = [];
+                        for (let d of sourceDesignitems)
+                            newSourceDesignitems.push(await d.clone());
+                        sourceDesignitems = newSourceDesignitems;
+                    }
                     const targetDesignitem = node.data.ref;
-                    if (data.dropEffectSuggested == 'move') {
-                        if (data.hitMode == 'over') {
-                            switchContainer(sourceDesignitems, targetDesignitem);
-                        }
-                        else if (data.hitMode == 'before') {
-                        }
-                        else if (data.hitMode == 'after') {
+                    let grp = targetDesignitem.openGroup("drag/drop in treeview");
+                    if (data.hitMode == 'over') {
+                        switchContainer(sourceDesignitems, targetDesignitem);
+                    }
+                    else if (data.hitMode == 'after' || data.hitMode == 'before') {
+                        for (let d of sourceDesignitems) {
+                            if (d.parent != targetDesignitem.parent) {
+                                switchContainer([d], targetDesignitem.parent);
+                            }
+                            if (data.hitMode == 'before')
+                                targetDesignitem.insertAdjacentElement(d, 'beforebegin');
+                            else
+                                targetDesignitem.insertAdjacentElement(d, 'afterend');
                         }
                     }
+                    grp.commit();
                 },
             },
             multi: {

package/package.json

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