Fine tuning canvas (1/2)

3 files changed, 87 insertions, 56 deletions

diff --git a/apps/web/app/(canvas)/canvas.tsx b/apps/web/app/(canvas)/canvas.tsx
index 498ab1eb..a8dc312b 100644
--- a/apps/web/app/(canvas)/canvas.tsx
+++ b/apps/web/app/(canvas)/canvas.tsx
@@ -21,22 +21,15 @@ export const Canvas = memo(() => {
     setIsDraggingOver(true);
     console.log("entere")
   };
-
-  const handleDragLeave = () => {
-    setIsDraggingOver(false);
-    console.log("leaver")
-  };
-
+  
   useEffect(() => {
     const divElement = Dragref.current;
     if (divElement) {
       divElement.addEventListener('dragover', handleDragOver);
-      divElement.addEventListener('dragleave', handleDragLeave);  
     }
     return () => {
       if (divElement) {
         divElement.removeEventListener('dragover', handleDragOver);
-        divElement.removeEventListener('dragleave', handleDragLeave);  
       }
     };
   }, []);
diff --git a/apps/web/app/(canvas)/canvas/page.tsx b/apps/web/app/(canvas)/canvas/page.tsx
index 366a4481..c24e2c73 100644
--- a/apps/web/app/(canvas)/canvas/page.tsx
+++ b/apps/web/app/(canvas)/canvas/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 // import Canvas from "./_components/canvas";
-import {Canvas} from "../canvas";
+import { Canvas } from "../canvas";
 import React, { useState } from "react";
 // import ReactTextareaAutosize from "react-textarea-autosize";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
@@ -16,13 +16,33 @@ import {
 function page() {
   const [value, setValue] = useState("");
   const [fullScreen, setFullScreen] = useState(false);
+  const [visible, setVisible] = useState(true);
 
   return (
-    <div className={`h-screen w-full ${ !fullScreen ? "px-4 py-6": "bg-[#1F2428]"} transition-all`}>
+    <div
+      className={`h-screen w-full ${!fullScreen ? "px-4 py-6" : "bg-[#1F2428]"} transition-all`}
+    >
       <div>
-        <PanelGroup className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`} direction="horizontal">
-          <Panel onExpand={()=> {setTimeout(()=> setFullScreen(false), 50)}} onCollapse={()=> {setTimeout(()=> setFullScreen(true), 50)}} defaultSize={30} collapsible={true} minSize={22}>
-            <div className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen": "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}>
+        <PanelGroup
+          onLayout={(l) => {
+            l[0]! < 20 ? setVisible(false) : setVisible(true);
+          }}
+          className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`}
+          direction="horizontal"
+        >
+          <Panel
+            onExpand={() => {
+              setTimeout(() => setFullScreen(false), 50);
+            }}
+            onCollapse={() => {
+              setTimeout(() => setFullScreen(true), 50);
+            }}
+            defaultSize={30}
+            collapsible={true}
+          >
+            <div
+              className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen" : "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}
+            >
               <div className="flex items-center justify-between bg-[#2C3439] px-4 py-2 text-lg font-medium text-[#989EA4]">
                 Change Filters
                 <SettingsSvg />
@@ -38,55 +58,68 @@ function page() {
                   className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
                 />
               </div>
-              <div className="flex flex-col gap-10">
-                <div className="flex gap-4 px-3 text-[#989EA4]">
-                  <TextLoadingSvg />
-                  <h1>
-                    Nvidia will most likely create monopoly in software industry
-                    as they are already largest player in GPU hardware by 20...
-                  </h1>
-                </div>
-                <div className="flex gap-4 px-3 text-[#989EA4]">
-                  <ThreeDBlock />
-                  <div className="flex flex-col gap-2">
-                    <div>
-                      <h1 className="line-clamp-3">
-                        Nvidia currently dominates the GPU hardware market, with
-                        a market share over 97%. This has led some to argue...
-                      </h1>
+              {visible ? (
+                <div className="flex flex-col gap-10">
+                  <div className="flex gap-4 px-3 text-[#989EA4]">
+                    <TextLoadingSvg />
+                    <h1>
+                      Nvidia will most likely create monopoly in software
+                      industry as they are already largest player in GPU
+                      hardware by 20...
+                    </h1>
+                  </div>
+                  <div className="flex gap-4 px-3 text-[#989EA4]">
+                    <ThreeDBlock />
+                    <div className="flex flex-col gap-2">
+                      <div>
+                        <h1 className="line-clamp-3">
+                          Nvidia currently dominates the GPU hardware market,
+                          with a market share over 97%. This has led some to
+                          argue...
+                        </h1>
+                      </div>
+                      <p className="line-clamp-1 text-[#369DFD]">
+                        From space: GPU GOATS
+                      </p>
                     </div>
-                    <p className="line-clamp-1 text-[#369DFD]">
-                      From space: GPU GOATS
-                    </p>
                   </div>
-                </div>
-                <div className="flex gap-4 px-3 text-[#989EA4]">
-                  <LinkSvg />
-                  <div className="flex flex-col gap-2">
-                    <div>
-                      <h1 className="line-clamp-3">
-                        Nvidia currently dominates the GPU hardware market, with
-                        a market share over 97%. This has led some to argue...
-                      </h1>
+                  <div className="flex gap-4 px-3 text-[#989EA4]">
+                    <LinkSvg />
+                    <div className="flex flex-col gap-2">
+                      <div>
+                        <h1 className="line-clamp-3">
+                          Nvidia currently dominates the GPU hardware market,
+                          with a market share over 97%. This has led some to
+                          argue...
+                        </h1>
+                      </div>
+                      <p className="line-clamp-1 text-[#369DFD]">
+                        Page url:
+                        https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia
+                      </p>
                     </div>
-                    <p className="line-clamp-1 text-[#369DFD]">
-                      Page url:
-                      https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia
-                    </p>
                   </div>
                 </div>
-              </div>
+              ) : (
+                <h1 className="text-center py-10 text-xl">Need more space to show!</h1>
+              )}
             </div>
           </Panel>
-          <PanelResizeHandle className={`relative flex items-center transition-all justify-center ${!fullScreen && "px-1"}`}>
+          <PanelResizeHandle
+            className={`relative flex items-center transition-all justify-center ${!fullScreen && "px-1"}`}
+          >
             {/* <div className="absolute z-[1000000]  top-1/2 -translate-y-1/2"> */}
-            <div className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}>
+            <div
+              className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}
+            >
               <DragSvg />
             </div>
             {/* </div> */}
           </PanelResizeHandle>
           <Panel className="relative" defaultSize={70} minSize={60}>
-            <div className={`absolute overflow-hidden transition-all inset-0 ${ fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}>
+            <div
+              className={`absolute overflow-hidden transition-all inset-0 ${fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}
+            >
               <Canvas />
             </div>
           </Panel>
diff --git a/apps/web/app/(canvas)/dropComponent.tsx b/apps/web/app/(canvas)/dropComponent.tsx
index 03a32358..ee50f8d3 100644
--- a/apps/web/app/(canvas)/dropComponent.tsx
+++ b/apps/web/app/(canvas)/dropComponent.tsx
@@ -12,22 +12,27 @@ const stripHtmlTags = (html: string): string => {
 const useDrag = (): DragContextType => {
   const context = useContext(DragContext);
   if (!context) {
-    throw new Error('useCounter must be used within a CounterProvider');
+    throw new Error("useCounter must be used within a CounterProvider");
   }
   return context;
 };
 
-
 function DropZone() {
   const dropRef = useRef<HTMLDivElement | null>(null);
-  const {isDraggingOver, setIsDraggingOver} = useDrag();
+  const { isDraggingOver, setIsDraggingOver } = useDrag();
 
   const editor = useEditor();
 
-  const handleDrop = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+  const handleDragLeave = () => {
+    setIsDraggingOver(false);
+    console.log("leaver");
+  };
+
+  const handleDrop = useCallback((event: DragEvent) => {
     event.preventDefault();
     setIsDraggingOver(false);
     const dt = event.dataTransfer;
+    if (!dt) {return}
     const items = dt.items;
 
     for (let i = 0; i < items.length; i++) {
@@ -45,7 +50,7 @@ function DropZone() {
       } else if (items[i]!.kind === "string") {
         items[i]!.getAsString((data) => {
           const cleanText = stripHtmlTags(data);
-          handleExternalDroppedContent({editor,text:cleanText})
+          handleExternalDroppedContent({ editor, text: cleanText });
         });
       }
     }
@@ -54,13 +59,13 @@ function DropZone() {
   useEffect(() => {
     const divElement = dropRef.current;
     if (divElement) {
-      // @ts-ignore
       divElement.addEventListener("drop", handleDrop);
+      divElement.addEventListener("dragleave", handleDragLeave);
     }
     return () => {
       if (divElement) {
-        // @ts-ignore
         divElement.removeEventListener("drop", handleDrop);
+        divElement.addEventListener("dragleave", handleDragLeave);
       }
     };
   }, []);