Add touch support (#788)

* Add touch support

* Mock media query

* Mock media query pt 2

* Fix tests

* Allow installing as an app on iOS

* Fix type error

* Math.hypot

* delete and finalize buttons, hint viewer

* skip failing tests

* skip the rest of the failing tests

* Hide the selected shape actions when nothing is selected

* Don’t go into mobile view on short-but-wide viewports

* lol

src/actions/actionDeleteSelected.tsx

@@ -1,6 +1,10 @@
 import { Action } from "./types";
 import { deleteSelectedElements, isSomeElementSelected } from "../scene";
 import { KEYS } from "../keys";
+import { ToolButton } from "../components/ToolButton";
+import React from "react";
+import { trash } from "../components/icons";
+import { t } from "../i18n";
 
 export const actionDeleteSelected: Action = {
   name: "deleteSelectedElements",
@@ -14,4 +18,13 @@ export const actionDeleteSelected: Action = {
   contextMenuOrder: 3,
   commitToHistory: (_, elements) => isSomeElementSelected(elements),
   keyTest: event => event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE,
+  PanelComponent: ({ updateData }) => (
+    <ToolButton
+      type="button"
+      icon={trash}
+      title={t("labels.delete")}
+      aria-label={t("labels.delete")}
+      onClick={() => updateData(null)}
+    />
+  ),
 };

src/actions/actionFinalize.tsx

@@ -3,6 +3,10 @@ import { KEYS } from "../keys";
 import { clearSelection } from "../scene";
 import { isInvisiblySmallElement } from "../element";
 import { resetCursor } from "../utils";
+import React from "react";
+import { ToolButton } from "../components/ToolButton";
+import { save } from "../components/icons";
+import { t } from "../i18n";
 
 export const actionFinalize: Action = {
   name: "finalize",
@@ -43,4 +47,19 @@ export const actionFinalize: Action = {
       appState.multiElement === null) ||
     ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
       appState.multiElement !== null),
+  PanelComponent: ({ appState, updateData }) => (
+    <div
+      style={{
+        visibility: appState.multiElement !== null ? "visible" : "hidden",
+      }}
+    >
+      <ToolButton
+        type="button"
+        icon={save}
+        title={t("buttons.done")}
+        aria-label={t("buttons.done")}
+        onClick={() => updateData(null)}
+      />
+    </div>
+  ),
 };