fix: 🐛 修复放大功能异常

#173
hymbz · Jul 25, 2024 · b0a98e7 · b0a98e7
1 parent 8e60744
commit b0a98e7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 28 deletions.
diff --git a/src/components/Manga/actions/zoom.ts b/src/components/Manga/actions/zoom.ts
@@ -11,8 +11,8 @@ export const touches = new Map<number, PointerState>();
 
 const scale = () => store.zoom.scale / 100;
 
-const width = () => refs.mangaFlow?.clientWidth ?? 0;
-const height = () => refs.mangaFlow?.clientHeight ?? 0;
+const width = () => refs.mangaBox?.clientWidth ?? 0;
+const height = () => refs.mangaBox?.clientHeight ?? 0;
 
 export const bound = createRoot(() => {
   const x = createMemo(() => -width() * (scale() - 1));
@@ -35,7 +35,7 @@ export const zoom = (
   if (newScale === store.zoom.scale) return;
 
   // 消除放大导致的偏移
-  const { left, top } = refs.mangaFlow.getBoundingClientRect();
+  const { left, top } = refs.mangaBox.getBoundingClientRect();
   const x = (focal?.x ?? width() / 2) - left;
   const y = (focal?.y ?? height() / 2) - top;
 

diff --git a/src/components/Manga/components/ComicImg.module.css b/src/components/Manga/components/ComicImg.module.css
@@ -71,6 +71,7 @@
 }
 
 .mangaBox {
+  transform-origin: 0 0;
   contain: layout style;
   width: 100%;
   height: 100%;
@@ -132,8 +133,6 @@
 }
 
 .root[data-grid-mode] .mangaFlow {
-  transform: none;
-
   overflow: auto;
   grid-auto-columns: unset;
   grid-auto-flow: row;
@@ -146,11 +145,7 @@
 
   & .img {
     cursor: pointer;
-
-    transform: none;
-
     overflow: unset;
-
     width: inherit;
     height: auto;
 

diff --git a/src/components/Manga/components/ComicImgFlow.tsx b/src/components/Manga/components/ComicImgFlow.tsx
@@ -1,6 +1,6 @@
 import { type Component, Show, createMemo, onMount, Index } from 'solid-js';
 import { boolDataVal, createSequence } from 'helper';
-import { createEffectOn, createMemoMap } from 'helper/solidJs';
+import { createEffectOn } from 'helper/solidJs';
 
 import { refs, setState, store } from '../store';
 import { useHiddenMouse } from '../hooks/useHiddenMouse';
@@ -125,25 +125,29 @@ export const ComicImgFlow: Component = () => {
           .join(' ')}"`;
   });
 
-  const transform = createMemoMap({
-    x() {
-      if (store.gridMode || isScrollMode()) return 0;
-      let x =
-        store.page.offset.x.pct * store.rootSize.width + store.page.offset.x.px;
-      if (store.option.dir !== 'rtl') x = -x;
-      return x + store.zoom.offset.x;
-    },
-    y: () =>
-      store.page.offset.y.pct * store.rootSize.height +
-      store.page.offset.y.px +
-      store.zoom.offset.y,
-    scale: () => store.zoom.scale / 100,
+  useStyleMemo(`.${classes.mangaBox}`, {
+    transform: () =>
+      `translate(${store.zoom.offset.x}px, ${store.zoom.offset.y}px)
+        scale(${store.zoom.scale / 100})`,
+  });
+
+  const pageX = createMemo(() => {
+    if (store.gridMode || isScrollMode()) return 0;
+    let x =
+      store.page.offset.x.pct * store.rootSize.width + store.page.offset.x.px;
+    if (store.option.dir !== 'rtl') x = -x;
+    return x;
   });
 
   useStyleMemo(`#${classes.mangaFlow}`, {
-    transform:
-      () => `translate(${transform().x}px, ${transform().y}px) scale(${transform().scale})
-    translateZ(0)`,
+    '--zoom-x': () => `${store.zoom.offset.x}px`,
+    '--zoom-y': () => `${store.zoom.offset.y}px`,
+    '--root-w': () => `${store.rootSize.width}px`,
+    transform: () =>
+      `translate(
+        ${pageX()}px,
+        ${store.page.offset.y.pct * store.rootSize.height + store.page.offset.y.px}px
+      ) translateZ(0)`,
     'touch-action'() {
       if (store.gridMode) return 'auto';
       if (store.zoom.scale !== 100) {

diff --git a/src/components/Manga/store/index.ts b/src/components/Manga/store/index.ts
@@ -14,8 +14,8 @@ export const { store, setState, _state, _setState } = useStore({
   ...OtherState,
 });
 
-// (window?.unsafeWindow ?? window).store = store;
-// (window?.unsafeWindow ?? window)._setState = _setState;
+if (isDevMode)
+  Object.assign((window as any).unsafeWindow ?? window, { store, _setState });
 
 export type State = typeof _state;