Merge pull request #302 from ajthinking/customizable-ondrop

Customizable ondrop

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-story/core",
-  "version": "0.0.92",
+  "version": "0.0.93",
   "main": "dist/main/index.js",
   "type": "commonjs",
   "types": "dist/main/index.d.ts",

packages/nodejs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-story/nodejs",
-  "version": "0.0.92",
+  "version": "0.0.93",
   "main": "dist/index.js",
   "type": "commonjs",
   "types": "dist/index.d.ts",

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-story/ui",
-  "version": "0.0.92",
+  "version": "0.0.93",
   "main": "./dist/bundle.js",
   "types": "./dist/src/index.d.ts",
   "exports": {

packages/ui/src/components/DataStory/DataStoryCanvas.tsx

@@ -9,7 +9,7 @@ import InputNodeComponent from '../Node/InputNodeComponent';
 import TableNodeComponent from '../Node/TableNodeComponent';
 import { DataStoryCanvasProps, StoreInitOptions, StoreSchema } from './types';
 import OutputNodeComponent from '../Node/OutputNodeComponent';
-import { onDragOver, onDrop } from './onDrop';
+import { onDropDefault } from './onDropDefault';
 import type { NodeTypes } from '@xyflow/react/dist/esm/types';
 import { useSelectedNodeSettings } from './Form/useSelectedNodeSettings';
 import { HotkeyManager, useHotkeys } from './useHotkeys';
@@ -50,6 +50,7 @@ const Flow = ({
   selectedNodeData,
   selectedNode,
   onSave,
+  onDrop,
   client,
   onChange,
 }: DataStoryCanvasProps) => {
@@ -155,11 +156,17 @@ const Flow = ({
         fitViewOptions={{
           padding: 0.25,
         }}
-        onDragOver={useCallback(onDragOver, [])}
-        onDrop={useCallback(
-          (e) => onDrop(e, addNodeFromDescription),
-          [addNodeFromDescription]
-        )}
+        onDragOver={useCallback((event) => {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = 'move';
+        }, [])}
+        onDrop={
+          useCallback((event) => {
+            const handler = onDrop || onDropDefault;
+
+            handler(event, addNodeFromDescription)
+          }, [addNodeFromDescription]
+          )}
       >
         <DataStoryControls
           onSave={onSave}

packages/ui/src/components/DataStory/onDropDefault.ts

@@ -0,0 +1,89 @@
+import {
+  NodeDescription,
+  jsonEvaluation,
+  hjsonEvaluation,
+  jsExpressionEvaluation,
+  jsFunctionEvaluation,
+  json_
+} from '@data-story/core';
+
+export const fileDropper = {
+  canHandle: (event) => {
+    return event.dataTransfer.files.length > 0;
+  },
+
+  handle: (event, addNodeFromDescription) => {
+    console.log('HANDLING IN FILE DROPPER')
+    const files = event.dataTransfer.files;
+
+    const file = files[0];
+    if (file.type !== 'application/json') {
+      console.error('You dragged and dropped a FILE TYPE not supported yet.');
+      return
+    }
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        // Parse the JSON content
+        const jsonFileContent = JSON.parse(event?.target?.result as string);
+
+        // This is a hack, consider the following:
+        // The UI now hardcodes the Create node details
+        // We don't know if the server even provides a Create node
+        // Furthermore, the definition of the Create node might change
+        // Consider having datastory register DnD-ables?
+        const description: NodeDescription = {
+          name: 'Create',
+          label: file.name,
+          inputs: [],
+          outputs: [{
+            name: 'output',
+            schema: {}
+          }],
+          params: [
+            json_({
+              name: 'data',
+              help: 'You may use json, hson js function or expression',
+              value: JSON.stringify(jsonFileContent, null, 2),
+              evaluations: [
+                { ...jsonEvaluation, selected: true },
+                hjsonEvaluation,
+                jsFunctionEvaluation,
+                jsExpressionEvaluation,
+              ]
+            })
+          ],
+        }
+
+        addNodeFromDescription(description);
+      } catch (error) {
+        console.error('Error parsing JSON:', error);
+      }
+    };
+
+    reader.onerror = (error) => {
+      console.error('Error reading file:', error);
+    };
+
+    // Read the file content
+    reader.readAsText(file);
+  },
+}
+
+export const onDropDefault = (event, addNodeFromDescription) => {
+  event.preventDefault();
+
+  const handlers = [
+    fileDropper,
+  ]
+
+  const handler = handlers.find(h => h.canHandle(event));
+  if(!handler) {
+    console.error('You dragged and dropped something not supported yet!');
+    console.log(event)
+    return;
+  }
+
+  handler.handle(event, addNodeFromDescription);
+}

packages/ui/src/components/DataStory/types.ts

@@ -64,6 +64,7 @@ export type DataStoryProps = {
   observers?: DataStoryObservers;
   onInitialize?: DataStoryCallback;
   hideSidebar?: boolean;
+  onDrop?: (event: any, addNodeFromDescription: any) => void;
   /**
    * hideActivityBar: true (hide all activity bars)
    * hideActivityBar: ['node', 'diagram'] (hide node and diagram activity bars)