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 ( -
+
- - {setTimeout(()=> setFullScreen(false), 50)}} onCollapse={()=> {setTimeout(()=> setFullScreen(true), 50)}} defaultSize={30} collapsible={true} minSize={22}> -
+ { + l[0]! < 20 ? setVisible(false) : setVisible(true); + }} + className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`} + direction="horizontal" + > + { + setTimeout(() => setFullScreen(false), 50); + }} + onCollapse={() => { + setTimeout(() => setFullScreen(true), 50); + }} + defaultSize={30} + collapsible={true} + > +
Change Filters @@ -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" />
-
-
- -

- Nvidia will most likely create monopoly in software industry - as they are already largest player in GPU hardware by 20... -

-
-
- -
-
-

- Nvidia currently dominates the GPU hardware market, with - a market share over 97%. This has led some to argue... -

+ {visible ? ( +
+
+ +

+ Nvidia will most likely create monopoly in software + industry as they are already largest player in GPU + hardware by 20... +

+
+
+ +
+
+

+ Nvidia currently dominates the GPU hardware market, + with a market share over 97%. This has led some to + argue... +

+
+

+ From space: GPU GOATS +

+
+
+
+ +
+
+

+ Nvidia currently dominates the GPU hardware market, + with a market share over 97%. This has led some to + argue... +

+
+

+ Page url: + https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia +

-

- From space: GPU GOATS -

-
- -
-
-

- Nvidia currently dominates the GPU hardware market, with - a market share over 97%. This has led some to argue... -

-
-

- Page url: - https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia -

-
-
-
+ ) : ( +

Need more space to show!

+ )}
- + {/*
*/} -
+
{/*
*/} -
+
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(null); - const {isDraggingOver, setIsDraggingOver} = useDrag(); + const { isDraggingOver, setIsDraggingOver } = useDrag(); const editor = useEditor(); - const handleDrop = useCallback((event: React.DragEvent) => { + 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); } }; }, []);