@chestnutlabs/gcode-preview-react 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ npm install @chestnutlabs/gcode-preview-react three
|
|
|
10
10
|
|
|
11
11
|
(`three` is a peerDependency of the renderer, supported range `^0.178.0` — npm ≥ 7 installs
|
|
12
12
|
it automatically; pnpm/yarn users add it explicitly. See the
|
|
13
|
-
[support policy](
|
|
13
|
+
[support policy](https://github.com/ChestnutLabs/gcode-preview/blob/dev/docs/reference/support-policy.md).)
|
|
14
14
|
|
|
15
15
|
## Ready-to-use component
|
|
16
16
|
|
|
@@ -1,28 +1,45 @@
|
|
|
1
|
-
import type { BuildVolumeDef, ColorMode, QualityMode, TubeOptions } from '@chestnutlabs/gcode-renderer-three';
|
|
1
|
+
import type { BuildVolumeDef, CameraMode, ColorMode, QualityMode, Theme, TubeOptions } from '@chestnutlabs/gcode-renderer-three';
|
|
2
2
|
import type { MachineGeometry, ProgressObservation } from '@chestnutlabs/toolpath-core';
|
|
3
3
|
import type { WireParseOptions, WorkerLike } from '@chestnutlabs/gcode-parser';
|
|
4
|
-
import { type GcodePreviewHandle, type UseGcodePreviewOptions } from './use-gcode-preview.js';
|
|
4
|
+
import { type GcodePreviewHandle, type RendererMode, type UseGcodePreviewOptions } from './use-gcode-preview.js';
|
|
5
5
|
export type GcodePreviewSource = Uint8Array | ArrayBuffer | File | null;
|
|
6
6
|
export interface GcodePreviewProps {
|
|
7
7
|
/** The one prop needed in practice: bytes/File to parse. Changing it re-parses. */
|
|
8
8
|
source?: GcodePreviewSource;
|
|
9
9
|
parseOptions?: WireParseOptions;
|
|
10
|
+
/**
|
|
11
|
+
* DD-014 D5: which renderer backs the preview — `'3d'` (default, Three.js) or `'2d'` (the
|
|
12
|
+
* low-resource Canvas layer view). Three.js is loaded on demand, so `'2d'` never ships it.
|
|
13
|
+
*/
|
|
14
|
+
renderer?: RendererMode;
|
|
15
|
+
/** 2D only (`renderer="2d"`): preceding "ghost" layers beneath the active one (default 1, floor 0). */
|
|
16
|
+
adjacentLayers?: number;
|
|
10
17
|
/** Consumer-configured volume — wins over file-discovered geometry (DD-005 precedence). */
|
|
11
18
|
buildVolume?: BuildVolumeDef | MachineGeometry;
|
|
12
19
|
quality?: QualityMode | 'auto';
|
|
20
|
+
/** #150 (DD-009 D3): camera projection. */
|
|
21
|
+
cameraMode?: CameraMode;
|
|
22
|
+
/** #153 (DD-009 D4): bounded declarative theme. */
|
|
23
|
+
theme?: Theme;
|
|
13
24
|
colorMode?: ColorMode;
|
|
14
25
|
tube?: TubeOptions;
|
|
15
26
|
/** Inclusive [start, end]; null/undefined shows every layer. */
|
|
16
27
|
layerRange?: [number, number] | null;
|
|
17
28
|
/** Scrub cut (IR segment index); null shows everything up to the layer range. */
|
|
18
29
|
scrub?: number | null;
|
|
30
|
+
/** Time-based scrub cut in ms of print time (#181); null clears it. */
|
|
31
|
+
scrubTime?: number | null;
|
|
19
32
|
showTravel?: boolean;
|
|
33
|
+
/** DD-016 (#182): show slicer wipe moves. Default true; set false to hide the wipe chunk. */
|
|
34
|
+
showWipe?: boolean;
|
|
35
|
+
/** DD-009 D1 (#148): opt-in retraction/deretraction markers. */
|
|
36
|
+
showRetractions?: boolean;
|
|
20
37
|
/** DD-006 live progress observation; null hides the overlay. */
|
|
21
38
|
progress?: ProgressObservation | null;
|
|
22
39
|
/** Worker factory escape hatch (DD-005 slim/custom entries; D2). */
|
|
23
40
|
createWorker?: () => WorkerLike;
|
|
24
41
|
/** Advanced/test renderer injectables (pass-throughs of the renderer contract). */
|
|
25
|
-
rendererOptions?: Omit<NonNullable<UseGcodePreviewOptions['renderer']>, 'buildVolume' | 'quality' | 'colorMode' | 'tube'>;
|
|
42
|
+
rendererOptions?: Omit<NonNullable<UseGcodePreviewOptions['renderer']>, 'buildVolume' | 'quality' | 'cameraMode' | 'theme' | 'colorMode' | 'tube'>;
|
|
26
43
|
onReady?: (summary: {
|
|
27
44
|
segments: number;
|
|
28
45
|
layers: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gcode-preview-component.d.ts","sourceRoot":"","sources":["../src/gcode-preview-component.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"gcode-preview-component.d.ts","sourceRoot":"","sources":["../src/gcode-preview-component.ts"],"names":[],"mappings":"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"}
|
|
@@ -16,10 +16,14 @@ function GcodePreviewImpl(props, ref) {
|
|
|
16
16
|
const preview = useGcodePreview({
|
|
17
17
|
createWorker: props.createWorker,
|
|
18
18
|
renderer: {
|
|
19
|
+
mode: props.renderer,
|
|
19
20
|
buildVolume: isMachine ? undefined : props.buildVolume,
|
|
20
21
|
quality: props.quality ?? 'auto',
|
|
22
|
+
cameraMode: props.cameraMode ?? 'perspective',
|
|
23
|
+
theme: props.theme,
|
|
21
24
|
colorMode: props.colorMode,
|
|
22
25
|
tube: props.tube,
|
|
26
|
+
adjacentLayers: props.adjacentLayers,
|
|
23
27
|
...props.rendererOptions
|
|
24
28
|
},
|
|
25
29
|
parseDefaults: props.parseOptions
|
|
@@ -69,7 +73,7 @@ function GcodePreviewImpl(props, ref) {
|
|
|
69
73
|
});
|
|
70
74
|
}, []);
|
|
71
75
|
// ---- prop wiring: each prop is a thin call into the hook (D1 shell rule) ----
|
|
72
|
-
const { source, layerRange, scrub, showTravel, colorMode, quality, buildVolume, progress } = props;
|
|
76
|
+
const { source, layerRange, scrub, scrubTime, showTravel, showWipe, showRetractions, colorMode, quality, cameraMode, theme, buildVolume, progress } = props;
|
|
73
77
|
useEffect(() => {
|
|
74
78
|
if (source !== null && source !== undefined)
|
|
75
79
|
void preview.parse(source, cbRef.current.parseOptions);
|
|
@@ -83,9 +87,18 @@ function GcodePreviewImpl(props, ref) {
|
|
|
83
87
|
useEffect(() => {
|
|
84
88
|
preview.controls.setScrubPosition(scrub ?? null);
|
|
85
89
|
}, [scrub]);
|
|
90
|
+
useEffect(() => {
|
|
91
|
+
preview.controls.setScrubTime(scrubTime ?? null);
|
|
92
|
+
}, [scrubTime]);
|
|
86
93
|
useEffect(() => {
|
|
87
94
|
preview.controls.setKindVisible('travel', showTravel ?? true);
|
|
88
95
|
}, [showTravel]);
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
preview.controls.setKindVisible('wipe', showWipe ?? true);
|
|
98
|
+
}, [showWipe]);
|
|
99
|
+
useEffect(() => {
|
|
100
|
+
preview.controls.setShowRetractions(showRetractions ?? false);
|
|
101
|
+
}, [showRetractions]);
|
|
89
102
|
useEffect(() => {
|
|
90
103
|
if (colorMode !== undefined)
|
|
91
104
|
preview.controls.setColorMode(colorMode);
|
|
@@ -94,6 +107,14 @@ function GcodePreviewImpl(props, ref) {
|
|
|
94
107
|
if (quality !== undefined)
|
|
95
108
|
preview.controls.setQuality(quality);
|
|
96
109
|
}, [quality]);
|
|
110
|
+
useEffect(() => {
|
|
111
|
+
if (cameraMode !== undefined)
|
|
112
|
+
preview.controls.setCameraMode(cameraMode);
|
|
113
|
+
}, [cameraMode]);
|
|
114
|
+
useEffect(() => {
|
|
115
|
+
if (theme !== undefined)
|
|
116
|
+
preview.controls.setTheme(theme);
|
|
117
|
+
}, [theme]);
|
|
97
118
|
useEffect(() => {
|
|
98
119
|
if (buildVolume !== undefined && 'bed' in buildVolume)
|
|
99
120
|
preview.controls.setBuildVolume(buildVolume);
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { GcodeParseSession, WireParseOptions } from '@chestnutlabs/gcode-parser';
|
|
2
|
-
import type { ToolpathRenderer } from '@chestnutlabs/gcode-renderer-three';
|
|
3
2
|
import type { MappedProgress, ProgressObservation } from '@chestnutlabs/toolpath-core';
|
|
4
|
-
import { type GcodePreviewControls, type GcodePreviewState, type ParseOutcome, type PreviewControllerOptions, type PreviewEvent } from '@chestnutlabs/gcode-preview-core';
|
|
5
|
-
export type { GcodePreviewControls, GcodePreviewState, ParseOutcome, PreviewEvent } from '@chestnutlabs/gcode-preview-core';
|
|
3
|
+
import { type GcodePreviewControls, type GcodePreviewState, type ParseOutcome, type PreviewControllerOptions, type PreviewEvent, type PreviewRenderer } from '@chestnutlabs/gcode-preview-core';
|
|
4
|
+
export type { GcodePreviewControls, GcodePreviewState, ParseOutcome, PreviewEvent, PreviewRenderer, RendererMode } from '@chestnutlabs/gcode-preview-core';
|
|
6
5
|
/** React-facing options — identical to the controller's (the alias is the public name). */
|
|
7
6
|
export type UseGcodePreviewOptions = PreviewControllerOptions;
|
|
8
7
|
export interface GcodePreviewHandle {
|
|
@@ -18,7 +17,7 @@ export interface GcodePreviewHandle {
|
|
|
18
17
|
controls: GcodePreviewControls;
|
|
19
18
|
raw: {
|
|
20
19
|
session: GcodeParseSession;
|
|
21
|
-
renderer: () =>
|
|
20
|
+
renderer: () => PreviewRenderer | null;
|
|
22
21
|
};
|
|
23
22
|
onEvent(cb: (e: PreviewEvent) => void): () => void;
|
|
24
23
|
dispose(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-gcode-preview.d.ts","sourceRoot":"","sources":["../src/use-gcode-preview.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACtF,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"use-gcode-preview.d.ts","sourceRoot":"","sources":["../src/use-gcode-preview.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvF,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAEjB,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,kCAAkC,CAAC;AAG1C,YAAY,EACV,oBAAoB,EACpB,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,2FAA2F;AAC3F,MAAM,MAAM,sBAAsB,GAAG,wBAAwB,CAAC;AAE9D,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,SAAS,EAAE,CAAC,EAAE,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9F,MAAM,IAAI,IAAI,CAAC;IACf,eAAe,CAAC,GAAG,EAAE,mBAAmB,GAAG,cAAc,GAAG,IAAI,CAAC;IACjE,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;IACnD,aAAa,IAAI,IAAI,CAAC;IACtB,2EAA2E;IAC3E,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,GAAG,EAAE;QAAE,OAAO,EAAE,iBAAiB,CAAC;QAAC,QAAQ,EAAE,MAAM,eAAe,GAAG,IAAI,CAAA;KAAE,CAAC;IAC5E,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IACnD,OAAO,IAAI,IAAI,CAAC;CACjB;AAUD,wBAAgB,eAAe,CAAC,OAAO,GAAE,sBAA2B,GAAG,kBAAkB,CAiExF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chestnutlabs/gcode-preview-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Thin React integration for the Chestnut Labs G-code viewer (DD-007 D1 amendment): useGcodePreview hook + GcodePreview component as a reactivity bridge over @chestnutlabs/gcode-preview-core.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"gcode",
|
|
@@ -49,10 +49,10 @@
|
|
|
49
49
|
"test": "vitest run"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@chestnutlabs/gcode-parser": "0.
|
|
53
|
-
"@chestnutlabs/gcode-preview-core": "0.
|
|
54
|
-
"@chestnutlabs/gcode-renderer-three": "0.
|
|
55
|
-
"@chestnutlabs/toolpath-core": "0.
|
|
52
|
+
"@chestnutlabs/gcode-parser": "0.3.0",
|
|
53
|
+
"@chestnutlabs/gcode-preview-core": "0.3.0",
|
|
54
|
+
"@chestnutlabs/gcode-renderer-three": "0.3.0",
|
|
55
|
+
"@chestnutlabs/toolpath-core": "0.3.0"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"react": "^18.0.0 || ^19.0.0"
|