react-filerobot-image-editor/lib/components/MainCanvas/CanvasNode.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 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{useEditableTextId,useStore}from"../../hooks";import isDrawTool from"../../utils/isDrawTool";import{endTouchesZooming,zoomOnTouchesMove}from"./touchZoomingEvents";import{StyledCanvasNode}from"./MainCanvas.styled";import{getCursorStyle}from"./MainCanvas.utils";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,t=useEditableTextId();Konva.pixelRatio=r;var u=DEFAULT_ZOOM_FACTOR,v=!s&&i!==TOOLS_IDS.CROP,w=useState(function(){return(h!==TABS_IDS.ANNOTATE&&h!==TABS_IDS.WATERMARK||!isDrawTool(i))&&p.factor>u}),x=_slicedToArray(w,2),y=x[0],z=x[1],A=useMemo(function(){return{cursor:getCursorStyle({tabId:h,toolId:i,pointerCssIcon:g})}},[h,i,g]),B=function(a){f({type:ZOOM_CANVAS,payload:a})},C=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]),D=function(){return z(h!==TABS_IDS.ANNOTATE&&!isDrawTool(i)||h===TABS_IDS.WATERMARK)},E=function(a){!a.target.isContentEditable&&(" "===a.key||"Control"===a.key||"Meta"===a.key)&&!a.repeat&&p.factor>u&&v&&(a.preventDefault(),z(!0),f({type:CHANGE_POINTER_ICON,payload:{pointerCssIcon:POINTER_ICONS.DRAG}}))},F=function(a){(" "===a.key||"Control"===a.key)&&(a.preventDefault(),D())},G=function(){c.current&&!t&&c.current.container().focus()};useEffect(function(){z(h!==TABS_IDS.ANNOTATE&&h!==TABS_IDS.WATERMARK&&!isDrawTool(i)&&p.factor>u);var a;return c.current&&(a=c.current.container(),a.addEventListener("mouseenter",G),a.addEventListener("keydown",E),a.addEventListener("keyup",F)),function(){a&&(a.removeEventListener("mouseenter",G),a.removeEventListener("keydown",E),a.removeEventListener("keyup",F))}},[h,i,p.factor,u,t]),useEffect(function(){f({type:CHANGE_POINTER_ICON,payload:{pointerCssIcon:POINTER_ICONS[y?"DRAG":"DEFAULT"]}})},[y]);var H=l*(v&&p.factor||u);return React.createElement(StyledCanvasNode,{className:"FIE_canvas-node",tabIndex:-1,ref:c,width:j,height:k,scaleX:H,scaleY:H,x:v&&p.x||null,y:v&&p.y||null,zoomFactor:v&&p.factor||u,onWheel:v?function(a){a.evt.preventDefault();var b=(p.factor||u)+a.evt.deltaY*-ZOOM_DELTA_TO_SCALE_CONVERT_FACTOR,c=a.currentTarget.getPointerPosition();B(_objectSpread(_objectSpread({},c),{},{factor:b}))}:void 0,onTap:C,onClick:C,onTouchMove:v?function(a){return zoomOnTouchesMove(a,B)}:void 0,onDragStart:function(a){var b;1<(null===(b=a.evt.touches)||void 0===b?void 0:b.length)&&z(!1)},onTouchEnd:v?function(){endTouchesZooming(D)}: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:v&&y,onDragEnd:function(a){a.currentTarget.draggable()&&"stage"===a.target.nodeType.toLowerCase()&&v&&y&&B({factor:p.factor,x:a.target.x(),y:a.target.y(),preparedDimensions:!0})},style:A},b)};export default memo(CanvasNode);