96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { Editor, TLFrameShape, TLParentId } from 'tldraw';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
|
|
const initialCamera = { x: 0, y: 0, z: 1 };
|
|
|
|
export function useCameraControls(editor: Editor | null) {
|
|
const [searchParams] = useSearchParams();
|
|
|
|
useEffect(() => {
|
|
if (!editor) return;
|
|
|
|
const frameId = searchParams.get('frameId');
|
|
const x = searchParams.get('x');
|
|
const y = searchParams.get('y');
|
|
const zoom = searchParams.get('zoom');
|
|
|
|
console.log('Loading camera position:', { frameId, x, y, zoom });
|
|
|
|
if (x && y && zoom) {
|
|
editor.setCamera({
|
|
x: parseFloat(x),
|
|
y: parseFloat(y),
|
|
z: parseFloat(zoom)
|
|
});
|
|
console.log('Camera position set from URL params');
|
|
return;
|
|
}
|
|
|
|
if (!frameId) return;
|
|
|
|
const frame = editor.getShape(frameId as TLParentId) as TLFrameShape;
|
|
if (!frame) {
|
|
console.warn('Frame not found:', frameId);
|
|
return;
|
|
}
|
|
|
|
editor.zoomToBounds(
|
|
editor.getShapePageBounds(frame)!,
|
|
{
|
|
inset: 32,
|
|
targetZoom: editor.getCamera().z,
|
|
}
|
|
);
|
|
|
|
const newUrl = new URL(window.location.href);
|
|
newUrl.searchParams.set('frameId', frameId);
|
|
window.history.replaceState(null, '', newUrl.toString());
|
|
}, [editor, searchParams]);
|
|
|
|
const copyLocationLink = () => {
|
|
if (!editor) return;
|
|
const camera = editor.getCamera();
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set('x', camera.x.toString());
|
|
url.searchParams.set('y', camera.y.toString());
|
|
url.searchParams.set('zoom', camera.z.toString());
|
|
console.log('Copying location link:', url.toString());
|
|
navigator.clipboard.writeText(url.toString());
|
|
};
|
|
|
|
const zoomToFrame = (frameId: string) => {
|
|
if (!editor) return;
|
|
|
|
const frame = editor.getShape(frameId as TLParentId) as TLFrameShape;
|
|
if (!frame) {
|
|
console.warn('Frame not found:', frameId);
|
|
return;
|
|
}
|
|
|
|
editor.zoomToBounds(
|
|
editor.getShapePageBounds(frame)!,
|
|
{
|
|
inset: 32,
|
|
targetZoom: editor.getCamera().z,
|
|
}
|
|
);
|
|
};
|
|
|
|
const copyFrameLink = (frameId: string) => {
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set('frameId', frameId);
|
|
console.log('Copying frame link:', url.toString());
|
|
navigator.clipboard.writeText(url.toString());
|
|
};
|
|
|
|
return {
|
|
zoomToFrame,
|
|
copyFrameLink,
|
|
copyLocationLink,
|
|
revertCamera: () => {
|
|
if (!editor) return
|
|
editor.setCamera(initialCamera)
|
|
}
|
|
};
|
|
}
|