diff --git a/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx b/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx new file mode 100644 index 0000000000..348cca2dcf --- /dev/null +++ b/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() + const undo = React.useCallback(() => { + app.api.undo() + }, [app]) + + const redo = React.useCallback(() => { + app.api.redo() + }, [app]) + + return ( +
+ + + +
+ ) +}) diff --git a/tldraw/apps/tldraw-logseq/src/components/ActionBar/index.ts b/tldraw/apps/tldraw-logseq/src/components/ActionBar/index.ts new file mode 100644 index 0000000000..4bf6759633 --- /dev/null +++ b/tldraw/apps/tldraw-logseq/src/components/ActionBar/index.ts @@ -0,0 +1 @@ +export * from './ActionBar'; \ No newline at end of file diff --git a/tldraw/apps/tldraw-logseq/src/components/AppUI.tsx b/tldraw/apps/tldraw-logseq/src/components/AppUI.tsx index 29fd19bf1d..a2e15e8008 100644 --- a/tldraw/apps/tldraw-logseq/src/components/AppUI.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/AppUI.tsx @@ -5,6 +5,7 @@ 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' @@ -12,10 +13,11 @@ export const AppUI = observer(function AppUI() { return ( <> {/* */} - {/* */} + {isDev && } {isDev && } + ) }) diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css index 661d865dec..dbb70e73af 100644 --- a/tldraw/apps/tldraw-logseq/src/styles.css +++ b/tldraw/apps/tldraw-logseq/src/styles.css @@ -34,7 +34,6 @@ background: none; border: none; cursor: pointer; - border-radius: 2px; padding: 4px 8px; opacity: 1; } @@ -55,6 +54,35 @@ font-size: inherit; } + +.logseq-tldraw .action-bar { + position: relative; + top: 0; + /* width: 100%; */ + float:right; + grid-row: 1; + display: flex; + align-items: center; + padding: 8px; + color: black; + /* border-radius: 15px; */ + border-bottom-left-radius: 15px; + z-index: 100000; + user-select: none; + background: white; + border-left: 1px solid black; + border-bottom: 1px solid black; + font-size: inherit; +} + +.logseq-tldraw .action-bar button:hover { + background-color: var(--color-hover); +} + +.logseq-tldraw .action-bar button { + border-radius: 4px; +} + .logseq-tldraw .contextbar { pointer-events: all; position: relative; @@ -404,8 +432,8 @@ .logseq-tldraw .preview-minimap-toggle { position: absolute; - top: 24px; - right: 40px; + top: 60px; + right: 50px; z-index: 1; width: 32px; height: 32px; diff --git a/tldraw/packages/core/src/lib/TLApi/TLApi.ts b/tldraw/packages/core/src/lib/TLApi/TLApi.ts index 70ea680b8b..4a001d52fc 100644 --- a/tldraw/packages/core/src/lib/TLApi/TLApi.ts +++ b/tldraw/packages/core/src/lib/TLApi/TLApi.ts @@ -175,4 +175,16 @@ export class TLApi { + this.app.undo() + this.app.undo() + return this + } + + redo = () => { + this.app.redo() + this.app.redo() + return this + } } diff --git a/tldraw/packages/core/src/lib/TLHistory.ts b/tldraw/packages/core/src/lib/TLHistory.ts index 337b264e2c..b43d0967a1 100644 --- a/tldraw/packages/core/src/lib/TLHistory.ts +++ b/tldraw/packages/core/src/lib/TLHistory.ts @@ -72,8 +72,9 @@ export class TLHistory {