auto-select an image on opening a map (so people can see they are editable and a toolbar is open)

[steviepubliclab]

I noticed that there was a function to edit the pictures when you click on them, but I was missing an overall toolbar. Not all the edit functions show up on the pictures when you click them, and I found it confusing to tell people about all the editing features when there aren't buttons for each one.

[jywarren]

Hi, Stevie - which features are not represented in the per-image toolbar? @manleyjster and I discussed dropping the overall toolbar quite a bit, and felt that the per-image toolbar made it more clear which image was being manipulated. If the per-image toolbar were more complete (per earlier question) would you still be interested in an overall toolbar?

Second, would any additional feature you need fit in the per-image toolbars or in the images tab of the sidebar?

[steviepubliclab]

Ok I understand getting rid of it so you could see which image you're
working on, but I do really like the idea of a solid toolbar because first
time visitors can see all the functions the program has. They seem a little
hidden right now.

If it stays this way, it might be easier if you could see both the rotate
and the distort button in the toolbar on the image. Instead of it switching
back and fourth. Also, the when it's on the distort feature, the hover text
still says rotate.

[jywarren]

Great, breaking this up into multiple issues;

• adding "when it's on the distort feature, the hover text
  still says rotate" to change rotate/distort icons in Toolbar when using hotkeys Leaflet.DistortableImage#27
• adding "If it stays this way, it might be easier if you could see both the rotate
  and the distort button in the toolbar on the image" to show both rotate and distort buttons, and disable/grey out the one currently active Leaflet.DistortableImage#44

Changing the title to the problem statement "image functions aren't visible to (new) users on initial page load" rather than a proposed solution of bringing back the overall toolbar (for now, so we can discuss what the best solution is)

[jywarren]

Another option might be that we autoselect some image by default on initial page load, so that the per-image menu is shown. This might be the simplest; @steviepubliclab, what do you think about that?

[justinmanley]

I've never liked this behavior (autoselecting an image on pageload).

My vote would be to show a popup message on the map saying "To edit, click
on a picture". As soon as you click on a image, the popup message is
replaced by the editing toolbar for that image. When you leave editing mode
(i.e. no image is selected), the popup reminder comes back.

[jywarren]

Would this become annoying to new users, and could we somehow only display
it if a user has never manipulated an image before, or perhaps if they
aren't logged in? (or in the latter case, we could set a cookie so it still
doesn't show over and over?)

[justinmanley]

It sounds like the best option right now is to select an image by default
when the page loads. That will probably be simplest and easiest to
implement.

We can always revisit this later if need be.

[jywarren]

We could also have the "autoselect" function only run for users who are not logged in, and/or have never moved an image -- both are simple queries. I'll wait for input from @steviepubliclab as to whether this seems like a reasonable solution.

[sashadev-sky]

@jywarren is it okay to bump a new version of LDI because of the switch to material design? publiclab/Leaflet.DistortableImage#255 (in LDI and here) and then close this one now? we've implemented selected, mode, fixed hovertext, etc. to address it (see list of issues in the epic) and have separate issues for unaddressed things like #620

[jywarren]

Do we need to add a default selected state within the MapKnitter codebase now?

[sashadev-sky]

Yes!

[jywarren]

OK, we'll have to update these two spots, i think?

mapknitter/app/assets/javascripts/mapknitter/Map.js

Lines 165 to 169 in ea898cc

	var img = new L.DistortableImageOverlay(
	url,
	{
	keymapper: false
	}

mapknitter/app/assets/javascripts/mapknitter/Map.js

Lines 102 to 107 in ea898cc

	var img = new L.DistortableImageOverlay(
	warpable.srcmedium,
	{
	keymapper: false,
	corners: corners,
	mode: 'lock'

But we'll want to make only the most recent image actually have this enabled. So we may need to choose one of these (one i think is for newly added images, one for existing images), and make this set only on the final item in the array.

Secondly, i suppose new images added should be selected as well. The code is reasonably annotated so it may take some testing but should otherwise be OK! @divyabaid16 did you have any interest in trying this one out?

[jywarren]

And we'll have to bump the Leaflet.DistortableImage version.

[sashadev-sky]

@jywarren bumping now! I'll draft a new release too. Ill ping you here when it's done

[sashadev-sky]

https://github.com/publiclab/Leaflet.DistortableImage/releases Ok feel free to release if you think its ready and let me know when you do!

[divyabaid16]

OK, we'll have to update these two spots, i think?

mapknitter/app/assets/javascripts/mapknitter/Map.js

Lines 165 to 169 in ea898cc

	var img = new L.DistortableImageOverlay(
	url,
	{
	keymapper: false
	}

mapknitter/app/assets/javascripts/mapknitter/Map.js

Lines 102 to 107 in ea898cc

	var img = new L.DistortableImageOverlay(
	warpable.srcmedium,
	{
	keymapper: false,
	corners: corners,
	mode: 'lock'

But we'll want to make only the most recent image actually have this enabled. So we may need to choose one of these (one i think is for newly added images, one for existing images), and make this set only on the final item in the array.

Secondly, i suppose new images added should be selected as well. The code is reasonably annotated so it may take some testing but should otherwise be OK! @divyabaid16 did you have any interest in trying this one out?

Ya, I will give a try here :)

[jywarren]

Hi @divyabaid16 did you have any chance to try this out? Thank you!

[divyabaid16]

Hi @jywarren while solving for this I came across an issue and I have mentioned it in #780.
I guess first that issue must be solved.