Flexalon supports built-in user interactions for clicking and dragging objects to insert, reorder, and remove them from layouts. Interaction works for world objects with a Collider component and UI objects with a Graphic component.
Setting up an interaction is simple:
- Add a Flexalon Interactable component to each object that you want to be clickable or draggable.
- Add a Flexalon Drag Target component to each layout that you to be able to add, remove, or reorder objects.
- Optionally, add a Flexalon Lerp Animator or Flexalon Rigid Body Animator components to make objects under the drag targets reorder smoothly.
For UI interactions, also ensure:
- There is an Event System component in the scene.
- There is a Graphics Raycaster component on the Canvas.
- Your interactable objects have a Graphic component with "Raycast Target" checked.
Interactable Options
| Clickable | Determines if this object can be clicked and generate click events. |
| Max Click Time | With a mouse or touch input, a click is defined as a press and release. The time between press and release must be less than Max Click Time to count as a click. A drag interaction cannot start until Max Click Time is exceeded. |
| Draggable | Determines if this object can be dragged and generate drag events. |
| Interpolation Speed | Determins how quickly the object moves towards the cursor when dragged. |
| Insert Radius (v3.2) | How close this object needs to a drag target's bounds to be inserted. |
| Restriction | Determines how to restrict the object's drag movement. Plane restriction ensures the object moves along a plane, defined by the objects initial position and the Plane Normal property. Line restriction ensures the object moves along a line, defined by the object's initial position and the Line Direction property. |
| Plane Normal | Defines the normal of the plane when using a plane restriction. If 'Local Space' is checked, this normal is rotated by the transform of the layout that the object is in. |
| Line Direction | Defines the direction of the line when using a line restriction. If 'Local Space' is checked, this direction is rotated by the transform of the layout that the object is in. |
| Hold Offset | When dragged, this option adds an offset to the dragged object's position. This can be used to float the object near the layout while it is being dragged. If 'Local Space' is checked, this offset is rotated and scaled by the transform of the layout that the object is in. |
| Rotate on Drag | When dragged, this option adds a rotation to the dragged object. This can be used to tilt the object while it is being dragged. If 'Local Space' is checked, this rotation will be in the local space of the layout that the object is in. |
| Hide Cursor | When checked, Cursor.visible is set to false when the object is dragged. |
| Handle (v4.0) | GameObject which should be hit tested for clicking / dragging instead of this object. For world interactions, the handle must have a collider component. For UI interactions, the handle must have a component which has "Raycast Target" checked. |
| Bounds | If set, the object cannot be dragged outside of the bounds collider. |
| Layer Mask | When dragged, limits which Flexalon Drag Targets will accept this object by comparing the Layer Mask to the target GameObject's layer. |
| Clicked (Event) | Unity Event invoked when the object is pressed and released within MaxClickTime. |
| Hover Start (Event) | Unity Event invoked when the object starts being hovered. |
| Hover End (Event) | Unity Event invoked when the object stops being hovered. |
| Select Start (Event) | Unity Event invoked when the object starts being selected (e.g. press down mouse over object). |
| Select End (Event) | Unity Event invoked when the object stops being selected (e.g. release mouse). |
| Drag Start (Event) | Unity Event invoked when the object starts being dragged. |
| Drag End (Event) | Unity Event invoked when the object stops being dragged. |
Event State Machine
This diagram explains how the interactable state machine works, and which events (in blue) will trigger at different transitions.
Drag Target Options
| Can Remove Objects | Determines if objects can be dragged out of this target. |
| Can Add Objects | Determines if new objects can be added to this target. |
| Min Objects | The minimum number of objects that should be in this target. Once the minimum is reached, objects cannot be dragged out. |
| Max Objects | The maximum number of objects that this target can hold. Once the maximum is reached, new objects cannot be dragged in. If Max Objects is set to 0, then it is unlimited. |
| Margin (v3.0) | The bounds of the drag target is determined by the layout size. The margin property increases or decreases the size of the bounds. |
Custom Input Provider
By default, Flexalon creates a FlexalonMouseInputProvider which uses the Unity legacy input system to handle mouse and touch interactions. If your game uses a different input system, then you can still use Flexalon Interactable by implementing the InputProvider interface. You can assign your input provider by:
- Assign Flexalon.GetOrCreate().InputProvider at runtime.
- Implement your InputProvider as a MonoBehaviour and assign it to the 'Input Provider' field on the Flexalon component.
InputProvider Interface
| InputMode (v3.2) | Determines if Flexalon Interactable should pick and move the object with the provided ray, or simply listen for positional changes on the ExternalFocusedObject.
|
| Active | True if the input is active, e.g. button is being held down. |
| Ray | In Rayast Mode, the ray to cast to determine what should be moved / hit. |
| ExternalFocusedObject (v3.2) | In External Mode, the object that is currently being hovered or selected. |