react-filerobot-image-editor/lib/components/tools/Pen/PenOptions.js

React component version of filerobot image editor (FIE).

import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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 React,{useCallback,useEffect,useRef}from"react";import{useAnnotation,useSetAnnotation,useStore}from"../../../hooks";import{TOOLS_IDS}from"../../../utils/constants";import AnnotationOptions from"../../common/AnnotationOptions";import getPointerOffsetPosition from"../../../utils/getPointerOffsetPosition";import randomId from"../../../utils/randomId";import{SELECT_ANNOTATION}from"../../../actions";var eventsOptions={passive:!0},PenOptions=function(a){var b=a.t,c=useStore(),d=c.dispatch,e=c.designLayer,f=c.previewGroup,g=c.config,h=useSetAnnotation(),i=useAnnotation(_objectSpread(_objectSpread(_objectSpread({},g.annotationsCommon),g[TOOLS_IDS.PEN]),{},{name:TOOLS_IDS.PEN}),{enablePreview:!1}),j=_slicedToArray(i,3),k=j[0],l=j[1],m=j[2],n=useRef(null),o=useRef({points:[],moved:!1,id:""}),p=useCallback(function(){var a=getPointerOffsetPosition(f);return[a.offsetX-(e.attrs.xPadding||0),a.offsetY-(e.attrs.yPadding||0)]},[e]),q=useCallback(function(){o.current.moved?(o.current.points=o.current.points.concat(p()),h({id:o.current.id,points:o.current.points,dismissHistory:!0})):(o.current={moved:!0,id:randomId(TOOLS_IDS.PEN),points:[].concat(_toConsumableArray(o.current.points),_toConsumableArray(p()))},m({id:o.current.id,name:TOOLS_IDS.PEN,points:o.current.points}))},[p]),r=useCallback(function(){o.current.id&&g[TOOLS_IDS.PEN].selectAnnotationAfterDrawing&&d({type:SELECT_ANNOTATION,payload:{annotationId:o.current.id}}),o.current=null,n.current.off("mousemove touchmove",q),n.current.off("mouseleave touchcancel",r),document.removeEventListener("mouseup",r,eventsOptions),document.removeEventListener("touchend",r,eventsOptions),document.removeEventListener("mouseleave",r,eventsOptions),document.removeEventListener("touchcancel",r,eventsOptions)},[q]),s=useCallback(function(a){a.target.attrs.draggable||(a.evt.preventDefault(),o.current={points:p()},n.current.on("mousemove touchmove",q),n.current.on("mouseleave touchcancel",r),document.addEventListener("mouseup",r,eventsOptions),document.addEventListener("touchend",r,eventsOptions),document.addEventListener("mouseleave",r,eventsOptions),document.addEventListener("touchcancel",r,eventsOptions))},[p,q,r]);return useEffect(function(){return n.current=null===e||void 0===e?void 0:e.getStage(),n.current&&n.current.on("mousedown touchstart",s),function(){n.current&&n.current.off("mousedown touchstart",s)}},[e]),React.createElement(AnnotationOptions,{className:"FIE_pen-tool-options","data-testid":"FIE-pen-tool-options",annotation:k,updateAnnotation:l,t:b,hidePositionField:!0,hideFillOption:!0})};export default PenOptions;