Skip to content
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

Add hotkey for Visual Diffs #6843

Merged
merged 4 commits into from
Oct 7, 2019
Merged

Add hotkey for Visual Diffs #6843

merged 4 commits into from
Oct 7, 2019

Conversation

Bonkles
Copy link
Contributor

@Bonkles Bonkles commented Sep 11, 2019

This PR adds a new toggle hotkey (g) that highlights all unsaved edits on the screen.

Short video narrated by yours truly:
https://www.youtube.com/watch?v=Vo4q4D_Uo4o

It has support for lines, vertices, and areas, and when the 'G' key is pressed, green accent is drawn over/in the features in question. Generally tag edit highlights are lighter /lower opacity than geometry changes.

Light green denotes a tagging-only change, darker green indicates a geometry change.
Geometry changes supersede tagging changes, so if both are true for a particular entity, the geometry style will prevail.

image

highlight_edits_PR_1
highlight_edits_PR_2

I'm interested in feedback on the visual styles I employed to communicate the diff information as well as the color choice!

@bhousel
Copy link
Member

bhousel commented Sep 11, 2019

haha cool.. I love this, and can't wait to try it out 👍

# Conflicts:
#	modules/svg/areas.js
@quincylvania quincylvania merged commit f4f648b into openstreetmap:2.15 Oct 7, 2019
@quincylvania quincylvania added this to the 2.15.6 milestone Oct 7, 2019
@quincylvania quincylvania added new-feature A new feature for iD map-renderer An issue with how things are rendered in the map labels Oct 7, 2019
@quincylvania
Copy link
Collaborator

@Bonkles Thanks so much for this feature! It looks pretty good so I'm just merging as-is. I will tweak it somewhat but I just wanted to get it in there first 👍

quincylvania added a commit that referenced this pull request Oct 7, 2019
quincylvania added a commit that referenced this pull request Oct 7, 2019
…ing (re: #6843)

Differentiate added lines and vertices from merely changed ones
quincylvania added a commit that referenced this pull request Oct 8, 2019
Render tag-only diffs in yellow instead of translucent orange
Don't use target colors for vertex diff styling
quincylvania added a commit that referenced this pull request Oct 8, 2019
quincylvania added a commit that referenced this pull request Oct 8, 2019
@quincylvania
Copy link
Collaborator

So I iterated on the original design somewhat:

  • Include standalone points
  • Render the diff as a halo behind the features
  • Render line and area diffs the same way
  • Green for added, yellow for tag-only changes, orange for geometry changes

Screen Shot 2019-10-08 at 9 05 00 PM

I think the results are good enough for now but I'm open to feedback and ideas!

quincylvania added a commit that referenced this pull request Oct 10, 2019
Add Highlight Changes button to the Style Options section for toggling visual diffs (re: #6843)
@quincylvania
Copy link
Collaborator

I added a toggle button for this in the Map Data pane. This should make the feature more discoverable, escapable, and mobile-friendly.

Screen Shot 2019-10-10 at 12 39 05 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
map-renderer An issue with how things are rendered in the map new-feature A new feature for iD
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants