فهرست منبع

todo: db click to create logseq shape

Peng Xiao 3 سال پیش
والد
کامیت
899d945eb8

+ 1 - 1
tldraw/apps/tldraw-logseq/src/components/icons/LogseqIcon.tsx

@@ -6,7 +6,7 @@ const iconBase64 =
 export function LogseqIcon() {
 export function LogseqIcon() {
   return (
   return (
     <img
     <img
-      style={{ borderRadius: '50%', width: '20px', height: '20px' }}
+      style={{ borderRadius: '4px', width: '20px', height: '20px' }}
       src={'data:image/png;base64,' + iconBase64}
       src={'data:image/png;base64,' + iconBase64}
       alt="logseq"
       alt="logseq"
     />
     />

+ 4 - 0
tldraw/packages/core/src/lib/tools/TLSelectTool/states/PointingCanvasState.ts

@@ -39,4 +39,8 @@ export class PointingCanvasState<
   onPinchStart: TLEvents<S>['pinch'] = (info, event) => {
   onPinchStart: TLEvents<S>['pinch'] = (info, event) => {
     this.tool.transition('pinching', { info, event })
     this.tool.transition('pinching', { info, event })
   }
   }
+
+  onDoubleClick: TLEvents<S>['pointer'] = info => {
+    console.log('TODO: bringing up Logseq autocomplete here', info)
+  }
 }
 }

+ 14 - 0
tldraw/packages/react/src/hooks/useCanvasEvents.ts

@@ -3,11 +3,14 @@ import { useRendererContext } from '~hooks'
 import { TLTargetType } from '@tldraw/core'
 import { TLTargetType } from '@tldraw/core'
 import type { TLReactCustomEvents } from '~types'
 import type { TLReactCustomEvents } from '~types'
 import { useApp } from './useApp'
 import { useApp } from './useApp'
+import { DOUBLE_CLICK_DURATION } from '~constants'
 
 
 export function useCanvasEvents() {
 export function useCanvasEvents() {
   const app = useApp()
   const app = useApp()
   const { callbacks } = useRendererContext()
   const { callbacks } = useRendererContext()
 
 
+  const rDoubleClickTimer = React.useRef<number>(-1)
+
   const events = React.useMemo(() => {
   const events = React.useMemo(() => {
     const onPointerMove: TLReactCustomEvents['pointer'] = e => {
     const onPointerMove: TLReactCustomEvents['pointer'] = e => {
       const { order = 0 } = e
       const { order = 0 } = e
@@ -18,6 +21,17 @@ export function useCanvasEvents() {
       const { order = 0 } = e
       const { order = 0 } = e
       if (!order) e.currentTarget?.setPointerCapture(e.pointerId)
       if (!order) e.currentTarget?.setPointerCapture(e.pointerId)
       callbacks.onPointerDown?.({ type: TLTargetType.Canvas, order }, e)
       callbacks.onPointerDown?.({ type: TLTargetType.Canvas, order }, e)
+
+      const now = Date.now()
+      const elapsed = now - rDoubleClickTimer.current
+      if (elapsed > DOUBLE_CLICK_DURATION) {
+        rDoubleClickTimer.current = now
+      } else {
+        if (elapsed <= DOUBLE_CLICK_DURATION) {
+          callbacks.onDoubleClick?.({ type: TLTargetType.Canvas, order }, e)
+          rDoubleClickTimer.current = -1
+        }
+      }
     }
     }
 
 
     const onPointerUp: TLReactCustomEvents['pointer'] = e => {
     const onPointerUp: TLReactCustomEvents['pointer'] = e => {