Merge pull request #109 from ClayPulse/improve-beginner-ux

Use dnd-kit for file and app drag & drop

Author: Shellishack

mobile/README.md

@@ -0,0 +1,10 @@
+# Android release
+```bash
+npx cap sync
+# Build .aab file (will fail signing, use the next command to fix)
+npx cap build android --keystorepath "<path_to_keystore>" --keystorepass "<keystore_pass>" --keystorealias "<keystore_alias>" --keystorealiaspass "<keystore_alias_pass>" --androidreleasetype AAB
+# Sign the .aab
+jarsigner -verbose -keystore "<path_to_keystore>" "<path_to_aab>" "<keystore_alias>"
+```
+
+Then, `mobile/android/app/build/outputs/bundle/release/app-released.aab` is a signed .aab ready for publishing.

mobile/android/app/build.gradle

@@ -1,10 +1,10 @@
 apply plugin: 'com.android.application'
 
 android {
-    namespace "com.pulse.app"
+    namespace "com.pulse_editor.app"
     compileSdk rootProject.ext.compileSdkVersion
     defaultConfig {
-        applicationId "com.pulse.app"
+        applicationId "com.pulse_editor.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1

mobile/android/app/src/main/java/com/pulse/app/MainActivity.java

@@ -1,4 +1,4 @@
-package com.pulse.app;
+package com.pulse_editor.app;
 
 import com.getcapacitor.BridgeActivity;
 

mobile/android/app/src/main/res/values/strings.xml

@@ -2,6 +2,6 @@
 <resources>
     <string name="app_name">Pulse Editor</string>
     <string name="title_activity_main">Pulse Editor</string>
-    <string name="package_name">com.pulse.app</string>
-    <string name="custom_url_scheme">com.pulse.app</string>
+    <string name="package_name">com.pulse_editor.app</string>
+    <string name="custom_url_scheme">com.pulse_editor.app</string>
 </resources>

mobile/capacitor.config.ts

@@ -1,7 +1,7 @@
 import type { CapacitorConfig } from "@capacitor/cli";
 
 const config: CapacitorConfig = {
-  appId: "com.pulse.app",
+  appId: "com.pulse_editor.app",
   appName: "Pulse Editor",
   webDir: "../build/next",
   android: {
@@ -18,7 +18,7 @@ const config: CapacitorConfig = {
       enabled: true,
     },
     CapacitorHttp: {
-      enabled: true,
+      enabled: false,
     },
   },
 };

npm-packages/cli/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pulse-editor/cli",
-	"version": "0.1.0-beta.8",
+	"version": "0.1.1-beta.0",
 	"license": "MIT",
 	"bin": {
 		"pulse": "dist/cli.js"

package-lock.json

@@ -1,11 +1,13 @@
 import Nav from "@/components/interface/navigation/nav";
 import CapacitorProvider from "@/components/providers/capacitor-provider";
+import DndProvider from "@/components/providers/dnd-provider";
 import EditorContextProvider from "@/components/providers/editor-context-provider";
 import InterModuleCommunicationProvider from "@/components/providers/imc-provider";
 import PlatformAssistantProvider from "@/components/providers/platform-assistant-provider";
 import RemoteModuleProvider from "@/components/providers/remote-module-provider";
 import WrappedHeroUIProvider from "@/components/providers/wrapped-hero-ui-provider";
 import { Analytics } from "@vercel/analytics/next";
+import { ReactFlowProvider } from "@xyflow/react";
 import "material-icons/iconfont/material-icons.css";
 import type { Metadata } from "next";
 import { Suspense } from "react";
@@ -31,14 +33,18 @@ export default function RootLayout({
             <EditorContextProvider>
               <CapacitorProvider>
                 <InterModuleCommunicationProvider>
-                  <RemoteModuleProvider isPreventingCSS={true}>
-                    <Toaster />
-                    <Nav>
-                      <PlatformAssistantProvider>
-                        {children}
-                      </PlatformAssistantProvider>
-                    </Nav>
-                  </RemoteModuleProvider>
+                  <ReactFlowProvider>
+                    <DndProvider>
+                      <RemoteModuleProvider isPreventingCSS={true}>
+                        <Toaster />
+                        <Nav>
+                          <PlatformAssistantProvider>
+                            {children}
+                          </PlatformAssistantProvider>
+                        </Nav>
+                      </RemoteModuleProvider>
+                    </DndProvider>
+                  </ReactFlowProvider>
                 </InterModuleCommunicationProvider>
               </CapacitorProvider>
             </EditorContextProvider>

web/app/(main-layout)/layout.tsx

@@ -2,11 +2,11 @@ import BaseAppLoader from "@/components/app-loaders/base-app-loader";
 import Loading from "@/components/interface/status-screens/loading";
 import { EditorContext } from "@/components/providers/editor-context-provider";
 import { IMCContext } from "@/components/providers/imc-provider";
-import { DragEventTypeEnum, PlatformEnum } from "@/lib/enums";
+import { PlatformEnum } from "@/lib/enums";
 import { usePlatformApi } from "@/lib/hooks/use-platform-api";
 import { getPlatform } from "@/lib/platform-api/platform-checker";
-import { ExtensionApp, FileDragData } from "@/lib/types";
-import { addToast } from "@heroui/react";
+import { ExtensionApp } from "@/lib/types";
+import { useDroppable } from "@dnd-kit/core";
 import {
   ConnectionListener,
   IMCMessage,
@@ -32,6 +32,16 @@ export default function SandboxAppLoader({
   const editorContext = useContext(EditorContext);
   const imcContext = useContext(IMCContext);
 
+  const { resolvedTheme } = useTheme();
+  const { platformApi } = usePlatformApi();
+
+  const { setNodeRef } = useDroppable({
+    id: "app-node-view-" + viewModel.viewId,
+    data: {
+      viewId: viewModel.viewId,
+    },
+  });
+
   const [currentExtension, setCurrentExtension] = useState<
     ExtensionApp | undefined
   >();
@@ -48,9 +58,6 @@ export default function SandboxAppLoader({
   // const [isConnected, setIsConnected] = useState<boolean>(false);
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
 
-  const { resolvedTheme } = useTheme();
-  const { platformApi } = usePlatformApi();
-
   // Update view Id when the view model changes
   useEffect(() => {
     // If the view Id changes (e.g. when switching file but not extension),
@@ -137,13 +144,6 @@ export default function SandboxAppLoader({
     };
   }, []);
 
-  useEffect(() => {
-    console.log(
-      "Is dragging over canvas: ",
-      editorContext?.editorStates.isDraggingOverCanvas,
-    );
-  }, [editorContext?.editorStates.isDraggingOverCanvas]);
-
   // Set is loading extension to true when current extension changes
   useEffect(() => {
     if (currentExtension) {
@@ -316,48 +316,7 @@ export default function SandboxAppLoader({
   return (
     <div
       className="relative h-full w-full"
-      onDragOver={(e) => {
-        e.stopPropagation();
-        const types = e.dataTransfer.types;
-        if (
-          types.includes(`application/${DragEventTypeEnum.File.toLowerCase()}`)
-        ) {
-          e.preventDefault(); // allow drop
-          e.dataTransfer.dropEffect = "move";
-        } else {
-          e.dataTransfer.dropEffect = "none";
-        }
-      }}
-      onDrop={async (e) => {
-        const dataText = e.dataTransfer.getData(
-          `application/${DragEventTypeEnum.File.toLowerCase()}`,
-        );
-        if (!dataText) {
-          return;
-        }
-        console.log("Dropped item:", dataText);
-        try {
-          const data = JSON.parse(dataText) as FileDragData;
-
-          e.preventDefault();
-          const uri = data.uri;
-
-          // Send uri to app view
-          await imcContext?.polyIMC?.sendMessage(
-            viewModel.viewId,
-            IMCMessageTypeEnum.EditorAppReceiveFileUri,
-            {
-              uri,
-            },
-          );
-        } catch (error) {
-          addToast({
-            title: "Failed to open file",
-            description: "The dropped file data is invalid.",
-            color: "danger",
-          });
-        }
-      }}
+      ref={setNodeRef}
     >
       {isLookingForExtension ? (
         <div className="bg-content1 h-full w-full">