Make sidebar resize smoother

src/components/canvas.jsx

@@ -235,7 +235,7 @@ export default function Canvas(props) {
   );
 
   return (
-    <div ref={drop} className="flex-grow" id="canvas" onMouseUp={()=>props.setResize(false)}>
+    <div ref={drop} className="flex-grow" id="canvas" >
       <div ref={canvas} className="w-full h-screen">
         <svg
           onMouseMove={handleMouseMove}

src/components/editor_panel.jsx

@@ -28,14 +28,6 @@ const EditorPanel = (props) => {
   const [tab, setTab] = useState("1");
   const map = useRef(new Map());
 
-  const [width, setWidth] = useState(320);
-
-  const dragHandler = (e) => {
-    if (!props.resize) return;
-    const w = e.clientX;
-    if (w > 320) setWidth(w);
-  };
-
   const tabList = [
     { tab: "Tables", itemKey: "1" },
     { tab: "References", itemKey: "2" },
@@ -70,12 +62,8 @@ const EditorPanel = (props) => {
   ];
 
   return (
-    <div
+    <div className="h-screen flex overflow-clip relative">
-      className="h-screen flex overflow-clip relative"
+      <div className="mt-2" style={{ width: `${props.width}px` }}>
-      onMouseMove={dragHandler}
-      onMouseUp={() => props.setResize(false)}
-    >
-      <div className="mt-2" style={{ width: `${width}px` }}>
         <Tabs
           type="card"
           tabList={tabList}
@@ -111,7 +99,6 @@ const EditorPanel = (props) => {
             const blob = new Blob([props.code], {
               type: "text/plain;charset=utf-8",
             });
-
             window.saveAs(blob, "src.txt");
           }}
         >
@@ -164,9 +151,8 @@ const EditorPanel = (props) => {
         </button>
       </div>
       <div
-        className="flex justify-center items-center p-1 h-full bg-slate-300 cursor-col-resize"
+        className={`flex justify-center items-center p-1 h-full hover:bg-slate-300 cursor-col-resize ${props.resize? "bg-slate-300": ""}`}
         onMouseDown={() => props.setResize(true)}
-        onMouseUp={() => props.setResize(false)}
       >
         <div className="w-1 border-x border-white h-1/6" />
       </div>

src/pages/editor.jsx

@@ -12,11 +12,22 @@ export default function Editor(props) {
   const [relationships, setRelationships] = useState([]);
   const [areas, setAreas] = useState([]);
   const [resize, setResize] = useState(false);
+  const [width, setWidth] = useState(320);
+
+  const dragHandler = (e) => {
+    if (!resize) return;
+    const w = e.clientX;
+    if (w > 320) setWidth(w);
+  };
 
   return (
     <>
       <ControlPanel />
-      <div className="flex h-full">
+      <div
+        className={`flex h-full`}
+        onMouseUp={() => setResize(false)}
+        onMouseMove={dragHandler}
+      >
         <DndProvider backend={HTML5Backend}>
           <EditorPanel
             tables={tables}
@@ -29,6 +40,7 @@ export default function Editor(props) {
             setAreas={setAreas}
             resize={resize}
             setResize={setResize}
+            width={width}
           />
           <Canvas
             tables={tables}
@@ -39,8 +51,6 @@ export default function Editor(props) {
             setRelationships={setRelationships}
             areas={areas}
             setAreas={setAreas}
-            resize={resize}
-            setResize={setResize}
           />
         </DndProvider>
         <Sidebar />