sp-image-editor/lib/components/MainCanvas/index.js

React component version of filerobot image editor (FIE).

import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{useCallback,useEffect,useRef}from"react";import{DesignLayer,TransformersLayer}from"../Layers";import{AppProviderOverridenValue}from"../../context";import{SET_CANVAS_SIZE}from"../../actions";import{useResizeObserver,useStore}from"../../hooks";import NodeControls from"../NodeControls";import CanvasNode from"./CanvasNode";import{CanvasContainer,StyledOrignalImage}from"./MainCanvas.styled";var MainCanvas=function(){var a=useResizeObserver(),b=_slicedToArray(a,1),c=b[0],d=useStore(),e=useRef(null),f=useCallback(function(a){var b=a.width,c=a.height;d.dispatch({type:SET_CANVAS_SIZE,payload:{canvasWidth:b,canvasHeight:c}})},[]);return useEffect(function(){c(e.current,f)},[]),React.createElement(CanvasContainer,{className:"FIE_canvas-container",ref:e},!d.textIdOfEditableContent&&React.createElement(NodeControls,null),d.isShowOriginalImage&&React.createElement(StyledOrignalImage,{className:"FIE_original-image-compare",src:d.originalImage.src}),React.createElement(CanvasNode,null,React.createElement(AppProviderOverridenValue,{overridingValue:d},React.createElement(DesignLayer,null),React.createElement(TransformersLayer,null))))};export default MainCanvas;