massive refactor toDrop cascadeStudio and add CadQuery + OpenSCAD

resolves #400

app/web/src/components/IdeContainer/IdeContainer.tsx

@@ -1,11 +1,11 @@
-import { useRef, useEffect, Suspense, lazy } from 'react'
+import { Suspense, lazy } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
-import { requestRender } from 'src/helpers/hooks/useIdeState'
 import IdeConsole from 'src/components/IdeConsole'
 import 'react-mosaic-component/react-mosaic-component.css'
 import EditorMenu from 'src/components/EditorMenu/EditorMenu'
-import PanelToolbar from 'src/components/PanelToolbar'
+import PanelToolbar from 'src/components/PanelToolbar/PanelToolbar'
+import { use3dViewerResize } from 'src/helpers/hooks/use3dViewerResize'
 
 const IdeEditor = lazy(() => import('src/components/IdeEditor/IdeEditor'))
 const IdeViewer = lazy(() => import('src/components/IdeViewer/IdeViewer'))
@@ -54,54 +54,15 @@ const TOOLBAR_MAP = {
   ),
   Console: (
     <div>
-      <PanelToolbar panelName="Console" />
+      <PanelToolbar panelName="Console" showTopGradient />
     </div>
   ),
 }
 
 const IdeContainer = () => {
+  const { viewerDomRef, handleViewerSizeUpdate } = use3dViewerResize()
+
   const { state, thunkDispatch } = useIdeContext()
-  const viewerDOM = useRef(null)
-  const debounceTimeoutId = useRef
-
-  useEffect(handleViewerSizeUpdate, [viewerDOM])
-
-  function handleViewerSizeUpdate() {
-    if (viewerDOM !== null && viewerDOM.current) {
-      const { width, height } = viewerDOM.current.getBoundingClientRect()
-      thunkDispatch({
-        type: 'updateViewerSize',
-        payload: { viewerSize: { width, height } },
-      })
-      thunkDispatch((dispatch, getState) => {
-        const state = getState()
-        if (['png', 'INIT'].includes(state.objectData?.type)) {
-          dispatch({ type: 'setLoading' })
-          requestRender({
-            state,
-            dispatch,
-            code: state.code,
-            viewerSize: { width, height },
-            camera: state.camera,
-          })
-        }
-      })
-    }
-  }
-
-  const debouncedViewerSizeUpdate = () => {
-    clearTimeout(debounceTimeoutId.current)
-    debounceTimeoutId.current = setTimeout(() => {
-      handleViewerSizeUpdate()
-    }, 1000)
-  }
-
-  useEffect(() => {
-    window.addEventListener('resize', debouncedViewerSizeUpdate)
-    return () => {
-      window.removeEventListener('resize', debouncedViewerSizeUpdate)
-    }
-  }, [])
 
   return (
     <div
@@ -117,7 +78,7 @@ const IdeContainer = () => {
               className={`${id.toLowerCase()} ${id.toLowerCase()}-tile`}
             >
               {id === 'Viewer' ? (
-                <div id="view-wrapper" className="h-full" ref={viewerDOM}>
+                <div id="view-wrapper" className="h-full" ref={viewerDomRef}>
                   {ELEMENT_MAP[id]}
                 </div>
               ) : (