h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Completed initial CAD package guides, tweaked initial code import

Browse Source
This commit is contained in:
Frank Johnson
2021-09-18 23:16:43 -04:00
parent 2f006d3e3b
commit b27bcd2d35
17 changed files with 297 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/web/src/components/IdeEditor/IdeEditor.tsx
View File

@@ -1,10 +1,11 @@
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
import { makeCodeStoreKey, requestRender } from 'src/helpers/hooks/useIdeState'
import Editor, { useMonaco } from '@monaco-editor/react'
import { theme } from 'src/../config/tailwind.config'
import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
import EditorGuide from 'src/components/EditorGuide/EditorGuide'
const colors = theme.extend.colors
@@ -17,6 +18,7 @@ const IdeEditor = ({ Loading }) => {
cadquery: 'python',
openscad: 'cpp',
jscad: 'javascript',
INIT: '',
}
const monaco = useMonaco()
useEffect(() => {
@@ -73,34 +75,50 @@ const IdeEditor = ({ Loading }) => {
className="h-full"
onKeyDown={handleSaveHotkey}
>
{ (state.models.length > 1) && (
<fieldset
className='bg-ch-gray-700 text-ch-gray-300 flex m-0 p-0'>
{ state.models.map((model, i) => (
<label key={model.type + '-' + i}
className={'flex items-center gap-2 px-4 py-1 block m-0 select-none relative bg-ch-gray-600 ' + ((state.currentModel === i) && 'bg-ch-gray-800')}>
{ model.label }
{state.models.length > 1 && (
<fieldset className="bg-ch-gray-700 text-ch-gray-300 flex m-0 p-0">
{state.models.map((model, i) => (
<label
key={model.type + '-' + i}
className={
'flex items-center gap-2 px-4 py-1 block m-0 select-none relative bg-ch-gray-600 ' +
(state.currentModel === i && 'bg-ch-gray-800')
}
>
{model.label}
<input
type='radio'
name='models'
className='sr-only absolute inset-0'
type="radio"
name="models"
className="sr-only absolute inset-0"
value={i}
checked={state.currentModel === i}
onChange={() => thunkDispatch({ type: 'switchEditorModel', payload: i })} />
{ (model.type !== 'code') &&
<button onClick={() => thunkDispatch({ type: 'removeEditorModel', payload: i })}
className='block p-1 m-.5 hover:bg-ch-gray-550' >
<svg viewBox='0 0 5 5' className='w-4 text-ch-gray-300'>
<path stroke='currentColor' d='M 1 1 l 3 3 M 1 4 l 3 -3' strokeLinecap='round' strokeWidth='.5' />
</svg>
</button>
}
onChange={() =>
thunkDispatch({ type: 'switchEditorModel', payload: i })
}
/>
{model.type !== 'code' && (
<button
onClick={() =>
thunkDispatch({ type: 'removeEditorModel', payload: i })
}
className="block p-1 m-.5 hover:bg-ch-gray-550"
>
<svg viewBox="0 0 5 5" className="w-4 text-ch-gray-300">
<path
stroke="currentColor"
d="M 1 1 l 3 3 M 1 4 l 3 -3"
strokeLinecap="round"
strokeWidth=".5"
/>
</svg>
</button>
)}
</label>
)) }
))}
</fieldset>
)}
{ (state.models[state.currentModel].type === 'code')
? <Editor
{state.models[state.currentModel].type === 'code' ? (
<Editor
defaultValue={state.code}
value={state.code}
theme={theme}
@@ -110,8 +128,11 @@ const IdeEditor = ({ Loading }) => {
language={ideTypeToLanguageMap[state.ideType] || 'cpp'}
onChange={handleCodeChange}
/>
: <pre className="bg-ch-gray-800 text-ch-gray-300 p-6 h-full">{ state.models[state.currentModel].content }</pre>
}
) : (
<div className="bg-ch-gray-800 h-full">
<EditorGuide content={state.models[state.currentModel].content} />
</div>
)}
</div>
)
}