[Bug] Art Studio 3D viewer never rendered anything — static ViewChild inside *transloco never resolves; plus: no student-visible nav entry to Art Studio #370

Closed
opened 2026-07-05 00:10:59 +00:00 by spikerj · 1 comment
Owner

Found by the #359 Angular-in-the-loop validation (2026-07-04). Two related Art Studio UI findings.

1. Viewer never rendered (fix exists on feature/mac-browser-validation)

ArtAssetViewerComponent declared

@ViewChild("canvasContainer", { static: true }) canvasContainer!: ElementRef<HTMLDivElement>;

but #canvasContainer sits inside the *transloco structural directive, which renders asynchronously after translations load. A static query inside a structural directive never resolves, so every instantiation crashed in ngAfterViewInit → initThree():

ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at _ArtAssetViewerComponent.initThree

No three.js scene or <canvas> was ever created — the preview pane was permanently blank for every asset in every environment (this is deterministic, not a race). Unit tests didn't catch it because they don't exercise the transloco-rendered template + lifecycle combination.

Fix (validated live, on spikersoft-angular branch feature/mac-browser-validation, commit 6b3d947): setter-based non-static @ViewChild that runs initThree() + initial loadModel() the moment the container materializes. After the fix the exported rowboat GLB renders and orbits in the viewer (screenshots e2e/test-results/artstudio-live/06-viewer-*.png on that branch).

2. No student-visible navigation to Art Studio

The /tools launcher bar is display:none by design ("all tools now available in main menu"), but the Development menu has no Art Studio / Art Gallery items — the studio is reachable only by typing /tools/(tools:art-studio). For the school demo a student can't find the feature. Needs a menu entry (and probably one for the class gallery).

Part of epic #346; found during #359.

Found by the #359 Angular-in-the-loop validation (2026-07-04). Two related Art Studio UI findings. ## 1. Viewer never rendered (fix exists on `feature/mac-browser-validation`) `ArtAssetViewerComponent` declared ```ts @ViewChild("canvasContainer", { static: true }) canvasContainer!: ElementRef<HTMLDivElement>; ``` but `#canvasContainer` sits inside the `*transloco` structural directive, which renders asynchronously after translations load. **A static query inside a structural directive never resolves**, so every instantiation crashed in `ngAfterViewInit → initThree()`: ``` ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement') at _ArtAssetViewerComponent.initThree ``` No three.js scene or `<canvas>` was ever created — the preview pane was permanently blank for every asset in every environment (this is deterministic, not a race). Unit tests didn't catch it because they don't exercise the transloco-rendered template + lifecycle combination. **Fix (validated live, on `spikersoft-angular` branch `feature/mac-browser-validation`, commit `6b3d947`):** setter-based non-static `@ViewChild` that runs `initThree()` + initial `loadModel()` the moment the container materializes. After the fix the exported rowboat GLB renders and orbits in the viewer (screenshots `e2e/test-results/artstudio-live/06-viewer-*.png` on that branch). ## 2. No student-visible navigation to Art Studio The `/tools` launcher bar is `display:none` by design ("all tools now available in main menu"), but the Development menu has **no Art Studio / Art Gallery items** — the studio is reachable only by typing `/tools/(tools:art-studio)`. For the school demo a student can't find the feature. Needs a menu entry (and probably one for the class gallery). Part of epic #346; found during #359.
Author
Owner

Both halves resolved and merged to master: PR #123 (viewer setter-ViewChild — canvas actually renders in real browsers now; live-verified in the #359 run) and PR #124 (Art Studio + Class Gallery entries in the Development menu, desktop and mobile). Closing.

Both halves resolved and merged to `master`: PR #123 (viewer setter-ViewChild — canvas actually renders in real browsers now; live-verified in the #359 run) and PR #124 (Art Studio + Class Gallery entries in the Development menu, desktop and mobile). Closing.
Sign in to join this conversation.