📐 Resizing & Positioning
Master precise element resizing and positioning in AppStruct. Learn how to control element dimensions, position, and responsive behavior across different devices and screen sizes.
Overview
AppStruct's resizing and positioning system provides:
- Visual Resize Controls - Interactive handles for visual resizing
- Precise Numeric Input - Exact values for pixel-perfect positioning
- Responsive Units - Support for both pixels and percentages
- Smart Constraints - Automatic boundary detection and constraints
- Mobile Optimization - Touch-friendly controls for mobile devices
1. Visual Resizing Controls
Resize Handles
- Corner Handles: Circular handles at element corners for proportional resizing
- Edge Handles: Rectangular handles on element edges for directional resizing
- Visual Feedback: Blue handles (#3378FF) indicate selected element
- Handle Visibility: Handles appear only when element is selected
Handle Behavior
- Corner Resize: Maintains aspect ratio when dragging corners
- Edge Resize: Resizes only in one direction (width or height)
- Minimum Size: Prevents resizing below 1px x 1px
- Maximum Size: Respects canvas and container boundaries
- Live Preview: Real-time visual feedback during resize operations
Mobile Enhancements
- Larger Handles: 24px touch-friendly handles on mobile devices
- Enhanced Visibility: Higher contrast and better visual indicators
- Touch Precision: Optimized for finger-based interaction
- Haptic Feedback: Vibration confirms resize operations
2. Positioning System
Position Properties
- Left: Horizontal position from left edge of container
- Top: Vertical position from top edge of container
- Width: Element width dimension
- Height: Element height dimension
- Units: Support for pixels (px) and percentages (%)
Position Modes
- Absolute Positioning: Elements positioned relative to their container
- Fixed Positioning: Elements positioned relative to viewport
- Relative Positioning: Elements positioned relative to their normal position
- Auto Positioning: System-calculated optimal positioning
3. Unit System
Pixel Units (px)
- Fixed Size: Absolute pixel values for precise control
- Device Independence: Consistent across different devices
- Desktop Friendly: Ideal for desktop applications
- Precision: Exact control down to individual pixels
Percentage Units (%)
- Responsive: Automatically adapts to container size changes
- Mobile Friendly: Better for responsive mobile layouts
- Flexible: Maintains proportions across screen sizes
- Container Relative: Calculated relative to parent container
Unit Conversion
- Automatic Conversion: System converts between units when needed
- Smart Positioning: Maintains visual position during unit changes
- Boundary Respect: Ensures elements stay within container bounds
- Proportional Scaling: Maintains visual relationships
4. Properties Panel Controls
Size Controls
- Width Input: Direct numeric input for element width
- Height Input: Direct numeric input for element height
- Unit Toggle: Switch between pixels and percentages
- Aspect Ratio: Lock/unlock aspect ratio during resizing
Position Controls
- Left Position: Horizontal position input
- Top Position: Vertical position input
- Position Preview: Visual preview of position changes
- Relative Values: Show position relative to container
Advanced Controls
- Min/Max Constraints: Set minimum and maximum size limits
- Position Constraints: Boundary and collision detection
- Responsive Behavior: Different values for different devices
- Transform Origin: Control point for transformations
5. Drag and Drop Positioning
Desktop Drag Behavior
- Click and Drag: Click element and drag to new position
- Live Preview: Real-time position feedback during drag
- Snap to Grid: Optional grid snapping for aligned layouts
- Boundary Constraints: Prevents dragging outside container
Mobile Touch Positioning
- Touch and Drag: Touch-optimized dragging with enhanced precision
- Visual Feedback: Clear visual indicators during touch operations
- Momentum: Natural momentum for smooth positioning
- Collision Detection: Prevents overlapping with other elements
Smart Positioning Features
- Snap Lines: Visual guides for alignment with other elements
- Smart Guides: Automatic alignment suggestions
- Boundary Indicators: Visual feedback for container boundaries
- Undo Support: Full undo/redo support for positioning operations
6. Responsive Positioning
Device-Specific Sizing
- Mobile Settings: Optimized sizes for mobile devices
- Tablet Settings: Intermediate sizes for tablet screens
- Desktop Settings: Full-featured sizes for desktop displays
- Adaptive Scaling: Automatic scaling between device sizes
Breakpoint Management
- Responsive Breakpoints: Define different sizes at different screen widths
- Media Query Support: CSS media query integration
- Adaptive Units: Switch between absolute and relative units per device
- Preview Mode: Test responsive behavior across device types
7. Alignment and Distribution
Alignment Options
- Horizontal Alignment: Left, center, right alignment within container
- Vertical Alignment: Top, middle, bottom alignment within container
- Container Alignment: Align relative to parent container boundaries
- Element Alignment: Align relative to other selected elements
Distribution Tools
- Equal Spacing: Distribute elements with equal spacing
- Distribute Horizontally: Even horizontal distribution
- Distribute Vertically: Even vertical distribution
- Smart Distribution: Automatic optimal distribution
8. Advanced Positioning Features
Constraints and Boundaries
- Container Boundaries: Respect parent container limits
- Minimum Visibility: Ensure at least 70% of element remains visible
- Overflow Handling: Smart behavior when elements exceed boundaries
- Z-Index Awareness: Consider layering during positioning
Smart Positioning Algorithms
- Collision Avoidance: Automatic adjustment to avoid overlaps
- Optimal Placement: Calculate best position for new elements
- Relationship Preservation: Maintain spatial relationships during moves
- Performance Optimization: Efficient calculations for smooth interaction
9. Group Positioning
Group Resize Behavior
- Group-Level Resizing: Resize entire groups as single units
- Proportional Scaling: Child elements scale proportionally
- Constraint Inheritance: Groups inherit positioning constraints
- Nested Group Support: Handle complex nested group structures
Child Element Positioning
- Relative to Group: Child positions calculated relative to group
- Group Transformation: Group movements affect all children
- Independent Editing: Edit individual children within groups
- Hierarchy Respect: Maintain parent-child positioning relationships
10. Mobile-Specific Features
Touch Interaction Enhancements
- Large Touch Targets: Minimum 44px touch targets for accessibility
- Enhanced Visual Feedback: Clear indicators for touch operations
- Gesture Support: Multi-touch gestures for complex operations
- Performance Optimization: Smooth 60fps interactions on mobile
Mobile Positioning Tools
- FAB Controls: Floating action buttons for quick positioning
- Swipe Gestures: Gesture-based positioning shortcuts
- Voice Commands: Voice-activated positioning (where supported)
- Accessibility: Full accessibility support for positioning tools
11. Keyboard Shortcuts
Position Shortcuts
- Arrow Keys: Nudge element by 1px in any direction
- Shift + Arrow: Nudge element by 10px in any direction
- Ctrl + Arrow: Nudge element by 1px with precision mode
- Alt + Arrow: Resize element by 1px in corresponding direction
Selection and Positioning
- Ctrl + A: Select all elements for bulk positioning
- Tab: Cycle through elements for sequential positioning
- Enter: Confirm position changes
- Escape: Cancel ongoing position operations
12. Best Practices
Design Principles
- Mobile First: Design for mobile, then scale up to desktop
- Consistent Spacing: Use consistent spacing patterns throughout
- Alignment Systems: Establish and maintain alignment grids
- Responsive Planning: Plan responsive behavior from the start
Performance Considerations
- Minimize Reflows: Avoid frequent position changes during animations
- Batch Operations: Group multiple positioning operations when possible
- Optimize for Touch: Ensure smooth performance on mobile devices
- Test Across Devices: Verify positioning across different screen sizes
13. Troubleshooting
Common Issues
- Element Disappears: Check if element moved outside visible area
- Resize Not Working: Verify element is selected and not locked
- Position Jumping: Check for unit conflicts (px vs %)
- Performance Issues: Reduce complexity for smoother interaction
Debugging Techniques
- Reset Position: Use reset commands to restore default positioning
- Step-by-Step: Make incremental changes to isolate issues
- Unit Verification: Verify unit consistency across elements
- Container Inspection: Check parent container constraints
14. Properties Reference
Size Properties
- width: Element width (px or %)
- height: Element height (px or %)
- min-width: Minimum width constraint
- max-width: Maximum width constraint
- min-height: Minimum height constraint
- max-height: Maximum height constraint
Position Properties
- left: Left position (px or %)
- top: Top position (px or %)
- right: Right position (px or %)
- bottom: Bottom position (px or %)
- z-index: Layer stacking order
Need Assistance?
If you encounter any challenges with element resizing and positioning, please refer to the Documentation or contact our support team at [email protected].