265 Send logs, put temp code in local storage and let panels handle scrolling #266
@@ -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.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)
|
||||
}
|
||||
res.status(data.statusCode)
|
||||
res.send(data.body)
|
||||
})
|
||||
|
||||
app.listen(port, () => {
|
||||
|
||||
@@ -45,11 +45,11 @@ const render = async (req, _context, callback) => {
|
||||
console.log(image, 'encoded image')
|
||||
const response = {
|
||||
statusCode: 200,
|
||||
headers: {
|
||||
'content-type': 'image/png',
|
||||
},
|
||||
body: image,
|
||||
isBase64Encoded: true,
|
||||
body: JSON.stringify({
|
||||
imageBase64: image,
|
||||
result,
|
||||
tempFile,
|
||||
}),
|
||||
}
|
||||
|
|
||||
callback(null, response)
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
|
"stdout:" was in the logs and was very silly. "stdout:" was in the logs and was very silly.
|
||||
setTimeout(() => {
|
||||
reject('timeout')
|
||||
|
||||
@@ -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' : '')}
|
||||
|
div doesn't respect now lines it seems, making logs hard to read. div doesn't respect now lines it seems, making logs hard to read.
|
||||
key={message + index}
|
||||
>
|
||||
-> {message}
|
||||
</div>
|
||||
{message}
|
||||
</pre>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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()}>
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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')}
|
||||
|
||||
@@ -124,8 +124,7 @@ const IdeViewer = () => {
|
||||
useEffect(() => {
|
||||
setImage(
|
||||
state.objectData?.type === 'png' &&
|
||||
state.objectData?.data &&
|
||||
window.URL.createObjectURL(state.objectData?.data)
|
||||
'data:image/png;base64,' + state.objectData?.data
|
||||
)
|
||||
setIsDragging(false)
|
||||
|
The base64 image can just about be thrown directly into The base64 image can just about be thrown directly into `src`, makes this a little simpler.
|
||||
}, [state.objectData])
|
||||
|
||||
@@ -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}`
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -5,27 +5,31 @@ import OutBound from 'src/components/OutBound'
|
||||
|
||||
const DevIdePage = () => {
|
||||
return (
|
||||
<MainLayout>
|
||||
<Seo
|
||||
title="new ide in development"
|
||||
description="new ide in development"
|
||||
lang="en-US"
|
||||
/>
|
||||
<div className="py-4 bg-pink-200">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
Woah, woah. You shouldn't be here! We're still working on this. Since
|
||||
you've seen it now, have a look what{' '}
|
||||
<OutBound
|
||||
className="text-pink-700"
|
||||
to="https://github.com/Irev-Dev/cadhub/discussions/212"
|
||||
>
|
||||
we've got planned
|
||||
</OutBound>
|
||||
.
|
||||
<div className="h-screen flex flex-col">
|
||||
<MainLayout shouldRemoveFooterInIde>
|
||||
<Seo
|
||||
title="new ide in development"
|
||||
description="new ide in development"
|
||||
lang="en-US"
|
||||
/>
|
||||
<div className="py-4 bg-pink-200">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
Woah, woah. You shouldn't be here! We're still working on this.
|
||||
Since you've seen it now, have a look what{' '}
|
||||
<OutBound
|
||||
className="text-pink-700"
|
||||
to="https://github.com/Irev-Dev/cadhub/discussions/212"
|
||||
>
|
||||
we've got planned
|
||||
</OutBound>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
</MainLayout>
|
||||
<div className="flex-auto">
|
||||
<IdeToolbar />
|
||||
</div>
|
||||
<IdeToolbar />
|
||||
</MainLayout>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user
Instead of sending down a binary type that's an image, I'm just using json with base64 image in the json, otherwise I can't really send down the log text