feat: ✨ 卷轴模式下改用两个按钮来进行缩放

https://sleazyfork.org/zh-CN/scripts/374903/discussions/248969
hymbz · Jun 25, 2024 · 926419d · 926419d
1 parent 61ecdb7
commit 926419d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 27 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -22,7 +22,8 @@
     "scroll_mode": "Scroll mode",
     "setting": "Settings",
     "translate_current_page": "Translate current page",
-    "zoom_in": "Zoom in"
+    "zoom_in": "Zoom in",
+    "zoom_out": "Zoom out"
   },
   "description": "Add enhanced features to the comic site for optimized experience, including dual-page reading and translation.",
   "end_page": {

diff --git a/locales/ru.json b/locales/ru.json
@@ -22,7 +22,8 @@
     "scroll_mode": "Режим прокрутки",
     "setting": "Настройки",
     "translate_current_page": "Перевести текущую страницу",
-    "zoom_in": "Приблизить"
+    "zoom_in": "Приблизить",
+    "zoom_out": "Уменьшить"
   },
   "description": "Добавляет расширенные функции для удобства на сайт, такие как двухстраничный режим и перевод.",
   "end_page": {

diff --git a/locales/zh.json b/locales/zh.json
@@ -22,7 +22,8 @@
     "scroll_mode": "卷轴模式",
     "setting": "设置",
     "translate_current_page": "翻译当前页",
-    "zoom_in": "放大"
+    "zoom_in": "放大",
+    "zoom_out": "缩小"
   },
   "description": "为漫画站增加双页阅读、翻译等优化体验的增强功能。",
   "end_page": {

diff --git a/src/components/Manga/actions/imageSize.ts b/src/components/Manga/actions/imageSize.ts
@@ -23,14 +23,14 @@ const getImgDisplaySize = (state: State, index: number) => {
   width = img.width ?? placeholderSize().width;
 
   if (!state.option.scrollMode.enabled) return { height, width };
-
   if (isAbreastMode()) return setWidth(abreastColumnWidth());
-  if (state.option.scrollMode.fitToWidth || width > state.rootSize.width)
-    return setWidth(state.rootSize.width);
+  if (state.option.scrollMode.fitToWidth) return setWidth(state.rootSize.width);
 
   height *= state.option.scrollMode.imgScale;
   width *= state.option.scrollMode.imgScale;
 
+  if (width > state.rootSize.width) return setWidth(state.rootSize.width);
+
   return { height, width };
 };
 

diff --git a/src/components/Manga/defaultButtonList.tsx b/src/components/Manga/defaultButtonList.tsx
@@ -3,10 +3,11 @@ import MdLooksTwo from '@material-design-icons/svg/round/looks_two.svg';
 import MdViewDay from '@material-design-icons/svg/round/view_day.svg';
 import MdQueue from '@material-design-icons/svg/round/queue.svg';
 import MdSettings from '@material-design-icons/svg/round/settings.svg';
-import MdSearch from '@material-design-icons/svg/round/search.svg';
 import MdTranslate from '@material-design-icons/svg/round/translate.svg';
 import MdGrid from '@material-design-icons/svg/round/grid_4x4.svg';
-import { createMemo, type Component, createSignal } from 'solid-js';
+import MdZoomIn from '@material-design-icons/svg/round/zoom_in.svg';
+import MdZoomOut from '@material-design-icons/svg/round/zoom_out.svg';
+import { createMemo, type Component, createSignal, Show } from 'solid-js';
 import { t } from 'helper/i18n';
 
 import { IconButton } from '../IconButton';
@@ -34,6 +35,21 @@ export const buttonListDivider: Component = () => (
   <div style={{ height: '1em' }} />
 );
 
+const ZoomButton = () => (
+  <IconButton
+    tip={store.zoom.scale === 100 ? t('button.zoom_in') : t('button.zoom_out')}
+    enabled={store.zoom.scale !== 100}
+    onClick={doubleClickZoom}
+    children={
+      <Show
+        when={store.zoom.scale === 100}
+        fallback={<MdZoomOut />}
+        children={<MdZoomIn />}
+      />
+    }
+  />
+);
+
 /** 工具栏的默认按钮列表 */
 export const defaultButtonList: ToolbarButtonList = [
   // 单双页模式
@@ -80,25 +96,20 @@ export const defaultButtonList: ToolbarButtonList = [
   buttonListDivider,
   // 放大模式
   () => (
-    <IconButton
-      tip={t('button.zoom_in')}
-      enabled={
-        store.zoom.scale !== 100 ||
-        (store.option.scrollMode.enabled &&
-          store.option.scrollMode.imgScale > 1)
-      }
-      onClick={() => {
-        if (!store.option.scrollMode.enabled) return doubleClickZoom();
-
-        if (
-          store.option.scrollMode.imgScale >= 1 &&
-          store.option.scrollMode.imgScale < 1.6
-        )
-          return zoomScrollModeImg(0.2);
-        return zoomScrollModeImg(1, true);
-      }}
-      children={<MdSearch />}
-    />
+    <Show when={store.option.scrollMode.enabled} fallback={<ZoomButton />}>
+      <IconButton
+        tip={t('button.zoom_in')}
+        enabled={store.option.scrollMode.imgScale >= 3}
+        onClick={() => zoomScrollModeImg(0.05)}
+        children={<MdZoomIn />}
+      />
+      <IconButton
+        tip={t('button.zoom_out')}
+        enabled={store.option.scrollMode.imgScale <= 0.1}
+        onClick={() => zoomScrollModeImg(-0.05)}
+        children={<MdZoomOut />}
+      />
+    </Show>
   ),
   // 翻译设置
   () => (