Browse Source

More type adjustments

main
Steve Ruiz 4 years ago
parent
commit
eaeffae333

+ 8
- 9
packages/core/src/components/shape/rendered-shape.tsx View File

@@ -2,8 +2,14 @@
2 2
 import * as React from 'react'
3 3
 import type { TLShapeUtil, TLRenderInfo, TLShape } from '+types'
4 4
 
5
+interface RenderedShapeProps<T extends TLShape, E extends Element, M>
6
+  extends TLRenderInfo<T, E, M> {
7
+  shape: T
8
+  utils: TLShapeUtil<T, E, M>
9
+}
10
+
5 11
 export const RenderedShape = React.memo(
6
-  <T extends TLShape, E extends Element, M = any>({
12
+  <T extends TLShape, E extends Element, M>({
7 13
     shape,
8 14
     utils,
9 15
     isEditing,
@@ -15,14 +21,7 @@ export const RenderedShape = React.memo(
15 21
     onShapeBlur,
16 22
     events,
17 23
     meta,
18
-  }: TLRenderInfo<T, E, M> & {
19
-    shape: T
20
-    utils: TLShapeUtil<T, E, M> & {
21
-      _Component: React.ForwardRefExoticComponent<
22
-        { shape: T; ref: React.ForwardedRef<E> } & TLRenderInfo<T> & React.RefAttributes<E>
23
-      >
24
-    }
25
-  }) => {
24
+  }: RenderedShapeProps<T, E, M>) => {
26 25
     const ref = utils.getRef(shape)
27 26
 
28 27
     return (

+ 6
- 2
packages/core/src/components/shape/shape-node.tsx View File

@@ -2,8 +2,12 @@ import * as React from 'react'
2 2
 import type { IShapeTreeNode, TLShape, TLShapeUtils } from '+types'
3 3
 import { Shape } from './shape'
4 4
 
5
+interface ShapeNodeProps<T extends TLShape, E extends Element> extends IShapeTreeNode<T> {
6
+  utils: TLShapeUtils<T, E>
7
+}
8
+
5 9
 export const ShapeNode = React.memo(
6
-  ({
10
+  <T extends TLShape, E extends Element>({
7 11
     shape,
8 12
     utils,
9 13
     children,
@@ -13,7 +17,7 @@ export const ShapeNode = React.memo(
13 17
     isSelected,
14 18
     isCurrentParent,
15 19
     meta,
16
-  }: { utils: TLShapeUtils<TLShape, Element> } & IShapeTreeNode<TLShape, any>) => {
20
+  }: ShapeNodeProps<T, E>) => {
17 21
     return (
18 22
       <>
19 23
         <Shape

+ 7
- 6
packages/core/src/components/shape/shape.tsx View File

@@ -1,4 +1,3 @@
1
-/* eslint-disable @typescript-eslint/no-explicit-any */
2 1
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
3 2
 import * as React from 'react'
4 3
 import { useShapeEvents } from '+hooks'
@@ -7,7 +6,11 @@ import { RenderedShape } from './rendered-shape'
7 6
 import { Container } from '+components/container'
8 7
 import { useTLContext } from '+hooks'
9 8
 
10
-export const Shape = <T extends TLShape, E extends Element, M = any>({
9
+interface ShapeProps<T extends TLShape, E extends Element, M> extends IShapeTreeNode<T, M> {
10
+  utils: TLShapeUtil<T, E, M>
11
+}
12
+
13
+export const Shape = <T extends TLShape, E extends Element, M>({
11 14
   shape,
12 15
   utils,
13 16
   isEditing,
@@ -16,9 +19,7 @@ export const Shape = <T extends TLShape, E extends Element, M = any>({
16 19
   isSelected,
17 20
   isCurrentParent,
18 21
   meta,
19
-}: IShapeTreeNode<T, M> & {
20
-  utils: TLShapeUtil<T, E, M>
21
-}) => {
22
+}: ShapeProps<T, E, M>) => {
22 23
   const { callbacks } = useTLContext()
23 24
   const bounds = utils.getBounds(shape)
24 25
   const events = useShapeEvents(shape.id, isCurrentParent)
@@ -38,7 +39,7 @@ export const Shape = <T extends TLShape, E extends Element, M = any>({
38 39
         isHovered={isHovered}
39 40
         isSelected={isSelected}
40 41
         utils={utils as any}
41
-        meta={meta as any}
42
+        meta={meta}
42 43
         events={events}
43 44
         onShapeChange={callbacks.onShapeChange}
44 45
       />

+ 12
- 5
packages/core/src/types.ts View File

@@ -56,10 +56,12 @@ export interface TLShape {
56 56
   isAspectRatioLocked?: boolean
57 57
 }
58 58
 
59
-export type TLShapeUtils<T extends TLShape = any, E extends Element = any, M = any> = Record<
60
-  string,
61
-  TLShapeUtil<T, E, M>
62
->
59
+export type TLShapeUtils<
60
+  T extends TLShape = any,
61
+  E extends Element = any,
62
+  M = any,
63
+  K = any
64
+> = Record<string, TLShapeUtil<T, E, M, K>>
63 65
 
64 66
 export interface TLRenderInfo<T extends TLShape, E = any, M = any> {
65 67
   shape: T
@@ -269,7 +271,12 @@ export interface TLBezierCurveSegment {
269 271
 /*                   Shape Utility                    */
270 272
 /* -------------------------------------------------- */
271 273
 
272
-export interface TLShapeUtil<T extends TLShape, E extends Element, M extends any> {
274
+export type TLShapeUtil<
275
+  T extends TLShape,
276
+  E extends Element,
277
+  M = any,
278
+  K = { [key: string]: any }
279
+> = K & {
273 280
   type: T['type']
274 281
 
275 282
   defaultProps: T

+ 8
- 3
packages/tldraw/src/types.ts View File

@@ -212,9 +212,14 @@ export type TLDrawShape =
212 212
   | GroupShape
213 213
   | PostItShape
214 214
 
215
-export type TLDrawShapeUtil<T extends TLDrawShape> = TLShapeUtil<T, any, TLDrawMeta> & {
216
-  toolType: TLDrawToolType
217
-}
215
+export type TLDrawShapeUtil<T extends TLDrawShape> = TLShapeUtil<
216
+  T,
217
+  any,
218
+  TLDrawMeta,
219
+  {
220
+    toolType: TLDrawToolType
221
+  }
222
+>
218 223
 
219 224
 export type ArrowBinding = TLBinding<{
220 225
   handleId: keyof ArrowShape['handles']

Loading…
Cancel
Save