Add layers panel

[sasensi]

Description

Integrate Paperjs Layers Panel.

• Layers panel button is added at page bottom right.
• Plugin is lazy loaded to ensure minimal overhead for users not using it.
• If button is clicked and plugin loading fails (e.g. because of browser incompatibility), a warning message is displayed in the console and the button is removed.

Demo

Click on the button in the bottom-right corner to open the panel.

Relates to:

• Feature Request: Paperjs chrome extension paper.js#1446

[lehni]

@sasensi this is amazing! Is it synching with changes through change tracking, or do I need to press the refresh button if things change? What happens with animations? I don't have the time to test it thoroughly right now but will soon take a closer look!

I should mention that there is another person who has also been working on similar things, in Vue: @arnoson

We've had discussions about these things for more and a year, and he is currently working with me on an art installation where we also use paper.js. We should create a task force and join forces for the new sketch!

[sasensi]

@lehni change detection is automated thus theoretically, we will never have to click update button.
I just let it visible in case change detection would fail for an unexpected reason.

Here is an example with animation.

[lehni]

@sasensi super cool! Does it slow things down a lot when animating lots of things?

[sasensi]

@lehni, in its current version, it is not optimized for performance so I guess it will inevitably slow things down on extreme cases.
We can see that with the raster division example when it has a lot of elements.
But I think that for most common cases it is not problematic.

[sasensi]

@lehni, previous sketch was broken, see this one instead.

[lehni]

I just noticed that the file numbers look wrong. Do you see this too?

[sasensi]

Yes, I see this too, but it is only a display bug which seems related to ace internal positioning.

Actually as I didn't know how sketch was built in real context, I just pushed the dependencies that seemed to be needed in my fork's gh-pages branch in order to make a demo. Maybe there are still some files missing or maybe this is related to a build / deploy step ?

[sapics]

There are font loading errors (ex. http://assets.paperjs.org/fonts/akkurat-mono.woff)
It might cause file number difference.

[arnoson]

Awesome! I think a layers panel in sketch would be really handy. The change tracking might be faster if it is only detected once per frame: sketch
I build something similar in vue.js for a paper.js based vector editor (wektor layers component) where also changing the hierarchy via dragging is possible, although it is still a bit buggy.