feat: add pdf annotation support

packages/blocks/package.json

@@ -54,6 +54,7 @@
  "sortablejs": "^1.15.2",
  "unified": "^11.0.4",
  "webfontloader": "^1.6.28",
+ "y-utility": "^0.1.3",
  "zod": "^3.22.4"
  },
  "exports": {

packages/blocks/src/_common/components/hover/controller.ts

@@ -70,6 +70,12 @@ export class HoverController implements ReactiveController {
  return this._portal;
  }
 
+ /**
+ * HoverController is a controller that creates portal when the refrence element is hovered.
+ * @param host The element that host that portal, usually a LitElement.
+ * @param onHover A function that returns the portal position and portal content when the host is hovered. Called when the reference element is hovered.
+ * @param hoverOptions
+ */
  constructor(
  host: ReactiveControllerHost,
  onHover: (options: OptionsParams) => HoverPortalOptions | null,

packages/blocks/src/_specs/_specs.ts

@@ -29,6 +29,9 @@ import { ParagraphBlockSchema } from '../paragraph-block/paragraph-model.js';
 import { ParagraphService } from '../paragraph-block/paragraph-service.js';
 import { PDFBlockSchema } from '../pdf-block/pdf-model.js';
 import { PDFService } from '../pdf-block/pdf-service.js';
+import { AFFINE_ANNOTATION_PREVIEW_WIDGET } from '../pdf-block/widget/annotation-preview.js';
+import { AFFINE_PDF_ANNOTATION_TOOLBAR_WIDGET } from '../pdf-block/widget/annotation-toolbar.js';
+import { AFFINE_PDF_TOOLBAR_WIDGET } from '../pdf-block/widget/pdf-toolbar.js';
 import { EdgelessRootService } from '../root-block/edgeless/edgeless-root-service.js';
 import {
  type EdgelessRootBlockWidgetName,
@@ -195,6 +198,11 @@ const CommonFirstPartyBlockSpecs: BlockSpec[] = [
  schema: PDFBlockSchema,
  view: {
  component: literal`affine-pdf`,
+ widgets: {
+ [AFFINE_PDF_ANNOTATION_TOOLBAR_WIDGET]: literal`affine-pdf-annotation-toolbar`,
+ [AFFINE_ANNOTATION_PREVIEW_WIDGET]: literal`affine-annotation-preview`,
+ [AFFINE_PDF_TOOLBAR_WIDGET]: literal`affine-pdf-toolbar-widget`,
+ },
  },
  service: PDFService,
  },

packages/blocks/src/pdf-block/pdf-block.ts

@@ -1,16 +1,21 @@
 import { BlockElement } from '@blocksuite/lit';
 import { css, html, nothing } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 
 import {
  FrameNavigatorNextIcon,
  FrameNavigatorPrevIcon,
 } from '../_common/icons/edgeless.js';
-import type { PDFBlockModel } from './pdf-model.js';
+import type { EdgelessPageService } from '../page-block/edgeless/edgeless-page-service.js';
+import type { PageService } from '../page-block/page-service.js';
+import { AnnotationType, type PDFBlockModel } from './pdf-model.js';
 import { PDFService } from './pdf-service.js';
 import { PDFException } from './pdf-service.js';
 
+export type PageChangeEvent = CustomEvent<{ page: number }>;
+
 type PDFStatus =
  | 'loaded'
  | 'module-failed'
@@ -41,13 +46,26 @@ export class PDFBlockComponent extends BlockElement<PDFBlockModel, PDFService> {
 
  .pdf-renderer-container {
  text-align: center;
+ position: relative;
+
+ isolation: isolate;
  }
 
  .pdf-canvas {
  display: block;
  font-size: 1px;
  }
 
+ .pdf-annotation-canvas {
+ display: block;
+
+ position: absolute;
+ left: 0;
+ top: 0;
+
+ opacity: 0.5;
+ }
+
  .pdf-pagination {
  display: none;
 
@@ -61,6 +79,7 @@ export class PDFBlockComponent extends BlockElement<PDFBlockModel, PDFService> {
  color: white;
  font-size: 0.75rem;
  user-select: none;
+ z-index: 3;
  }
 
  .affine-pdf-block:hover .pdf-pagination {
@@ -99,6 +118,56 @@ export class PDFBlockComponent extends BlockElement<PDFBlockModel, PDFService> {
  @query('.pdf-textlayer')
  pdfTextLayer!: HTMLDivElement;
 
+ @query('.pdf-annotation-canvas')
+ pdfAnnotationCanvas!: HTMLCanvasElement;
+
+ @query('.affine-pdf-block')
+ pdfContainer!: HTMLDivElement;
+
+ private _pdfLayerRect: DOMRect | null = null;
+
+ get currentPage() {
+ return this._pdfPageNum;
+ }
+
+ get pageService() {
+ return this.std.spec.getService('affine:page') as
+ | PageService
+ | EdgelessPageService;
+ }
+
+ private async _setupPDF() {
+ if (!this.service.moduleLoaded) return;
+
+ const blob = await this.page.blob.get(this.model.sourceId);
+
+ if (!blob) {
+ this._status = 'file-failed';
+ return;
+ }
+
+ try {
+ const pdfDoc = await this.service.parsePDF(URL.createObjectURL(blob));
+
+ if (!this.isConnected || !this.pdfCanvas) return;
+
+ this._pdfDoc = pdfDoc;
+
+ await this._renderPage(1);
+ } catch (err) {
+ this._status =
+ err instanceof PDFException
+ ? err.type === 'module'
+ ? 'module-failed'
+ : 'file-failed'
+ : 'render-failed';
+
+ console.error(err);
+ } finally {
+ this.isConnected && this.requestUpdate();
+ }
+ }
+
  private async _renderPage(num: number) {
  try {
  const { RENDERING_SCALE } = PDFBlockComponent;
@@ -135,6 +204,7 @@ export class PDFBlockComponent extends BlockElement<PDFBlockModel, PDFService> {
  this.rendererConatiner.append(div);
  textLayer.setTextContentSource(textContent);
  await textLayer.render(textLayerViewport);
+ this._renderAnnotation();
  } catch (e) {
  console.error(e);
  this._status = 'render-failed';
@@ -143,48 +213,107 @@ export class PDFBlockComponent extends BlockElement<PDFBlockModel, PDFService> {
  }
  }
 
- private async _setupPDF() {
- if (!this.service.moduleLoaded) return;
+ private _renderAnnotation() {
+ const annotations = this.model.getAnnotationsByPage(this._pdfPageNum);
+ const { pdfAnnotationCanvas, pdfCanvas } = this;
+ const context = pdfAnnotationCanvas.getContext('2d')!;
 
- const blob = await this.page.blob.get(this.model.sourceId);
+ context.clearRect(
+ 0,
+ 0,
+ pdfAnnotationCanvas.width,
+ pdfAnnotationCanvas.height
+ );
 
- if (!blob) {
- this._status = 'file-failed';
- return;
- }
+ if (!annotations.length) return;
 
- try {
- const pdfDoc = await this.service.parsePDF(URL.createObjectURL(blob));
+ if (pdfAnnotationCanvas.width !== pdfCanvas.width) {
+ pdfAnnotationCanvas.width = pdfCanvas.width;
+ pdfAnnotationCanvas.height = pdfCanvas.height;
+ }
 
- if (!this.isConnected || !this.pdfCanvas) return;
+ pdfAnnotationCanvas.style.width = pdfCanvas.style.width;
+ pdfAnnotationCanvas.style.height = pdfCanvas.style.height;
+
+ const renderingScale =
+ pdfAnnotationCanvas.width /
+ parseInt(pdfAnnotationCanvas.style.width.replace('px', '')) ?? 1;
+ context.fillStyle = 'rgba(255, 255, 0, 1)';
+ context.strokeStyle = 'rgba(0, 0, 255, 1)';
+ context.lineWidth = 2;
+ context.setLineDash([16, 5]);
+
+ annotations.forEach(({ annotation }) => {
+ const rects = annotation.get('highlightRects')?.[this._pdfPageNum] ?? [];
+
+ rects.forEach(([x, y, w, h]) => {
+ if (annotation.get('type') === AnnotationType.Text) {
+ context.fillRect(
+ x * renderingScale,
+ y * renderingScale,
+ w * renderingScale,
+ h * renderingScale
+ );
+ }
 
- this._pdfDoc = pdfDoc;
+ if (annotation.get('type') === AnnotationType.Clip) {
+ context.strokeRect(
+ x * renderingScale,
+ y * renderingScale,
+ w * renderingScale,
+ h * renderingScale
+ );
+ }
+ });
+ });
+ }
 
- await this._renderPage(1);
- } catch (err) {
- this._status =
- err instanceof PDFException
- ? err.type === 'module'
- ? 'module-failed'
- : 'file-failed'
- : 'render-failed';
+ private _setPage(num: number) {
+ if (num < 1 || num > this._pdfDoc.numPages) return;
 
- console.error(err);
- } finally {
- this.isConnected && this.requestUpdate();
- }
+ this._pdfPageNum = num;
+ this._renderPage(num).catch(() => {});
+ this.dispatchEvent(
+ new CustomEvent('pagechange', {
+ detail: {
+ page: num,
+ },
+ })
+ );
  }
 
  private _prev() {
  if (this._pdfPageNum === 1) return;
 
- this._renderPage(--this._pdfPageNum).catch(() => {});
+ this._setPage(this._pdfPageNum - 1);
  }
 
  private _next() {
  if (this._pdfPageNum === this._pdfDoc.numPages) return;
 
- this._renderPage(++this._pdfPageNum).catch(() => {});
+ this._setPage(this._pdfPageNum + 1);
+ }
+
+ toPDFCoords(x: number, y: number) {
+ this._pdfLayerRect = this.pdfCanvas.getBoundingClientRect();
+
+ if ('viewport' in this.pageService) {
+ const zoom = this.pageService.viewport.zoom;
+
+ return {
+ x: (x - this._pdfLayerRect.x) / zoom,
+ y: (y - this._pdfLayerRect.y) / zoom,
+ };
+ }
+
+ return {
+ x: x - this._pdfLayerRect.x,
+ y: y - this._pdfLayerRect.y,
+ };
+ }
+
+ enableTextSelection(enable: boolean) {
+ this.pdfTextLayer.style.pointerEvents = enable ? 'auto' : 'none';
  }
 
  override connectedCallback() {
@@ -199,6 +328,11 @@ export class PDFBlockComponent extends BlockElement<PDFBlockModel, PDFService> {
  }
  })
  );
+ this._disposables.add(
+ this.model.annotationUpdated.on(() => {
+ this._renderAnnotation();
+ })
+ );
  }
 
  override firstUpdated() {
@@ -218,6 +352,12 @@ export class PDFBlockComponent extends BlockElement<PDFBlockModel, PDFService> {
  return html`<div class="affine-pdf-block">PDF module is not loaded</div>`;
  }
 
+ const widgets = html`${repeat(
+ Object.entries(this.widgets),
+ ([id]) => id,
+ ([_, widget]) => widget
+ )}`;
+
  switch (this._status) {
  case 'module-failed':
  case 'file-failed':
@@ -230,6 +370,7 @@ export class PDFBlockComponent extends BlockElement<PDFBlockModel, PDFService> {
  return html`<div class="affine-pdf-block">
  <div class="pdf-renderer-container">
  <canvas class="pdf-canvas"></canvas>
+ <canvas class="pdf-annotation-canvas"></canvas>
  </div>
  ${this._pdfDoc
  ? html`<div class="pdf-pagination">
@@ -242,6 +383,7 @@ export class PDFBlockComponent extends BlockElement<PDFBlockModel, PDFService> {
  </button>
  </div>`
  : nothing}
+ ${widgets}
  </div>`;
  }
 }