Shape selection (Z) can't pick the css body, html{color:xxx} color

[TALANTO]

To explain it simply go here http://juliandescottes.github.io/piskel/ draw something black (#000000), select the Shape selection tool and try to pick it up. The error will appear (click twice if not).

Next, go here http://www.piskelapp.com/ repeat the same think and it will work but if you draw something with #aaaaaa color, the same issue will appear.

Why? Because piskellapp.com has an additional CSS file which has body{color : #AAA;}. Basically if you change body color to a different color you can't pick the same color with the tool.

The error

:

The same issue appear if you click with Shape selection tool outside the canvas of the image.

I'll put the error as text this time (it may be different from the first one).

piskel-packaged-min-2016-11-12-06-33.js:16 Uncaught TypeError: Cannot read property 'length' of undefined
at a.ShapeSelect.a.BaseSelect.drawSelectionOnOverlay_ (piskel-packaged-min-2016-11-12-06-33.js:16)
at a.ShapeSelect.onSelectStart_ (piskel-packaged-min-2016-11-12-06-33.js:16)
at a.ShapeSelect.a.BaseSelect.applyToolAt (piskel-packaged-min-2016-11-12-06-33.js:16)
at a.DrawingController.onMousedown_ (piskel-packaged-min-2016-11-12-06-33.js:11)
at HTMLDivElement.f (piskel-packaged-min-2016-11-12-06-33.js:1)
at HTMLDivElement.dispatch (piskel-packaged-min-2016-11-12-06-33.js:2)
at HTMLDivElement.h (piskel-packaged-min-2016-11-12-06-33.js:2)
a.BaseSelect.drawSelectionOnOverlay_ @ piskel-packaged-min-2016-11-12-06-33.js:16
a.ShapeSelect.onSelectStart_ @ piskel-packaged-min-2016-11-12-06-33.js:16
a.BaseSelect.applyToolAt @ piskel-packaged-min-2016-11-12-06-33.js:16
a.DrawingController.onMousedown_ @ piskel-packaged-min-2016-11-12-06-33.js:11
f @ piskel-packaged-min-2016-11-12-06-33.js:1
dispatch @ piskel-packaged-min-2016-11-12-06-33.js:2
h @ piskel-packaged-min-2016-11-12-06-33.js:2
piskel-packaged-min-2016-11-12-06-33.js:16

Uncaught TypeError: Cannot read property 'some' of undefined
at a.ShapeSelect.a.BaseSelect.isInSelection (piskel-packaged-min-2016-11-12-06-33.js:16)
at a.ShapeSelect.a.BaseSelect.applyToolAt (piskel-packaged-min-2016-11-12-06-33.js:16)
at a.DrawingController.onMousedown_ (piskel-packaged-min-2016-11-12-06-33.js:11)
at HTMLDivElement.f (piskel-packaged-min-2016-11-12-06-33.js:1)
at HTMLDivElement.dispatch (piskel-packaged-min-2016-11-12-06-33.js:2)
at HTMLDivElement.h (piskel-packaged-min-2016-11-12-06-33.js:2)
a.BaseSelect.isInSelection @ piskel-packaged-min-2016-11-12-06-33.js:16
a.BaseSelect.applyToolAt @ piskel-packaged-min-2016-11-12-06-33.js:16
a.DrawingController.onMousedown_ @ piskel-packaged-min-2016-11-12-06-33.js:11
f @ piskel-packaged-min-2016-11-12-06-33.js:1
dispatch @ piskel-packaged-min-2016-11-12-06-33.js:2
h @ piskel-packaged-min-2016-11-12-06-33.js:2

I hope you can understand. Thank you.

[juliandescottes]

Thanks for the report!

Looks like this is a weird side effect on the fallback strategy found in pskl.utils.ColorToInt:
https://github.com/juliandescottes/piskel/blob/master/src/js/utils/core.js#L208-L217

When we can't parse the color, we create a div and get the color from the div's computed style (which is why you get a different behavior depending on the body color).

We should

• check if the fallback is ever called in other situations
• change the fallback strategy to return a default color (black?)
• reimplement getSimilarConnectedPixelsFromFrame to directly use visitConnectedPixels instead of being a hack on top of paintSimilarConnectedPixelsFromFrame

[TALANTO]

It's still not fully fixed. I assume that you couldn't understand my explanations so I made a video. Try those sites if won't work will upload again.

https://vid.me/ZKri
http://sendvid.com/nuava6va

[juliandescottes]

ah I missed the second part. fixed now, thanks