feat: adds initial file drag and drop functionality

Author: noel-schenk

apps/vscode/src/extension/editor/document.ts

@@ -208,6 +208,27 @@ export class TriplexDocument implements vscode.CustomDocument {
     });
   }
 
+  async insertComponent(data: { scenePath: string; componentPath: string }) {
+    return this.undoableAction("Insert component", async () => {
+      const result = await fetch(
+        `http://localhost:${
+          this._context.ports.server
+        }/scene/${encodeURIComponent(data.scenePath)}/add-component`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            componentPath: data.componentPath,
+          }),
+        },
+      );
+      const response: Mutation = await result.json();
+      return { ...response, path: data.scenePath };
+    });
+  }
+
   async moveElement(data: {
     action: "move-before" | "move-after" | "make-child" | "reparent";
     destination: { astPath: string; column: number; line: number };

apps/vscode/src/extension/editor/index.ts

@@ -187,6 +187,9 @@ export class TriplexEditorProvider
           sendVSCE(panel.webview, "vscode:request-blur-element", undefined);
           await document.deleteElement(element);
         }),
+        on(panel.webview, "component-insert", async (data) => {
+          await document.insertComponent(data);
+        }),
         on(panel.webview, "notification", async (data) => {
           switch (data.type) {
             case "info":

examples-private/test-fixture/src/dropScene.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2022—present Michael Dougall. All rights reserved.
+ *
+ * This repository utilizes multiple licenses across different directories. To
+ * see this files license find the nearest LICENSE file up the source tree.
+ */
+import { MapControls, PerspectiveCamera } from "@react-three/drei";
+
+export function DropScene({
+  name: ___ = "jelly",
+  value: __ = 100,
+  variant: _ = "giant",
+  visible: ____ = true,
+}: SceneProps) {
+  return (
+    <>
+      <ambientLight position={[2.12, 0, -0.88]} />
+
+      <PerspectiveCamera
+        makeDefault={true}
+        name={"user_defined"}
+        position={[-1.831_592_557_014_578_1, 0.943_661_973_904_340_8, 0]}
+        rotation={[
+          -1.570_796_326_794_896_6, -1.221_730_476_396_030_6,
+          -1.570_796_326_794_896_6,
+        ]}
+      />
+      <group>
+        <mesh position={[1.6, 0, -1.7]}>
+          <boxGeometry />
+          <meshStandardMaterial />
+        </mesh>
+        <mesh position={[0.04, 0, -1.7]} scale={[2.42, 2.24, 1]}>
+          <boxGeometry />
+          <meshStandardMaterial />
+        </mesh>
+      </group>
+
+      <MapControls makeDefault={false} />
+    </>
+  );
+}
+
+interface SceneProps {
+  name?: string;
+  /**
+   * @min 1
+   * @max 10
+   * @step 0.5
+   */
+  value?: number;
+  variant?: "giant" | "small";
+  visible?: boolean;
+}

examples-private/test-fixture/src/geometry/dropBox.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2022—present Michael Dougall. All rights reserved.
+ *
+ * This repository utilizes multiple licenses across different directories. To
+ * see this files license find the nearest LICENSE file up the source tree.
+ */
+import { useState } from "react";
+import { type Vector3Tuple } from "three";
+
+export const DropBox = ({
+  children,
+  color = "blue",
+  position,
+  rotation,
+  scale,
+  size = 1,
+}: {
+  children?: React.ReactNode;
+  color?: "red" | "green" | "blue";
+  position?: Vector3Tuple | number;
+  rotation?: Vector3Tuple;
+  scale?: Vector3Tuple | number;
+  /**
+   * @min 1
+   * @max 2
+   * @step 0.1
+   * @group Custom Group
+   */
+  size?: number | string;
+}) => {
+  const ok = {};
+  const [hover, setHover] = useState(false);
+  return (
+    <group scale={scale} visible={true}>
+      <mesh
+        {...ok}
+        name="hello-world"
+        onClick={() => {}}
+        onPointerOut={() => setHover(false)}
+        onPointerOver={() => setHover(true)}
+        position={position}
+        rotation={rotation}
+        userData={{ hello: true }}
+        visible={true}
+      >
+        <boxGeometry args={[size, size, size]} />
+        <meshStandardMaterial color={hover ? "purple" : color} key={color} />
+        <meshBasicMaterial color="green" />
+        {children}
+      </mesh>
+    </group>
+  );
+};

packages/@triplex/editor-next/src/features/app-root/index.tsx

@@ -6,17 +6,66 @@
  */
 import { fg } from "@triplex/lib/fg";
 import { useScreenView } from "@triplex/ux";
+import { DragEvent, useRef, useState } from "react";
 import { preloadSubscription } from "../../hooks/ws";
+import { sendVSCE } from "../../util/bridge";
 import { AIChat } from "../ai-chat";
 import { FloatingControls } from "../floating-controls";
 import { Panels } from "../panels";
+import { useSceneContext } from "./context";
 import { Dialogs } from "./dialogs";
 import { EmptyState } from "./empty-state";
 import { Events } from "./events";
 
 export function AppRoot() {
   useScreenView("app", "Screen");
 
+  const context = useSceneContext();
+  const [isDragging, setIsDragging] = useState(false);
+  const dropZoneRef = useRef<HTMLDivElement>(null);
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDragEnter = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Only set to false if leaving the drop zone itself
+    if (
+      e.currentTarget === dropZoneRef.current &&
+      !dropZoneRef.current.contains(e.relatedTarget as Node)
+    ) {
+      setIsDragging(false);
+    }
+  };
+
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    const items = e.dataTransfer.items;
+    const fileUris: string[] = [];
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.kind === "string" && item.type === "text/uri-list") {
+        item.getAsString((uri) => {
+          fileUris.push(uri);
+          sendVSCE("component-insert", {
+            componentPath: uri,
+            scenePath: context.path,
+          });
+        });
+      }
+    }
+  };
+
   return (
     <div className="fixed inset-0 flex select-none">
       <Events />
@@ -25,13 +74,53 @@ export function AppRoot() {
       <div className="relative h-full w-full">
         <FloatingControls />
         <EmptyState />
-        <iframe
-          allow="cross-origin-isolated"
-          className="h-full w-full"
-          data-testid="scene"
-          id="scene"
-          src={`http://localhost:${window.triplex.env.ports.client}/scene`}
-        />
+        <div
+          ref={dropZoneRef}
+          onDragOver={handleDragOver}
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          style={{
+            position: "relative",
+            height: "100%",
+            width: "100%",
+            padding: "16px",
+          }}
+        >
+          {isDragging && (
+            <div
+              style={{
+                border: "2px dashed #ccc",
+                borderRadius: "8px",
+                padding: "40px",
+                textAlign: "center",
+                backgroundColor: "#f5f5f5",
+                transition: "all 0.3s ease",
+                minHeight: "200px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                position: "absolute",
+                top: "0",
+                left: "0",
+                width: "100%",
+                height: "100%",
+                zIndex: "99",
+                pointerEvents: "all",
+              }}
+            >
+              <p>Drop Component here</p>
+            </div>
+          )}
+          <iframe
+            allow="cross-origin-isolated"
+            className="h-full w-full"
+            data-testid="scene"
+            id="scene"
+            src={`http://localhost:${window.triplex.env.ports.client}/scene`}
+          />
+        </div>
       </div>
       {fg("ai_chat") && <AIChat />}
     </div>

packages/@triplex/editor-next/src/util/bridge.ts

@@ -118,6 +118,10 @@ export interface ToVSCodeEvent extends ClientSendEventData {
   terminal: {
     command: string;
   };
+  "component-insert": {
+    scenePath: string;
+    componentPath: string;
+  };
 }
 
 /**

packages/@triplex/server/src/index.ts

@@ -5,6 +5,7 @@
  * see this files license find the nearest LICENSE file up the source tree.
  */
 import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
 import { Application, isHttpError, Router } from "@oakserver/oak";
 import { fg, initFeatureGates } from "@triplex/lib/fg";
 import { createForkLogger } from "@triplex/lib/log";
@@ -32,6 +33,7 @@ import { propGroupsDef } from "./ast/prop-groupings";
 import { createAI } from "./services/ai";
 import {
   add,
+  addComponentToEnd,
   commentComponent,
   create,
   deleteElement,
@@ -341,6 +343,21 @@ export async function createServer({
     context.response.body = { ...ids };
   });
 
+  router.post("/scene/:path/add-component", async (context) => {
+    const { path: scenePath } = context.params;
+
+    const body = await context.request.body().value;
+
+    const componentPath = fileURLToPath(body.componentPath);
+
+    const sceneFile = project.getSourceFile(scenePath);
+
+    const [ids] = await sceneFile.edit((source) => {
+      addComponentToEnd(source, componentPath);
+    });
+    context.response.body = { ...ids, success: true };
+  });
+
   router.post("/scene/new", (context) => {
     const exportName = "Untitled";
     const sourceFile = project.createSourceFile(exportName);