81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import React, { useState, useEffect, useLayoutEffect } from 'react';
|
|
|
|
const useResponsiveCanvas = (maxWidth = 350) => {
|
|
const [scale, setScale] = useState(0.5);
|
|
|
|
const calculateScale = () => {
|
|
const viewportWidth = window.innerWidth;
|
|
const padding = 0; // 16px padding on each side
|
|
const availableWidth = viewportWidth - padding;
|
|
|
|
const constrainedWidth = Math.min(availableWidth, maxWidth);
|
|
const newScale = constrainedWidth / 720;
|
|
|
|
// Don't scale above 100% and ensure minimum scale for very small screens
|
|
setScale(Math.max(0.3, Math.min(newScale, 1)));
|
|
};
|
|
|
|
useLayoutEffect(() => {
|
|
calculateScale();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => calculateScale();
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
window.addEventListener('orientationchange', handleResize);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', handleResize);
|
|
window.removeEventListener('orientationchange', handleResize);
|
|
};
|
|
}, []);
|
|
|
|
return scale;
|
|
};
|
|
|
|
const EditorCanvas = ({maxWidth = 350}) => {
|
|
const scale = useResponsiveCanvas(maxWidth);
|
|
const canvasWidth = 720;
|
|
const canvasHeight = 1280;
|
|
const displayWidth = canvasWidth * scale;
|
|
const displayHeight = canvasHeight * scale;
|
|
|
|
const convertCoordinates = (e) => {
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
return {
|
|
x: (e.clientX - rect.left) / scale,
|
|
y: (e.clientY - rect.top) / scale
|
|
};
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto p-4">
|
|
<div
|
|
style={{
|
|
width: `${displayWidth}px`,
|
|
height: `${displayHeight}px`,
|
|
}}
|
|
>
|
|
<div
|
|
className="rounded-3xl bg-white shadow-sm origin-top-left"
|
|
style={{
|
|
width: `${canvasWidth}px`,
|
|
height: `${canvasHeight}px`,
|
|
transform: `scale(${scale})`,
|
|
}}
|
|
onClick={(e) => {
|
|
const { x, y } = convertCoordinates(e);
|
|
// Handle your canvas interactions here
|
|
// x, y are the actual canvas coordinates (0-720, 0-1280)
|
|
}}
|
|
>
|
|
{/* Your canvas content goes here */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditorCanvas;
|