# Task 4 Report: [Click To Toggle Visual State]

## Objective
Click an object and persistently toggle between two visual states (e.g., color lime/blue).

## Vanilla Three.js
- Possible: **Yes**
- Notes: Requires setting up a `Raycaster` + `mousedown` event, manually tracking a boolean state variable, and updating the material color on every click hit.
- Key concepts: `Persistent State Variable`, `if/else logic`, `Mutation Loop`.
- Complexity: **Medium**.

## R3F
- Possible: **Yes**
- Notes: Inherently simple. React's `useState` hook naturally handles the persistent toggle, and the `mesh` declarative `onClick` prop makes wiring it trivial.
- What R3F abstracted: `Raycaster computation`, `State-to-Visual binding`.
- Complexity: **Easy** (Very concise).

## Thob Page Builder
- Possible: **No (based on current testing)**
- Notes:
  - The `onClick` trigger is visible in the UI, but did not result in observable state changes during testing
  - No clear mechanism for defining or managing persistent state (e.g., toggle variable)
  - Unable to switch between two visual states using interaction
- Builder steps: `N/A`
- Complexity: **Limited** (interaction + state system not clearly supported)

## Comparison Summary
- Possible in all 3? **No** (toggle interaction not achieved in builder)

- Main differences:
  - **Vanilla**: Powerful but requires manual state management and more code
  - **R3F**: Clean and efficient for state-driven interactions
  - **Thob**: Interaction system present but lacks clear state handling and reliable execution

- Where Thob is better:
  - Static visual configuration

- Where Thob is weaker:
  - Lack of state management system
  - Unclear event-to-property binding
  - Interaction execution is not reliable during testing

- What feels awkward or unclear:
  - No visible way to define or store state (e.g., toggle)
  - Interaction triggers exist but do not clearly connect to visual updates

## Limitation Type (if any)
- [ ] Editor UX limitation
- [x] Runtime limitation (event execution unclear)
- [ ] Schema / data model limitation
- [ ] Component limitation
- [x] Event system limitation
- [x] Property binding limitation (no state system)
- [ ] Asset pipeline limitation
- [ ] Unknown / needs investigation

## Workaround
- No reliable workaround found for toggle interaction
- May require additional configuration or future feature support

## Suggested Improvement
- Improve reliability of `onClick` event execution
- Introduce a simple **state management system** (e.g., boolean variables)
- Allow **property binding** between state and visual properties (e.g., color)
- Provide clearer feedback when interaction actions fail

- Is it:
  - editor (Yes)
  - runtime (Yes)
  - component (No)
  - UX (Yes)
  - schema/data (Yes)

## Difficulty Estimate
- **Medium**

## Business Value
- **Critical** (Toggle interactions are essential for product configurators and interactive experiences)

## Recommendation
To support real-world interactive use cases, the builder should improve its event system and introduce a clear state management mechanism, enabling reliable toggle-based interactions.