71 lines
2.1 KiB
Markdown
71 lines
2.1 KiB
Markdown
# Builder Exploration Notes — Task 4: Click To Toggle Visual State
|
|
|
|
## Capability Gap Identified
|
|
|
|
- **Click Interaction Behavior**:
|
|
- `onClick` trigger is available in the UI, but did not produce visible state changes during testing
|
|
- Interaction execution appears inconsistent or unclear
|
|
|
|
- **State Management**:
|
|
- No visible support for defining or managing state variables (e.g., boolean toggle)
|
|
- No clear mechanism to store or switch between visual states
|
|
|
|
- **Visual State Transition**:
|
|
- Unable to toggle between two visual states (e.g., color change)
|
|
- Object remains in default appearance despite interaction attempts
|
|
|
|
---
|
|
|
|
## Observations
|
|
|
|
- Interaction system UI is present but lacks clear connection between events and property updates
|
|
- No built-in concept of "state" for managing toggles
|
|
- Event-to-property binding is not intuitive or not functioning as expected
|
|
|
|
---
|
|
|
|
## Comparison vs Code
|
|
|
|
- **Vanilla**:
|
|
- Requires raycasting + manual state handling
|
|
- Fully flexible but verbose
|
|
|
|
- **R3F**:
|
|
- Simple toggle using `onClick` + `useState`
|
|
- Very clean and reliable
|
|
|
|
- **Thob**:
|
|
- Click interaction present in UI
|
|
- Toggle behavior could not be achieved during testing
|
|
|
|
---
|
|
|
|
## Key Insight
|
|
|
|
The builder currently lacks a clear state management system and reliable event-to-property binding, making it difficult to implement toggle-based interactions.
|
|
|
|
---
|
|
|
|
## Product Perspective
|
|
|
|
Toggle interactions are essential for use cases like product configurators (e.g., switching colors, enabling features). Without reliable state handling, these use cases are difficult to implement.
|
|
|
|
---
|
|
|
|
## Improvement Recommendations
|
|
|
|
1. **State Management UI**
|
|
- Introduce simple state variables (e.g., `isActive`, `isSelected`)
|
|
|
|
2. **Property Binding System**
|
|
- Allow material properties (color, visibility, etc.) to be linked to state variables
|
|
|
|
3. **Reliable Event Execution**
|
|
- Ensure `onClick` triggers consistently update state and reflect changes in the UI
|
|
|
|
---
|
|
|
|
## Verdict
|
|
|
|
Strong for **static visual configuration**
|
|
Limited for **state-driven interactions (toggle, dynamic behavior)** |