refactor: pdf viewer using op and service

packages/common/infra/package.json

@@ -8,6 +8,7 @@
     "./storage": "./src/storage/index.ts",
     "./utils": "./src/utils/index.ts",
     "./app-config-storage": "./src/app-config-storage.ts",
+    "./op": "./src/op/index.ts",
     ".": "./src/index.ts"
   },
   "dependencies": {

packages/common/infra/src/op/README.md

@@ -124,10 +124,10 @@ const client = new OpClient(channel);
 client.listen();
 ```
 
-### MessagePort
+### MessageChannel
 
 ```ts
-const { port1, port2 } = new MessagePort();
+const { port1, port2 } = new MessageChannel();
 
 const client = new OpClient(port1);
 const consumer = new OpConsumer(port2);

packages/common/infra/src/op/client.ts

@@ -22,7 +22,7 @@ interface PendingCall extends PromiseWithResolvers<any> {
   timeout: number | NodeJS.Timeout;
 }
 
-interface OpClientOptions {
+export interface OpClientOptions {
   timeout?: number;
 }
 

packages/common/infra/src/op/message.ts

@@ -95,6 +95,7 @@ export type MessageCommunicapable = Pick<
 > & {
   start?(): void;
   close?(): void;
+  terminate?(): void; // For Worker
 };
 
 export function ignoreUnknownEvent(handler: (data: Messages) => void) {
@@ -150,6 +151,7 @@ export abstract class AutoMessageHandler {
 
   close() {
     this.port.close?.();
+    this.port.terminate?.(); // For Worker
     this.port.removeEventListener('message', this.handleMessage);
   }
 }

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

@@ -1,3 +1,4 @@
+import type { RenderOut } from '@affine/core/modules/pdf/workers/types';
 import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';
 import { filesize } from 'filesize';
 
@@ -29,19 +30,18 @@ export async function download(model: AttachmentBlockModel) {
 export function renderItem(
   scroller: HTMLElement | null,
   className: string,
-  id: number,
-  width: number,
-  height: number,
-  buffer: Uint8ClampedArray
+  data: RenderOut
 ) {
   if (!scroller) return;
 
   const item = scroller.querySelector(
-    `[data-index="${id}"] > div.${className}`
+    `[data-index="${data.index}"] > div.${className}`
   );
   if (!item) return;
   if (item.firstElementChild) return;
 
+  const { width, height, buffer } = data;
+
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   if (!ctx) return;
@@ -67,6 +67,13 @@ export function buildAttachmentProps(model: AttachmentBlockModel) {
   return { model, name, ext, size, isPDF };
 }
 
+/**
+ * Generates a set of sequences.
+ *
+ * 1. when `start` is `0`, returns `[0, .., 5]`
+ * 2. when `end` is `total - 1`, returns `[total - 1, .., total - 5]`
+ * 2. when `start > 0` and `end < total - 1`, returns `[18, 17, 19, 16, 20, 15, 21]`
+ */
 export function genSeq(start: number, end: number, total: number) {
   start = Math.max(start, 0);
   end = Math.min(end, Math.max(total - 1, 0));