Merge pull request #251 from Irev-Dev/kurt/239

Adjust render image size with mosiac panel change

web/src/components/IdeContainer/IdeContainer.js

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useRef, useEffect } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 import IdeEditor from 'src/components/IdeEditor'
@@ -7,25 +7,52 @@ import IdeConsole from 'src/components/IdeConsole'
 import 'react-mosaic-component/react-mosaic-component.css'
 
 const ELEMENT_MAP = {
-  Editor: <IdeEditor/>,
+  Editor: <IdeEditor />,
-  Viewer: <IdeViewer/>,
+  Viewer: <IdeViewer />,
-  Console: <IdeConsole/>,
+  Console: <IdeConsole />,
 }
 
 const IdeContainer = () => {
   const { state, dispatch } = useContext(IdeContext)
+  const viewerDOM = useRef(null)
 
-  return (<div id='cadhub-ide' className='h-screen'>
+  useEffect(handleViewerSizeUpdate, [viewerDOM])
-    <Mosaic
+
-      renderTile={ (id, path) => (
+  function handleViewerSizeUpdate() {
-        <MosaicWindow path={path} title={id} className={id.toLowerCase()}>
+    if (viewerDOM !== null && viewerDOM.current) {
-          { ELEMENT_MAP[id] }
+      const { width, height } = viewerDOM.current.getBoundingClientRect()
-        </MosaicWindow>
+      dispatch({
-      )}
+        type: 'render',
-      value={state.layout}
+        payload: {
-      onChange={newLayout => dispatch({ type: 'updateLayout', payload: { message: newLayout } })}
+          code: state.code,
-    />
+          viewerSize: { width, height },
-  </div>)
+        },
+      })
+    }
+  }
+
+  return (
+    <div id="cadhub-ide" className="h-screen">
+      <Mosaic
+        renderTile={(id, path) => (
+          <MosaicWindow path={path} title={id} className={id.toLowerCase()}>
+            {id === 'Viewer' ? (
+              <div id="view-wrapper" className="h-full" ref={viewerDOM}>
+                {ELEMENT_MAP[id]}
+              </div>
+            ) : (
+              ELEMENT_MAP[id]
+            )}
+          </MosaicWindow>
+        )}
+        value={state.layout}
+        onChange={(newLayout) =>
+          dispatch({ type: 'setLayout', payload: { message: newLayout } })
+        }
+        onRelease={handleViewerSizeUpdate}
+      />
+    </div>
+  )
 }
 
 export default IdeContainer

web/src/components/IdeViewer/IdeViewer.js

@@ -137,56 +137,55 @@ const IdeViewer = () => {
   const indigo300 = '#A5B4FC'
   const indigo900 = '#312E81'
   return (
-    <div className="p-8 border-2 m-2">
+    <div
-      <div
+      className="relative h-full"
-        className="relative"
+      style={{ backgroundColor: openSCADDeepOceanThemeBackground }}
-        style={{
+    >
-          height: '500px',
+      {state.isLoading && (
-          width: '500px',
+        <div className="inset-0 absolute flex items-center justify-center">
-          backgroundColor: openSCADDeepOceanThemeBackground,
+          <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
-        }}
-      >
-        {image && (
-          <div
-            className={`absolute inset-0 transition-opacity duration-500 ${
-              isDragging ? 'opacity-25' : 'opacity-100'
-            }`}
-          >
-            <img src={image} className="" />
-          </div>
-        )}
-        {state.isLoading && (
-          <div className="inset-0 absolute flex items-center justify-center">
-            <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
-          </div>
-        )}
-        <div
-          className={`opacity-0 absolute inset-0 transition-opacity duration-500 ${
-            isDragging ? 'opacity-100' : 'hover:opacity-50'
-          }`}
-          onMouseDown={() => setIsDragging(true)}
-        >
-          <Canvas>
-            <Controls
-              onDragStart={() => setIsDragging(true)}
-              onCameraChange={(camera) => {
-                dispatch({
-                  type: 'render',
-                  payload: {
-                    code: currentCode,
-                    camera,
-                  },
-                })
-              }}
-            />
-            <ambientLight />
-            <pointLight position={[15, 5, 10]} />
-            <Sphere position={[0, 0, 0]} color={pink400} />
-            <Box position={[0, 50, 0]} size={[1, 100, 1]} color={indigo900} />
-            <Box position={[0, 0, -50]} size={[1, 1, 100]} color={indigo300} />
-            <Box position={[50, 0, 0]} size={[100, 1, 1]} color={pink400} />
-          </Canvas>
         </div>
+      )}
+      {image && (
+        <div
+          className={`absolute inset-0 transition-opacity duration-500 ${
+            isDragging ? 'opacity-25' : 'opacity-100'
+          }`}
+        >
+          <img src={image} className="h-full w-full" />
+        </div>
+      )}
+      {state.isLoading && (
+        <div className="inset-0 absolute flex items-center justify-center">
+          <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
+        </div>
+      )}
+      <div
+        className={`opacity-0 absolute inset-0 transition-opacity duration-500 ${
+          isDragging ? 'opacity-100' : 'hover:opacity-50'
+        }`}
+        onMouseDown={() => setIsDragging(true)}
+      >
+        <Canvas>
+          <Controls
+            onDragStart={() => setIsDragging(true)}
+            onCameraChange={(camera) =>
+              dispatch({
+                type: 'render',
+                payload: {
+                  code: currentCode,
+                  camera,
+                },
+              })
+            }
+          />
+          <ambientLight />
+          <pointLight position={[15, 5, 10]} />
+          <Sphere position={[0, 0, 0]} color={pink400} />
+          <Box position={[0, 50, 0]} size={[1, 100, 1]} color={indigo900} />
+          <Box position={[0, 0, -50]} size={[1, 1, 100]} color={indigo300} />
+          <Box position={[50, 0, 0]} size={[100, 1, 1]} color={pink400} />
+        </Canvas>
       </div>
     </div>
   )

web/src/helpers/cadPackages/openScadController.js

@@ -2,34 +2,35 @@ let openScadBaseURL =
   process.env.OPENSCAD_BASE_URL ||
   'https://x2wvhihk56.execute-api.us-east-1.amazonaws.com/dev'
 
-let lastCameraSettings = {
+let lastViewPortSize = 'INIT'
-  position: {
+let lastCameraSettings = 'INIT'
-    x: 200,
-    y: -20,
-    z: 140,
-  },
-  rotation: {
-    x: 55,
-    y: 3.8,
-    z: 84,
-  },
-  dist: 245,
-}
 
 export const render = async ({ code, settings }) => {
-  const body = JSON.stringify({
+  const size = settings.viewerSize
-    settings: {
+    ? {
-      size: {
+        x: Math.round(settings.viewerSize?.width),
-        x: 500,
+        y: Math.round(settings.viewerSize?.height),
-        y: 500,
+      }
-      },
+    : lastViewPortSize
-      camera: settings.camera || lastCameraSettings,
+  const camera = settings.camera || lastCameraSettings
-    },
-    file: code,
-  })
   if (settings.camera) {
     lastCameraSettings = settings.camera
   }
+  if (settings.viewerSize) {
+    lastViewPortSize = size
+  }
+  if ([camera, size].includes('INIT')) {
+    return {
+      status: 'insufficient-preview-info',
+    }
+  }
+  const body = JSON.stringify({
+    settings: {
+      size,
+      camera,
+    },
+    file: code,
+  })
   try {
     const response = await fetch(openScadBaseURL + '/render', {
       method: 'POST',
@@ -45,7 +46,7 @@ export const render = async ({ code, settings }) => {
         "'main.scad'"
       )
       return {
-        isError: true,
+        status: 'error',
         message: {
           type: 'error',
           message: cleanedErrorMessage,
@@ -54,6 +55,7 @@ export const render = async ({ code, settings }) => {
     }
     const data = await response.blob()
     return {
+      status: 'healthy',
       objectData: {
         type: 'png',
         data,
@@ -69,7 +71,7 @@ export const render = async ({ code, settings }) => {
     // and in future I think we need timeouts differently as they maybe from a user trying to render something too complex
     // or something with minkowski in it :/ either way something like "render timed out, try again or here are tips to reduce part complexity" with a link talking about $fn and minkowski etc
     return {
-      isError: true,
+      status: 'error',
       message: {
         type: 'error',
         message: 'network issue',

web/src/helpers/hooks/useIdeState.js

@@ -66,7 +66,7 @@ export const useIdeState = () => {
           ...state,
           ideType: payload.message,
         }
-      case 'updateLayout':
+      case 'setLayout':
         return {
           ...state,
           layout: payload.message,
@@ -88,10 +88,14 @@ export const useIdeState = () => {
           cadPackages[state.ideType]
             .render({
               code: payload.code,
-              settings: { camera: payload.camera },
+              settings: {
+                camera: payload.camera,
+                viewerSize: payload.viewerSize,
+              },
             })
-            .then(({ objectData, message, isError }) => {
+            .then(({ objectData, message, status }) => {
-              if (isError) {
+              if (status === 'insufficient-preview-info') return
+              if (status === 'error') {
                 dispatch({
                   type: 'errorRender',
                   payload: { message },