소스 검색

add undo and redo buttons

sawhney17 3 년 전
부모
커밋
071e01b6e0

+ 31 - 0
tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react'
+import { observer } from 'mobx-react-lite'
+import type { Shape } from '~lib'
+import { App, useApp } from '@tldraw/react'
+import { Minimap } from '~components/Minimap'
+import { RedoIcon, UndoIcon } from '~components/icons'
+
+export const ActionBar = observer(function ToolBar(): JSX.Element {
+  const app = useApp<Shape>()
+  const undo = React.useCallback(() => {
+    app.api.undo()
+  }, [app])
+
+  const redo = React.useCallback(() => {
+    app.api.redo()
+  }, [app])
+
+  return (
+    <div className="action-bar">
+      <button onClick={undo}>
+        <UndoIcon></UndoIcon>
+      </button>
+
+      <button onClick={redo}>
+        <RedoIcon></RedoIcon>
+      </button>
+    </div>
+  )
+})

+ 1 - 0
tldraw/apps/tldraw-logseq/src/components/ActionBar/index.ts

@@ -0,0 +1 @@
+export * from './ActionBar';

+ 3 - 1
tldraw/apps/tldraw-logseq/src/components/AppUI.tsx

@@ -5,17 +5,19 @@ import { StatusBar } from './StatusBar'
 import { PrimaryTools } from './PrimaryTools'
 import { DevTools } from './Devtools'
 import { Minimap } from './Minimap'
+import { ActionBar } from './ActionBar'
 
 const isDev = process.env.NODE_ENV === 'development'
 
 export const AppUI = observer(function AppUI() {
   return (
     <>
-      {/* <ToolBar /> */}
+    {/* <ToolBar /> */}
       <Minimap />
       {isDev && <StatusBar />}
       {isDev && <DevTools />}
       <PrimaryTools />
+      <ActionBar></ActionBar>
     </>
   )
 })

+ 12 - 0
tldraw/packages/core/src/lib/TLApi/TLApi.ts

@@ -161,4 +161,16 @@ export class TLApi<S extends TLShape = TLShape, K extends TLEventMap = TLEventMa
     this.app.save()
     return this
   }
+
+  undo = () => {
+    this.app.undo()
+    this.app.undo()
+    return this
+  }
+
+  redo = () => {
+    this.app.redo()
+    this.app.redo()
+    return this
+  }
 }