react-filerobot-image-editor/lib/hooks/useDrawPreviewByPointer.js

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{useCallback,useState,useEffect,useRef}from"react";import getPointerOffsetPosition from"../utils/getPointerOffsetPosition";import isFunction from"../utils/isFunction";import useStore from"./useStore";var eventsOptions={passive:!0},useDrawPreviewByPointer=function(a){var b=a.createNewDrawInstance,c=a.onPointerStart,d=a.onPointerMove,e=a.onHoldPointerMove,f=a.onPointerLeaveCanvas,g=a.onPointerReleased,h=a.dontResetPreview,i=void 0!==h&&h,j=useStore(),k=j.previewGroup,l=j.designLayer,m=null===k||void 0===k?void 0:k.getStage(),n=useRef(b()),o=useState(function(){return n.current.attrs}),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useRef(!1),t=useRef(_objectSpread({},q)),u=useCallback(function(a){s.current=a},[]),v=useCallback(function(a){var b=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];b&&m.setAttrs({isDrawing:!0}),r(function(){var b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=_objectSpread(_objectSpread({},b),a);return n.current&&n.current.setAttrs(c),c})},[m,k,q]),w=function(){var a=b(_objectSpread({},n.current.attrs));k.add(a),n.current=a,r(a.attrs)},x=useCallback(function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:t.current;0<(null===k||void 0===k?void 0:k.children.length)&&k.destroyChildren(),r(a),n.current.setAttrs(a)},[m,k]),y=useCallback(function(){if(!l||!k)return[0,0];var a=getPointerOffsetPosition(k);return[a.offsetX-(l.attrs.xPadding||0),a.offsetY-(l.attrs.yPadding||0)]},[l]),z=useCallback(function(a,b){if(isFunction(b)){var c=b({event:a,attrs:n.current.attrs,position:y(),setIsDisabled:u,isDisabled:s.current});c&&v(c)}},[v,y]),A=useCallback(function(a){s.current||z(a,d)},[z,d]),B=useCallback(function(a){z(a,e)},[z,e]),C=useCallback(function(a){var b;n.current&&(b=g({event:a,attrs:n.current.attrs,setIsDisabled:u,isDisabled:s.current})),m.setAttrs({isDrawing:!1}),i||x(b),m.off("mousemove touchmove",B),m.off("mouseleave touchcancel",C),document.removeEventListener("mouseup",C,eventsOptions),document.removeEventListener("touchend",C,eventsOptions),document.removeEventListener("mouseleave",C,eventsOptions),document.removeEventListener("touchcancel",C,eventsOptions)},[B,g,x,i]),D=useCallback(function(a){a.target.attrs.draggable||s.current||(i&&w(),a.evt.preventDefault(),z(a,c),m.on("mousemove touchmove",B),m.on("mouseleave touchcancel",C),document.addEventListener("mouseup",C,eventsOptions),document.addEventListener("touchend",C,eventsOptions),document.addEventListener("mouseleave",C,eventsOptions),document.addEventListener("touchcancel",C,eventsOptions))},[B,C,c,z]);return useEffect(function(){return function(){k&&k.destroyChildren()}},[]),useEffect(function(){return m&&(m.on("mousedown touchstart",D),isFunction(d)&&m.on("mousemove touchmove",A),isFunction(f)&&m.on("mouseleave touchcancel",f)),function(){m&&(m.off("mousedown touchstart",D),isFunction(d)&&m.off("mousemove touchmove",A),isFunction(f)&&m.off("mouseleave touchcancel",f))}},[l,D,A,f]),{tmpDrawAttrs:q,updateTmpDrawAttrs:v,resetTmpDrawInstance:x,isDisabled:null===s||void 0===s?void 0:s.current,setIsDisabled:u}};export default useDrawPreviewByPointer;