Pixel Editor

An editor for making pixel art built on top of the Fluid Framework, React, and MobX.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Architecture

This application uses a layered architecture and uses MobX for state management. There are three layers, each of which only talks to the layer below it. Starting with the top layer:

• Component Tree - The React Component tree, which renders state and calls MobX actions as appropriate to perform edits. See Grid.tsx for the majority of the Component-level logic.
• MobX Store - Maintains application state. There are two distinct flows that occur in the MobX Store:
  • Edits to the Model (e.g., setCell).
    • Synchronous edits are implemented as actions (MobX's term for side-effectful methods on the Store) that call methods on the SharedTree instance.
    • An asynchronous action exists for connecting to Fluid (connectToFluid). It is implemented using MobX's runInAction, which allows async Store methods to schedule work for later execution.
  • Propagation of state from the Model to the Component Tree. Implemented by calling makeAutoObservable in the AppStore constructor and wrapping the Grid component in an observer higher-order component.
• Model - Encapsulates Fluid Tree initialization and editing. Exposes editing degrees of freedom as methods on the schema.