@zergo0/react-filerobot-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";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";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)},[]),_jsxs(CanvasContainer,{className:"FIE_canvas-container",ref:e,children:[!d.textIdOfEditableContent&&_jsx(NodeControls,{}),d.isShowOriginalImage&&_jsx(StyledOrignalImage,{className:"FIE_original-image-compare",src:d.originalImage.src}),_jsx(CanvasNode,{children:_jsxs(AppProviderOverridenValue,{overridingValue:d,children:[_jsx(DesignLayer,{}),_jsx(TransformersLayer,{})]})})]})};export default MainCanvas;