home page support drag to create workflow

Author: 6174

apps/electron-frontend/src/components/my-workflows/import.tsx

@@ -4,10 +4,11 @@ import { readWorkflowFromFile, readWorkflowFromPng } from '@comflowy/common/comf
 import { documentDatabaseInstance } from '@comflowy/common/storage/document-database';
 import { useAppStore } from '@comflowy/common/store';
 import { message } from 'antd';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { ImageIcon } from 'ui/icons';
 import {KEYS, t} from "@comflowy/common/i18n";
 import { PersistedWorkflowDocument } from '@comflowy/common/types';
+import { GlobalEvents, SlotGlobalEvent } from '@comflowy/common/utils/slot-event';
 
 export const ImportWorkflow = () => {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -65,6 +66,17 @@ export const ImportWorkflow = () => {
     }
   };
 
+  useEffect(() => {
+    const disposable = SlotGlobalEvent.on((ev) => {
+      if (ev.type === GlobalEvents.import_workflow) {
+        onFileSelected(ev.data)
+      }
+    })
+    return () => {
+      disposable.dispose();
+    }
+  }, [])
+
   return (
     <div className='create-button' onClick={handleButtonClick}>
       <div style={{ display: 'none' }}>

apps/electron-frontend/src/components/my-workflows/my-workflows.tsx

@@ -18,8 +18,38 @@ import {KEYS, t} from "@comflowy/common/i18n";
 import { NotificationModalEntry } from './notification-modal';
 
 function MyWorkflowsPage() {
+  const [draggingOver, setDraggingOver] = React.useState(false);
+  const handleDragEnter = (ev) => {
+    ev.preventDefault();
+    setDraggingOver(true);
+  }
+
+  const handleDragLeave = (ev) => {
+    ev.preventDefault();
+    if (ev.currentTarget.contains(ev.relatedTarget)) {
+      return;
+    }
+    console.log("drag leave")
+    setDraggingOver(false);
+  }
+
+  const handleDrop = async (ev) => {
+    ev.preventDefault();
+    setDraggingOver(false);
+    console.log(ev.dataTransfer.files)
+    const files = ev.dataTransfer.files;
+    if (files.length > 0) {
+      SlotGlobalEvent.emit({
+        type: GlobalEvents.import_workflow,
+        data: files[0]
+      });
+    }
+  }
+
   return (
-    <div className={styles.myWorkflows}>
+    <div className={styles.myWorkflows} style={{
+      border: draggingOver ? "2px solid var(--primaryColor)" : "2px dashed transparent"
+    }} onDragEnter={handleDragEnter} onDragLeave={handleDragLeave} onDragOver={(ev) => ev.preventDefault()}  onDrop={handleDrop}>
       <WorkflowCreateBox/>
       <h2>{t(KEYS.myWorkflows)}</h2>
       <WorkflowList/>

packages/common/utils/slot-event.ts

@@ -142,7 +142,8 @@ export enum GlobalEvents {
   toggle_panel_container = 'toggle_panel_container',
   show_notification_modal = 'show_notification_modal',
   start_comfyui_execute = 'start_comfyui_execute',
-  show_execution_error = 'show_execution_error'
+  show_execution_error = 'show_execution_error',
+  import_workflow = 'import_workflow'
 }
 
 export type GlobalEventKeys = keyof typeof GlobalEvents;