chore: improve pdf preview

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',
@@ -116,12 +130,15 @@ export const viewerPage = style({
 });
 
 export const thumbnails = style({
+  display: 'flex',
+  flexDirection: 'column',
   position: 'absolute',
   boxSizing: 'border-box',
   width: '120px',
   padding: '12px 0',
   right: '30px',
   bottom: '30px',
+  maxHeight: 'calc(100% - 60px)',
   borderRadius: '8px',
   borderWidth: '1px',
   borderStyle: 'solid',
@@ -135,8 +152,11 @@ export const thumbnails = style({
 });
 
 export const thumbnailsPages = style({
+  position: 'relative',
   display: 'flex',
   flexDirection: 'column',
+  maxHeight: '100%',
+  overflow: 'hidden',
   // gap: '12px',
   selectors: {
     '&.collapsed': {
@@ -148,8 +168,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%',

packages/frontend/component/src/components/attachment-viewer/titlebar.tsx

@@ -1,6 +1,6 @@
 import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';
 import {
-  EditIcon,
+  //EditIcon,
   LocalDataIcon,
   MoreHorizontalIcon,
   ZoomDownIcon,
@@ -12,22 +12,20 @@ import { useState } from 'react';
 import { IconButton } from '../../ui/button';
 import { Menu, MenuItem } from '../../ui/menu';
 import * as styles from './styles.css';
-import { saveBufferToFile } from './utils';
+import { download } from './utils';
 
 const items = [
+  /*
   {
     name: 'Rename',
     icon: <EditIcon />,
     action(_model: AttachmentBlockModel) {},
   },
+  */
   {
     name: 'Download',
     icon: <LocalDataIcon />,
-    action(model: AttachmentBlockModel) {
-      const { sourceId, name } = model;
-      if (!sourceId) return;
-      saveBufferToFile(sourceId, name).catch(console.error);
-    },
+    action: download,
   },
 ];
 
@@ -53,7 +51,7 @@ export const Titlebar = ({
   ext,
   size,
   zoom = 100,
-  isPDF = false,
+  //isPDF = false,
 }: TitlebarProps) => {
   const [openMenu, setOpenMenu] = useState(false);
 
@@ -65,7 +63,10 @@ export const Titlebar = ({
           <span>.{ext}</span>
         </div>
         <div>{size}</div>
-        <IconButton icon={<LocalDataIcon />}></IconButton>
+        <IconButton
+          icon={<LocalDataIcon />}
+          onClick={() => download(model)}
+        ></IconButton>
         <Menu
           items={<MenuItems model={model} />}
           rootOptions={{
@@ -86,7 +87,8 @@ export const Titlebar = ({
           styles.titlebarChild,
           'zoom',
           {
-            show: isPDF,
+            // show: isPDF,
+            show: false,
           },
         ])}
       >

packages/frontend/component/src/components/attachment-viewer/utils.ts

@@ -1,40 +1,63 @@
-import { fileTypeFromBuffer } from 'file-type';
+import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';
 
-export async function saveBufferToFile(url: string, filename: string) {
-  // given input url may not have correct mime type
-  const blob = await attachmentUrlToBlob(url);
-  if (!blob) {
-    return;
+export async function getAttachmentBlob(model: AttachmentBlockModel) {
+  const sourceId = model.sourceId;
+  if (!sourceId) {
+    return null;
   }
 
-  const blobUrl = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = blobUrl;
-  a.download = filename;
-  document.body.append(a);
-  a.click();
-  a.remove();
-  URL.revokeObjectURL(blobUrl);
-}
-
-export async function attachmentUrlToBlob(
-  url: string
-): Promise<Blob | undefined> {
-  const buffer = await fetch(url).then(response => response.arrayBuffer());
+  const doc = model.doc;
+  let blob = await doc.blobSync.get(sourceId);
 
-  if (!buffer) {
-    console.warn('Could not get blob');
-    return;
+  if (blob) {
+    blob = new Blob([blob], { type: model.type });
   }
-  try {
-    const type = await fileTypeFromBuffer(buffer);
-    if (!type) {
+
+  return blob;
+}
+
+export function download(model: AttachmentBlockModel) {
+  (async () => {
+    const blob = await getAttachmentBlob(model);
+    if (!blob) {
       return;
     }
-    const blob = new Blob([buffer], { type: type.mime });
-    return blob;
-  } catch (error) {
-    console.error('Error converting attachment to blob', error);
-  }
-  return;
+
+    const blobUrl = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = blobUrl;
+    a.download = model.name;
+    document.body.append(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(blobUrl);
+  })().catch(console.error);
+}
+
+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);
 }