fix: renderer resizing (#577)

decentraland · May 11, 2023 · f1e3981 · f1e3981
1 parent 65d68ce
commit f1e3981
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/packages/@dcl/inspector/src/components/Resizable/Resizable.css b/packages/@dcl/inspector/src/components/Resizable/Resizable.css
@@ -1,10 +1,10 @@
 .Resizable {
   display: flex;
+  width: 100%;
 }
 
 .Resizable .resize-handle {
-  position: absolute;
-  width: 10px;
+  width: 3px;
   height: 100%;
   cursor: col-resize;
 }

diff --git a/packages/@dcl/inspector/src/components/Resizable/Resizable.tsx b/packages/@dcl/inspector/src/components/Resizable/Resizable.tsx
@@ -36,11 +36,15 @@ function Resizable(props: React.PropsWithChildren<PropTypes>) {
   }, [value])
 
   const handleDrag = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    const clientValue = event[eventClientValue]
-    const diff = getParentOffset() - clientValue
-    if (!dragging || clientValue <= minValue || clientValue > (props.max || Infinity)) return
-    setValue([clientValue, diff])
-    if (props.onChange) props.onChange([clientValue, diff])
+    if (!dragging) return
+    resize(event[eventClientValue])
+  }
+
+  const resize = (value: number) => {
+    const diff = getParentOffset() - value
+    if (value <= minValue || value > (props.max || Infinity)) return
+    setValue([value, diff])
+    if (props.onChange) props.onChange([value, diff])
   }
 
   const handleMouseUp = useCallback(() => setDragging(false), [])
@@ -52,10 +56,15 @@ function Resizable(props: React.PropsWithChildren<PropTypes>) {
     }
   }, [])
 
+  const styles = {
+    [css.childs]: value[0] ?? 'auto',
+    [`min-${css.childs}`]: minValue
+  }
+
   return (
     <div className={`Resizable ${props.type}`} onMouseMove={handleDrag}>
-      <div ref={ref} style={{ [css.childs]: value[0] ?? 'auto' }}>{children[0]}</div>
-      <div className="resize-handle" style={{ [css.handle]: value[0] ?? 0 }} onMouseDown={() => setDragging(true)} />
+      <div ref={ref} style={styles}>{children[0]}</div>
+      <div className="resize-handle" onMouseDown={() => setDragging(true)} />
       <div style={{ [css.childs]: value[1] ?? 'auto' }}>{children[1]}</div>
     </div>
   )