charlestehio/memefast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
ct
2025-06-16 19:08:45 +08:00
parent ff981ea9f0
commit 4220709b57
13 changed files with 159 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
resources/js/modules/editor/utils/layout-constants.js Normal file
View File

@@ -0,0 +1,67 @@
// 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);
};

67
resources/js/modules/editor/utils/layout-constants.ts
View File

@@ -1,67 +0,0 @@
// 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 = (): number => {
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 = (): number => {
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: number): number => {
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);
};