100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import React, { useEffect, useLayoutEffect, useState } from 'react';
|
|
import { LAYOUT_CONSTANTS, calculateResponsiveScale } from '../utils/layout-constants';
|
|
|
|
const useResponsiveCanvas = (maxWidth: number = 350) => {
|
|
const [scale, setScale] = useState(() => calculateResponsiveScale(maxWidth));
|
|
|
|
useLayoutEffect(() => {
|
|
setScale(calculateResponsiveScale(maxWidth));
|
|
}, [maxWidth]);
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setScale(calculateResponsiveScale(maxWidth));
|
|
};
|
|
|
|
// Update immediately
|
|
handleResize();
|
|
|
|
// Event listeners
|
|
window.addEventListener('resize', handleResize);
|
|
window.addEventListener('orientationchange', handleResize);
|
|
|
|
// ResizeObserver for more reliable detection
|
|
let resizeObserver: ResizeObserver | undefined;
|
|
if (window.ResizeObserver) {
|
|
resizeObserver = new ResizeObserver(handleResize);
|
|
resizeObserver.observe(document.body);
|
|
}
|
|
|
|
// MutationObserver for dev tools detection
|
|
let mutationObserver: MutationObserver | undefined;
|
|
if (window.MutationObserver) {
|
|
mutationObserver = new MutationObserver(() => {
|
|
setTimeout(handleResize, 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;
|
|
};
|
|
|
|
interface EditorCanvasProps {
|
|
maxWidth?: number;
|
|
}
|
|
|
|
const EditorCanvas: React.FC<EditorCanvasProps> = ({ maxWidth = 350 }) => {
|
|
const scale = useResponsiveCanvas(maxWidth);
|
|
const displayWidth = LAYOUT_CONSTANTS.CANVAS_WIDTH * scale;
|
|
const displayHeight = LAYOUT_CONSTANTS.CANVAS_HEIGHT * 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="flex w-full justify-center">
|
|
<div
|
|
style={{
|
|
width: `${displayWidth}px`,
|
|
height: `${displayHeight}px`,
|
|
}}
|
|
>
|
|
<div
|
|
className="origin-top-left rounded-3xl border bg-white shadow-sm dark:bg-black"
|
|
style={{
|
|
width: `${LAYOUT_CONSTANTS.CANVAS_WIDTH}px`,
|
|
height: `${LAYOUT_CONSTANTS.CANVAS_HEIGHT}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)
|
|
console.log(`Canvas coordinates: x=${x}, y=${y}`);
|
|
}}
|
|
>
|
|
{/* Your canvas content goes here */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditorCanvas;
|