layout: fix hardcoded image layout in fixed layout documents (#1660)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -14,6 +14,7 @@ import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useProgressAutoSave } from '../hooks/useProgressAutoSave';
 import {
+  applyFixedlayoutStyles,
   applyImageStyle,
   applyTranslationStyle,
   getStyles,
@@ -134,6 +135,10 @@ const FoliateViewer: React.FC<{
 
       mountAdditionalFonts(detail.doc, isCJKLang(bookData.book?.primaryLanguage));
 
+      if (bookDoc.rendition?.layout === 'pre-paginated') {
+        applyFixedlayoutStyles(detail.doc);
+      }
+
       applyImageStyle(detail.doc);
 
       // Inline scripts in tauri platforms are not executed by default

apps/readest-app/src/app/reader/components/notebook/Notebook.tsx

@@ -216,7 +216,7 @@ const Notebook: React.FC = ({}) => {
           }
         `}</style>
         <div
-          className='drag-bar absolute left-0 top-0 -m-3 h-full w-0.5 cursor-col-resize p-3'
+          className='drag-bar absolute left-0 top-0 -m-2 h-full w-0.5 cursor-col-resize bg-transparent p-2'
           onMouseDown={handleDragStart}
           onTouchStart={handleDragStart}
         />

apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx

@@ -259,7 +259,7 @@ const SideBar: React.FC<{
         )}
         <div
           className={clsx(
-            'drag-bar absolute -right-1 top-0 -m-1 h-full w-0.5 cursor-col-resize p-1',
+            'drag-bar absolute right-0 top-0 -m-2 h-full w-0.5 cursor-col-resize bg-transparent p-2',
             isMobile && 'hidden',
           )}
           onMouseDown={handleHorizontalDragStart}

apps/readest-app/src/libs/document.ts

@@ -83,6 +83,10 @@ export type BookMetadata = {
 
 export interface BookDoc {
   metadata: BookMetadata;
+  rendition?: {
+    layout?: 'pre-paginated' | 'reflowable';
+    viewport?: { width: number; height: number };
+  };
   dir: string;
   toc?: Array<TOCItem>;
   sections?: Array<SectionItem>;

apps/readest-app/src/utils/style.ts

@@ -538,3 +538,21 @@ export const applyImageStyle = (document: Document) => {
     }
   });
 };
+
+export const applyFixedlayoutStyles = (document: Document) => {
+  const style = document.createElement('style');
+  style.textContent = `
+    html, body {
+      overflow: hidden;
+      height: 100%;
+      width: 100%;
+    }
+    body {
+      position: relative;
+    }
+    img.singlePage {
+      position: relative;
+    }
+  `;
+  document.head.appendChild(style);
+};