chore: improve pdf preview

toeverything · Oct 28, 2024 · ec799f1 · ec799f1
1 parent 4f97399
commit ec799f1
Show file tree

Hide file tree

Showing 6 changed files with 298 additions and 212 deletions.
diff --git a/packages/frontend/component/src/components/attachment-viewer/styles.css.ts b/packages/frontend/component/src/components/attachment-viewer/styles.css.ts
@@ -103,8 +103,22 @@ export const errorBtns = style({
   marginTop: '28px',
 });
 
-export const viewerPage = style({
+export const mainItemWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   margin: '20px auto',
+  selectors: {
+    '&:first-of-type': {
+      marginTop: 0,
+    },
+    '&:last-of-type': {
+      marginBottom: 0,
+    },
+  },
+});
+
+export const viewerPage = style({
   maxWidth: 'calc(100% - 40px)',
   background: cssVarV2('layer/white'),
   boxSizing: 'border-box',
@@ -148,8 +162,11 @@ export const thumbnailsPages = style({
   },
 });
 
-export const thumbnailsPage = style({
+export const thumbnailsItemWrapper = style({
   margin: '0px 12px 12px',
+});
+
+export const thumbnailsPage = style({
   display: 'flex',
   overflow: 'clip',
   // width: '100%',

diff --git a/packages/frontend/component/src/components/attachment-viewer/utils.ts b/packages/frontend/component/src/components/attachment-viewer/utils.ts
@@ -38,3 +38,31 @@ export async function attachmentUrlToBlob(
   }
   return;
 }
+
+export function renderItem(
+  scroller: HTMLElement | null,
+  id: number,
+  imageBitmap: ImageBitmap
+) {
+  if (!scroller) return;
+
+  const wrapper = scroller.querySelector(`[data-index="${id}"]`);
+  if (!wrapper) return;
+
+  const item = wrapper.firstElementChild;
+  if (!item) return;
+  if (item.firstElementChild) return;
+
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('bitmaprenderer');
+  if (!ctx) return;
+
+  canvas.width = imageBitmap.width;
+  canvas.height = imageBitmap.height;
+  canvas.style.width = '100%';
+  canvas.style.height = '100%';
+
+  ctx.transferFromImageBitmap(imageBitmap);
+
+  item.append(canvas);
+}