Files
cadhub/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js
Kurt Hutten 5ea1bdf69f Fix CascadeStudio integration
resolves #95
2020-11-14 12:00:55 +11:00

139 lines
4.1 KiB
JavaScript

import { useMutation, useFlash } from '@redwoodjs/web'
import { Link, routes, navigate } from '@redwoodjs/router'
import { initialize } from 'src/cascade/js/MainPage/CascadeMain'
import CascadeController from 'src/helpers/cascadeController'
import { useEffect, useState } from 'react'
const DELETE_PART_MUTATION = gql`
mutation DeletePartMutation($id: Int!) {
deletePart(id: $id) {
id
}
}
`
const domNode = document.createElement('div').setAttribute('id', 'sickId')
const IdeCascadeStudio = ({ part, saveCode, loading, error }) => {
const [code, setCode] = useState(part.code)
useEffect(() => {
const onCodeChange = (code) => setCode(code)
CascadeController.initialise(onCodeChange, part.code, domNode)
const element = document.getElementById('cascade-container')
element.setAttribute('style', 'height: auto; display: block; opacity: 100%') // eslint-disable-line
return () => {
element.setAttribute('style', 'height: auto; display: none;') // eslint-disable-line
}
}, [])
const hasChanges = code !== part.code
const { addMessage } = useFlash()
const [deletePart] = useMutation(DELETE_PART_MUTATION, {
onCompleted: () => {
// navigate(routes.parts())
addMessage('Part deleted.', { classes: 'rw-flash-success' })
},
})
const onDeleteClick = (id) => {
if (confirm('Are you sure you want to delete part ' + id + '?')) {
deletePart({ variables: { id } })
}
}
return (
<>
<nav className="rw-button-group">
{loading && 'Loading...'}
{hasChanges && !loading && (
<button
onClick={() => saveCode({ code }, part.id)}
className="rw-button rw-button-blue"
>
Save Changes
</button>
)}
</nav>
<div>
<div id="topnav" className="topnav">
<a href="https://github.com/zalo/CascadeStudio">
Cascade Studio 0.0.6
</a>
<a
href="#"
id="main-proj-button"
title="Sets this project to save in local storage."
onClick={() => makeMainProject()}
>
Make Main Project
</a>
<a
href="#"
title="Save Project to .json"
onClick={() => saveProject()}
>
Save Project
</a>
<label htmlFor="project-file" title="Load Project from .json">
Load Project
<input
id="project-file"
name="project-file"
type="file"
accept=".json"
style={{ display: 'none' }}
onInput={() => loadProject()}
/>
</label>
<a href="#" onClick={() => threejsViewport.saveShapeSTEP()}>
Save STEP
</a>
<a href="#" onClick={() => threejsViewport.saveShapeSTL()}>
Save STL
</a>
<a href="#" onClick={() => threejsViewport.saveShapeOBJ()}>
Save OBJ
</a>
<label
htmlFor="files"
title="Import STEP, IGES, or (ASCII) STL from File"
>
Import STEP/IGES/STL
<input
id="files"
name="files"
type="file"
accept=".iges,.step,.igs,.stp,.stl"
multiple
style={{ display: 'none' }}
onInput={() => loadFiles()}
/>
</label>
<a
href="#"
title="Clears the external step/iges/stl files stored in the project."
onClick={() => clearExternalFiles()}
>
Clear Imported Files
</a>
<a
href=""
title="Resets the project and localstorage."
onClick={() => {
window.localStorage.clear()
window.history.replaceState({}, 'Cascade Studio', '?')
}}
>
Reset Project
</a>
</div>
{/* <div
id="cascade-container"
style={{ height: 'auto' }}
// dangerouslySetInnerHTML={domNode}
></div> */}
</div>
</>
)
}
export default IdeCascadeStudio