Add info panel

Fixes #105

src/Editor.js

@@ -3,6 +3,8 @@ import { set, or, not, and } from "set-fns";
 import useStateSnapshots from "use-state-snapshots";
 import { Draggable, Droppable, DragDropContext } from "react-beautiful-dnd";
 
+import InfoPanel from "./components/InfoPanel";
+
 import useCanvasConnection from "./editor/useCanvasConnection";
 import exampleDoc from "./editor/exampleDoc";
 import useKeys from "./useKeys";
@@ -937,6 +939,19 @@ const Editor = ({ config }) => {
             />
           ) : null}
         </svg>
+        <div
+          style={{
+            pointerEvents: "none",
+            userSelect: "none",
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            background: "#eee9"
+          }}
+        >
+          <InfoPanel mouse={mouse} viewport={viewport} keys={keys} />
+        </div>
       </div>
       <div style={{ background: "#eee" }}>
         {selection.size === 0 ? (

src/components/InfoPanel.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+const InfoPanel = ({ mouse, viewport, keys }) => (
+  <dl className="InfoPanel">
+    <style jsx>{`
+      .InfoPanel {
+        font-family: monospace;
+        padding: 0 0.8em;
+      }
+      * + dt {
+        margin-left: 0.8em;
+      }
+      * + dd {
+        margin-left: 0.4em;
+      }
+      dt,
+      dd {
+        display: inline;
+      }
+      dt {
+        font-weight: bold;
+        text-transform: uppercase;
+      }
+    `}</style>
+    <dt>mouse</dt>
+    <dd>{(mouse.x + "," + mouse.y).padEnd(10, " ")}</dd>
+    <dt>zoom</dt>
+    <dd>{(Math.round(viewport.scale * 100) + "%").padEnd(10, " ")}</dd>
+    <dt>viewport</dt>
+    <dd>{(viewport.x + "," + viewport.y).padEnd(10, " ")}</dd>
+    <dt>mode</dt>
+    <dd>{mouse.status.padEnd(10, " ")}</dd>
+    <dt>keys</dt>
+    <dd>{keys.size === 0 ? "-" : [...keys].join(", ")}</dd>
+  </dl>
+);
+
+export default InfoPanel;