refactor(monkey): simplify newPage structure and add throttle utility

Author: Arylo

src/monkey/copymanga-enhance/scripts/detail/newPage/component/App/style.css

@@ -1,7 +1,6 @@
 :root {
   --header-height: 30px;
   --body-height: calc(100dvh - var(--header-height));
-  --image-group-padding: calc(var(--body-height) / 6 * 5);
 }
 
 #app {

src/monkey/copymanga-enhance/scripts/detail/newPage/component/AppBody/index.ts

@@ -2,15 +2,11 @@ import GM_addStyle from "../../../../../../polyfill/GM_addStyle";
 import cc from 'classcat'
 import { ACTION_GRID_MAP, DirectionMode } from "../../constant";
 import useDirectionMode from "../../hooks/useDirectionMode";
-import { defineComponent, onMounted, unref, h, ref, watch } from "../../vue";
+import { defineComponent, onMounted, unref, h } from "../../vue";
 import css from './style.css'
+import WhitePage from '../WhitePage';
 import useMouseGrid from "../../hooks/useMouseGrid";
-import ImageGroup from "../ImageGroup";
-import useTtbColumn from "../../hooks/useTtbColumn";
 import useImageList from "../../hooks/useImageList";
-import useImageWidth from "../../hooks/useImageWidth";
-import debounce from "../../../../utils/debounce";
-import { useWindowSize } from "../../hooks/useWindowSize";
 
 export default defineComponent({
   setup () {
@@ -20,31 +16,6 @@ export default defineComponent({
     const [imagesRef] = useImageList()
     const [directionModeRef] = useDirectionMode()
     const [mouseGridRef] = useMouseGrid()
-    const [imageWidthRef] = useImageWidth()
-    const [ttbColumnRef] = useTtbColumn()
-    const { width: windowWidthRef } = useWindowSize()
-
-    const imageGroupHeightRef = ref(0)
-    const imageGroupRef = ref<InstanceType<typeof ImageGroup> | null>(null)
-    const refreshImageGroupHeight = debounce(() => {
-      const list = Array.from<HTMLElement>(unref(imageGroupRef)?.$el.children ?? [])
-      const height = list.reduce((acc, child) => acc + child.clientHeight, 0)
-      imageGroupHeightRef.value = height
-    }, 50)
-    watch(
-      [
-        imagesRef,
-        directionModeRef,
-        ttbColumnRef,
-        imageGroupRef,
-        imageWidthRef,
-        windowWidthRef,
-      ], () => {
-        if (DirectionMode.TTB !== unref(directionModeRef)) return
-        refreshImageGroupHeight()
-      }
-    )
-
     return () => h(
       'div',
       {
@@ -60,60 +31,26 @@ export default defineComponent({
           {
             class: cc([
               'direction-wrapper',
-              'max-h-(--body-height)',
-              'flex flex-row flex-wrap',
-              'overflow-x-hidden overflow-y-auto',
+              'w-dvw',
+              'flex flex-wrap justify-center',
+              'snap-mandatory ltr:snap-y rtl:snap-y',
             ]),
           },
-          [
-            h(
-              ImageGroup,
-              {
-                class: cc([
-                  'ltr:hidden rtl:hidden',
-                  'overflow-hidden',
-                  {
-                    'hidden': unref(ttbColumnRef) === 1 || unref(ttbColumnRef) === 2,
-                    'basic-[33%]': unref(ttbColumnRef) === 3,
-                  }
-                ]),
-                images: unref(imagesRef),
-                style: `height: ${unref(imageGroupHeightRef)}px`,
-              },
-            ),
-            h(
-              ImageGroup,
-              {
-                class: cc([
-                  'ltr:hidden rtl:hidden',
-                  'overflow-hidden',
-                  {
-                    'hidden': unref(ttbColumnRef) === 1,
-                    'basic-[50%]': unref(ttbColumnRef) === 2,
-                    'basic-[33%]': unref(ttbColumnRef) === 3,
-                  },
-                ]),
-                images: unref(imagesRef),
-                style: `height: ${unref(imageGroupHeightRef)}px`,
-              },
-            ),
-            h(
-              ImageGroup,
+          unref(imagesRef)
+            .map(({ component, props }) => h(
+              'div',
               {
                 class: cc([
-                  {
-                    'w-dvw': DirectionMode.TTB !== unref(directionModeRef),
-                    'flex': unref(ttbColumnRef) === 1,
-                    'basic-[50%]': DirectionMode.TTB === unref(directionModeRef) && unref(ttbColumnRef) === 2,
-                    'basic-[33%]': DirectionMode.TTB === unref(directionModeRef) && unref(ttbColumnRef) === 3,
-                  },
+                  'wrapper',
+                  'ltr:h-(--body-height) rtl:h-(--body-height)',
+                  'ltr:snap-center rtl:snap-center',
+                  'flex',
+                  { 'hidden': unref(directionModeRef) === DirectionMode.TTB && component === WhitePage },
                 ]),
-                images: unref(imagesRef),
-                ref: imageGroupRef,
+                ...Object.fromEntries(Object.entries(props).filter(([k]) => k.startsWith('data-')))
               },
-            ),
-          ],
-        )
+              [h(component, { ...props })],
+            ))),
       ],
     )
   },

src/monkey/copymanga-enhance/scripts/detail/newPage/component/AppBody/style.css

@@ -1,11 +1,11 @@
-.direction-wrapper > *:nth-child(1) {
-  --image-group-padding-1: calc(var(--image-group-padding) * 2);
-  padding-top: var(--image-group-padding-1);
+.direction-wrapper {
+  max-height: var(--body-height);
+  overflow-y: scroll;
 }
 
-.direction-wrapper > *:nth-child(2) {
-  --image-group-padding-2: calc(var(--image-group-padding) * 1);
-  padding-top: var(--image-group-padding-2);
+.wrapper {
+  flex-basis: 100%;
+  justify-content: center;
 }
 
 /* #region 单列时 */

src/monkey/copymanga-enhance/scripts/detail/newPage/component/AppHeader/index.ts

@@ -9,7 +9,6 @@ import useWhitePage from "../../hooks/useWhitePage";
 import { defineComponent, onMounted, unref, computed, h, Fragment } from "../../vue";
 import css from './style.css'
 import useImageWidth from "../../hooks/useImageWidth";
-import useTtbColumn from "../../hooks/useTtbColumn";
 
 const ImageWidths = [
   100, 90, 80, 70, 60, 50, 40, 30, 20,
@@ -40,27 +39,6 @@ export default defineComponent({
 
     const [directionModeRef, setDirectionMode] = useDirectionMode()
     const [imageWidthRef, setImageWidth] = useImageWidth()
-    const [ttbColumnRef, setTtbColumn] = useTtbColumn()
-    const toggleTtbColumn = () => {
-      const imageWidth = unref(imageWidthRef)
-      const ttbColumn = unref(ttbColumnRef)
-      if (ttbColumn === 1) {
-        setTtbColumn(2)
-        if (ImageWidths.indexOf(imageWidth) !== ImageWidths.length - 1) {
-          setImageWidth(ImageWidths[ImageWidths.indexOf(imageWidth) + 1])
-        }
-      } else if (ttbColumn === 2) {
-        setTtbColumn(3)
-        if (ImageWidths.indexOf(imageWidth) !== ImageWidths.length - 1) {
-          setImageWidth(ImageWidths[ImageWidths.indexOf(imageWidth) + 1])
-        }
-      } else {
-        setTtbColumn(1)
-        if (ImageWidths.indexOf(imageWidth) - 2 >= 0) {
-          setImageWidth(ImageWidths[ImageWidths.indexOf(imageWidth) - 2])
-        }
-      }
-    }
 
     return () => h('div',
       {
@@ -135,9 +113,6 @@ export default defineComponent({
                 return h('option', { value: v, selected: unref(imageWidthRef) === v }, `${v}%`)
               })) :
               h(Fragment),
-            [DirectionMode.TTB].includes(unref(directionModeRef)) ?
-              h('div', { class: 'text-white cursor-pointer', onClick: () => toggleTtbColumn() }, unref(ttbColumnRef) === 1 ? '默认模式' : unref(ttbColumnRef) === 2 ? '提前预览' : '超前预览') :
-              h(Fragment),
           ],
         ),
       ],

src/monkey/copymanga-enhance/scripts/detail/newPage/component/ImageGroup/index.ts

@@ -1,8 +1,23 @@
-import { defineComponent } from "../../vue";
+import cc from "classcat";
+import { defineComponent, h } from "../../vue";
 
 export default defineComponent({
-  setup () {
-    return {}
+  props: {
+    class: {
+      type: String,
+      default: () => undefined,
+    },
+  },
+  setup (props) {
+    return () => h(
+      'div',
+      {
+        ...props,
+        class: cc([
+          'white-page portrait size-px',
+          props.class,
+        ]),
+      },
+    )
   },
-  template: '<div class="white-page portrait size-px ttb:hidden"></div>',
 })

src/monkey/copymanga-enhance/scripts/detail/newPage/component/WhitePage/index.ts

@@ -1,26 +1,29 @@
 import flow from "../../../../../utils/flow"
-import { ImageItem } from "../component/ImageGroup"
-import WhitePage from "../component/WhitePage"
+import WhitePage from '../component/WhitePage'
 import { DirectionMode, PageType } from "../constant"
-import { onMounted, readonly, ref, unref, watch } from "../vue"
+import { defineComponent, onMounted, readonly, ref, unref, watch } from "../vue"
 import useDirectionMode from "./useDirectionMode"
 import useImageInfoMap from "./useImageInfoMap"
 import useRawImageList from "./useRawImageList"
 import useWhitePage from "./useWhitePage"
 import Image from "../component/Image"
 
+type ImageItem = {
+  component: ReturnType<typeof defineComponent> | string;
+  props: { key: string; pageType: PageType; } & Record<string, any>;
+}
+
 export default function useImageList () {
-  const imageListRef = useRawImageList()
+  const rawImageListRef = useRawImageList()
   const infoMapRef = useImageInfoMap()
   const [whitePageRef] = useWhitePage()
   const [directionModeRef] = useDirectionMode()
-
   onMounted(() => refresh())
   watch(
     [
       whitePageRef,
       directionModeRef,
-      imageListRef,
+      rawImageListRef,
       infoMapRef,
     ],
     () => refresh()
@@ -141,11 +144,10 @@ export default function useImageList () {
       })
     })
   }
-
   const imagesRef = ref<ImageItem[]>([])
   function refresh () {
     const list = flow(
-      unref(imageListRef),
+      unref(rawImageListRef),
       parseImages,
       addFirstWhitePage,
       injectWhitePages,
@@ -154,5 +156,5 @@ export default function useImageList () {
     imagesRef.value = list
   }
 
-  return [readonly(imagesRef)] as const
+  return [readonly(imagesRef), refresh] as const
 }

src/monkey/copymanga-enhance/scripts/detail/newPage/hooks/useImageList.ts

@@ -1,3 +1,4 @@
+import throttle from "../../../utils/throttle";
 import { ACTION_GRID_MAP, GRID_COLUMN, GRID_ROW } from "../constant";
 import { onMounted, unref } from "../vue";
 import useMouseGrid from "./useMouseGrid";
@@ -22,12 +23,12 @@ export default function useMouseWatcher () {
       return row * COUNT_COLUMN + col + 1
     }
 
-    const handleGridMove = (info: { x: number, y: number }) => {
+    const handleGridMove = throttle((info: { x: number, y: number }) => {
       const gridIndex = getGridIndex(info.x, info.y)
       const currentGridIndex = unref(mouseGridRef)
       if (gridIndex === currentGridIndex) return
       setMouseGrid(gridIndex)
-    }
+    }, 25)
 
     const handleGridClick = (info: { x: number, y: number }) => {
       const gridIndex = getGridIndex(info.x, info.y)