Overlay positioning

You will be able to move and resize the entire overlay within its Canvas resolution.

How it will work

• Drag the overlay body to change its position.
• Drag the red border handles to resize.
• The aspect ratio is free unless constrained in the future by settings.

Why this matters

Positioning lets you fit the overlay into complex scenes without editing layouts on the main page. It saves time when switching scenes.

Status

✅ Available - This feature is now implemented and ready to use!

Usage

1. Moving the overlay: Click and drag anywhere inside the overlay to change its position
2. Resizing width: Drag the left or right borders to adjust the width
3. Resizing height: Drag the top or bottom borders to adjust the height
4. Resizing both dimensions: Drag the red corner handle in the bottom-right to resize both width and height simultaneously
5. Snap to guides: The overlay will automatically snap to container edges and center lines when dragged close to them

Visual Indicators

• Red border: Shows the overlay boundaries and indicates it's selected for positioning
• Red corner square: Located in bottom-right corner for diagonal resizing
• Green guidelines: Appear when snapping to help with precise alignment

Constraints

• Overlays cannot be moved outside the canvas boundaries
• Minimum overlay size is enforced (50px × 50px)
• All transforms are saved automatically as you make changes