diff --git a/web_editor/assets/add.svg b/web_editor/assets/add.svg new file mode 100644 index 0000000..7a4b6b8 --- /dev/null +++ b/web_editor/assets/add.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web_editor/js/cards.js b/web_editor/js/cards.js index 8eed57d..f416aad 100644 --- a/web_editor/js/cards.js +++ b/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; } diff --git a/web_editor/main.css b/web_editor/main.css index 53a3ad5..c649773 100644 --- a/web_editor/main.css +++ b/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,12 @@ width: 50px; } +.insert-lane { + position: absolute; + right: 0px; + bottom: 0px; +} + table, td { border: 1px solid black;