From 9d2967f6122027f984a200c6d0ce0777d48ce996 Mon Sep 17 00:00:00 2001
From: kangwei <bingbing.yb@alibaba-inc.com>
Date: Sat, 22 Feb 2020 16:01:46 +0800
Subject: [PATCH] fix drag copy

---
 .../src/builtins/drag-ghost/ghost.less        | 15 +++----
 .../src/builtins/drag-ghost/index.tsx         | 45 ++++++++++++-------
 .../src/builtins/simulator/host/host-view.tsx |  1 -
 packages/designer/src/designer/designer.less  |  1 -
 .../src/designer/document/node/node.ts        |  5 ++-
 .../designer/src/designer/helper/dragon.ts    |  2 +-
 6 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/packages/designer/src/builtins/drag-ghost/ghost.less b/packages/designer/src/builtins/drag-ghost/ghost.less
index c470c4ebc..30a24afdb 100644
--- a/packages/designer/src/builtins/drag-ghost/ghost.less
+++ b/packages/designer/src/builtins/drag-ghost/ghost.less
@@ -1,4 +1,4 @@
-.my-ghost-group {
+.lc-ghost-group {
   box-sizing: border-box;
   position: fixed;
   z-index: 99999;
@@ -9,8 +9,10 @@
   pointer-events: none;
   background-color: rgba(0, 0, 0, 0.4);
   opacity: 0.5;
-  .my-ghost {
-    .my-ghost-title {
+  box-shadow: 0 0 6px grey;
+  transform: translate(-10%, -50%);
+  .lc-ghost {
+    .lc-ghost-title {
       text-align: center;
       font-size: var(--font-size-text);
       text-overflow: ellipsis;
@@ -20,10 +22,3 @@
     }
   }
 }
-
-.dragging {
-  position: fixed;
-  z-index: 99999;
-  width: 100%;
-  box-shadow: 0 0 6px grey;
-}
diff --git a/packages/designer/src/builtins/drag-ghost/index.tsx b/packages/designer/src/builtins/drag-ghost/index.tsx
index a42793a55..dffa6973e 100644
--- a/packages/designer/src/builtins/drag-ghost/index.tsx
+++ b/packages/designer/src/builtins/drag-ghost/index.tsx
@@ -3,21 +3,25 @@ import { obx } from '@recore/obx';
 import { observer } from '@recore/core-obx';
 import Designer from '../../designer/designer';
 import './ghost.less';
+import { NodeSchema } from '../../designer/schema';
+import Node from '../../designer/document/node/node';
+import { isDragNodeObject, DragObject, isDragNodeDataObject } from '../../designer/helper/dragon';
 
 type offBinding = () => any;
 
 @observer
 export default class Ghost extends Component<{ designer: Designer }> {
   private dispose: offBinding[] = [];
-  @obx.ref private dragment: any = null;
+  @obx.ref private dragObject: DragObject | null = null;
   @obx.ref private x = 0;
   @obx.ref private y = 0;
   private dragon = this.props.designer.dragon;
 
-  componentWillMount() {
+  constructor(props: any) {
+    super(props);
     this.dispose = [
        this.dragon.onDragstart((e) => {
-        this.dragment = e.dragObject;
+        this.dragObject = e.dragObject;
         this.x = e.globalX;
         this.y = e.globalY;
       }),
@@ -26,7 +30,7 @@ export default class Ghost extends Component<{ designer: Designer }> {
         this.y = e.globalY;
       }),
       this.dragon.onDragend(() => {
-        this.dragment = null;
+        this.dragObject = null;
         this.x = 0;
         this.y = 0;
       }),
@@ -44,35 +48,42 @@ export default class Ghost extends Component<{ designer: Designer }> {
   }
 
   renderGhostGroup() {
-    const dragment = this.dragment;
-    if (Array.isArray(dragment)) {
-      return dragment.map((node: any, index: number) => {
+    const dragObject = this.dragObject;
+    if (isDragNodeObject(dragObject)) {
+      return dragObject.nodes.map((node) => {
         const ghost = (
-          <div className="my-ghost" key={`ghost-${index}`}>
-            <div className="my-ghost-title">{node.tagName}</div>
+          <div className="lc-ghost" key={node.id}>
+            <div className="lc-ghost-title">{node.title}</div>
           </div>
         );
         return ghost;
       });
-    } else {
-      return (
-        <div className="my-ghost">
-          <div className="my-ghost-title">{dragment.tagName}</div>
+    } else if (isDragNodeDataObject(dragObject)) {
+      return Array.isArray(dragObject.data) ? dragObject.data.map((item, index) => {
+        return (
+          <div className="lc-ghost" key={`ghost-${index}`}>
+            <div className="lc-ghost-title">{item.componentName}</div>
+          </div>
+        )
+      }) : (
+        <div className="lc-ghost">
+          <div className="lc-ghost-title">{dragObject.data.componentName}</div>
         </div>
-      );
+      )
     }
   }
 
   render() {
-    if (!this.dragment) {
+    if (!this.dragObject) {
       return null;
     }
 
     return (
       <div
-        className="my-ghost-group"
+        className="lc-ghost-group"
         style={{
-          transform: `translate(${this.x}px, ${this.y}px)`,
+          left: this.x,
+          top: this.y,
         }}
       >
         {this.renderGhostGroup()}
diff --git a/packages/designer/src/builtins/simulator/host/host-view.tsx b/packages/designer/src/builtins/simulator/host/host-view.tsx
index bdc3168c4..838195782 100644
--- a/packages/designer/src/builtins/simulator/host/host-view.tsx
+++ b/packages/designer/src/builtins/simulator/host/host-view.tsx
@@ -31,7 +31,6 @@ export class SimulatorHostView extends Component<SimulatorProps & {
     return false;
   }
   componentDidMount() {
-    console.info('mount simulator');
     if (this.props.onMount) {
       this.props.onMount(this.host);
     }
diff --git a/packages/designer/src/designer/designer.less b/packages/designer/src/designer/designer.less
index c999e9959..7f73d92b1 100644
--- a/packages/designer/src/designer/designer.less
+++ b/packages/designer/src/designer/designer.less
@@ -1,7 +1,6 @@
 @import 'variables.less';
 
 .lc-designer {
-
   --font-family: @font-family;
   --font-size-label: @fontSize-4;
   --font-size-text: @fontSize-5;
diff --git a/packages/designer/src/designer/document/node/node.ts b/packages/designer/src/designer/document/node/node.ts
index 5101ab34b..65f4f70fa 100644
--- a/packages/designer/src/designer/document/node/node.ts
+++ b/packages/designer/src/designer/document/node/node.ts
@@ -466,7 +466,7 @@ export function comparePosition(node1: Node, node2: Node): number {
 export function insertChild(container: NodeParent, thing: Node | NodeData, at?: number | null, copy?: boolean): Node {
   let node: Node;
   if (copy && isNode(thing)) {
-    thing = thing.schema;
+    thing = thing.exportSchema(false);
   }
   if (isNode(thing)) {
     node = thing;
@@ -490,7 +490,8 @@ export function insertChildren(
   const results: Node[] = [];
   // tslint:disable-next-line
   while ((node = nodes.pop())) {
-    results.push(insertChild(container, node, index, copy));
+    node = insertChild(container, node, index, copy);
+    results.push(node);
     index = node.index;
   }
   return results;
diff --git a/packages/designer/src/designer/helper/dragon.ts b/packages/designer/src/designer/helper/dragon.ts
index 1511fff4e..ee196ca2c 100644
--- a/packages/designer/src/designer/helper/dragon.ts
+++ b/packages/designer/src/designer/helper/dragon.ts
@@ -2,7 +2,7 @@ import { EventEmitter } from 'events';
 import { obx } from '@recore/obx';
 import Location from './location';
 import DocumentModel from '../document/document-model';
-import { NodeData, NodeSchema } from '../schema';
+import { NodeSchema } from '../schema';
 import { ISimulator, isSimulator, ComponentInstance } from '../simulator';
 import Node from '../document/node/node';
 import Designer from '../designer';