Move viewport state into openscad controller

web/src/components/IdeContainer/IdeContainer.js

@@ -7,9 +7,9 @@ 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 = () => {
@@ -21,26 +21,38 @@ const IdeContainer = () => {
   function handleViewerSizeUpdate() {
     if (viewerDOM !== null && viewerDOM.current) {
       const { width, height } = viewerDOM.current.getBoundingClientRect()
-      console.log({width, height})
+      dispatch({
-      dispatch({ type: 'setViewerSize', payload: { message: { width, height } }})
+        type: 'render',
+        payload: {
+          code: state.code,
+          viewerSize: { width, height },
+        },
+      })
     }
   }
 
-  return (<div id='cadhub-ide' className='h-screen'>
+  return (
-    <Mosaic
+    <div id="cadhub-ide" className="h-screen">
-      renderTile={ (id, path) => (
+      <Mosaic
-        <MosaicWindow path={path} title={id} className={id.toLowerCase()}>
+        renderTile={(id, path) => (
-          {(id === 'Viewer')
+          <MosaicWindow path={path} title={id} className={id.toLowerCase()}>
-            ? <div id='view-wrapper'className='h-full' ref={viewerDOM}>{ ELEMENT_MAP[id] }</div>
+            {id === 'Viewer' ? (
-            : ELEMENT_MAP[id]
+              <div id="view-wrapper" className="h-full" ref={viewerDOM}>
-          }
+                {ELEMENT_MAP[id]}
-        </MosaicWindow>
+              </div>
-      )}
+            ) : (
-      value={state.layout}
+              ELEMENT_MAP[id]
-      onChange={newLayout => dispatch({ type: 'setLayout', payload: { message: newLayout } })}
+            )}
-      onRelease={handleViewerSizeUpdate}
+          </MosaicWindow>
-    />
+        )}
-  </div>)
+        value={state.layout}
+        onChange={(newLayout) =>
+          dispatch({ type: 'setLayout', payload: { message: newLayout } })
+        }
+        onRelease={handleViewerSizeUpdate}
+      />
+    </div>
+  )
 }
 
-export default IdeContainer
+export default IdeContainer

web/src/components/IdeViewer/IdeViewer.js

@@ -137,54 +137,55 @@ const IdeViewer = () => {
   const indigo300 = '#A5B4FC'
   const indigo900 = '#312E81'
   return (
-    <div>
+    <div
-      <div className="relative" className="h-full">
+      className="relative h-full"
-        {state.isLoading && (
+      style={{ backgroundColor: openSCADDeepOceanThemeBackground }}
-          <div className="inset-0 absolute flex items-center justify-center">
+    >
-            <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
+      {state.isLoading && (
-          </div>
+        <div className="inset-0 absolute flex items-center justify-center">
-        )}
+          <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} style={{width: state.viewerSize.width+'px' || '500px', height: state.viewerSize.height+'px' || '500px'}} />
-          </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,35 +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 }) => {
-  console.log('from render', settings)
+  const size = settings.viewerSize
-  const body = JSON.stringify({
+    ? {
-    settings: {
+        x: Math.round(settings.viewerSize?.width),
-      size: {
+        y: Math.round(settings.viewerSize?.height),
-        x: settings.viewerSize?.width,
+      }
-        y: settings.viewerSize?.height,
+    : lastViewPortSize
-      },
+  const camera = settings.camera || lastCameraSettings
-      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',
@@ -46,7 +46,7 @@ export const render = async ({ code, settings }) => {
         "'main.scad'"
       )
       return {
-        isError: true,
+        status: 'error',
         message: {
           type: 'error',
           message: cleanedErrorMessage,
@@ -55,6 +55,7 @@ export const render = async ({ code, settings }) => {
     }
     const data = await response.blob()
     return {
+      status: 'healthy',
       objectData: {
         type: 'png',
         data,
@@ -70,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

@@ -71,11 +71,6 @@ export const useIdeState = () => {
           ...state,
           layout: payload.message,
         }
-      case 'setViewerSize':
-        return {
-          ...state,
-          viewerSize: payload.message,
-        }
       case 'setLoading':
         return {
           ...state,
@@ -95,11 +90,12 @@ export const useIdeState = () => {
               code: payload.code,
               settings: {
                 camera: payload.camera,
-                viewerSize: state.viewerSize,
+                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 },