initial commit with full-size image, but broken OpenSCAD image source size.

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>)
 }

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>
-      <div
+      <div className="relative" className="h-full">
-        className="relative"
+        {state.isLoading && (
-        style={{
+          <div className="inset-0 absolute flex items-center justify-center">
-          height: '500px',
+            <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
-          width: '500px',
+          </div>
-          backgroundColor: openSCADDeepOceanThemeBackground,
+        )}
-        }}
-      >
         {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 && (

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,
+        x: settings.viewerSize?.width,
-        y: 500,
+        y: settings.viewerSize?.height,
       },
       camera: settings.camera || lastCameraSettings,
     },

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) {