drag onto canvas

2 files changed, 46 insertions, 18 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e1ff4fda3..19689f972 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1997,10 +1997,10 @@ ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
         const loading = Docs.Create.LoadingDocument(file, options);
         loading.presentation_openInLightbox = true;
         DocUtils.uploadFileToDoc(file, {}, loading);
-       // if (view.ComponentView?.addDocument) view.ComponentView?.addDocument(loading);
 
         if (view.ComponentView?.addDocument) {
-            SchemaCSVPopUp.Instance.addToCollection = view.ComponentView?.addDocument;
+            SchemaCSVPopUp.Instance.setView(view);
+            SchemaCSVPopUp.Instance.setTarget(view.rootDoc);
             SchemaCSVPopUp.Instance.setDataVizDoc(loading);
             SchemaCSVPopUp.Instance.setVisible(true);
         }
diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
index 99b7dd3c4..0114721a2 100644
--- a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
+++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
@@ -6,6 +6,9 @@ import { Doc } from '../../../../fields/Doc';
 import { Button, Type } from 'browndash-components';
 import { StrCast } from '../../../../fields/Types';
 import { MarqueeView } from '../../collections/collectionFreeForm/MarqueeView';
+import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils';
+import { DragManager } from '../../../util/DragManager';
+import { DocumentView } from '../DocumentView';
 
 interface SchemaCSVPopUpProps {}
 
@@ -21,20 +24,24 @@ export class SchemaCSVPopUp extends React.Component<SchemaCSVPopUpProps> {
     };
 
     @observable
-    public visible: boolean = false;
+    public view: DocumentView | undefined = undefined;
     @action
-    public setVisible = (vis: boolean) => {
-        this.visible = vis;
+    public setView = (docView: DocumentView) => {
+        this.view = docView;
     };
 
-    public addToCollection: any | undefined;
+    @observable
+    public target: Doc | undefined = undefined;
+    @action
+    public setTarget = (doc: Doc) => {
+        this.target = doc;
+    };
 
-    /**
-     * Transfers the doc to the user's canvas
-     */
-    private transferToCanvas = () => {
-        if (this.dataVizDoc) this.addToCollection?.(this.dataVizDoc);
-        this.setVisible(false);
+    @observable
+    public visible: boolean = false;
+    @action
+    public setVisible = (vis: boolean) => {
+        this.visible = vis;
     };
 
     constructor(props: SchemaCSVPopUpProps) {
@@ -48,17 +55,12 @@ export class SchemaCSVPopUp extends React.Component<SchemaCSVPopUpProps> {
                 {this.heading('Schema Table as Data Visualization Doc')}
                 <div className="image-content-wrapper">
                         <div className="img-wrapper">
-                            <div className="img-container" style={{background: "blue"}}>
+                            <div className="img-container" style={{background: "blue"}} onPointerDown={e => this.drag(e)}>
                                 <img
                                     width={150} height={150} 
                                 />
                             </div>
-                            <div className="btn-container">
-                                <Button text="Save to Canvas" onClick={() => this.transferToCanvas()} color={StrCast(Doc.UserDoc().userColor)} type={Type.TERT} />
-                            </div>
                         </div>
-                        {/* {this.props.children} */}
-
                 </div>
             </div>
         );
@@ -70,6 +72,32 @@ export class SchemaCSVPopUp extends React.Component<SchemaCSVPopUpProps> {
         </div>
     );
 
+    drag = (e: React.PointerEvent) => {
+        const downX = e.clientX;
+        const downY = e.clientY;
+        setupMoveUpEvents(
+            {},
+            e,
+            e => {
+                const sourceAnchorCreator = () => this.dataVizDoc!;
+                const targetCreator = (annotationOn: Doc | undefined) => {
+                    const embedding = Doc.MakeEmbedding(this.dataVizDoc!);
+                    return embedding;
+                };
+                if (this.view && sourceAnchorCreator && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
+                    DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], 
+                        new DragManager.AnchorAnnoDragData(this.view, sourceAnchorCreator, targetCreator), downX, downY, {
+                        dragComplete: e => {this.setVisible(false);},
+                    });
+                    return true;
+                }
+                return false;
+            },
+            emptyFunction,
+            action(e => {})
+        );
+    };
+
     render() {
         return (
             <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>