456 lines
18 KiB
TypeScript
456 lines
18 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
import { Editor, TLShapeId, getIndexAbove } from 'tldraw'
|
|
|
|
export interface PinnedViewOptions {
|
|
/**
|
|
* The position to pin the shape at.
|
|
* - 'current': Keep at current screen position (default)
|
|
* - 'top-center': Pin to top center of viewport
|
|
* - 'bottom-center': Pin to bottom center of viewport
|
|
* - 'center': Pin to center of viewport
|
|
*/
|
|
position?: 'current' | 'top-center' | 'bottom-center' | 'center'
|
|
/**
|
|
* Offset from the edge (for top-center, bottom-center positions)
|
|
*/
|
|
offsetY?: number
|
|
offsetX?: number
|
|
}
|
|
|
|
/**
|
|
* Hook to manage shapes pinned to the viewport.
|
|
* When a shape is pinned, it stays in the same screen position as the camera moves.
|
|
*/
|
|
export function usePinnedToView(
|
|
editor: Editor | null,
|
|
shapeId: string | undefined,
|
|
isPinned: boolean,
|
|
options: PinnedViewOptions = {}
|
|
) {
|
|
const { position = 'current', offsetY = 0, offsetX = 0 } = options
|
|
const pinnedScreenPositionRef = useRef<{ x: number; y: number } | null>(null)
|
|
const originalCoordinatesRef = useRef<{ x: number; y: number } | null>(null)
|
|
const originalSizeRef = useRef<{ w: number; h: number } | null>(null)
|
|
const originalZoomRef = useRef<number | null>(null)
|
|
const wasPinnedRef = useRef<boolean>(false)
|
|
const isUpdatingRef = useRef<boolean>(false)
|
|
const animationFrameRef = useRef<number | null>(null)
|
|
const lastCameraRef = useRef<{ x: number; y: number; z: number } | null>(null)
|
|
const pendingUpdateRef = useRef<{ x: number; y: number } | null>(null)
|
|
const lastUpdateTimeRef = useRef<number>(0)
|
|
const driftAnimationRef = useRef<number | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (!editor || !shapeId) {
|
|
return
|
|
}
|
|
|
|
const shape = editor.getShape(shapeId as TLShapeId)
|
|
if (!shape) return
|
|
|
|
// If just became pinned (transition from false to true), capture the current screen position
|
|
if (isPinned && !wasPinnedRef.current) {
|
|
// Store the original coordinates - these will be restored when unpinned
|
|
originalCoordinatesRef.current = { x: shape.x, y: shape.y }
|
|
|
|
// Store the original size and zoom - needed to maintain constant visual size
|
|
const currentCamera = editor.getCamera()
|
|
originalSizeRef.current = {
|
|
w: (shape.props as any).w || 0,
|
|
h: (shape.props as any).h || 0
|
|
}
|
|
originalZoomRef.current = currentCamera.z
|
|
|
|
// Calculate screen position based on position option
|
|
let screenPoint: { x: number; y: number }
|
|
const viewport = editor.getViewportScreenBounds()
|
|
const shapeWidth = (shape.props as any).w || 0
|
|
const shapeHeight = (shape.props as any).h || 0
|
|
|
|
if (position === 'top-center') {
|
|
// Center horizontally at the top of the viewport
|
|
screenPoint = {
|
|
x: viewport.x + (viewport.w / 2) - (shapeWidth * currentCamera.z / 2) + offsetX,
|
|
y: viewport.y + offsetY,
|
|
}
|
|
} else if (position === 'bottom-center') {
|
|
// Center horizontally at the bottom of the viewport
|
|
screenPoint = {
|
|
x: viewport.x + (viewport.w / 2) - (shapeWidth * currentCamera.z / 2) + offsetX,
|
|
y: viewport.y + viewport.h - (shapeHeight * currentCamera.z) - offsetY,
|
|
}
|
|
} else if (position === 'center') {
|
|
// Center in the viewport
|
|
screenPoint = {
|
|
x: viewport.x + (viewport.w / 2) - (shapeWidth * currentCamera.z / 2) + offsetX,
|
|
y: viewport.y + (viewport.h / 2) - (shapeHeight * currentCamera.z / 2) + offsetY,
|
|
}
|
|
} else {
|
|
// Default: use current position
|
|
const pagePoint = { x: shape.x, y: shape.y }
|
|
screenPoint = editor.pageToScreen(pagePoint)
|
|
}
|
|
|
|
pinnedScreenPositionRef.current = { x: screenPoint.x, y: screenPoint.y }
|
|
lastCameraRef.current = { ...currentCamera }
|
|
|
|
// Bring the shape to the front using tldraw's proper index functions
|
|
try {
|
|
const allShapes = editor.getCurrentPageShapes()
|
|
|
|
// Find the highest index among all shapes
|
|
let highestIndex = shape.index
|
|
for (const s of allShapes) {
|
|
if (s.id !== shape.id && s.index > highestIndex) {
|
|
highestIndex = s.index
|
|
}
|
|
}
|
|
|
|
// Only update if we need to move higher
|
|
if (highestIndex > shape.index) {
|
|
const newIndex = getIndexAbove(highestIndex)
|
|
editor.updateShape({
|
|
id: shapeId as TLShapeId,
|
|
type: shape.type,
|
|
index: newIndex,
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('Error bringing pinned shape to front:', error)
|
|
}
|
|
}
|
|
|
|
// If just became unpinned, animate back to original coordinates
|
|
if (!isPinned && wasPinnedRef.current) {
|
|
// Cancel any ongoing pinned position updates
|
|
if (animationFrameRef.current) {
|
|
cancelAnimationFrame(animationFrameRef.current)
|
|
animationFrameRef.current = null
|
|
}
|
|
|
|
// Animate back to original coordinates and size with a calm drift
|
|
if (originalCoordinatesRef.current && originalSizeRef.current && originalZoomRef.current !== null) {
|
|
const currentShape = editor.getShape(shapeId as TLShapeId)
|
|
if (currentShape) {
|
|
const startX = currentShape.x
|
|
const startY = currentShape.y
|
|
const targetX = originalCoordinatesRef.current.x
|
|
const targetY = originalCoordinatesRef.current.y
|
|
|
|
// Return to the exact original size (not calculated based on current zoom)
|
|
const originalW = originalSizeRef.current.w
|
|
const originalH = originalSizeRef.current.h
|
|
|
|
// Use the original size directly
|
|
const targetW = originalW
|
|
const targetH = originalH
|
|
|
|
const currentW = (currentShape.props as any).w || originalW
|
|
const currentH = (currentShape.props as any).h || originalH
|
|
|
|
const startW = currentW
|
|
const startH = currentH
|
|
|
|
// Only animate if there's a meaningful distance to travel or size change
|
|
const distance = Math.sqrt(
|
|
Math.pow(targetX - startX, 2) + Math.pow(targetY - startY, 2)
|
|
)
|
|
const sizeChange = Math.abs(targetW - startW) > 0.1 || Math.abs(targetH - startH) > 0.1
|
|
|
|
if (distance > 1 || sizeChange) {
|
|
// Animation parameters
|
|
const duration = 600 // 600ms for a calm drift
|
|
const startTime = performance.now()
|
|
|
|
// Easing function: ease-out for a calm deceleration
|
|
const easeOutCubic = (t: number): number => {
|
|
return 1 - Math.pow(1 - t, 3)
|
|
}
|
|
|
|
const animateDrift = (currentTime: number) => {
|
|
const elapsed = currentTime - startTime
|
|
const progress = Math.min(elapsed / duration, 1) // Clamp to 0-1
|
|
const easedProgress = easeOutCubic(progress)
|
|
|
|
// Interpolate position
|
|
const currentX = startX + (targetX - startX) * easedProgress
|
|
const currentY = startY + (targetY - startY) * easedProgress
|
|
|
|
// Interpolate size
|
|
const currentW = startW + (targetW - startW) * easedProgress
|
|
const currentH = startH + (targetH - startH) * easedProgress
|
|
|
|
try {
|
|
editor.updateShape({
|
|
id: shapeId as TLShapeId,
|
|
type: currentShape.type,
|
|
x: currentX,
|
|
y: currentY,
|
|
props: {
|
|
...currentShape.props,
|
|
w: currentW,
|
|
h: currentH,
|
|
},
|
|
})
|
|
} catch (error) {
|
|
console.error('Error during drift animation:', error)
|
|
driftAnimationRef.current = null
|
|
return
|
|
}
|
|
|
|
// Continue animation if not complete
|
|
if (progress < 1) {
|
|
driftAnimationRef.current = requestAnimationFrame(animateDrift)
|
|
} else {
|
|
// Animation complete - ensure we're exactly at target
|
|
try {
|
|
editor.updateShape({
|
|
id: shapeId as TLShapeId,
|
|
type: currentShape.type,
|
|
x: targetX,
|
|
y: targetY,
|
|
props: {
|
|
...currentShape.props,
|
|
w: targetW,
|
|
h: targetH,
|
|
},
|
|
})
|
|
console.log(`📍 Drifted back to original coordinates: (${targetX}, ${targetY}) and size: (${targetW}, ${targetH})`)
|
|
} catch (error) {
|
|
console.error('Error setting final position/size:', error)
|
|
}
|
|
driftAnimationRef.current = null
|
|
}
|
|
}
|
|
|
|
// Start the animation
|
|
driftAnimationRef.current = requestAnimationFrame(animateDrift)
|
|
} else {
|
|
// Distance is too small, just set directly
|
|
try {
|
|
editor.updateShape({
|
|
id: shapeId as TLShapeId,
|
|
type: currentShape.type,
|
|
x: targetX,
|
|
y: targetY,
|
|
props: {
|
|
...currentShape.props,
|
|
w: targetW,
|
|
h: targetH,
|
|
},
|
|
})
|
|
} catch (error) {
|
|
console.error('Error restoring original coordinates/size:', error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Clear refs after a short delay to allow animation to start
|
|
setTimeout(() => {
|
|
pinnedScreenPositionRef.current = null
|
|
originalCoordinatesRef.current = null
|
|
originalSizeRef.current = null
|
|
originalZoomRef.current = null
|
|
lastCameraRef.current = null
|
|
pendingUpdateRef.current = null
|
|
}, 50)
|
|
}
|
|
|
|
wasPinnedRef.current = isPinned
|
|
|
|
if (!isPinned) {
|
|
return
|
|
}
|
|
|
|
// Use requestAnimationFrame for smooth, continuous updates
|
|
// Throttle updates to reduce jitter
|
|
const updatePinnedPosition = (timestamp: number) => {
|
|
if (isUpdatingRef.current) {
|
|
animationFrameRef.current = requestAnimationFrame(updatePinnedPosition)
|
|
return
|
|
}
|
|
|
|
if (!editor || !shapeId || !isPinned) {
|
|
return
|
|
}
|
|
|
|
const currentShape = editor.getShape(shapeId as TLShapeId)
|
|
if (!currentShape) {
|
|
animationFrameRef.current = requestAnimationFrame(updatePinnedPosition)
|
|
return
|
|
}
|
|
|
|
const currentCamera = editor.getCamera()
|
|
const lastCamera = lastCameraRef.current
|
|
|
|
// For preset positions (top-center, etc.), always recalculate based on viewport
|
|
// For 'current' position, use the stored screen position
|
|
let pinnedScreenPos: { x: number; y: number }
|
|
|
|
if (position !== 'current') {
|
|
const viewport = editor.getViewportScreenBounds()
|
|
const shapeWidth = (currentShape.props as any).w || 0
|
|
const shapeHeight = (currentShape.props as any).h || 0
|
|
|
|
if (position === 'top-center') {
|
|
pinnedScreenPos = {
|
|
x: viewport.x + (viewport.w / 2) - (shapeWidth * currentCamera.z / 2) + offsetX,
|
|
y: viewport.y + offsetY,
|
|
}
|
|
} else if (position === 'bottom-center') {
|
|
pinnedScreenPos = {
|
|
x: viewport.x + (viewport.w / 2) - (shapeWidth * currentCamera.z / 2) + offsetX,
|
|
y: viewport.y + viewport.h - (shapeHeight * currentCamera.z) - offsetY,
|
|
}
|
|
} else if (position === 'center') {
|
|
pinnedScreenPos = {
|
|
x: viewport.x + (viewport.w / 2) - (shapeWidth * currentCamera.z / 2) + offsetX,
|
|
y: viewport.y + (viewport.h / 2) - (shapeHeight * currentCamera.z / 2) + offsetY,
|
|
}
|
|
} else {
|
|
pinnedScreenPos = pinnedScreenPositionRef.current!
|
|
}
|
|
} else {
|
|
if (!pinnedScreenPositionRef.current) {
|
|
animationFrameRef.current = requestAnimationFrame(updatePinnedPosition)
|
|
return
|
|
}
|
|
pinnedScreenPos = pinnedScreenPositionRef.current
|
|
}
|
|
|
|
// Check if camera has changed significantly
|
|
const cameraChanged = !lastCamera || (
|
|
Math.abs(currentCamera.x - lastCamera.x) > 0.1 ||
|
|
Math.abs(currentCamera.y - lastCamera.y) > 0.1 ||
|
|
Math.abs(currentCamera.z - lastCamera.z) > 0.001
|
|
)
|
|
|
|
// For preset positions, always check for updates (viewport might have changed)
|
|
const shouldUpdate = cameraChanged || position !== 'current'
|
|
|
|
if (shouldUpdate) {
|
|
// Throttle updates to max 60fps (every ~16ms)
|
|
const timeSinceLastUpdate = timestamp - lastUpdateTimeRef.current
|
|
const minUpdateInterval = 16 // ~60fps
|
|
|
|
if (timeSinceLastUpdate >= minUpdateInterval) {
|
|
try {
|
|
// Convert the pinned screen position back to page coordinates
|
|
const newPagePoint = editor.screenToPage(pinnedScreenPos)
|
|
|
|
// Calculate delta
|
|
const deltaX = Math.abs(currentShape.x - newPagePoint.x)
|
|
const deltaY = Math.abs(currentShape.y - newPagePoint.y)
|
|
|
|
// Check if zoom changed - if so, adjust size to maintain constant visual size
|
|
const zoomChanged = lastCamera && Math.abs(currentCamera.z - lastCamera.z) > 0.001
|
|
let needsSizeUpdate = false
|
|
let newW = (currentShape.props as any).w
|
|
let newH = (currentShape.props as any).h
|
|
|
|
if (zoomChanged && originalSizeRef.current && originalZoomRef.current !== null) {
|
|
// Calculate the size needed to maintain constant visual size
|
|
// Visual size = page size * zoom
|
|
// To keep visual size constant: new_page_size = (original_page_size * original_zoom) / new_zoom
|
|
const originalW = originalSizeRef.current.w
|
|
const originalH = originalSizeRef.current.h
|
|
const originalZoom = originalZoomRef.current
|
|
const currentZoom = currentCamera.z
|
|
|
|
newW = (originalW * originalZoom) / currentZoom
|
|
newH = (originalH * originalZoom) / currentZoom
|
|
|
|
const currentW = (currentShape.props as any).w || originalW
|
|
const currentH = (currentShape.props as any).h || originalH
|
|
|
|
// Check if size needs updating
|
|
needsSizeUpdate = Math.abs(newW - currentW) > 0.1 || Math.abs(newH - currentH) > 0.1
|
|
}
|
|
|
|
// Only update if the position would actually change significantly or size needs updating
|
|
if (deltaX > 0.5 || deltaY > 0.5 || needsSizeUpdate) {
|
|
isUpdatingRef.current = true
|
|
|
|
// Batch the update using editor.batch for smoother updates
|
|
editor.batch(() => {
|
|
const updateData: any = {
|
|
id: shapeId,
|
|
type: currentShape.type,
|
|
x: newPagePoint.x,
|
|
y: newPagePoint.y,
|
|
}
|
|
|
|
// Only update size if it changed
|
|
if (needsSizeUpdate) {
|
|
updateData.props = {
|
|
...currentShape.props,
|
|
w: newW,
|
|
h: newH,
|
|
}
|
|
}
|
|
|
|
editor.updateShape(updateData)
|
|
})
|
|
|
|
lastUpdateTimeRef.current = timestamp
|
|
isUpdatingRef.current = false
|
|
}
|
|
|
|
lastCameraRef.current = { ...currentCamera }
|
|
} catch (error) {
|
|
console.error('Error updating pinned shape position/size:', error)
|
|
isUpdatingRef.current = false
|
|
}
|
|
}
|
|
}
|
|
|
|
// Continue monitoring
|
|
animationFrameRef.current = requestAnimationFrame(updatePinnedPosition)
|
|
}
|
|
|
|
// Start the animation loop
|
|
lastUpdateTimeRef.current = performance.now()
|
|
animationFrameRef.current = requestAnimationFrame(updatePinnedPosition)
|
|
|
|
// Also listen for shape changes (in case user drags the shape while pinned)
|
|
// This updates the pinned position to the new location
|
|
const handleShapeChange = (event: any) => {
|
|
if (isUpdatingRef.current) return // Don't update if we're programmatically moving it
|
|
|
|
if (!editor || !shapeId || !isPinned) return
|
|
|
|
// Only respond to changes that affect this specific shape
|
|
const changedShapes = event?.changedShapes || event?.shapes || []
|
|
const shapeChanged = changedShapes.some((s: any) => s?.id === (shapeId as TLShapeId))
|
|
|
|
if (!shapeChanged) return
|
|
|
|
const currentShape = editor.getShape(shapeId as TLShapeId)
|
|
if (!currentShape) return
|
|
|
|
// Update the pinned screen position to the shape's current screen position
|
|
const pagePoint = { x: currentShape.x, y: currentShape.y }
|
|
const screenPoint = editor.pageToScreen(pagePoint)
|
|
pinnedScreenPositionRef.current = { x: screenPoint.x, y: screenPoint.y }
|
|
lastCameraRef.current = { ...editor.getCamera() }
|
|
}
|
|
|
|
// Listen for shape updates (when user drags the shape)
|
|
editor.on('change' as any, handleShapeChange)
|
|
|
|
return () => {
|
|
if (animationFrameRef.current) {
|
|
cancelAnimationFrame(animationFrameRef.current)
|
|
animationFrameRef.current = null
|
|
}
|
|
if (driftAnimationRef.current) {
|
|
cancelAnimationFrame(driftAnimationRef.current)
|
|
driftAnimationRef.current = null
|
|
}
|
|
editor.off('change' as any, handleShapeChange)
|
|
}
|
|
}, [editor, shapeId, isPinned, position, offsetX, offsetY])
|
|
}
|
|
|