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

Add the beginnings of the customizer UI

Browse Source 
Relates to #320
This commit is contained in:
Kurt Hutten
2021-08-02 22:48:59 +10:00
parent 5e14ad0829
commit 8883df3445
3 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@@ -1,5 +1,6 @@
{
"cSpell.words": [
"Customizer",
"Hutten",
"cadquery",
"jscad",

68
app/web/src/components/Customizer/Customizer.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { useRender } from 'src/components/IdeWrapper/useRender'
const Customizer = () => {
const [open, setOpen] = React.useState(true)
const ref = React.useRef()
const jsCadCustomizerElement = ref.current
React.useEffect(() => {
console.log(jsCadCustomizerElement)
if (jsCadCustomizerElement) {
jsCadCustomizerElement.innerHTML = `<div>hi there</div>`
}
}, [jsCadCustomizerElement])
const handleRender = useRender()
return (
<div className={`absolute inset-x-0 bottom-0 bg-ch-gray-600 bg-opacity-60 text-ch-gray-300 text-lg font-fira-sans ${open ? 'h-2/3' : ''}`}>
<div className="flex justify-between px-6 py-2 items-center">
<div className="flex gap-6 items-center">
<button className="px-2" onClick={() => setOpen(!open)}>{open ? '⬇' : '⬆'}</button>
<div>Parameters</div>
</div>
<button className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800" onClick={handleRender}>Update</button>
</div>
<div className={`${open ? 'h-full' : 'h-0'} overflow-y-auto py-3 px-12`}>
<div id="jscad-customizer-block" ref={ref}>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
</div>
</div>
</div>
)
}
export default Customizer

2
app/web/src/components/IdeViewer/IdeViewer.tsx
View File

@@ -6,6 +6,7 @@ import { Vector3 } from 'three'
import { requestRender } from 'src/helpers/hooks/useIdeState'
import texture from './dullFrontLitMetal.png'
import { TextureLoader } from 'three/src/loaders/TextureLoader'
import Customizer from 'src/components/Customizer/Customizer'
const loader = new TextureLoader()
const colorMap = loader.load(texture)
@@ -243,6 +244,7 @@ const IdeViewer = ({ Loading }) => {
<div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
</div>
)}
<Customizer />
</div>
)
}