@zergo0/react-filerobot-image-editor/lib/hooks/useAnnotation/previewThenCallAnnotationAdding.js

React component version of filerobot image editor (FIE).

import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _excluded=["id","x","y","points"],_excluded2=["startedX","startedY","offsetX","offsetY","width","height"];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{TOOLS_IDS}from"../../utils/constants";import getElemDocumentCoords from"../../utils/getElemDocumentCoords";import getPointerOffsetPositionBoundedToObject from"../../utils/getPointerOffsetPositionBoundedToObject";import getBoundingRectUnScaled from"./getBoundingRectUnScaled";import getNewAnnotationPreview,{dimensToProperAnnotationDimens,NO_WIDTH_HEIGHT_ANNOTATIONS}from"./getNewAnnotationPreview";var pointerDown={startedX:void 0,startedY:void 0,isOutOfCanvas:!1},eventsOptions={passive:!0},MIN_PIXELS=1,shownAnnotationPreview=null,textAnnotationWrappedRect=null,latestAnnotationProps=null,previewThenCallAnnotationAdding=function(a,b,c,d){var f=function getCanvasBoundingRect(){return getElemDocumentCoords(a.content)},g=function wrapTextBoundsPreviewByRect(a){textAnnotationWrappedRect=getNewAnnotationPreview(_objectSpread(_objectSpread({},a),{},{name:TOOLS_IDS.RECT,fill:"",stroke:"#000000",strokeWidth:2,shadowColor:"#ffffff",shadowBlur:1,shadowOpacity:.7})),c.add(textAnnotationWrappedRect)},h=function previewAnnotation(a){shownAnnotationPreview=getNewAnnotationPreview(a),c.add(shownAnnotationPreview),a.name===TOOLS_IDS.TEXT&&g(a),latestAnnotationProps=a},i=function updateAnnotationPreview(a,b){if(latestAnnotationProps){var c=dimensToProperAnnotationDimens(a,latestAnnotationProps.name,b);textAnnotationWrappedRect&&textAnnotationWrappedRect.setAttrs(c),shownAnnotationPreview.setAttrs(c),latestAnnotationProps=_objectSpread(_objectSpread({},latestAnnotationProps),c)}},j=function updatePreviewWithBoundedDimens(a){var b=getPointerOffsetPositionBoundedToObject(c,f());i(getBoundingRectUnScaled(b,pointerDown,c),a.shiftKey)},k=function destroyShownPreview(){c&&shownAnnotationPreview&&c.destroyChildren()},l=function handlePointerMove(d){var e;if(!(1<(null===(e=d.evt.touches)||void 0===e?void 0:e.length))){var g=getPointerOffsetPositionBoundedToObject(c,f());pointerDown.isOutOfCanvas&&(document.removeEventListener("mousemove",j,eventsOptions),document.removeEventListener("touchmove",j,eventsOptions),pointerDown.isOutOfCanvas=!1);var k=getBoundingRectUnScaled(g,pointerDown,c);if(shownAnnotationPreview)i(k,d.evt.shiftKey);else{var l=b.id,m=b.x,n=b.y,o=b.points,p=_objectWithoutProperties(b,_excluded);h(_objectSpread(_objectSpread(_objectSpread({},p),k),{},{name:b.name}))}a.setAttrs({isDrawing:!0})}},m=function handlePointerOut(){pointerDown.isOutOfCanvas||(document.addEventListener("mousemove",j,eventsOptions),document.addEventListener("touchmove",j,eventsOptions),pointerDown.isOutOfCanvas=!0)},n=function handlePointerUp(){var c,e;if(k(),latestAnnotationProps&&(latestAnnotationProps.width>=MIN_PIXELS&&latestAnnotationProps.height>=MIN_PIXELS||latestAnnotationProps.radiusX>=MIN_PIXELS&&latestAnnotationProps.radiusY>=MIN_PIXELS||null!==(c=latestAnnotationProps.points)&&void 0!==c&&c[2]||null!==(e=latestAnnotationProps.points)&&void 0!==e&&e[3]||latestAnnotationProps.radius>=MIN_PIXELS)){var f=latestAnnotationProps,g=f.startedX,h=f.startedY,i=f.offsetX,o=f.offsetY,p=f.width,q=f.height,r=_objectWithoutProperties(f,_excluded2);NO_WIDTH_HEIGHT_ANNOTATIONS.includes(b.name)||(r.width=p,r.height=q),r.name=b.name||r.name,d(r,!0)}shownAnnotationPreview=null,textAnnotationWrappedRect=null,latestAnnotationProps=null,a.setAttrs({isDrawing:!1}),a.off("mousemove touchmove",l),a.off("mouseleave touchcancel",m),document.removeEventListener("mouseup",n,eventsOptions),document.removeEventListener("touchend",n,eventsOptions),document.removeEventListener("mouseleave",n,eventsOptions),document.removeEventListener("touchcancel",n,eventsOptions),document.removeEventListener("mousemove",j,eventsOptions),document.removeEventListener("touchmove",j,eventsOptions),pointerDown.isOutOfCanvas=!1},o=function handlePointerDown(b){var d;if(b.evt.preventDefault(),!(b.target.attrs.draggable||1<(null===(d=b.evt.touches)||void 0===d?void 0:d.length))){k();var e=getPointerOffsetPositionBoundedToObject(c,f());pointerDown.startedX=e.offsetX,pointerDown.startedY=e.offsetY,pointerDown.isOutOfCanvas=!1,a.on("mousemove touchmove",l),a.on("mouseleave touchcancel",m),document.addEventListener("mouseup",n,eventsOptions),document.addEventListener("touchend",n,eventsOptions),document.addEventListener("mouseleave",n,eventsOptions),document.addEventListener("touchcancel",n,eventsOptions)}};return a.on("mousedown touchstart",o),function(){k(),a.off("mousedown touchstart",o)}};export default previewThenCallAnnotationAdding;