Users overlooking that other editing modes exist (besides the default)

[sashadev-sky]

Roughly we are looking for a plan (anyone can add ideas) to resolve the question of how to make LDI editing features more intuitive to a user.

Initially prompted by #183, where it was pointed out that the default distort handles:

• make programmers overlook that other editing modes even exist - not solved

• are inconvenient for programmers finding themselves using mostly a different mode. - solved

  • by introducing (see PR here) a new optional option, mode into our API. It allows a user to specify their preferred initial editing tool during L.distortableImageOverlay initialization
    • There have been a few request for rotate specifically, but the user can any of our available editing modes, the world is their oyster.
    • If a mode option is not set at all, initial editing mode defaults to "distort"
    • Check out the Mode section in our README for someone additional information on using this option and a code block example.

================================

Comprehensive Plan so far (feel free to add on anything here, @jywarren, @ebarry @annhchen, @rexagod, @everyonelse)

Goal: - programmers overlook that other editing modes exist. Lets brainstorm the best way(s) to fix this.

So Far:

1. Achievable soley through a well compartmentalized and thought out toolbar?

   • create a UI that shows the user off the bat, all the different types of things the user can do. This means compartmentalized categories of tools. Separating "styling" editing actions, such as opacity and brightness into a separate section from Transform related actions (rotate, scale, distort).

2. Add a select.html where each image will be initialized with a different default tool so that the user can demo all of them

[sashadev-sky]

@jywarren This is an example of what I mean, how the toolbar will make it obvious what available immediately:

We could a section that looks like this (except it would really contain Rotate, Scale, RotateScale, Distort)

I would also try implementing a color scheme that goes with the corresponding actions handle colors (rotate - red, distort - blue) so that it's really hard to get confused

And maybe matching the vibe / layout going on here:

[sashadev-sky]

@jywarren commented on Jul 6, 2015

Another solution, although a bit crude, could be using a separate rotation handle, as is done in some drawing tools:

[sashadev-sky]

Still happening 2 days ago: publiclab/Leaflet.DistortableImage#298

[sashadev-sky]

closing via publiclab/Leaflet.DistortableImage#393!