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

Merged
Irev-Dev merged 3 commits from kurt/265 into main 2021-03-21 05:34:02 +01:00
12 changed files with 57 additions and 54 deletions

View File

@@ -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, () => {

View File

@@ -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,
}),
}
Irev-Dev commented 2021-03-21 05:33:24 +01:00 (Migrated from github.com)
Review

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

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
callback(null, response)
}

View File

@@ -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)
})
Irev-Dev commented 2021-03-21 05:41:56 +01:00 (Migrated from github.com)
Review

"stdout:" was in the logs and was very silly.

"stdout:" was in the logs and was very silly.
setTimeout(() => {
reject('timeout')

View File

@@ -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' : '')}
Irev-Dev commented 2021-03-21 05:41:33 +01:00 (Migrated from github.com)
Review

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>

View File

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

View File

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

View File

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

View File

@@ -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)
Irev-Dev commented 2021-03-21 05:49:56 +01:00 (Migrated from github.com)
Review

The base64 image can just about be thrown directly into src, makes this a little simpler.

The base64 image can just about be thrown directly into `src`, makes this a little simpler.
}, [state.objectData])

View File

@@ -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}`
}

View File

@@ -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',

View File

@@ -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">

View File

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