panel resize

libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx

@@ -12,27 +12,26 @@ interface IRemixDragBarUi {
 const DragBar = (props: IRemixDragBarUi) => {
   const [dragState, setDragState] = useState<boolean>(false)
   const [dragBarPosY, setDragBarPosY] = useState<number>(0)
-  const [offset, setOffSet] = useState<number>(0)
   const nodeRef = React.useRef(null) // fix for strictmode
 
-  useEffect(() => {
-    // arbitrary time out to wait the the UI to be completely done
-    setTimeout(() => {
-      console.log(window.innerHeight)
-      console.log(props.refObject.current.offsetTop)
-      setOffSet(props.refObject.current.offsetTop)
-      setDragBarPosY(props.refObject.current.offsetTop)
-    }, 1000)
-  }, [props.refObject])
-
-  useEffect(() => {
-    // setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetHeight))
-  }, [props.hidden, offset])
-
   function stopDrag (e: MouseEvent, data: any) {
+    const h = window.innerHeight - data.y
+    props.refObject.current.setAttribute('style', `height: ${h}px;`)
+    setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight)
     setDragState(false)
   }
 
+  useEffect(() => {
+    function handleResize () {
+      setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight)
+    }
+    window.addEventListener('resize', handleResize)
+    // TODO: not a good way to wait on the ref doms element to be rendered of course
+    setTimeout(() =>
+      handleResize(), 2000)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
   function startDrag () {
     setDragState(true)
   }

libs/remix-ui/panel/src/lib/main/main-panel.tsx

@@ -26,9 +26,9 @@ const RemixUIMainPanel = () => {
     let mainPanelHeight = containerHeight - delta
     mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight - 35
     // self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
-    editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
-    terminalRef.current?.setAttribute('style', `height: ${delta}px`)
-    mainPanelRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
+    // editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
+    terminalRef.current?.setAttribute('style', 'height: 100px;')
+    // mainPanelRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
     // appContext.panels.editor.resize((document.querySelector('#editorWrap') || {}).checked)
     appContext.layout.panels.terminal.plugin.scroll2bottom()
   }

libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx

@@ -9,7 +9,6 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
   const localRef = useRef<HTMLDivElement>(null)
   const [view, setView] = useState<JSX.Element | HTMLDivElement>()
   useEffect(() => {
-    console.log(panelRef)
     const ref:any = panelRef || localRef
     if (ref.current) {
       if (props.pluginRecord.view) {

libs/remix-ui/panel/src/lib/plugins/panel.css

@@ -93,4 +93,13 @@ iframe {
     width: 100%;
     border: 0;
     display: block;
-}
+}
+
+.mainPanel-wrap, .editor-wrap {
+    flex: 1;
+    min-height: 100px;
+}
+
+.terminal-wrap {
+    min-height: 35px;
+}