Merge 4fd470d into 3938b12

web_editor/index.html

@@ -28,6 +28,9 @@
         <button type="button" class="new-lane-card" id="new-bus">
           New <img src="assets/bus.svg" class="icon" />
         </button>
+        <button type="button" class="new-lane-card" id="new-sidewalk">
+          New <img src="assets/pedestrian.svg" class="icon" />
+        </button>
       </div>
     </div>
 

web_editor/js/cards.js

@@ -11,7 +11,8 @@ export function makeLaneCard(lane, idx, app) {
   }
   node.appendChild(wrapInCenterDiv(width(lane)));
 
-  var finalRow = document.createElement("div");
+  var editRow = document.createElement("div");
+  editRow.align = "center";
 
   var left = iconObj("left");
   if (idx != 0) {
@@ -23,15 +24,14 @@ export function makeLaneCard(lane, idx, app) {
   } else {
     left.disabled = true;
   }
-  finalRow.appendChild(left);
-  finalRow.align = "center";
+  editRow.appendChild(left);
 
   var trash = iconObj("delete");
   trash.onclick = () => {
     app.road.lanes.splice(idx, 1);
     app.render();
   };
-  finalRow.appendChild(trash);
+  editRow.appendChild(trash);
 
   var right = iconObj("right");
   if (idx != app.road.lanes.length - 1) {
@@ -43,9 +43,23 @@ export function makeLaneCard(lane, idx, app) {
   } else {
     right.disabled = true;
   }
-  finalRow.appendChild(right);
+  editRow.appendChild(right);
 
-  node.append(finalRow);
+  node.append(editRow);
+
+  if (idx != app.road.lanes.length - 1) {
+    var add = iconObj("add");
+    add.className = "insert-lane";
+    add.onclick = () => {
+      app.road.lanes.splice(idx + 1, 0, {
+        type: "travel",
+        direction: "backward",
+        designated: "motor_vehicle",
+      });
+      app.render();
+    };
+    node.append(add);
+  }
 
   return node;
 }
@@ -60,6 +74,9 @@ function typeIcon(lane) {
   if (lane.type == "travel" && lane.designated == "motor_vehicle") {
     return icon("car");
   }
+  if (lane.type == "travel" && lane.designated == "foot") {
+    return icon("pedestrian");
+  }
   if (lane.type == "parking" && lane.designated == "motor_vehicle") {
     return icon("parking");
   }
@@ -71,10 +88,20 @@ function typeIcon(lane) {
 
 function directionIcon(lane) {
   if (lane.direction == "forward") {
-    return icon("forwards");
+    var obj = iconObj("forwards");
+    obj.onclick = () => {
+      lane.direction = "backward";
+      app.render();
+    };
+    return obj;
   }
   if (lane.direction == "backward") {
-    return icon("backwards");
+    var obj = iconObj("backwards");
+    obj.onclick = () => {
+      lane.direction = "forward";
+      app.render();
+    };
+    return obj;
   }
   if (lane.direction == "both") {
     return icon("both_ways");

web_editor/js/main.js

@@ -127,5 +127,12 @@ export class LaneEditor {
       });
       this.render();
     };
+    document.getElementById("new-sidewalk").onclick = () => {
+      this.road.lanes.push({
+        type: "travel",
+        designated: "foot",
+      });
+      this.render();
+    };
   }
 }

web_editor/main.css

@@ -6,6 +6,8 @@
 .card {
   outline: solid;
   padding: 15px;
+  /* So child elements can use position=absolute */
+  position: relative;
 }
 
 .card button {
@@ -33,6 +35,13 @@
   width: 50px;
 }
 
+.insert-lane {
+  position: absolute;
+  right: -15px;
+  bottom: 0px;
+  z-index: 1;
+}
+
 table,
 td {
   border: 1px solid black;