fix(whiteboard): some multi touch issues

tldraw/apps/tldraw-logseq/src/components/Devtools/Devtools.tsx

@@ -6,7 +6,7 @@ import ReactDOM from 'react-dom'
 import type { Shape } from '../../lib'
 
 const printPoint = (point: number[]) => {
-  return `[${point.map(d => d.toFixed(2)).join(', ')}]`
+  return `[${point.map(d => d?.toFixed(2) ?? '-').join(', ')}]`
 }
 
 const HistoryStack = observer(function HistoryStack() {
@@ -75,7 +75,7 @@ export const DevTools = observer(() => {
   }, [])
 
   const rendererStatusText = [
-    ['Z', zoom.toFixed(2)],
+    ['Z', zoom?.toFixed(2) ?? 'null'],
     ['MP', printPoint(inputs.currentPoint)],
     ['MS', printPoint(inputs.currentScreenPoint)],
     ['VP', printPoint(point)],

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

@@ -126,7 +126,7 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
     } = this
     return (
       <path
-        pointerEvents="none"
+        pointerEvents="all"
         d={pointsPath}
         strokeWidth={strokeWidth / 2}
         strokeLinejoin="round"

tldraw/demo/src/App.jsx

@@ -29,7 +29,7 @@ const documentModel = onLoad() ?? {
           type: 'logseq-portal',
           parentId: 'page1',
           point: [369.109375, 170.5546875],
-          size: [0, 0],
+          size: [240, 0],
           stroke: '',
           fill: '',
           strokeWidth: 2,
@@ -44,31 +44,26 @@ const documentModel = onLoad() ?? {
   ],
 }
 
-const Page = props => {
-  const [value, setValue] = React.useState(JSON.stringify(props, null, 2))
+const Page = () => {
   return (
     <div className="w-full font-mono page">
-      <div className="min-w-[240px]">
-        The Circle components are a collection of standardized UI elements and patterns for building
-        products. These pages provide more information and best practices on how to use the
-        components.The Circle components are a collection of standardized UI elements and patterns
-        for building products. These pages provide more information and best practices on how to use
-        the components.
-      </div>
+      The Circle components are a collection of standardized UI elements and patterns for building
+      products. These pages provide more information and best practices on how to use the
+      components.The Circle components are a collection of standardized UI elements and patterns for
+      building products. These pages provide more information and best practices on how to use the
+      components.
     </div>
   )
 }
 
-const Block = props => {
+const Block = () => {
   return (
     <div className="w-full font-mono single-block">
-      <div className="min-w-[240px]">
-        The Circle components are a collection of standardized UI elements and patterns for building
-        products. These pages provide more information and best practices on how to use the
-        components.The Circle components are a collection of standardized UI elements and patterns
-        for building products. These pages provide more information and best practices on how to use
-        the components.
-      </div>
+      The Circle components are a collection of standardized UI elements and patterns for building
+      products. These pages provide more information and best practices on how to use the
+      components.The Circle components are a collection of standardized UI elements and patterns for
+      building products. These pages provide more information and best practices on how to use the
+      components.
     </div>
   )
 }

tldraw/packages/react/src/hooks/useCanvasEvents.ts

@@ -20,6 +20,12 @@ export function useCanvasEvents() {
     const onPointerDown: TLReactCustomEvents['pointer'] = e => {
       const { order = 0 } = e
       if (!order) e.currentTarget?.setPointerCapture(e.pointerId)
+
+      if (!e.isPrimary) {
+        // ignore secondary pointers (in multi-touch scenarios)
+        return
+      }
+
       callbacks.onPointerDown?.({ type: TLTargetType.Canvas, order }, e)
 
       const now = Date.now()

tldraw/packages/react/src/hooks/usePreventNavigation.ts

@@ -14,6 +14,9 @@ export function usePreventNavigation(rCanvas: React.RefObject<HTMLDivElement>):
     }
 
     const preventNavigation = (event: TouchEvent) => {
+      if (event.touches.length === 0) {
+        return
+      }
       // Center point of the touch area
       const touchXPosition = event.touches[0].pageX
       // Size of the touch area

tldraw/packages/react/src/hooks/useZoom.ts

@@ -9,7 +9,7 @@ export function useZoom(ref: React.RefObject<HTMLDivElement>) {
   React.useLayoutEffect(() => {
     return autorun(() => {
       const zoom = viewport.camera.zoom
-      if (app.inputs.state !== 'pinching') {
+      if (app.inputs.state !== 'pinching' && zoom != null) {
         ref.current?.style.setProperty('--tl-zoom', zoom.toString())
       }
     })