68 lines
2.6 KiB
JavaScript
68 lines
2.6 KiB
JavaScript
// Shared layout constants for the editor
|
|
export const LAYOUT_CONSTANTS = {
|
|
// Fixed element heights
|
|
HEADER_HEIGHT: 64, // Header with padding
|
|
CONTROLS_HEIGHT: 48, // Button controls height
|
|
|
|
// Canvas dimensions
|
|
CANVAS_WIDTH: 720,
|
|
CANVAS_HEIGHT: 1280,
|
|
CANVAS_ASPECT_RATIO: 720 / 1280, // 9:16 aspect ratio
|
|
|
|
// Spacing and padding
|
|
MIN_PADDING: 16, // Minimum padding around elements
|
|
CONTAINER_SPACING: 16, // Space between header, canvas, and controls (space-y-4 = 16px)
|
|
CONTAINER_VERTICAL_PADDING: 24, // py-6 = 24px top + 24px bottom
|
|
};
|
|
|
|
// Calculate optimal maxWidth based on viewport dimensions
|
|
export const calculateOptimalMaxWidth = () => {
|
|
const viewportWidth = window.innerWidth;
|
|
const viewportHeight = window.innerHeight;
|
|
|
|
// Calculate total used height for fixed elements and spacing
|
|
const usedHeight =
|
|
LAYOUT_CONSTANTS.HEADER_HEIGHT +
|
|
LAYOUT_CONSTANTS.CONTROLS_HEIGHT +
|
|
(LAYOUT_CONSTANTS.CONTAINER_SPACING * 2) + // Space between elements
|
|
LAYOUT_CONSTANTS.CONTAINER_VERTICAL_PADDING + // py-6 padding
|
|
(LAYOUT_CONSTANTS.MIN_PADDING * 2); // Additional safety padding
|
|
|
|
const availableHeight = viewportHeight - usedHeight;
|
|
const availableWidth = viewportWidth - (LAYOUT_CONSTANTS.MIN_PADDING * 2);
|
|
|
|
// Calculate maxWidth based on both width and height constraints
|
|
const maxWidthFromHeight = availableHeight * LAYOUT_CONSTANTS.CANVAS_ASPECT_RATIO;
|
|
const maxWidthFromWidth = availableWidth;
|
|
|
|
// Use the smaller constraint to ensure everything fits
|
|
const optimalMaxWidth = Math.min(maxWidthFromHeight, maxWidthFromWidth);
|
|
|
|
// Ensure minimum viable size (but allow smaller if viewport is tiny)
|
|
const minViableWidth = 280;
|
|
|
|
return Math.max(optimalMaxWidth, Math.min(minViableWidth, availableWidth));
|
|
};
|
|
|
|
// Calculate responsive width based on optimal maxWidth
|
|
export const calculateResponsiveWidth = () => {
|
|
const optimalMaxWidth = calculateOptimalMaxWidth();
|
|
const viewportWidth = window.innerWidth;
|
|
const padding = LAYOUT_CONSTANTS.MIN_PADDING * 2;
|
|
const availableWidth = viewportWidth - padding;
|
|
|
|
return Math.min(availableWidth, optimalMaxWidth);
|
|
};
|
|
|
|
// Calculate responsive scale for canvas
|
|
export const calculateResponsiveScale = (maxWidth) => {
|
|
const viewportWidth = window.innerWidth;
|
|
const padding = LAYOUT_CONSTANTS.MIN_PADDING * 2;
|
|
const availableWidth = viewportWidth - padding;
|
|
const constrainedWidth = Math.min(availableWidth, maxWidth);
|
|
const scale = constrainedWidth / LAYOUT_CONSTANTS.CANVAS_WIDTH;
|
|
|
|
// Cap at 100% to avoid upscaling
|
|
return Math.min(scale, 1);
|
|
};
|