Fix types for real

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.0.130
+
+### TLCore
+
+- Major change to ShapeUtils API
+
+### TLDraw
+
+- Rewrite utils with new API.
+
 ## 0.0.126
 
 ### TLDraw

packages/core/src/types.ts

@@ -71,7 +71,7 @@ export interface TLShape {
   isAspectRatioLocked?: boolean
 }
 
-export type TLComponentProps<T extends TLShape, E = any, M = any> = {
+export interface TLComponentProps<T extends TLShape, E = any, M = any> {
   shape: T
   isEditing: boolean
   isBinding: boolean
@@ -88,7 +88,8 @@ export type TLComponentProps<T extends TLShape, E = any, M = any> = {
     onPointerMove: (e: React.PointerEvent<E>) => void
     onPointerLeave: (e: React.PointerEvent<E>) => void
   }
-} & React.RefAttributes<E>
+  ref?: React.Ref<E> | undefined
+}
 
 export interface TLShapeProps<T extends TLShape, E = any, M = any>
   extends TLComponentProps<T, E, M> {

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

@@ -6,7 +6,6 @@ import {
   TLBinding,
   TLBounds,
   TLIndicator,
-  TLComponentProps,
   TLPointerInfo,
 } from '@tldraw/core'
 import { Vec } from '@tldraw/vec'
@@ -20,6 +19,7 @@ import {
   TLDrawShapeType,
   TLDrawShape,
   EllipseShape,
+  TLDrawComponentProps,
 } from '~types'
 import { TLDrawShapeUtil } from '../TLDrawShapeUtil'
 import {
@@ -86,7 +86,7 @@ export class ArrowUtil extends TLDrawShapeUtil<T, E> {
     )
   }
 
-  Component = React.forwardRef<E, TLComponentProps<T, E, M>>(({ shape, meta, events }, ref) => {
+  Component = React.forwardRef<E, TLDrawComponentProps<T, E>>(({ shape, meta, events }, ref) => {
     const {
       handles: { start, bend, end },
       decorations = {},

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

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { Utils, HTMLContainer, TLIndicator, TLComponentProps, TLBounds } from '@tldraw/core'
 import { defaultStyle, getShapeStyle, getFontStyle } from '../shape-styles'
-import { TextShape, TLDrawShapeType, TLDrawTransformInfo } from '~types'
+import { TextShape, TLDrawComponentProps, 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, TLComponentProps<T, E>>(
+  Component = React.forwardRef<E, TLDrawComponentProps<T, E>>(
     ({ shape, isBinding, isEditing, onShapeBlur, onShapeChange, meta, events }, ref) => {
       const rInput = React.useRef<HTMLTextAreaElement>(null)
       const { text, style } = shape

packages/tldraw/src/types.ts

@@ -9,6 +9,7 @@ import type {
   TLHandle,
   TLBounds,
   TLSnapLine,
+  TLComponentProps,
 } from '@tldraw/core'
 import type { TLPage, TLUser, TLPageState } from '@tldraw/core'
 import type { StoreApi } from 'zustand'
@@ -22,6 +23,12 @@ export interface TLDrawTransformInfo<T extends TLShape> {
   transformOrigin: number[]
 }
 
+export type TLDrawComponentProps<T extends TLDrawShape, E extends Element = any> = TLComponentProps<
+  T,
+  E,
+  TLDrawMeta
+>
+
 // old
 export type TLStore = StoreApi<Data>