React UI : Layers Panel

It's a Photoshop-liked layers pannel (build on React / Flux) supporting SORT / HIDE / LOCK / DELETE / DUPLICATE layers. I assume you're already familiar with React and Flux. Check them out if you're not.

This project is still young. Feel free to correct me if there're wrong/bad codes.

Demo

demo

Usage

Before creating component you should create layers store for the componenet. The store is a JSON array indicating the properties of a layer. Of course you can share the store among different React components.

var createLayerStore = require('react-ui-layers-panel').createLayerStore;
var store = createLayerStore([{isVisible: true, isLocked: false, snapshot: SVGSVGElement}]);

If you use browserify or watchify to build JavaScript bundle, remember to externalize the react for better performance and less size of JavaScript bundle.

browserify --external react ...

Complete Example:

var React = typeof window === 'object' ? window.React : require('react');
var LayersPanel = require('react-ui-layers-panel').LayersPannel;
var createLayerStore = require('react-ui-layers-panel').createLayerStore;

// Initialize the store for the LayersPanel.
var store = createLayerStore([{isVisible: true, isLocked: false, data: 1111},
                              {isVisible: false, isLocked: true, data: 2222},
                              {isVisible: false, isLocked: false, data: 3333},
                              {isVisible: true, isLocked: false, data: 4444},
                              {isVisible: false, isLocked: true, data: 5555}]);

React.render(
  <LayersPanel store={store}/>,
  document.getElementById('react-example')
);

Actually createLayerStore returns an object containing the store and action properties. You could use action to apply changes to layers and get layer's properties through store.

Note: You SHOULD NOT change the layer store directly. Or it will break the logic and make the whole system inconsistent.

copyright@Facebook

Layer Store API

You should care about the format of Layer Object. It is quite simple and only has few properties. These are properties you'd care.

{
  isVisible: true,
  isLocked: false,
  data: arbitrary object | null | undefined
}

Useful APIs:

/**
 * @param {Integer} token - The token(or index) of the layer in store you want.
 * @return {Object} - The layer object.
 */
getLayerState(token)

/**
 * @return {Array} - The array of all layer objects.
 */
getAll()

/**
 * @return {Integer} - The total amount of layers.
 */
length()

/**
 * @param {Function} callback - The callback function subscribed for layer change.
 */
listen(callback)

/**
 * @param {Function} callback - The callback function subscribed for layer change.
 */
unlisten(callback)

Layer Action API

The APIs you'd care:

/**
 * @param {Integer} token - The position of the layer in store you want to insert. Append it to the end if undefined.
 * @param {Object} layer - A layer object.
 */
insertLayer(token, layer)

/**
 * @param {Integer} token - The position of the layer in store you want to insert. Append it to the end if undefined.
 * @param {Object} layer - Array of layer objects.
 */
insertLayers(token, layers)

/**
 * @param {Integer} token - The token(or index) of the layer in store you want to delete.
 */
deleteLayer(token)

/**
 * @param {Integer} token - The token(or index) of the layer in store you want to change.
 * @param {Boolean|undefined} isVisible - Whether the layer is visible or not. Won't change if undefined.
 * @param {Boolean|undefined} isLocked - Whether the layer is locked or not. Won't change if undefined.
 */
setLayerState(token, isVisible, isLocked)

/**
 * @param {Integer} token - The token(or index) of the layer in store you want to duplicate.
 */
duplicateLayer(token)

/**
 * @param {Integer} from - The 1st position of the layer you want to exchange with.
 * @param {Integer} to - The 2nd position of the layer you want to exchange with.
 */
exchangeLayers(from, to)