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

Move viewport state into openscad controller

Browse Source
This commit is contained in:
Kurt Hutten
2021-03-14 17:41:29 +11:00
parent 785025fca8
commit b6867fc8a8
4 changed files with 112 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
web/src/components/IdeViewer/IdeViewer.js
View File

@@ -137,54 +137,55 @@ const IdeViewer = () => {
const indigo300 = '#A5B4FC'
const indigo900 = '#312E81'
return (
<div>
<div className="relative" className="h-full">
{state.isLoading && (
<div className="inset-0 absolute flex items-center justify-center">
<div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
</div>
)}
{image && (
<div
className={`absolute inset-0 transition-opacity duration-500 ${
isDragging ? 'opacity-25' : 'opacity-100'
}`}
>
<img src={image} style={{width: state.viewerSize.width+'px' || '500px', height: state.viewerSize.height+'px' || '500px'}} />
</div>
)}
{state.isLoading && (
<div className="inset-0 absolute flex items-center justify-center">
<div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
</div>
)}
<div
className={`opacity-0 absolute inset-0 transition-opacity duration-500 ${
isDragging ? 'opacity-100' : 'hover:opacity-50'
}`}
onMouseDown={() => setIsDragging(true)}
>
<Canvas>
<Controls
onDragStart={() => setIsDragging(true)}
onCameraChange={(camera) => {
dispatch({
type: 'render',
payload: {
code: currentCode,
camera,
},
})
}}
/>
<ambientLight />
<pointLight position={[15, 5, 10]} />
<Sphere position={[0, 0, 0]} color={pink400} />
<Box position={[0, 50, 0]} size={[1, 100, 1]} color={indigo900} />
<Box position={[0, 0, -50]} size={[1, 1, 100]} color={indigo300} />
<Box position={[50, 0, 0]} size={[100, 1, 1]} color={pink400} />
</Canvas>
<div
className="relative h-full"
style={{ backgroundColor: openSCADDeepOceanThemeBackground }}
>
{state.isLoading && (
<div className="inset-0 absolute flex items-center justify-center">
<div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
</div>
)}
{image && (
<div
className={`absolute inset-0 transition-opacity duration-500 ${
isDragging ? 'opacity-25' : 'opacity-100'
}`}
>
<img src={image} className="h-full w-full" />
</div>
)}
{state.isLoading && (
<div className="inset-0 absolute flex items-center justify-center">
<div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
</div>
)}
<div
className={`opacity-0 absolute inset-0 transition-opacity duration-500 ${
isDragging ? 'opacity-100' : 'hover:opacity-50'
}`}
onMouseDown={() => setIsDragging(true)}
>
<Canvas>
<Controls
onDragStart={() => setIsDragging(true)}
onCameraChange={(camera) =>
dispatch({
type: 'render',
payload: {
code: currentCode,
camera,
},
})
}
/>
<ambientLight />
<pointLight position={[15, 5, 10]} />
<Sphere position={[0, 0, 0]} color={pink400} />
<Box position={[0, 50, 0]} size={[1, 100, 1]} color={indigo900} />
<Box position={[0, 0, -50]} size={[1, 1, 100]} color={indigo300} />
<Box position={[50, 0, 0]} size={[100, 1, 1]} color={pink400} />
</Canvas>
</div>
</div>
)