chore: release v1.11.0

hemengke1997 · Aug 9, 2024 · 887c798 · 887c798
1 parent 10f4314
commit 887c798
Show file tree

Hide file tree

Showing 17 changed files with 197 additions and 105 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,22 @@
 # CHANGELOG
 
+## 1.11.0 (2024-08-09)
+
+### Feat
+
+- 图片重命名后定位到新图片
+- 目录重命名后定位到新目录
+
+### Fix
+
+- 修复重命名弹窗自动聚焦延迟问题
+
+## 1.10.1 (2024-08-08)
+
+### Chore
+
+- 常规升级依赖
+
 ## 1.10.0 (2024-07-25)
 
 ### Feat

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "publisher": "Minko",
   "name": "image-manager",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "private": true,
   "description": "压缩、裁剪、转换格式、搜索、查找相似图片的vscode插件 | Compress, crop, convert format, search and find similary images in vscode",
   "type": "commonjs",

diff --git a/src/core/watcher.ts b/src/core/watcher.ts
@@ -6,7 +6,6 @@ import { Config, Global } from '~/core'
 import { CmdToWebview } from '~/message/cmd'
 import { Channel } from '~/utils/channel'
 import { imageGlob } from '~/utils/glob'
-import logger from '~/utils/logger'
 import { ImageManagerPanel } from '~/webview/panel'
 
 export class Watcher {
@@ -53,7 +52,7 @@ export class Watcher {
     if (this._isIgnored(e, isDirectory)) {
       return
     }
-    logger.debug(`文件 ${type}: ${e.fsPath || e.path}, 是否为目录: ${isDirectory}, 触发刷新`)
+    Channel.debug(`文件 ${type}: ${e.fsPath || e.path}, 是否为目录: ${isDirectory}, 触发刷新`)
     this.webview?.postMessage({
       cmd: CmdToWebview.refresh_images,
     })

diff --git a/src/webview/image-manager/components/auto-focus-input/index.tsx b/src/webview/image-manager/components/auto-focus-input/index.tsx
@@ -0,0 +1,16 @@
+import { type GetProps, Input, type InputRef } from 'antd'
+import { memo, useLayoutEffect, useRef } from 'react'
+
+function AutoFocusInput(props: GetProps<typeof Input>) {
+  const ref = useRef<InputRef>(null)
+  useLayoutEffect(() => {
+    if (ref.current) {
+      setTimeout(() => {
+        ref.current?.focus({ cursor: 'all' })
+      })
+    }
+  }, [ref])
+  return <Input ref={ref} {...props}></Input>
+}
+
+export default memo(AutoFocusInput)
diff --git a/src/webview/image-manager/components/context-menus/index.css b/src/webview/image-manager/components/context-menus/index.css
@@ -1,8 +1,8 @@
 [data-theme='dark'] {
-  --custom-contexify-menu-bgColor: rgba(55, 55, 55, 0.4);
+  --custom-contexify-menu-bgColor: rgba(55, 55, 55, 0.7);
 }
 [data-theme='light'] {
-  --custom-contexify-menu-bgColor: rgba(200, 200, 200, 0.4);
+  --custom-contexify-menu-bgColor: rgba(200, 200, 200, 0.7);
 }
 
 .contexify {
@@ -20,7 +20,7 @@
 
   &::before {
     content: '';
-    @apply absolute bottom-0 left-0 right-0 top-0 rounded-[var(--contexify-menu-radius)] bg-[var(--contexify-menu-bgColor)] backdrop-blur-[50px];
+    @apply absolute bottom-0 left-0 right-0 top-0 rounded-[var(--contexify-menu-radius)] bg-[var(--contexify-menu-bgColor)] backdrop-blur-[15px];
   }
 
   @apply border-ant-color-border border border-solid text-sm;

diff --git a/src/webview/image-manager/components/image-actions/components/more/index.tsx b/src/webview/image-manager/components/image-actions/components/more/index.tsx
@@ -1,7 +1,7 @@
 import { upperFirst } from '@minko-fe/lodash-pro'
 import { useMemoizedFn } from '@minko-fe/react-hook'
 import { Button, Popover } from 'antd'
-import { memo } from 'react'
+import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { IoIosMore } from 'react-icons/io'
 import ActionContext from '~/webview/image-manager/contexts/action-context'
@@ -10,6 +10,8 @@ function More() {
   const { t } = useTranslation()
   const { setCollapseOpen } = ActionContext.usePicker(['setCollapseOpen'])
 
+  const [open, setOpen] = useState(false)
+
   const toggleAllCollapse = useMemoizedFn((b: boolean) => {
     setCollapseOpen((t) => t + (b ? 1 : -1))
   })
@@ -18,6 +20,10 @@ function More() {
       title={upperFirst(t('im.action'))}
       trigger='click'
       placement='left'
+      open={open}
+      onOpenChange={(open) => {
+        setOpen(open)
+      }}
       content={
         <div>
           <div className={'flex items-center space-x-2'}>
@@ -26,13 +32,15 @@ function More() {
               <Button
                 onClick={() => {
                   toggleAllCollapse(true)
+                  setOpen(false)
                 }}
               >
                 {t('im.expand')}
               </Button>
               <Button
                 onClick={() => {
                   toggleAllCollapse(false)
+                  setOpen(false)
                 }}
               >
                 {t('im.collapse')}

diff --git a/src/webview/image-manager/components/image-collapse/index.css b/src/webview/image-manager/components/image-collapse/index.css
@@ -0,0 +1,6 @@
+[data-theme='dark'] {
+  --sticky-collapse-header-bgColor: rgba(55, 55, 55, 0.9);
+}
+[data-theme='light'] {
+  --sticky-collapse-header-bgColor: rgba(200, 200, 200, 0.9);
+}
diff --git a/src/webview/image-manager/components/image-collapse/index.tsx b/src/webview/image-manager/components/image-collapse/index.tsx
@@ -7,11 +7,12 @@ import { Element, scroller } from 'react-scroll'
 import { classNames } from 'tw-clsx'
 import ActionContext from '../../contexts/action-context'
 import GlobalContext from '../../contexts/global-context'
+import useImageManagerEvent from '../../hooks/use-image-manager-event'
 import { useSticky } from '../../hooks/use-sticky'
 import { type EnableCollapseContextMenuType } from '../context-menus/components/collapse-context-menu'
 import useCollapseContextMenu from '../context-menus/components/collapse-context-menu/hooks/use-collapse-context-menu'
-import useImageContextMenuEvent from '../context-menus/components/image-context-menu/hooks/use-image-context-menu-event'
 import ImagePreview, { type ImagePreviewProps } from '../image-preview'
+import './index.css'
 
 type ImageCollapseProps = {
   /**
@@ -48,7 +49,7 @@ type ImageCollapseProps = {
    */
   nestedChildren: JSX.Element | null
   /**
-   * image dir path
+   * 目录绝对地址
    */
   id: string
   /**
@@ -76,9 +77,11 @@ function ImageCollapse(props: ImageCollapseProps) {
     imagePreviewProps,
   } = props
 
-  const { imageRevealWithoutQuery, viewerHeaderStickyHeight } = GlobalContext.usePicker([
+  const { imageRevealWithoutQuery, viewerHeaderStickyHeight, dirReveal, setDirReveal } = GlobalContext.usePicker([
     'imageRevealWithoutQuery',
     'viewerHeaderStickyHeight',
+    'dirReveal',
+    'setDirReveal',
   ])
   const { collapseOpen } = ActionContext.usePicker(['collapseOpen'])
 
@@ -87,13 +90,20 @@ function ImageCollapse(props: ImageCollapseProps) {
     onChange: collapseProps.onChange,
   })
 
+  const stickyRef = useRef<HTMLDivElement>(null)
+  const holderRef = useRef<HTMLDivElement>(null)
+
+  const target = stickyRef.current?.querySelector('.ant-collapse-header') as HTMLElement
+  const isSticky = useRef(false)
+  const elRef = useRef<HTMLDivElement>(null)
+
   const onCollapseChange = useMemoizedFn((keys: string[]) => {
     setActiveKeys(keys)
 
     if (!keys.length) {
       // 关闭collapse
       // 如果sticky状态，需要滚动collapse的header到顶部
-      if (isSticky) {
+      if (isSticky.current) {
         scroller.scrollTo(id, {
           duration: 0,
           smooth: false,
@@ -135,11 +145,26 @@ function ImageCollapse(props: ImageCollapseProps) {
     }
   }, [imageRevealWithoutQuery])
 
-  useImageContextMenuEvent({
+  useEffect(() => {
+    if (id === dirReveal) {
+      setDirReveal('')
+      stickyRef.current?.scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+      })
+    }
+  }, [id])
+
+  useImageManagerEvent({
     on: {
       reveal_in_viewer: (image) => {
         onActive(image.path)
       },
+      rename_directory: (previosDirPath, newPath) => {
+        if (previosDirPath === id) {
+          setDirReveal(newPath)
+        }
+      },
     },
   })
 
@@ -202,31 +227,27 @@ function ImageCollapse(props: ImageCollapseProps) {
     }
   })
 
-  const stickyRef = useRef<HTMLDivElement>(null)
-  const holderRef = useRef<HTMLDivElement>(null)
-
-  const target = stickyRef.current?.querySelector('.ant-collapse-header') as HTMLElement
-  const [isSticky, setIsSticky] = useState(false)
-
   useSticky({
     target,
     holder: holderRef.current,
     onStickyToogle(sticky, { rawStyle }) {
-      setIsSticky(sticky)
+      isSticky.current = sticky
       if (sticky) {
         const style =
           styleObjectToString({
             zIndex: 4,
             top: `${viewerHeaderStickyHeight}px`,
             position: 'sticky',
-            backgroundColor: 'var(--custom-contexify-menu-bgColor)',
-            backdropFilter: 'blur(100px)',
+            backgroundColor: 'var(--sticky-collapse-header-bgColor)',
+            backdropFilter: 'blur(30px)',
             boxShadow: 'var(--ant-box-shadow)',
           }) || ''
-        target.setAttribute('style', rawStyle + style)
-      } else {
-        target.setAttribute('style', rawStyle)
+        rawStyle += style
       }
+
+      requestAnimationFrame(() => {
+        target.setAttribute('style', rawStyle)
+      })
     },
     topOffset: viewerHeaderStickyHeight,
     enable: !!(activeKeys.length && holderRef.current),
@@ -246,34 +267,36 @@ function ImageCollapse(props: ImageCollapseProps) {
   if (!images?.length && !nestedChildren) return null
 
   return (
-    <Element name={id}>
-      <Collapse
-        /**
-         * 由于图片数量可能很多，如果打开了collapse之后，即使关闭了也会一直渲染
-         * 所以需要在关闭的时候销毁inactive的panel
-         */
-        destroyInactivePanel
-        {...collapseProps}
-        ref={stickyRef}
-        activeKey={activeKeys}
-        onChange={(keys) => onCollapseChange(keys as string[])}
-        items={[
-          {
-            forceRender: !!activeKeys.length,
-            key: id,
-            label: labelRender(generateLabel(labels)),
-            children: images?.length ? (
-              <div className={'space-y-2'}>
-                <ImagePreview ref={holderRef} {...imagePreviewProps} images={images} />
-                {nestedChildren}
-              </div>
-            ) : (
-              nestedChildren
-            ),
-          },
-        ]}
-      ></Collapse>
-    </Element>
+    <div ref={elRef}>
+      <Element name={id}>
+        <Collapse
+          /**
+           * 由于图片数量可能很多，如果打开了collapse之后，即使关闭了也会一直渲染
+           * 所以需要在关闭的时候销毁inactive的panel
+           */
+          destroyInactivePanel
+          {...collapseProps}
+          ref={stickyRef}
+          activeKey={activeKeys}
+          onChange={(keys) => onCollapseChange(keys as string[])}
+          items={[
+            {
+              forceRender: !!activeKeys.length,
+              key: id,
+              label: labelRender(generateLabel(labels)),
+              children: images?.length ? (
+                <div className={'space-y-2'}>
+                  <ImagePreview ref={holderRef} {...imagePreviewProps} images={images} />
+                  {nestedChildren}
+                </div>
+              ) : (
+                nestedChildren
+              ),
+            },
+          ]}
+        ></Collapse>
+      </Element>
+    </div>
   )
 }
 

diff --git a/src/webview/image-manager/components/image-compressor/index.tsx b/src/webview/image-manager/components/image-compressor/index.tsx
@@ -13,10 +13,10 @@ import { abortPromise } from '~/utils/abort-promise'
 import { vscodeApi } from '~/webview/vscode-api'
 import GlobalContext from '../../contexts/global-context'
 import useAbortController from '../../hooks/use-abort-controller'
+import useImageManagerEvent from '../../hooks/use-image-manager-event'
 import useImageOperation from '../../hooks/use-image-operation'
 import useOperatorModalLogic, { type FormComponent } from '../../hooks/use-operator-modal-logic'
 import { ANIMATION_DURATION } from '../../utils/duration'
-import useImageContextMenuEvent from '../context-menus/components/image-context-menu/hooks/use-image-context-menu-event'
 import ImageOperator, { type ImageOperatorProps } from '../image-operator'
 import Format from '../image-operator/components/format'
 import KeepOriginal from '../image-operator/components/keep-original'
@@ -110,7 +110,7 @@ function ImageCompressor(props: ImageCompressorProps) {
     )
   })
 
-  useImageContextMenuEvent({
+  useImageManagerEvent({
     on: {
       reveal_in_viewer: () => {
         onOpenChange(false)

diff --git a/src/webview/image-manager/components/image-converter/index.tsx b/src/webview/image-manager/components/image-converter/index.tsx
@@ -10,9 +10,9 @@ import { useTrackState } from '~/webview/hooks/use-track-state'
 import { vscodeApi } from '~/webview/vscode-api'
 import GlobalContext from '../../contexts/global-context'
 import useAbortController from '../../hooks/use-abort-controller'
+import useImageManagerEvent from '../../hooks/use-image-manager-event'
 import useImageOperation from '../../hooks/use-image-operation'
 import useOperatorModalLogic, { type FormComponent } from '../../hooks/use-operator-modal-logic'
-import useImageContextMenuEvent from '../context-menus/components/image-context-menu/hooks/use-image-context-menu-event'
 import ImageOperator, { type ImageOperatorProps } from '../image-operator'
 import Format from '../image-operator/components/format'
 import KeepOriginal from '../image-operator/components/keep-original'
@@ -84,7 +84,7 @@ function ImageConverter(props: ImageConverterProps) {
     )
   })
 
-  useImageContextMenuEvent({
+  useImageManagerEvent({
     on: {
       reveal_in_viewer: () => {
         onOpenChange(false)

diff --git a/src/webview/image-manager/components/image-preview/index.tsx b/src/webview/image-manager/components/image-preview/index.tsx
@@ -7,9 +7,9 @@ import { produce } from 'immer'
 import { type ForwardedRef, forwardRef, memo, useCallback, useEffect, useId, useRef, useState } from 'react'
 import GlobalContext from '../../contexts/global-context'
 import SettingsContext from '../../contexts/settings-context'
+import useImageManagerEvent from '../../hooks/use-image-manager-event'
 import useImageOperation from '../../hooks/use-image-operation'
 import useImageContextMenu from '../context-menus/components/image-context-menu/hooks/use-image-context-menu'
-import useImageContextMenuEvent from '../context-menus/components/image-context-menu/hooks/use-image-context-menu-event'
 import LazyImage, { type LazyImageProps } from '../lazy-image'
 import Toast from '../toast'
 
@@ -143,7 +143,7 @@ function ImagePreview(props: ImagePreviewProps, ref: ForwardedRef<HTMLDivElement
 
   const id = useId()
 
-  const { imageContextMenuEvent } = useImageContextMenuEvent({
+  const { imageManagerEvent } = useImageManagerEvent({
     on: {
       context_menu(_, _id) {
         // 清除非当前层级的选中
@@ -155,7 +155,7 @@ function ImagePreview(props: ImagePreviewProps, ref: ForwardedRef<HTMLDivElement
   })
 
   const onContextMenu = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>, image: ImageType) => {
-    imageContextMenuEvent.emit('context_menu', image, id)
+    imageManagerEvent.emit('context_menu', image, id)
     let selected = selectedImages
     if (selectedImages.length <= 1 || !selectedImages.includes(image.path)) {
       selected = [image.path]