Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improvement: Better selections and more selection options #129

Closed
5 of 6 tasks
Tracked by #365
Erevoid opened this issue Jan 15, 2020 · 12 comments
Closed
5 of 6 tasks
Tracked by #365

Improvement: Better selections and more selection options #129

Erevoid opened this issue Jan 15, 2020 · 12 comments
Labels
change Proposes changes on how something works discussion This needs more ideas, feedback, discussion in general. enhancement New feature or request

Comments

@Erevoid
Copy link
Member

Erevoid commented Jan 15, 2020

As of right now, the program lacks a variety of selection tools, such as selection by color, select similar area (smart selection), freehand selection, ellipse selection, lasso etc.

But even for the rectangular selection, issues are visible. For example you cannot add another rectangle or remove an area within your already selected area. Other programs let you use rectangle selection, then press shift and add another rectangle to your selection. Or press control and remove a rectangle from your selection. Something similar should be implemented and be used for future selection tools too, maybe with different keys (instead of shift and control).

Furthermore, it would be nice to have some tool options for the selection. For example a clear "copy" and "cut" or "move selection" and "move content" button that you can press instead of using the shortcuts. Another useful addition would be a "copy visible" button, which practically copies not only the current layer's selection but every other visible pixel from the rest of the layers, above or under the selected one.

Lastly, a personal preference, I would like the outline of the selection to be animated, moving lines to indicate that something is going on within that area with the fancy outline.

A selection sub-menu on the top bar could also be added with more general selection options. The copy, cut, copy visible etc could be placed there, as well as invert selection, expand selection, clear selection, select all etc

Overloaded Edit: Adding a list of selection tools that would be nice to be added, because I like lists.

  • By color selection tool
  • Magic wand selection tool
  • Elliptical selection tool
  • Lasso selection tool
  • Polygon selection tool
  • Paint brush selection tool
@OverloadedOrama OverloadedOrama added enhancement New feature or request discussion This needs more ideas, feedback, discussion in general. labels Jan 15, 2020
@Lilith-In-Starlight
Copy link

I have honestly no idea why would this be put in "up for discussion", this is completely straightforward and, imo, necessary.

@OverloadedOrama
Copy link
Member

OverloadedOrama commented Feb 13, 2020

It's up for discussion because some people might disagree with the suggestions and offer other ones, or they might have more to say, or someone might want to ask questions for clarity, etc etc. This suggestion is not a high priority (won't be worked on in v0.7 and maybe not even v0.8) so we have time to further discuss these ideas.

@OverloadedOrama OverloadedOrama added the change Proposes changes on how something works label Apr 16, 2020
@IagoAndrade
Copy link

Another good option would be to be able to move selection in multiple cells at the same time (both multiple frames, and multiple layers). Option to rotate only selected pixels would be handy too.

@OverloadedOrama OverloadedOrama added this to To do in Pixelorama v0.9.x via automation Apr 24, 2020
OverloadedOrama added a commit that referenced this issue Jul 20, 2020
…xels

This will allow us to create more selection tools in the future, that aren't necessarily rectangular (See #129) and even enhance the current rectangle selection tool (See #56)

Current issues spotted so far:
Drawing is slower for large images, and bucket filling is also considerably slower even on a 64x64 image. Optimizations are required.
@BentotSquared
Copy link

Hello I have additionals as well, beware its long :)

the selection tool in Pixelorama today is just a simple tool in the software. You can just select what you want in your canvas and hold shift and drag the selected part anywhere you want and that is it that is all you can do with it which is okay its fine, but I think to make the selection tool the most powerful tool in Pixelorama will surely help all of us and make the software easier to use and to navigate. here are my suggestions to improve and to make the selection tool powerful in Pixelorama.

Suggestions to make the selection tool great:

  1. Make the rotate and the flip option also be in the selection tool's option

    • As the selection tool today is just for moving only, adding the rotate and flip option as an option in the the selection tool's selected area will make it better. The rotate option in Image tab will rotate the whole canvas including everything in it for example your sprite is not in the middle but on lower part of the canvas. If you choose the rotate option in the image tab, the whole canvas will rotate so next second your sprite will be upside down hanging in the ceiling of the canvas but if you selected a particular area, a rotate option will be also available and will still acts like the normal rotate option but it will only rotate everything that is only inside the selected area so if you selected your sprite and use the rotate option in the selection tool the sprite will rotate but will still be in the same position in your canvas. The same thing applies to the flip option in the selection tool.
  2. Make a resize option be in the selection tool's option

    • I will use the MS Word and Godot as examples for this. If you click or select a picture it will show small circles around every corner that you can drag to resize a picture on the particular side of the picture. Also in Godot if you select the sprite node in your scene it will show shapes on its top right corner on the middle top and middle right that you can drag and resize the sprite on its x axis, y axis or both. I've seen many pixel art software that have this option and I think I will be really helpful to use, will have more freedom to resize and will be faster to execute rather than clicking a tab then click on the scale image and resize.
  3. Can copy and paste the selected Area

    • Add an option to copy and paste a selected area and also when its pasted, the selection will be switched into the pasted copy of the selection.
  4. I think it will be better if the "to drag the selection press shift and drag" can be replaced by a normal selection.

    • Rather than "select an area and hold shift to drag it", replace it by "select an area and then drag it (without holding shift) in the middle part of the selection" just like how to move the selection box in Pixelorama but with the selected area also. You will just gonna click an option on the option list of the selection tool. Wait a minute, Option list? This brings us to how it will be implemented on the GUI of the editor.

Ok so we have the options to the selection tool instead of just moving the selection, now how can we activate those options?
Here are the choices on how the options can be selected visually:

  1. A new tab will open, lining in with Pixelorama's Menu bar

    • If you select a shape in MS Word it will display a highlighted tab in the menu bar which is titled "format" which you can click and will give you options that you can toggle that will only affect the selected shape. That concept can be an option on how to toggle the selection's options which can display a rotate, flip and resize option either text or icon form.
  2. A Dialog Box will appear

    • A dialog box will appear containing the options rotate, resize and flip that you can drag on the editor or will have a fixed position on the sides.

Thank you for reading this suggestions of mine on how to make the selection tool in Pixelorama powerful and I hope maybe someday it will be implemented so that it can help everybody. Thank you again.

@BentotSquared
Copy link

BentotSquared commented Oct 18, 2020

Hello I wanna add something about the appearance of the rectangle selection case I think this might be implemented someday:
1 As what Erevoid said, I think its better to replace the current selection border with the animated moving lines
Comparison:
Current - just a normal indicator, the border is almost as thick as a pixel.
The Fancy - More eye catchy means also a better indicator of something you select, much more thinner than the current
one.
2 Fill the inside of the selection border with a translucent color of the border
It will indicate the specific pixels you've selected much much better

Also about the copy and pasting:
When I select a thing and copy it, you need to create another selection on your canvas to paste it which for me is slow so maybe a sugguestion for that is when you've copied something you dont need to create another selection to paste it, just ctrl + V and the one you've copied will be pasted on a particular position and is automatically selected so you can just move it around and stuffs.

I know that you devs are in a lot of work to make Pixelorama great so I really appreciate your dedications and love for this software. Thank you Orama!

@novhack novhack mentioned this issue Oct 23, 2020
25 tasks
@mystchonky
Copy link
Contributor

Adding #38 here

@OverloadedOrama
Copy link
Member

OverloadedOrama commented Jan 8, 2021

So, me and @Erevoid discussed about Pixelorama's new potential selection system, saw yours and @novhack's ideas from #56 and we prepared a proposal of ideas. Feel free to share your opinions on it!

Creating a selection:

Order of key press and mouse press matters. Shift + Mouse Click and Mouse Click + Shift have different effects.

  • Mouse click & movement - starts creating selection. When the mouse button is released, selection gets created. (same behavior)
  • Click outside of the selection removes it. (same behavior)
  • Shift + Mouse click = add to selection.
  • Ctrl + Mouse click = subtract from selection.
  • Shift + Ctrl + Mouse click = create selection intersection.

These work only with the rectangle and ellipse selection tools.

  • Mouse click + Shift = Create a 1:1 (square) selection.
  • Mouse click + Ctrl= Create a selection that expands from center.
  • Mouse click + Alt = Displaces the origin of the selection.

Transformations

Again, order of key press and mouse press matters.

Movement

  • A new Move tool (Move Tool #313) that, when there's no selection, moves the entire contents of the cel. If there's selection(s), moves the selection AND its contents.
  • Mouse movement = Moves selection with content.
  • Alt + mouse movement = Moves selection without content. In the future, this may change so that the user will be able to move just the selection itself when the mouse cursor is exactly on the selection borders.
  • Mouse movement + Shift = Moves & snaps selection to axis.
  • Mouse movement + Ctrl = Moves & snaps selection to grid.
  • Mouse movement + Alt has no extra effect. (This could change)
  • Control + Alt + mouse movement = Copies selection and moves it WITHOUT cutting it from the original position. This is basically a quick way to copy and move stuff around without Ctrl-C and Ctrl-V.
  • Move selection with contents with the arrow keys. Pressing an arrow key once moves the selection by one pixel in the direction of the arrow.
  • Ctrl + arrow keys = Moves selection by grid tiles.
  • Alt + arrow keys = Moves the selection itself without the contents.
  • Content moved outside the canvas should not be lost. (Moving outside canvas with rectangle selection crops the image. #38)

Scaling

  • The selection has 8 resize gizmos, 4 at each angle and 4 at each side, to allow easy resizing.
  • Mouse click + Shift = keeps original aspect ratio of the selection.
  • Mouse click + Ctrl = expands from center.
  • Alt + Mouse click = only affects the selection and not the content.

Rotating

  • Unsure of how rotation gizmos will be yet. It could allow rotation when the cursor is slightly away the resize gizmos, like Aseprite does it.
  • Mouse click + Shift = snaps the angle.
  • Alt + Mouse click = only rotates the selection and not the content.

Skewing

  • Like rotation, I'm still unsure of how the gizmos will be.
  • Pixel art skewing algorithms? Are they similar to rotation algorithms or do we need new ones?
  • Mouse click + Shift = snaps the angle.
  • Alt + Mouse click = only rotates the selection and not the content.

Selection system miscellaneous

  • Selection outline should be animated.
  • Ctrl-C keeps the copied selection even after de-selection. Pasting always re-creates the copied selection on it's original position.
  • Symmetry should affect selections as well.
  • Let the user change border color and toggle the marching ants effect in the preferences.
  • Selections should work with tile mode.
  • Double click selects a cell of the grid.

Selection tool options:

  • Position
  • Size
  • Fixed Aspect ratio/width/height
  • Expand from center

Menu additions:

More options in the Edit menu.

  • Copy (when no selection, copies the entire cel). Ctrl-C as its shortcut.
  • Copy visible (copies entire frame, respects selection, ignores invisible layers, respects cel opacity). Shift-Ctrl-C as its shortcut.
  • Cut & paste, already implemented. Ctrl-X and Ctrl-V respectively as their shortcuts.
  • New brush. Creates a brush from the current selection, instead of creating it when copying. Ctrl-B

Selection menu:

  • Select all (Ctrl-A)
  • Clear selection (Ctrl-D)
  • Invert selection (Ctrl-I)
  • Expand/shrink selection
  • Select opaque (selects non-transparent pixels of the entire cel)
  • Select visible (selects non-transparent pixels of the entire frame)

Keep in mind that this is still a proposal and some of these stuff may not be implemented in v0.9, or at all, or the final implementation may differ from these ideas. Feel free to discuss!

@mystchonky
Copy link
Contributor

Regarding rotating the selection, the way Inkscape handles it is very intuitive. You tap on the selection to toggle between move/rotate modes.
inkscape

@novhack
Copy link
Contributor

novhack commented Jan 9, 2021

Regarding rotating the selection, the way Inkscape handles it is very intuitive. You tap on the selection to toggle between move/rotate modes.

If there was also a shortcut to swap between rotation and resize mode I think this system would be pretty good.

@novhack
Copy link
Contributor

novhack commented Jan 11, 2021

In a discussion on Discord with wh33t he asked about disconnected selection. I don't think it has to be supported right away with these changes but it would for sure be a very nice future improvement. Maybe it could act internally as multiple selections encapsulated in a single resize/rotate gizmo.

@mystchonky
Copy link
Contributor

Adding #449

@OverloadedOrama OverloadedOrama moved this from To do to In progress in Pixelorama v0.9.x Apr 28, 2021
@OverloadedOrama
Copy link
Member

OverloadedOrama commented May 3, 2021

I updated the proposal to make it more complete and detailed. #129 (comment)

It may not be final and things could still change. Also, not everything might make it in v0.9. Some features may be implemented in future versions. Every feature that has already been ticked means that it's already been implemented on the latest master branch.

OverloadedOrama added a commit that referenced this issue Jun 23, 2021
…lt has been pressed beforehand

This is about Alt + mouse click when moving a selection. See #129 (comment) for more info
@Orama-Interactive Orama-Interactive locked and limited conversation to collaborators Nov 17, 2021
Pixelorama v0.9.x automation moved this from In progress to Done Nov 17, 2021
@OverloadedOrama OverloadedOrama removed this from Done in Pixelorama v0.9.x Dec 5, 2021

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
change Proposes changes on how something works discussion This needs more ideas, feedback, discussion in general. enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

7 participants