@cs-open/react-fabric/dist/esm/hooks/useDraggable.mjs.map

React Fabric

{"version":3,"file":"useDraggable.mjs","sources":["../../../src/hooks/useDraggable.ts"],"sourcesContent":["import type { Canvas, FabricObject, TPointerEvent, TPointerEventInfo } from 'fabric'\nimport { shallow } from 'zustand/shallow'\nimport { useEffect, useRef } from 'react'\nimport type { ReactFabricState } from '../types/store'\nimport { useStore, useStoreApi } from './useStore'\n\nconst selector = (s: ReactFabricState) => ({\n  canvas: s.canvas,\n  draggable: s.draggable,\n})\n\nconst stageObject = (object: FabricObject) => {\n  const raw = object.get('selectable')\n  object.set('selectable', false)\n\n  return () => {\n    object.set('selectable', raw)\n  }\n}\n\nconst stage = (canvas: Canvas | null) => {\n  if (!canvas) return () => { }\n  const objects = canvas.getObjects()\n\n  const unStagedList = objects.map(object => {\n    return stageObject(object)\n  })\n\n  return () => {\n    unStagedList.forEach(fn => fn())\n  }\n}\n\nconst useDraggable = () => {\n  const store = useStoreApi()\n  const { canvas, draggable } = useStore(selector, shallow)\n  const lastPosXRef = useRef(0)\n  const lastPosYRef = useRef(0)\n  const isDraggingRef = useRef(false)\n\n  useEffect(() => {\n    if (!draggable) return\n    const unStaged = stage(canvas)\n\n    const onMouseDown = ({ e }: TPointerEventInfo<TPointerEvent>) => {\n      // @ts-expect-error 触摸屏拿不到clintX\n      const touch = e.changedTouches?.[0]\n      isDraggingRef.current = true\n      // @ts-expect-error 触摸屏拿不到clintX\n      lastPosXRef.current = e.clientX ?? touch?.clientX\n      // @ts-expect-error 触摸屏拿不到clintX\n      lastPosYRef.current = e.clientY ?? touch?.clientY\n    }\n\n    const onMouseMove = ({ e }: TPointerEventInfo<MouseEvent>) => {\n      if (isDraggingRef.current && canvas) {\n        var vpt = canvas.viewportTransform\n        // @ts-expect-error 触摸屏拿不到clintX\n        const touch = e.changedTouches?.[0]\n        vpt[4] += (e.clientX ?? touch?.clientX) - lastPosXRef.current!\n        vpt[5] += (e.clientY ?? touch?.clientY) - lastPosYRef.current!\n        canvas.requestRenderAll()\n        lastPosXRef.current = e.clientX ?? touch?.clientX\n        lastPosYRef.current = e.clientY ?? touch?.clientY\n      }\n    }\n\n    const onMouseUp = (_: TPointerEventInfo<TPointerEvent>) => {\n      if (canvas) {\n        canvas.setViewportTransform(canvas.viewportTransform)\n        isDraggingRef.current = false\n      }\n    }\n\n    canvas?.on('mouse:down', onMouseDown)\n    canvas?.on('mouse:move', onMouseMove)\n    canvas?.on('mouse:up', onMouseUp)\n\n    return () => {\n      unStaged()\n      canvas?.off('mouse:down', onMouseDown)\n      canvas?.off('mouse:move', onMouseMove)\n      canvas?.off('mouse:up', onMouseUp)\n    }\n  }, [canvas, draggable, store])\n\n  return null\n}\n\nexport default useDraggable\n"],"names":["selector","s","stageObject","object","raw","stage","canvas","unStagedList","fn","useDraggable","store","useStoreApi","draggable","useStore","shallow","lastPosXRef","useRef","lastPosYRef","isDraggingRef","useEffect","unStaged","onMouseDown","e","touch","onMouseMove","vpt","onMouseUp","_"],"mappings":"gKAMMA,MAAAA,EAAYC,IAAyB,CACzC,OAAQA,EAAE,OACV,UAAWA,EAAE,SACf,GAEMC,EAAeC,GAAyB,CAC5C,MAAMC,EAAMD,EAAO,IAAI,YAAY,EACnC,OAAAA,EAAO,IAAI,aAAc,EAAK,EAEvB,IAAM,CACXA,EAAO,IAAI,aAAcC,CAAG,CAC9B,CACF,EAEMC,EAASC,GAA0B,CACvC,GAAI,CAACA,EAAQ,MAAO,IAAM,CAAA,EAG1B,MAAMC,EAFUD,EAAO,aAEM,IAAIH,GACxBD,EAAYC,CAAM,CAC1B,EAED,MAAO,IAAM,CACXI,EAAa,QAAQC,GAAMA,EAAAA,CAAI,CACjC,CACF,EAEMC,EAAe,IAAM,CACzB,MAAMC,EAAQC,EAAY,EACpB,CAAE,OAAAL,EAAQ,UAAAM,CAAU,EAAIC,EAASb,EAAUc,CAAO,EAClDC,EAAcC,EAAO,CAAC,EACtBC,EAAcD,EAAO,CAAC,EACtBE,EAAgBF,EAAO,EAAK,EAElC,OAAAG,EAAU,IAAM,CACd,GAAI,CAACP,EAAW,OAChB,MAAMQ,EAAWf,EAAMC,CAAM,EAEvBe,EAAc,CAAC,CAAE,EAAAC,CAAE,IAAwC,CAE/D,MAAMC,EAAQD,EAAE,iBAAiB,CAAC,EAClCJ,EAAc,QAAU,GAExBH,EAAY,QAAUO,EAAE,SAAWC,GAAO,QAE1CN,EAAY,QAAUK,EAAE,SAAWC,GAAO,OAC5C,EAEMC,EAAc,CAAC,CAAE,EAAAF,CAAE,IAAqC,CAC5D,GAAIJ,EAAc,SAAWZ,EAAQ,CACnC,IAAImB,EAAMnB,EAAO,kBAEjB,MAAMiB,EAAQD,EAAE,iBAAiB,CAAC,EAClCG,EAAI,CAAC,IAAMH,EAAE,SAAWC,GAAO,SAAWR,EAAY,QACtDU,EAAI,CAAC,IAAMH,EAAE,SAAWC,GAAO,SAAWN,EAAY,QACtDX,EAAO,iBAAA,EACPS,EAAY,QAAUO,EAAE,SAAWC,GAAO,QAC1CN,EAAY,QAAUK,EAAE,SAAWC,GAAO,OAC5C,CACF,EAEMG,EAAaC,GAAwC,CACrDrB,IACFA,EAAO,qBAAqBA,EAAO,iBAAiB,EACpDY,EAAc,QAAU,GAE5B,EAEA,OAAAZ,GAAQ,GAAG,aAAce,CAAW,EACpCf,GAAQ,GAAG,aAAckB,CAAW,EACpClB,GAAQ,GAAG,WAAYoB,CAAS,EAEzB,IAAM,CACXN,EAAAA,EACAd,GAAQ,IAAI,aAAce,CAAW,EACrCf,GAAQ,IAAI,aAAckB,CAAW,EACrClB,GAAQ,IAAI,WAAYoB,CAAS,CACnC,CACF,EAAG,CAACpB,EAAQM,EAAWF,CAAK,CAAC,EAEtB,IACT"}