react-filerobot-image-editor/lib/components/Layers/TransformersLayer/NodesTransformer.js

React component version of filerobot image editor (FIE).

import _extends from"@babel/runtime/helpers/extends";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{useEffect,useState}from"react";import{Transformer}from"react-konva";import{NODES_TRANSFORMER_ID,POINTER_ICONS,TOOLS_IDS,EVENTS}from"../../../utils/constants";import{useEditableTextId,useStore}from"../../../hooks";import{CHANGE_POINTER_ICON,ENABLE_TEXT_CONTENT_EDIT}from"../../../actions";import debounce from"../../../utils/debounce";import NodeControls from"../../NodeControls";import emitCustomEvent from"../../../utils/emitCustomEvent";var isUnMounted=!1,NodesTransformer=function(a){var b,c=useStore(),d=c.selectionsIds,e=void 0===d?[]:d,f=c.theme,g=c.designLayer,h=c.dispatch,i=c.config.useCloudimage,j=useEditableTextId(),k=useState([]),l=_slicedToArray(k,2),m=l[0],n=l[1],o=debounce(function(){if(!isUnMounted){var a=null!==g&&void 0!==g&&g.findOne&&0<e.length?e.map(function(a){return g.findOne("#".concat(a))}).filter(Boolean):[];n(a)}},5),p=function(){1===m.length&&m[0].name()===TOOLS_IDS.TEXT&&(emitCustomEvent(EVENTS.TEXT_CONTENT_EDIT_STARTING,{annotationId:m[0].id()}),h({type:ENABLE_TEXT_CONTENT_EDIT,payload:{textIdOfEditableContent:m[0].id()}}))};useEffect(function(){return isUnMounted=!1,function(){isUnMounted=!0}},[]),useEffect(function(){isUnMounted||o()},[e]);var q=m.filter(function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.attrs,c=void 0===b?{}:b,d=c.name;return d===TOOLS_IDS.TEXT}),r=i?["top-left","bottom-left","top-right","bottom-right"]:function(a){if(a[0]){var b=a.some(function(a){var b=a.attrs.autoWidth;return b}),c=a.some(function(a){var b=a.attrs.autoHeight;return b});return b||c?[].concat(_toConsumableArray(b?[]:["middle-right","middle-left"]),_toConsumableArray(c?[]:["top-center","bottom-center"])):void 0}}(q);return j?null:React.createElement(Transformer,_extends({id:NODES_TRANSFORMER_ID,centeredScaling:!1,rotationSnaps:[0,45,90,135,180,225,270,315],nodes:m,rotateAnchorOffset:50,anchorSize:14,anchorCornerRadius:7,padding:1===m.length?null!==(b=m[0].attrs.padding)&&void 0!==b?b:1:1,ignoreStroke:!1,anchorStroke:f.palette["accent-primary"],anchorFill:f.palette["access-primary"],anchorStrokeWidth:2,borderStroke:f.palette["accent-primary"],borderStrokeWidth:2,borderDash:[4],rotateEnabled:!i,onMouseOver:function(){h({type:CHANGE_POINTER_ICON,payload:{pointerCssIcon:POINTER_ICONS.MOVE}})},onMouseLeave:function(){h({type:CHANGE_POINTER_ICON,payload:{pointerCssIcon:POINTER_ICONS.DRAW}})},onDblClick:p,onDblTap:p,enabledAnchors:r,flipEnabled:!i&&!q[0],shouldOverdrawWholeArea:!0,"data-testid":"FIE-nodes-transformer"},a),React.createElement(NodeControls,a))};export default NodesTransformer;