From 97d4bad7f4148bb50c8a058f08943ff0bfd9a483 Mon Sep 17 00:00:00 2001
From: Haydn Ewers <27211+haydn@users.noreply.github.com>
Date: Fri, 24 Apr 2020 19:09:13 +1000
Subject: [PATCH] Add info panel

Fixes #105
---
 src/Editor.js               | 15 +++++++++++++++
 src/components/InfoPanel.js | 38 +++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 src/components/InfoPanel.js

diff --git a/src/Editor.js b/src/Editor.js
index 3e443be..f2a4e3c 100644
--- a/src/Editor.js
+++ b/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 ? (
diff --git a/src/components/InfoPanel.js b/src/components/InfoPanel.js
new file mode 100644
index 0000000..8da94cd
--- /dev/null
+++ b/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;