/
gCodeViewer.tsx
90 lines (78 loc) · 2.83 KB
/
gCodeViewer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import * as PlainJSX from "../plainJSX"
import { Window } from "../window"
import { GCodeRenderer, SpeedColorizer, Color } from "gcode-viewer"
import { Slider } from "../components/Slider"
import "./gCodeViewer.scss"
export default class GCodeViewer extends Window {
private renderer: GCodeRenderer | undefined
private bottomGap = 20
constructor(gCode?: string) {
super()
this.focus()
this.onClose = () => {
if (!this.renderer) {
return
}
this.renderer.dispose()
this.renderer = undefined
}
this.setWindowName(<>GCode Viewer</>)
this.setWindowContent(
<div className="gcode-viewer-message">Loading...</div>
)
const getGCode = async () => {
let gCodeString = gCode
if (!gCodeString) {
const res = await fetch("gopher.stl.gcode")
if (!res.body) {
this.setWindowContent(
<div className="gcode-viewer-message">No GCode</div>
)
return
}
gCodeString = await res.text()
}
this.renderer = new GCodeRenderer(
gCodeString,
this.width(),
this.height() - this.bottomGap,
new Color(0x808080)
)
this.renderer.colorizer = new SpeedColorizer(
this.renderer.getMinMaxValues().minSpeed || 0,
this.renderer.getMinMaxValues().maxSpeed
)
await this.renderer.render()
this.setWindowContent(
<div className="gcode-viewer">
{this.renderer.element()}
<div className="toolbar">
<Slider // TODO: make toolbar generic in window?
min="1"
max={this.renderer.layerCount().toString()}
value={this.renderer.layerCount().toString()}
className="slider end-slider"
oninput={(e: Event) => {
const target = e.target as HTMLInputElement
this.renderer?.sliceLayer(
0,
Number.parseInt(target.value)
)
}}
/>
</div>
</div>
)
this.onResize = () => {
if (!this.renderer) {
return
}
this.renderer.resize(
this.width(),
this.height() - this.bottomGap
)
}
}
getGCode()
}
}