update location of bar

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

@@ -12,23 +12,22 @@ export const ActionBar = observer(function ToolBar(): JSX.Element {
   const app = useApp<Shape>()
 
   const testFunction = ()=> {
-    console.log()
+    console.log(app.viewport.camera.zoom)
     return app.viewport.camera.zoom //convert int to percentage
-
   }
   return (
     <div className="action-bar">
       <button onClick={app.api.undo}>
         <UndoIcon></UndoIcon>
       </button>
-
       <button onClick={app.api.redo}>
         <RedoIcon></RedoIcon>
       </button>
       <button onClick={app.api.zoomIn}>
         <ZoomInIcon></ZoomInIcon>
       </button>
-      <button onClick={testFunction}>{testFunction}</button>
+      <button onClick={testFunction}>{(app.viewport.camera.zoom*100).toFixed(0)+"%"} </button>
+
       <button onClick={app.api.zoomOut}>
         <ZoomOutIcon></ZoomOutIcon>
       </button>

tldraw/apps/tldraw-logseq/src/styles.css

@@ -56,22 +56,23 @@
 
 
 .logseq-tldraw .action-bar {
-  position: relative;
-  top: 0;
+  position: absolute;
+  bottom: 50px;
+
+
   /* width: 100%; */
-  float:right;
+  float:left;
+  left: 50px;
   grid-row: 1;
   display: flex;
   align-items: center;
   padding: 8px;
   color: black;
-  /* border-radius: 15px; */
-  border-bottom-left-radius: 15px;
+  border-radius: 15px;
+  border: black solid 1px;
   z-index: 100000;
   user-select: none;
   background: white;
-  border-left: 1px solid black;
-  border-bottom: 1px solid black;
   font-size: inherit;
 }