From ac638c283431863a5ca6c3d7b0b1879a13b41a22 Mon Sep 17 00:00:00 2001 From: RyoJerryYu Date: Tue, 16 Apr 2024 17:32:03 +0800 Subject: [PATCH] feat: add reset button for excalidraw --- package.json | 5 +++-- .../ExcalidrawScene/ExcalidrawSceneImpl.tsx | 18 ++++++++++++++++-- src/layouts/DefaultLayout.module.scss | 4 ++-- yarn.lock | 11 +++++++++-- 4 files changed, 30 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 1a7436ce..7dfa4f6d 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,9 @@ "@excalidraw/mermaid-to-excalidraw": "^0.3.0", "@mdx-js/mdx": "^2.3.0", "@mdx-js/react": "^2.3.0", - "@mui/base": "^5.0.0-alpha.119", - "@mui/material": "^5.11.10", + "@mui/base": "5.0.0-beta.40", + "@mui/icons-material": "^5.15.15", + "@mui/material": "5.15.15", "@types/mdast": "4.0.3", "@types/node": "18.14.2", "@types/react": "^18.2.79", diff --git a/src/components/ExcalidrawScene/ExcalidrawSceneImpl.tsx b/src/components/ExcalidrawScene/ExcalidrawSceneImpl.tsx index c1197eca..30a6e200 100644 --- a/src/components/ExcalidrawScene/ExcalidrawSceneImpl.tsx +++ b/src/components/ExcalidrawScene/ExcalidrawSceneImpl.tsx @@ -1,7 +1,8 @@ "use client"; -import { Excalidraw } from "@excalidraw/excalidraw"; +import { Excalidraw, MainMenu } from "@excalidraw/excalidraw"; import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types"; import { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types/types"; +import { Refresh } from "@mui/icons-material"; import { useRef } from "react"; export type ExcalidrawSceneProps = { @@ -40,7 +41,20 @@ export function ExcalidrawSceneImpl({ elements }: ExcalidrawSceneProps) { api.scrollToContent(undefined, { fitToContent: true }); }, 1000); }} - > + > + + } + onSelect={() => { + excalidrawAPIRef.current?.scrollToContent(undefined, { + fitToContent: true, + }); + }} + > + Reset + + + ); diff --git a/src/layouts/DefaultLayout.module.scss b/src/layouts/DefaultLayout.module.scss index 15e953f1..a66a6bb6 100644 --- a/src/layouts/DefaultLayout.module.scss +++ b/src/layouts/DefaultLayout.module.scss @@ -22,7 +22,7 @@ $footer-height: 4rem; } .header { - @apply top-0 fixed w-full z-10 flex; + @apply top-0 fixed w-full z-50 flex; @apply bg-gray-900 bg-opacity-50; @apply transition ease-in-out hover:bg-opacity-75; @@ -55,7 +55,7 @@ $footer-height: 4rem; } .footer { - @apply bottom-0 w-full z-10 bg-gray-900; + @apply bottom-0 w-full z-50 bg-gray-900; @apply transition ease-in-out bg-opacity-90; @apply text-slate-100 text-sm font-sans font-normal; diff --git a/yarn.lock b/yarn.lock index 74dd7ae3..496e5a2d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -810,7 +810,7 @@ "@types/mdx" "^2.0.0" "@types/react" ">=16" -"@mui/base@5.0.0-beta.40", "@mui/base@^5.0.0-alpha.119": +"@mui/base@5.0.0-beta.40": version "5.0.0-beta.40" resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2" integrity sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ== @@ -828,7 +828,14 @@ resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz#2bc2bda50db66c12f10aefec907c48c8f669ef59" integrity sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg== -"@mui/material@^5.11.10": +"@mui/icons-material@^5.15.15": + version "5.15.15" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.15.tgz#84ce08225a531d9f5dc5132009d91164b456a0ae" + integrity sha512-kkeU/pe+hABcYDH6Uqy8RmIsr2S/y5bP2rp+Gat4CcRjCcVne6KudS1NrZQhUCRysrTDCAhcbcf9gt+/+pGO2g== + dependencies: + "@babel/runtime" "^7.23.9" + +"@mui/material@5.15.15": version "5.15.15" resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.15.tgz#e3ba35f50b510aa677cec3261abddc2db7b20b59" integrity sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==