Fixes types

packages/core/src/renderer/components/canvas.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { useZoomEvents, useSafariFocusOutFix, useCanvasEvents, useCameraCss } from '../hooks'
 import { ErrorFallback } from './error-fallback'
-import type { TLPage, TLPageState, TLShape } from '../../types'
+import type { TLBinding, TLPage, TLPageState, TLShape } from '../../types'
 
 import { Brush } from './brush'
 import { Defs } from './defs'
@@ -14,7 +14,7 @@ function resetError() {
 }
 
 interface CanvasProps<T extends TLShape> {
-  page: TLPage<T>
+  page: TLPage<T, TLBinding>
   pageState: TLPageState
   hideBounds?: boolean
   hideHandles?: boolean

packages/core/src/renderer/components/page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useShapeTree } from '../hooks/useShapeTree'
-import type { IShapeTreeNode, TLPage, TLPageState, TLShape } from '../../types'
+import type { IShapeTreeNode, TLBinding, TLPage, TLPageState, TLShape } from '../../types'
 import { Shape as ShapeComponent } from './shape'
 import { useHandles, useRenderOnResize, useTLContext } from '../hooks'
 import { Bounds } from './bounds'
@@ -9,7 +9,7 @@ import { useSelection } from '../hooks'
 import { Handles } from './handles'
 
 interface PageProps<T extends TLShape> {
-  page: TLPage<T>
+  page: TLPage<T, TLBinding>
   pageState: TLPageState
   hideBounds: boolean
   hideHandles: boolean

packages/core/src/renderer/hooks/useHandles.ts

@@ -1,9 +1,6 @@
-import type { TLPage, TLPageState, TLShape } from '../../types'
+import type { TLBinding, TLPage, TLPageState, TLShape } from '../../types'
 
-export function useHandles<T extends TLShape>(
+export function useHandles<T extends TLShape>(page: TLPage<T, TLBinding>, pageState: TLPageState) {
-  page: TLPage<T>,
-  pageState: TLPageState
-) {
   const { selectedIds } = pageState
 
   let shapeWithHandles: TLShape | undefined = undefined

packages/core/src/renderer/hooks/useSelection.tsx

@@ -1,25 +1,13 @@
-import type {
+import type { TLPage, TLPageState, TLShape, TLBounds, TLShapeUtils, TLBinding } from '../../types'
-  TLPage,
-  TLPageState,
-  TLShape,
-  TLBounds,
-  TLShapeUtils,
-} from '../../types'
 import Utils from '../../utils'
 import { useTLContext } from '../hooks/useTLContext'
 
-function canvasToScreen(
+function canvasToScreen(point: number[], camera: TLPageState['camera']): number[] {
-  point: number[],
+  return [(point[0] + camera.point[0]) * camera.zoom, (point[1] + camera.point[1]) * camera.zoom]
-  camera: TLPageState['camera']
-): number[] {
-  return [
-    (point[0] + camera.point[0]) * camera.zoom,
-    (point[1] + camera.point[1]) * camera.zoom,
-  ]
 }
 
 export function useSelection<T extends TLShape>(
-  page: TLPage<T>,
+  page: TLPage<T, TLBinding>,
   pageState: TLPageState,
   shapeUtils: TLShapeUtils<T>
 ) {
@@ -59,14 +47,8 @@ export function useSelection<T extends TLShape>(
   }
 
   if (bounds) {
-    const [minX, minY] = canvasToScreen(
+    const [minX, minY] = canvasToScreen([bounds.minX, bounds.minY], pageState.camera)
-      [bounds.minX, bounds.minY],
+    const [maxX, maxY] = canvasToScreen([bounds.maxX, bounds.maxY], pageState.camera)
-      pageState.camera
-    )
-    const [maxX, maxY] = canvasToScreen(
-      [bounds.maxX, bounds.maxY],
-      pageState.camera
-    )
 
     rScreenBounds.current = {
       minX,

packages/core/src/renderer/hooks/useShapeTree.tsx

@@ -6,13 +6,14 @@ import type {
   TLShape,
   TLShapeUtils,
   TLCallbacks,
+  TLBinding,
 } from '../../types'
 import Utils, { Vec } from '../../utils'
 
 function addToShapeTree<T extends TLShape>(
   shape: TLShape,
   branch: IShapeTreeNode[],
-  shapes: TLPage<T>['shapes'],
+  shapes: TLPage<T, TLBinding>['shapes'],
   selectedIds: string[],
   info: {
     bindingId?: string
@@ -46,7 +47,7 @@ function addToShapeTree<T extends TLShape>(
 }
 
 export function useShapeTree<T extends TLShape>(
-  page: TLPage<T>,
+  page: TLPage<T, TLBinding>,
   pageState: TLPageState,
   shapeUtils: TLShapeUtils<T>,
   onChange?: TLCallbacks['onChange']
@@ -87,8 +88,7 @@ export function useShapeTree<T extends TLShape>(
 
     return (
       // TODO: Some shapes should always render (lines, rays)
-      Utils.boundsContain(viewport, shapeBounds) ||
+      Utils.boundsContain(viewport, shapeBounds) || Utils.boundsCollide(viewport, shapeBounds)
-      Utils.boundsCollide(viewport, shapeBounds)
     )
   })
 
@@ -105,9 +105,7 @@ export function useShapeTree<T extends TLShape>(
 
   shapesToRender
     .sort((a, b) => a.childIndex - b.childIndex)
-    .forEach((shape) =>
+    .forEach((shape) => addToShapeTree(shape, tree, page.shapes, selectedIds, pageState))
-      addToShapeTree(shape, tree, page.shapes, selectedIds, pageState)
-    )
 
   return tree
 }

packages/core/src/renderer/renderer.tsx

@@ -8,6 +8,7 @@ import type {
   TLShapeUtils,
   TLTheme,
   TLBounds,
+  TLBinding,
 } from '../types'
 import { Canvas } from './components/canvas'
 import { useTLTheme } from './hooks/useStyle'
@@ -17,7 +18,7 @@ export interface RendererProps<T extends TLShape>
   extends Partial<TLSettings>,
     Partial<TLCallbacks> {
   shapeUtils: TLShapeUtils<T>
-  page: TLPage<T>
+  page: TLPage<T, TLBinding>
   pageState: TLPageState
   theme?: Partial<TLTheme>
   hideBounds?: boolean

packages/core/src/types.tsx

@@ -1,11 +1,11 @@
 /* --------------------- Primary -------------------- */
 
-export interface TLPage<T extends TLShape> {
+export interface TLPage<T extends TLShape, B extends TLBinding> {
   id: string
   name?: string
   childIndex?: number
   shapes: Record<string, T>
-  bindings: Record<string, TLBinding>
+  bindings: Record<string, B>
   backgroundColor?: string
 }
 

packages/tldraw/tsconfig.json

@@ -7,6 +7,9 @@
     "jsx": "preserve",
     "lib": ["dom", "esnext"],
     "module": "esnext",
-    "outDir": "./dist/types"
+    "outDir": "./dist/types",
+    "paths": {
+      "@tldraw/core": ["packages/core/dist"]
+    }
   }
 }