"Useful Data" section

The motivation behind this new section is to extract our project's data in an easier way while being able to play a bit with the output format.

At the moment we can get every pixel color of our project by frame and tweak the output with the following options:

• Change the color format: #000000, 0x000000, rgba(0,0,0,1).
• Reverse the order of the pixels by rows (odd, even or both rows).
  • This feature comes handy when you want to use your art's data in a another project. I.e. if you have a LED matrix and you want to render your drawing, it could happen that the pixel that you considered to be the first one is actually the last of its row. This feature can help to speed up your work.

You can find this feature in: Load -> Useful Data

Modal layout changes and fixes

• Copy to clipboard feature has been added to all the output fields.
• The close button and header elements within the modal are now fixed positioned.
• There is an inner scroll in the modal's body
• Once the modal is opened, the background scroll is disabled.

Features

• Animations: In addition to the ability of creating drawings, the user can generate animations as a result of a drawing sequence.
• A project can have as much drawings (we can call them frames) as the user wants.
• The duration of every single frame can be modified, as well as the total duration, giving as a better control over the animation results.
• A project can be exported and imported (in the previously exported format).
• Animations and single frame drawings can be downloaded or shared.
• New help tool-tip button included.
• The Palette have less and more convenient colors, including an empty row for custom colors. Note that the user can modify every color in the palette and all of them will be stored in the project.
• The CSS button will show the animation or single frame CSS code.
• Responsive layout, giving a better mobile experience.

Code refactor:

There has been a huge code refactor, trying to keep the code style more consistent and better organization:

• All the source code is now inside of /src folder, including the server code.
• PostCSS is introduced to handle most of the app styling and the CSS notation followed is BEM. Radium is also used to be able to use keyframes inline styles for the animation preview.
• More consistent use of Immutable data, avoiding parsing data from Immutable to JS and vice versa as much.
• Localstorage key has been changed to: pixelart-react-v2

Fixes:

• Undesirable dragging event triggered problem is solved.