add dropdown

tldraw/apps/tldraw-logseq/package.json

@@ -33,7 +33,8 @@
     "tsup": "^6.1.2",
     "typescript": "^4.7.3",
     "zx": "^6.2.4",
-    "@radix-ui/react-switch": "^0.1.6-rc.40"
+    "@radix-ui/react-switch": "^0.1.6-rc.40",
+    "@radix-ui/react-dropdown-menu": "^0.1.6"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

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

@@ -5,48 +5,32 @@ import { observer } from 'mobx-react-lite'
 import type { Shape } from '~lib'
 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'
+import { RedoIcon, UndoIcon } from '~components/icons'
+import { ZoomMenu } from '~components/ZoomMenu'
 
 export const ActionBar = observer(function ToolBar(): JSX.Element {
   const app = useApp<Shape>()
-  const testFunction = () => {
-    <ZoomContext ></ZoomContext>
-  }
-  //use state for if teh context bar should be open
+  //Use state isOpen
   const [isOpen, setIsOpen] = React.useState(false)
+  const undo = React.useCallback(() => {
+    app.api.undo()
+  }, [app])
 
-
+  const redo = React.useCallback(() => {
+    app.api.redo()
+  }, [app])
 
   return (
     <div className="action-bar">
-      <button onClick={app.api.undo}>
+      {/* <button>minimap</button> */}
+      <Minimap></Minimap>
+      <button onClick={undo}>
         <UndoIcon></UndoIcon>
       </button>
-      <button onClick={app.api.redo}>
+        <ZoomMenu></ZoomMenu>
+      <button onClick={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>
     </div>
   )
 })

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

@@ -36,18 +36,19 @@ export const Minimap = observer(function Minimap() {
 
   return (
     <>
-      {active && (
+    {active && (
         <div className="preview-minimap" {...events}>
           {preview}
         </div>
       )}
       <button
-        className="preview-minimap-toggle"
+        // className="preview-minimap-toggle"
         data-active={active}
         onClick={() => setActive(a => !a)}
       >
         <Crosshair2Icon />
       </button>
+      
     </>
   )
 })

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

@@ -1,31 +0,0 @@
-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

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

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { styled, keyframes } from '@stitches/react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { useApp } from '@tldraw/react';
+
+const slideUpAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(2px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+});
+
+const slideDownAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(-2px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+});
+
+const StyledContent = styled(DropdownMenuPrimitive.Content, {
+  backgroundColor: 'white',
+  borderRadius: 6,
+  padding: 5,
+  boxShadow:
+    '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
+  '@media (prefers-reduced-motion: no-preference)': {
+    animationDuration: '400ms',
+    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    animationFillMode: 'forwards',
+    willChange: 'transform, opacity',
+    '&[data-state="open"]': {
+      '&[data-side="top"]': { animationName: slideUpAndFade },
+      '&[data-side="bottom"]': { animationName: slideDownAndFade },
+    },
+  },
+});
+
+const itemStyles = {
+  minWidth: '220px',
+  all: 'unset',
+  fontSize: 13,
+  lineHeight: 1,
+  color: 'black',
+  borderRadius: 3,
+  display: 'flex',
+  alignItems: 'center',
+  height: 25,
+  padding: '0 5px',
+  position: 'relative',
+  userSelect: 'none',
+
+  '&:focus': {
+    backgroundColor: "black",
+    color: "white",
+  },
+};
+
+const StyledItem = styled(DropdownMenuPrimitive.Item, { ...itemStyles });
+const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
+  fill: 'white',
+});
+
+
+// Exports
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuContent = StyledContent;
+export const DropdownMenuItem = StyledItem;
+export const DropdownMenuArrow = StyledArrow;
+
+// Your app...
+const Box = styled('div', {});
+
+const RightSlot = styled('div', {
+  marginLeft: 'auto',
+  paddingLeft: 20,
+  color: "black",
+  ':focus > &': { color: 'white' },
+});
+
+//Change location of the radix dropdown menu being rendered
+
+
+
+export const ZoomMenu = () => {
+  const app = useApp();
+  return (
+    <Box>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <button>{(app.viewport.camera.zoom * 100).toFixed(0) + "%"} </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent sideOffset={12} >
+        <DropdownMenuArrow></DropdownMenuArrow>
+          <DropdownMenuItem onClick={app.api.zoomToFit}>
+            Zoom to Fit <RightSlot></RightSlot>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={app.api.zoomToSelection}>
+            Zoom to Selection <RightSlot>⌘+Minus</RightSlot>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={app.api.zoomIn}>
+            Zoom In <RightSlot>⌘+Plus</RightSlot>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={app.api.zoomOut}>
+            Zoom Out <RightSlot>⌘+Minus</RightSlot>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={app.api.resetZoom}>
+            Reset Zoom <RightSlot>⇧+0</RightSlot>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </Box>
+  );
+};
+
+
+
+
+
+export default ZoomMenu;
+

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

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

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

@@ -58,8 +58,6 @@
 .logseq-tldraw .action-bar {
   position: absolute;
   bottom: 0px;
-
-
   /* width: 100%; */
   float:left;
   left: 0px;
@@ -423,7 +421,9 @@
 .logseq-tldraw .preview-minimap {
   height: 300px;
   width: 400px;
-  top: 16px;
+  /* Set top to be the viewport minus 10px */
+  bottom: calc(100vh - 320px);
+
   left: 16px;
   position: absolute;
   border: 1px solid black;