82 lines
1.9 KiB
JavaScript
82 lines
1.9 KiB
JavaScript
import * as GCodePreview from 'gcode-preview'
|
|
import PropTypes from 'prop-types'
|
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
import * as THREE from 'three'
|
|
|
|
function GCodePreviewUI(props) {
|
|
const {
|
|
src,
|
|
topLayerColor = '',
|
|
lastSegmentColor = '',
|
|
startLayer,
|
|
endLayer,
|
|
lineWidth,
|
|
style = {}
|
|
} = props
|
|
const canvasRef = useRef(null)
|
|
const [preview, setPreview] = useState()
|
|
|
|
const resizePreview = useCallback(() => {
|
|
preview?.resize()
|
|
}, [preview])
|
|
|
|
// Ex-ref methods removed; this component is now a regular functional component
|
|
|
|
useEffect(() => {
|
|
setPreview(
|
|
GCodePreview.init({
|
|
canvas: canvasRef.current,
|
|
startLayer,
|
|
endLayer,
|
|
lineWidth,
|
|
topLayerColor: new THREE.Color(topLayerColor).getHex(),
|
|
lastSegmentColor: new THREE.Color(lastSegmentColor).getHex(),
|
|
buildVolume: { x: 250, y: 220, z: 150 },
|
|
initialCameraPosition: [0, 400, 450],
|
|
allowDragNDrop: false
|
|
})
|
|
)
|
|
|
|
window.addEventListener('resize', resizePreview)
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', resizePreview)
|
|
}
|
|
}, [
|
|
endLayer,
|
|
lastSegmentColor,
|
|
lineWidth,
|
|
startLayer,
|
|
topLayerColor,
|
|
resizePreview
|
|
])
|
|
|
|
useEffect(() => {
|
|
const loadFromSrc = async () => {
|
|
if (!src || !preview) return
|
|
try {
|
|
const response = await fetch(src)
|
|
const text = await response.text()
|
|
preview.processGCode(text)
|
|
} catch (e) {
|
|
console.error('Failed to load G-code from src', e)
|
|
}
|
|
}
|
|
loadFromSrc()
|
|
}, [src, preview])
|
|
|
|
return <canvas ref={canvasRef} style={style}></canvas>
|
|
}
|
|
|
|
GCodePreviewUI.propTypes = {
|
|
src: PropTypes.string,
|
|
topLayerColor: PropTypes.string,
|
|
lastSegmentColor: PropTypes.string,
|
|
startLayer: PropTypes.number,
|
|
endLayer: PropTypes.number,
|
|
lineWidth: PropTypes.number,
|
|
style: PropTypes.object
|
|
}
|
|
|
|
export default GCodePreviewUI
|