test actionbar

tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx

@@ -5,11 +5,17 @@ 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'
+import { LogseqIcon, RedoIcon, UndoIcon } from '~components/icons'
+import { ZoomInIcon, ZoomOutIcon } from '@radix-ui/react-icons'
 
 export const ActionBar = observer(function ToolBar(): JSX.Element {
   const app = useApp<Shape>()
-  
+
+  const testFunction = ()=> {
+    console.log()
+    return app.viewport.camera.zoom //convert int to percentage
+
+  }
   return (
     <div className="action-bar">
       <button onClick={app.api.undo}>
@@ -19,6 +25,13 @@ export const ActionBar = observer(function ToolBar(): JSX.Element {
       <button onClick={app.api.redo}>
         <RedoIcon></RedoIcon>
       </button>
+      <button onClick={app.api.zoomIn}>
+        <ZoomInIcon></ZoomInIcon>
+      </button>
+      <button onClick={testFunction}>{testFunction}</button>
+      <button onClick={app.api.zoomOut}>
+        <ZoomOutIcon></ZoomOutIcon>
+      </button>
     </div>
   )
 })