fix: overflow issues

src/main/frontend/extensions/tldraw.cljs

@@ -6,6 +6,7 @@
             [frontend.search :as search]
             [frontend.rum :as r]
             [frontend.state :as state]
+            [frontend.util :as util]
             [goog.object :as gobj]
             [rum.core :as rum]))
 
@@ -20,6 +21,7 @@
        {:style {:overscroll-behavior "none"}}
        [:div.draw-wrap.relative
         {:on-blur #(state/set-block-component-editing-mode! false)
+         :on-wheel util/stop-propagation ;; wheel -> overscroll may cause browser navigation
          :style {:height "calc(100vh - 80px)" }}
 
         (tldraw {:PageComponent page

src/main/frontend/ui.cljs

@@ -950,7 +950,6 @@
                     state)))}
   (rum/local false ::visible?)
   [state content-fn sensor-opts reset-height?]
-           (println state)
   (if (or (util/mobile?) (mobile-util/is-native-platform?) (::inside-of-whiteboard? state))
     (content-fn)
     (let [*visible? (::visible? state)]

tailwind.all.css

@@ -7,7 +7,7 @@
 @import "resources/css/photoswipe.css";
 @import "resources/css/fonts.css";
 @import "resources/css/excalidraw.min.css";
-@import "resources/css/tldraw.css";
+@import "tldraw/apps/tldraw-logseq/src/styles.css";
 @import "resources/css/katex.min.css";
 @import "resources/css/codemirror.min.css";
 @import "resources/css/codemirror.solarized.css";

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

@@ -8,7 +8,7 @@ export const AppUI = observer(function AppUI() {
   return (
     <>
       {/* <ToolBar /> */}
-      {/* <StatusBar /> */}
+      <StatusBar />
       <PrimaryTools />
     </>
   )

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -8,6 +8,7 @@ import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 import { TextInput } from '~components/inputs/TextInput'
 import { LogseqContext } from '~lib/logseq-context'
+import type { Shape } from '~lib'
 
 export interface LogseqPortalShapeProps extends TLBoxShapeProps, CustomStyleProps {
   type: 'logseq-portal'
@@ -98,9 +99,19 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       props: { opacity, pageId },
     } = this
 
-    const app = useApp()
+    const app = useApp<Shape>()
     const { Page } = React.useContext(LogseqContext)
     const isSelected = app.selectedIds.has(this.id)
+    const disableTlEvents = !isEditing && !isSelected && app.selectedTool.id !== 'select'
+
+    const stop = React.useCallback(
+      e => {
+        if (!disableTlEvents) {
+          e.stopPropagation()
+        }
+      },
+      [disableTlEvents]
+    )
 
     if (!Page) {
       return null
@@ -135,16 +146,18 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
           style={{
             width: '100%',
             overflow: 'auto',
+            overscrollBehavior: 'contain',
             height: pageId ? 'calc(100% - 32px)' : '100%',
             pointerEvents: isSelected ? 'none' : 'all',
             userSelect: 'none',
+            opacity: isSelected ? 0.5 : 1,
           }}
         >
           {pageId ? (
             <div
-              onWheelCapture={e => e.stopPropagation()}
-              onPointerDown={e => !isEditing && e.stopPropagation()}
-              onPointerUp={e => !isEditing && e.stopPropagation()}
+              onWheelCapture={stop}
+              onPointerDown={stop}
+              onPointerUp={stop}
               style={{ padding: '0 24px' }}
             >
               <Page pageId={pageId} />
@@ -152,7 +165,6 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
           ) : (
             <div
               style={{
-                opacity: isSelected ? 0.5 : 1,
                 width: '100%',
                 height: '100%',
                 display: 'flex',

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

@@ -1,3 +1,4 @@
+/* TODO: move to useStylesheet */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
 
 :root {
@@ -277,3 +278,7 @@
   user-select: text;
   -webkit-user-select: text;
 }
+
+.logseq-tldraw .tl-positioned-inner:focus-within {
+  box-shadow: 0 0 12px var(--ls-active-primary-color);
+}

tldraw/packages/react/src/hooks/useGestureEvents.ts

@@ -16,7 +16,6 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
   const events = React.useMemo(() => {
     const onWheel: Handler<'wheel', WheelEvent> = gesture => {
       const { event, delta } = gesture
-      console.log(event.target)
       event.preventDefault()
       if (inputs.state === 'pinching') return
       if (Vec.isEqual(delta, [0, 0])) return