fix: reveal specified image in viewer effect

hemengke1997 · Jun 26, 2024 · 1fe7724 · 1fe7724
1 parent 21a1360
commit 1fe7724
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 18 deletions.
diff --git a/src/webview/image-manager/components/image-name/index.tsx b/src/webview/image-manager/components/image-name/index.tsx
@@ -9,7 +9,10 @@ const { Text } = Typography
 const tooltipProps: TooltipProps = {
   arrow: false,
   placement: 'bottom',
-  destroyTooltipOnHide: true,
+  destroyTooltipOnHide: false,
+  align: {
+    offset: [0, 8],
+  },
 }
 
 export type ImageNameProps = {

diff --git a/src/webview/image-manager/components/lazy-image/index.tsx b/src/webview/image-manager/components/lazy-image/index.tsx
@@ -105,7 +105,11 @@ function LazyImage(props: LazyImageProps) {
     },
   })
 
-  const { imagePlaceholderSize, targetImagePath } = GlobalContext.usePicker(['imagePlaceholderSize', 'targetImagePath'])
+  const { imagePlaceholderSize, targetImagePath, targetImagePathWithoutQuery } = GlobalContext.usePicker([
+    'imagePlaceholderSize',
+    'targetImagePath',
+    'targetImagePathWithoutQuery',
+  ])
   const warningSize = GlobalContext.useSelector((ctx) => ctx.extConfig.viewer.warningSize)
   const imageRendering = GlobalContext.useSelector((ctx) => ctx.extConfig.viewer.imageRendering)
   const refreshTimes = ActionContext.useSelector((ctx) => ctx.imageRefreshedState.refreshTimes)
@@ -164,23 +168,15 @@ function LazyImage(props: LazyImageProps) {
 
   const isTargetImage = useMemoizedFn(() => {
     return (
-      !contextMenu?.enable?.reveal_in_viewer &&
-      trim(image.path).length &&
-      image.path === targetImagePath.slice(0, targetImagePath.lastIndexOf('?'))
+      !contextMenu?.enable?.reveal_in_viewer && trim(image.path).length && image.path === targetImagePathWithoutQuery
     )
   })
 
   useEffect(() => {
-    let timer: number
     let idleTimer: number
+
     if (isTargetImage()) {
-      Events.scrollEvent.register('end', () => {
-        timer = window.setTimeout(() => {
-          setInteractive(true)
-          // 清空 targetImagePath，避免下次进入时直接定位
-          vscodeApi.postMessage({ cmd: CmdToVscode.reveal_image_in_viewer, data: { filePath: '' } })
-        }, 0)
-      })
+      setInteractive(true)
 
       idleTimer = requestIdleCallback(() => {
         const y = placeholderRef.current?.getBoundingClientRect().top || keybindRef.current?.getBoundingClientRect().top
@@ -199,13 +195,14 @@ function LazyImage(props: LazyImageProps) {
           )
         }
       })
+    } else {
+      setInteractive(false)
     }
 
     return () => {
       if (isTargetImage()) {
         setInteractive(false)
         Events.scrollEvent.remove('end')
-        clearTimeout(timer)
         cancelIdleCallback(idleTimer)
       }
     }
@@ -230,7 +227,7 @@ function LazyImage(props: LazyImageProps) {
         tabIndex={-1}
         className={classnames(
           'group relative flex flex-none flex-col items-center space-y-1 p-1.5 transition-colors',
-          'hover:border-ant-color-primary-active overflow-hidden rounded-md border-[2px] border-solid border-transparent',
+          'hover:border-ant-color-primary overflow-hidden rounded-md border-[2px] border-solid border-transparent',
           interactive && 'border-ant-color-primary-hover hover:border-ant-color-primary-hover',
         )}
         initial={{ opacity: 0 }}
@@ -239,7 +236,8 @@ function LazyImage(props: LazyImageProps) {
         whileInView={{ opacity: 1 }}
         onContextMenu={onContextMenu}
         onMouseOver={handleMaskMouseOver}
-        onDoubleClick={() => {
+        onDoubleClick={(e) => {
+          if (e.metaKey || e.ctrlKey || e.shiftKey) return
           showImageDetailModal(image)
         }}
       >
@@ -269,8 +267,9 @@ function LazyImage(props: LazyImageProps) {
                       <div className={'flex size-full flex-col items-center justify-center space-y-1 text-sm'}>
                         {onPreviewClick && (
                           <div
-                            className={'flex cursor-pointer items-center space-x-1 truncate'}
+                            className={classnames('flex cursor-pointer items-center space-x-1 truncate')}
                             onClick={(e) => {
+                              if (e.metaKey || e.ctrlKey || e.shiftKey) return
                               // prevent click away
                               e.stopPropagation()
                               onPreviewClick(image)

diff --git a/src/webview/image-manager/contexts/global-context.ts b/src/webview/image-manager/contexts/global-context.ts
@@ -80,7 +80,8 @@ function useGlobalContext() {
   const [targetImagePath, setTargetImagePath] = useState<string>(window.__target_image_path__)
   const targetImagePathWithoutQuery = useMemo(() => {
     const index = targetImagePath.lastIndexOf('?')
-    return targetImagePath.slice(0, index)
+    if (index !== -1) return targetImagePath.slice(0, index)
+    return targetImagePath
   }, [targetImagePath])
 
   /* ------------- tree context 中的数据 ------------ */

diff --git a/src/webview/image-manager/keybinding/index.ts b/src/webview/image-manager/keybinding/index.ts
@@ -1,5 +1,7 @@
 import { os } from 'un-detector'
 
+// mod (which listens for ctrl on Windows/Linux and cmd on macOS)
+
 type SymbolTypes = {
   mod: string
   shift: string

diff --git a/src/webview/panel.ts b/src/webview/panel.ts
@@ -112,6 +112,7 @@ export class ImageManagerPanel {
   }
 
   public static updateTargetImage(targetImagePath: string) {
+    // 加时间戳是为了重复打开同一图片时，能够触发 targetImagePath 的 effect
     this.watchedTargetImage.path = targetImagePath ? `${targetImagePath}?t=${Date.now()}` : ''
   }