Merge pull request #30 from cs-open/feat/ts

chore(Text):  fix Text typescript

Author: vaynevayne

examples/astro/src/components/Canvas.tsx

@@ -7,6 +7,7 @@ import {
   useReactFabric,
   ReactFabricProvider,
   Control,
+  Text,
   // PluginGridLine,
 } from '@cs-open/react-fabric'
 import './Canvas.css'
@@ -46,6 +47,7 @@ export default function Counter() {
               />
             </Control>
           ))}
+          <Text text="red" />
           {/* <PluginGridLine></PluginGridLine> */}
         </ReactFabric>
       </ReactFabricProvider>
@@ -57,7 +59,7 @@ const Toolbar = () => {
   const { resetViewport, zoomIn, zoomOut, manualZoom, canvas } = useReactFabric()
   return (
     <div>
-      <button onClick={resetViewport}>重置</button>
+      <button onClick={() => resetViewport()}>重置</button>
       <button onClick={zoomIn}>放大</button>
       <span> {Math.round(manualZoom * 100)}%</span>
       <button onClick={zoomOut}>缩小</button>

packages/react/src/components/BackgroundImage/index.tsx

@@ -12,7 +12,9 @@ import { useDidUpdate } from '../../hooks/useDidUpdate'
 import { useStore, useStoreApi } from '../../hooks/useStore'
 import type { ReactFabricState } from '../../types/store'
 
-export type Handle = {}
+export type Handle = {
+  instance: FabricImage | null
+}
 
 type ScaleMode = {
   scaleToFit?: boolean
@@ -22,6 +24,7 @@ export type BackgroundImageProps = Partial<ImageProps> & {
   src: string
   onLoad?: (imageSource: FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>) => void
   onScaling?: (scale: BasicTransformEvent<TPointerEvent>) => void
+  onError?: (e: any) => void
 
   /** 自动缩放至容器宽高 */
 } & ScaleMode
@@ -32,7 +35,7 @@ const selector = (s: ReactFabricState) => ({
 })
 
 const BackgroundImage = forwardRef<Handle, BackgroundImageProps>(
-  ({ src, onLoad, onScaling, scaleToFit, scaleToCover, ...options }, ref) => {
+  ({ src, onLoad, onScaling, onError, scaleToFit, scaleToCover, ...options }, ref) => {
     const backgroundImageRef = useRef<FabricImage | null>(null)
 
     const store = useStoreApi()
@@ -131,6 +134,7 @@ const BackgroundImage = forwardRef<Handle, BackgroundImageProps>(
       setLoading(true)
       FabricImage.fromURL(src, { crossOrigin: 'anonymous' })
         .then(imageSource => {
+          onLoad?.(imageSource)
           const currentSrc = imageSource.getSrc()
           const latestSrc = backgroundImageRef.current?.getSrc()
 
@@ -165,12 +169,14 @@ const BackgroundImage = forwardRef<Handle, BackgroundImageProps>(
             }
 
             // imageSource.angle = options.angle || 0
-            onLoad?.(imageSource)
           } else {
             console.warn('ReactFabric:BackgroundImage: !canvas', canvas)
           }
         })
-        .catch(console.error)
+        .catch(e => {
+          onError?.(e)
+          console.error('[ReactFabric] BackgroundImage: fromURL error', e)
+        })
         .finally(() => {
           if (domNode) domNode.dataset.src = src
           setLoading(false)

packages/react/src/components/Objects/index.tsx

@@ -6,7 +6,7 @@ import Line from '../Line'
 import IText from '../IText'
 
 export type ObjectsProps = {
-  objects: { type: string;[index: string]: any }[]
+  objects: { type: string; [index: string]: any }[]
 }
 
 const Objects = ({ objects }: ObjectsProps) => {
@@ -27,7 +27,7 @@ const Objects = ({ objects }: ObjectsProps) => {
         if (!Component) {
           return null
         }
-        return <Component {...options} />
+        return <Component {...(options as any)} />
       })}
     </>
   )

packages/react/src/components/Text/index.tsx

@@ -10,7 +10,7 @@ import { useInstancePosition } from '../../hooks/useInstancePosition'
 
 export type Handle = FabricText | undefined
 
-export type TextProps<T = unknown> = Partial<ConstructorParameters<typeof FabricText>[1] & AllObjectEvents> & {
+export type TextProps<T = unknown> = Partial<FabricText & AllObjectEvents> & {
   group?: BaseGroup
   text: string
   children?: ReactNode
@@ -65,4 +65,5 @@ const Text = forwardRef<Handle, TextProps>(({ group, text, children, ...props },
   return useInstancePosition(instance, children)
 })
 
+Text.displayName = 'Text'
 export default memo(Text)