Move viewport state into openscad controller

2021-03-14 17:41:29 +11:00
parent 785025fca8
commit b6867fc8a8
4 changed files with 112 additions and 102 deletions
--- a/web/src/components/IdeContainer/IdeContainer.js
+++ b/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/>,
-  Viewer: <IdeViewer/>,
-  Console: <IdeConsole/>,
+  Editor: <IdeEditor />,
+  Viewer: <IdeViewer />,
+  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({ type: 'setViewerSize', payload: { message: { width, height } }})
+      dispatch({
+        type: 'render',
+        payload: {
+          code: state.code,
+          viewerSize: { width, height },
+        },
+      })
    }
  }

-  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>)
+  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
+export default IdeContainer
--- a/web/src/components/IdeViewer/IdeViewer.js
+++ b/web/src/components/IdeViewer/IdeViewer.js
@@ -137,54 +137,55 @@ const IdeViewer = () => {
  const indigo300 = '#A5B4FC'
  const indigo900 = '#312E81'
  return (
-    <div>
-      <div className="relative" className="h-full">
-        {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>
-        )}
-        {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
+      className="relative h-full"
+      style={{ backgroundColor: openSCADDeepOceanThemeBackground }}
+    >
+      {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>
+      )}
+      {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>
  )
--- a/web/src/helpers/cadPackages/openScadController.js
+++ b/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 = {
-  position: {
-    x: 200,
-    y: -20,
-    z: 140,
-  },
-  rotation: {
-    x: 55,
-    y: 3.8,
-    z: 84,
-  },
-  dist: 245,
-}
+let lastViewPortSize = 'INIT'
+let lastCameraSettings = 'INIT'

 export const render = async ({ code, settings }) => {
-  console.log('from render', settings)
-  const body = JSON.stringify({
-    settings: {
-      size: {
-        x: settings.viewerSize?.width,
-        y: settings.viewerSize?.height,
-      },
-      camera: settings.camera || lastCameraSettings,
-    },
-    file: code,
-  })
+  const size = settings.viewerSize
+    ? {
+        x: Math.round(settings.viewerSize?.width),
+        y: Math.round(settings.viewerSize?.height),
+      }
+    : lastViewPortSize
+  const camera = settings.camera || lastCameraSettings
  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',
--- a/web/src/helpers/hooks/useIdeState.js
+++ b/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 }) => {
-              if (isError) {
+            .then(({ objectData, message, status }) => {
+              if (status === 'insufficient-preview-info') return
+              if (status === 'error') {
                dispatch({
                  type: 'errorRender',
                  payload: { message },