taye/interact.js
Interact.js
interact.js is a JavaScript interaction library used to implement drag and drop, resizing, and multi-touch gestures within web browsers. It provides a specialized interaction framework for scalable vector graphics, allowing these elements to be moved and resized.
The library features a multi-touch gesture engine that recognizes complex patterns such as pinch and rotate, and a coordinate snapping engine for aligning elements to grids or restricting movement within boundaries. It also includes a cross-frame state synchronizer to share interaction states and input events across multiple browser windows or embedded frames.
The project covers broad capability areas including motion physics for inertia-based velocity calculations and input normalization to unify mouse and touch events across browsers. Additional functionality includes coordinate-based state tracking and quantized snapping to align positions and sizes to predefined intervals.
Features
- Drag and Drop - Provides a comprehensive framework for implementing drag-and-drop interfaces with support for inertia and boundaries.
- Interactive Element Dragging - Enables moving elements across a screen with support for snapping and inertia.
- Interactive SVG Elements - Provides specialized tools to make SVG elements interactive through drag and resize capabilities.
- Drag and Drop Libraries - Provides a specialized library for implementing drag-and-drop, resizing, and multi-touch gestures in the browser.
- Movement Constraints - Applies restrictions to element movement, including axis locking and boundary clamping.
- Input Normalization Utilities - Unifies disparate mouse and touch pointer events into a consistent coordinate stream for cross-browser compatibility.
- Element Resizers - Provides utilities for interactively updating the bounding box dimensions of web elements.
- Grid Snapping - Aligns element positions and sizes to configurable grid increments during interactive movement or resizing.
- Interaction Coordinate Snapping - Provides a mechanism for aligning moving elements to grids or restricting movement boundaries.
- Multi-Touch Gesture Detections - Recognizes complex multi-touch patterns including pinch and rotate for web applications.
- Multi-Touch Gesture Systems - Processes simultaneous multi-finger inputs to recognize complex patterns like pinch and rotate.
- Boundary Constraints - Implements logic to restrict the movement of elements within defined containers or viewport areas.
- Event Normalizers - Translates native browser mouse and touch events into a unified internal coordinate system.
- Resize Mapping Logic - Provides logic that translates interactions on specific element perimeters into dimensional changes.
- Inertia Calculations - Computes movement decay based on input velocity to simulate natural physical momentum and smooth sliding.
- Spatial State Tracking - Tracks real-time X and Y coordinates of elements to maintain an accurate internal state of position and size.
- Coordinate Quantization - Rounds raw interaction coordinates to predefined intervals to ensure precise alignment of UI components.
- Cross-Frame Interaction Synchronization - Shares real-time interaction states and input events across multiple browser windows or embedded frames.
- Mobile Web Libraries - Library for drag, drop, and multi-touch gesture interactions.
