sp-image-editor
Version:
React component version of filerobot image editor (FIE).
1 lines • 3.98 kB
JavaScript
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,{memo,useCallback,useEffect,useMemo,useState,useRef}from"react";import Konva from"konva";import{useStrictMode}from"react-konva";import{CHANGE_POINTER_ICON,CLEAR_ANNOTATIONS_SELECTIONS,ZOOM_CANVAS}from"../../actions";import{DEFAULT_ZOOM_FACTOR,POINTER_ICONS,TABS_IDS,TOOLS_IDS}from"../../utils/constants";import{useStore}from"../../hooks";import{endTouchesZooming,zoomOnTouchesMove}from"./touchZoomingEvents";import{StyledCanvasNode}from"./MainCanvas.styled";var ZOOM_DELTA_TO_SCALE_CONVERT_FACTOR=.006,CanvasNode=function(a){var b=a.children;useStrictMode(!0);var c=useRef(),d=useStore(),f=d.dispatch,g=d.pointerCssIcon,h=d.tabId,i=d.toolId,j=d.canvasWidth,k=d.canvasHeight,l=d.canvasScale,m=d.selectionsIds,n=void 0===m?[]:m,o=d.zoom,p=void 0===o?{}:o,q=d.config,r=q.previewPixelRatio,s=q.disableZooming;Konva.pixelRatio=r;var t=DEFAULT_ZOOM_FACTOR,u=!s&&i!==TOOLS_IDS.CROP,v=useState(h!==TABS_IDS.ANNOTATE&&h!==TABS_IDS.WATERMARK&&p.factor>t),w=_slicedToArray(v,2),x=w[0],y=w[1],z=useMemo(function(){return{cursor:g===POINTER_ICONS.DEFAULT&&h===TABS_IDS.ANNOTATE?POINTER_ICONS.DRAW:g}},[h,g]),A=function(a){f({type:ZOOM_CANVAS,payload:a})},B=useCallback(function(a){var b,c;a.evt.preventDefault(),null===(b=(c=a.currentTarget).container)||void 0===b||b.call(c).focus(),a.target instanceof Konva.Stage&&0<n.length&&f({type:CLEAR_ANNOTATIONS_SELECTIONS})},[n]),C=function(){return y(h!==TABS_IDS.ANNOTATE||h===TABS_IDS.WATERMARK)},D=function(a){("Space"===a.code||"Control"===a.key)&&!a.repeat&&p.factor>t&&u&&(a.preventDefault(),y(!0),f({type:CHANGE_POINTER_ICON,payload:{pointerCssIcon:POINTER_ICONS.DRAG}}))},E=function(a){"Space"===a.code&&(a.preventDefault(),C())},F=function(){c.current&&c.current.container().focus()};useEffect(function(){f({type:CHANGE_POINTER_ICON,payload:{pointerCssIcon:POINTER_ICONS[x?"DRAG":"DEFAULT"]}})},[x]),useEffect(function(){y(h!==TABS_IDS.ANNOTATE&&h!==TABS_IDS.WATERMARK&&p.factor>t);var a;return c.current&&(a=c.current.container(),a.addEventListener("mouseenter",F),a.addEventListener("keydown",D),a.addEventListener("keyup",E)),function(){a&&(a.removeEventListener("mouseenter",F),a.removeEventListener("keydown",D),a.removeEventListener("keyup",E))}},[h,p.factor,t]);var G=l*(u&&p.factor||t);return React.createElement(StyledCanvasNode,{className:"FIE_canvas-node",tabIndex:-1,ref:c,width:j,height:k,scaleX:G,scaleY:G,x:u&&p.x||null,y:u&&p.y||null,zoomFactor:u&&p.factor||t,onWheel:u?function(a){a.evt.preventDefault();var b=(p.factor||t)+a.evt.deltaY*-ZOOM_DELTA_TO_SCALE_CONVERT_FACTOR,c=a.currentTarget.getPointerPosition();A(_objectSpread(_objectSpread({},c),{},{factor:b}))}:void 0,onTap:B,onClick:B,onTouchMove:u?function(a){return zoomOnTouchesMove(a,A)}:void 0,onDragStart:function(a){var b;1<(null===(b=a.evt.touches)||void 0===b?void 0:b.length)&&y(!1)},onTouchEnd:u?function(){endTouchesZooming(C)}:void 0,dragBoundFunc:function(a){var b=Math.min(0,Math.max(a.x,j*(1-p.factor))),c=Math.min(0,Math.max(a.y,k*(1-p.factor)));return{x:b,y:c}},draggable:u&&x,onDragEnd:function(a){a.currentTarget.draggable()&&"stage"===a.target.nodeType.toLowerCase()&&u&&x&&A({factor:p.factor,x:a.target.x(),y:a.target.y(),preparedDimensions:!0})},style:z},b)};export default memo(CanvasNode);