fix: camera move logic

tldraw/apps/tldraw-logseq/src/hooks/useCameraMoving.ts

@@ -1,57 +1,6 @@
-import * as React from 'react'
 import { useApp } from '@tldraw/react'
-import { useGesture } from '@use-gesture/react'
-import type { TLViewport } from '@tldraw/core'
 
-function useSampling(fn: () => void, rate: number) {
-  React.useEffect(() => {
-    const interval = setInterval(fn, 1000 / rate)
-    return () => clearInterval(interval)
-  }, [fn, rate])
-}
-
-function now() {
-  return new Date().getTime()
-}
-
-export function useCameraMovingRef(bias = 10, timeout = 1000) {
+export function useCameraMovingRef() {
   const app = useApp()
-  const movingRef = React.useRef<boolean>(false)
-  const prevCamera = React.useRef<TLViewport['camera']>()
-  const lastMovingRef = React.useRef<number>(now())
-  const sampleFn = React.useCallback(() => {
-    const { point, zoom } = app.viewport.camera
-    if (prevCamera.current) {
-      const { point: prevPoint } = prevCamera.current
-      const moving = Math.abs(point[0] - prevPoint[0]) + Math.abs(point[1] - prevPoint[1]) > bias
-      if (moving) {
-        movingRef.current = true
-        lastMovingRef.current = now()
-      } else if (now() - lastMovingRef.current > timeout) {
-        movingRef.current = false
-      }
-    }
-    prevCamera.current = {
-      point: [...point],
-      zoom,
-    }
-  }, [app])
-
-  useGesture(
-    {
-      // immediately set moving to false
-      onMouseDown: () => {
-        movingRef.current = false
-      },
-    },
-    {
-      eventOptions: {
-        capture: true,
-      },
-      target: window
-    }
-  )
-
-  useSampling(sampleFn, 30)
-  return movingRef
+  return app.inputs.state === 'panning' || app.inputs.state === 'pinching'
 }

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -105,7 +105,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     const { Page } = React.useContext(LogseqContext)
     const isSelected = app.selectedIds.has(this.id)
     const enableTlEvents = () => {
-      return isMoving.current || isEditing || isSelected || app.selectedTool.id !== 'select'
+      return isMoving || isEditing || isSelected || app.selectedTool.id !== 'select'
     }
 
     const stop = React.useCallback(

tldraw/packages/core/src/lib/TLInputs.ts

@@ -23,7 +23,7 @@ export class TLInputs<K extends TLEventMap> {
   @observable originPoint = [0, 0]
   pointerIds = new Set<number>()
 
-  @observable state: 'pointing' | 'pinching' | 'idle' = 'idle'
+  @observable state: 'pointing' | 'pinching' | 'idle' | 'panning' = 'idle'
 
   @action private updateModifiers(
     event: K['gesture'] | K['pointer'] | K['keyboard'] | K['wheel'] | K['touch']
@@ -45,6 +45,9 @@ export class TLInputs<K extends TLEventMap> {
     this.updateModifiers(event)
     this.previousPoint = this.currentPoint
     this.currentPoint = pagePoint
+    // start panning = true here in panCamera (called in TLApp)
+    this.state = 'panning'
+    // otherwise, set panning = false?
   }
 
   @action onPointerDown = (pagePoint: number[], event: K['pointer']) => {
@@ -61,6 +64,9 @@ export class TLInputs<K extends TLEventMap> {
     event: K['gesture'] | K['pointer'] | K['keyboard'] | K['wheel'] | K['touch']
   ) => {
     if (this.state === 'pinching') return
+    if (this.state === 'panning') {
+      this.state = 'idle'
+    }
     // if ('pointerId' in event && !this.pointerIds.has(event.pointerId)) return
     this.updateModifiers(event)
     this.previousPoint = this.currentPoint

tldraw/packages/core/src/lib/shapes/TLLineShape/TLLineShape.tsx

@@ -4,12 +4,8 @@ import type { TLHandle } from '~types'
 import { BoundsUtils, deepMerge } from '~utils'
 import { TLPolylineShape, TLPolylineShapeProps } from '../TLPolylineShape'
 
-interface TLLineHandle extends TLHandle {
-  id: 'start' | 'end'
-}
-
 export interface TLLineShapeProps extends TLPolylineShapeProps {
-  handles: TLLineHandle[]
+  handles: TLHandle[]
 }
 
 export class TLLineShape<
@@ -41,7 +37,7 @@ export class TLLineShape<
     return props
   }
 
-  getHandlesChange = (initialShape: P, handles: Partial<TLLineHandle>[]): P | void => {
+  getHandlesChange = (initialShape: P, handles: Partial<TLHandle>[]): P | void => {
     let nextHandles = handles.map((h, i) => deepMerge(initialShape.handles[i] ?? {}, h))
     nextHandles = nextHandles.map(h => ({ ...h, point: Vec.toFixed(h.point) }))
 

tldraw/packages/core/src/lib/shapes/TLShape/TLShape.ts

@@ -313,7 +313,7 @@ export abstract class TLShape<P extends TLShapeProps = TLShapeProps, M = any> {
     return this
   }
 
-  onHandleChange = (initialShape: P, { index, delta }: TLHandleChangeInfo) => {
+  onHandleChange = (initialShape: any, { index, delta }: TLHandleChangeInfo) => {
     if (initialShape.handles === undefined) return
     const nextHandles = [...initialShape.handles]
     nextHandles[index] = {