Design Intuition

Appearance

Milestone 4: Hits Manager ​

Timeline: Jan 8, 2026 | Status: done

Done ​

  • thumb buttons on sliders
    • all sliders should use the hit target system
      • same color scheme
      • same thumb size
    • P_Repeat gap_min / gap_max sliders — pointer-events: none on input blocks :hover state; thumb hover CSS won't fire; needs different approach
    • thumb on scaling corrupts guides slider — new, undiagnosed
  • and segmented controls

Goal ​

Borrow and deploy the hits manager from ws (webseriously) to di. Use it to create a uniform UX

What Emerged ​

A clean port of ws's spatial indexing system. RBush provides O(log n) hit detection. Mouse events route through a unified handler. Components register as hit targets and respond to hover/click. The graph background changes color on hover as proof of integration.

Our Work ​

Review ws implementation ​

  • src/lib/ts/managers/Hits.ts — main manager (RBush spatial index, click handling)
  • src/lib/ts/state/S_Hit_Target.ts — hit target class
  • src/lib/ts/signals/Mouse_Timer.ts — timer for long-click, double-click, autorepeat

Identify what di already has ​

  • S_Mouse — identical to ws ✓
  • T_Hit_Target enum ✓
  • T_Mouse_Detection enum ✓
  • T_Drag enum ✓
  • Constants.threshold (autorepeat, double_click, long_click) ✓
  • Point, Rect types ✓

Dependencies to add ​

  • Install rbush package (yarn add rbush @types/rbush)
  • Create src/lib/ts/signals/Mouse_Timer.ts
  • Create src/lib/ts/state/S_Hit_Target.ts
  • Create src/lib/ts/managers/Hits.ts
  • Add asBBox to Point and Rect in Coordinates.ts
  • Create src/lib/ts/signals/Events.ts (mouse event handlers)
  • Create src/lib/ts/state/S_Component.ts
  • Create src/lib/ts/managers/Components.ts

Simplifications for di ​

  • Remove ws-specific: radial, controls, ancestry, colors references
  • Remove ring/paging/widget-specific logic (not needed yet)
  • Keep: RBush indexing, hover detection, click/long-click/double-click handling

Integration ​

  • Add hits export to common imports
  • Create src/lib/ts/signals/Events.ts (mouse event handlers)
  • Call e.setup() on app init (Main.svelte onMount)
  • Make graph an S_Component hit target
  • Add hover reaction (background turns white)
  • Fix: clear hover on mouseleave and recalibrate on resize
  • Test hover detection
  • Test click handling

Deploy ​

Artifacts ​

  • src/lib/ts/managers/Hits.ts — RBush spatial index, click routing
  • src/lib/ts/managers/Components.ts — component registry
  • src/lib/ts/state/S_Hit_Target.ts — hit target state
  • src/lib/ts/state/S_Component.ts — component state
  • src/lib/ts/signals/Mouse_Timer.ts — long-click, double-click timing
  • src/lib/ts/signals/Events.ts — unified mouse event handlers