Paper.js: Feature Request: Paperjs chrome extension

[kareljan]

Description/Steps to reproduce

I was wondering if there is a paperjs extension to visualise all current layers, groups and paths. A bit like the layers panel in Photoshop or any other graphical tool. My google search came up empty. So I don't think it exists yet.
If there is anyone out there with too much time on there hands and also interested in having such an extension. Please make it :-) It would be so helpful. Also when you select a layer, group or path in the list it gets fullyselected.

So just putting it out here.

[sasensi]

Hi, I think it is a great idea to have a way to visualize project hierarchy and to have basic interaction with it.
It could help a lot in things like: learning, debugging, building drawing apps...

Actually @lehni and @sapics, before I saw this issue, I was already thinking about doing something like that. But I was more thinking about doing it as a plugin rather than as a chrome extension.
That said, it won't be hard to wrap it in a chrome extension if it is done as a plugin.

Here is the use cases I thought about:

• expand / collapse groups
• select / unselect item
• show / hide item
• remove item
• change item select color
• change item name

About keeping layers panel in sync with the project, I have 2 ideas:

• the simplest one: user could call an update method on the plugin instance (or click an update button in its UI) when he wants
• the trickiest one: plugin could set up smart change listeners on paper.js methods that could change its state, updating UI accordingly

[sapics]

@sasensi Interesting feature 👍
When item is changed, project._changes are pushed with item information.
Thus, you can update layer UI automatically by tracking project._changes.

refs:
https://github.com/paperjs/paper.js/blob/develop/src/item/Item.js#L235
https://github.com/paperjs/paper.js/blob/develop/src/item/Project.js#L103

[lehni]

I've been thinking along these lines for ages also, but never found the time to do anything about it.

There is actually some hidden change-tracking infrastructure in places that's deactivated by default, see here:

https://github.com/paperjs/paper.js/blob/dfe4397a96ef8d7b59d6e7fa889cd7e826c73985/src/item/Project.js#L69-L71

as well as here:

https://github.com/paperjs/paper.js/blob/dfe4397a96ef8d7b59d6e7fa889cd7e826c73985/src/item/Project.js#L99-L112

I started adding this for a potential SVG backend, which would need to know about what changed on each animation frame. But such a palette could tap into this as well!

[sasensi]

For those interested in this feature, I made a prototype (implemented as a plugin) here:

• code
• demo

It's not made for production applications but I think it can be quite usefull for debugging (I'm already using it 😃).
I was thinking about making it available in http://sketch.paperjs.org, @lehni and @sapics, can you have a look and tell me what you think about that ?

[lehni]

@sasensi very cool, I already noticed the project! This is very much aligned with a feature that I meant to implement for ages myself. It would be really great to have it as part of sketch!

For this, we should probably make a bit of a plan. What if we agree on one modern UI framework to use to build a more modern sketch? And then use it for this layers view as well? Personally I'm a fan of Vue, and would have proposed that... I'm not so familiar with Angular or React.

[sasensi]

@lehni, sure, I'm more experienced with Angular but Vue seems to be great as well.
So about re-building sketch, are you thinking about adding other features ?

[sapics]

@sasensi Great work! I agree with you, I am very happy if we can use your plugin in sketch!

About frameworks, I have little to say, because I have no experience in Angular, React, TS, ES2015+, a bit of Vue...

[sasensi]

@lehni and @sapics, I made a PR (https://github.com/paperjs/sketch.paperjs.org/pull/5) to integrate the plugin before a full rebuild of sketch.
You can try it here.