feat: add reset zoom button (#777)

* feat: add reset zoom button

Add zoom reset button.
Button is shown only when zoom scale is different from 1

* change reset zoom icon

* always show zoom reset

* fix typo

src/actions/actionCanvas.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Action } from "./types";
 import { ColorPicker } from "../components/ColorPicker";
 import { getDefaultAppState } from "../appState";
-import { trash, zoomIn, zoomOut } from "../components/icons";
+import { trash, zoomIn, zoomOut, resetZoom } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { getNormalizedZoom } from "../scene";
@@ -131,6 +131,17 @@ export const actionResetZoom: Action = {
       },
     };
   },
+  PanelComponent: ({ updateData }) => (
+    <ToolButton
+      type="button"
+      icon={resetZoom}
+      title={t("buttons.resetZoom")}
+      aria-label={t("buttons.resetZoom")}
+      onClick={() => {
+        updateData(null);
+      }}
+    />
+  ),
   keyTest: event =>
     (event.code === KEY_CODES.ZERO || event.code === KEY_CODES.NUM_ZERO) &&
     (event[KEYS.META] || event.shiftKey),

src/components/icons.tsx

@@ -79,3 +79,16 @@ export const undo = createIcon(
 export const redo = createIcon(
   "M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z",
 );
+
+// Icon imported form Storybook
+// Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
+export const resetZoom = (
+  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 1024 1024">
+    <path
+      stroke="currentColor"
+      strokeWidth="40"
+      fill="currentColor"
+      d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
+    />
+  </svg>
+);

src/index.tsx

@@ -379,8 +379,9 @@ const LayerUI = React.memo(
       return (
         <Stack.Col gap={1}>
           <Stack.Row gap={1} align="center">
-            {actionManager.renderAction("zoomIn")}
+            {actionManager.renderAction(actionZoomIn.name)}
-            {actionManager.renderAction("zoomOut")}
+            {actionManager.renderAction(actionZoomOut.name)}
+            {actionManager.renderAction(actionResetZoom.name)}
             <div style={{ marginLeft: 4 }}>
               {(appState.zoom * 100).toFixed(0)}%
             </div>

src/locales/en.json

@@ -57,6 +57,7 @@
     "scrollBackToContent": "Scroll back to content",
     "zoomIn": "Zoom in",
     "zoomOut": "Zoom out",
+    "resetZoom": "Reset zoom",
     "menu": "Menu",
     "done": "Done",
     "edit": "Edit"