Skip to content

feat: unified element inspector with navigation panels and sceneView store#43

Open
cnotv wants to merge 20 commits intomainfrom
feat/28-nav-panels
Open

feat: unified element inspector with navigation panels and sceneView store#43
cnotv wants to merge 20 commits intomainfrom
feat/28-nav-panels

Conversation

@cnotv
Copy link
Owner

@cnotv cnotv commented Mar 2, 2026 •
edited
Loading

Closes #28

Summary

  • Unified Elements panel replacing separate Textures/Properties panels — all scene elements (cameras, ground, sky, lights, texture areas) are inspectable with expandable rows and inline properties
  • New sceneView Pinia store abstracting ~150+ lines of boilerplate per view: canvas init, Three.js lifecycle, element registration, panel population, orbit sync, cleanup
  • Single-column right panels with collapsible headers replacing overlapping sheets
  • BEM methodology replacing Tailwind utility classes in all panel components
  • All CSS hardcoded values extracted to SCSS variables
  • ForestGame illustration areas with playMode flag preventing per-frame reactive overhead
  • PanelsTest demo view using the sceneView store with spinning cube + texture groups

Key Changes

  • src/stores/sceneView.ts — central Pinia store: init(), initTextureGroups(), registerTextureAreas(), cleanup(), reactive config sections, default Three.js update handlers, mesh caching
  • src/stores/panels.ts — migrated from composable to Pinia store with query param sync
  • src/stores/textureGroups.ts — Pinia store for texture group state and handlers
  • src/stores/elementProperties.ts — element property registration/selection store
  • src/stores/debugScene.ts — scene elements store with visibility/remove handlers
  • src/stores/cameraConfig.ts — camera preset slots and configuration
  • src/stores/viewConfig.ts / sceneConfig.ts — view and scene configuration stores
  • src/components/panels/ElementsPanel.vue — unified panel with ElementItem, ElementGroup, ElementCamera sub-components
  • src/components/panels/ElementGroup.vue — texture group UI with variants, wireframe toggle, schema controls
  • src/components/panels/GenericPanel.vue — collapsible panel wrapper
  • src/components/IconButton.vue — reusable icon button component
  • src/utils/groupMeshes.ts — shared mesh generation utilities (moved from SceneEditor)
  • src/views/Tools/PanelsTest/PanelsTest.vue — demo view using sceneView store with defineSetup for timeline animation
  • src/views/Games/ForestGame/ — registers texture areas with full configControls schema, playMode for performance
  • src/views/Tools/SceneEditor/ — refactored with extracted useSceneConfig and shared config schemas

Test Plan

  • All 631 unit tests pass (pnpm test:unit)
  • 0 lint errors (pnpm lint)
  • PanelsTest: 3D scene renders with spinning cube, ground, sky, clouds, trees
  • Elements panel: shows Camera, ground, ambient-light, directional-light, sky, cloud, tree
  • Click element → properties panel shows schema controls → changes update scene in real-time
  • Texture group: visibility toggle, wireframe toggle, add/remove variants
  • ForestGame: player movement works without freezing, texture areas editable in elements panel
  • SceneEditor: unchanged behavior, all controls functional
  • Navigation bar and panels don't overlap

🤖 Generated with Claude Code

@netlify
Copy link

netlify bot commented Mar 2, 2026 •
edited
Loading

✅ Deploy Preview for cnotv-generative-art ready!

Name Link
🔨 Latest commit 008d29d
🔍 Latest deploy log https://app.netlify.com/projects/cnotv-generative-art/deploys/69b2fbe2592fea0008fdecb2
😎 Deploy Preview https://deploy-preview-43--cnotv-generative-art.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@claude
feat: unified element inspector with merged panels and Pinia state
dcfe11c 
- Merge TexturesPanel and PropertiesPanel into a single ElementsPanel
  with inline expandable rows for all scene elements
- Replace composable-based texture group state with a Pinia store
  for global reactivity and DevTools visibility
- Add camera preset selector, recording controls, and schema properties
  directly inside expanded element rows
- Move useSceneConfig next to SceneEditor and useGlobalSceneConfig
  next to ScenePanel (single-consumer composables co-located)
- Register ForestGame illustration areas as inspectable elements
- Remove Show Ground/Sky checkboxes (replaced by Eye toggle buttons)
- Set DrawPath initial loop=false and follow speed=10
- Fix deepMerge to recurse only when override value is a plain object
- Add state management guidelines (Pinia vs composables) to code style rules

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@cnotv cnotv force-pushed the feat/28-nav-panels branch from 2a62c04 to dcfe11c Compare March 2, 2026 14:45
Giuseppe Leo and others added 13 commits March 3, 2026 14:46
@claude
refactor: migrate composables to Pinia stores, fix panel and query pa…
381e173 
…ram bugs

- Convert usePanels, useViewPanels, useCameraConfig, useDebugScene,
  useElementProperties, useViewConfig to Pinia stores in src/stores/
- Fix openPanel("properties") → openPanel("elements") in SceneEditor
  so Elements panel opens correctly after texture group upload
- Remove queryStore double-push cycle in App.vue that caused URL
  query params to be pushed twice on every panel state change
- Update all view and component imports to use new store APIs
- Add URL query param tests to panels.test.ts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
fix: config panel always visible, scene config merged into it, textur…
8801e8c 
…eArea upload fixed

- GlobalNavigation: make Config button always visible, remove Scene button
- ConfigPanel: add sceneConfig SchemaControls below view config
- App.vue: remove ScenePanel usage and queryStore double-push cycle
- ElementsPanel: replace hidden file inputs with triggerFileUpload() outside dialog context
- Remove deprecated SASS @import from utilities.scss and PanelContainer.vue

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
test: add ElementsPanel reactivity and texture upload browser tests
192c3f5 
- Fix panel opening via direct store mutation (initRouteSync not called in tests)
- Use document.body.querySelector('.sheet-content') instead of #left-panels prefix
- Tests: scene elements list/clear reactivity, texture group show/hide reactivity
- Tests: Add Texture Area button creates file input and calls onAddNewGroup handler
- Fix all existing E2E tests that relied on URL-based panel opening

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
style: extract all hardcoded values to SCSS variables in ElementsPanel
11b3de2 
Move every arbitrary measurement, color, transition, and opacity to
named SCSS variables grouped by category at the top of the style block.
Also update code-style.md to mandate this pattern for all components.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
fix: sync orbitTarget back to store when orbit controls change in vie…
bd91e2b 
…wport

The change listener on orbit controls only synced camera position — the
orbit target drifted silently whenever the user panned/rotated in the
viewport, causing the panel to show stale values and UI updates to reset
the target to [0,0,0].

- Add syncActiveSlotOrbitTarget to cameraConfig store (same pattern as
  syncActiveSlotPosition — updates store without triggering onUpdate loop)
- Call it in SceneEditor's orbitControls change listener alongside
  syncActiveSlotPosition
- Add unit tests for both sync functions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
feat: abstract element sub-components, fix nav bar UX and panel bugs
da5e67c 
- Extract ElementItem, ElementCamera, ElementGroup from ElementsPanel
- Add elementUtilities for icon/color helpers
- Add CSS custom properties to _variables.scss (panel tokens, spacing, fonts)
- Enforce CSS custom properties rule in code-style.md
- Add git workflow rules (fetch+rebase, never merge) to testing.md
- Fix panels.ts: capture useRoute/useRouter in initRouteSync to avoid TypeError outside setup context
- Remove query params on panel close (undefined) instead of setting false
- Reduce ForestGame idle animation speed 4x
- Nav bar: canvas shifts on hover via CSS :has() (not just when panels open)
- Add texture upload integration test in ElementsPanel.browser.test.ts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
test: update panels.test.ts to expect undefined instead of 'false' fo…
2932eba 
…r closed panels

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
feat: replace Tailwind with BEM in panels, add IconButton, group Goom…
fbf2f9f 
…baRunner elements

- Add IconButton component wrapping shadcn Button with sm/md/lg sizes via CSS tokens
- Rewrite ElementGroup and TexturesPanel with full BEM and no Tailwind utilities
- Add element type modifier classes and TextureArea description to ElementsPanel
- Add no-Tailwind-in-components rule to code-style.md
- GoombaRunner: replace count with density, fix cloud/hill z-ordering, add FallingElement interface for shared fall animation, group cloud/hill as ElementGroups
- SceneEditor: show TextureArea type for grouped elements, split lights registration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
feat: add sceneView Pinia store to unify panel-enabled views
75ed834 
Extract shared scene setup boilerplate into a reusable Pinia store.
Views now pass a SetupConfig and the store handles element property
registration, panel population, Three.js mapping, texture group
management, and lifecycle cleanup. PanelsTest reduced from ~310 lines
to ~45 lines.

- Create src/stores/sceneView.ts with init/initTextureGroups/cleanup
- Move groupMeshes.ts to src/utils/ for shared access
- Add threeObjectUpdaters.ts for lint-compliant Three.js mutations
- Implement full texture group CRUD (add/remove/toggle/wireframe)
- Use preset configs (clouds, trees) for PanelsTest texture groups
- Rename decals preset to trees

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
feat: single-column right panels with collapsible headers
89e7944 
Right panels now stack in a single column sharing available height
instead of wrapping into multiple columns. Each panel has a
collapsible header with chevron toggle — collapsed panels shrink
to just the header bar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
style: remove border from collapsible panel headers
14bbe8a 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
style: make panels full height with container-level scrolling
f974216 
Remove per-panel overflow scrolling so each panel takes its natural
height. Only the panel container scrolls when content exceeds viewport.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
fix: prevent action icons overflow in ElementGroup header
48861a6 
Remove width: 100% (flex column children stretch automatically) and add
overflow: hidden to prevent action buttons from spilling outside the
element group boundary on narrow panels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@cnotv cnotv changed the title feat: unified element inspector with merged panels and Pinia state feat: unified element inspector with navigation panels and sceneView store Mar 11, 2026
@cnotv cnotv mentioned this pull request Mar 11, 2026
Closed
Giuseppe Leo and others added 6 commits March 11, 2026 15:09
@claude
feat: add element filter bar, clock in DefineSetupContext, framerate …
19b6f11 
…throttling

- Add filter bar to ElementsPanel with icon toggles for camera, light,
  ground, sky, mesh, and textureArea categories
- Extract getElementCategory and ELEMENT_CATEGORIES to elementUtilities
- Expose clock (THREE.Clock) in DefineSetupContext instead of getElapsed
- Implement framerate throttling in animation loop using accumulator pattern
- Add ForestGame texture area registration with playMode and mesh caching
- PanelsTest uses defineSetup with spinning cube and clock.getElapsedTime()

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
feat: default scene properties, split light registrations, filter tog…
d40573c 
…gle-all, fix ForestGame freeze

- Always populate camera/ground/lights/sky config with SCENE_DEFAULTS
- Register ambient-light and directional-light as separate element properties
- Add select all/none toggle button to element filter bar
- Fix ForestGame per-frame freeze by lazy-capturing orbit ref with toRaw()
- Swap Elements and Config button order in GlobalNavigation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
feat: add showElements option, debounce texture regeneration, optimiz…
8260a68 
…e mesh cache

- Add showElements to ViewPanelsConfig to control auto-opening elements panel
- ForestGame uses showElements: false to skip auto-open
- Debounce texture area and group regeneration (150ms) for smooth slider interaction
- Optimize buildAreaMeshCache to single-pass over scene.children

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
fix: GoombaRunner restart resets all elements, sharper ground texture
e314c0b 
- Reset textureAreaBackgrounds on restart (were stuck in falling state)
- Clear loggedCollisions on restart to prevent stale collision detection
- Refresh elements panel after game reset via onReset callback
- Apply NearestFilter to ground texture for sharper pixel art look

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
feat: register element properties for cloud and hill texture areas in…
089d3bc 
… GoombaRunner

Adds opacity and speed controls in the elements panel for texture area
groups. Opacity changes apply immediately to all meshes in the group.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
fix: register GoombaRunner texture areas in textureGroupsStore for El…
008d29d 
…ementGroup

ElementGroup requires groups to exist in textureGroupsStore to render
action buttons, texture previews, and schema controls. Register cloud
and hill groups with their textures and handlers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Review navigation bar and panels

1 participant

@cnotv