add files

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

@@ -7,14 +7,19 @@ import { App, useApp } from '@tldraw/react'
 import { Minimap } from '~components/Minimap'
 import { LogseqIcon, RedoIcon, UndoIcon } from '~components/icons'
 import { ZoomInIcon, ZoomOutIcon } from '@radix-ui/react-icons'
+import { ZoomContext } from '~components/ZoomContext'
+import { Container } from '@tldraw/react/src/components'
 
 export const ActionBar = observer(function ToolBar(): JSX.Element {
   const app = useApp<Shape>()
-
-  const testFunction = ()=> {
-    console.log(app.viewport.camera.zoom)
-    return app.viewport.camera.zoom //convert int to percentage
+  const testFunction = () => {
+    <ZoomContext ></ZoomContext>
   }
+  //use state for if teh context bar should be open
+  const [isOpen, setIsOpen] = React.useState(false)
+
+
+
   return (
     <div className="action-bar">
       <button onClick={app.api.undo}>
@@ -23,14 +28,25 @@ export const ActionBar = observer(function ToolBar(): JSX.Element {
       <button onClick={app.api.redo}>
         <RedoIcon></RedoIcon>
       </button>
+      <button onClick={app.api.zoomOut}>
+        
+      </button>
+      <Container
+      bounds={{minX: 500,
+        maxX: 600,
+        minY: 500,
+        maxY: 600,
+        width: 100,
+        height: 100,}}>
+      {
+        isOpen && (
+          <ZoomContext></ZoomContext>)
+      }
+      </Container>
+      <button onClick={testFunction}>{(app.viewport.camera.zoom * 100).toFixed(0) + "%"} </button>
       <button onClick={app.api.zoomIn}>
         <ZoomInIcon></ZoomInIcon>
       </button>
-      <button onClick={testFunction}>{(app.viewport.camera.zoom*100).toFixed(0)+"%"} </button>
-
-      <button onClick={app.api.zoomOut}>
-        <ZoomOutIcon></ZoomOutIcon>
-      </button>
     </div>
   )
 })

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

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import {
+  HTMLContainer,
+  TLContextBarComponent,
+  useApp,
+  getContextBarTranslation,
+} from '@tldraw/react'
+import { observer } from 'mobx-react-lite'
+import type { TextShape, PolygonShape, Shape } from '~lib/shapes'
+
+const _ZoomContext = () => {
+  const app = useApp()
+  const rSize = React.useRef<[number, number] | null>(null)
+  const rContextBar = React.useRef<HTMLDivElement>(null)
+
+  
+
+  if (!app) return null
+
+
+
+  return (
+    <HTMLContainer centered>
+      <div ref={rContextBar} className="contextbar">
+        <label>Hi</label>
+      </div>
+    </HTMLContainer>
+  )
+}
+
+export const ZoomContext = observer(_ZoomContext)

tldraw/apps/tldraw-logseq/src/components/ZoomContext/index.ts

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

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

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