mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-05-09 19:45:34 +00:00
Fine tuning canvas (1/2)
This commit is contained in:
codetorso
parent
2b2ec6fe03
commit
a5f384ebb9
3 changed files with 89 additions and 58 deletions
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</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>
|
||||
<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]">
|
||||
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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue