123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
import React, { useState, useEffect, useLayoutEffect } from 'react';
|
|
|
|
// Move calculation outside the hook for best performance
|
|
const calculateResponsiveScale = (maxWidth) => {
|
|
const viewportWidth = window.innerWidth;
|
|
|
|
// Very aggressive padding reduction for small screens
|
|
let padding;
|
|
if (viewportWidth < 320) {
|
|
padding = 0; // Almost no padding on very small screens
|
|
} else if (viewportWidth < 400) {
|
|
padding = 0; // Minimal padding on small screens
|
|
} else {
|
|
padding = 0; // Normal padding on larger screens
|
|
}
|
|
|
|
const availableWidth = viewportWidth - padding;
|
|
const constrainedWidth = Math.min(availableWidth, maxWidth);
|
|
const newScale = constrainedWidth / 720;
|
|
|
|
// Just cap at 100%, no minimum to avoid clipping
|
|
return Math.min(newScale, 1);
|
|
};
|
|
|
|
const useResponsiveCanvas = (maxWidth = 350) => {
|
|
const [scale, setScale] = useState(0.5);
|
|
|
|
useLayoutEffect(() => {
|
|
setScale(calculateResponsiveScale(maxWidth));
|
|
}, [maxWidth]);
|
|
|
|
useEffect(() => {
|
|
// Update immediately
|
|
setScale(calculateResponsiveScale(maxWidth));
|
|
|
|
// Create event handlers inside effect
|
|
const handleResize = () => {
|
|
setScale(calculateResponsiveScale(maxWidth));
|
|
};
|
|
|
|
// Multiple event listeners for better coverage
|
|
window.addEventListener('resize', handleResize);
|
|
window.addEventListener('orientationchange', handleResize);
|
|
|
|
// ResizeObserver for more reliable detection in dev tools
|
|
let resizeObserver;
|
|
if (window.ResizeObserver) {
|
|
resizeObserver = new ResizeObserver(() => {
|
|
setScale(calculateResponsiveScale(maxWidth));
|
|
});
|
|
resizeObserver.observe(document.body);
|
|
}
|
|
|
|
// MutationObserver to catch when dev tools changes the viewport
|
|
let mutationObserver;
|
|
if (window.MutationObserver) {
|
|
mutationObserver = new MutationObserver(() => {
|
|
setTimeout(() => {
|
|
setScale(calculateResponsiveScale(maxWidth));
|
|
}, 50);
|
|
});
|
|
mutationObserver.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ['style']
|
|
});
|
|
}
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', handleResize);
|
|
window.removeEventListener('orientationchange', handleResize);
|
|
if (resizeObserver) resizeObserver.disconnect();
|
|
if (mutationObserver) mutationObserver.disconnect();
|
|
};
|
|
}, [maxWidth]);
|
|
|
|
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="w-full flex justify-center">
|
|
<div
|
|
style={{
|
|
width: `${displayWidth}px`,
|
|
height: `${displayHeight}px`,
|
|
}}
|
|
>
|
|
<div
|
|
className="border 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;
|