mirror of https://github.com/logseq/logseq
add undo and redo buttons
parent
5a264fad24
commit
071e01b6e0
|
@ -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>
|
||||
)
|
||||
})
|
|
@ -0,0 +1 @@
|
|||
export * from './ActionBar';
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue