Merge pull request #6534 from logseq/enhance/whiteboards

tldraw/apps/tldraw-logseq/build.mjs

@@ -2,6 +2,7 @@
 /* eslint-disable no-undef */
 import 'zx/globals'
 import fs from 'fs'
+import path from 'path'
 
 // Build with [tsup](https://tsup.egoist.sh)
 await $`tsup`
@@ -16,4 +17,7 @@ Object.assign(glob, {
 
 fs.writeFileSync('dist/package.json', JSON.stringify(glob, null, 2))
 
-await $`ln -f ${__dirname}/dist/index.js ${__dirname}/../../../src/js/tldraw-logseq.js`
+const dest = path.join(__dirname, '/../../../src/js/tldraw-logseq.js')
+
+fs.unlinkSync(dest)
+fs.linkSync(path.join(__dirname, '/dist/index.js'), dest)

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

@@ -43,7 +43,10 @@ const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets, hidden })
         <div
           ref={rContextBar}
           className="tl-contextbar"
-          style={{ pointerEvents: hidden ? 'none' : 'all' }}
+          style={{
+            visibility: hidden ? 'hidden' : 'visible',
+            pointerEvents: hidden ? 'none' : 'all'
+          }}
         >
           {Actions.map((Action, idx) => (
             <React.Fragment key={idx}>

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

@@ -19,17 +19,18 @@ export const ContextMenu = observer(function ContextMenu({
   const app = useApp()
   const rContent = React.useRef<HTMLDivElement>(null)
 
+  const runAndTransition = (f: Function) => {
+    f()
+    app.transition('select')
+  }
+
   return (
-    <ReactContextMenu.Root
-      onOpenChange={state => {
-        if (!state) app.transition('select')
-      }}
-    >
+    <ReactContextMenu.Root>
       <ReactContextMenu.Trigger>{children}</ReactContextMenu.Trigger>
       <ReactContextMenu.Content
         className="tl-context-menu"
         ref={rContent}
-        onEscapeKeyDown={preventDefault}
+        onEscapeKeyDown={() => app.transition('select')}
         collisionBoundary={collisionRef.current}
         asChild
         tabIndex={-1}
@@ -37,7 +38,21 @@ export const ContextMenu = observer(function ContextMenu({
         <div>
           {app.selectedShapes?.size > 0 && (
             <>
-              <ReactContextMenu.Item className="tl-context-menu-button" onClick={() => app.copy()}>
+              <ReactContextMenu.Item
+                className="tl-context-menu-button"
+                onClick={() => runAndTransition(app.cut)}
+              >
+                Cut
+                <div className="tl-context-menu-right-slot">
+                  <span className="keyboard-shortcut">
+                    <code>{MOD_KEY}</code> <code>X</code>
+                  </span>
+                </div>
+              </ReactContextMenu.Item>
+              <ReactContextMenu.Item
+                className="tl-context-menu-button"
+                onClick={() => runAndTransition(app.copy)}
+              >
                 Copy
                 <div className="tl-context-menu-right-slot">
                   <span className="keyboard-shortcut">
@@ -47,7 +62,10 @@ export const ContextMenu = observer(function ContextMenu({
               </ReactContextMenu.Item>
             </>
           )}
-          <ReactContextMenu.Item className="tl-context-menu-button" onClick={() => app.paste()}>
+          <ReactContextMenu.Item
+            className="tl-context-menu-button"
+            onClick={() => runAndTransition(app.paste)}
+          >
             Paste
             <div className="tl-context-menu-right-slot">
               <span className="keyboard-shortcut">
@@ -58,9 +76,9 @@ export const ContextMenu = observer(function ContextMenu({
           <ReactContextMenu.Separator className="menu-separator" />
           <ReactContextMenu.Item
             className="tl-context-menu-button"
-            onClick={() => app.api.selectAll()}
+            onClick={() => runAndTransition(app.api.selectAll)}
           >
-            Select All
+            Select all
             <div className="tl-context-menu-right-slot">
               <span className="keyboard-shortcut">
                 <code>{MOD_KEY}</code> <code>A</code>
@@ -70,16 +88,16 @@ export const ContextMenu = observer(function ContextMenu({
           {app.selectedShapes?.size > 1 && (
             <ReactContextMenu.Item
               className="tl-context-menu-button"
-              onClick={() => app.api.deselectAll()}
+              onClick={() => runAndTransition(app.api.deselectAll)}
             >
-              Deselect All
+              Deselect all
             </ReactContextMenu.Item>
           )}
           {app.selectedShapes?.size > 0 && (
             <>
               <ReactContextMenu.Item
                 className="tl-context-menu-button"
-                onClick={() => app.api.deleteShapes()}
+                onClick={() => runAndTransition(app.api.deleteShapes)}
               >
                 Delete
                 <div className="tl-context-menu-right-slot">
@@ -93,24 +111,24 @@ export const ContextMenu = observer(function ContextMenu({
                   <ReactContextMenu.Separator className="menu-separator" />
                   <ReactContextMenu.Item
                     className="tl-context-menu-button"
-                    onClick={() => app.flipHorizontal()}
+                    onClick={() => runAndTransition(app.flipHorizontal)}
                   >
-                    Flip Horizontally
+                    Flip horizontally
                   </ReactContextMenu.Item>
                   <ReactContextMenu.Item
                     className="tl-context-menu-button"
-                    onClick={() => app.flipVertical()}
+                    onClick={() => runAndTransition(app.flipVertical)}
                   >
-                    Flip Vertically
+                    Flip vertically
                   </ReactContextMenu.Item>
                 </>
               )}
               <ReactContextMenu.Separator className="menu-separator" />
               <ReactContextMenu.Item
                 className="tl-context-menu-button"
-                onClick={() => app.bringToFront()}
+                onClick={() => runAndTransition(app.bringToFront)}
               >
-                Move to Front
+                Move to front
                 <div className="tl-context-menu-right-slot">
                   <span className="keyboard-shortcut">
                     <code>⇧</code> <code>]</code>
@@ -119,7 +137,7 @@ export const ContextMenu = observer(function ContextMenu({
               </ReactContextMenu.Item>
               <ReactContextMenu.Item
                 className="tl-context-menu-button"
-                onClick={() => app.sendToBack()}
+                onClick={() => runAndTransition(app.sendToBack)}
               >
                 Move to back
                 <div className="tl-context-menu-right-slot">

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

@@ -24,17 +24,22 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
           onSelect={preventEvent}
           onClick={app.api.zoomToFit}
         >
-          Zoom to Fit <div className="tl-zoom-menu-right-slot"></div>
+          Zoom to fit
+          <div className="tl-zoom-menu-right-slot">
+            <span className="keyboard-shortcut">
+              <code>1</code>
+            </span>
+          </div>
         </DropdownMenuPrimitive.Item>
         <DropdownMenuPrimitive.Item
           className="menu-link tl-zoom-menu-dropdown-item"
           onSelect={preventEvent}
           onClick={app.api.zoomToSelection}
         >
-          Zoom to Selection{' '}
+          Zoom to selection
           <div className="tl-zoom-menu-right-slot">
             <span className="keyboard-shortcut">
-              <code>{MOD_KEY}</code> <code>-</code>
+              <code>⇧</code> <code>1</code>
             </span>
           </div>
         </DropdownMenuPrimitive.Item>
@@ -43,7 +48,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
           onSelect={preventEvent}
           onClick={app.api.zoomIn}
         >
-          Zoom In{' '}
+          Zoom in
           <div className="tl-zoom-menu-right-slot">
             <span className="keyboard-shortcut">
               <code>{MOD_KEY}</code> <code>+</code>
@@ -55,7 +60,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
           onSelect={preventEvent}
           onClick={app.api.zoomOut}
         >
-          Zoom Out{' '}
+          Zoom out
           <div className="tl-zoom-menu-right-slot">
             <span className="keyboard-shortcut">
               <code>{MOD_KEY}</code> <code>-</code>
@@ -67,7 +72,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
           onSelect={preventEvent}
           onClick={app.api.resetZoom}
         >
-          Reset Zoom{' '}
+          Reset zoom
           <div className="tl-zoom-menu-right-slot">
             <span className="keyboard-shortcut">
               <code>⇧</code> <code>0</code>

tldraw/packages/core/src/lib/TLApp/TLApp.ts

@@ -96,7 +96,11 @@ export class TLApp<
         fn: () => this.api.resetZoom(),
       },
       {
-        keys: 'mod+-',
+        keys: '1',
+        fn: () => this.api.zoomToFit(),
+      },
+      {
+        keys: 'shift+1',
         fn: () => this.api.zoomToSelection(),
       },
       {
@@ -111,6 +115,10 @@ export class TLApp<
         keys: 'mod+z',
         fn: () => this.undo(),
       },
+      {
+        keys: 'mod+x',
+        fn: () => this.cut(),
+      },
       {
         keys: 'mod+shift+z',
         fn: () => this.redo(),
@@ -437,6 +445,11 @@ export class TLApp<
     }
   }
 
+  cut = () => {
+    this.copy()
+    this.api.deleteShapes()
+  }
+
   dropFiles = (files: FileList, point?: number[]) => {
     this.notify('drop-files', {
       files: Array.from(files),
@@ -708,6 +721,7 @@ export class TLApp<
     return (
       !ctrlKey &&
       this.isInAny('select.idle', 'select.hoveringSelectionHandle') &&
+      !this.isIn('select.contextMenu') &&
       selectedShapesArray.length > 0 &&
       !selectedShapesArray.every(shape => shape.hideContextBar)
     )
@@ -819,7 +833,7 @@ export class TLApp<
   }
 
   readonly onWheel: TLEvents<S, K>['wheel'] = (info, e) => {
-    if (e.ctrlKey) {
+    if (e.ctrlKey || this.isIn('select.contextMenu')) {
       return
     }
 

tldraw/packages/react/src/components/ContextBarContainer/ContextBarContainer.tsx

@@ -52,10 +52,6 @@ export const ContextBarContainer = observer(function ContextBarContainer<S exten
     height: screenBounds.height,
   }
 
-  const inView =
-    BoundsUtils.boundsContain(vpBounds, screenBounds) ||
-    BoundsUtils.boundsCollide(vpBounds, screenBounds)
-
   return (
     <div
       ref={rBounds}