[Bug] Art Studio 3D viewer never rendered anything — static ViewChild inside *transloco never resolves; plus: no student-visible nav entry to Art Studio
#370
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).
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.
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.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
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)ArtAssetViewerComponentdeclaredbut
#canvasContainersits inside the*translocostructural directive, which renders asynchronously after translations load. A static query inside a structural directive never resolves, so every instantiation crashed inngAfterViewInit → 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-angularbranchfeature/mac-browser-validation, commit6b3d947): setter-based non-static@ViewChildthat runsinitThree()+ initialloadModel()the moment the container materializes. After the fix the exported rowboat GLB renders and orbits in the viewer (screenshotse2e/test-results/artstudio-live/06-viewer-*.pngon that branch).2. No student-visible navigation to Art Studio
The
/toolslauncher bar isdisplay:noneby 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.
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.