accept drop from explore file or node

src/components/editor.tsx

@@ -632,9 +632,9 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     });
 
     editor.graph.on("node:drop", (e: G6GraphEvent) => {
-      const srcNodeId = editor.dragSrcId;
       const dstNode = e.item;
 
+      let srcNodeId = editor.dragSrcId;
       let dragDir;
       if (dstNode.hasState("dragRight")) {
         dragDir = "dragRight";
@@ -647,6 +647,39 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
       clearDragSrcState();
       clearDragDstState();
 
+      if (e.originalEvent instanceof DragEvent) {
+        const dragEvent = e.originalEvent as DragEvent;
+        const exploreFile = dragEvent.dataTransfer?.getData("explore-file");
+        const exploreNode = dragEvent.dataTransfer?.getData("explore-node");
+        const dstData = findDataById(dstNode.getID());
+
+        if (exploreNode) {
+          const newTreeData: TreeGraphData = b3util.createTreeData(
+            {
+              id: editor.autoId++,
+              name: exploreNode,
+            },
+            dstData.id
+          );
+          dstData.children ||= [];
+          dstData.children.push(newTreeData);
+          srcNodeId = newTreeData.id;
+        } else if (exploreFile && exploreFile !== editor.path) {
+          const newTreeData: TreeGraphData = b3util.createTreeData(
+            {
+              id: editor.autoId++,
+              name: "unknow",
+              path: Path.relative(workspace.workdir, exploreFile).replaceAll(Path.sep, "/"),
+            },
+            dstData.id
+          );
+          dstData.children ||= [];
+          dstData.children.push(newTreeData);
+          srcNodeId = newTreeData.id;
+          editor.autoId = b3util.refreshTreeDataId(newTreeData, Number(srcNodeId));
+        }
+      }
+
       if (!srcNodeId) {
         console.log("no drag src");
         return;

src/components/explorer.tsx

@@ -147,7 +147,7 @@ export const Explorer: FC = () => {
         <Flex justify="center" align="center" style={{ height: "100%" }}>
           <img
             className="b3-node-icon"
-            style={{ width: "14px", height: "14px", color: "white" }}
+            style={{ width: "13px", height: "13px", color: "white" }}
             src={`./icons/${catalog.title}.svg`}
           />
         </Flex>
@@ -696,6 +696,7 @@ export const Explorer: FC = () => {
 
   return (
     <Flex
+      className="b3-explorer"
       vertical
       ref={keysRef}
       tabIndex={-1}
@@ -781,6 +782,9 @@ export const Explorer: FC = () => {
               allowDrop={(options) => {
                 return !options.dropNode.isLeaf;
               }}
+              onDragStart={(e) => {
+                e.event.dataTransfer.setData("explore-file", e.node.path);
+              }}
               defaultExpandedKeys={[workspace.fileTree.path]}
               draggable={newName !== null ? false : { icon: false }}
               expandedKeys={expandedKeys}
@@ -793,6 +797,10 @@ export const Explorer: FC = () => {
           tabIndex={-1}
           fieldNames={{ key: "title" }}
           treeData={workspace.nodeTree ? [workspace.nodeTree] : []}
+          draggable={{ icon: false, nodeDraggable: (node) => !!node.isLeaf }}
+          onDragStart={(e) => {
+            e.event.dataTransfer.setData("explore-node", e.node.def?.name ?? "");
+          }}
           switcherIcon={<DownOutlined />}
         />
       </Flex>

src/components/menu.tsx

@@ -271,7 +271,6 @@ export const Menu: FC<LayoutProps> = () => {
           {
             id: "menu.view.zoomIn",
             label: t("zoomIn"),
-            role: "zoomIn",
             click: () => {
               const webContents = getFocusedWebContents();
               if (webContents) {