diff --git a/src/SettingTab.tsx b/src/SettingTab.tsx index a4b0c16..49a3fde 100644 --- a/src/SettingTab.tsx +++ b/src/SettingTab.tsx @@ -120,6 +120,7 @@ export class SettingTab extends PluginSettingTab { this._initToggleSetting("showViewModeDisplay"); this._initToggleSetting("highlightActionBar"); this._initToggleSetting("autoHideActionBar"); + this._initToggleSetting("autoScrollToCenter"); } initFolderAndFileBehaviorSettings() { diff --git a/src/components/File/Content.tsx b/src/components/File/Content.tsx index 6140f86..debf7c9 100644 --- a/src/components/File/Content.tsx +++ b/src/components/File/Content.tsx @@ -5,7 +5,10 @@ import { useShallow } from "zustand/react/shallow"; import { CLICKABLE_TREE_ITEM_CLASS_NAME } from "src/assets/constants"; import { useExplorer } from "src/hooks/useExplorer"; -import { useShowFileItemDivider } from "src/hooks/useSettingsHandler"; +import { + useAutoScrollToCenter, + useShowFileItemDivider, +} from "src/hooks/useSettingsHandler"; import { FILE_OPERATION_COPY } from "src/locales"; import { ExplorerStore } from "src/store"; import { @@ -65,6 +68,9 @@ const FileContent = ({ file }: FileProps) => { const { showFileItemDivider } = useShowFileItemDivider( settings.showFileItemDivider ); + const { autoScrollToCenter } = useAutoScrollToCenter( + settings.autoScrollToCenter + ); const nameRef = useRef(null); @@ -158,7 +164,7 @@ const FileContent = ({ file }: FileProps) => { return ( { const { plugin } = useExplorer(); + const { settings } = plugin; const { expandNodeByClick } = useExpandNodeByClick( - plugin.settings.expandNodeOnClick + settings.expandNodeOnClick + ); + const { autoScrollToCenter } = useAutoScrollToCenter( + settings.autoScrollToCenter ); const onClickContent = async (e: MouseEvent) => { @@ -58,7 +65,7 @@ const TogglableContainer = ({ return ( diff --git a/src/hooks/useSettingsHandler/index.tsx b/src/hooks/useSettingsHandler/index.tsx index fe68a8c..f9a6cec 100644 --- a/src/hooks/useSettingsHandler/index.tsx +++ b/src/hooks/useSettingsHandler/index.tsx @@ -1,4 +1,5 @@ import { useAutoHideActionBar } from "./useAutoHideActionBar"; +import { useAutoScrollToCenter } from "./useAutoScrollToCenter"; import { useBoldFileTitle } from "./useBoldFileTitle"; import { useDeduplicateTagFiles } from "./useDeduplicateTagFiles"; import { useExpandNodeByClick } from "./useExpandNodeByClick"; @@ -49,5 +50,6 @@ export { useExpandNodeByClick, useDeduplicateTagFiles, useShowViewModeDisplay, - useFilePreviewLinesCount + useFilePreviewLinesCount, + useAutoScrollToCenter, }; diff --git a/src/hooks/useSettingsHandler/useAutoScrollToCenter.tsx b/src/hooks/useSettingsHandler/useAutoScrollToCenter.tsx new file mode 100644 index 0000000..668e838 --- /dev/null +++ b/src/hooks/useSettingsHandler/useAutoScrollToCenter.tsx @@ -0,0 +1,20 @@ +import { useState } from "react"; + +import { useWatchSettingsChange } from "./useWatchSettingsChange"; + +export const useAutoScrollToCenter = ( + defaultAutoScroll: boolean +): { autoScrollToCenter: boolean } => { + const [autoScroll, setAutoScroll] = useState(defaultAutoScroll); + + const onChangeAutoScroll = (event: CustomEvent) => { + const { changeKey, changeValue } = event.detail; + if (changeKey == "autoScrollToCenter") { + setAutoScroll(changeValue); + } + }; + + useWatchSettingsChange(onChangeAutoScroll); + + return { autoScrollToCenter: autoScroll }; +}; diff --git a/src/locales/settings.ts b/src/locales/settings.ts index 0fc9a41..5ac1c10 100644 --- a/src/locales/settings.ts +++ b/src/locales/settings.ts @@ -132,6 +132,16 @@ export const LAYOUT_SETTINGS_COPY: SettingsLocaleResource = { desc: "启用后,顶部操作栏默认隐藏,鼠标悬停时才会显示。", }, }, + autoScrollToCenter: { + en: { + name: "Auto scroll selected item into center", + desc: "When enabled, clicking a folder, tag, or file will automatically scroll the selected item into the center of the view. Disable this to prevent automatic repositioning.", + }, + zh: { + name: "自动滚动到视图中心", + desc: "启用后,在文件夹、标签或文件列表中点击项目时,会自动将该项目滚动到视图中间。关闭此选项可禁止该自动滚动行为。", + }, + }, }; export const FOLDER_AND_TAG_BEHAVIOR_SETTINGS_COPY: SettingsLocaleResource = diff --git a/src/settings.ts b/src/settings.ts index 928402c..f63704f 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -46,6 +46,7 @@ export type LayoutSettings = { showViewModeDisplay: boolean; highlightActionBar: boolean; autoHideActionBar: boolean; + autoScrollToCenter: boolean; }; export type FolderAndTagBehaviorSettings = { showFolderHierarchyLines: boolean; @@ -103,6 +104,7 @@ export const LAYOUT_SETTINGS: LayoutSettings = { showViewModeDisplay: true, highlightActionBar: false, autoHideActionBar: false, + autoScrollToCenter: true, }; export const FOLDER_AND_TAG_BEHAVIOR_SETTINGS: FolderAndTagBehaviorSettings = {