Core|Concepts
This document explains the core concepts that you should know when using react-image-editor.
Since this project is planning to be turn into npm package, I'll use different terms. These terms will be used in package version.
Canvas is where every visual editing is in placed. Canvas is a top concept of all other concepts.
Data is current data which is related to current view. While a Canvas can have multiple Tabs, Data refers to the very current data that user can see on the screen at the moment.
History is a set of Data logs. There are three section, previous, present, future. Each section is a simple array that has elements of Data.
This domain is responsible for managing right work history sequences.
Tab is a concept which contains one History and one Data. Canvas can have a multiple Tabs. A user can jump between different tabs inside a react-image-editor project to do multiple works in one browser tab.
Editable Object is an abstract class for any object that can be drawn on the Canvas. Every object class in react-image-editor should extends this abstract class.
Frame is a box zone which is considered to be exported as an output image. User have to work on top of Frame in order to get an output image. Any Editable Object can be placed outside of a Frame, but only objects inside Frames can be exported.
Image is an image object that can be drawn in react-image-editor. User can import custom image files and add it to a Canvas.
Shape is an object that can be drawn as a simple shape, such as triangle, rectangle circle etc.
Icon is a small image object, just like icon itself.
Text is an object that can be drawn as a text. User can set a font family as well.
Brush is an object that represents user's custom line drawing.