bokuweb/react-resizable-and-movable
React Resizable And Movable
هذا المشروع عبارة عن مكتبة تفاعل واجهة مستخدم React ومدير هندسة مكونات. يوفر مجموعة من الأدوات لإنشاء عناصر داخل تطبيق React يمكن للمستخدمين تحريكها وتغيير حجمها.
تسمح المكتبة بتخصيص مقابض التفاعل، مما يتيح تطبيق مكونات مخصصة، أو أنماط، أو فئات CSS على مقابض تغيير الحجم لتتناسب مع تصميمات مرئية محددة.
يغطي النظام معالجة العناصر من خلال تفاعل المستخدم المباشر وتحديثات الهندسة البرمجية. يتضمن قدرات لالتقاط الشبكة (grid snapping)، وقيود الحدود، ونسب العرض إلى الارتفاع المقفلة للتحكم في موضع وحجم مكونات واجهة المستخدم.
Features
- Draggable and Resizable React Components - Provides React components that make DOM elements draggable and resizable with bounding constraints.
- Drag and Resize Functionality - Makes DOM elements movable by dragging and resizable via their edges or corners.
- React Drag and Resize Libraries - Provides a set of tools for handling drag and drop movements and element scaling in React.
- Programmatic Position and Size - Programmatically controls the position, size and bounding constraints of UI elements.
- Interactive UI Elements - Enables the design of user interfaces where elements can be freely moved and resized.
- Mouse Event Handlers - Tracks mouse movement relative to click positions to calculate real-time element offsets and dimensions.
- Geometry State Management - Triggers component re-renders by updating position and size properties within the internal React state tree.
- Custom Resize Handles - Allows the application of custom components, styles, and CSS classes to resize handles.
- Resize Mapping Logic - Translates interactions on specific element handles into precise dimensional changes.
- Fixed Aspect Ratios - Implements constraints that maintain a constant relationship between width and height during resizing.
- Boundary Validation - Provides logic to validate and prevent elements from crossing specified container boundaries during movement.
- Grid Snapping - Aligns element positions and dimensions to a configurable pixel grid during user interaction.
- Visual Layout Editors - Supports the creation of tools for arranging and scaling components on a canvas.
- Miscellaneous Tools - Resizable and movable component.
