Updates to new core. (#210)

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,7 @@
 ---
 name: Bug Report
 about: Writing and other documentation.
-title: '[Bug] Bug description'
+title: '[bug] Bug description'
 labels: bug
 assignees: ''
 ---

.github/ISSUE_TEMPLATE/feature.md

@@ -2,6 +2,6 @@
 name: Feature
 about: Begin discussion of a new feature.
 title: '[feature] Feature or improvement'
-labels: enhancement
+labels: feature
 assignees: ''
 ---

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.0.131
+
+### TLCore
+
+- Extracted into its own repository (`tldraw/core`) and open sourced! :clap:
+
+### TLDraw
+
+- Updated with latest `@tldraw/core`, updated ShapeUtils API.
+
 ## 0.0.130
 
 ### TLCore

package.json

@@ -8,7 +8,6 @@
     "url": "git+https://github.com/tldraw/tldraw.git"
   },
   "license": "MIT",
-  "version": "0.0.74",
   "workspaces": [
     "packages/tldraw",
     "packages/dev",
@@ -83,8 +82,7 @@
       "@tldraw/vec": "<rootDir>/packages/vec/src",
       "@tldraw/intersect": "<rootDir>/packages/intersect/src",
       "@tldraw/tldraw": "<rootDir>/packages/tldraw/src",
-      "\\~(.*)": "<rootDir>/packages/tldraw/src/$1",
+      "\\~(.*)": "<rootDir>/packages/tldraw/src/$1"
-      "\\+(.*)": "<rootDir>/packages/core/src/$1"
     }
   }
-}
+}

packages/dev/tsconfig.json

@@ -9,15 +9,14 @@
     "emitDeclarationOnly": false,
     "paths": {
       "+*": ["./*"],
-      "@tldraw/core": ["../vec"],
+      "@tldraw/core": ["../core"],
-      "@tldraw/tldraw": ["../intersect"]
+      "@tldraw/tldraw": ["../tldraw"]
     }
   },
   "references": [
     {
       "path": "../tldraw"
-    },
+    }
-    { "path": "../core" }
   ],
   "typedocOptions": {
     "entryPoints": ["src/index.ts"],

packages/tldraw/package.json

@@ -36,13 +36,15 @@
     "@babel/preset-env": "^7.15.4",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.10",
-    "@types/react": "^16.9.55",
+    "@types/react": "^17.0.33",
-    "@types/react-dom": "^16.9.9",
+    "@types/react-dom": "^17.0.10",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "esbuild": "^0.13.8",
     "eslint": "^7.32.0",
     "lerna": "^4.0.0",
+    "react": ">=16.8",
+    "react-dom": "^16.8 || ^17.0",
     "ts-node": "^10.2.1",
     "tsconfig-replace-paths": "^0.0.5",
     "tslib": "^2.3.1",
@@ -64,7 +66,7 @@
     "@radix-ui/react-tooltip": "^0.1.1",
     "@stitches/core": "^1.2.5",
     "@stitches/react": "^1.0.0",
-    "@tldraw/core": "^0.1.4",
+    "@tldraw/core": "^0.1.9",
     "@tldraw/intersect": "^0.0.130",
     "@tldraw/vec": "^0.0.130",
     "perfect-freehand": "^1.0.16",

packages/tldraw/src/components/tldraw/tldraw.test.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import { act } from 'react-dom/test-utils'
 import { TLDraw } from './tldraw'
 
 describe('tldraw', () => {

packages/tldraw/src/components/tldraw/tldraw.tsx

@@ -23,7 +23,7 @@ const isHideBoundsShapeSelector = (s: Data) => {
   const { selectedIds } = s.document.pageStates[s.appState.currentPageId]
   return (
     selectedIds.length === 1 &&
-    selectedIds.every((id) => !TLDR.getShapeUtils(shapes[id].type).showBounds)
+    !selectedIds.every((id) => !TLDR.getShapeUtils(shapes[id].type).hideBounds)
   )
 }
 

packages/tldraw/src/shape-utils/TLDrawShapeUtil.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Utils, TLShapeUtil } from '@tldraw/core'
-import type { TLPointerInfo, TLBinding, TLBounds } from '@tldraw/core'
+import type { TLPointerInfo, TLBounds } from '@tldraw/core'
 import { intersectRayBounds } from '@tldraw/intersect'
 import { Vec } from '@tldraw/vec'
-import type { TLDrawMeta, TLDrawShape, TLDrawTransformInfo } from '~types'
+import type { TLDrawBinding, TLDrawMeta, TLDrawShape, TLDrawTransformInfo } from '~types'
 import * as React from 'react'
 
 export abstract class TLDrawShapeUtil<
@@ -13,6 +13,14 @@ export abstract class TLDrawShapeUtil<
 > extends TLShapeUtil<T, E, TLDrawMeta> {
   abstract type: T['type']
 
+  canBind = false
+
+  canEdit = false
+
+  canClone = false
+
+  isAspectRatioLocked = false
+
   abstract getShape: (props: Partial<T>) => T
 
   create = (props: { id: string } & Partial<T>) => {
@@ -127,7 +135,7 @@ export abstract class TLDrawShapeUtil<
 
   onBindingChange?: (
     shape: T,
-    binding: TLBinding,
+    binding: TLDrawBinding,
     target: TLDrawShape,
     targetBounds: TLBounds,
     center: number[]

packages/tldraw/src/shape-utils/arrow/arrow.tsx

@@ -1,13 +1,5 @@
 import * as React from 'react'
-import {
+import { Utils, SVGContainer, TLBounds, TLPointerInfo } from '@tldraw/core'
-  Utils,
-  TLHandle,
-  SVGContainer,
-  TLBinding,
-  TLBounds,
-  TLIndicator,
-  TLPointerInfo,
-} from '@tldraw/core'
 import { Vec } from '@tldraw/vec'
 import getStroke from 'perfect-freehand'
 import { defaultStyle, getShapeStyle } from '../shape-styles'
@@ -19,7 +11,9 @@ import {
   TLDrawShapeType,
   TLDrawShape,
   EllipseShape,
-  TLDrawComponentProps,
+  TLDrawMeta,
+  TLDrawHandle,
+  TLDrawBinding,
 } from '~types'
 import { TLDrawShapeUtil } from '../TLDrawShapeUtil'
 import {
@@ -86,7 +80,7 @@ export class ArrowUtil extends TLDrawShapeUtil<T, E> {
     )
   }
 
-  Component = React.forwardRef<E, TLDrawComponentProps<T, E>>(({ shape, meta, events }, ref) => {
+  Component = TLDrawShapeUtil.Component<T, E, TLDrawMeta>(({ shape, meta, events }, ref) => {
     const {
       handles: { start, bend, end },
       decorations = {},
@@ -264,11 +258,11 @@ export class ArrowUtil extends TLDrawShapeUtil<T, E> {
     )
   })
 
-  Indicator: TLIndicator<T> = ({ shape }) => {
+  Indicator = TLDrawShapeUtil.Indicator<T>(({ shape }) => {
     const path = getArrowPath(shape)
 
     return <path d={path} />
-  }
+  })
 
   getBounds = (shape: T) => {
     const bounds = Utils.getFromCache(this.boundsCache, shape, () => {
@@ -415,12 +409,12 @@ export class ArrowUtil extends TLDrawShapeUtil<T, E> {
 
   onBindingChange = (
     shape: T,
-    binding: TLBinding,
+    binding: TLDrawBinding,
     target: TLDrawShape,
     targetBounds: TLBounds,
     center: number[]
   ): Partial<T> | void => {
-    const handle = shape.handles[binding.meta.handleId as keyof ArrowShape['handles']]
+    const handle = shape.handles[binding.handleId as keyof ArrowShape['handles']]
 
     const expandedBounds = Utils.expandBounds(targetBounds, BINDING_DISTANCE)
 
@@ -431,7 +425,7 @@ export class ArrowUtil extends TLDrawShapeUtil<T, E> {
         [expandedBounds.minX, expandedBounds.minY],
         Vec.mulV(
           [expandedBounds.width, expandedBounds.height],
-          Vec.rotWith(binding.meta.point, [0.5, 0.5], target.rotation || 0)
+          Vec.rotWith(binding.point, [0.5, 0.5], target.rotation || 0)
         )
       ),
       shape.point
@@ -440,8 +434,8 @@ export class ArrowUtil extends TLDrawShapeUtil<T, E> {
     // We're looking for the point to put the dragging handle
     let handlePoint = anchor
 
-    if (binding.meta.distance) {
+    if (binding.distance) {
-      const intersectBounds = Utils.expandBounds(targetBounds, binding.meta.distance)
+      const intersectBounds = Utils.expandBounds(targetBounds, binding.distance)
 
       // The direction vector starts from the arrow's opposite handle
       const origin = Vec.add(
@@ -457,8 +451,8 @@ export class ArrowUtil extends TLDrawShapeUtil<T, E> {
           origin,
           direction,
           center,
-          (target as EllipseShape).radius[0] + binding.meta.distance,
+          (target as EllipseShape).radius[0] + binding.distance,
-          (target as EllipseShape).radius[1] + binding.meta.distance,
+          (target as EllipseShape).radius[1] + binding.distance,
           target.rotation || 0
         ).points.sort((a, b) => Vec.dist(a, origin) - Vec.dist(b, origin))
 
@@ -613,7 +607,7 @@ export class ArrowUtil extends TLDrawShapeUtil<T, E> {
 /*                       Helpers                      */
 /* -------------------------------------------------- */
 
-function getArrowArcPath(start: TLHandle, end: TLHandle, circle: number[], bend: number) {
+function getArrowArcPath(start: TLDrawHandle, end: TLDrawHandle, circle: number[], bend: number) {
   return [
     'M',
     start.point[0],

packages/tldraw/src/shape-utils/draw/draw.tsx

@@ -1,15 +1,9 @@
 import * as React from 'react'
-import { Utils, SVGContainer, TLBounds, TLIndicator } from '@tldraw/core'
+import { Utils, SVGContainer, TLBounds } from '@tldraw/core'
 import { Vec } from '@tldraw/vec'
 import { getStrokeOutlinePoints, getStrokePoints, StrokeOptions } from 'perfect-freehand'
 import { defaultStyle, getShapeStyle } from '../shape-styles'
-import {
+import { DrawShape, DashStyle, TLDrawShapeType, TLDrawTransformInfo, TLDrawMeta } from '~types'
-  DrawShape,
-  DashStyle,
-  TLDrawShapeType,
-  TLDrawTransformInfo,
-  TLDrawComponentProps,
-} from '~types'
 import { TLDrawShapeUtil } from '../TLDrawShapeUtil'
 import { intersectBoundsBounds, intersectBoundsPolyline } from '@tldraw/intersect'
 
@@ -45,7 +39,7 @@ export class DrawUtil extends TLDrawShapeUtil<T, E> {
     )
   }
 
-  Component = React.forwardRef<E, TLDrawComponentProps<T, E>>(({ shape, meta, events }, ref) => {
+  Component = TLDrawShapeUtil.Component<T, E, TLDrawMeta>(({ shape, meta, events }, ref) => {
     const { points, style, isComplete } = shape
 
     const polygonPathData = React.useMemo(() => {
@@ -152,7 +146,7 @@ export class DrawUtil extends TLDrawShapeUtil<T, E> {
     )
   })
 
-  Indicator: TLIndicator<T> = ({ shape }) => {
+  Indicator = TLDrawShapeUtil.Indicator<T>(({ shape }) => {
     const { points } = shape
 
     const pathData = React.useMemo(() => {
@@ -168,7 +162,8 @@ export class DrawUtil extends TLDrawShapeUtil<T, E> {
     }
 
     return <path d={pathData} />
-  }
+  })
+
   transform = (
     shape: T,
     bounds: TLBounds,

packages/tldraw/src/shape-utils/ellipse/ellipse.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Utils, SVGContainer, TLIndicator, TLBounds } from '@tldraw/core'
+import { Utils, SVGContainer, TLBounds } from '@tldraw/core'
 import { Vec } from '@tldraw/vec'
 import { getStrokeOutlinePoints, getStrokePoints } from 'perfect-freehand'
 import { defaultStyle, getShapeStyle } from '../shape-styles'
@@ -9,7 +9,7 @@ import {
   TLDrawShapeType,
   TLDrawShape,
   TLDrawTransformInfo,
-  TLDrawComponentProps,
+  TLDrawMeta,
 } from '~types'
 import { EASINGS, BINDING_DISTANCE } from '~constants'
 import { TLDrawShapeUtil } from '../TLDrawShapeUtil'
@@ -40,7 +40,7 @@ export class EllipseUtil extends TLDrawShapeUtil<T, E> {
     )
   }
 
-  Component = React.forwardRef<E, TLDrawComponentProps<T, E>>(
+  Component = TLDrawShapeUtil.Component<T, E, TLDrawMeta>(
     ({ shape, isBinding, meta, events }, ref) => {
       const {
         radius: [radiusX, radiusY],
@@ -130,9 +130,9 @@ export class EllipseUtil extends TLDrawShapeUtil<T, E> {
     }
   )
 
-  Indicator: TLIndicator<T> = ({ shape }) => {
+  Indicator = TLDrawShapeUtil.Indicator<T>(({ shape }) => {
     return <path d={getEllipseIndicatorPathData(shape, this.getCenter(shape))} />
-  }
+  })
 
   getBounds = (shape: T) => {
     return Utils.getFromCache(this.boundsCache, shape, () => {

packages/tldraw/src/shape-utils/group/group.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { Utils, SVGContainer, TLIndicator } from '@tldraw/core'
+import { Utils, SVGContainer } from '@tldraw/core'
 import { defaultStyle } from '../shape-styles'
-import { TLDrawShapeType, GroupShape, ColorStyle, TLDrawComponentProps } from '~types'
+import { TLDrawShapeType, GroupShape, ColorStyle, TLDrawMeta } from '~types'
 import { getBoundsRectangle } from '../shared'
 import { BINDING_DISTANCE } from '~constants'
 import { TLDrawShapeUtil } from '../TLDrawShapeUtil'
@@ -33,7 +33,7 @@ export class GroupUtil extends TLDrawShapeUtil<T, E> {
     )
   }
 
-  Component = React.forwardRef<E, TLDrawComponentProps<T, E>>(
+  Component = TLDrawShapeUtil.Component<T, E, TLDrawMeta>(
     ({ shape, isBinding, isHovered, isSelected, events }, ref) => {
       const { id, size } = shape
 
@@ -85,7 +85,7 @@ export class GroupUtil extends TLDrawShapeUtil<T, E> {
     }
   )
 
-  Indicator: TLIndicator<T> = ({ shape }) => {
+  Indicator = TLDrawShapeUtil.Indicator<T>(({ shape }) => {
     const { id, size } = shape
 
     const sw = 2
@@ -108,7 +108,7 @@ export class GroupUtil extends TLDrawShapeUtil<T, E> {
         {paths}
       </g>
     )
-  }
+  })
 
   getBounds = (shape: T) => {
     return getBoundsRectangle(shape, this.boundsCache)

packages/tldraw/src/shape-utils/index.ts

@@ -7,7 +7,6 @@ import { StickyUtil } from './sticky'
 import { TextUtil } from './text'
 import { DrawUtil } from './draw'
 import { TLDrawShape, TLDrawShapeType } from '~types'
-import type { TLShapeUtilsMap } from '@tldraw/core'
 
 export * from './shape-styles'
 export * from './TLDrawShapeUtil'

packages/tldraw/src/shape-utils/rectangle/rectangle.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { Utils, SVGContainer, TLIndicator } from '@tldraw/core'
+import { Utils, SVGContainer } from '@tldraw/core'
 import { Vec } from '@tldraw/vec'
 import { getStroke, getStrokePoints } from 'perfect-freehand'
 import { defaultStyle, getShapeStyle } from '../shape-styles'
-import { RectangleShape, DashStyle, TLDrawShapeType, TLDrawComponentProps } from '~types'
+import { RectangleShape, DashStyle, TLDrawShapeType, TLDrawMeta } from '~types'
 import { getBoundsRectangle, transformRectangle, transformSingleRectangle } from '../shared'
 import { BINDING_DISTANCE } from '~constants'
 import { TLDrawShapeUtil } from '../TLDrawShapeUtil'
@@ -33,7 +33,7 @@ export class RectangleUtil extends TLDrawShapeUtil<T, E> {
     )
   }
 
-  Component = React.forwardRef<E, TLDrawComponentProps<T, E>>(
+  Component = TLDrawShapeUtil.Component<T, E, TLDrawMeta>(
     ({ shape, isBinding, meta, events }, ref) => {
       const { id, size, style } = shape
       const styles = getShapeStyle(style, meta.isDarkMode)
@@ -123,8 +123,8 @@ export class RectangleUtil extends TLDrawShapeUtil<T, E> {
             width={w}
             height={h}
             fill={styles.fill}
-            stroke="none"
             strokeWidth={sw}
+            stroke="none"
             pointerEvents="all"
           />
           <g pointerEvents="stroke">{paths}</g>
@@ -133,7 +133,7 @@ export class RectangleUtil extends TLDrawShapeUtil<T, E> {
     }
   )
 
-  Indicator: TLIndicator<T> = ({ shape }) => {
+  Indicator = TLDrawShapeUtil.Indicator<T>(({ shape }) => {
     const {
       style,
       size: [width, height],
@@ -158,7 +158,7 @@ export class RectangleUtil extends TLDrawShapeUtil<T, E> {
         height={Math.max(1, height - sw * 2)}
       />
     )
-  }
+  })
 
   getBounds = (shape: T) => {
     return getBoundsRectangle(shape, this.boundsCache)

packages/tldraw/src/shape-utils/sticky/sticky.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import * as React from 'react'
-import { Utils, HTMLContainer, TLBounds, TLIndicator } from '@tldraw/core'
+import { Utils, HTMLContainer, TLBounds } from '@tldraw/core'
 import { defaultStyle } from '../shape-styles'
-import { StickyShape, TLDrawComponentProps, TLDrawShapeType, TLDrawTransformInfo } from '~types'
+import { StickyShape, TLDrawMeta, TLDrawShapeType, TLDrawTransformInfo } from '~types'
 import { getBoundsRectangle, TextAreaUtils } from '../shared'
 import { TLDrawShapeUtil } from '../TLDrawShapeUtil'
 import { getStickyFontStyle, getStickyShapeStyle } from '../shape-styles'
@@ -35,7 +35,7 @@ export class StickyUtil extends TLDrawShapeUtil<T, E> {
     )
   }
 
-  Component = React.forwardRef<E, TLDrawComponentProps<T, E>>(
+  Component = TLDrawShapeUtil.Component<T, E, TLDrawMeta>(
     ({ shape, meta, events, isEditing, onShapeBlur, onShapeChange }, ref) => {
       const font = getStickyFontStyle(shape.style)
 
@@ -193,7 +193,7 @@ export class StickyUtil extends TLDrawShapeUtil<T, E> {
     }
   )
 
-  Indicator: TLIndicator<T> = ({ shape }) => {
+  Indicator = TLDrawShapeUtil.Indicator<T>(({ shape }) => {
     const {
       size: [width, height],
     } = shape
@@ -201,7 +201,7 @@ export class StickyUtil extends TLDrawShapeUtil<T, E> {
     return (
       <rect x={0} y={0} rx={3} ry={3} width={Math.max(1, width)} height={Math.max(1, height)} />
     )
-  }
+  })
 
   getBounds = (shape: T) => {
     return getBoundsRectangle(shape, this.boundsCache)

packages/tldraw/src/shape-utils/text/text.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import * as React from 'react'
-import { Utils, HTMLContainer, TLIndicator, TLBounds } from '@tldraw/core'
+import { Utils, HTMLContainer, TLBounds } from '@tldraw/core'
 import { defaultStyle, getShapeStyle, getFontStyle } from '../shape-styles'
-import { TextShape, TLDrawComponentProps, TLDrawShapeType, TLDrawTransformInfo } from '~types'
+import { TextShape, TLDrawMeta, TLDrawShapeType, TLDrawTransformInfo } from '~types'
 import { TextAreaUtils } from '../shared'
 import { BINDING_DISTANCE } from '~constants'
 import { TLDrawShapeUtil } from '../TLDrawShapeUtil'
@@ -38,7 +38,7 @@ export class TextUtil extends TLDrawShapeUtil<T, E> {
     )
   }
 
-  Component = React.forwardRef<E, TLDrawComponentProps<T, E>>(
+  Component = TLDrawShapeUtil.Component<T, E, TLDrawMeta>(
     ({ shape, isBinding, isEditing, onShapeBlur, onShapeChange, meta, events }, ref) => {
       const rInput = React.useRef<HTMLTextAreaElement>(null)
       const { text, style } = shape
@@ -180,10 +180,10 @@ export class TextUtil extends TLDrawShapeUtil<T, E> {
     }
   )
 
-  Indicator: TLIndicator<T> = ({ shape }) => {
+  Indicator = TLDrawShapeUtil.Indicator<T>(({ shape }) => {
     const { width, height } = this.getBounds(shape)
     return <rect x={0} y={0} width={width} height={height} />
-  }
+  })
 
   getBounds = (shape: T) => {
     const bounds = Utils.getFromCache(this.boundsCache, shape, () => {

packages/tldraw/src/state/command/create-page/create-page.command.ts

@@ -25,7 +25,6 @@ export function createPage(data: Data, center: number[], pageId = Utils.uniqueId
     id: pageId,
     selectedIds: [],
     camera: { point: center, zoom: 1 },
-    currentParentId: pageId,
     editingId: undefined,
     bindingId: undefined,
     hoveredId: undefined,

packages/tldraw/src/state/command/delete/delete.command.spec.ts

@@ -88,7 +88,7 @@ describe('Delete command', () => {
     expect(binding).toBeTruthy()
     expect(binding.fromId).toBe('arrow1')
     expect(binding.toId).toBe('rect3')
-    expect(binding.meta.handleId).toBe('start')
+    expect(binding.handleId).toBe('start')
     expect(tlstate.getShape('arrow1').handles?.start.bindingId).toBe(binding.id)
 
     tlstate.select('rect3').delete()

packages/tldraw/src/state/command/duplicate-page/duplicate-page.command.ts

@@ -53,7 +53,6 @@ export function duplicatePage(data: Data, center: number[], pageId: string): TLD
             id: newId,
             selectedIds: [],
             camera: data.document.pageStates[currentPageId].camera,
-            currentParentId: newId,
             editingId: undefined,
             bindingId: undefined,
             hoveredId: undefined,

packages/tldraw/src/state/session/sessions/arrow/arrow.session.spec.ts

@@ -25,7 +25,7 @@ describe('Arrow session', () => {
     expect(binding).toBeTruthy()
     expect(binding.fromId).toBe('arrow1')
     expect(binding.toId).toBe('target1')
-    expect(binding.meta.handleId).toBe('start')
+    expect(binding.handleId).toBe('start')
     expect(tlstate.appState.status).toBe(TLDrawStatus.Idle)
     expect(tlstate.getShape('arrow1').handles?.start.bindingId).toBe(binding.id)
 
@@ -59,7 +59,7 @@ describe('Arrow session', () => {
         .select('arrow1')
         .startSession(SessionType.Arrow, [200, 200], 'start')
         .updateSession([50, 50])
-      expect(tlstate.bindings[0].meta.point).toStrictEqual([0.5, 0.5])
+      expect(tlstate.bindings[0].point).toStrictEqual([0.5, 0.5])
     })
 
     it('Snaps to the center', () => {
@@ -68,7 +68,7 @@ describe('Arrow session', () => {
         .select('arrow1')
         .startSession(SessionType.Arrow, [200, 200], 'start')
         .updateSession([55, 55])
-      expect(tlstate.bindings[0].meta.point).toStrictEqual([0.5, 0.5])
+      expect(tlstate.bindings[0].point).toStrictEqual([0.5, 0.5])
     })
 
     it('Binds at the bottom left', () => {
@@ -77,7 +77,7 @@ describe('Arrow session', () => {
         .select('arrow1')
         .startSession(SessionType.Arrow, [200, 200], 'start')
         .updateSession([124, -24])
-      expect(tlstate.bindings[0].meta.point).toStrictEqual([1, 0])
+      expect(tlstate.bindings[0].point).toStrictEqual([1, 0])
     })
 
     it('Cancels the bind when off of the expanded bounds', () => {
@@ -97,7 +97,7 @@ describe('Arrow session', () => {
         .startSession(SessionType.Arrow, [200, 200], 'start')
         .updateSession([91, 9])
 
-      expect(tlstate.bindings[0].meta.point).toStrictEqual([0.71, 0.11])
+      expect(tlstate.bindings[0].point).toStrictEqual([0.71, 0.11])
 
       tlstate.updateSession([91, 9], false, true, false)
     })
@@ -109,7 +109,7 @@ describe('Arrow session', () => {
         .startSession(SessionType.Arrow, [200, 200], 'start')
         .updateSession([91, 9], false, true, false)
 
-      expect(tlstate.bindings[0].meta.point).toStrictEqual([0.78, 0.22])
+      expect(tlstate.bindings[0].point).toStrictEqual([0.78, 0.22])
     })
 
     it('ignores binding when meta is held', () => {

packages/tldraw/src/state/session/sessions/arrow/arrow.session.ts

@@ -454,11 +454,9 @@ export class ArrowSession extends Session {
       type: 'arrow',
       fromId: shape.id,
       toId: target.id,
-      meta: {
+      handleId: handleId,
-        handleId: handleId,
+      point: Vec.round(bindingPoint.point),
-        point: Vec.round(bindingPoint.point),
+      distance: bindingPoint.distance,
-        distance: bindingPoint.distance,
-      },
     }
   }
 }

packages/tldraw/src/state/session/sessions/brush/brush.session.ts

@@ -133,7 +133,7 @@ export function getBrushSnapshot(data: Data) {
       id: shape.id,
       util: TLDR.getShapeUtils(shape),
       bounds: TLDR.getShapeUtils(shape).getBounds(shape),
-      selectId: TLDR.getTopParentId(data, shape.id, currentPageId),
+      selectId: shape.id, //TLDR.getTopParentId(data, shape.id, currentPageId),
     }))
 
   return {

packages/tldraw/src/state/tldr.ts

@@ -90,42 +90,42 @@ export class TLDR {
     return TLDR.getShape(data, id, pageId).parentId
   }
 
-  static getPointedId(data: Data, id: string, pageId: string): string {
+  // static getPointedId(data: Data, id: string, pageId: string): string {
-    const page = TLDR.getPage(data, pageId)
+  //   const page = TLDR.getPage(data, pageId)
-    const pageState = TLDR.getPageState(data, data.appState.currentPageId)
+  //   const pageState = TLDR.getPageState(data, data.appState.currentPageId)
-    const shape = TLDR.getShape(data, id, pageId)
+  //   const shape = TLDR.getShape(data, id, pageId)
-    if (!shape) return id
+  //   if (!shape) return id
 
-    return shape.parentId === pageState.currentParentId || shape.parentId === page.id
+  //   return shape.parentId === pageState.currentParentId || shape.parentId === page.id
-      ? id
+  //     ? id
-      : TLDR.getPointedId(data, shape.parentId, pageId)
+  //     : TLDR.getPointedId(data, shape.parentId, pageId)
-  }
+  // }
 
-  static getDrilledPointedId(data: Data, id: string, pageId: string): string {
+  // static getDrilledPointedId(data: Data, id: string, pageId: string): string {
-    const shape = TLDR.getShape(data, id, pageId)
+  //   const shape = TLDR.getShape(data, id, pageId)
-    const { currentPageId } = data.appState
+  //   const { currentPageId } = data.appState
-    const { currentParentId, pointedId } = TLDR.getPageState(data, data.appState.currentPageId)
+  //   const { currentParentId, pointedId } = TLDR.getPageState(data, data.appState.currentPageId)
 
-    return shape.parentId === currentPageId ||
+  //   return shape.parentId === currentPageId ||
-      shape.parentId === pointedId ||
+  //     shape.parentId === pointedId ||
-      shape.parentId === currentParentId
+  //     shape.parentId === currentParentId
-      ? id
+  //     ? id
-      : TLDR.getDrilledPointedId(data, shape.parentId, pageId)
+  //     : TLDR.getDrilledPointedId(data, shape.parentId, pageId)
-  }
+  // }
 
-  static getTopParentId(data: Data, id: string, pageId: string): string {
+  // static getTopParentId(data: Data, id: string, pageId: string): string {
-    const page = TLDR.getPage(data, pageId)
+  //   const page = TLDR.getPage(data, pageId)
-    const pageState = TLDR.getPageState(data, pageId)
+  //   const pageState = TLDR.getPageState(data, pageId)
-    const shape = TLDR.getShape(data, id, pageId)
+  //   const shape = TLDR.getShape(data, id, pageId)
 
-    if (shape.parentId === shape.id) {
+  //   if (shape.parentId === shape.id) {
-      throw Error(`Shape has the same id as its parent! ${shape.id}`)
+  //     throw Error(`Shape has the same id as its parent! ${shape.id}`)
-    }
+  //   }
 
-    return shape.parentId === page.id || shape.parentId === pageState.currentParentId
+  //   return shape.parentId === page.id || shape.parentId === pageState.currentParentId
-      ? id
+  //     ? id
-      : TLDR.getTopParentId(data, shape.parentId, pageId)
+  //     : TLDR.getTopParentId(data, shape.parentId, pageId)
-  }
+  // }
 
   // Get an array of a shape id and its descendant shapes' ids
   static getDocumentBranch(data: Data, id: string, pageId: string): string[] {

packages/tldraw/src/test/mock-document.tsx

@@ -56,7 +56,6 @@ export const mockDocument: TLDrawDocument = {
     page1: {
       id: 'page1',
       selectedIds: [],
-      currentParentId: 'page1',
       camera: {
         point: [0, 0],
         zoom: 1,

packages/tldraw/src/types.ts

@@ -15,6 +15,11 @@ import type { TLPage, TLUser, TLPageState } from '@tldraw/core'
 import type { StoreApi } from 'zustand'
 import type { Command, Patch } from 'rko'
 
+export interface TLDrawHandle extends TLHandle {
+  canBind?: boolean
+  bindingId?: string
+}
+
 export interface TLDrawTransformInfo<T extends TLShape> {
   type: TLBoundsEdge | TLBoundsCorner
   initialShape: T
@@ -222,6 +227,7 @@ export enum Decoration {
 export interface TLDrawBaseShape extends TLShape {
   style: ShapeStyles
   type: TLDrawShapeType
+  handles?: Record<string, TLDrawHandle>
 }
 
 export interface DrawShape extends TLDrawBaseShape {
@@ -234,9 +240,9 @@ export interface ArrowShape extends TLDrawBaseShape {
   type: TLDrawShapeType.Arrow
   bend: number
   handles: {
-    start: TLHandle
+    start: TLDrawHandle
-    bend: TLHandle
+    bend: TLDrawHandle
-    end: TLHandle
+    end: TLDrawHandle
   }
   decorations?: {
     start?: Decoration
@@ -281,11 +287,11 @@ export type TLDrawShape =
   | GroupShape
   | StickyShape
 
-export type ArrowBinding = TLBinding<{
+export interface ArrowBinding extends TLBinding {
   handleId: keyof ArrowShape['handles']
   distance: number
   point: number[]
-}>
+}
 
 export type TLDrawBinding = ArrowBinding
 

packages/www/tsconfig.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "composite": true,
     "target": "es5",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -21,29 +17,16 @@
     "baseUrl": ".",
     "rootDir": ".",
     "paths": {
-      "-*": [
+      "-*": ["./*"],
-        "./*"
+      "@tldraw/tldraw": ["../tldraw"]
-      ],
-      "@tldraw/tldraw": [
-        "../tldraw"
-      ]
     },
     "incremental": true
   },
-  "include": [
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-    "next-env.d.ts",
+  "exclude": ["node_modules"],
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
   "references": [
     {
       "path": "../tldraw"
-    },
-    {
-      "path": "../core"
     }
   ]
 }

tsconfig.json

@@ -14,7 +14,6 @@
       "@tldraw/tldraw": ["./packages/tldraw"],
       "@tldraw/vec": ["./packages/vec"],
       "@tldraw/intersect": ["./packages/intersect"],
-      "+*": ["./packages/core/src/*"],
       "~*": ["./packages/tldraw/src/*"]
     }
   }