Add support for complex intersection and via way restrictions

css/20_map.css

@@ -26,6 +26,11 @@
     pointer-events: none;
 }
 
+.lasso #map {
+    pointer-events: visibleStroke;
+}
+
+
 /* `.target` objects are interactive */
 /* They can be picked up, clicked, hovered, or things can connect to them */
 .node.target {
@@ -242,7 +247,7 @@ text.point {
 }
 
 
-/* Turns */
+/* Turn Restrictions */
 
 g.turn rect,
 g.turn circle {
@@ -255,10 +260,34 @@ g.turn circle {
     pointer-events: none;
 }
 
-.lasso #map {
-    pointer-events: visibleStroke;
+/* Turn restriction paths and vertices */
+.surface.tr .way.target,
+.surface.tr path.shadow.selected,
+.surface.tr path.shadow.related {
+    stroke-width: 25px;
 }
 
+.surface.tr path.shadow.selected,
+.surface.tr path.shadow.related,
+.surface.tr g.vertex.selected .shadow,
+.surface.tr g.vertex.related .shadow {
+    stroke-opacity: 0.7;
+    stroke: #777;
+}
+.surface.tr path.shadow.related.allow,
+.surface.tr g.vertex.related.allow .shadow {
+    stroke: #5b3;
+}
+.surface.tr path.shadow.related.restrict,
+.surface.tr g.vertex.related.restrict .shadow {
+    stroke: #d53;
+}
+.surface.tr path.shadow.related.only,
+.surface.tr g.vertex.related.only .shadow {
+    stroke: #68f;
+}
+
+
 /* GPX Paths */
 
 .layer-gpx {

css/80_app.css

@@ -681,12 +681,14 @@ button.save.has-count .count::before {
     height: 100%;
 }
 
+.field-help-title button.close,
 .entity-editor-pane .header button.preset-close,
 .preset-list-pane .header button.preset-choose {
     position: absolute;
     right: 0;
     top: 0;
 }
+[dir='rtl'] .field-help-title button.close,
 [dir='rtl'] .entity-editor-pane .header button.preset-close,
 [dir='rtl'] .preset-list-pane .header button.preset-choose {
     left: 0;
@@ -1266,6 +1268,7 @@ a.hide-toggle {
     border-top: 0;
     border-radius: 0 0 4px 4px;
     overflow: hidden;
+    position: relative;
 }
 
 .form-field textarea {
@@ -1834,26 +1837,89 @@ input[type=number] {
 
 /* Restrictions editor */
 
-.form-field-restrictions .preset-input-wrap {
+.form-field-restrictions .restriction-controls-container {
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+    width: 100%;
+    padding: 5px;
+}
+
+.restriction-controls-container .restriction-controls {
+    display: table;
+}
+
+.restriction-controls .restriction-control {
+    display: table-row;
+    padding: 5px 10px;
+    height: 25px;
+}
+
+.restriction-control input,
+.restriction-control span {
+    display: table-cell;
+    text-align: start;
+    padding: 0px 5px;
+}
+
+.restriction-control span.restriction-control-label {
+    text-align: end;
+}
+
+.restriction-control input {
+    width: 60px;
+    padding: 0;
+    margin: 0px 5px;
+    vertical-align: middle;
+}
+
+.form-field-restrictions .restriction-container {
     position: relative;
-    height: 300px;
+    height: 370px;
+}
+/* zero width space, so container takes up space */
+.form-field-restrictions .restriction-container:after {
+    content: '\200b';
 }
 
 .form-field-restrictions svg.surface {
     width: 100%;
     height: 100%;
 }
 
-.form-field-restrictions .restriction-help {
+.restriction-container .restriction-help {
     z-index: 1;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     padding: 2px 6px;
     background-color: rgba(255, 255, 255, .8);
-    color: #999;
+    color: #888;
     text-align: center;
+    pointer-events: none;
+
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.restriction-help span {
+    margin: 2px;
+}
+
+.restriction-help .qualifier {
+    color: #666;
+    font-weight: bold;
+}
+.restriction-help .qualifier.allow {
+    color: #8b5;
+}
+.restriction-help .qualifier.restrict {
+    color: #d53;
+}
+.restriction-help .qualifier.only {
+    color: #78f;
 }
 
 /* Changeset editor while comment text is empty */
@@ -1925,7 +1991,7 @@ div.combobox {
 }
 
 .combobox-caret::after {
-    content:"";
+    content: "";
     height: 0; width: 0;
     position: absolute;
     left: 0; right: 0; bottom: 0; top: 0;
@@ -1935,6 +2001,107 @@ div.combobox {
     border-right: 5px solid transparent;
 }
 
+/* Field Help */
+
+.field-help-body {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 20px;
+    right: 20px;
+    margin: 5px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-top: 0;
+    border-radius: 0 0 4px 4px;
+    z-index: 20;
+    background: rgba(255,255,255,0.95);
+    box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+}
+
+.field-help-title h2 {
+    padding: 10px;
+    margin-bottom: 0px;
+    font-size: 17px;
+}
+.field-help-title button {
+    width: 45px;
+    height: 55px;
+    border-radius: 0;
+}
+
+.field-help-nav {
+    font-size: 13px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+.field-help-nav-item {
+    display: inline-block;
+    padding: 5px 10px;
+    cursor: pointer;
+    color: #666;
+}
+.field-help-nav-item.active {
+    color: #7092ff;
+}
+.field-help-nav-item:hover {
+    color: #597be7;
+    background-color: #efefef;
+}
+
+.field-help-content {
+    padding: 10px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.field-help-content h3 {
+    font-size: 12px;
+    margin-bottom: 5px;
+}
+.field-help-content p {
+    margin-bottom: 15px;
+}
+.field-help-content ul li {
+    list-style: inside;
+    margin-bottom: 5px;
+}
+
+.field-help-content .field-help-image {
+    width: 100%;
+    margin-bottom: 15px;
+}
+
+.field-help-content svg.turn {
+    width: 40px;
+    height: 20px;
+}
+.field-help-content svg.shadow {
+    opacity: 0.7;
+    width: 60px;
+    height: 20px;
+}
+.field-help-content svg.from {
+    color: #777;
+}
+.field-help-content svg.allow {
+    color: #5b3;
+}
+.field-help-content svg.restrict {
+    color: #d53;
+}
+.field-help-content svg.only {
+    color: #68f;
+}
+
+.field-help-content p.from_shadow,
+.field-help-content p.allow_shadow,
+.field-help-content p.restrict_shadow,
+.field-help-content p.allow_turn,
+.field-help-content p.restrict_turn {
+    margin-bottom: 5px;
+}
+
+
 /* Raw Tag Editor */
 
 .tag-list {
@@ -2625,7 +2792,7 @@ div.full-screen > button:hover {
 }
 
 .help-wrap .toc li a:hover,
-.help-wrap .nav a:hover  {
+.help-wrap .nav a:hover {
     background: #ececec;
 }
 

data/core.yaml

@@ -219,14 +219,41 @@ en:
       multiple_ways: There are too many lines here to split.
       connected_to_hidden: This can't be split because it is connected to a hidden feature.
     restriction:
-      help:
-        select: Click to select a road segment.
-        toggle: Click to toggle turn restrictions.
-        toggle_on: 'Click to add a "{restriction}" restriction.'
-        toggle_off: 'Click to remove the "{restriction}" restriction.'
       annotation:
         create: Added a turn restriction
         delete: Deleted a turn restriction
+  restriction:
+    controls:
+      distance: Distance
+      distance_up_to: "Up to {distance}"
+      via: Via
+      via_node_only: "Node only"
+      via_up_to_one: "Up to 1 way"
+      via_up_to_two: "Up to 2 ways"
+    help:
+      indirect: "(indirect)"
+      turn:
+        no_left_turn: "NO Left Turn {indirect}"
+        no_right_turn: "NO Right Turn {indirect}"
+        no_u_turn: "NO U-Turn {indirect}"
+        no_straight_on: "NO Straight On {indirect}"
+        only_left_turn: "ONLY Left Turn {indirect}"
+        only_right_turn: "ONLY Right Turn {indirect}"
+        only_u_turn: "ONLY U-Turn {indirect}"
+        only_straight_on: "ONLY Straight On {indirect}"
+        allowed_left_turn: "Left Turn Allowed {indirect}"
+        allowed_right_turn: "Right Turn Allowed {indirect}"
+        allowed_u_turn: "U-Turn Allowed {indirect}"
+        allowed_straight_on: "Straight On Allowed {indirect}"
+      from: FROM
+      via: VIA
+      to: TO
+      from_name: "{from} {fromName}"
+      from_name_to_name: "{from} {fromName} {to} {toName}"
+      via_names: "{via} {viaNames}"
+      select_from: "Click to select a {from} segment"
+      select_from_name: "Click to select {from} {fromName}"
+      toggle: "Click for \"{turn}\""
   undo:
     tooltip: "Undo: {action}"
     nothing: Nothing to undo.
@@ -715,6 +742,38 @@ en:
       using: "To use a GPS trace for mapping, drag and drop the data file onto the map editor. If it's recognized, it will be drawn on the map as a bright purple line. Click the {data} **Map data** panel on the side of the map to enable, disable, or zoom to your GPS data."
       tracing: "The GPS track isn't sent to OpenStreetMap - the best way to use it is to draw on the map, using it as a guide for the new features that you add."
       upload: "You can also [upload your GPS data to OpenStreetMap](https://www.openstreetmap.org/trace/create) for other users to use."
+    field:
+      restrictions:
+        title: Turn Restrictions Help
+        about:
+          title: About
+          about: "This field allows you to inspect and modify turn restrictions. It displays a model of the selected intersection including other nearby connected roads."
+          from_via_to: "A turn restriction always contains: one **FROM way**, one **TO way**, and either one **VIA node** or one or more **VIA ways**."
+          maxdist: "The \"{distField}\" slider controls how far to search for additional connected roads."
+          maxvia: "The \"{viaField}\" slider adjusts how many via ways may be included in the search. (Tip: simple is better)"
+        inspecting:
+          title: Inspecting
+          about: "Hover over any **FROM** segment to see whether it has any turn restrictions. Each possible **TO** destination will be drawn with a colored shadow showing whether a restriction exists."
+          from_shadow: "{fromShadow} **FROM segment**"
+          allow_shadow: "{allowShadow} **TO Allowed**"
+          restrict_shadow: "{restrictShadow} **TO Restricted**"
+          only_shadow: "{onlyShadow} **TO Only**"
+          restricted: "\"Restricted\" means that there is a turn restriction, for example \"No Left Turn\"."
+          only: "\"Only\" means that a vehicle taking that path may only make that choice, for example \"Only Straight On\"."
+        modifying:
+          title: Modifying
+          about: "To modify turn restrictions, first click on any starting **FROM** segment to select it. The selected segment will pulse, and all possible **TO** destinations will appear as turn symbols."
+          indicators: "Then, click on a turn symbol to toggle it between \"Allowed\", \"Restricted\", and \"Only\"."
+          allow_turn: "{allowTurn} **TO Allowed**"
+          restrict_turn: "{restrictTurn} **TO Restricted**"
+          only_turn: "{onlyTurn} **TO Only**"
+        tips:
+          title: Tips
+          simple: "**Prefer simple restrictions over complex ones.**"
+          simple_example: "For example, avoid creating a via-way restriction if a simpler via-node turn restriction will do."
+          indirect: "**Some restrictions display the text \"(indirect)\" and are drawn lighter.**"
+          indirect_example: "These restrictions exist because of another nearby restriction. For example, an \"Only Straight On\" restriction will indirectly create \"No Turn\" restrictions for all other paths through the intersection."
+          indirect_noedit: "You may not edit indirect restrictions. Instead, edit the nearby direct restriction."
   intro:
     done: done
     ok: OK