viliusle / miniPaint

online image editor
http://viliusle.github.io/miniPaint/
Other
2.6k stars 607 forks source link

Select Layer #254

Closed josephsr closed 3 years ago

josephsr commented 3 years ago

Probably a very simple one but been struggling with my limited knowledge of Javascript. Currently, when I pick a tool and use it it puts it on a new layer. I have created some custom layers onload. I am able to set the visibility by using toggle_visibility

What I am not able to do 1) Select the layer using the id (have stored it) 2) Any paint on it (brush, pencil etc) needs to be on the above selected layer. Currently it puts it on a new layer. Trying to tinker bundle.js or brush.js/pencil.js did not help

Thanks in advance

Regards, Joseph

viliusle commented 3 years ago
  1. select(id) - check wiki
  2. it creates additional layer, if current layer is different or has different settings. Remember, pencil/brush data is basically array of positions, not raster data, so you can not merge it with image for example. Also do not be afraid to create new layer. It helps to separate things. https://github.com/viliusle/miniPaint/blob/master/src/js/tools/pencil.js#L35

p.s. do not edit bundle.js, this i auto-generated file.

josephsr commented 3 years ago

I had tried to force and update rather than insert by editing if (config.layer.type != this.name || params_hash != this.params_hash) { to if (1==2) { // in pencil.js but it still goes to a new layers rathan than updating existing layer

Also, these does not seem to work -

  1. document.getElementById('miniPaint').contentWindow.Layers.select(id);
  2. window.Layers.select(id);

    Layers.toggle_visibility(id); (works) id = id of the layer

I think the class which has select method is not getting exported

Giwayume commented 3 years ago

That's how the pencil tool is designed. If you draw a line with the pencil, change the selected color, then draw another line, that second line will be drawn on a new layer because the pencil only supports one color per layer. You can change the color of a pencil layer later in the layer details.

image

It doesn't work like a typical raster image editor like you may be used to.

But honestly, the pencil tool might as well be converted to a raster tool because changing the color all at once after the fact is the only thing it has going for it. After you draw a line with the pencil, you can't immediately erase it, have to go to a menu item to rasterize it first. In other raster editors, changing the color of a raster line is simple with the use of an alpha lock button and painting over it. The vector-like nature of the pencil tool isn't very helpful because of the lack of ways to edit it after the fact.

josephsr commented 3 years ago
  1. Is there anyway I can merge the pencil drawing onto my custom created layer. To re-phrase, I have an image list on the left, on clicking the image, user can edit image and move onto next one but since the pencil drawing is on a different layer when move around then the pencil drawing on my image is obviously not there. Any suggestions?

2.1. Also, these does not seem to work - call it from the main html page document.getElementById('miniPaint').contentWindow.Layers.select(id); window.Layers.select(id);

Giwayume commented 3 years ago

Need to convert the pencil layer to raster,

image

Then merge down.

image

viliusle commented 3 years ago

it works, I just tested.

var Layers = document.getElementById('myFrame').contentWindow.Layers;
Layers.select(1);

Take a look at examples: https://github.com/viliusle/miniPaint/tree/master/examples

I think the class which has select method is not getting exported

There is only 1 class, that handles layer functions, if toggle_visibility() works fine, select() must also work.

Also check console for errors. If you get 0, means you tried to load image and select some layer. After selecting layer, image was actually loaded and probably selected. It means you have to wait till image is loaded. This could be case when select() does not work and returns 0 errors. In this case you have 2 options:

  1. use setTimeout - this is bad way (zooom.html).
  2. use async + await - correct way (add-edit-imgData.html).
viliusle commented 3 years ago

p.s. creating multiple layers means non-destructive editing. Even you can see some disadvantages of this, there are lots of advantages.

In your case, you should group image and pencil layer, but sadly this feature is not supported yet.

josephsr commented 3 years ago

Thank you so much. For now, I will build plain interface with image editing, will keep following here and incorporate this if and when the feature gets added.