Merge pull request #266 from Irev-Dev/kurt/265

265 Send logs, put temp code in local storage and let panels handle scrolling

api/src/docker/aws-emulator.js

@@ -14,19 +14,8 @@ app.post('/render', async (req, res) => {
   const { data } = await axios.post(invocationURL(5052), {
     body: Buffer.from(JSON.stringify(req.body)).toString('base64'),
   })
-  if (data.statusCode !== 200) {
+  res.status(data.statusCode)
-    res.status(data.statusCode)
+  res.send(data.body)
-    res.send(res.body)
-  } else {
-    const fileContents = Buffer.from(data.body, 'base64')
-
-    const readStream = new stream.PassThrough()
-    readStream.end(fileContents)
-
-    res.set('Content-disposition', 'attachment; filename=' + 'output')
-    res.set('Content-Type', 'image/png')
-    readStream.pipe(res)
-  }
 })
 
 app.listen(port, () => {

api/src/docker/openscad/openscad.js

@@ -45,11 +45,11 @@ const render = async (req, _context, callback) => {
     console.log(image, 'encoded image')
     const response = {
       statusCode: 200,
-      headers: {
+      body: JSON.stringify({
-        'content-type': 'image/png',
+        imageBase64: image,
-      },
+        result,
-      body: image,
+        tempFile,
-      isBase64Encoded: true,
+      }),
     }
     callback(null, response)
   }

api/src/docker/openscad/runScad.js

@@ -64,11 +64,11 @@ async function runCommand(command, timeout = 5000) {
       }
       if (stderr) {
         console.log(`stderr: ${stderr}`)
-        resolve(`stderr: ${stderr}`)
+        resolve(stderr)
         return
       }
       console.log(`stdout: ${stdout}`)
-      resolve(`stdout: ${stdout}`)
+      resolve(stdout)
     })
     setTimeout(() => {
       reject('timeout')

web/src/components/IdeConsole/IdeConsole.js

@@ -7,12 +7,12 @@ const IdeConsole = () => {
     <div className="p-8 border-2 m-2 overflow-y-auto">
       <div>
         {state.consoleMessages?.map(({ type, message }, index) => (
-          <div
+          <pre
             className={'font-mono ' + (type === 'error' ? 'text-red-500' : '')}
             key={message + index}
           >
-            -> {message}
+            {message}
-          </div>
+          </pre>
         ))}
       </div>
     </div>

web/src/components/IdeContainer/IdeContainer.js

@@ -32,7 +32,7 @@ const IdeContainer = () => {
   }
 
   return (
-    <div id="cadhub-ide" className="h-screen">
+    <div id="cadhub-ide" className="flex-auto h-full">
       <Mosaic
         renderTile={(id, path) => (
           <MosaicWindow path={path} title={id} className={id.toLowerCase()}>

web/src/components/IdeEditor/IdeEditor.js

@@ -1,6 +1,7 @@
 import { useContext, useEffect, Suspense, lazy } from 'react'
 import { isBrowser } from '@redwoodjs/prerender/browserUtils'
 import { IdeContext } from 'src/components/IdeToolbarNew'
+import { codeStorageKey } from 'src/helpers/hooks/useIdeState'
 const Editor = lazy(() => import('@monaco-editor/react'))
 
 const IdeEditor = () => {
@@ -34,6 +35,7 @@ const IdeEditor = () => {
     if (key === 's' && (ctrlKey || metaKey)) {
       event.preventDefault()
       dispatch({ type: 'render', payload: { code: state.code } })
+      localStorage.setItem(codeStorageKey, state.code)
     }
   }
 

web/src/components/IdeToolbarNew/IdeToolbarNew.js

@@ -1,7 +1,7 @@
 import { createContext } from 'react'
 import IdeContainer from 'src/components/IdeContainer'
 import { isBrowser } from '@redwoodjs/prerender/browserUtils'
-import { useIdeState } from 'src/helpers/hooks/useIdeState'
+import { useIdeState, codeStorageKey } from 'src/helpers/hooks/useIdeState'
 import { copyTextToClipboard } from 'src/helpers/clipboard'
 
 export const IdeContext = createContext()
@@ -12,6 +12,7 @@ const IdeToolbarNew = () => {
   }
   function handleRender() {
     dispatch({ type: 'render', payload: { code: state.code } })
+    localStorage.setItem(codeStorageKey, state.code)
   }
   function handleMakeLink() {
     if (isBrowser) {
@@ -23,7 +24,7 @@ const IdeToolbarNew = () => {
 
   return (
     <IdeContext.Provider value={{ state, dispatch }}>
-      <div className="p-8 border-2">
+      <div className="h-full flex flex-col">
         <nav className="flex">
           {/* <button
             onClick={() => setIdeType('openCascade')}

web/src/components/IdeViewer/IdeViewer.js

@@ -124,8 +124,7 @@ const IdeViewer = () => {
   useEffect(() => {
     setImage(
       state.objectData?.type === 'png' &&
-        state.objectData?.data &&
+        'data:image/png;base64,' + state.objectData?.data
-        window.URL.createObjectURL(state.objectData?.data)
     )
     setIsDragging(false)
   }, [state.objectData])

web/src/helpers/cadPackages/openScadController.js

@@ -50,20 +50,20 @@ export const render = async ({ code, settings }) => {
         status: 'error',
         message: {
           type: 'error',
-          message: cleanedErrorMessage,
+          message: addDateToLog(cleanedErrorMessage),
         },
       }
     }
-    const data = await response.blob()
+    const data = await response.json()
     return {
       status: 'healthy',
       objectData: {
         type: 'png',
-        data,
+        data: data.imageBase64,
       },
       message: {
         type: 'message',
-        message: 'successful render',
+        message: addDateToLog(data.result),
       },
     }
   } catch (e) {
@@ -75,7 +75,7 @@ export const render = async ({ code, settings }) => {
       status: 'error',
       message: {
         type: 'error',
-        message: 'network issue',
+        message: addDateToLog('network issue'),
       },
     }
   }
@@ -87,3 +87,8 @@ const openScad = {
 }
 
 export default openScad
+
+function addDateToLog(message) {
+  return `-> ${new Date().toLocaleString()}
+${message}`
+}

web/src/helpers/hooks/useIdeState.js

@@ -16,11 +16,14 @@ module stick(basewid, angl){
     }
 }`
 
+export const codeStorageKey = 'Last-openscad-code'
+
 export const useIdeState = () => {
+  const code = localStorage.getItem(codeStorageKey) || donutInitCode
   const initialState = {
     ideType: 'openScad',
     consoleMessages: [{ type: 'message', message: 'Initialising OpenSCAD' }],
-    code: donutInitCode,
+    code,
     objectData: {
       type: 'stl',
       data: 'some binary',

web/src/layouts/MainLayout/MainLayout.js

@@ -95,7 +95,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
     }
   }, [hash, client]) // complaining about not having addMessage, however adding it puts useEffect into a loop
   return (
-    <div className="h-full">
+    <div>
       <header id="cadhub-main-header">
         <nav className="flex justify-between h-20 px-12 bg-gradient-to-r from-gray-900 to-indigo-900">
           <ul className="flex items-center">

web/src/pages/DevIdePage/DevIdePage.js

@@ -5,27 +5,31 @@ import OutBound from 'src/components/OutBound'
 
 const DevIdePage = () => {
   return (
-    <MainLayout>
+    <div className="h-screen flex flex-col">
-      <Seo
+      <MainLayout shouldRemoveFooterInIde>
-        title="new ide in development"
+        <Seo
-        description="new ide in development"
+          title="new ide in development"
-        lang="en-US"
+          description="new ide in development"
-      />
+          lang="en-US"
-      <div className="py-4 bg-pink-200">
+        />
-        <div className="mx-auto max-w-6xl">
+        <div className="py-4 bg-pink-200">
-          Woah, woah. You shouldn't be here! We're still working on this. Since
+          <div className="mx-auto max-w-6xl">
-          you've seen it now, have a look what{' '}
+            Woah, woah. You shouldn't be here! We're still working on this.
-          <OutBound
+            Since you've seen it now, have a look what{' '}
-            className="text-pink-700"
+            <OutBound
-            to="https://github.com/Irev-Dev/cadhub/discussions/212"
+              className="text-pink-700"
-          >
+              to="https://github.com/Irev-Dev/cadhub/discussions/212"
-            we've got planned
+            >
-          </OutBound>
+              we've got planned
-          .
+            </OutBound>
+            .
+          </div>
         </div>
+      </MainLayout>
+      <div className="flex-auto">
+        <IdeToolbar />
       </div>
-      <IdeToolbar />
+    </div>
-    </MainLayout>
   )
 }