From 785025fca8c9eeb40f56a80560091600e2aeeb58 Mon Sep 17 00:00:00 2001
From: Frank Noirot <frankjohnson1993@gmail.com>
Date: Sat, 13 Mar 2021 20:37:02 -0500
Subject: [PATCH 1/2] initial commit with full-size image, but broken OpenSCAD
 image source size.

---
 .../components/IdeContainer/IdeContainer.js   | 21 ++++++++++++++++---
 web/src/components/IdeViewer/IdeViewer.js     | 18 +++++++---------
 .../helpers/cadPackages/openScadController.js |  5 +++--
 web/src/helpers/hooks/useIdeState.js          | 12 +++++++++--
 4 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/web/src/components/IdeContainer/IdeContainer.js b/web/src/components/IdeContainer/IdeContainer.js
index 7a8a45d..1f6a79c 100644
--- a/web/src/components/IdeContainer/IdeContainer.js
+++ b/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'
@@ -14,16 +14,31 @@ const ELEMENT_MAP = {
 
 const IdeContainer = () => {
   const { state, dispatch } = useContext(IdeContext)
+  const viewerDOM = useRef(null)
+
+  useEffect(handleViewerSizeUpdate, [viewerDOM])
+
+  function handleViewerSizeUpdate() {
+    if (viewerDOM !== null && viewerDOM.current) {
+      const { width, height } = viewerDOM.current.getBoundingClientRect()
+      console.log({width, height})
+      dispatch({ type: 'setViewerSize', payload: { message: { width, height } }})
+    }
+  }
 
   return (<div id='cadhub-ide' className='h-screen'>
     <Mosaic
       renderTile={ (id, path) => (
         <MosaicWindow path={path} title={id} className={id.toLowerCase()}>
-          { ELEMENT_MAP[id] }
+          {(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: 'updateLayout', payload: { message: newLayout } })}
+      onChange={newLayout => dispatch({ type: 'setLayout', payload: { message: newLayout } })}
+      onRelease={handleViewerSizeUpdate}
     />
   </div>)
 }
diff --git a/web/src/components/IdeViewer/IdeViewer.js b/web/src/components/IdeViewer/IdeViewer.js
index d8a27e5..5023055 100644
--- a/web/src/components/IdeViewer/IdeViewer.js
+++ b/web/src/components/IdeViewer/IdeViewer.js
@@ -137,22 +137,20 @@ const IdeViewer = () => {
   const indigo300 = '#A5B4FC'
   const indigo900 = '#312E81'
   return (
-    <div className="p-8 border-2 m-2">
-      <div
-        className="relative"
-        style={{
-          height: '500px',
-          width: '500px',
-          backgroundColor: openSCADDeepOceanThemeBackground,
-        }}
-      >
+    <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} className="" />
+            <img src={image} style={{width: state.viewerSize.width+'px' || '500px', height: state.viewerSize.height+'px' || '500px'}} />
           </div>
         )}
         {state.isLoading && (
diff --git a/web/src/helpers/cadPackages/openScadController.js b/web/src/helpers/cadPackages/openScadController.js
index 630bf82..a7e95fb 100644
--- a/web/src/helpers/cadPackages/openScadController.js
+++ b/web/src/helpers/cadPackages/openScadController.js
@@ -17,11 +17,12 @@ let lastCameraSettings = {
 }
 
 export const render = async ({ code, settings }) => {
+  console.log('from render', settings)
   const body = JSON.stringify({
     settings: {
       size: {
-        x: 500,
-        y: 500,
+        x: settings.viewerSize?.width,
+        y: settings.viewerSize?.height,
       },
       camera: settings.camera || lastCameraSettings,
     },
diff --git a/web/src/helpers/hooks/useIdeState.js b/web/src/helpers/hooks/useIdeState.js
index 15723f1..bb81d72 100644
--- a/web/src/helpers/hooks/useIdeState.js
+++ b/web/src/helpers/hooks/useIdeState.js
@@ -66,11 +66,16 @@ export const useIdeState = () => {
           ...state,
           ideType: payload.message,
         }
-      case 'updateLayout':
+      case 'setLayout':
         return {
           ...state,
           layout: payload.message,
         }
+      case 'setViewerSize':
+        return {
+          ...state,
+          viewerSize: payload.message,
+        }
       case 'setLoading':
         return {
           ...state,
@@ -88,7 +93,10 @@ export const useIdeState = () => {
           cadPackages[state.ideType]
             .render({
               code: payload.code,
-              settings: { camera: payload.camera },
+              settings: {
+                camera: payload.camera,
+                viewerSize: state.viewerSize,
+              },
             })
             .then(({ objectData, message, isError }) => {
               if (isError) {
-- 
2.39.5


From b6867fc8a81f01878c1cd0fd0cfde9aa6e41db36 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Sun, 14 Mar 2021 17:41:29 +1100
Subject: [PATCH 2/2] Move viewport state into openscad controller

---
 .../components/IdeContainer/IdeContainer.js   | 54 +++++++----
 web/src/components/IdeViewer/IdeViewer.js     | 95 ++++++++++---------
 .../helpers/cadPackages/openScadController.js | 53 ++++++-----
 web/src/helpers/hooks/useIdeState.js          | 12 +--
 4 files changed, 112 insertions(+), 102 deletions(-)

diff --git a/web/src/components/IdeContainer/IdeContainer.js b/web/src/components/IdeContainer/IdeContainer.js
index 1f6a79c..08127d6 100644
--- 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
\ No newline at end of file
+export default IdeContainer
diff --git a/web/src/components/IdeViewer/IdeViewer.js b/web/src/components/IdeViewer/IdeViewer.js
index 5023055..c2248ee 100644
--- 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>
   )
diff --git a/web/src/helpers/cadPackages/openScadController.js b/web/src/helpers/cadPackages/openScadController.js
index a7e95fb..be52e94 100644
--- 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',
diff --git a/web/src/helpers/hooks/useIdeState.js b/web/src/helpers/hooks/useIdeState.js
index bb81d72..aba8d30 100644
--- 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 },
-- 
2.39.5