@cs-open/react-fabric/dist/cjs/plugins/FreeRect.cjs.map

React Fabric

{"version":3,"file":"FreeRect.cjs","sources":["../../../src/plugins/FreeRect.tsx"],"sourcesContent":["import type { Canvas, RectProps, TPointerEvent, TPointerEventInfo } from 'fabric'\nimport { Rect } from 'fabric'\nimport { useEffect, useMemo, useRef } from 'react'\nimport { useStoreApi } from '../hooks/useStore'\n\nexport type FreeRectProps = Partial<RectProps> & {\n  onComplete: (\n    rectProps: Required<\n      Pick<RectProps, 'left' | 'top' | 'width' | 'height'> & {\n        pointsArray: number[]\n      }\n    > &\n      RectProps,\n    { canvas }: { canvas: Canvas },\n  ) => Promise<void>\n  /**\n   * 当画布有选中对象时，是否禁用\n   */\n  disableWhenActive?: boolean\n}\n\nconst DEFAULT_OPTIONS: Pick<RectProps, 'stroke' | 'strokeWidth' | 'fill'> = {\n  stroke: '#04aa65',\n  strokeWidth: 5,\n  fill: 'transparent',\n}\n\nconst FreeRect = ({ onComplete, disableWhenActive = true, ...rectProps }: FreeRectProps) => {\n  const store = useStoreApi()\n  const mouseDownPoint = useRef<{ x: number; y: number } | null>(null)\n  const rectRef = useRef<Rect | null>(null)\n  const isDrawing = useRef(false)\n  const isCompleting = useRef(false)\n  const strokeWidth = useMemo(() => rectProps?.strokeWidth ?? DEFAULT_OPTIONS.strokeWidth, [rectProps?.strokeWidth])\n\n  useEffect(() => {\n    const { canvas } = store.getState()\n    if (!canvas) return\n    const originHoverCursor = canvas.hoverCursor\n    canvas.hoverCursor = 'crosshair'\n\n    const handleMouseMove = (opt: TPointerEventInfo<TPointerEvent>) => {\n      if (!mouseDownPoint.current || !rectRef.current) return\n\n      const { x: currentX, y: currentY } = canvas.getScenePoint(opt.e)\n\n      rectRef.current.set({\n        left: Math.min(mouseDownPoint.current.x, currentX),\n        top: Math.min(mouseDownPoint.current.y, currentY),\n        width: Math.abs(currentX - mouseDownPoint.current.x) - strokeWidth,\n        height: Math.abs(currentY - mouseDownPoint.current.y) - strokeWidth,\n      })\n\n      rectRef.current.setCoords()\n      canvas.requestRenderAll()\n    }\n\n    const handleMouseUp = () => {\n      canvas.off('mouse:move', handleMouseMove)\n      canvas.off('mouse:up', handleMouseUp)\n      if (!rectRef.current) return\n\n      const currentRect = rectRef.current\n\n      const cleanup = () => {\n        canvas.remove(currentRect)\n        mouseDownPoint.current = null\n        rectRef.current = null\n        isDrawing.current = false\n        isCompleting.current = false\n        canvas.requestRenderAll()\n      }\n\n      if (currentRect.width < 10 || currentRect.height < 10) {\n        cleanup()\n      } else {\n        const coords = currentRect.getCoords()\n        isCompleting.current = true\n        Promise.resolve(\n          onComplete(\n            {\n              ...DEFAULT_OPTIONS,\n              ...(rectProps as RectProps),\n              left: currentRect.left,\n              top: currentRect.top,\n              width: currentRect.width,\n              height: currentRect.height,\n              pointsArray: coords.reduce<number[]>(\n                (acc, coord) => [...acc, Math.round(coord.x), Math.round(coord.y)],\n                [],\n              ),\n            },\n            {\n              canvas: canvas,\n            },\n          ),\n        ).finally(cleanup)\n      }\n    }\n\n    const handleMouseDown = (opt: TPointerEventInfo<TPointerEvent>) => {\n      if (isDrawing.current || isCompleting.current) return\n\n      const point = canvas.getScenePoint(opt.e)\n      mouseDownPoint.current = point\n\n      if (disableWhenActive) {\n        const activeObject = canvas.getActiveObject()\n        if (activeObject) {\n          return\n        }\n      }\n\n      isDrawing.current = true\n      rectRef.current = new Rect({\n        ...DEFAULT_OPTIONS,\n        left: point.x,\n        top: point.y,\n        width: 0,\n        height: 0,\n        ...rectProps,\n      })\n      canvas.add(rectRef.current)\n\n      canvas.on('mouse:move', handleMouseMove)\n      canvas.on('mouse:up', handleMouseUp)\n    }\n\n    canvas.on('mouse:down', handleMouseDown)\n\n    return () => {\n      canvas.hoverCursor = originHoverCursor\n      canvas.off('mouse:down', handleMouseDown)\n      if (rectRef.current) {\n        canvas.remove(rectRef.current)\n      }\n      isDrawing.current = false\n      canvas.requestRenderAll()\n    }\n  }, [store, onComplete, rectProps, strokeWidth, disableWhenActive])\n\n  return null\n}\n\nexport default FreeRect\n"],"names":["DEFAULT_OPTIONS","FreeRect","onComplete","disableWhenActive","rectProps","store","useStoreApi","mouseDownPoint","useRef","rectRef","isDrawing","isCompleting","strokeWidth","useMemo","useEffect","canvas","originHoverCursor","handleMouseMove","opt","currentX","currentY","handleMouseUp","currentRect","cleanup","coords","acc","coord","handleMouseDown","point","Rect"],"mappings":"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"}