is there any way i can chose a color using rgb or # ?

If you press the mouse button on a pixel and dragging the mouse to draw, the initial pixel will not get colored.

Hi! I wanted to extend your app (add dragabble support) but I got an error starting up

I did npm install and then npm start and got this:

$ npm start

> [email protected] start /Users/pselle200/Projects/pixel-art-react
> node server

fs.js:584
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                                                  ^

Error: ENOENT: no such file or directory, open 'config.json'
    at Error (native)
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:431:33)
    at Object.<anonymous> (app.js:33:30)
    at Module._compile (module.js:425:26)
    at loader (/Users/pselle200/Projects/pixel-art-react/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/pselle200/Projects/pixel-art-react/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)

npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v5.0.0
npm ERR! npm  v3.3.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node server`
npm ERR! Exit status 1

I can't tell what the issue is -- any ideas? I haven't used webpack before so idk if that's it.

title says it all!

According to this, V16 will go LTS on October 26. When that happens, several packages used will probably break for anyone that uses your project. Currently, I was able to get it to work fine with v14 but I haven't tested with v16 yet. I also would be willing to open a PR and do the work to help with that.

art

I wonder why the SimpleNotification component is connected? It does neither use state nor actions and could therefor be a "dumb" component. Or am I missing something?

Steps to reproduce:

• Select the color picker.
• Change the color of first cell (for example, pick a #5599dd color)
• Save the project
• reload the page (palette has the color #5599dd in first cell)
• Draw a cell

Expected behaviour:
Cell is drawn with color #5599dd
Current behaviour:
Cell is drawn with color #000000

Possible solution:

Now we have:

• a paletteGridData prop as a List of objects {color, id}
• a currentColor prop as an object {color, position}

I think there are redundant data that causes this kind of bugs when data is not well syncronized. I propose refactor the state to a List of colors and a cell active position. I think that in this case could be enough to represent the state of palette.

I'm working in converting the main reducer in a composition of subreducers that handles the different substates of aplication (palette, drawing tool, active grid, frames, etc) simplifying the relation between state and actions and allowing easier unit tests.

These are the branches where I'm working sequantially after #22 PR:

• Implement drawing tool reducer
• Implement palette reducer

I could fix this issue after implementing palette reducer. I could be easier to fix.

Cheers!

Using the default grid (20 * 20 = 400 cells), it seems that there are some rendering performance issues.
For example, if you try to draw a line quickly by drag and drop, some pixels are missing on the screen.
By moving slowly the mouse, it is OK.

In addition, after having made that line, even if I don't drag any more, pixels are still added on the grid when I simply move the mouse over the grid (I can see in the console that dragging flag is still set to true).

Note: in production, the performance issues are less obvious than in dev because of several optimizations that make the code run faster. Redux dev tools for example are known to slow down things a lot (a lot of information is logged in the console after every action).

Measurements (using React Perf Chrome plugin)

Let's check the rendering process by measuring time before and after rendering a single pixel on the grid.

Total time is not only the same, it is around 500 ms, which is too much time for a single pixel.
I can see that Connect(PixelCell) is "wasted" 799 times!

Using a 2 times bigger grid (40 * 20) Connect(PixelCell) is "wasted" 1599 times.

Let's try to fix that!

It would be much more convenient if you could make a drawing, then load it as one frame within an animation, so that you can avoid having to redraw a similar thing from scratch. Currently, it seems that if you want to animate, say, a person, then you have to draw that person over and over again from scratch, since there's no way to use the first drawing as the basis for subsequent drawings. It's possible I'm missing something, in which case please let me know and close this issue.

Pixel art drawing web app powered by **ReacJS**

I'd like to be able to import a PNG file consisting of one frame, or a spritesheet consisting of multiple frames of identical size.

What do you think?

Hi, thank you for this great OSS.
I've done a lot of drawing, however, I lost my data by browser-back accidently.

I copied css by each times, so I have a backup. However, I couldn't import this big data.

I attached my css below, would you kindly find any problems? I had looked in the source, but cannot figured out.

pixel.txt

When I try to import previously exported code it shows the error message: "Sorry, the project couldn't be imported"

I am exporting a single image CSS, then trying to load it with the load button and pasting the css code there.

Hello, maybe you can enable gif transparence
i tried to modify src\utils\canvasGIF.js with gif.setTransparent(0x00ff00); and setDispose to the default value gif.setDispose(2)
but is seems not to be the best thing to do because you will have to change the first default palette color and 'rgba(0, 0, 0, 1)' that will always be a transparent color.

Thank you & have a good day ;)

I'm too bored installing frames. I don't wanna a spritesheet. Can you add this property?

Hi

I just wanted to say thank you for creating this tool. Someone has kindly made a tool that allows me to combine the css outputs I get from your tool (here https://www.thecodingfox.com/interactive/pixel-world-editor/ ).

That has allowed me to create a sort of pixel art illustrated comic book ( here : https://drdru.github.io/stories/twc_save_aryn/02_on_the_way_to_kilm_1.html )

My workflow is as follow :

• download free video game tiles / sprites

• turns them to CSS using pixelartccs

• make illustration using pixel-world-editor

• add the HTML/CSS output into a custom template.

Cheers

Hi @jvalen

mouseup event is not handled outside GridWrapper component. Then, if mouseup event is produced outside the grid, the mouse keep drawing the cells.

Cheers!

It's just the other files.

Hello! I'm brand new to this project and I was having fun playing around with the interface. One enhancement that I found could be added is a symbol that follows the cursor when using the eraser tool similar to the "plus sign" that comes up when you are on the paint tool. I would like to add something like this but as I said I am brand new to this project. If someone could tell me where to start that would be much appreciated.

Hi, is that possible to render the grids to gif with https://github.com/jnordberg/gif.js ? With this way we can remove the server side rendering dependencies.

problem

i need to bulk move all my pixels, otherwise shrinking the image truncates my art!

Hi,

I introduced a defect in #20 related to touchmove. If you start touching in the grid and moving to the right out of grid boundaries, some cells of the grid are painted. This is because horitzontal coordinate should be lower than columns and this validition is not performed.

Cheers!