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

54
web/src/components/IdeContainer/IdeContainer.js
View File

@@ -7,9 +7,9 @@ import IdeConsole from 'src/components/IdeConsole'
import 'react-mosaic-component/react-mosaic-component.css'
const ELEMENT_MAP = {
Editor: <IdeEditor/>,
Viewer: <IdeViewer/>,
Console: <IdeConsole/>,
Editor: <IdeEditor />,
Viewer: <IdeViewer />,
Console: <IdeConsole />,
}
const IdeContainer = () => {
@@ -21,26 +21,38 @@ const IdeContainer = () => {
function handleViewerSizeUpdate() {
if (viewerDOM !== null && viewerDOM.current) {
const { width, height } = viewerDOM.current.getBoundingClientRect()
console.log({width, height})
dispatch({ type: 'setViewerSize', payload: { message: { width, height } }})
dispatch({
type: 'render',
payload: {
code: state.code,
viewerSize: { width, height },
},
})
}
}
return (<div id='cadhub-ide' className='h-screen'>
<Mosaic
renderTile={ (id, path) => (
<MosaicWindow path={path} title={id} className={id.toLowerCase()}>
{(id === 'Viewer')
? <div id='view-wrapper'className='h-full' ref={viewerDOM}>{ ELEMENT_MAP[id] }</div>
: ELEMENT_MAP[id]
}
</MosaicWindow>
)}
value={state.layout}
onChange={newLayout => dispatch({ type: 'setLayout', payload: { message: newLayout } })}
onRelease={handleViewerSizeUpdate}
/>
</div>)
return (
<div id="cadhub-ide" className="h-screen">
<Mosaic
renderTile={(id, path) => (
<MosaicWindow path={path} title={id} className={id.toLowerCase()}>
{id === 'Viewer' ? (
<div id="view-wrapper" className="h-full" ref={viewerDOM}>
{ELEMENT_MAP[id]}
</div>
) : (
ELEMENT_MAP[id]
)}
</MosaicWindow>
)}
value={state.layout}
onChange={(newLayout) =>
dispatch({ type: 'setLayout', payload: { message: newLayout } })
}
onRelease={handleViewerSizeUpdate}
/>
</div>
)
}
export default IdeContainer
export default IdeContainer

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