snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

blocksuite/affine/blocks/surface/src/__tests__/a-star.unit.spec.ts

@@ -0,0 +1,114 @@
+import type { IVec, IVec3 } from '@blocksuite/global/gfx';
+import { almostEqual } from '@blocksuite/global/gfx';
+import { describe, expect, it } from 'vitest';
+
+import { AStarRunner } from '../utils/a-star.js';
+
+function mergePath(points: IVec3[]) {
+  if (points.length === 0) return points;
+  const rst: IVec3[] = [points[0]];
+  for (let i = 1; i < points.length - 1; i++) {
+    const cur = points[i];
+    const last = points[i - 1];
+    const next = points[i + 1];
+    if (
+      almostEqual(last[0], cur[0], 0.02) &&
+      almostEqual(cur[0], next[0], 0.02)
+    )
+      continue;
+    if (
+      almostEqual(last[1], cur[1], 0.02) &&
+      almostEqual(cur[1], next[1], 0.02)
+    )
+      continue;
+    rst.push(cur);
+  }
+  rst.push(points[points.length - 1]);
+  return rst;
+}
+
+describe('a* algorithm', () => {
+  /**
+   * 0 ----------------
+   *                  |
+   *                  |
+   *                  ------------------- 0
+   */
+  it('width is greater than height', () => {
+    const sp: IVec3 = [0, 0, 0];
+    const ep: IVec3 = [200, 100, 0];
+    const osp: IVec3 = [-1, 0, 0];
+    const oep: IVec3 = [201, 100, 0];
+    const points: IVec3[] = [
+      sp,
+      ep,
+      [100, 0, 0],
+      [200, 0, 0],
+      [0, 50, 0],
+      [100, 50, 3],
+      [200, 50, 0],
+      [0, 100, 0],
+      [100, 100, 0],
+    ] as IVec3[];
+    const aStar = new AStarRunner(points, sp, ep, osp, oep);
+    aStar.run();
+    let path: IVec[] | IVec3[] = aStar.path;
+    path.pop();
+    path.shift();
+    path = mergePath(path as IVec3[]);
+    const expected = [
+      [0, 0],
+      [100, 0],
+      [100, 100],
+      [200, 100],
+    ];
+    path.forEach((p, i) => {
+      expect(p[0]).toBe(expected[i][0]);
+      expect(p[1]).toBe(expected[i][1]);
+    });
+  });
+  /**
+   * 0
+   * |
+   * |
+   * |
+   * |----|
+   *      |
+   *      |
+   *      |
+   *      0
+   */
+  it('height is greater than width', () => {
+    const sp: IVec3 = [0, 0, 0];
+    const ep: IVec3 = [100, 200, 0];
+    const osp: IVec3 = [0, -1, 0];
+    const oep: IVec3 = [100, 201, 0];
+    const points: IVec3[] = [
+      sp,
+      [50, 0, 0],
+      [100, 0, 0],
+      [0, 100, 0],
+      [50, 100, 3],
+      [100, 100, 0],
+      [0, 200, 0],
+      [50, 200, 0],
+      ep,
+    ];
+    const aStar = new AStarRunner(points, sp, ep, osp, oep);
+    aStar.run();
+    let path = aStar.path;
+    path.pop();
+    path.shift();
+    path = mergePath(path);
+    const expected = [
+      [0, 0],
+      [0, 100],
+      [100, 100],
+      [100, 200],
+    ];
+    path.forEach((p, i) => {
+      expect(p[0]).toBe(expected[i][0]);
+      expect(p[1]).toBe(expected[i][1]);
+    });
+  });
+});

blocksuite/affine/blocks/surface/src/__tests__/bound.unit.spec.ts

@@ -0,0 +1,180 @@
+import {
+  Bound,
+  getCommonBound,
+  inflateBound,
+  transformPointsToNewBound,
+} from '@blocksuite/global/gfx';
+import { describe, expect, it } from 'vitest';
+
+describe('bound utils', () => {
+  it('Bound basic', () => {
+    const bound = new Bound(1, 1, 2, 2);
+    const serialized = bound.serialize();
+    expect(serialized).toBe('[1,1,2,2]');
+    expect(Bound.deserialize(serialized)).toMatchObject(bound);
+    expect(bound.center).toMatchObject([2, 2]);
+    expect(bound.minX).toBe(1);
+    expect(bound.minY).toBe(1);
+    expect(bound.maxX).toBe(3);
+    expect(bound.maxY).toBe(3);
+    expect(bound.tl).toMatchObject([1, 1]);
+    expect(bound.tr).toMatchObject([3, 1]);
+    expect(bound.bl).toMatchObject([1, 3]);
+    expect(bound.br).toMatchObject([3, 3]);
+  });
+
+  it('from', () => {
+    const b1 = new Bound(1, 1, 2, 2);
+    const b2 = Bound.from(b1);
+    expect(b1).toMatchObject(b2);
+  });
+
+  it('getCommonBound basic', () => {
+    const bounds = Array.from({ length: 10 })
+      .fill(0)
+      .map((_, index) => {
+        return {
+          x: index,
+          y: index,
+          w: 1,
+          h: 1,
+        };
+      });
+    expect(getCommonBound(bounds)).toMatchObject({
+      x: 0,
+      y: 0,
+      w: 10,
+      h: 10,
+    });
+  });
+
+  it('getCommonBound parameters length equal to 0', () => {
+    expect(getCommonBound([])).toBeNull();
+  });
+
+  it('getCommonBound parameters length less than 2', () => {
+    const b1 = {
+      x: 0,
+      y: 0,
+      w: 1,
+      h: 1,
+    };
+    expect(getCommonBound([b1])).toMatchObject(b1);
+  });
+
+  it('inflateBound', () => {
+    const a = new Bound(0, 0, 10, 10);
+    const b = inflateBound(a, 4);
+    expect(b.serialize()).toBe('[-2,-2,14,14]');
+
+    expect(() => inflateBound(a, -12)).toThrowError(
+      'Invalid delta range or bound size.'
+    );
+  });
+
+  it('transformPointsToNewBound basic', () => {
+    const a = new Bound(0, 0, 20, 20);
+    const b = new Bound(4, 4, 18, 18);
+    const marginA = 4;
+    const marginB = 6;
+    const points = [{ x: 6, y: 6, other: 10 }];
+    const transformed = transformPointsToNewBound(
+      points,
+      a,
+      marginA,
+      b,
+      marginB
+    );
+
+    expect(transformed.bound.serialize()).toBe(b.serialize());
+    expect(transformed.points[0]).toMatchObject({
+      x: 7,
+      y: 7,
+      other: 10,
+    });
+  });
+
+  it('transformPointsToNewBound, new bound too small', () => {
+    const a = new Bound(0, 0, 20, 20);
+    const b = new Bound(4, 4, 4, 4);
+    const marginA = 4;
+    const marginB = 6;
+    const points = [{ x: 6, y: 6, other: 10 }];
+    const transformed = transformPointsToNewBound(
+      points,
+      a,
+      marginA,
+      b,
+      marginB
+    );
+
+    expect(transformed.bound.serialize()).toBe('[4,4,13,13]');
+    expect(transformed.points[0].x).toBeCloseTo(6.1667);
+    expect(transformed.points[0].y).toBeCloseTo(6.1667);
+    expect(transformed.points[0].other).toBe(10);
+  });
+
+  it('intersectLine', () => {
+    const bound = new Bound(0, 0, 10, 10);
+    expect(bound.intersectLine([0, 0], [10, 10])).toBeTruthy();
+  });
+
+  it('intersectline no intersection', () => {
+    const bound = new Bound(0, 0, 10, 10);
+    expect(bound.intersectLine([0, -1], [10, -10])).toBeFalsy();
+  });
+
+  it('isIntersectWithBound', () => {
+    const a = new Bound(0, 0, 10, 10);
+    const b = new Bound(5, 5, 10, 10);
+    expect(a.isIntersectWithBound(b)).toBeTruthy();
+  });
+
+  it('isIntersectWithBound no intersection', () => {
+    const a = new Bound(0, 0, 10, 10);
+    const b = new Bound(11, 11, 10, 10);
+    expect(a.isIntersectWithBound(b)).toBeFalsy();
+  });
+
+  it('unite', () => {
+    const a = new Bound(0, 0, 10, 10);
+    const b = new Bound(5, 5, 10, 10);
+    expect(a.unite(b).serialize()).toBe('[0,0,15,15]');
+  });
+
+  it('isHorizontalCross', () => {
+    const a = new Bound(0, 0, 10, 10);
+    const b = new Bound(5, 5, 10, 10);
+    expect(a.isHorizontalCross(b)).toBeTruthy();
+  });
+
+  it('isHorizontalCross no intersection', () => {
+    const a = new Bound(0, 0, 10, 10);
+    const b = new Bound(11, 11, 10, 10);
+    expect(a.isHorizontalCross(b)).toBeFalsy();
+  });
+
+  it('isVerticalCross', () => {
+    const a = new Bound(0, 0, 10, 10);
+    const b = new Bound(5, 5, 10, 10);
+    expect(a.isVerticalCross(b)).toBeTruthy();
+  });
+
+  it('isVerticalCross no intersection', () => {
+    const a = new Bound(0, 0, 10, 10);
+    const b = new Bound(11, 11, 10, 10);
+    expect(a.isVerticalCross(b)).toBeFalsy();
+  });
+
+  it('horizontalDistance', () => {
+    const a = new Bound(0, 0, 10, 10);
+    const b = new Bound(15, 15, 10, 10);
+    expect(a.horizontalDistance(b)).toBe(5);
+  });
+
+  it('verticalDistance', () => {
+    const a = new Bound(0, 0, 10, 10);
+    const b = new Bound(15, 15, 10, 10);
+    expect(a.verticalDistance(b)).toBe(5);
+  });
+});

blocksuite/affine/blocks/surface/src/__tests__/graph.unit.spec.ts

@@ -0,0 +1,23 @@
+import { Bound } from '@blocksuite/global/gfx';
+import { describe, expect, it } from 'vitest';
+
+import { Graph } from '../utils/graph.js';
+
+describe('graph', () => {
+  it('neighbors', () => {
+    const bound = new Bound(-5, 5, 10, 10);
+    const graph = new Graph(
+      [
+        [0, 0],
+        [100, 0],
+        [0, 100],
+        [100, 100],
+      ],
+      [bound]
+    );
+    const neighbors = graph.neighbors([0, 0]);
+    expect(neighbors.length).toBe(1);
+    expect(neighbors[0][0]).toBe(100);
+    expect(neighbors[0][1]).toBe(0);
+  });
+});

blocksuite/affine/blocks/surface/src/__tests__/math-utils.unit.spec.ts

@@ -0,0 +1,157 @@
+import {
+  almostEqual,
+  isPointOnLineSegment,
+  type IVec,
+  lineEllipseIntersects,
+  lineIntersects,
+  linePolygonIntersects,
+  linePolylineIntersects,
+  pointAlmostEqual,
+  polygonGetPointTangent,
+  rotatePoints,
+  toDegree,
+  toRadian,
+} from '@blocksuite/global/gfx';
+import { describe, expect, it } from 'vitest';
+
+describe('Line', () => {
+  it('should intersect', () => {
+    let rst = lineIntersects([0, 0], [1, 1], [0, 1], [1, 0]);
+    expect(rst).toBeDefined();
+    expect(rst).toMatchObject([0.5, 0.5]);
+
+    rst = lineIntersects([5, 5], [15, 5], [10, 0], [10, 10]);
+    expect(rst).toBeDefined();
+    expect(rst).toMatchObject([10, 5]);
+  });
+
+  it('should not intersect', () => {
+    const rst = lineIntersects([0, 0], [1, 0], [0, 1], [1, 1]);
+    expect(rst).toBeNull();
+  });
+
+  it('should intersect when infinity', () => {
+    const rst = lineIntersects([0, 0], [0, 10], [1, 1], [10, 1], true);
+    expect(rst).toBeDefined();
+    expect(rst).toMatchObject([0, 1]);
+  });
+
+  it('lineEllipseIntersects', () => {
+    const rst = lineEllipseIntersects([0, -5], [0, 5], [0, 0], 1, 1);
+    const expected: IVec[] = [
+      [0, 1],
+      [0, -1],
+    ];
+    if (!rst) throw new Error('Failed to get line ellipse intersects');
+    expect(
+      rst.every((point, index) => pointAlmostEqual(point, expected[index]))
+    ).toBeTruthy();
+  });
+
+  it('lineEllipseIntersects with rotate', () => {
+    const rst = lineEllipseIntersects(
+      [0, -5],
+      [0, 5],
+      [0, 0],
+      3,
+      2,
+      Math.PI / 2
+    );
+    expect(rst).toBeDefined();
+    if (rst) {
+      pointAlmostEqual(rst[0], [0, 3]);
+      pointAlmostEqual(rst[1], [0, -3]);
+    }
+  });
+
+  it('linePolygonIntersects', () => {
+    const rst = linePolygonIntersects(
+      [5, 5],
+      [15, 5],
+      [
+        [0, 0],
+        [10, 0],
+        [10, 10],
+        [0, 10],
+      ]
+    );
+    if (!rst) throw new Error('Failed to get line polygon intersects');
+    expect(pointAlmostEqual(rst[0], [10, 5])).toBeTruthy();
+  });
+
+  it('linePolylineIntersects', () => {
+    const rst = linePolylineIntersects(
+      [5, 5],
+      [-5, 5],
+      [
+        [0, 0],
+        [10, 0],
+        [10, 10],
+        [0, 10],
+      ]
+    );
+
+    expect(rst).toBeNull();
+  });
+
+  it('isPointOnLineSegment', () => {
+    const line: IVec[] = [
+      [0, 0],
+      [1, 0],
+    ];
+    const point: IVec = [0.5, 0];
+    expect(isPointOnLineSegment(point, line)).toBe(true);
+    expect(isPointOnLineSegment([0.01, 0], line)).toBe(true);
+    expect(isPointOnLineSegment([-0.01, 0], line)).toBe(false);
+    expect(isPointOnLineSegment([0.5, 0.1], line)).toBe(false);
+    expect(isPointOnLineSegment([0.5, -0.1], line)).toBe(false);
+  });
+
+  it('rotatePoints', () => {
+    const points: IVec[] = [
+      [0, 0],
+      [1, 0],
+      [1, 1],
+      [0, 1],
+    ];
+    const rst = rotatePoints(points, [0.5, 0.5], 90);
+    const expected = [
+      [1, 0],
+      [1, 1],
+      [0, 1],
+      [0, 0],
+    ];
+    expect(
+      rst.every((p, i) => {
+        return (
+          almostEqual(p[0], expected[i][0]) && almostEqual(p[1], expected[i][1])
+        );
+      })
+    ).toBeTruthy();
+  });
+
+  it('polygonGetPointTangent', () => {
+    const points: IVec[] = [
+      [0, 0],
+      [1, 0],
+      [1, 1],
+      [0, 1],
+    ];
+    expect(polygonGetPointTangent(points, [0, 0.5])).toMatchObject([0, -1]);
+    expect(polygonGetPointTangent(points, [0.5, 0])).toMatchObject([1, 0]);
+  });
+
+  it('toRadian', () => {
+    expect(toRadian(180)).toBe(Math.PI);
+    expect(toRadian(90)).toBe(Math.PI / 2);
+    expect(toRadian(0)).toBe(0);
+    expect(toRadian(360)).toBe(Math.PI * 2);
+  });
+
+  it('toDegree', () => {
+    expect(toDegree(Math.PI)).toBe(180);
+    expect(toDegree(Math.PI / 2)).toBe(90);
+    expect(toDegree(0)).toBe(0);
+    expect(toDegree(Math.PI * 2)).toBe(360);
+  });
+});

blocksuite/affine/blocks/surface/src/__tests__/priority-queue.unit.spec.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+
+import { PriorityQueue } from '../utils/priority-queue.js';
+
+describe('priority queue', () => {
+  it('should dequeue the smallest item', () => {
+    const pq = new PriorityQueue<string, number>((a, b) => a - b);
+    pq.enqueue('d', 4);
+    pq.enqueue('c', 3);
+    expect(pq.dequeue()).toBe('c');
+
+    pq.enqueue('b', 2);
+    pq.enqueue('a', 1);
+    expect(pq.dequeue()).toBe('a');
+    expect(pq.dequeue()).toBe('b');
+
+    pq.enqueue('e', 5);
+    expect(pq.dequeue()).toBe('d');
+    expect(pq.dequeue()).toBe('e');
+    expect(pq.dequeue()).toBe(null);
+  });
+
+  it('should not sink a node past children that are all larger than it', () => {
+    // While sinking `4`, `bubbleDown` reaches a node whose children are
+    // `[7, 6]`. The right child is smaller than the left one, but both are
+    // larger than `4`, so the node must stay where it is.
+    const pq = new PriorityQueue<number, number>((a, b) => a - b);
+    [1, 2, 3, 7, 6, 5, 4].forEach(priority => pq.enqueue(priority, priority));
+
+    const dequeued: number[] = [];
+    while (!pq.empty()) {
+      dequeued.push(pq.dequeue() as number);
+    }
+
+    expect(dequeued).toEqual([1, 2, 3, 4, 5, 6, 7]);
+  });
+
+  it('should dequeue in ascending order regardless of insertion order', () => {
+    const input = [11, 63, 91, 7, 38, 67, 8, 13, 29];
+    const pq = new PriorityQueue<number, number>((a, b) => a - b);
+    input.forEach(priority => pq.enqueue(priority, priority));
+
+    const dequeued: number[] = [];
+    while (!pq.empty()) {
+      dequeued.push(pq.dequeue() as number);
+    }
+
+    expect(dequeued).toEqual([...input].sort((a, b) => a - b));
+  });
+});

blocksuite/affine/blocks/surface/src/__tests__/sort.unit.spec.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+
+import { loadingSort } from '../utils/sort.js';
+
+describe('loadingSort', () => {
+  it('should sort correctly', () => {
+    const elements = [
+      {
+        id: '1',
+        deps: ['2', '3'],
+      },
+      {
+        id: '2',
+        deps: ['4', '5'],
+      },
+      {
+        id: '3',
+        deps: ['a'],
+      },
+      {
+        id: '4',
+        deps: ['b', '5'],
+      },
+      {
+        id: '5',
+        deps: [],
+      },
+    ];
+
+    const sorted = loadingSort(elements);
+
+    expect(sorted.map(val => val.id)).toEqual(['3', '5', '4', '2', '1']);
+  });
+
+  it('should sort correctly when no deps', () => {
+    const elements = [
+      {
+        id: '1',
+        deps: [],
+      },
+      {
+        id: '2',
+        deps: [],
+      },
+      {
+        id: '3',
+        deps: [],
+      },
+    ];
+
+    const sorted = loadingSort(elements);
+
+    expect(sorted.map(val => val.id)).toEqual(['1', '2', '3']);
+  });
+
+  it('should sort correctly elements deps same element', () => {
+    const elements = [
+      {
+        id: '1',
+        deps: ['2', '3'],
+      },
+      {
+        id: '2',
+        deps: ['4', '5'],
+      },
+      {
+        id: '3',
+        deps: ['6', '7'],
+      },
+      {
+        id: '4',
+        deps: ['b', '5'],
+      },
+      {
+        id: '5',
+        deps: ['7'],
+      },
+      {
+        id: '6',
+        deps: [],
+      },
+      {
+        id: '7',
+        deps: [],
+      },
+    ];
+
+    const sorted = loadingSort(elements);
+    expect(sorted.map(val => val.id)).toEqual([
+      '6',
+      '7',
+      '3',
+      '5',
+      '4',
+      '2',
+      '1',
+    ]);
+  });
+});

blocksuite/affine/blocks/surface/src/adapters/extension.ts

@@ -0,0 +1,21 @@
+import {
+  EdgelessSurfaceBlockMarkdownAdapterExtension,
+  SurfaceBlockMarkdownAdapterExtension,
+} from './markdown/markdown.js';
+import {
+  EdgelessSurfaceBlockPlainTextAdapterExtension,
+  SurfaceBlockPlainTextAdapterExtension,
+} from './plain-text/plain-text.js';
+
+export const SurfaceBlockAdapterExtensions = [
+  SurfaceBlockPlainTextAdapterExtension,
+  SurfaceBlockMarkdownAdapterExtension,
+];
+
+export const EdgelessSurfaceBlockAdapterExtensions = [
+  EdgelessSurfaceBlockPlainTextAdapterExtension,
+  EdgelessSurfaceBlockMarkdownAdapterExtension,
+];
+
+export * from './markdown/element-adapter/index.js';
+export * from './plain-text/element-adapter/index.js';

blocksuite/affine/blocks/surface/src/adapters/html-adapter/html.ts

@@ -0,0 +1,20 @@
+import {
+  BlockHtmlAdapterExtension,
+  type BlockHtmlAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+export const surfaceBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
+  flavour: 'affine:surface',
+  toMatch: () => false,
+  fromMatch: o => o.node.flavour === 'affine:surface',
+  toBlockSnapshot: {},
+  fromBlockSnapshot: {
+    enter: (_, context) => {
+      context.walkerContext.skipAllChildren();
+    },
+  },
+};
+
+export const SurfaceBlockHtmlAdapterExtension = BlockHtmlAdapterExtension(
+  surfaceBlockHtmlAdapterMatcher
+);

blocksuite/affine/blocks/surface/src/adapters/index.ts

@@ -0,0 +1 @@
+export * from './extension.js';

blocksuite/affine/blocks/surface/src/adapters/markdown/element-adapter/index.ts

@@ -0,0 +1,33 @@
+import type { MarkdownAST } from '@blocksuite/affine-shared/adapters';
+
+import {
+  ElementModelAdapter,
+  type ElementModelAdapterContext,
+} from '../../type.js';
+import type { ElementToMarkdownAdapterMatcher } from './type.js';
+
+export class MarkdownElementModelAdapter extends ElementModelAdapter<
+  MarkdownAST,
+  MarkdownAST
+> {
+  constructor(
+    readonly elementModelMatchers: ElementToMarkdownAdapterMatcher[]
+  ) {
+    super();
+  }
+
+  fromElementModel(
+    element: Record<string, unknown>,
+    context: ElementModelAdapterContext<MarkdownAST>
+  ) {
+    const markdownAST: MarkdownAST | null = null;
+    for (const matcher of this.elementModelMatchers) {
+      if (matcher.match(element)) {
+        return matcher.toAST(element, context);
+      }
+    }
+    return markdownAST;
+  }
+}
+
+export * from './type.js';

blocksuite/affine/blocks/surface/src/adapters/markdown/element-adapter/type.ts

@@ -0,0 +1,29 @@
+import type { ExtensionType } from '@blocksuite/affine/store';
+import type { MarkdownAST } from '@blocksuite/affine-shared/adapters';
+import {
+  createIdentifier,
+  type ServiceIdentifier,
+} from '@blocksuite/global/di';
+
+import type { ElementModelMatcher } from '../../type.js';
+
+export type ElementToMarkdownAdapterMatcher = ElementModelMatcher<MarkdownAST>;
+
+export const ElementToMarkdownAdapterMatcherIdentifier =
+  createIdentifier<ElementToMarkdownAdapterMatcher>(
+    'elementToMarkdownAdapterMatcher'
+  );
+
+export function ElementToMarkdownAdapterExtension(
+  matcher: ElementToMarkdownAdapterMatcher
+): ExtensionType & {
+  identifier: ServiceIdentifier<ElementToMarkdownAdapterMatcher>;
+} {
+  const identifier = ElementToMarkdownAdapterMatcherIdentifier(matcher.name);
+  return {
+    setup: di => {
+      di.addImpl(identifier, () => matcher);
+    },
+    identifier,
+  };
+}

blocksuite/affine/blocks/surface/src/adapters/markdown/markdown.ts

@@ -0,0 +1,76 @@
+import { getMindMapNodeMap } from '@blocksuite/affine-model';
+import {
+  BlockMarkdownAdapterExtension,
+  type BlockMarkdownAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+import { MarkdownElementModelAdapter } from './element-adapter/index.js';
+import { ElementToMarkdownAdapterMatcherIdentifier } from './element-adapter/type.js';
+
+export const surfaceBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
+  flavour: 'affine:surface',
+  toMatch: () => false,
+  fromMatch: o => o.node.flavour === 'affine:surface',
+  toBlockSnapshot: {},
+  fromBlockSnapshot: {
+    enter: (_, context) => {
+      context.walkerContext.skipAllChildren();
+    },
+  },
+};
+
+export const SurfaceBlockMarkdownAdapterExtension =
+  BlockMarkdownAdapterExtension(surfaceBlockMarkdownAdapterMatcher);
+
+export const edgelessSurfaceBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
+  {
+    flavour: 'affine:surface',
+    toMatch: () => false,
+    fromMatch: o => o.node.flavour === 'affine:surface',
+    toBlockSnapshot: {},
+    fromBlockSnapshot: {
+      enter: (o, context) => {
+        const { walkerContext, provider } = context;
+        if (!provider) {
+          context.walkerContext.skipAllChildren();
+          return;
+        }
+
+        const elementModelMatchers = Array.from(
+          provider.getAll(ElementToMarkdownAdapterMatcherIdentifier).values()
+        );
+        const markdownElementModelAdapter = new MarkdownElementModelAdapter(
+          elementModelMatchers
+        );
+        if ('elements' in o.node.props) {
+          const elements = o.node.props.elements as Record<
+            string,
+            Record<string, unknown>
+          >;
+          // Get all the node maps of mindMap elements
+          const mindMapArray = Object.entries(elements)
+            .filter(([_, element]) => element.type === 'mindmap')
+            .map(([_, element]) => getMindMapNodeMap(element));
+          walkerContext.setGlobalContext(
+            'surface:mindMap:nodeMapArray',
+            mindMapArray
+          );
+
+          Object.entries(
+            o.node.props.elements as Record<string, Record<string, unknown>>
+          ).forEach(([_, element]) => {
+            const markdownAST = markdownElementModelAdapter.fromElementModel(
+              element,
+              { walkerContext, elements }
+            );
+            if (markdownAST) {
+              walkerContext.openNode(markdownAST, 'children').closeNode();
+            }
+          });
+        }
+      },
+    },
+  };
+
+export const EdgelessSurfaceBlockMarkdownAdapterExtension =
+  BlockMarkdownAdapterExtension(edgelessSurfaceBlockMarkdownAdapterMatcher);

blocksuite/affine/blocks/surface/src/adapters/plain-text/element-adapter/index.ts

@@ -0,0 +1,32 @@
+import type { TextBuffer } from '@blocksuite/affine-shared/adapters';
+
+import {
+  ElementModelAdapter,
+  type ElementModelAdapterContext,
+} from '../../type.js';
+import type { ElementToPlainTextAdapterMatcher } from './type.js';
+
+export class PlainTextElementModelAdapter extends ElementModelAdapter<
+  string,
+  TextBuffer
+> {
+  constructor(
+    readonly elementModelMatchers: ElementToPlainTextAdapterMatcher[]
+  ) {
+    super();
+  }
+
+  fromElementModel(
+    element: Record<string, unknown>,
+    context: ElementModelAdapterContext<TextBuffer>
+  ) {
+    for (const matcher of this.elementModelMatchers) {
+      if (matcher.match(element)) {
+        return matcher.toAST(element, context)?.content ?? '';
+      }
+    }
+    return '';
+  }
+}
+
+export * from './type.js';

blocksuite/affine/blocks/surface/src/adapters/plain-text/element-adapter/type.ts

@@ -0,0 +1,29 @@
+import type { TextBuffer } from '@blocksuite/affine-shared/adapters';
+import {
+  createIdentifier,
+  type ServiceIdentifier,
+} from '@blocksuite/global/di';
+import type { ExtensionType } from '@blocksuite/store';
+
+import type { ElementModelMatcher } from '../../type.js';
+
+export type ElementToPlainTextAdapterMatcher = ElementModelMatcher<TextBuffer>;
+
+export const ElementToPlainTextAdapterMatcherIdentifier =
+  createIdentifier<ElementToPlainTextAdapterMatcher>(
+    'elementToPlainTextAdapterMatcher'
+  );
+
+export function ElementToPlainTextAdapterExtension(
+  matcher: ElementToPlainTextAdapterMatcher
+): ExtensionType & {
+  identifier: ServiceIdentifier<ElementToPlainTextAdapterMatcher>;
+} {
+  const identifier = ElementToPlainTextAdapterMatcherIdentifier(matcher.name);
+  return {
+    setup: di => {
+      di.addImpl(identifier, () => matcher);
+    },
+    identifier,
+  };
+}

blocksuite/affine/blocks/surface/src/adapters/plain-text/plain-text.ts

@@ -0,0 +1,77 @@
+import { getMindMapNodeMap } from '@blocksuite/affine-model';
+import {
+  BlockPlainTextAdapterExtension,
+  type BlockPlainTextAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+import { PlainTextElementModelAdapter } from './element-adapter/index.js';
+import { ElementToPlainTextAdapterMatcherIdentifier } from './element-adapter/type.js';
+
+export const surfaceBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher =
+  {
+    flavour: 'affine:surface',
+    toMatch: () => false,
+    fromMatch: o => o.node.flavour === 'affine:surface',
+    toBlockSnapshot: {},
+    fromBlockSnapshot: {
+      enter: (_, context) => {
+        context.walkerContext.skipAllChildren();
+      },
+    },
+  };
+
+export const SurfaceBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(surfaceBlockPlainTextAdapterMatcher);
+
+export const edgelessSurfaceBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher =
+  {
+    flavour: 'affine:surface',
+    toMatch: () => false,
+    fromMatch: o => o.node.flavour === 'affine:surface',
+    toBlockSnapshot: {},
+    fromBlockSnapshot: {
+      enter: (o, context) => {
+        const { walkerContext, provider } = context;
+        if (!provider) {
+          context.walkerContext.skipAllChildren();
+          return;
+        }
+
+        const elementModelMatchers = Array.from(
+          provider.getAll(ElementToPlainTextAdapterMatcherIdentifier).values()
+        );
+        const plainTextElementModelAdapter = new PlainTextElementModelAdapter(
+          elementModelMatchers
+        );
+        if ('elements' in o.node.props) {
+          const elements = o.node.props.elements as Record<
+            string,
+            Record<string, unknown>
+          >;
+          // Get all the node maps of mindMap elements
+          const mindMapArray = Object.entries(elements)
+            .filter(([_, element]) => element.type === 'mindmap')
+            .map(([_, element]) => getMindMapNodeMap(element));
+          walkerContext.setGlobalContext(
+            'surface:mindMap:nodeMapArray',
+            mindMapArray
+          );
+
+          Object.entries(
+            o.node.props.elements as Record<string, Record<string, unknown>>
+          ).forEach(([_, element]) => {
+            const plainText = plainTextElementModelAdapter.fromElementModel(
+              element,
+              { walkerContext, elements }
+            );
+            if (plainText) {
+              context.textBuffer.content += plainText + '\n';
+            }
+          });
+        }
+      },
+    },
+  };
+
+export const EdgelessSurfaceBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(edgelessSurfaceBlockPlainTextAdapterMatcher);

blocksuite/affine/blocks/surface/src/adapters/type.ts

@@ -0,0 +1,30 @@
+import type { ASTWalkerContext } from '@blocksuite/store';
+
+import type { ElementModelMap } from '../element-model/index.js';
+
+export type ElementModelAdapterContext<TNode extends object = never> = {
+  walkerContext: ASTWalkerContext<TNode>;
+  elements: Record<string, Record<string, unknown>>;
+};
+
+export type ElementModelMatcher<TNode extends object = never> = {
+  name: keyof ElementModelMap;
+  match: (element: Record<string, unknown>) => boolean;
+  toAST: (
+    element: Record<string, unknown>,
+    context: ElementModelAdapterContext<TNode>
+  ) => TNode | null;
+};
+
+export abstract class ElementModelAdapter<
+  AST = unknown,
+  TNode extends object = never,
+> {
+  /**
+   * Convert element model to AST format
+   */
+  abstract fromElementModel(
+    element: Record<string, unknown>,
+    context: ElementModelAdapterContext<TNode>
+  ): AST | null;
+}

blocksuite/affine/blocks/surface/src/commands/auto-align.ts

@@ -0,0 +1,157 @@
+import {
+  ConnectorElementModel,
+  EdgelessTextBlockModel,
+  EmbedSyncedDocModel,
+  MindmapElementModel,
+  NoteBlockModel,
+} from '@blocksuite/affine-model';
+import { Bound } from '@blocksuite/global/gfx';
+import { GfxControllerIdentifier, type GfxModel } from '@blocksuite/std/gfx';
+import chunk from 'lodash-es/chunk';
+
+const ALIGN_HEIGHT = 200;
+const ALIGN_PADDING = 20;
+
+import type { Command } from '@blocksuite/std';
+import type { BlockModel, BlockProps } from '@blocksuite/store';
+
+import { EdgelessCRUDIdentifier } from '../extensions/crud-extension.js';
+import { updateXYWH } from '../utils/update-xywh.js';
+
+/**
+ * Automatically arrange elements according to fixed row and column rules
+ */
+export const autoArrangeElementsCommand: Command = (ctx, next) => {
+  const { updateBlock } = ctx.std.store;
+  const gfx = ctx.std.get(GfxControllerIdentifier);
+
+  const elements = gfx.selection.selectedElements;
+  const { updateElement } = ctx.std.get(EdgelessCRUDIdentifier);
+  if (elements && updateElement) {
+    autoArrangeElements(elements, updateElement, updateBlock);
+  }
+  next();
+};
+
+/**
+ * Adjust the height of the selected element to a fixed value and arrange the elements
+ */
+export const autoResizeElementsCommand: Command = (ctx, next) => {
+  const { updateBlock } = ctx.std.store;
+  const gfx = ctx.std.get(GfxControllerIdentifier);
+
+  const elements = gfx.selection.selectedElements;
+  const { updateElement } = ctx.std.get(EdgelessCRUDIdentifier);
+  if (elements && updateElement) {
+    autoResizeElements(elements, updateElement, updateBlock);
+  }
+  next();
+};
+
+function splitElementsToChunks(models: GfxModel[]) {
+  const sortByCenterX = (a: GfxModel, b: GfxModel) =>
+    a.elementBound.center[0] - b.elementBound.center[0];
+  const sortByCenterY = (a: GfxModel, b: GfxModel) =>
+    a.elementBound.center[1] - b.elementBound.center[1];
+  const elements = models.filter(ele => {
+    if (
+      ele instanceof ConnectorElementModel &&
+      (ele.target.id || ele.source.id)
+    ) {
+      return false;
+    }
+    return true;
+  });
+  elements.sort(sortByCenterY);
+  const chunks = chunk(elements, 4);
+  chunks.forEach(items => items.sort(sortByCenterX));
+  return chunks;
+}
+
+function autoArrangeElements(
+  elements: GfxModel[],
+  updateElement: (id: string, props: Record<string, unknown>) => void,
+  updateBlock: (
+    model: BlockModel,
+    callBackOrProps: (() => void) | Partial<BlockProps>
+  ) => void
+) {
+  const chunks = splitElementsToChunks(elements);
+  // update element XY
+  const startX: number = chunks[0][0].elementBound.x;
+  let startY: number = chunks[0][0].elementBound.y;
+  chunks.forEach(items => {
+    let posX = startX;
+    let maxHeight = 0;
+    items.forEach(ele => {
+      const { x: eleX, y: eleY } = ele.elementBound;
+      const bound = Bound.deserialize(ele.xywh);
+      const xOffset = bound.x - eleX;
+      const yOffset = bound.y - eleY;
+      bound.x = posX + xOffset;
+      bound.y = startY + yOffset;
+      updateXYWH(ele, bound, updateElement, updateBlock);
+      if (ele.elementBound.h > maxHeight) {
+        maxHeight = ele.elementBound.h;
+      }
+      posX += ele.elementBound.w + ALIGN_PADDING;
+    });
+    startY += maxHeight + ALIGN_PADDING;
+  });
+}
+
+function autoResizeElements(
+  elements: GfxModel[],
+  updateElement: (id: string, props: Record<string, unknown>) => void,
+  updateBlock: (
+    model: BlockModel,
+    callBackOrProps: (() => void) | Partial<BlockProps>
+  ) => void
+) {
+  // resize or scale to fixed height
+  elements.forEach(ele => {
+    if (
+      ele instanceof ConnectorElementModel ||
+      ele instanceof MindmapElementModel
+    ) {
+      return;
+    }
+
+    if (ele instanceof NoteBlockModel) {
+      const curScale = ele.props.edgeless.scale ?? 1;
+      const nextScale = curScale * (ALIGN_HEIGHT / ele.elementBound.h);
+      const bound = Bound.deserialize(ele.xywh);
+      bound.h = bound.h * (nextScale / curScale);
+      bound.w = bound.w * (nextScale / curScale);
+      updateElement(ele.id, {
+        edgeless: {
+          ...ele.props.edgeless,
+          scale: nextScale,
+        },
+        xywh: bound.serialize(),
+      });
+    } else if (
+      ele instanceof EdgelessTextBlockModel ||
+      ele instanceof EmbedSyncedDocModel
+    ) {
+      const curScale = ele.props.scale ?? 1;
+      const nextScale = curScale * (ALIGN_HEIGHT / ele.elementBound.h);
+      const bound = Bound.deserialize(ele.xywh);
+      bound.h = bound.h * (nextScale / curScale);
+      bound.w = bound.w * (nextScale / curScale);
+      updateElement(ele.id, {
+        scale: nextScale,
+        xywh: bound.serialize(),
+      });
+    } else {
+      const bound = Bound.deserialize(ele.xywh);
+      const scale = ALIGN_HEIGHT / ele.elementBound.h;
+      bound.h = scale * bound.h;
+      bound.w = scale * bound.w;
+      updateXYWH(ele, bound, updateElement, updateBlock);
+    }
+  });
+
+  // arrange
+  autoArrangeElements(elements, updateElement, updateBlock);
+}

blocksuite/affine/blocks/surface/src/commands/index.ts

@@ -0,0 +1,5 @@
+export {
+  autoArrangeElementsCommand,
+  autoResizeElementsCommand,
+} from './auto-align.js';
+export { reassociateConnectorsCommand } from './reassociate-connectors.js';

blocksuite/affine/blocks/surface/src/commands/reassociate-connectors.ts

@@ -0,0 +1,46 @@
+import type { Command } from '@blocksuite/std';
+import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
+
+import type { SurfaceBlockModel } from '../surface-model';
+
+/**
+ * Re-associate bindings for block that have been converted.
+ *
+ * @param oldId - the old block id
+ * @param newId - the new block id
+ */
+export const reassociateConnectorsCommand: Command<{
+  oldId: string;
+  newId: string;
+}> = (ctx, next) => {
+  const { oldId, newId } = ctx;
+  const gfx = ctx.std.get(GfxControllerIdentifier);
+  if (!oldId || !newId || !gfx.surface) {
+    next();
+    return;
+  }
+
+  const surface = gfx.surface;
+  const connectors = (surface as SurfaceBlockModel).getConnectors(oldId);
+  for (const { id, source, target } of connectors) {
+    if (source.id === oldId) {
+      surface.updateElement(id, {
+        source: {
+          ...source,
+          id: newId,
+        },
+      });
+      continue;
+    }
+    if (target.id === oldId) {
+      surface.updateElement(id, {
+        target: {
+          ...target,
+          id: newId,
+        },
+      });
+    }
+  }
+
+  next();
+};

blocksuite/affine/blocks/surface/src/consts.ts

@@ -0,0 +1,28 @@
+export const ZOOM_MAX = 6.0;
+export const ZOOM_MIN = 0.1;
+export const ZOOM_STEP = 0.25;
+export const ZOOM_INITIAL = 1.0;
+export const ZOOM_WHEEL_STEP = 0.1;
+export const GRID_SIZE = 3000;
+export const GRID_GAP_MIN = 10;
+export const GRID_GAP_MAX = 50;
+export const DEFAULT_NOTE_OFFSET_X = 30;
+export const DEFAULT_NOTE_OFFSET_Y = 40;
+
+// TODO: need to check the default central area ratio
+export const DEFAULT_CENTRAL_AREA_RATIO = 0.3;
+
+export interface IModelCoord {
+  x: number;
+  y: number;
+}
+
+// TODO(@L-Sun): we should remove this list when refactor the pointerOut event to pointerLeave,
+// since the previous will be triggered when the pointer move to the area of the its children elements
+// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event
+export const EXCLUDING_MOUSE_OUT_CLASS_LIST = [
+  'affine-note-mask',
+  'edgeless-block-portal-note',
+  'affine-block-children-container',
+  'edgeless-container',
+];

blocksuite/affine/blocks/surface/src/effects.ts

@@ -0,0 +1,7 @@
+import { SurfaceBlockComponent } from './surface-block.js';
+import { SurfaceBlockVoidComponent } from './surface-block-void.js';
+
+export function effects() {
+  customElements.define('affine-surface-void', SurfaceBlockVoidComponent);
+  customElements.define('affine-surface', SurfaceBlockComponent);
+}

blocksuite/affine/blocks/surface/src/element-model/base.ts

@@ -0,0 +1,4 @@
+export {
+  GfxPrimitiveElementModel as SurfaceElementModel,
+  GfxGroupLikeElementModel as SurfaceGroupLikeModel,
+} from '@blocksuite/std/gfx';

blocksuite/affine/blocks/surface/src/element-model/index.ts

@@ -0,0 +1,56 @@
+import {
+  BrushElementModel,
+  ConnectorElementModel,
+  GroupElementModel,
+  HighlighterElementModel,
+  MindmapElementModel,
+  ShapeElementModel,
+  TextElementModel,
+} from '@blocksuite/affine-model';
+
+import { SurfaceElementModel } from './base.js';
+
+export const elementsCtorMap = {
+  group: GroupElementModel,
+  connector: ConnectorElementModel,
+  shape: ShapeElementModel,
+  brush: BrushElementModel,
+  text: TextElementModel,
+  mindmap: MindmapElementModel,
+  highlighter: HighlighterElementModel,
+};
+
+export {
+  BrushElementModel,
+  ConnectorElementModel,
+  GroupElementModel,
+  HighlighterElementModel,
+  MindmapElementModel,
+  ShapeElementModel,
+  SurfaceElementModel,
+  TextElementModel,
+};
+
+export enum CanvasElementType {
+  BRUSH = 'brush',
+  CONNECTOR = 'connector',
+  GROUP = 'group',
+  MINDMAP = 'mindmap',
+  SHAPE = 'shape',
+  TEXT = 'text',
+  HIGHLIGHTER = 'highlighter',
+}
+
+export type ElementModelMap = {
+  ['shape']: ShapeElementModel;
+  ['brush']: BrushElementModel;
+  ['connector']: ConnectorElementModel;
+  ['text']: TextElementModel;
+  ['group']: GroupElementModel;
+  ['mindmap']: MindmapElementModel;
+  ['highlighter']: HighlighterElementModel;
+};
+
+export function isCanvasElementType(type: string): type is CanvasElementType {
+  return type.toLocaleUpperCase() in CanvasElementType;
+}

blocksuite/affine/blocks/surface/src/extensions/clipboard-config.ts

@@ -0,0 +1,80 @@
+import { type Container, createIdentifier } from '@blocksuite/global/di';
+import { BlockSuiteError } from '@blocksuite/global/exceptions';
+import { type BlockStdScope, StdIdentifier } from '@blocksuite/std';
+import { type BlockSnapshot, Extension, type Store } from '@blocksuite/store';
+
+import { getSurfaceComponent } from '../utils/get-surface-block';
+import { EdgelessCRUDIdentifier } from './crud-extension';
+
+export type ClipboardConfigCreationContext = {
+  /**
+   * element old id to new id
+   */
+  oldToNewIdMap: Map<string, string>;
+  /**
+   * element old id to new layer index
+   */
+  originalIndexes: Map<string, string>;
+
+  /**
+   * frame old id to new presentation index
+   */
+  newPresentationIndexes: Map<string, string>;
+};
+
+export const EdgelessClipboardConfigIdentifier =
+  createIdentifier<EdgelessClipboardConfig>('edgeless-clipboard-config');
+
+export abstract class EdgelessClipboardConfig extends Extension {
+  static key: string;
+
+  constructor(readonly std: BlockStdScope) {
+    super();
+  }
+
+  get surface() {
+    return getSurfaceComponent(this.std);
+  }
+
+  get crud() {
+    return this.std.get(EdgelessCRUDIdentifier);
+  }
+
+  onBlockSnapshotPaste = async (
+    snapshot: BlockSnapshot,
+    doc: Store,
+    parent?: string,
+    index?: number
+  ) => {
+    const block = await this.std.clipboard.pasteBlockSnapshot(
+      snapshot,
+      doc,
+      parent,
+      index
+    );
+    return block?.id ?? null;
+  };
+
+  abstract createBlock(
+    snapshot: BlockSnapshot,
+    context: ClipboardConfigCreationContext
+  ): string | null | Promise<string | null>;
+
+  static override setup(di: Container) {
+    if (!this.key) {
+      throw new BlockSuiteError(
+        BlockSuiteError.ErrorCode.ValueNotExists,
+        'Key is not defined in the EdgelessClipboardConfig'
+      );
+    }
+
+    di.add(
+      this as unknown as { new (std: BlockStdScope): EdgelessClipboardConfig },
+      [StdIdentifier]
+    );
+
+    di.addImpl(EdgelessClipboardConfigIdentifier(this.key), provider =>
+      provider.get(this)
+    );
+  }
+}

blocksuite/affine/blocks/surface/src/extensions/crud-extension.ts

@@ -0,0 +1,181 @@
+import type { SurfaceElementModelMap } from '@blocksuite/affine-model';
+import { EditPropsStore } from '@blocksuite/affine-shared/services';
+import { type Container, createIdentifier } from '@blocksuite/global/di';
+import { type BlockStdScope, StdIdentifier } from '@blocksuite/std';
+import {
+  GfxBlockElementModel,
+  GfxControllerIdentifier,
+  type GfxModel,
+  isGfxGroupCompatibleModel,
+} from '@blocksuite/std/gfx';
+import { type BlockModel, Extension } from '@blocksuite/store';
+
+import type { SurfaceBlockModel } from '../surface-model';
+import { getLastPropsKey } from '../utils/get-last-props-key';
+import { isConnectable, isNoteBlock } from './query';
+
+export const EdgelessCRUDIdentifier = createIdentifier<EdgelessCRUDExtension>(
+  'AffineEdgelessCrudService'
+);
+
+export class EdgelessCRUDExtension extends Extension {
+  constructor(readonly std: BlockStdScope) {
+    super();
+  }
+
+  static override setup(di: Container) {
+    di.add(this, [StdIdentifier]);
+    di.addImpl(EdgelessCRUDIdentifier, provider => provider.get(this));
+  }
+
+  private get _gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  private get _surface() {
+    return this._gfx.surface as SurfaceBlockModel | null;
+  }
+
+  deleteElements = (elements: GfxModel[]) => {
+    const surface = this._surface;
+    if (!surface) {
+      console.error('surface is not initialized');
+      return;
+    }
+
+    const gfx = this.std.get(GfxControllerIdentifier);
+    const set = new Set(elements);
+    elements.forEach(element => {
+      if (isConnectable(element)) {
+        const connectors = surface.getConnectors(element.id);
+        connectors.forEach(connector => set.add(connector));
+      }
+    });
+
+    set.forEach(element => {
+      if (isNoteBlock(element)) {
+        const children = gfx.doc.root?.children ?? [];
+        if (children.length > 1) {
+          gfx.doc.deleteBlock(element);
+        }
+      } else {
+        gfx.deleteElement(element.id);
+      }
+    });
+  };
+
+  addBlock = (
+    flavour: string,
+    props: Record<string, unknown>,
+    parentId?: string | BlockModel,
+    parentIndex?: number
+  ) => {
+    const gfx = this.std.get(GfxControllerIdentifier);
+    const key = getLastPropsKey(flavour, props);
+    if (key) {
+      props = this.std.get(EditPropsStore).applyLastProps(key, props);
+    }
+
+    const nProps = {
+      ...props,
+      index: gfx.layer.generateIndex(),
+    };
+
+    return this.std.store.addBlock(
+      flavour as never,
+      nProps,
+      parentId,
+      parentIndex
+    );
+  };
+
+  addElement = <T extends Record<string, unknown>>(type: string, props: T) => {
+    const surface = this._surface;
+    if (!surface) {
+      console.error('surface is not initialized');
+      return;
+    }
+
+    const gfx = this.std.get(GfxControllerIdentifier);
+    const key = getLastPropsKey(type, props);
+    if (key) {
+      props = this.std.get(EditPropsStore).applyLastProps(key, props) as T;
+    }
+
+    const nProps = {
+      ...props,
+      type,
+      index: props.index ?? gfx.layer.generateIndex(),
+    };
+
+    return surface.addElement(nProps);
+  };
+
+  updateElement = (id: string, props: Record<string, unknown>) => {
+    const surface = this._surface;
+    if (!surface) {
+      console.error('surface is not initialized');
+      return;
+    }
+
+    const element = this._surface.getElementById(id);
+    if (element) {
+      const key = getLastPropsKey(element.type, {
+        ...element.yMap.toJSON(),
+        ...props,
+      });
+      key && this.std.get(EditPropsStore).recordLastProps(key, props);
+      this._surface.updateElement(id, props);
+      return;
+    }
+
+    const block = this.std.store.getModelById(id);
+    if (block) {
+      const key = getLastPropsKey(block.flavour, {
+        ...block.yBlock.toJSON(),
+        ...props,
+      });
+      key && this.std.get(EditPropsStore).recordLastProps(key, props);
+      this.std.store.updateBlock(block, props);
+    }
+  };
+
+  getElementById(id: string): GfxModel | null {
+    const surface = this._surface;
+    if (!surface) {
+      return null;
+    }
+    const el = surface.getElementById(id) ?? this.std.store.getModelById(id);
+    return el as GfxModel | null;
+  }
+
+  getElementsByType<K extends keyof SurfaceElementModelMap>(
+    type: K
+  ): SurfaceElementModelMap[K][] {
+    if (!this._surface) {
+      return [];
+    }
+    return this._surface.getElementsByType(type);
+  }
+
+  removeElement(id: string | GfxModel) {
+    id = typeof id === 'string' ? id : id.id;
+
+    const el = this.getElementById(id);
+    if (isGfxGroupCompatibleModel(el)) {
+      el.childIds.forEach(childId => {
+        this.removeElement(childId);
+      });
+    }
+
+    if (el instanceof GfxBlockElementModel) {
+      this.std.store.deleteBlock(el);
+      return;
+    }
+
+    if (this._surface?.hasElementById(id)) {
+      this._surface.deleteElement(id);
+      return;
+    }
+  }
+}

blocksuite/affine/blocks/surface/src/extensions/dom-element-renderer.ts

@@ -0,0 +1,30 @@
+import type { ExtensionType } from '@blocksuite/store';
+
+import type { SurfaceElementModel } from '../element-model/base.js';
+import {
+  type DomElementRenderer,
+  DomElementRendererIdentifier,
+} from '../renderer/dom-elements/index.js';
+
+/**
+ * Creates an extension for registering a DomElementRenderer for a specific element type.
+ *
+ * @param elementType The type of the surface element (e.g., 'shape', 'text') for which this renderer is.
+ * @param implementation The DomElementRenderer function that handles rendering for this element type.
+ * @returns An ExtensionType object that can be used to set up the renderer in the DI container.
+ */
+export const DomElementRendererExtension = <
+  T extends SurfaceElementModel = SurfaceElementModel,
+>(
+  elementType: string,
+  implementation: DomElementRenderer<T>
+): ExtensionType => {
+  return {
+    setup: di => {
+      di.addValue(
+        DomElementRendererIdentifier(elementType),
+        implementation as DomElementRenderer
+      );
+    },
+  };
+};

blocksuite/affine/blocks/surface/src/extensions/edit-props-middleware-builder.ts

@@ -0,0 +1,26 @@
+import { EditPropsStore } from '@blocksuite/affine-shared/services';
+import {
+  type SurfaceMiddleware,
+  SurfaceMiddlewareBuilder,
+} from '@blocksuite/std/gfx';
+
+import { getLastPropsKey } from '../utils';
+
+export class EditPropsMiddlewareBuilder extends SurfaceMiddlewareBuilder {
+  static override key = 'editProps';
+
+  middleware: SurfaceMiddleware = ctx => {
+    if (ctx.type === 'beforeAdd') {
+      const { type, props } = ctx.payload;
+      const key = getLastPropsKey(type, props);
+      const nProps = key
+        ? this.std.get(EditPropsStore).applyLastProps(key, ctx.payload.props)
+        : null;
+
+      ctx.payload.props = {
+        ...(nProps ?? props),
+        index: props.index ?? this.gfx.layer.generateIndex(),
+      };
+    }
+  };
+}

blocksuite/affine/blocks/surface/src/extensions/element-renderer.ts

@@ -0,0 +1,31 @@
+import {
+  createIdentifier,
+  type ServiceIdentifier,
+} from '@blocksuite/global/di';
+import type {
+  GfxLocalElementModel,
+  GfxPrimitiveElementModel,
+} from '@blocksuite/std/gfx';
+import type { ExtensionType } from '@blocksuite/store';
+
+import type { ElementRenderer } from '../renderer/elements';
+
+export const ElementRendererIdentifier =
+  createIdentifier<unknown>('element-renderer');
+
+export const ElementRendererExtension = <
+  T extends GfxPrimitiveElementModel | GfxLocalElementModel,
+>(
+  id: string,
+  renderer: ElementRenderer<T>
+): ExtensionType & {
+  identifier: ServiceIdentifier<ElementRenderer<T>>;
+} => {
+  const identifier = ElementRendererIdentifier<ElementRenderer<T>>(id);
+  return {
+    setup: di => {
+      di.addImpl(identifier, () => renderer);
+    },
+    identifier,
+  };
+};

blocksuite/affine/blocks/surface/src/extensions/export-manager/export-manager.ts

@@ -0,0 +1,559 @@
+import { ImageBlockModel, type RootBlockModel } from '@blocksuite/affine-model';
+import { FetchUtils } from '@blocksuite/affine-shared/adapters';
+import {
+  CANVAS_EXPORT_IGNORE_TAGS,
+  DEFAULT_IMAGE_PROXY_ENDPOINT,
+} from '@blocksuite/affine-shared/consts';
+import type { Viewport } from '@blocksuite/affine-shared/types';
+import {
+  isInsidePageEditor,
+  matchModels,
+} from '@blocksuite/affine-shared/utils';
+import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
+import type { IBound } from '@blocksuite/global/gfx';
+import { deserializeXYWH } from '@blocksuite/global/gfx';
+import {
+  type BlockComponent,
+  type BlockStdScope,
+  type EditorHost,
+  StdIdentifier,
+} from '@blocksuite/std';
+import {
+  GfxBlockElementModel,
+  type GfxController,
+  GfxControllerIdentifier,
+  type GfxModel,
+  GfxPrimitiveElementModel,
+  isGfxGroupCompatibleModel,
+} from '@blocksuite/std/gfx';
+import type { ExtensionType, Store } from '@blocksuite/store';
+
+import { CanvasRenderer } from '../../renderer/canvas-renderer.js';
+import type { SurfaceBlockComponent } from '../../surface-block.js';
+import { getBgGridGap } from '../../utils/get-bg-grip-gap.js';
+import { FileExporter } from './file-exporter.js';
+
+// oxlint-disable-next-line typescript/consistent-type-imports
+type Html2CanvasFunction = typeof import('html2canvas').default;
+
+export type ExportOptions = {
+  imageProxyEndpoint: string;
+};
+
+export class ExportManager {
+  private readonly _exportOptions: ExportOptions = {
+    imageProxyEndpoint: DEFAULT_IMAGE_PROXY_ENDPOINT,
+  };
+
+  replaceImgSrcWithSvg = async (element: HTMLElement) => {
+    const imgList = Array.from(element.querySelectorAll('img'));
+    // Create an array of promises
+    const promises = imgList.map(img => {
+      return FetchUtils.fetchImage(
+        img.src,
+        undefined,
+        this._exportOptions.imageProxyEndpoint
+      )
+        .then(response => response && response.blob())
+        .then(async blob => {
+          if (!blob) return;
+          // If the file type is SVG, set svg width and height
+          if (blob.type === 'image/svg+xml') {
+            // Parse the SVG
+            const parser = new DOMParser();
+            const svgDoc = parser.parseFromString(
+              await blob.text(),
+              'image/svg+xml'
+            );
+            const svgElement =
+              svgDoc.documentElement as unknown as SVGSVGElement;
+
+            // Check if the SVG has width and height attributes
+            if (
+              !svgElement.hasAttribute('width') &&
+              !svgElement.hasAttribute('height')
+            ) {
+              // Get the viewBox
+              const viewBox = svgElement.viewBox.baseVal;
+              // Set the SVG width and height
+              svgElement.setAttribute('width', `${viewBox.width}px`);
+              svgElement.setAttribute('height', `${viewBox.height}px`);
+            }
+
+            // Replace the img src with the modified SVG
+            const serializer = new XMLSerializer();
+            const newSvgStr = serializer.serializeToString(svgElement);
+            img.src =
+              'data:image/svg+xml;charset=utf-8,' +
+              encodeURIComponent(newSvgStr);
+          }
+        });
+    });
+
+    // Wait for all promises to resolve
+    await Promise.all(promises);
+  };
+
+  get doc(): Store {
+    return this.std.store;
+  }
+
+  get editorHost(): EditorHost {
+    return this.std.host;
+  }
+
+  constructor(readonly std: BlockStdScope) {}
+
+  private _checkCanContinueToCanvas(pathName: string, editorMode: boolean) {
+    if (
+      location.pathname !== pathName ||
+      isInsidePageEditor(this.editorHost) !== editorMode
+    ) {
+      throw new BlockSuiteError(
+        ErrorCode.EdgelessExportError,
+        'Unable to export content to canvas'
+      );
+    }
+  }
+
+  private async _checkReady() {
+    const pathname = location.pathname;
+    const editorMode = isInsidePageEditor(this.editorHost);
+
+    const promise = new Promise((resolve, reject) => {
+      let count = 0;
+      const checkReactRender = setInterval(() => {
+        try {
+          this._checkCanContinueToCanvas(pathname, editorMode);
+        } catch (e) {
+          clearInterval(checkReactRender);
+          reject(e);
+        }
+        const rootModel = this.doc.root;
+        const rootComponent = this.doc.root
+          ? rootModel
+            ? this.editorHost.view.getBlock(rootModel.id)
+            : null
+          : null;
+        const imageCard = rootComponent?.querySelector(
+          'affine-image-fallback-card'
+        );
+        const isReady =
+          !imageCard || imageCard.getAttribute('imageState') === '0';
+        if (rootComponent && isReady) {
+          clearInterval(checkReactRender);
+          resolve(true);
+        }
+        count++;
+        if (count > 10 * 60) {
+          clearInterval(checkReactRender);
+          resolve(false);
+        }
+      }, 100);
+    });
+    return promise;
+  }
+
+  private _createCanvas(bound: IBound, fillStyle: string) {
+    const canvas = document.createElement('canvas');
+    const dpr = window.devicePixelRatio || 1;
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+    canvas.width = (bound.w + 100) * dpr;
+    canvas.height = (bound.h + 100) * dpr;
+
+    ctx.scale(dpr, dpr);
+    ctx.fillStyle = fillStyle;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    return { canvas, ctx };
+  }
+
+  private _disableMediaPrint() {
+    document.querySelectorAll('.media-print').forEach(mediaPrint => {
+      mediaPrint.classList.add('hide');
+    });
+  }
+
+  private async _docToCanvas(): Promise<HTMLCanvasElement | void> {
+    const html2canvas = (await import('html2canvas')).default;
+    if (!(html2canvas instanceof Function)) return;
+
+    const pathname = location.pathname;
+    const editorMode = isInsidePageEditor(this.editorHost);
+
+    const rootComponent = getRootByEditorHost(this.editorHost);
+    if (!rootComponent) return;
+    const viewportElement = rootComponent.viewportElement;
+    if (!viewportElement) return;
+    const pageContainer = viewportElement.querySelector(
+      '.affine-page-root-block-container'
+    );
+    const rect = pageContainer?.getBoundingClientRect();
+    const { viewport } = rootComponent;
+    if (!viewport) return;
+    const pageWidth = rect?.width;
+    const pageLeft = rect?.left ?? 0;
+    const viewportHeight = viewportElement?.scrollHeight;
+
+    const html2canvasOption = {
+      ignoreElements: function (element: Element) {
+        if (
+          CANVAS_EXPORT_IGNORE_TAGS.includes(element.tagName) ||
+          element.classList.contains('dg')
+        ) {
+          return true;
+        } else if (
+          (element.classList.contains('close') &&
+            element.parentElement?.classList.contains(
+              'meta-data-expanded-title'
+            )) ||
+          (element.classList.contains('expand') &&
+            element.parentElement?.classList.contains('meta-data'))
+        ) {
+          // the close and expand buttons in affine-doc-meta-data is not needed to be showed
+          return true;
+        } else {
+          return false;
+        }
+      },
+      onclone: async (_documentClone: Document, element: HTMLElement) => {
+        element.style.height = `${viewportHeight}px`;
+        await this.replaceImgSrcWithSvg(element);
+      },
+      backgroundColor: window.getComputedStyle(viewportElement).backgroundColor,
+      x: pageLeft - viewport.left,
+      width: pageWidth,
+      height: viewportHeight,
+      useCORS: this._exportOptions.imageProxyEndpoint ? false : true,
+      proxy: this._exportOptions.imageProxyEndpoint,
+    };
+
+    let data: HTMLCanvasElement;
+    try {
+      this._enableMediaPrint();
+      data = await html2canvas(
+        viewportElement as HTMLElement,
+        html2canvasOption
+      );
+    } finally {
+      this._disableMediaPrint();
+    }
+    this._checkCanContinueToCanvas(pathname, editorMode);
+    return data;
+  }
+
+  private _drawEdgelessBackground(
+    ctx: CanvasRenderingContext2D,
+    {
+      size,
+      backgroundColor,
+      gridColor,
+    }: {
+      size: number;
+      backgroundColor: string;
+      gridColor: string;
+    }
+  ) {
+    const svgImg = `<svg width='${ctx.canvas.width}px' height='${ctx.canvas.height}px' xmlns='http://www.w3.org/2000/svg' style='background-size:${size}px ${size}px;background-color:${backgroundColor}; background-image: radial-gradient(${gridColor} 1px, ${backgroundColor} 1px)'></svg>`;
+    const img = new Image();
+    const cleanup = () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+
+    return new Promise<void>((resolve, reject) => {
+      img.onload = () => {
+        cleanup();
+        ctx.drawImage(img, 0, 0);
+        resolve();
+      };
+      img.onerror = e => {
+        cleanup();
+        reject(e);
+      };
+
+      img.src = `data:image/svg+xml,${encodeURIComponent(svgImg)}`;
+    });
+  }
+
+  private _enableMediaPrint() {
+    document.querySelectorAll('.media-print').forEach(mediaPrint => {
+      mediaPrint.classList.remove('hide');
+    });
+  }
+
+  private async _html2canvas(
+    htmlElement: HTMLElement,
+    options: Parameters<Html2CanvasFunction>[1] = {}
+  ) {
+    const html2canvas = (await import('html2canvas'))
+      .default as unknown as Html2CanvasFunction;
+    const html2canvasOption = {
+      ignoreElements: function (element: Element) {
+        if (
+          CANVAS_EXPORT_IGNORE_TAGS.includes(element.tagName) ||
+          element.classList.contains('dg')
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      },
+      onclone: async (documentClone: Document, element: HTMLElement) => {
+        // html2canvas can't support transform feature
+        element.style.setProperty('transform', 'none');
+        const layer = element.classList.contains('.affine-edgeless-layer')
+          ? element
+          : null;
+
+        if (layer instanceof HTMLElement) {
+          layer.style.setProperty('transform', 'none');
+        }
+
+        const boxShadowEles = documentClone.querySelectorAll(
+          "[style*='box-shadow']"
+        );
+        boxShadowEles.forEach(function (element) {
+          if (element instanceof HTMLElement) {
+            element.style.setProperty('box-shadow', 'none');
+          }
+        });
+
+        await this.replaceImgSrcWithSvg(element);
+      },
+      useCORS: this._exportOptions.imageProxyEndpoint ? false : true,
+      proxy: this._exportOptions.imageProxyEndpoint,
+    };
+
+    let data: HTMLCanvasElement;
+    try {
+      this._enableMediaPrint();
+      data = await html2canvas(
+        htmlElement,
+        Object.assign(html2canvasOption, options)
+      );
+    } finally {
+      this._disableMediaPrint();
+    }
+    return data;
+  }
+
+  private async _toCanvas(): Promise<HTMLCanvasElement | void> {
+    try {
+      await this._checkReady();
+    } catch (e: unknown) {
+      console.error('Failed to export to canvas');
+      console.error(e);
+      return;
+    }
+
+    if (isInsidePageEditor(this.editorHost)) {
+      return this._docToCanvas();
+    } else {
+      const rootModel = this.doc.root;
+      if (!rootModel) return;
+
+      const gfx = this.editorHost.std.get(GfxControllerIdentifier);
+      const surfaceBlock = gfx.surfaceComponent as SurfaceBlockComponent | null;
+      if (!surfaceBlock) return;
+      const bound = gfx.elementsBound;
+      if (!(surfaceBlock.renderer instanceof CanvasRenderer)) {
+        return;
+      }
+      return this.edgelessToCanvas(surfaceBlock.renderer, bound, gfx);
+    }
+  }
+
+  // TODO: refactor of this part
+  async edgelessToCanvas(
+    surfaceRenderer: CanvasRenderer,
+    bound: IBound,
+    gfx: GfxController,
+    blocks?: GfxBlockElementModel[],
+    elements?: GfxPrimitiveElementModel[],
+    edgelessBackground?: {
+      zoom: number;
+    }
+  ): Promise<HTMLCanvasElement | undefined> {
+    if (!(surfaceRenderer instanceof CanvasRenderer)) {
+      console.warn(
+        'ExportManager.edgelessToCanvas was called with an invalid renderer type. Expected CanvasRenderer.'
+      );
+      return undefined;
+    }
+
+    const rootModel = this.doc.root;
+    if (!rootModel) return;
+
+    const pathname = location.pathname;
+    const editorMode = isInsidePageEditor(this.editorHost);
+    const rootComponent = getRootByEditorHost(this.editorHost);
+    if (!rootComponent) return;
+    const viewportElement = rootComponent.viewportElement;
+    if (!viewportElement) return;
+    const containerComputedStyle = window.getComputedStyle(viewportElement);
+
+    const container = rootComponent.querySelector(
+      '.affine-block-children-container'
+    );
+
+    if (!container) return;
+
+    const { ctx, canvas } = this._createCanvas(
+      bound,
+      window.getComputedStyle(container).backgroundColor
+    );
+
+    if (edgelessBackground) {
+      await this._drawEdgelessBackground(ctx, {
+        backgroundColor: containerComputedStyle.getPropertyValue(
+          '--affine-background-primary-color'
+        ),
+        size: getBgGridGap(edgelessBackground.zoom),
+        gridColor: containerComputedStyle.getPropertyValue(
+          '--affine-edgeless-grid-color'
+        ),
+      });
+    }
+
+    if (!blocks && !elements) {
+      blocks = gfx.getElementsByBound(bound, { type: 'block' });
+      elements = gfx.getElementsByBound(bound, { type: 'canvas' });
+    } else {
+      elements = elements ?? [];
+      blocks = blocks ?? [];
+      const blockSet = new Set<GfxBlockElementModel>();
+      const elementSet = new Set<GfxPrimitiveElementModel>();
+      const addFn = (item: GfxModel) => {
+        if (item instanceof GfxBlockElementModel) {
+          blockSet.add(item);
+        } else if (item instanceof GfxPrimitiveElementModel) {
+          elementSet.add(item);
+        }
+      };
+      [...elements, ...blocks].forEach(item => {
+        addFn(item);
+        if (isGfxGroupCompatibleModel(item)) {
+          item.descendantElements.forEach(descendant => {
+            addFn(descendant);
+          });
+        }
+      });
+      elements = [...elementSet];
+      blocks = [...blockSet];
+    }
+
+    for (const block of blocks) {
+      if (matchModels(block, [ImageBlockModel])) {
+        if (!block.props.sourceId) return;
+
+        const blob = await block.store.blobSync.get(block.props.sourceId);
+        if (!blob) return;
+
+        const blobToImage = (blob: Blob) =>
+          new Promise<HTMLImageElement>((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = URL.createObjectURL(blob);
+          });
+        const blockBound = xywhArrayToObject(block);
+        ctx.drawImage(
+          await blobToImage(blob),
+          blockBound.x - bound.x,
+          blockBound.y - bound.y,
+          blockBound.w,
+          blockBound.h
+        );
+      }
+      const blockComponent = this.editorHost.view.getBlock(block.id);
+      if (blockComponent) {
+        const blockBound = xywhArrayToObject(block);
+        const canvasData = await this._html2canvas(
+          blockComponent as HTMLElement
+        );
+        ctx.drawImage(
+          canvasData,
+          blockBound.x - bound.x + 50,
+          blockBound.y - bound.y + 50,
+          blockBound.w,
+          blockBound.h
+        );
+      }
+
+      this._checkCanContinueToCanvas(pathname, editorMode);
+    }
+
+    const surfaceCanvas = surfaceRenderer.getCanvasByBound(bound, elements);
+    ctx.drawImage(surfaceCanvas, 50, 50, bound.w, bound.h);
+
+    return canvas;
+  }
+
+  async exportPdf() {
+    const rootModel = this.doc.root;
+    if (!rootModel) return;
+    const canvasImage = await this._toCanvas();
+    if (!canvasImage) {
+      return;
+    }
+
+    const PDFLib = await import('pdf-lib');
+    const pdfDoc = await PDFLib.PDFDocument.create();
+    const page = pdfDoc.addPage([canvasImage.width, canvasImage.height]);
+    const imageEmbed = await pdfDoc.embedPng(canvasImage.toDataURL('PNG'));
+    const { width, height } = imageEmbed.scale(1);
+    page.drawImage(imageEmbed, {
+      x: 0,
+      y: 0,
+      width,
+      height,
+    });
+    const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true });
+
+    FileExporter.exportFile(
+      (rootModel as RootBlockModel).props.title.toString() + '.pdf',
+      pdfBase64
+    );
+  }
+
+  async exportPng() {
+    const rootModel = this.doc.root;
+    if (!rootModel) return;
+    const canvasImage = await this._toCanvas();
+    if (!canvasImage) {
+      return;
+    }
+
+    FileExporter.exportPng(
+      (this.doc.root as RootBlockModel).props.title.toString(),
+      canvasImage.toDataURL('image/png')
+    );
+  }
+}
+
+export const ExportManagerExtension: ExtensionType = {
+  setup: di => {
+    di.add(ExportManager, [StdIdentifier]);
+  },
+};
+
+function xywhArrayToObject(element: GfxBlockElementModel) {
+  const [x, y, w, h] = deserializeXYWH(element.xywh);
+  return { x, y, w, h };
+}
+
+type RootBlockComponent = BlockComponent & {
+  viewportElement: HTMLElement;
+  viewport: Viewport;
+};
+
+function getRootByEditorHost(
+  editorHost: EditorHost
+): RootBlockComponent | null {
+  const model = editorHost.store.root;
+  if (!model) return null;
+  const root = editorHost.view.getBlock(model.id);
+  return root as RootBlockComponent | null;
+}

blocksuite/affine/blocks/surface/src/extensions/export-manager/file-exporter.ts

@@ -0,0 +1,81 @@
+/* oxlint-disable no-control-regex */
+// Context: Lean towards breaking out any localizable content into constants so it's
+// easier to track content we may need to localize in the future. (i18n)
+const UNTITLED_PAGE_NAME = 'Untitled';
+
+/** Tools for exporting files to device. For example, via browser download. */
+export const FileExporter = {
+  /**
+   * Create a download for the user's browser.
+   *
+   * @param filename
+   * @param text
+   * @param mimeType like `"text/plain"`, `"text/html"`, `"application/javascript"`, etc. See {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types mdn docs List of MIME types}.
+   *
+   * @remarks
+   * Only accepts data in utf-8 encoding (html files, javascript source, text files, etc).
+   *
+   * @example
+   * const todoMDText = `# Todo items
+   * [ ] Item 1
+   * [ ] Item 2
+   * `
+   * FileExporter.exportFile("Todo list.md", todoMDText, "text/plain")
+   *
+   * @example
+   * const stateJsonContent = JSON.stringify({ a: 1, b: 2, c: 3 })
+   * FileExporter.exportFile("state.json", jsonContent, "application/json")
+   */
+  exportFile(filename: string, dataURL: string) {
+    const element = document.createElement('a');
+    element.setAttribute('href', dataURL);
+    const safeFilename = getSafeFileName(filename);
+    element.setAttribute('download', safeFilename);
+
+    element.style.display = 'none';
+    document.body.append(element);
+
+    element.click();
+
+    element.remove();
+  },
+  exportPng(docTitle: string | undefined, dataURL: string) {
+    const title = docTitle?.trim() || UNTITLED_PAGE_NAME;
+    FileExporter.exportFile(title + '.png', dataURL);
+  },
+};
+
+function getSafeFileName(string: string) {
+  const replacement = ' ';
+  const filenameReservedRegex = /[<>:"/\\|?*\u0000-\u001F]/g;
+  const windowsReservedNameRegex = /^(con|prn|aux|nul|com\d|lpt\d)$/i;
+  const reControlChars = /[\u0000-\u001F\u0080-\u009F]/g;
+  const reTrailingPeriods = /\.+$/;
+  const allowedLength = 50;
+
+  function trimRepeated(string: string, target: string) {
+    const escapeStringRegexp = target
+      .replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
+      .replace(/-/g, '\\x2d');
+    const regex = new RegExp(`(?:${escapeStringRegexp}){2,}`, 'g');
+    return string.replace(regex, target);
+  }
+
+  string = string
+    .normalize('NFD')
+    .replace(filenameReservedRegex, replacement)
+    .replace(reControlChars, replacement)
+    .replace(reTrailingPeriods, '');
+
+  string = trimRepeated(string, replacement);
+  string = windowsReservedNameRegex.test(string)
+    ? string + replacement
+    : string;
+  const extIndex = string.lastIndexOf('.');
+  const filename = string.slice(0, extIndex).trim();
+  const extension = string.slice(extIndex);
+  string =
+    filename.slice(0, Math.max(1, allowedLength - extension.length)) +
+    extension;
+  return string;
+}

blocksuite/affine/blocks/surface/src/extensions/export-manager/index.ts

@@ -0,0 +1 @@
+export { ExportManager, ExportManagerExtension } from './export-manager.js';

blocksuite/affine/blocks/surface/src/extensions/index.ts

@@ -0,0 +1,9 @@
+export * from './clipboard-config';
+export * from './crud-extension';
+export * from './dom-element-renderer';
+export * from './edit-props-middleware-builder';
+export * from './element-renderer';
+export * from './export-manager';
+export * from './legacy-slot-extension';
+export * from './query';
+export * from './surface-middleware';

blocksuite/affine/blocks/surface/src/extensions/legacy-slot-extension.ts

@@ -0,0 +1,39 @@
+import type { FrameBlockModel } from '@blocksuite/affine-model';
+import { createIdentifier } from '@blocksuite/global/di';
+import type { ExtensionType } from '@blocksuite/store';
+import { Subject } from 'rxjs';
+export const EdgelessLegacySlotIdentifier = createIdentifier<{
+  readonlyUpdated: Subject<boolean>;
+  navigatorSettingUpdated: Subject<{
+    hideToolbar?: boolean;
+    blackBackground?: boolean;
+    fillScreen?: boolean;
+  }>;
+  navigatorFrameChanged: Subject<FrameBlockModel>;
+  fullScreenToggled: Subject<void>;
+
+  elementResizeStart: Subject<void>;
+  elementResizeEnd: Subject<void>;
+  toggleNoteSlicer: Subject<void>;
+
+  toolbarLocked: Subject<boolean>;
+}>('AffineEdgelessLegacySlotService');
+
+export const EdgelessLegacySlotExtension: ExtensionType = {
+  setup: di => {
+    di.addImpl(EdgelessLegacySlotIdentifier, () => ({
+      readonlyUpdated: new Subject<boolean>(),
+      navigatorSettingUpdated: new Subject<{
+        hideToolbar?: boolean;
+        blackBackground?: boolean;
+        fillScreen?: boolean;
+      }>(),
+      navigatorFrameChanged: new Subject<FrameBlockModel>(),
+      fullScreenToggled: new Subject(),
+      elementResizeStart: new Subject(),
+      elementResizeEnd: new Subject(),
+      toggleNoteSlicer: new Subject(),
+      toolbarLocked: new Subject<boolean>(),
+    }));
+  },
+};

blocksuite/affine/blocks/surface/src/extensions/query.ts

@@ -0,0 +1,15 @@
+import type { Connectable, NoteBlockModel } from '@blocksuite/affine-model';
+import type { GfxModel } from '@blocksuite/std/gfx';
+import type { BlockModel } from '@blocksuite/store';
+
+export function isConnectable(
+  element: GfxModel | null
+): element is Connectable {
+  return !!element && element.connectable;
+}
+
+export function isNoteBlock(
+  element: BlockModel | GfxModel | null
+): element is NoteBlockModel {
+  return !!element && 'flavour' in element && element.flavour === 'affine:note';
+}

blocksuite/affine/blocks/surface/src/extensions/surface-middleware.ts

@@ -0,0 +1,23 @@
+import { createIdentifier } from '@blocksuite/global/di';
+import type { ExtensionType } from '@blocksuite/store';
+
+import type { SurfaceBlockModel } from '../surface-model';
+
+export type SurfaceMiddleware = (surface: SurfaceBlockModel) => () => void;
+
+export const surfaceMiddlewareIdentifier = createIdentifier<{
+  middleware: SurfaceMiddleware;
+}>('surface-middleware');
+
+export function surfaceMiddlewareExtension(
+  id: string,
+  middleware: SurfaceMiddleware
+): ExtensionType {
+  return {
+    setup: di => {
+      di.addImpl(surfaceMiddlewareIdentifier(id), {
+        middleware,
+      });
+    },
+  };
+}

blocksuite/affine/blocks/surface/src/index.ts

@@ -0,0 +1,54 @@
+// oxlint-disable-next-line typescript/triple-slash-reference
+/// <reference path="./effects.ts" />
+export * from './consts.js';
+export { GRID_GAP_MAX, GRID_GAP_MIN } from './consts.js';
+export {
+  SurfaceElementModel,
+  SurfaceGroupLikeModel,
+} from './element-model/base.js';
+export { CanvasElementType } from './element-model/index.js';
+export { CanvasRenderer } from './renderer/canvas-renderer.js';
+export { DomRenderer } from './renderer/dom-renderer.js';
+export type { ElementRenderer } from './renderer/elements/index.js';
+export * from './renderer/elements/type.js';
+export { Overlay, OverlayIdentifier } from './renderer/overlay.js';
+export { ToolOverlay } from './renderer/tool-overlay.js';
+import {
+  getFontFaces,
+  getFontFacesByFontFamily,
+  isSameFontFamily,
+  wrapFontFamily,
+} from './utils/font.js';
+export * from './adapters/index.js';
+export * from './extensions';
+export type { SurfaceContext } from './surface-block.js';
+export { SurfaceBlockComponent } from './surface-block.js';
+export {
+  SurfaceBlockModel,
+  SurfaceBlockSchema,
+  SurfaceBlockSchemaExtension,
+} from './surface-model.js';
+export { SurfaceBlockTransformer } from './surface-transformer.js';
+export * from './tool/default-tool.js';
+export {
+  generateElementId,
+  getBgGridGap,
+  getLastPropsKey,
+  getSurfaceBlock,
+  getSurfaceComponent,
+  normalizeWheelDeltaY,
+} from './utils';
+export { AStarRunner } from './utils/a-star.js';
+export { RoughCanvas } from './utils/rough/canvas.js';
+export type { Options } from './utils/rough/core';
+export { sortIndex } from './utils/sort';
+export { updateXYWH } from './utils/update-xywh.js';
+
+export const TextUtils = {
+  wrapFontFamily,
+  getFontFaces,
+  getFontFacesByFontFamily,
+  isSameFontFamily,
+};
+
+export * from './commands';

blocksuite/affine/blocks/surface/src/renderer/dom-elements/index.ts

@@ -0,0 +1,31 @@
+import { createIdentifier } from '@blocksuite/global/di';
+
+import type { SurfaceElementModel } from '../../element-model/base.js';
+import type { DomRenderer } from '../dom-renderer.js';
+
+/**
+ * Creates a unique identifier for a DomElementRenderer based on the element type.
+ * @param type - The type of the surface element (e.g., 'shape', 'text').
+ * @returns A ServiceIdentifier for the DI container.
+ */
+export const DomElementRendererIdentifier = (type: string) =>
+  createIdentifier<DomElementRenderer>(
+    `affine.surface.dom-element-renderer.${type}`
+  );
+
+/**
+ * Defines the signature for a DOM element renderer function.
+ * Such a function is responsible for rendering a specific type of SurfaceElementModel
+ * into a given HTMLElement.
+ *
+ * @template T - The specific type of SurfaceElementModel this renderer handles.
+ * @param elementModel - The model of the element to render.
+ * @param domElement - The HTMLElement into which the element should be rendered.
+ *                     Basic properties like position and size (if not using placeholder)
+ *                     are expected to be set by the main DOMRenderer before this function is called.
+ * @param renderer - The instance of the main DOMRenderer, providing access to shared
+ *                   utilities like color providers and viewport information.
+ */
+export type DomElementRenderer<
+  T extends SurfaceElementModel = SurfaceElementModel,
+> = (elementModel: T, domElement: HTMLElement, renderer: DomRenderer) => void;

blocksuite/affine/blocks/surface/src/renderer/dom-renderer.ts

@@ -0,0 +1,843 @@
+import {
+  type Color,
+  ColorScheme,
+  type ShapeElementModel,
+} from '@blocksuite/affine-model';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
+import { requestConnectedFrame } from '@blocksuite/affine-shared/utils';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import {
+  type Bound,
+  getBoundWithRotation,
+  intersects,
+} from '@blocksuite/global/gfx';
+import { type BlockStdScope, SurfaceSelection } from '@blocksuite/std';
+import type {
+  GfxCompatibleInterface,
+  GridManager,
+  LayerManager,
+  SurfaceBlockModel,
+  Viewport,
+} from '@blocksuite/std/gfx';
+import { viewportRuntimeConfig } from '@blocksuite/std/gfx';
+import { Subject } from 'rxjs';
+
+import type { SurfaceElementModel } from '../element-model/base.js';
+import type { DomElementRenderer } from './dom-elements/index.js';
+import { DomElementRendererIdentifier } from './dom-elements/index.js';
+import type { Overlay } from './overlay.js';
+import { resolveSurfacePlaceholderColor } from './placeholder-style.js';
+
+type EnvProvider = {
+  generateColorProperty: (color: Color, fallback?: Color) => string;
+  getColorScheme: () => ColorScheme;
+  getColorValue: (color: Color, fallback?: Color, real?: boolean) => string;
+  getPropertyValue: (property: string) => string;
+  selectedElements?: () => string[];
+};
+
+type RendererOptions = {
+  std: BlockStdScope;
+  viewport: Viewport;
+  layerManager: LayerManager;
+  provider?: Partial<EnvProvider>;
+  gridManager: GridManager;
+  surfaceModel: SurfaceBlockModel;
+};
+
+const UpdateType = {
+  ELEMENT_ADDED: 'element-added',
+  ELEMENT_REMOVED: 'element-removed',
+  ELEMENT_UPDATED: 'element-updated',
+  VIEWPORT_CHANGED: 'viewport-changed',
+  SIZE_CHANGED: 'size-changed',
+  ZOOM_STATE_CHANGED: 'zoom-state-changed',
+} as const;
+
+type UpdateType = (typeof UpdateType)[keyof typeof UpdateType];
+
+interface IncrementalUpdateState {
+  dirtyElementIds: Set<string>;
+  viewportDirty: boolean;
+  sizeDirty: boolean;
+  usePlaceholderDirty: boolean;
+  pendingUpdates: Map<string, UpdateType[]>;
+}
+
+const PLACEHOLDER_RESET_STYLES = {
+  border: 'none',
+  borderRadius: '0',
+  boxShadow: 'none',
+  opacity: '1',
+};
+
+function calculatePlaceholderRect(
+  elementModel: SurfaceElementModel,
+  viewportBounds: Bound,
+  zoom: number
+) {
+  return {
+    transform: elementModel.rotate ? `rotate(${elementModel.rotate}deg)` : '',
+    left: `${(elementModel.x - viewportBounds.x) * zoom}px`,
+    top: `${(elementModel.y - viewportBounds.y) * zoom}px`,
+    width: `${elementModel.w * zoom}px`,
+    height: `${elementModel.h * zoom}px`,
+  };
+}
+
+function calculateFullElementRect(
+  elementModel: SurfaceElementModel,
+  viewportBounds: Bound,
+  zoom: number
+) {
+  const dx = elementModel.x - viewportBounds.x;
+  const dy = elementModel.y - viewportBounds.y;
+  return {
+    left: `${dx * zoom}px`,
+    top: `${dy * zoom}px`,
+  };
+}
+
+function getOpacity(elementModel: SurfaceElementModel) {
+  return { opacity: `${elementModel.opacity ?? 1}` };
+}
+
+/**
+ * @class DomRenderer
+ * Renders surface elements directly to the DOM using HTML elements and CSS.
+ *
+ * This renderer supports an extension mechanism to handle different types of surface elements.
+ * To add rendering support for a new element type (e.g., 'my-custom-element'), follow these steps:
+ *
+ * 1.  **Define the Renderer Function**:
+ *     Create a function that implements the rendering logic for your element.
+ *     This function will receive the element's model, the target HTMLElement, and the DomRenderer instance.
+ *     Signature: `(model: MyCustomElementModel, domElement: HTMLElement, renderer: DomRenderer) => void;`
+ *     Example: `shapeDomRenderer` in `blocksuite/affine/gfx/shape/src/element-renderer/shape-dom/index.ts`.
+ *     In this function, you'll apply styles and attributes to the `domElement` based on the `model`.
+ *
+ * 2.  **Create the Renderer Extension**:
+ *     Create a new file (e.g., `my-custom-element-dom-renderer.extension.ts`).
+ *     Import `DomElementRendererExtension` (e.g., from `@blocksuite/affine-block-surface` or its source location
+ *     `blocksuite/affine/blocks/surface/src/extensions/dom-element-renderer.ts`).
+ *     Import your renderer function (from step 1).
+ *     Use the factory to create your extension:
+ *     `export const MyCustomElementDomRendererExtension = DomElementRendererExtension('my-custom-element', myCustomElementRendererFn);`
+ *     Example: `ShapeDomRendererExtension` in `blocksuite/affine/gfx/shape/src/element-renderer/shape-dom.ts`.
+ *
+ * 3.  **Register the Extension**:
+ *     In your application setup where BlockSuite services and view extensions are registered (e.g., a `ViewExtensionProvider`
+ *     or a central DI configuration place), import your new extension (from step 2) and register it with the
+ *     dependency injection container.
+ *     Example: `context.register(MyCustomElementDomRendererExtension);`
+ *     As seen with `ShapeDomRendererExtension` being registered in `blocksuite/affine/gfx/shape/src/view.ts`.
+ *
+ * 4.  **Core Infrastructure (Provided by DomRenderer System)**:
+ *     -   `DomElementRenderer` (type): The function signature for renderers, defined in
+ *         `blocksuite/affine/blocks/surface/src/renderer/dom-elements/index.ts`.
+ *     -   `DomElementRendererIdentifier` (function): Creates unique service identifiers for DI,
+ *         used by `DomRenderer` to look up specific renderers. Defined in the same file.
+ *     -   `DomElementRendererExtension` (factory): A helper to create extension objects for easy registration.
+ *         (e.g., from `@blocksuite/affine-block-surface` or its source).
+ *     -   `DomRenderer._renderElement()`: This method automatically looks up the registered renderer using
+ *         `DomElementRendererIdentifier(elementType)` and calls it if found.
+ *
+ * 5.  **Ensure Exports**:
+ *     -   The `DomRenderer` class itself should be accessible (e.g., exported from `@blocksuite/affine/blocks/surface`).
+ *     -   The `DomElementRendererExtension` factory should be accessible.
+ *
+ * By following these steps, `DomRenderer` will automatically pick up and use your custom rendering logic
+ * when it encounters elements of 'my-custom-element' type.
+ */
+export class DomRenderer {
+  private _container!: HTMLElement;
+
+  private readonly _disposables = new DisposableGroup();
+
+  private readonly _turboEnabled: () => boolean;
+
+  private readonly _overlays = new Set<Overlay>();
+
+  private _refreshRafId: number | null = null;
+
+  private _sizeUpdatedRafId: number | null = null;
+
+  private readonly _updateState: IncrementalUpdateState = {
+    dirtyElementIds: new Set(),
+    viewportDirty: false,
+    sizeDirty: false,
+    usePlaceholderDirty: false,
+    pendingUpdates: new Map(),
+  };
+
+  private readonly _pendingElements = new Map<string, SurfaceElementModel>();
+
+  private _lastViewportBounds: Bound | null = null;
+  private _lastZoom: number | null = null;
+  private _lastUsePlaceholder: boolean = false;
+
+  rootElement: HTMLElement;
+
+  private readonly _elementsMap = new Map<string, HTMLElement>();
+
+  std: BlockStdScope;
+
+  grid: GridManager;
+
+  layerManager: LayerManager;
+
+  provider: Partial<EnvProvider>;
+
+  private readonly _surfaceModel: SurfaceBlockModel;
+
+  usePlaceholder = false;
+
+  viewport: Viewport;
+
+  elementsUpdated = new Subject<{
+    elements: HTMLElement[];
+    added: HTMLElement[];
+    removed: HTMLElement[];
+  }>();
+
+  constructor(options: RendererOptions) {
+    this.rootElement = document.createElement('div');
+    this.rootElement.classList.add('dom-renderer-root');
+    this.rootElement.style.pointerEvents = 'none';
+
+    this.std = options.std;
+    this.viewport = options.viewport;
+    this.layerManager = options.layerManager;
+    this.grid = options.gridManager;
+    this.provider = options.provider ?? {};
+    this._surfaceModel = options.surfaceModel;
+
+    this._turboEnabled = () => {
+      const featureFlagService = options.std.get(FeatureFlagService);
+      return featureFlagService.getFlag('enable_turbo_renderer');
+    };
+
+    this._initViewport();
+    this._watchSurface(options.surfaceModel);
+  }
+
+  private _initViewport() {
+    this._disposables.add(
+      this.viewport.viewportUpdated.subscribe(() => {
+        if (
+          this.viewport.SKIP_REFRESH_DURING_GESTURE &&
+          (this.viewport.panning$.value || this.viewport.zooming$.value)
+        ) {
+          return;
+        }
+        this._markViewportDirty();
+        this.refresh();
+      })
+    );
+
+    this._disposables.add(
+      this.viewport.sizeUpdated.subscribe(() => {
+        if (this._sizeUpdatedRafId) return;
+        this._sizeUpdatedRafId = requestConnectedFrame(() => {
+          this._sizeUpdatedRafId = null;
+          this._markSizeDirty();
+          this._resetSize();
+          this._render();
+          this.refresh();
+        }, this._container);
+      })
+    );
+
+    this._disposables.add(
+      this.viewport.zooming$.subscribe(isZooming => {
+        if (this.viewport.SKIP_REFRESH_DURING_GESTURE) {
+          return;
+        }
+        const shouldRenderPlaceholders = this._turboEnabled() && isZooming;
+
+        if (this.usePlaceholder !== shouldRenderPlaceholders) {
+          this.usePlaceholder = shouldRenderPlaceholders;
+          this._markUsePlaceholderDirty();
+          this.refresh();
+        }
+      })
+    );
+
+    // Post-gesture refresh for SKIP mode
+    if (this.viewport.SKIP_REFRESH_DURING_GESTURE) {
+      let pendingTimerId: ReturnType<typeof setTimeout> | null = null;
+
+      const cancelRefresh = () => {
+        if (pendingTimerId !== null) {
+          clearTimeout(pendingTimerId);
+          pendingTimerId = null;
+        }
+      };
+
+      const scheduleRefresh = () => {
+        cancelRefresh();
+        pendingTimerId = setTimeout(() => {
+          pendingTimerId = null;
+          if (!this.viewport.panning$.value && !this.viewport.zooming$.value) {
+            this._markViewportDirty();
+            this.refresh();
+          }
+        }, viewportRuntimeConfig.POST_GESTURE_REFRESH_DELAY);
+      };
+
+      this._disposables.add(
+        this.viewport.panning$.subscribe(panning => {
+          if (panning) cancelRefresh();
+          else if (!this.viewport.zooming$.value) scheduleRefresh();
+        })
+      );
+      this._disposables.add(
+        this.viewport.zooming$.subscribe(zooming => {
+          if (zooming) cancelRefresh();
+          else if (!this.viewport.panning$.value) scheduleRefresh();
+        })
+      );
+      this._disposables.add({ dispose: cancelRefresh });
+    }
+
+    this.usePlaceholder = false;
+  }
+
+  private _resetSize() {
+    this.refresh();
+  }
+
+  private _renderElement(
+    elementModel: SurfaceElementModel,
+    domElement: HTMLElement
+  ) {
+    const renderFn = this.std.getOptional<DomElementRenderer>(
+      DomElementRendererIdentifier(elementModel.type)
+    );
+
+    if (renderFn) {
+      renderFn(elementModel, domElement, this);
+    } else {
+      // If no specific renderer is found (e.g., for 'shape' if the extension isn't registered,
+      // or for other element types without a dedicated DOM renderer),
+      // no specific DOM styling will be applied here by _renderElement.
+      // Basic properties like position/size are handled in the _render loop if usePlaceholder is false.
+      console.warn(
+        `No DOM renderer found for element type: ${elementModel.type}`
+      );
+    }
+  }
+
+  private _renderOrUpdatePlaceholder(
+    elementModel: SurfaceElementModel,
+    viewportBounds: Bound,
+    zoom: number,
+    addedElements: HTMLElement[]
+  ) {
+    let domElement = this._elementsMap.get(elementModel.id);
+
+    if (!domElement) {
+      domElement = document.createElement('div');
+      domElement.dataset.elementId = elementModel.id;
+      domElement.style.position = 'absolute';
+      this._elementsMap.set(elementModel.id, domElement);
+      this.rootElement.append(domElement);
+      addedElements.push(domElement);
+    }
+
+    domElement.style.backgroundColor = resolveSurfacePlaceholderColor(
+      this.getColorScheme()
+    );
+
+    const geometricStyles = calculatePlaceholderRect(
+      elementModel,
+      viewportBounds,
+      zoom
+    );
+    const zIndexStyle = {
+      'z-index': this.layerManager.getZIndex(elementModel),
+    };
+    Object.assign(domElement.style, geometricStyles, zIndexStyle);
+    Object.assign(domElement.style, PLACEHOLDER_RESET_STYLES);
+
+    // Clear classes specific to shapes, if applicable
+    if (elementModel.type === 'shape') {
+      const shapeModel = elementModel as ShapeElementModel;
+      domElement.classList.remove(`shape-${shapeModel.shapeType}`);
+      domElement.classList.remove(
+        `shape-style-${shapeModel.shapeStyle.toLowerCase()}`
+      );
+    }
+  }
+
+  private _renderOrUpdateFullElement(
+    elementModel: SurfaceElementModel,
+    viewportBounds: Bound,
+    zoom: number,
+    addedElements: HTMLElement[]
+  ) {
+    let domElement = this._elementsMap.get(elementModel.id);
+
+    if (!domElement) {
+      domElement = document.createElement('div');
+      domElement.dataset.elementId = elementModel.id;
+      domElement.style.position = 'absolute';
+      domElement.style.transformOrigin = 'top left';
+      this._elementsMap.set(elementModel.id, domElement);
+      this.rootElement.append(domElement);
+      addedElements.push(domElement);
+    }
+
+    const geometricStyles = calculateFullElementRect(
+      elementModel,
+      viewportBounds,
+      zoom
+    );
+    const opacityStyle = getOpacity(elementModel);
+    const zIndexStyle = {
+      'z-index': this.layerManager.getZIndex(elementModel),
+    };
+    Object.assign(domElement.style, geometricStyles, opacityStyle, zIndexStyle);
+
+    this._renderElement(elementModel, domElement);
+  }
+
+  private _render() {
+    this._renderIncremental();
+  }
+
+  private _watchSurface(surfaceModel: SurfaceBlockModel) {
+    this._disposables.add(
+      surfaceModel.elementAdded.subscribe(payload => {
+        this._markElementDirty(payload.id, UpdateType.ELEMENT_ADDED);
+        this._markViewportDirty();
+        this.refresh();
+      })
+    );
+    this._disposables.add(
+      surfaceModel.elementRemoved.subscribe(payload => {
+        this._markElementDirty(payload.id, UpdateType.ELEMENT_REMOVED);
+        this._markViewportDirty();
+        this.refresh();
+      })
+    );
+    this._disposables.add(
+      surfaceModel.localElementAdded.subscribe(payload => {
+        this._markElementDirty(
+          payload.id,
+          UpdateType.ELEMENT_ADDED,
+          payload as unknown as SurfaceElementModel
+        );
+        this._markViewportDirty();
+        this.refresh();
+      })
+    );
+    this._disposables.add(
+      surfaceModel.localElementDeleted.subscribe(payload => {
+        this._markElementDirty(payload.id, UpdateType.ELEMENT_REMOVED);
+        this._markViewportDirty();
+        this.refresh();
+      })
+    );
+    this._disposables.add(
+      surfaceModel.localElementUpdated.subscribe(payload => {
+        this._markElementDirty(
+          payload.model.id,
+          UpdateType.ELEMENT_UPDATED,
+          payload.model as unknown as SurfaceElementModel
+        );
+        if (payload.props['index'] || payload.props['groupId']) {
+          this._markViewportDirty();
+        }
+        this.refresh();
+      })
+    );
+
+    this._disposables.add(
+      surfaceModel.elementUpdated.subscribe(payload => {
+        // ignore externalXYWH update cause it's updated by the renderer
+        if (payload.props['externalXYWH']) return;
+        this._markElementDirty(payload.id, UpdateType.ELEMENT_UPDATED);
+        if (payload.props['index'] || payload.props['childIds']) {
+          this._markViewportDirty();
+        }
+        this.refresh();
+      })
+    );
+
+    // Workaround for the group rendering reactive update when selection changed
+    let lastSet = new Set<string>();
+    this._disposables.add(
+      this.std.selection.filter$(SurfaceSelection).subscribe(selections => {
+        const groupRelatedSelection = new Set(
+          selections.flatMap(s =>
+            s.elements.flatMap(e => {
+              const element = surfaceModel.getElementById(e);
+              if (
+                element &&
+                (element.type === 'group' || element.groups.length !== 0)
+              ) {
+                return [element.id, ...element.groups.map(g => g.id)];
+              }
+              return [];
+            })
+          )
+        );
+
+        if (lastSet.symmetricDifference(groupRelatedSelection).size !== 0) {
+          lastSet.union(groupRelatedSelection).forEach(g => {
+            this._markElementDirty(g, UpdateType.ELEMENT_UPDATED);
+          });
+          this.refresh();
+        }
+
+        lastSet = groupRelatedSelection;
+      })
+    );
+  }
+
+  addOverlay = (overlay: Overlay) => {
+    overlay.setRenderer(null);
+    this._overlays.add(overlay);
+    this.refresh();
+  };
+
+  attach = (container: HTMLElement) => {
+    this._container = container;
+    container.append(this.rootElement);
+
+    this._resetSize();
+    this.refresh();
+  };
+
+  dispose = () => {
+    this._overlays.forEach(overlay => overlay.dispose());
+    this._overlays.clear();
+    this._disposables.dispose();
+
+    if (this._refreshRafId) {
+      cancelAnimationFrame(this._refreshRafId);
+      this._refreshRafId = null;
+    }
+    if (this._sizeUpdatedRafId) {
+      cancelAnimationFrame(this._sizeUpdatedRafId);
+      this._sizeUpdatedRafId = null;
+    }
+
+    this.rootElement.remove();
+    this._elementsMap.clear();
+  };
+
+  generateColorProperty = (color: Color, fallback?: Color) => {
+    return (
+      this.provider.generateColorProperty?.(color, fallback) ?? 'transparent'
+    );
+  };
+
+  getColorScheme = () => {
+    return this.provider.getColorScheme?.() ?? ColorScheme.Light;
+  };
+
+  getColorValue = (color: Color, fallback?: Color, real?: boolean) => {
+    return (
+      this.provider.getColorValue?.(color, fallback, real) ?? 'transparent'
+    );
+  };
+
+  getPropertyValue = (property: string) => {
+    return this.provider.getPropertyValue?.(property) ?? '';
+  };
+
+  refresh = () => {
+    if (this._refreshRafId !== null) return;
+
+    this._refreshRafId = requestConnectedFrame(() => {
+      this._refreshRafId = null;
+      this._render();
+    }, this._container);
+  };
+
+  removeOverlay = (overlay: Overlay) => {
+    if (!this._overlays.has(overlay)) {
+      return;
+    }
+
+    this._overlays.delete(overlay);
+    this.refresh();
+  };
+
+  /**
+   * Mark a specific element as dirty for incremental updates
+   * @param elementId - The ID of the element to mark as dirty
+   * @param updateType - The type of update (optional, defaults to ELEMENT_UPDATED)
+   */
+  markElementDirty = (
+    elementId: string,
+    updateType: UpdateType = UpdateType.ELEMENT_UPDATED
+  ) => {
+    this._markElementDirty(elementId, updateType);
+  };
+
+  /**
+   * Force a full re-render of all elements
+   */
+  forceFullRender = () => {
+    this._updateState.viewportDirty = true;
+    this.refresh();
+  };
+
+  private _markElementDirty(
+    elementId: string,
+    updateType: UpdateType,
+    elementModel?: SurfaceElementModel
+  ) {
+    this._updateState.dirtyElementIds.add(elementId);
+    if (updateType === UpdateType.ELEMENT_REMOVED) {
+      this._pendingElements.delete(elementId);
+    } else {
+      const model =
+        elementModel ?? this._surfaceModel.getElementById(elementId);
+      if (model) {
+        this._pendingElements.set(elementId, model as SurfaceElementModel);
+      }
+    }
+
+    const currentUpdates =
+      this._updateState.pendingUpdates.get(elementId) || [];
+    if (!currentUpdates.includes(updateType)) {
+      currentUpdates.push(updateType);
+      this._updateState.pendingUpdates.set(elementId, currentUpdates);
+    }
+  }
+
+  private _markViewportDirty() {
+    this._updateState.viewportDirty = true;
+  }
+
+  private _markSizeDirty() {
+    this._updateState.sizeDirty = true;
+  }
+
+  private _markUsePlaceholderDirty() {
+    this._updateState.usePlaceholderDirty = true;
+  }
+
+  private _clearUpdateState() {
+    this._updateState.dirtyElementIds.clear();
+    this._updateState.viewportDirty = false;
+    this._updateState.sizeDirty = false;
+    this._updateState.usePlaceholderDirty = false;
+    this._updateState.pendingUpdates.clear();
+  }
+
+  private _isViewportChanged(): boolean {
+    const { viewportBounds, zoom } = this.viewport;
+
+    if (!this._lastViewportBounds || !this._lastZoom) {
+      return true;
+    }
+
+    return (
+      this._lastViewportBounds.x !== viewportBounds.x ||
+      this._lastViewportBounds.y !== viewportBounds.y ||
+      this._lastViewportBounds.w !== viewportBounds.w ||
+      this._lastViewportBounds.h !== viewportBounds.h ||
+      this._lastZoom !== zoom
+    );
+  }
+
+  private _isUsePlaceholderChanged(): boolean {
+    return this._lastUsePlaceholder !== this.usePlaceholder;
+  }
+
+  private _elementInViewport(
+    elementModel: SurfaceElementModel,
+    viewportBounds: Bound
+  ) {
+    const display = (elementModel.display ?? true) && !elementModel.hidden;
+    return (
+      display && intersects(getBoundWithRotation(elementModel), viewportBounds)
+    );
+  }
+
+  private _getPendingElementsInViewport(viewportBounds: Bound) {
+    const elements: SurfaceElementModel[] = [];
+
+    for (const [id, elementModel] of this._pendingElements) {
+      this._pendingElements.delete(id);
+      if (this._elementInViewport(elementModel, viewportBounds)) {
+        elements.push(elementModel);
+      }
+    }
+
+    return elements;
+  }
+
+  private _getElementsInViewport(viewportBounds: Bound) {
+    const elements = this.grid.search(viewportBounds, {
+      filter: ['canvas', 'local'],
+    }) as SurfaceElementModel[];
+
+    const elementsById = new Map<string, SurfaceElementModel>();
+    for (const elementModel of elements) {
+      if (this._elementInViewport(elementModel, viewportBounds)) {
+        elementsById.set(elementModel.id, elementModel);
+        this._pendingElements.delete(elementModel.id);
+      }
+    }
+
+    for (const elementModel of this._getPendingElementsInViewport(
+      viewportBounds
+    )) {
+      elementsById.set(elementModel.id, elementModel);
+    }
+
+    return Array.from(elementsById.values());
+  }
+
+  private _updateLastState() {
+    const { viewportBounds, zoom } = this.viewport;
+    this._lastViewportBounds = {
+      x: viewportBounds.x,
+      y: viewportBounds.y,
+      w: viewportBounds.w,
+      h: viewportBounds.h,
+    } as Bound;
+    this._lastZoom = zoom;
+    this._lastUsePlaceholder = this.usePlaceholder;
+  }
+
+  private _renderIncremental() {
+    const { viewportBounds, zoom } = this.viewport;
+    const addedElements: HTMLElement[] = [];
+    const elementsToRemove: HTMLElement[] = [];
+
+    const needsFullRender =
+      this._isViewportChanged() ||
+      this._isUsePlaceholderChanged() ||
+      this._updateState.sizeDirty ||
+      this._updateState.viewportDirty ||
+      this._updateState.usePlaceholderDirty;
+
+    if (needsFullRender) {
+      this._renderFull();
+      this._updateLastState();
+      this._clearUpdateState();
+      return;
+    }
+
+    // Only update dirty elements
+    const elementsInViewport = this._getElementsInViewport(viewportBounds);
+
+    const visibleElementIds = new Set<string>();
+
+    // 1. Update dirty elements
+    for (const elementModel of elementsInViewport) {
+      visibleElementIds.add(elementModel.id);
+
+      // Only update dirty elements
+      if (this._updateState.dirtyElementIds.has(elementModel.id)) {
+        if (
+          this.usePlaceholder &&
+          !(elementModel as GfxCompatibleInterface).forceFullRender
+        ) {
+          this._renderOrUpdatePlaceholder(
+            elementModel,
+            viewportBounds,
+            zoom,
+            addedElements
+          );
+        } else {
+          this._renderOrUpdateFullElement(
+            elementModel,
+            viewportBounds,
+            zoom,
+            addedElements
+          );
+        }
+      }
+    }
+
+    // 2. Remove elements that are no longer in the grid
+    for (const elementId of this._updateState.dirtyElementIds) {
+      const updateTypes = this._updateState.pendingUpdates.get(elementId) || [];
+      if (
+        updateTypes.includes(UpdateType.ELEMENT_REMOVED) ||
+        !visibleElementIds.has(elementId)
+      ) {
+        const domElem = this._elementsMap.get(elementId);
+        if (domElem) {
+          domElem.remove();
+          this._elementsMap.delete(elementId);
+          elementsToRemove.push(domElem);
+        }
+      }
+    }
+
+    // 3. Notify changes
+    if (addedElements.length > 0 || elementsToRemove.length > 0) {
+      this.elementsUpdated.next({
+        elements: Array.from(this._elementsMap.values()),
+        added: addedElements,
+        removed: elementsToRemove,
+      });
+    }
+
+    this._updateLastState();
+    this._clearUpdateState();
+  }
+
+  private _renderFull() {
+    const { viewportBounds, zoom } = this.viewport;
+    const addedElements: HTMLElement[] = [];
+    const elementsToRemove: HTMLElement[] = [];
+
+    const elementsInViewport = this._getElementsInViewport(viewportBounds);
+    const visibleElementIds = new Set<string>();
+
+    for (const elementModel of elementsInViewport) {
+      visibleElementIds.add(elementModel.id);
+
+      if (
+        this.usePlaceholder &&
+        !(elementModel as GfxCompatibleInterface).forceFullRender
+      ) {
+        this._renderOrUpdatePlaceholder(
+          elementModel,
+          viewportBounds,
+          zoom,
+          addedElements
+        );
+      } else {
+        this._renderOrUpdateFullElement(
+          elementModel,
+          viewportBounds,
+          zoom,
+          addedElements
+        );
+      }
+    }
+
+    const currentRenderedElementIds = Array.from(this._elementsMap.keys());
+    for (const id of currentRenderedElementIds) {
+      if (!visibleElementIds.has(id)) {
+        const domElem = this._elementsMap.get(id);
+        if (domElem) {
+          domElem.remove();
+          this._elementsMap.delete(id);
+          if (!elementsToRemove.includes(domElem)) {
+            elementsToRemove.push(domElem);
+          }
+        }
+      }
+    }
+
+    if (addedElements.length > 0 || elementsToRemove.length > 0) {
+      this.elementsUpdated.next({
+        elements: Array.from(this._elementsMap.values()),
+        added: addedElements,
+        removed: elementsToRemove,
+      });
+    }
+  }
+}

blocksuite/affine/blocks/surface/src/renderer/elements/index.ts

@@ -0,0 +1,22 @@
+import type { IBound } from '@blocksuite/global/gfx';
+import type {
+  GfxLocalElementModel,
+  GfxPrimitiveElementModel,
+} from '@blocksuite/std/gfx';
+
+import type { RoughCanvas } from '../../index.js';
+import type { CanvasRenderer } from '../canvas-renderer.js';
+
+export type ElementRenderer<
+  T extends GfxPrimitiveElementModel | GfxLocalElementModel =
+    GfxPrimitiveElementModel,
+> = (
+  model: T,
+  ctx: CanvasRenderingContext2D,
+  matrix: DOMMatrix,
+  renderer: CanvasRenderer,
+  rc: RoughCanvas,
+  viewportBound: IBound
+) => void;
+
+export const elementRendererExtensions = [];

blocksuite/affine/blocks/surface/src/renderer/elements/type.ts

@@ -0,0 +1,6 @@
+import type {
+  ShapeElementModel,
+  TextElementModel,
+} from '@blocksuite/affine-model';
+
+export type CanvasElementWithText = ShapeElementModel | TextElementModel;

blocksuite/affine/blocks/surface/src/renderer/overlay.ts

@@ -0,0 +1,57 @@
+import { type Container, createIdentifier } from '@blocksuite/global/di';
+import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
+import {
+  type GfxController,
+  GfxControllerIdentifier,
+} from '@blocksuite/std/gfx';
+import { Extension } from '@blocksuite/store';
+
+import type { RoughCanvas } from '../utils/rough/canvas.js';
+import type { CanvasRenderer } from './canvas-renderer.js';
+
+/**
+ * An overlay is a layer covered on top of elements,
+ * can be used for rendering non-CRDT state indicators.
+ */
+export abstract class Overlay extends Extension {
+  static overlayName: string = '';
+
+  protected _renderer: CanvasRenderer | null = null;
+
+  constructor(protected gfx: GfxController) {
+    super();
+  }
+
+  static override setup(di: Container): void {
+    if (!this.overlayName) {
+      throw new BlockSuiteError(
+        ErrorCode.ValueNotExists,
+        `The overlay constructor '${this.name}' should have a static 'overlayName' property.`
+      );
+    }
+
+    di.addImpl(OverlayIdentifier(this.overlayName), this, [
+      GfxControllerIdentifier,
+    ]);
+  }
+
+  clear() {
+    this.refresh();
+  }
+
+  dispose() {}
+
+  refresh() {
+    if (this._renderer) {
+      this._renderer.refresh();
+    }
+  }
+
+  abstract render(ctx: CanvasRenderingContext2D, rc: RoughCanvas): void;
+
+  setRenderer(renderer: CanvasRenderer | null) {
+    this._renderer = renderer;
+  }
+}
+
+export const OverlayIdentifier = createIdentifier<Overlay>('Overlay');

blocksuite/affine/blocks/surface/src/renderer/placeholder-style.ts

@@ -0,0 +1,10 @@
+import { type ColorScheme } from '@blocksuite/affine-model';
+import { getAffinePlaceholderFillColor } from '@blocksuite/affine-shared/theme';
+
+export function getSurfacePlaceholderFallback(colorScheme: ColorScheme) {
+  return getAffinePlaceholderFillColor(colorScheme);
+}
+
+export function resolveSurfacePlaceholderColor(colorScheme: ColorScheme) {
+  return getSurfacePlaceholderFallback(colorScheme);
+}

blocksuite/affine/blocks/surface/src/renderer/tool-overlay.ts

@@ -0,0 +1,44 @@
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import { noop } from '@blocksuite/global/utils';
+import type { GfxController } from '@blocksuite/std/gfx';
+import { startWith } from 'rxjs';
+
+import type { RoughCanvas } from '../utils/rough/canvas';
+import { Overlay } from './overlay';
+
+export class ToolOverlay extends Overlay {
+  protected disposables = new DisposableGroup();
+
+  globalAlpha: number;
+
+  x: number;
+
+  y: number;
+
+  constructor(gfx: GfxController) {
+    super(gfx);
+    this.x = 0;
+    this.y = 0;
+    this.globalAlpha = 1;
+    this.gfx = gfx;
+
+    this.disposables.add(
+      this.gfx.viewport.viewportUpdated.pipe(startWith(null)).subscribe(() => {
+        // when viewport is updated, we should keep the overlay in the same position
+        // to get last mouse position and convert it to model coordinates
+        const pos = this.gfx.tool.lastMouseViewPos$.value;
+        const [x, y] = this.gfx.viewport.toModelCoord(pos.x, pos.y);
+        this.x = x;
+        this.y = y;
+      })
+    );
+  }
+
+  override dispose(): void {
+    this.disposables.dispose();
+  }
+
+  render(ctx: CanvasRenderingContext2D, rc: RoughCanvas): void {
+    noop([ctx, rc]);
+  }
+}

blocksuite/affine/blocks/surface/src/store.ts

@@ -0,0 +1,17 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { EdgelessSurfaceBlockAdapterExtensions } from './adapters';
+import { SurfaceBlockSchemaExtension } from './surface-model';
+
+export class SurfaceStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-surface-block';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(SurfaceBlockSchemaExtension);
+    context.register(EdgelessSurfaceBlockAdapterExtensions);
+  }
+}

blocksuite/affine/blocks/surface/src/surface-block-void.ts

@@ -0,0 +1,16 @@
+import { BlockComponent } from '@blocksuite/std';
+import { nothing } from 'lit';
+
+import type { SurfaceBlockModel } from './surface-model.js';
+
+export class SurfaceBlockVoidComponent extends BlockComponent<SurfaceBlockModel> {
+  override render() {
+    return nothing;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-surface-void': SurfaceBlockVoidComponent;
+  }
+}

blocksuite/affine/blocks/surface/src/surface-block.ts

@@ -0,0 +1,255 @@
+import type { Color } from '@blocksuite/affine-model';
+import {
+  FeatureFlagService,
+  ThemeProvider,
+} from '@blocksuite/affine-shared/services';
+import { Bound } from '@blocksuite/global/gfx';
+import type { EditorHost, SurfaceSelection } from '@blocksuite/std';
+import { BlockComponent } from '@blocksuite/std';
+import { GfxControllerIdentifier, type Viewport } from '@blocksuite/std/gfx';
+import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
+import { css, html } from 'lit';
+import { query } from 'lit/decorators.js';
+import type { Subject } from 'rxjs';
+
+import { ConnectorElementModel } from './element-model/index.js';
+import { CanvasRenderer } from './renderer/canvas-renderer.js';
+import { DomRenderer } from './renderer/dom-renderer.js';
+import { OverlayIdentifier } from './renderer/overlay.js';
+import type { SurfaceBlockModel } from './surface-model.js';
+
+export interface SurfaceContext {
+  viewport: Viewport;
+  host: EditorHost;
+  selection: {
+    selectedIds: string[];
+    slots: {
+      updated: Subject<SurfaceSelection[]>;
+    };
+  };
+}
+
+export class SurfaceBlockComponent extends BlockComponent<SurfaceBlockModel> {
+  static isConnector = (element: unknown): element is ConnectorElementModel => {
+    return element instanceof ConnectorElementModel;
+  };
+
+  static override styles = css`
+    .affine-edgeless-surface-block-container {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+
+    .affine-edgeless-surface-block-container canvas {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    edgeless-block-portal-container {
+      position: relative;
+      box-sizing: border-box;
+      overflow: hidden;
+      display: block;
+      height: 100%;
+      font-family: var(--affine-font-family);
+      font-size: var(--affine-font-base);
+      line-height: var(--affine-line-height);
+      color: var(--affine-text-primary-color);
+      font-weight: 400;
+    }
+
+    .affine-block-children-container.edgeless {
+      padding-left: 0;
+      position: relative;
+      overflow: hidden;
+      height: 100%;
+      /**
+       * Fix: pointerEvent stops firing after a short time.
+       * When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors,
+       * up to the one that implements the gesture (in other words, the first containing scrolling element)
+       * https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
+       */
+      touch-action: none;
+      background-color: var(--affine-background-primary-color);
+      background-image: radial-gradient(
+        var(--affine-edgeless-grid-color) 1px,
+        var(--affine-background-primary-color) 1px
+      );
+      z-index: 0;
+    }
+
+    .affine-edgeless-block-child {
+      position: absolute;
+      transform-origin: center;
+      box-sizing: border-box;
+      border: 2px solid var(--affine-white-10);
+      border-radius: 8px;
+      box-shadow: var(--affine-shadow-3);
+      pointer-events: all;
+    }
+  `;
+
+  private _cachedViewport = new Bound();
+
+  private readonly _initThemeObserver = () => {
+    const theme = this.std.get(ThemeProvider);
+    this.disposables.add(theme.theme$.subscribe(() => this.requestUpdate()));
+  };
+
+  private _lastTime = 0;
+
+  private _renderer!: CanvasRenderer | DomRenderer;
+
+  fitToViewport = (bound: Bound) => {
+    const { viewport } = this._gfx;
+    bound = bound.expand(30);
+    if (Date.now() - this._lastTime > 200)
+      this._cachedViewport = viewport.viewportBounds;
+    this._lastTime = Date.now();
+
+    if (this._cachedViewport.contains(bound)) return;
+
+    this._cachedViewport = this._cachedViewport.unite(bound);
+    viewport.setViewportByBound(this._cachedViewport, [0, 0, 0, 0], true);
+  };
+
+  refresh = () => {
+    this._renderer?.refresh();
+  };
+
+  private get _gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  get renderer() {
+    return this._renderer;
+  }
+
+  private _initOverlays() {
+    this.std.provider.getAll(OverlayIdentifier).forEach(overlay => {
+      this._renderer.addOverlay(overlay);
+    });
+
+    this._disposables.add(() => {
+      this.std.provider.getAll(OverlayIdentifier).forEach(overlay => {
+        this._renderer.removeOverlay(overlay);
+      });
+    });
+  }
+
+  private _initRenderer() {
+    const gfx = this._gfx;
+    const themeService = this.std.get(ThemeProvider);
+    const featureFlagService = this.std.get(FeatureFlagService);
+    const useDOMRenderer = featureFlagService.getFlag('enable_dom_renderer');
+
+    const rendererOptions = {
+      std: this.std,
+      viewport: gfx.viewport,
+      layerManager: gfx.layer,
+      gridManager: gfx.grid,
+      provider: {
+        generateColorProperty: (color: Color, fallback?: Color) =>
+          themeService.generateColorProperty(
+            color,
+            fallback,
+            themeService.edgelessTheme
+          ),
+        getColorValue: (color: Color, fallback?: Color, real?: boolean) =>
+          themeService.getColorValue(
+            color,
+            fallback,
+            real,
+            themeService.edgelessTheme
+          ),
+        getColorScheme: () => themeService.edgelessTheme,
+        getPropertyValue: (property: string) =>
+          themeService.getCssVariableColor(
+            property,
+            themeService.edgelessTheme
+          ),
+        selectedElements: () => gfx.selection.selectedIds,
+      },
+      surfaceModel: this.model,
+    };
+
+    if (useDOMRenderer) {
+      this._renderer = new DomRenderer(rendererOptions);
+      this._disposables.add(() => this._renderer.dispose());
+    } else {
+      this._renderer = new CanvasRenderer({
+        ...rendererOptions,
+        enableStackingCanvas: true,
+        onStackingCanvasCreated(canvas) {
+          canvas.className = 'indexable-canvas';
+        },
+      });
+
+      this._disposables.add(() => {
+        this._renderer.dispose();
+      });
+
+      this._disposables.add(
+        this._renderer.stackingCanvasUpdated.subscribe(payload => {
+          if (payload.added.length) {
+            this._surfaceContainer.append(...payload.added);
+          }
+
+          if (payload.removed.length) {
+            payload.removed.forEach(canvas => {
+              canvas.remove();
+            });
+          }
+        })
+      );
+    }
+
+    this._disposables.add(
+      gfx.selection.slots.updated.subscribe(() => {
+        this._renderer.refresh();
+      })
+    );
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
+
+    this._initThemeObserver();
+    this._initRenderer();
+    this._initOverlays();
+  }
+
+  override firstUpdated() {
+    this._renderer.attach(this._surfaceContainer);
+
+    if ('stackingCanvas' in this._renderer) {
+      this._renderer['_render']();
+      this._surfaceContainer.append(...this._renderer.stackingCanvas);
+    }
+  }
+
+  override render() {
+    return html`
+      <div class="affine-edgeless-surface-block-container">
+        <!-- attach canvas later in renderer -->
+      </div>
+    `;
+  }
+
+  @query('.affine-edgeless-surface-block-container')
+  private accessor _surfaceContainer!: HTMLElement;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-surface': SurfaceBlockComponent;
+  }
+}

blocksuite/affine/blocks/surface/src/surface-model.ts

@@ -0,0 +1,223 @@
+import type {
+  ConnectorElementModel,
+  SurfaceElementModelMap,
+} from '@blocksuite/affine-model';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import type { SurfaceBlockProps } from '@blocksuite/std/gfx';
+import { SurfaceBlockModel as BaseSurfaceModel } from '@blocksuite/std/gfx';
+import { BlockSchemaExtension, defineBlockSchema } from '@blocksuite/store';
+import * as Y from 'yjs';
+
+import { elementsCtorMap } from './element-model/index.js';
+import { surfaceMiddlewareIdentifier } from './extensions/surface-middleware.js';
+import { SurfaceBlockTransformer } from './surface-transformer.js';
+
+export const SurfaceBlockSchema = defineBlockSchema({
+  flavour: 'affine:surface',
+  props: (internalPrimitives): SurfaceBlockProps => ({
+    elements: internalPrimitives.Boxed(new Y.Map()),
+  }),
+  metadata: {
+    version: 5,
+    role: 'hub',
+    parent: ['@root'],
+    children: [
+      'affine:frame',
+      'affine:image',
+      'affine:bookmark',
+      'affine:attachment',
+      'affine:embed-*',
+      'affine:edgeless-text',
+    ],
+  },
+  transformer: transformerConfigs =>
+    new SurfaceBlockTransformer(transformerConfigs),
+  toModel: () => new SurfaceBlockModel(),
+});
+
+export const SurfaceBlockSchemaExtension =
+  BlockSchemaExtension(SurfaceBlockSchema);
+
+export class SurfaceBlockModel extends BaseSurfaceModel {
+  private readonly _disposables: DisposableGroup = new DisposableGroup();
+  private readonly _connectorIdsByEndpoint = new Map<string, Set<string>>();
+  private readonly _connectorIndexDisposables = new DisposableGroup();
+  private readonly _connectorEndpoints = new Map<
+    string,
+    { sourceId: string | null; targetId: string | null }
+  >();
+
+  private _addConnectorEndpoint(endpointId: string, connectorId: string) {
+    const connectorIds = this._connectorIdsByEndpoint.get(endpointId);
+
+    if (connectorIds) {
+      connectorIds.add(connectorId);
+      return;
+    }
+
+    this._connectorIdsByEndpoint.set(endpointId, new Set([connectorId]));
+  }
+
+  private _isConnectorModel(model: unknown): model is ConnectorElementModel {
+    return (
+      !!model &&
+      typeof model === 'object' &&
+      'type' in model &&
+      (model as { type?: string }).type === 'connector'
+    );
+  }
+
+  private _removeConnectorEndpoint(endpointId: string, connectorId: string) {
+    const connectorIds = this._connectorIdsByEndpoint.get(endpointId);
+
+    if (!connectorIds) {
+      return;
+    }
+
+    connectorIds.delete(connectorId);
+
+    if (connectorIds.size === 0) {
+      this._connectorIdsByEndpoint.delete(endpointId);
+    }
+  }
+
+  private _removeConnectorFromIndex(connectorId: string) {
+    const endpoints = this._connectorEndpoints.get(connectorId);
+
+    if (!endpoints) {
+      return;
+    }
+
+    if (endpoints.sourceId) {
+      this._removeConnectorEndpoint(endpoints.sourceId, connectorId);
+    }
+
+    if (endpoints.targetId) {
+      this._removeConnectorEndpoint(endpoints.targetId, connectorId);
+    }
+
+    this._connectorEndpoints.delete(connectorId);
+  }
+
+  private _rebuildConnectorIndex() {
+    this._connectorIdsByEndpoint.clear();
+    this._connectorEndpoints.clear();
+
+    this.getElementsByType('connector').forEach(connector => {
+      this._setConnectorEndpoints(connector as ConnectorElementModel);
+    });
+  }
+
+  private _setConnectorEndpoints(connector: ConnectorElementModel) {
+    const sourceId = connector.source?.id ?? null;
+    const targetId = connector.target?.id ?? null;
+    const previousEndpoints = this._connectorEndpoints.get(connector.id);
+
+    if (
+      previousEndpoints?.sourceId === sourceId &&
+      previousEndpoints?.targetId === targetId
+    ) {
+      return;
+    }
+
+    if (previousEndpoints?.sourceId) {
+      this._removeConnectorEndpoint(previousEndpoints.sourceId, connector.id);
+    }
+
+    if (previousEndpoints?.targetId) {
+      this._removeConnectorEndpoint(previousEndpoints.targetId, connector.id);
+    }
+
+    if (sourceId) {
+      this._addConnectorEndpoint(sourceId, connector.id);
+    }
+
+    if (targetId) {
+      this._addConnectorEndpoint(targetId, connector.id);
+    }
+
+    this._connectorEndpoints.set(connector.id, {
+      sourceId,
+      targetId,
+    });
+  }
+
+  override _init() {
+    this._extendElement(elementsCtorMap);
+    super._init();
+    this._rebuildConnectorIndex();
+    this._connectorIndexDisposables.add(
+      this.elementAdded.subscribe(({ id }) => {
+        const model = this.getElementById(id);
+
+        if (this._isConnectorModel(model)) {
+          this._setConnectorEndpoints(model);
+        }
+      })
+    );
+    this._connectorIndexDisposables.add(
+      this.elementUpdated.subscribe(({ id, props }) => {
+        if (!props['source'] && !props['target']) {
+          return;
+        }
+
+        const model = this.getElementById(id);
+
+        if (this._isConnectorModel(model)) {
+          this._setConnectorEndpoints(model);
+        }
+      })
+    );
+    this._connectorIndexDisposables.add(
+      this.elementRemoved.subscribe(({ id, type }) => {
+        if (type === 'connector') {
+          this._removeConnectorFromIndex(id);
+        }
+      })
+    );
+    this.deleted.subscribe(() => {
+      this._connectorIndexDisposables.dispose();
+      this._connectorIdsByEndpoint.clear();
+      this._connectorEndpoints.clear();
+    });
+    this.store.provider
+      .getAll(surfaceMiddlewareIdentifier)
+      .forEach(({ middleware }) => {
+        this._disposables.add(middleware(this));
+      });
+  }
+
+  getConnectors(id: string) {
+    const connectorIds = this._connectorIdsByEndpoint.get(id);
+
+    if (!connectorIds?.size) {
+      return [];
+    }
+
+    const staleConnectorIds: string[] = [];
+    const connectors: ConnectorElementModel[] = [];
+
+    connectorIds.forEach(connectorId => {
+      const model = this.getElementById(connectorId);
+
+      if (!this._isConnectorModel(model)) {
+        staleConnectorIds.push(connectorId);
+        return;
+      }
+
+      connectors.push(model);
+    });
+
+    staleConnectorIds.forEach(connectorId => {
+      this._removeConnectorFromIndex(connectorId);
+    });
+
+    return connectors;
+  }
+
+  override getElementsByType<K extends keyof SurfaceElementModelMap>(
+    type: K
+  ): SurfaceElementModelMap[K][] {
+    return super.getElementsByType(type) as SurfaceElementModelMap[K][];
+  }
+}

blocksuite/affine/blocks/surface/src/surface-transformer.ts

@@ -0,0 +1,115 @@
+import type { SurfaceBlockProps } from '@blocksuite/std/gfx';
+import {
+  SURFACE_TEXT_UNIQ_IDENTIFIER,
+  SURFACE_YMAP_UNIQ_IDENTIFIER,
+} from '@blocksuite/std/gfx';
+import type {
+  FromSnapshotPayload,
+  SnapshotNode,
+  ToSnapshotPayload,
+} from '@blocksuite/store';
+import { BaseBlockTransformer } from '@blocksuite/store';
+import * as Y from 'yjs';
+
+export class SurfaceBlockTransformer extends BaseBlockTransformer<SurfaceBlockProps> {
+  private _elementToJSON(element: Y.Map<unknown>) {
+    const value: Record<string, unknown> = {};
+    element.forEach((_value, _key) => {
+      value[_key] = this._toJSON(_value);
+    });
+
+    return value;
+  }
+
+  private _fromJSON(value: unknown): unknown {
+    if (value instanceof Object) {
+      if (Reflect.has(value, SURFACE_TEXT_UNIQ_IDENTIFIER)) {
+        const yText = new Y.Text();
+        yText.applyDelta(Reflect.get(value, 'delta'));
+        return yText;
+      } else if (Reflect.has(value, SURFACE_YMAP_UNIQ_IDENTIFIER)) {
+        const yMap = new Y.Map();
+        const json = Reflect.get(value, 'json') as Record<string, unknown>;
+        Object.entries(json).forEach(([key, value]) => {
+          yMap.set(key, value);
+        });
+        return yMap;
+      }
+    }
+    return value;
+  }
+
+  private _toJSON(value: unknown): unknown {
+    if (value instanceof Y.Text) {
+      return {
+        [SURFACE_TEXT_UNIQ_IDENTIFIER]: true,
+        delta: value.toDelta(),
+      };
+    } else if (value instanceof Y.Map) {
+      return {
+        [SURFACE_YMAP_UNIQ_IDENTIFIER]: true,
+        json: value.toJSON(),
+      };
+    }
+    return value;
+  }
+
+  elementFromJSON(element: Record<string, unknown>) {
+    const yMap = new Y.Map();
+    Object.entries(element).forEach(([key, value]) => {
+      yMap.set(key, this._fromJSON(value));
+    });
+
+    return yMap;
+  }
+
+  override async fromSnapshot(
+    payload: FromSnapshotPayload
+  ): Promise<SnapshotNode<SurfaceBlockProps>> {
+    const snapshotRet = await super.fromSnapshot(payload);
+    const elementsJSON = snapshotRet.props.elements as unknown as Record<
+      string,
+      unknown
+    >;
+    const yMap = new Y.Map<Y.Map<unknown>>();
+
+    Object.entries(elementsJSON).forEach(([key, value]) => {
+      const element = this.elementFromJSON(value as Record<string, unknown>);
+
+      yMap.set(key, element);
+    });
+
+    const elements = this._internal.Boxed(yMap);
+
+    snapshotRet.props = {
+      elements,
+    };
+
+    return snapshotRet;
+  }
+
+  override toSnapshot(payload: ToSnapshotPayload<SurfaceBlockProps>) {
+    const snapshot = super.toSnapshot(payload);
+    const elementsValue = payload.model.props.elements.getValue();
+    const value: Record<string, unknown> = {};
+    /**
+     * When the selectedElements is defined, only the selected elements will be serialized.
+     */
+    const selectedElements = this.transformerConfigs.get(
+      'selectedElements'
+    ) as Set<string>;
+
+    if (elementsValue) {
+      elementsValue.forEach((element, key) => {
+        if (selectedElements?.has(key) || !selectedElements) {
+          value[key] = this._elementToJSON(element as Y.Map<unknown>);
+        }
+      });
+    }
+    snapshot.props = {
+      elements: value,
+    };
+
+    return snapshot;
+  }
+}

blocksuite/affine/blocks/surface/src/tool/default-tool.ts

@@ -0,0 +1,349 @@
+import { resetNativeSelection } from '@blocksuite/affine-shared/utils';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import type { IVec } from '@blocksuite/global/gfx';
+import type { PointerEventState } from '@blocksuite/std';
+import {
+  BaseTool,
+  type GfxModel,
+  InteractivityIdentifier,
+  isGfxGroupCompatibleModel,
+} from '@blocksuite/std/gfx';
+import { effect } from '@preact/signals-core';
+
+import { calPanDelta } from './panning-utils.js';
+
+export enum DefaultModeDragType {
+  /** Moving selected contents */
+  ContentMoving = 'content-moving',
+  /** Native range dragging inside active note block */
+  NativeEditing = 'native-editing',
+  /** Default void state */
+  None = 'none',
+  /** Expanding the dragging area, select the content covered inside */
+  Selecting = 'selecting',
+}
+
+export class DefaultTool extends BaseTool {
+  static override toolName: string = 'default';
+
+  private _edgeScrollingTimer: number | null = null;
+
+  private readonly _clearDisposable = () => {
+    if (this._disposables) {
+      this._disposables.dispose();
+      this._disposables = null;
+    }
+  };
+
+  private readonly _clearSelectingState = () => {
+    this._stopEdgeScrolling();
+    this._clearDisposable();
+  };
+
+  private _disposables: DisposableGroup | null = null;
+
+  private _scrollViewport(delta: IVec) {
+    this.gfx.viewport.applyDeltaCenter(delta[0], delta[1]);
+  }
+
+  private _spaceTranslationRect: null | {
+    w: number;
+    h: number;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+  } = null;
+
+  private readonly _enableEdgeScrolling = (delta: IVec) => {
+    this._stopEdgeScrolling();
+    this._scrollViewport(delta);
+
+    this._edgeScrollingTimer = window.setInterval(() => {
+      this._scrollViewport(delta);
+    }, 30);
+  };
+
+  private readonly _stopEdgeScrolling = () => {
+    if (this._edgeScrollingTimer) {
+      clearInterval(this._edgeScrollingTimer);
+      this._edgeScrollingTimer = null;
+    }
+  };
+
+  private _toBeMoved: GfxModel[] = [];
+
+  private readonly _updateSelection = () => {
+    const { gfx } = this;
+
+    if (gfx.keyboard.spaceKey$.peek() && this._spaceTranslationRect) {
+      const { w, h, startX, startY, endX, endY } = this._spaceTranslationRect;
+      const { endX: lastX, endY: lastY } = this.controller.draggingArea$.peek();
+
+      const dx = lastX - endX;
+      const dy = lastY - endY;
+
+      this.controller.draggingArea$.value = {
+        x: Math.min(startX + dx, lastX),
+        y: Math.min(startY + dy, lastY),
+        w,
+        h,
+        startX: startX + dx,
+        startY: startY + dy,
+        endX: endX + dx,
+        endY: endY + dy,
+      };
+    }
+
+    const elements = this.interactivity?.handleBoxSelection({
+      box: this.controller.draggingArea$.peek(),
+    });
+
+    if (!elements) return;
+
+    this.selection.set({
+      elements: elements.map(el => el.id),
+      editing: false,
+    });
+  };
+
+  dragType = DefaultModeDragType.None;
+
+  movementDragging = false;
+
+  /**
+   * Get the end position of the dragging area in the model coordinate
+   */
+  get dragLastPos() {
+    const { endX, endY } = this.controller.draggingArea$.peek();
+
+    return [endX, endY] as IVec;
+  }
+
+  /**
+   * Get the start position of the dragging area in the model coordinate
+   */
+  get dragStartPos() {
+    const { startX, startY } = this.controller.draggingArea$.peek();
+
+    return [startX, startY] as IVec;
+  }
+
+  get selection() {
+    return this.gfx.selection;
+  }
+
+  get interactivity() {
+    return this.std.getOptional(InteractivityIdentifier);
+  }
+
+  private async _cloneContent() {
+    const clonedResult = await this.interactivity?.requestElementClone({
+      elements: this._toBeMoved,
+    });
+
+    if (!clonedResult) return;
+
+    this._toBeMoved = clonedResult.elements;
+    this.selection.set({
+      elements: this._toBeMoved.map(e => e.id),
+      editing: false,
+    });
+  }
+
+  private _determineDragType(evt: PointerEventState): DefaultModeDragType {
+    const { x, y } = this.controller.lastMousePos$.peek();
+    if (this.selection.isInSelectedRect(x, y)) {
+      return this.selection.editing
+        ? DefaultModeDragType.NativeEditing
+        : DefaultModeDragType.ContentMoving;
+    } else {
+      const checked = this.interactivity?.handleElementSelection(evt);
+
+      if (checked) {
+        return DefaultModeDragType.ContentMoving;
+      } else {
+        return DefaultModeDragType.Selecting;
+      }
+    }
+  }
+
+  private initializeDragState(
+    dragType: DefaultModeDragType,
+    event: PointerEventState
+  ) {
+    this.dragType = dragType;
+
+    this._clearDisposable();
+    this._disposables = new DisposableGroup();
+
+    // If the drag type is selecting, set up the dragging area disposable group
+    // If the viewport updates when dragging, should update the dragging area and selection
+    if (this.dragType === DefaultModeDragType.Selecting) {
+      this._disposables.add(
+        this.gfx.viewport.viewportUpdated.subscribe(() => {
+          if (
+            this.dragType === DefaultModeDragType.Selecting &&
+            this.controller.dragging$.peek()
+          ) {
+            this._updateSelection();
+          }
+        })
+      );
+      return;
+    }
+
+    if (this.dragType === DefaultModeDragType.ContentMoving) {
+      if (this.interactivity) {
+        this.doc.captureSync();
+        this.interactivity.handleElementMove({
+          movingElements: this._toBeMoved,
+          event: event.raw,
+          onDragEnd: () => {
+            this.doc.captureSync();
+          },
+        });
+      }
+      return;
+    }
+  }
+
+  override click(e: PointerEventState) {
+    if (this.doc.readonly) return;
+
+    if (!this.interactivity?.handleElementSelection(e)) {
+      this.selection.clear();
+      resetNativeSelection(null);
+    }
+
+    this.interactivity?.dispatchEvent('click', e);
+  }
+
+  override deactivate() {
+    this._stopEdgeScrolling();
+    this._clearDisposable();
+  }
+
+  override doubleClick(e: PointerEventState) {
+    if (this.doc.readonly) {
+      const viewport = this.gfx.viewport;
+      if (viewport.zoom === 1) {
+        this.gfx.fitToScreen();
+      } else {
+        // Zoom to 100% and Center
+        const [x, y] = viewport.toModelCoord(e.x, e.y);
+        viewport.setViewport(1, [x, y], true);
+      }
+      return;
+    }
+
+    this.interactivity?.dispatchEvent('dblclick', e);
+  }
+
+  override dragEnd(e: PointerEventState) {
+    this.interactivity?.dispatchEvent('dragend', e);
+
+    if (this.selection.editing || !this.movementDragging) return;
+
+    this.movementDragging = false;
+    this._toBeMoved = [];
+    this._clearSelectingState();
+    this.dragType = DefaultModeDragType.None;
+  }
+
+  override dragMove(e: PointerEventState) {
+    this.interactivity?.dispatchEvent('dragmove', e);
+
+    if (!this.movementDragging) {
+      return;
+    }
+
+    const { viewport } = this.gfx;
+    switch (this.dragType) {
+      case DefaultModeDragType.Selecting: {
+        // Record the last drag pointer position for auto panning and view port updating
+        this._updateSelection();
+        const moveDelta = calPanDelta(viewport, e);
+        if (moveDelta) {
+          this._enableEdgeScrolling(moveDelta);
+        } else {
+          this._stopEdgeScrolling();
+        }
+        break;
+      }
+      case DefaultModeDragType.ContentMoving: {
+        break;
+      }
+      case DefaultModeDragType.NativeEditing: {
+        // TODO reset if drag out of note
+        break;
+      }
+    }
+  }
+
+  // oxlint-disable-next-line typescript/no-misused-promises
+  override async dragStart(e: PointerEventState) {
+    const { preventDefaultState, handledByView } =
+      this.interactivity?.dispatchEvent('dragstart', e) ?? {};
+
+    if (this.selection.editing || preventDefaultState || handledByView) return;
+
+    this.movementDragging = true;
+
+    // Determine the drag type based on the current state and event
+    let dragType = this._determineDragType(e);
+
+    const elements = this.selection.selectedElements;
+    if (elements.some(e => e.isLocked())) return;
+
+    const toBeMoved = new Set(elements);
+
+    elements.forEach(element => {
+      if (isGfxGroupCompatibleModel(element)) {
+        element.descendantElements.forEach(ele => {
+          toBeMoved.add(ele);
+        });
+      }
+    });
+
+    this._toBeMoved = Array.from(toBeMoved);
+
+    // If alt key is pressed and content is moving, clone the content
+    if (dragType === DefaultModeDragType.ContentMoving && e.keys.alt) {
+      await this._cloneContent();
+    }
+
+    // Set up drag state
+    this.initializeDragState(dragType, e);
+  }
+
+  override mounted() {
+    this.disposable.add(
+      effect(() => {
+        const pressed = this.gfx.keyboard.spaceKey$.value;
+
+        if (pressed) {
+          const currentDraggingArea = this.controller.draggingArea$.peek();
+
+          this._spaceTranslationRect = currentDraggingArea;
+        } else {
+          this._spaceTranslationRect = null;
+        }
+      })
+    );
+  }
+
+  override pointerDown(e: PointerEventState): void {
+    this.interactivity?.dispatchEvent('pointerdown', e);
+  }
+
+  override pointerMove(e: PointerEventState) {
+    this.interactivity?.dispatchEvent('pointermove', e);
+  }
+
+  override pointerUp(e: PointerEventState) {
+    this.interactivity?.dispatchEvent('pointerup', e);
+  }
+
+  override unmounted(): void {}
+}

blocksuite/affine/blocks/surface/src/tool/panning-utils.ts

@@ -0,0 +1,46 @@
+import type { IVec } from '@blocksuite/global/gfx';
+import type { PointerEventState } from '@blocksuite/std';
+import type { Viewport } from '@blocksuite/std/gfx';
+
+const PANNING_DISTANCE = 30;
+
+export function calPanDelta(
+  viewport: Viewport,
+  e: PointerEventState,
+  edgeDistance = 20
+): IVec | null {
+  // Get viewport edge
+  const { left, top } = viewport;
+  const { width, height } = viewport;
+  // Get pointer position
+  let { x, y } = e;
+  const { containerOffset } = e;
+  x += containerOffset.x;
+  y += containerOffset.y;
+  // Check if pointer is near viewport edge
+  const nearLeft = x < left + edgeDistance;
+  const nearRight = x > left + width - edgeDistance;
+  const nearTop = y < top + edgeDistance;
+  const nearBottom = y > top + height - edgeDistance;
+  // If pointer is not near viewport edge, return false
+  if (!(nearLeft || nearRight || nearTop || nearBottom)) return null;
+
+  // Calculate move delta
+  let deltaX = 0;
+  let deltaY = 0;
+
+  // Use PANNING_DISTANCE to limit the max delta, avoid panning too fast
+  if (nearLeft) {
+    deltaX = Math.max(-PANNING_DISTANCE, x - (left + edgeDistance));
+  } else if (nearRight) {
+    deltaX = Math.min(PANNING_DISTANCE, x - (left + width - edgeDistance));
+  }
+
+  if (nearTop) {
+    deltaY = Math.max(-PANNING_DISTANCE, y - (top + edgeDistance));
+  } else if (nearBottom) {
+    deltaY = Math.min(PANNING_DISTANCE, y - (top + height - edgeDistance));
+  }
+
+  return [deltaX, deltaY];
+}

blocksuite/affine/blocks/surface/src/utils/a-star.ts

@@ -0,0 +1,299 @@
+import { almostEqual, type Bound, type IVec3 } from '@blocksuite/global/gfx';
+
+import { Graph } from './graph.js';
+import { PriorityQueue } from './priority-queue.js';
+
+function isNullish<T>(val: T | null | undefined): val is null | undefined {
+  return val === null || val === undefined;
+}
+
+function cost(point: IVec3, point2: IVec3) {
+  return Math.abs(point[0] - point2[0]) + Math.abs(point[1] - point2[1]);
+}
+
+function compare(a: [number, number, number], b: [number, number, number]) {
+  if (a[2] + 0.01 < b[2]) return -1;
+  else if (a[2] - 0.01 > b[2]) return 1;
+  else if (a[0] < b[0]) return -1;
+  else if (a[0] > b[0]) return 1;
+  else if (a[1] > b[1]) return -1;
+  else if (a[1] < b[1]) return 1;
+  else return 0;
+}
+
+function heuristic(a: IVec3, b: IVec3): number {
+  return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);
+}
+
+function getDiagonalCount(a: IVec3, last: IVec3, last2: IVec3): number {
+  if (almostEqual(a[0], last[0]) && almostEqual(a[0], last2[0])) return 0;
+  if (almostEqual(a[1], last[1]) && almostEqual(a[1], last2[1])) return 0;
+  return 1;
+}
+
+function pointAlmostEqual(a: IVec3, b: IVec3): boolean {
+  return almostEqual(a[0], b[0], 0.02) && almostEqual(a[1], b[1], 0.02);
+}
+
+export class AStarRunner {
+  private readonly _cameFrom = new Map<
+    IVec3,
+    { from: IVec3[]; indexs: number[] }
+  >();
+
+  private _complete = false;
+
+  private readonly _costSoFar = new Map<IVec3, number[]>();
+
+  private _current: IVec3 | null = null;
+
+  private readonly _diagonalCount = new Map<IVec3, number[]>();
+
+  private _frontier!: PriorityQueue<
+    IVec3,
+    [diagonalCount: number, pointPriority: number, distCost: number]
+  >;
+
+  private readonly _graph: Graph<IVec3>;
+
+  private readonly _pointPriority = new Map<IVec3, number[]>();
+
+  get path() {
+    const result: IVec3[] = [];
+    let current: null | IVec3 = this._complete
+      ? this._originalEp
+      : this._current;
+    const nextIndexs = [0];
+    while (current) {
+      result.unshift(current);
+      const froms = this._cameFrom.get(current);
+      if (!froms) return result;
+      const index = nextIndexs.shift();
+      if (isNullish(index)) {
+        break;
+      }
+      nextIndexs.push(froms.indexs[index]);
+      current = froms.from[index];
+    }
+    return result;
+  }
+
+  constructor(
+    points: IVec3[],
+    private readonly _sp: IVec3,
+    private readonly _ep: IVec3,
+    private readonly _originalSp: IVec3,
+    private _originalEp: IVec3,
+    blocks: Bound[] = [],
+    expandBlocks: Bound[] = []
+  ) {
+    this._sp[2] = 0;
+    this._ep[2] = 0;
+    this._originalEp[2] = 0;
+    this._graph = new Graph([...points], blocks, expandBlocks);
+    this._init();
+  }
+
+  private _init() {
+    this._cameFrom.set(this._sp, { from: [this._originalSp], indexs: [-1] });
+    this._cameFrom.set(this._originalSp, { from: [], indexs: [] });
+
+    this._costSoFar.set(this._sp, [0]);
+    this._diagonalCount.set(this._sp, [0]);
+    this._pointPriority.set(this._sp, [0]);
+    this._frontier = new PriorityQueue<
+      IVec3,
+      [diagonalCount: number, pointPriority: number, distCost: number]
+    >(compare);
+    this._frontier.enqueue(this._sp, [0, 0, 0]);
+  }
+
+  private _neighbors(cur: IVec3) {
+    const neighbors = this._graph.neighbors(cur);
+    const cameFroms = this._cameFrom.get(cur);
+
+    if (cameFroms) {
+      cameFroms.from.forEach(from => {
+        const index = neighbors.findIndex(n => pointAlmostEqual(n, from));
+        if (index >= 0) {
+          neighbors.splice(index, 1);
+        }
+      });
+    }
+
+    if (cur === this._ep) neighbors.push(this._originalEp);
+    return neighbors;
+  }
+
+  reset() {
+    this._cameFrom.clear();
+    this._costSoFar.clear();
+    this._diagonalCount.clear();
+    this._pointPriority.clear();
+    this._complete = false;
+    this._init();
+  }
+
+  run() {
+    while (!this._complete) {
+      this.step();
+    }
+  }
+
+  step() {
+    if (this._complete) return;
+    this._current = this._frontier.dequeue();
+    const current = this._current;
+    if (!current) {
+      this._complete = true;
+      return;
+    }
+    if (current === this._ep && pointAlmostEqual(this._ep, this._originalEp)) {
+      this._originalEp = this._ep;
+    }
+    const neighbors = this._neighbors(current);
+
+    // oxlint-disable-next-line typescript/prefer-for-of
+    for (let i = 0; i < neighbors.length; i++) {
+      const next = neighbors[i];
+      const curCosts = this._costSoFar.get(current);
+      const curDiagoalCounts = this._diagonalCount.get(current);
+      const curPointPrioritys = this._pointPriority.get(current);
+      const cameFroms = this._cameFrom.get(current);
+      if (!curCosts || !curDiagoalCounts || !curPointPrioritys || !cameFroms) {
+        continue;
+      }
+      const newCosts = curCosts.map(co => co + cost(current, next));
+
+      const newDiagonalCounts = curDiagoalCounts.map(
+        (count, index) =>
+          count + getDiagonalCount(next, current, cameFroms.from[index])
+      );
+      if (isNullish(next[2])) {
+        continue;
+      }
+      const newPointPrioritys = curPointPrioritys.map(
+        pointPriority => pointPriority + next[2]
+      );
+      let index = -1;
+      if (newCosts.length === 1) {
+        index = 0;
+      } else {
+        const costsIndexs = findAllMinimalIndexs(
+          newCosts,
+          (a, b) => a + 0.01 < b,
+          (a, b) => almostEqual(a, b, 0.02)
+        );
+        if (costsIndexs.length === 1) {
+          index = costsIndexs[0];
+        } else {
+          const diagonalCounts = costsIndexs.map(i => newDiagonalCounts[i]);
+          const diagonalCountsIndexs = findAllMinimalIndexs(
+            diagonalCounts,
+            (a, b) => a < b,
+            (a, b) => a === b
+          );
+          if (diagonalCountsIndexs.length === 1) {
+            index = costsIndexs[diagonalCountsIndexs[0]];
+          } else {
+            const pointPriorities = diagonalCountsIndexs.map(
+              i => newPointPrioritys[costsIndexs[i]]
+            );
+            const pointPrioritiesIndexs = findAllMaximalIndexs(
+              pointPriorities,
+              (a, b) => a > b,
+              (a, b) => a === b
+            );
+            index = pointPrioritiesIndexs[0];
+          }
+        }
+      }
+      const shouldEnqueue = !this._costSoFar.has(next);
+      const nextCosts = this._costSoFar.get(next) ?? [];
+      const nextDiagonalCounts = this._diagonalCount.get(next) ?? [];
+      const nextPointPriorities = this._pointPriority.get(next) ?? [];
+      const nextCameFrom = this._cameFrom.get(next) ?? { from: [], indexs: [] };
+      nextCosts.push(newCosts[index]);
+      nextDiagonalCounts.push(newDiagonalCounts[index]);
+      nextPointPriorities.push(newPointPrioritys[index]);
+      nextCameFrom.from.push(current);
+      nextCameFrom.indexs.push(index);
+
+      const newDiagonalCount = newDiagonalCounts[index];
+      const newPointPriority = newPointPrioritys[index];
+      const newCost = newCosts[index];
+
+      this._costSoFar.set(next, nextCosts);
+      this._diagonalCount.set(next, nextDiagonalCounts);
+      this._pointPriority.set(next, nextPointPriorities);
+      this._cameFrom.set(next, nextCameFrom);
+      const newPriority: [number, number, number] = [
+        newDiagonalCount,
+        newPointPriority,
+        newCost + heuristic(next, this._ep),
+      ];
+      if (shouldEnqueue) {
+        this._frontier.enqueue(next, newPriority);
+      } else {
+        const index = this._frontier.heap.findIndex(
+          item => item.value === next
+        );
+        const old = this._frontier.heap[index];
+        if (old) {
+          if (compare(newPriority, old.priority) < 0) {
+            old.priority = newPriority;
+            this._frontier.bubbleUp(index);
+          }
+        } else {
+          this._frontier.enqueue(next, newPriority);
+        }
+      }
+      if (
+        pointAlmostEqual(current, this._ep) &&
+        pointAlmostEqual(next, this._originalEp)
+      ) {
+        this._originalEp = next;
+        this._complete = true;
+        return;
+      }
+    }
+  }
+}
+
+function findAllMinimalIndexs(
+  data: number[],
+  isLess: (a: number, b: number) => boolean,
+  isEqual: (a: number, b: number) => boolean
+) {
+  let min = Infinity;
+  let indexs: number[] = [];
+  for (let i = 0; i < data.length; i++) {
+    const cur = data[i];
+    if (isLess(cur, min)) {
+      min = cur;
+      indexs = [i];
+    } else if (isEqual(cur, min)) {
+      indexs.push(i);
+    }
+  }
+  return indexs;
+}
+
+function findAllMaximalIndexs(
+  data: number[],
+  isGreat: (a: number, b: number) => boolean,
+  isEqual: (a: number, b: number) => boolean
+) {
+  let max = -Infinity;
+  let indexs: number[] = [];
+  for (let i = 0; i < data.length; i++) {
+    const cur = data[i];
+    if (isGreat(cur, max)) {
+      max = cur;
+      indexs = [i];
+    } else if (isEqual(cur, max)) {
+      indexs.push(i);
+    }
+  }
+  return indexs;
+}

blocksuite/affine/blocks/surface/src/utils/font.ts

@@ -0,0 +1,56 @@
+import type { FontFamily } from '@blocksuite/affine-model';
+import { IS_FIREFOX } from '@blocksuite/global/env';
+
+function normalizeFontFamily(fontFamily: FontFamily | string): string {
+  let s = fontFamily.trim();
+  if (
+    (s.startsWith('"') && s.endsWith('"')) ||
+    (s.startsWith("'") && s.endsWith("'"))
+  ) {
+    s = s.slice(1, -1);
+  }
+  return s.toLowerCase();
+}
+
+export function wrapFontFamily(fontFamily: FontFamily | string): string {
+  return `"${fontFamily}"`;
+}
+
+export const getFontFaces = IS_FIREFOX
+  ? () => {
+      const keys = document.fonts.keys();
+      const fonts = [];
+      let done = false;
+      while (!done) {
+        const item = keys.next();
+        done = !!item.done;
+        if (item.value) {
+          fonts.push(item.value);
+        }
+      }
+      return fonts;
+    }
+  : () => [...document.fonts.keys()];
+
+export const isSameFontFamily =
+  (fontFamily: FontFamily | string) => (fontFace: FontFace) =>
+    normalizeFontFamily(fontFace.family) === normalizeFontFamily(fontFamily);
+
+export function getFontFacesByFontFamily(
+  fontFamily: FontFamily | string
+): FontFace[] {
+  return (
+    getFontFaces()
+      .filter(isSameFontFamily(fontFamily))
+      // remove duplicate font faces
+      .filter(
+        (item, index, arr) =>
+          arr.findIndex(
+            fontFace =>
+              fontFace.family === item.family &&
+              fontFace.weight === item.weight &&
+              fontFace.style === item.style
+          ) === index
+      )
+  );
+}

blocksuite/affine/blocks/surface/src/utils/get-bg-grip-gap.ts

@@ -0,0 +1,10 @@
+import { clamp } from '@blocksuite/global/gfx';
+
+import { GRID_GAP_MAX, GRID_GAP_MIN } from '../consts';
+
+export function getBgGridGap(zoom: number) {
+  const step = zoom < 0.5 ? 2 : 1 / (Math.floor(zoom) || 1);
+  const gap = clamp(20 * step * zoom, GRID_GAP_MIN, GRID_GAP_MAX);
+
+  return Math.round(gap);
+}

blocksuite/affine/blocks/surface/src/utils/get-last-props-key.ts

@@ -0,0 +1,29 @@
+import { getShapeName, type ShapeProps } from '@blocksuite/affine-model';
+import type {
+  LastProps,
+  LastPropsKey,
+} from '@blocksuite/affine-shared/services';
+import { NodePropsSchema } from '@blocksuite/affine-shared/utils';
+
+const LastPropsSchema = NodePropsSchema;
+
+export function getLastPropsKey(
+  modelType: string,
+  modelProps: Partial<LastProps[LastPropsKey]>
+): LastPropsKey | null {
+  if (modelType === 'shape') {
+    const { shapeType, radius } = modelProps as ShapeProps;
+    const shapeName = getShapeName(shapeType, radius);
+    return `${modelType}:${shapeName}`;
+  }
+
+  if (isLastPropsKey(modelType)) {
+    return modelType;
+  }
+
+  return null;
+}
+
+function isLastPropsKey(key: string): key is LastPropsKey {
+  return Object.keys(LastPropsSchema.shape).includes(key);
+}

blocksuite/affine/blocks/surface/src/utils/get-surface-block.ts

@@ -0,0 +1,16 @@
+import type { BlockStdScope } from '@blocksuite/std';
+import type { Store } from '@blocksuite/store';
+
+import type { SurfaceBlockComponent } from '../surface-block';
+import type { SurfaceBlockModel } from '../surface-model';
+
+export function getSurfaceBlock(doc: Store) {
+  const blocks = doc.getBlocksByFlavour('affine:surface');
+  return blocks.length !== 0 ? (blocks[0].model as SurfaceBlockModel) : null;
+}
+
+export function getSurfaceComponent(std: BlockStdScope) {
+  const surface = getSurfaceBlock(std.store);
+  if (!surface) return null;
+  return std.view.getBlock(surface.id) as SurfaceBlockComponent | null;
+}

blocksuite/affine/blocks/surface/src/utils/graph.ts

@@ -0,0 +1,151 @@
+import type { Bound, IVec, IVec3 } from '@blocksuite/global/gfx';
+import {
+  almostEqual,
+  isOverlap as _isOverlap,
+  linePolygonIntersects,
+} from '@blocksuite/global/gfx';
+
+function isOverlap(line: IVec[], line2: IVec[]) {
+  if (
+    [line[0][1], line[1][1], line2[0][1], line2[1][1]].every(y =>
+      almostEqual(y, line[0][1], 0.02)
+    )
+  ) {
+    return _isOverlap(line, line2, 0);
+  } else if (
+    [line[0][0], line[1][0], line2[0][0], line2[1][0]].every(x =>
+      almostEqual(x, line[0][0], 0.02)
+    )
+  ) {
+    return _isOverlap(line, line2, 1);
+  }
+  return false;
+}
+
+function arrayAlmostEqual(point: IVec | IVec3, point2: IVec | IVec3) {
+  return almostEqual(point[0], point2[0]) && almostEqual(point[1], point2[1]);
+}
+
+export class Graph<V extends IVec | IVec3 = IVec> {
+  private readonly _xMap = new Map<number, V[]>();
+
+  private readonly _yMap = new Map<number, V[]>();
+
+  constructor(
+    private readonly points: V[],
+    private readonly blocks: Bound[] = [],
+    private readonly expandedBlocks: Bound[] = [],
+    private readonly excludedPoints: V[] = []
+  ) {
+    const xMap = this._xMap;
+    const yMap = this._yMap;
+    this.points.forEach(point => {
+      const [x, y] = point;
+      if (!xMap.has(x)) xMap.set(x, []);
+      if (!yMap.has(y)) yMap.set(y, []);
+      xMap.get(x)?.push(point);
+      yMap.get(y)?.push(point);
+    });
+  }
+
+  private _canSkipBlock(point: IVec | IVec3) {
+    return this.excludedPoints.some(excludedPoint => {
+      return arrayAlmostEqual(point, excludedPoint);
+    });
+  }
+
+  private _isBlock(sp: IVec | IVec3, ep: IVec | IVec3) {
+    return (
+      this.blocks.some(block => {
+        const rst = linePolygonIntersects(sp as IVec, ep as IVec, block.points);
+        return (
+          rst?.length === 2 ||
+          block.isPointInBound(sp as IVec, 0) ||
+          block.isPointInBound(ep as IVec, 0) ||
+          [
+            block.leftLine,
+            block.upperLine,
+            block.rightLine,
+            block.lowerLine,
+          ].some(line => {
+            return isOverlap(line, [sp, ep] as IVec[]);
+          })
+        );
+      }) ||
+      this.expandedBlocks.some(block => {
+        const result = linePolygonIntersects(
+          sp as IVec,
+          ep as IVec,
+          block.expand(-0.5).points
+        );
+        return result?.length === 2;
+      })
+    );
+  }
+
+  neighbors(curPoint: V): V[] {
+    const [x, y] = curPoint;
+    const neighbors = new Set<V>();
+    const xPoints = this._xMap.get(x);
+    const yPoints = this._yMap.get(y);
+    if (xPoints) {
+      let plusMin = Infinity;
+      let minusMin = Infinity;
+      let plusPoint: V | undefined;
+      let minusPoint: V | undefined;
+      xPoints.forEach(point => {
+        if (arrayAlmostEqual(point, curPoint as unknown as IVec)) return;
+        const dif = point[1] - curPoint[1];
+        if (dif > 0 && dif < plusMin) {
+          plusMin = dif;
+          plusPoint = point;
+        }
+        if (dif < 0 && Math.abs(dif) < minusMin) {
+          minusMin = Math.abs(dif);
+          minusPoint = point;
+        }
+      });
+      if (
+        plusPoint &&
+        (this._canSkipBlock(plusPoint) || !this._isBlock(curPoint, plusPoint))
+      ) {
+        neighbors.add(plusPoint);
+      }
+      if (
+        minusPoint &&
+        (this._canSkipBlock(minusPoint) || !this._isBlock(curPoint, minusPoint))
+      )
+        neighbors.add(minusPoint);
+    }
+    if (yPoints) {
+      let plusMin = Infinity;
+      let minusMin = Infinity;
+      let plusPoint: V | undefined;
+      let minusPoint: V | undefined;
+      yPoints.forEach(point => {
+        if (arrayAlmostEqual(point, curPoint)) return;
+        const dif = point[0] - curPoint[0];
+        if (dif > 0 && dif < plusMin) {
+          plusMin = dif;
+          plusPoint = point;
+        }
+        if (dif < 0 && Math.abs(dif) < minusMin) {
+          minusMin = Math.abs(dif);
+          minusPoint = point;
+        }
+      });
+      if (
+        plusPoint &&
+        (this._canSkipBlock(plusPoint) || !this._isBlock(curPoint, plusPoint))
+      )
+        neighbors.add(plusPoint);
+      if (
+        minusPoint &&
+        (this._canSkipBlock(minusPoint) || !this._isBlock(curPoint, minusPoint))
+      )
+        neighbors.add(minusPoint);
+    }
+
+    return Array.from(neighbors);
+  }
+}

blocksuite/affine/blocks/surface/src/utils/index.ts

@@ -0,0 +1,38 @@
+import { nanoid } from 'nanoid';
+
+import { ZOOM_WHEEL_STEP } from '../consts.js';
+
+export { generateKeyBetween, generateNKeysBetween } from 'fractional-indexing';
+
+export function generateElementId() {
+  return nanoid(10);
+}
+
+/**
+ * Normalizes wheel delta.
+ *
+ * See https://stackoverflow.com/a/13650579
+ *
+ * From https://github.com/excalidraw/excalidraw/blob/master/src/components/App.tsx
+ * MIT License
+ */
+export function normalizeWheelDeltaY(delta: number, zoom = 1) {
+  const sign = Math.sign(delta);
+  const abs = Math.abs(delta);
+  const maxStep = ZOOM_WHEEL_STEP * 100;
+  if (abs > maxStep) {
+    delta = maxStep * sign;
+  }
+  let newZoom = zoom - delta / 100;
+  // increase zoom steps the more zoomed-in we are (applies to >100% only)
+  newZoom +=
+    Math.log10(Math.max(1, zoom)) *
+    -sign *
+    // reduced amplification for small deltas (small movements on a trackpad)
+    Math.min(1, abs / 20);
+  return newZoom;
+}
+
+export { getBgGridGap } from './get-bg-grip-gap';
+export { getLastPropsKey } from './get-last-props-key';
+export * from './get-surface-block';

blocksuite/affine/blocks/surface/src/utils/path-data-parser/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Preet Shihn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

blocksuite/affine/blocks/surface/src/utils/path-data-parser/absolutize.ts

@@ -0,0 +1,117 @@
+import type { Segment } from './parser.js';
+
+// Translate relative commands to absolute commands
+export function absolutize(segments: Segment[]): Segment[] {
+  let cx = 0,
+    cy = 0;
+  let subx = 0,
+    suby = 0;
+  const out: Segment[] = [];
+  for (const { key, data } of segments) {
+    switch (key) {
+      case 'M':
+        out.push({ key: 'M', data: [...data] });
+        [cx, cy] = data;
+        [subx, suby] = data;
+        break;
+      case 'm':
+        cx += data[0];
+        cy += data[1];
+        out.push({ key: 'M', data: [cx, cy] });
+        subx = cx;
+        suby = cy;
+        break;
+      case 'L':
+        out.push({ key: 'L', data: [...data] });
+        [cx, cy] = data;
+        break;
+      case 'l':
+        cx += data[0];
+        cy += data[1];
+        out.push({ key: 'L', data: [cx, cy] });
+        break;
+      case 'C':
+        out.push({ key: 'C', data: [...data] });
+        cx = data[4];
+        cy = data[5];
+        break;
+      case 'c': {
+        const newdata = data.map((d, i) => (i % 2 ? d + cy : d + cx));
+        out.push({ key: 'C', data: newdata });
+        cx = newdata[4];
+        cy = newdata[5];
+        break;
+      }
+      case 'Q':
+        out.push({ key: 'Q', data: [...data] });
+        cx = data[2];
+        cy = data[3];
+        break;
+      case 'q': {
+        const newdata = data.map((d, i) => (i % 2 ? d + cy : d + cx));
+        out.push({ key: 'Q', data: newdata });
+        cx = newdata[2];
+        cy = newdata[3];
+        break;
+      }
+      case 'A':
+        out.push({ key: 'A', data: [...data] });
+        cx = data[5];
+        cy = data[6];
+        break;
+      case 'a':
+        cx += data[5];
+        cy += data[6];
+        out.push({
+          key: 'A',
+          data: [data[0], data[1], data[2], data[3], data[4], cx, cy],
+        });
+        break;
+      case 'H':
+        out.push({ key: 'H', data: [...data] });
+        cx = data[0];
+        break;
+      case 'h':
+        cx += data[0];
+        out.push({ key: 'H', data: [cx] });
+        break;
+      case 'V':
+        out.push({ key: 'V', data: [...data] });
+        cy = data[0];
+        break;
+      case 'v':
+        cy += data[0];
+        out.push({ key: 'V', data: [cy] });
+        break;
+      case 'S':
+        out.push({ key: 'S', data: [...data] });
+        cx = data[2];
+        cy = data[3];
+        break;
+      case 's': {
+        const newdata = data.map((d, i) => (i % 2 ? d + cy : d + cx));
+        out.push({ key: 'S', data: newdata });
+        cx = newdata[2];
+        cy = newdata[3];
+        break;
+      }
+      case 'T':
+        out.push({ key: 'T', data: [...data] });
+        cx = data[0];
+        cy = data[1];
+        break;
+      case 't':
+        cx += data[0];
+        cy += data[1];
+        out.push({ key: 'T', data: [cx, cy] });
+        break;
+      case 'Z':
+      case 'z':
+        out.push({ key: 'Z', data: [] });
+        cx = subx;
+        cy = suby;
+        break;
+    }
+  }
+  return out;
+}

blocksuite/affine/blocks/surface/src/utils/path-data-parser/normalize.ts

@@ -0,0 +1,280 @@
+import type { Segment } from './parser.js';
+
+// Normalize path to include only M, L, C, and Z commands
+export function normalize(segments: Segment[]): Segment[] {
+  const out: Segment[] = [];
+
+  let lastType = '';
+  let cx = 0,
+    cy = 0;
+  let subx = 0,
+    suby = 0;
+  let lcx = 0,
+    lcy = 0;
+
+  for (const { key, data } of segments) {
+    switch (key) {
+      case 'M':
+        out.push({ key: 'M', data: [...data] });
+        [cx, cy] = data;
+        [subx, suby] = data;
+        break;
+      case 'C':
+        out.push({ key: 'C', data: [...data] });
+        cx = data[4];
+        cy = data[5];
+        lcx = data[2];
+        lcy = data[3];
+        break;
+      case 'L':
+        out.push({ key: 'L', data: [...data] });
+        [cx, cy] = data;
+        break;
+      case 'H':
+        cx = data[0];
+        out.push({ key: 'L', data: [cx, cy] });
+        break;
+      case 'V':
+        cy = data[0];
+        out.push({ key: 'L', data: [cx, cy] });
+        break;
+      case 'S': {
+        let cx1 = 0,
+          cy1 = 0;
+        if (lastType === 'C' || lastType === 'S') {
+          cx1 = cx + (cx - lcx);
+          cy1 = cy + (cy - lcy);
+        } else {
+          cx1 = cx;
+          cy1 = cy;
+        }
+        out.push({ key: 'C', data: [cx1, cy1, ...data] });
+        lcx = data[0];
+        lcy = data[1];
+        cx = data[2];
+        cy = data[3];
+        break;
+      }
+      case 'T': {
+        const [x, y] = data;
+        let x1 = 0,
+          y1 = 0;
+        if (lastType === 'Q' || lastType === 'T') {
+          x1 = cx + (cx - lcx);
+          y1 = cy + (cy - lcy);
+        } else {
+          x1 = cx;
+          y1 = cy;
+        }
+        const cx1 = cx + (2 * (x1 - cx)) / 3;
+        const cy1 = cy + (2 * (y1 - cy)) / 3;
+        const cx2 = x + (2 * (x1 - x)) / 3;
+        const cy2 = y + (2 * (y1 - y)) / 3;
+        out.push({ key: 'C', data: [cx1, cy1, cx2, cy2, x, y] });
+        lcx = x1;
+        lcy = y1;
+        cx = x;
+        cy = y;
+        break;
+      }
+      case 'Q': {
+        const [x1, y1, x, y] = data;
+        const cx1 = cx + (2 * (x1 - cx)) / 3;
+        const cy1 = cy + (2 * (y1 - cy)) / 3;
+        const cx2 = x + (2 * (x1 - x)) / 3;
+        const cy2 = y + (2 * (y1 - y)) / 3;
+        out.push({ key: 'C', data: [cx1, cy1, cx2, cy2, x, y] });
+        lcx = x1;
+        lcy = y1;
+        cx = x;
+        cy = y;
+        break;
+      }
+      case 'A': {
+        const r1 = Math.abs(data[0]);
+        const r2 = Math.abs(data[1]);
+        const angle = data[2];
+        const largeArcFlag = data[3];
+        const sweepFlag = data[4];
+        const x = data[5];
+        const y = data[6];
+        if (r1 === 0 || r2 === 0) {
+          out.push({ key: 'C', data: [cx, cy, x, y, x, y] });
+          cx = x;
+          cy = y;
+        } else {
+          if (cx !== x || cy !== y) {
+            const curves: number[][] = arcToCubicCurves(
+              cx,
+              cy,
+              x,
+              y,
+              r1,
+              r2,
+              angle,
+              largeArcFlag,
+              sweepFlag
+            );
+            curves.forEach(function (curve) {
+              out.push({ key: 'C', data: curve });
+            });
+            cx = x;
+            cy = y;
+          }
+        }
+        break;
+      }
+      case 'Z':
+        out.push({ key: 'Z', data: [] });
+        cx = subx;
+        cy = suby;
+        break;
+    }
+    lastType = key;
+  }
+  return out;
+}
+
+function degToRad(degrees: number): number {
+  return (Math.PI * degrees) / 180;
+}
+
+function rotate(x: number, y: number, angleRad: number): [number, number] {
+  const X = x * Math.cos(angleRad) - y * Math.sin(angleRad);
+  const Y = x * Math.sin(angleRad) + y * Math.cos(angleRad);
+  return [X, Y];
+}
+
+function arcToCubicCurves(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  r1: number,
+  r2: number,
+  angle: number,
+  largeArcFlag: number,
+  sweepFlag: number,
+  recursive?: number[]
+): number[][] {
+  const angleRad = degToRad(angle);
+  let params: number[][] = [];
+
+  let f1 = 0,
+    f2 = 0,
+    cx = 0,
+    cy = 0;
+  if (recursive) {
+    [f1, f2, cx, cy] = recursive;
+  } else {
+    [x1, y1] = rotate(x1, y1, -angleRad);
+    [x2, y2] = rotate(x2, y2, -angleRad);
+
+    const x = (x1 - x2) / 2;
+    const y = (y1 - y2) / 2;
+    let h = (x * x) / (r1 * r1) + (y * y) / (r2 * r2);
+    if (h > 1) {
+      h = Math.sqrt(h);
+      r1 = h * r1;
+      r2 = h * r2;
+    }
+
+    const sign = largeArcFlag === sweepFlag ? -1 : 1;
+
+    const r1Pow = r1 * r1;
+    const r2Pow = r2 * r2;
+
+    const left = r1Pow * r2Pow - r1Pow * y * y - r2Pow * x * x;
+    const right = r1Pow * y * y + r2Pow * x * x;
+
+    const k = sign * Math.sqrt(Math.abs(left / right));
+
+    cx = (k * r1 * y) / r2 + (x1 + x2) / 2;
+    cy = (k * -r2 * x) / r1 + (y1 + y2) / 2;
+
+    f1 = Math.asin(parseFloat(((y1 - cy) / r2).toFixed(9)));
+    f2 = Math.asin(parseFloat(((y2 - cy) / r2).toFixed(9)));
+
+    if (x1 < cx) {
+      f1 = Math.PI - f1;
+    }
+    if (x2 < cx) {
+      f2 = Math.PI - f2;
+    }
+
+    if (f1 < 0) {
+      f1 = Math.PI * 2 + f1;
+    }
+    if (f2 < 0) {
+      f2 = Math.PI * 2 + f2;
+    }
+
+    if (sweepFlag && f1 > f2) {
+      f1 = f1 - Math.PI * 2;
+    }
+    if (!sweepFlag && f2 > f1) {
+      f2 = f2 - Math.PI * 2;
+    }
+  }
+
+  let df = f2 - f1;
+
+  if (Math.abs(df) > (Math.PI * 120) / 180) {
+    const f2old = f2;
+    const x2old = x2;
+    const y2old = y2;
+
+    if (sweepFlag && f2 > f1) {
+      f2 = f1 + ((Math.PI * 120) / 180) * 1;
+    } else {
+      f2 = f1 + ((Math.PI * 120) / 180) * -1;
+    }
+
+    x2 = cx + r1 * Math.cos(f2);
+    y2 = cy + r2 * Math.sin(f2);
+    params = arcToCubicCurves(
+      x2,
+      y2,
+      x2old,
+      y2old,
+      r1,
+      r2,
+      angle,
+      0,
+      sweepFlag,
+      [f2, f2old, cx, cy]
+    );
+  }
+
+  df = f2 - f1;
+
+  const c1 = Math.cos(f1);
+  const s1 = Math.sin(f1);
+  const c2 = Math.cos(f2);
+  const s2 = Math.sin(f2);
+  const t = Math.tan(df / 4);
+  const hx = (4 / 3) * r1 * t;
+  const hy = (4 / 3) * r2 * t;
+
+  const m1 = [x1, y1];
+  const m2 = [x1 + hx * s1, y1 - hy * c1];
+  const m3 = [x2 + hx * s2, y2 - hy * c2];
+  const m4 = [x2, y2];
+
+  m2[0] = 2 * m1[0] - m2[0];
+  m2[1] = 2 * m1[1] - m2[1];
+
+  if (recursive) {
+    return [m2, m3, m4].concat(params);
+  } else {
+    params = [m2, m3, m4].concat(params);
+    const curves = [];
+    for (let i = 0; i < params.length; i += 3) {
+      const r1 = rotate(params[i][0], params[i][1], angleRad);
+      const r2 = rotate(params[i + 1][0], params[i + 1][1], angleRad);
+      const r3 = rotate(params[i + 2][0], params[i + 2][1], angleRad);
+      curves.push([r1[0], r1[1], r2[0], r2[1], r3[0], r3[1]]);
+    }
+    return curves;
+  }
+}

blocksuite/affine/blocks/surface/src/utils/path-data-parser/parser.ts

@@ -0,0 +1,153 @@
+const COMMAND = 0;
+const NUMBER = 1;
+const EOD = 2;
+type TokenType = 0 | 1 | 2;
+
+interface PathToken {
+  type: TokenType;
+  text: string;
+}
+
+export interface Segment {
+  key: string;
+  data: number[];
+}
+
+const PARAMS: Record<string, number> = {
+  A: 7,
+  a: 7,
+  C: 6,
+  c: 6,
+  H: 1,
+  h: 1,
+  L: 2,
+  l: 2,
+  M: 2,
+  m: 2,
+  Q: 4,
+  q: 4,
+  S: 4,
+  s: 4,
+  T: 2,
+  t: 2,
+  V: 1,
+  v: 1,
+  Z: 0,
+  z: 0,
+};
+
+function tokenize(d: string): PathToken[] {
+  const tokens: PathToken[] = [];
+  let match: RegExpMatchArray | null;
+
+  while (d !== '') {
+    match = d.match(/^([ \t\r\n,]+)/);
+    if (match) {
+      d = d.slice(match[0].length);
+      continue;
+    }
+    match = d.match(/^([aAcChHlLmMqQsStTvVzZ])/);
+    if (match) {
+      tokens.push({ type: COMMAND, text: match[0] });
+      d = d.slice(match[0].length);
+      continue;
+    }
+    match = d.match(
+      /^(([-+]?[0-9]+(\.[0-9]*)?|[-+]?\.[0-9]+)([eE][-+]?[0-9]+)?)/
+    );
+    if (match) {
+      tokens.push({ type: NUMBER, text: `${parseFloat(match[0])}` });
+      d = d.slice(match[0].length);
+    } else {
+      return [];
+    }
+  }
+  tokens.push({ type: EOD, text: '' });
+  return tokens;
+}
+
+function isType(token: PathToken, type: number) {
+  return token.type === type;
+}
+
+export function parsePath(d: string): Segment[] {
+  const segments: Segment[] = [];
+  const tokens = tokenize(d);
+  let mode = 'BOD';
+  let index = 0;
+  let token = tokens[index];
+  while (!isType(token, EOD)) {
+    let paramsCount = 0;
+    const params: number[] = [];
+    if (mode === 'BOD') {
+      if (token.text === 'M' || token.text === 'm') {
+        index++;
+        paramsCount = PARAMS[token.text];
+        mode = token.text;
+      } else {
+        return parsePath('M0,0' + d);
+      }
+    } else if (isType(token, NUMBER)) {
+      paramsCount = PARAMS[mode];
+    } else {
+      index++;
+      paramsCount = PARAMS[token.text];
+      mode = token.text;
+    }
+    if (index + paramsCount < tokens.length) {
+      for (let i = index; i < index + paramsCount; i++) {
+        const numbeToken = tokens[i];
+        if (isType(numbeToken, NUMBER)) {
+          params[params.length] = +numbeToken.text;
+        } else {
+          throw new Error(
+            'Param not a number: ' + mode + ',' + numbeToken.text
+          );
+        }
+      }
+      if (typeof PARAMS[mode] === 'number') {
+        const segment: Segment = { key: mode, data: params };
+        segments.push(segment);
+        index += paramsCount;
+        token = tokens[index];
+        if (mode === 'M') mode = 'L';
+        if (mode === 'm') mode = 'l';
+      } else {
+        throw new Error('Bad segment: ' + mode);
+      }
+    } else {
+      throw new Error('Path data ended short');
+    }
+  }
+  return segments;
+}
+
+export function serialize(segments: Segment[]): string {
+  const tokens: (string | number)[] = [];
+  for (const { key, data } of segments) {
+    tokens.push(key);
+    switch (key) {
+      case 'C':
+      case 'c':
+        tokens.push(
+          data[0],
+          `${data[1]},`,
+          data[2],
+          `${data[3]},`,
+          data[4],
+          data[5]
+        );
+        break;
+      case 'S':
+      case 's':
+      case 'Q':
+      case 'q':
+        tokens.push(data[0], `${data[1]},`, data[2], data[3]);
+        break;
+      default:
+        tokens.push(...data);
+        break;
+    }
+  }
+  return tokens.join(' ');
+}

blocksuite/affine/blocks/surface/src/utils/points-on-curve/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Preet Shihn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

blocksuite/affine/blocks/surface/src/utils/points-on-curve/curve-to-bezier.ts

@@ -0,0 +1,51 @@
+import type { Point } from '../rough/geometry.js';
+
+function clone(p: Point): Point {
+  return [...p] as Point;
+}
+
+export function curveToBezier(
+  pointsIn: readonly Point[],
+  curveTightness = 0
+): Point[] {
+  const len = pointsIn.length;
+  if (len < 3) {
+    throw new Error('A curve must have at least three points.');
+  }
+  const out: Point[] = [];
+  if (len === 3) {
+    out.push(
+      clone(pointsIn[0]),
+      clone(pointsIn[1]),
+      clone(pointsIn[2]),
+      clone(pointsIn[2])
+    );
+  } else {
+    const points: Point[] = [];
+    points.push(pointsIn[0], pointsIn[0]);
+    for (let i = 1; i < pointsIn.length; i++) {
+      points.push(pointsIn[i]);
+      if (i === pointsIn.length - 1) {
+        points.push(pointsIn[i]);
+      }
+    }
+    const b: Point[] = [];
+    const s = 1 - curveTightness;
+    out.push(clone(points[0]));
+    for (let i = 1; i + 2 < points.length; i++) {
+      const cachedVertArray = points[i];
+      b[0] = [cachedVertArray[0], cachedVertArray[1]];
+      b[1] = [
+        cachedVertArray[0] + (s * points[i + 1][0] - s * points[i - 1][0]) / 6,
+        cachedVertArray[1] + (s * points[i + 1][1] - s * points[i - 1][1]) / 6,
+      ];
+      b[2] = [
+        points[i + 1][0] + (s * points[i][0] - s * points[i + 2][0]) / 6,
+        points[i + 1][1] + (s * points[i][1] - s * points[i + 2][1]) / 6,
+      ];
+      b[3] = [points[i + 1][0], points[i + 1][1]];
+      out.push(b[1], b[2], b[3]);
+    }
+  }
+  return out;
+}

blocksuite/affine/blocks/surface/src/utils/points-on-curve/index.ts

@@ -0,0 +1,163 @@
+import type { Point } from '../rough/geometry.js';
+
+// distance between 2 points
+function distance(p1: Point, p2: Point): number {
+  return Math.sqrt(distanceSq(p1, p2));
+}
+
+// distance between 2 points squared
+function distanceSq(p1: Point, p2: Point): number {
+  return Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2);
+}
+
+// Sistance squared from a point p to the line segment vw
+function distanceToSegmentSq(p: Point, v: Point, w: Point): number {
+  const l2 = distanceSq(v, w);
+  if (l2 === 0) {
+    return distanceSq(p, v);
+  }
+  let t = ((p[0] - v[0]) * (w[0] - v[0]) + (p[1] - v[1]) * (w[1] - v[1])) / l2;
+  t = Math.max(0, Math.min(1, t));
+  return distanceSq(p, lerp(v, w, t));
+}
+
+function lerp(a: Point, b: Point, t: number): Point {
+  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+}
+
+// Adapted from https://seant23.wordpress.com/2010/11/12/offset-bezier-curves/
+function flatness(points: readonly Point[], offset: number): number {
+  const p1 = points[offset + 0];
+  const p2 = points[offset + 1];
+  const p3 = points[offset + 2];
+  const p4 = points[offset + 3];
+
+  let ux = 3 * p2[0] - 2 * p1[0] - p4[0];
+  ux *= ux;
+  let uy = 3 * p2[1] - 2 * p1[1] - p4[1];
+  uy *= uy;
+  let vx = 3 * p3[0] - 2 * p4[0] - p1[0];
+  vx *= vx;
+  let vy = 3 * p3[1] - 2 * p4[1] - p1[1];
+  vy *= vy;
+
+  if (ux < vx) {
+    ux = vx;
+  }
+
+  if (uy < vy) {
+    uy = vy;
+  }
+
+  return ux + uy;
+}
+
+function getPointsOnBezierCurveWithSplitting(
+  points: readonly Point[],
+  offset: number,
+  tolerance: number,
+  newPoints?: Point[]
+): Point[] {
+  const outPoints = newPoints || [];
+  if (flatness(points, offset) < tolerance) {
+    const p0 = points[offset + 0];
+    if (outPoints.length) {
+      const d = distance(outPoints[outPoints.length - 1], p0);
+      if (d > 1) {
+        outPoints.push(p0);
+      }
+    } else {
+      outPoints.push(p0);
+    }
+    outPoints.push(points[offset + 3]);
+  } else {
+    // subdivide
+    const t = 0.5;
+    const p1 = points[offset + 0];
+    const p2 = points[offset + 1];
+    const p3 = points[offset + 2];
+    const p4 = points[offset + 3];
+
+    const q1 = lerp(p1, p2, t);
+    const q2 = lerp(p2, p3, t);
+    const q3 = lerp(p3, p4, t);
+
+    const r1 = lerp(q1, q2, t);
+    const r2 = lerp(q2, q3, t);
+
+    const red = lerp(r1, r2, t);
+
+    getPointsOnBezierCurveWithSplitting(
+      [p1, q1, r1, red],
+      0,
+      tolerance,
+      outPoints
+    );
+    getPointsOnBezierCurveWithSplitting(
+      [red, r2, q3, p4],
+      0,
+      tolerance,
+      outPoints
+    );
+  }
+  return outPoints;
+}
+
+export function simplify(points: readonly Point[], distance: number): Point[] {
+  return simplifyPoints(points, 0, points.length, distance);
+}
+
+// Ramer–Douglas–Peucker algorithm
+// https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm
+function simplifyPoints(
+  points: readonly Point[],
+  start: number,
+  end: number,
+  epsilon: number,
+  newPoints?: Point[]
+): Point[] {
+  const outPoints = newPoints || [];
+
+  // find the most distance point from the endpoints
+  const s = points[start];
+  const e = points[end - 1];
+  let maxDistSq = 0;
+  let maxNdx = 1;
+  for (let i = start + 1; i < end - 1; ++i) {
+    const distSq = distanceToSegmentSq(points[i], s, e);
+    if (distSq > maxDistSq) {
+      maxDistSq = distSq;
+      maxNdx = i;
+    }
+  }
+
+  // if that point is too far, split
+  if (Math.sqrt(maxDistSq) > epsilon) {
+    simplifyPoints(points, start, maxNdx + 1, epsilon, outPoints);
+    simplifyPoints(points, maxNdx, end, epsilon, outPoints);
+  } else {
+    if (!outPoints.length) {
+      outPoints.push(s);
+    }
+    outPoints.push(e);
+  }
+
+  return outPoints;
+}
+
+export function pointsOnBezierCurves(
+  points: Point[],
+  tolerance = 0.15,
+  distance?: number
+): Point[] {
+  const newPoints: Point[] = [];
+  const numSegments = (points.length - 1) / 3;
+  for (let i = 0; i < numSegments; i++) {
+    const offset = i * 3;
+    getPointsOnBezierCurveWithSplitting(points, offset, tolerance, newPoints);
+  }
+  if (distance && distance > 0) {
+    return simplifyPoints(newPoints, 0, newPoints.length, distance);
+  }
+  return newPoints;
+}

blocksuite/affine/blocks/surface/src/utils/points-on-path/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Preet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

blocksuite/affine/blocks/surface/src/utils/points-on-path/index.ts

@@ -0,0 +1,77 @@
+import { absolutize } from '../path-data-parser/absolutize.js';
+import { normalize } from '../path-data-parser/normalize.js';
+import { parsePath } from '../path-data-parser/parser.js';
+import { pointsOnBezierCurves, simplify } from '../points-on-curve/index.js';
+import type { Point } from '../rough/geometry.js';
+
+export function pointsOnPath(
+  path: string,
+  tolerance?: number,
+  distance?: number
+): Point[][] {
+  const segments = parsePath(path);
+  const normalized = normalize(absolutize(segments));
+
+  const sets: Point[][] = [];
+  let currentPoints: Point[] = [];
+  let start: Point = [0, 0];
+  let pendingCurve: Point[] = [];
+
+  const appendPendingCurve = () => {
+    if (pendingCurve.length >= 4) {
+      currentPoints.push(...pointsOnBezierCurves(pendingCurve, tolerance));
+    }
+    pendingCurve = [];
+  };
+
+  const appendPendingPoints = () => {
+    appendPendingCurve();
+    if (currentPoints.length) {
+      sets.push(currentPoints);
+      currentPoints = [];
+    }
+  };
+
+  for (const { key, data } of normalized) {
+    switch (key) {
+      case 'M':
+        appendPendingPoints();
+        start = [data[0], data[1]];
+        currentPoints.push(start);
+        break;
+      case 'L':
+        appendPendingCurve();
+        currentPoints.push([data[0], data[1]]);
+        break;
+      case 'C':
+        if (!pendingCurve.length) {
+          const lastPoint = currentPoints.length
+            ? currentPoints[currentPoints.length - 1]
+            : start;
+          pendingCurve.push([lastPoint[0], lastPoint[1]]);
+        }
+        pendingCurve.push([data[0], data[1]]);
+        pendingCurve.push([data[2], data[3]]);
+        pendingCurve.push([data[4], data[5]]);
+        break;
+      case 'Z':
+        appendPendingCurve();
+        currentPoints.push([start[0], start[1]]);
+        break;
+    }
+  }
+  appendPendingPoints();
+
+  if (!distance) {
+    return sets;
+  }
+
+  const out: Point[][] = [];
+  for (const set of sets) {
+    const simplifiedSet = simplify(set, distance);
+    if (simplifiedSet.length) {
+      out.push(simplifiedSet);
+    }
+  }
+  return out;
+}

blocksuite/affine/blocks/surface/src/utils/priority-queue.ts

@@ -0,0 +1,85 @@
+type PriorityQueueNode<T, K> = {
+  value: T;
+  priority: K;
+};
+
+export class PriorityQueue<T, K> {
+  heap: PriorityQueueNode<T, K>[] = [];
+
+  constructor(private readonly _compare: (a: K, b: K) => number) {}
+
+  bubbleDown(): void {
+    let index = 0;
+    const length = this.heap.length;
+    const element = this.heap[0];
+
+    for (;;) {
+      const leftChildIndex = 2 * index + 1;
+      const rightChildIndex = 2 * index + 2;
+      let swap = -1;
+      let leftChild: PriorityQueueNode<T, K>,
+        rightChild: PriorityQueueNode<T, K>;
+
+      if (leftChildIndex < length) {
+        leftChild = this.heap[leftChildIndex];
+        if (this._compare(leftChild.priority, element.priority) < 0) {
+          swap = leftChildIndex;
+        }
+      }
+
+      if (rightChildIndex < length) {
+        leftChild = this.heap[leftChildIndex];
+        rightChild = this.heap[rightChildIndex];
+        if (
+          (swap === -1 &&
+            this._compare(rightChild.priority, element.priority) < 0) ||
+          (swap !== -1 &&
+            this._compare(rightChild.priority, leftChild.priority) < 0)
+        ) {
+          swap = rightChildIndex;
+        }
+      }
+
+      if (swap === -1) break;
+
+      this.heap[index] = this.heap[swap];
+      this.heap[swap] = element;
+      index = swap;
+    }
+  }
+
+  bubbleUp(index: number = this.heap.length - 1): void {
+    const element = this.heap[index];
+
+    while (index > 0) {
+      const parentIndex = Math.floor((index - 1) / 2);
+      const parent = this.heap[parentIndex];
+
+      if (this._compare(parent.priority, element.priority) <= 0) break;
+
+      this.heap[parentIndex] = element;
+      this.heap[index] = parent;
+      index = parentIndex;
+    }
+  }
+
+  dequeue(): T | null {
+    const min = this.heap[0];
+    const end = this.heap.pop();
+    if (this.heap.length > 0 && end) {
+      this.heap[0] = end;
+      this.bubbleDown();
+    }
+    return min?.value ?? null;
+  }
+
+  empty(): boolean {
+    return this.heap.length === 0;
+  }
+
+  enqueue(value: T, priority: K): void {
+    const node = { value, priority };
+    this.heap.push(node);
+    this.bubbleUp();
+  }
+}

blocksuite/affine/blocks/surface/src/utils/rough/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Preet Shihn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

blocksuite/affine/blocks/surface/src/utils/rough/canvas.ts

@@ -0,0 +1,214 @@
+import type {
+  Config,
+  Drawable,
+  OpSet,
+  Options,
+  ResolvedOptions,
+} from './core.js';
+import { RoughGenerator } from './generator.js';
+import type { Point } from './geometry.js';
+
+export class RoughCanvas {
+  private readonly canvas: HTMLCanvasElement;
+
+  private readonly ctx: CanvasRenderingContext2D;
+
+  private readonly gen: RoughGenerator;
+
+  get generator(): RoughGenerator {
+    return this.gen;
+  }
+
+  constructor(canvas: HTMLCanvasElement, config?: Config) {
+    this.canvas = canvas;
+
+    this.ctx = this.canvas.getContext('2d')!;
+    this.gen = new RoughGenerator(config);
+  }
+
+  private _drawToContext(
+    ctx: CanvasRenderingContext2D,
+    drawing: OpSet,
+    fixedDecimals?: number,
+    rule: CanvasFillRule = 'nonzero'
+  ) {
+    ctx.beginPath();
+    for (const item of drawing.ops) {
+      const data =
+        typeof fixedDecimals === 'number' && fixedDecimals >= 0
+          ? item.data.map(d => +d.toFixed(fixedDecimals))
+          : item.data;
+      switch (item.op) {
+        case 'move':
+          ctx.moveTo(data[0], data[1]);
+          break;
+        case 'bcurveTo':
+          ctx.bezierCurveTo(
+            data[0],
+            data[1],
+            data[2],
+            data[3],
+            data[4],
+            data[5]
+          );
+          break;
+        case 'lineTo':
+          ctx.lineTo(data[0], data[1]);
+          break;
+      }
+    }
+    if (drawing.type === 'fillPath') {
+      ctx.fill(rule);
+    } else {
+      ctx.stroke();
+    }
+  }
+
+  private fillSketch(
+    ctx: CanvasRenderingContext2D,
+    drawing: OpSet,
+    o: ResolvedOptions
+  ) {
+    let fweight = o.fillWeight;
+    if (fweight < 0) {
+      fweight = o.strokeWidth / 2;
+    }
+    ctx.save();
+    if (o.fillLineDash) {
+      ctx.setLineDash(o.fillLineDash);
+    }
+    if (o.fillLineDashOffset) {
+      ctx.lineDashOffset = o.fillLineDashOffset;
+    }
+    ctx.strokeStyle = o.fill || '';
+    ctx.lineWidth = fweight;
+    this._drawToContext(ctx, drawing, o.fixedDecimalPlaceDigits);
+    ctx.restore();
+  }
+
+  arc(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    start: number,
+    stop: number,
+    closed = false,
+    options?: Options
+  ): Drawable {
+    const d = this.gen.arc(x, y, width, height, start, stop, closed, options);
+    this.draw(d);
+    return d;
+  }
+
+  circle(x: number, y: number, diameter: number, options?: Options): Drawable {
+    const d = this.gen.circle(x, y, diameter, options);
+    this.draw(d);
+    return d;
+  }
+
+  curve(points: Point[], options?: Options): Drawable {
+    const d = this.gen.curve(points, options);
+    this.draw(d);
+    return d;
+  }
+
+  draw(drawable: Drawable): void {
+    const sets = drawable.sets || [];
+    const o = drawable.options || this.getDefaultOptions();
+    const ctx = this.ctx;
+    const precision = drawable.options.fixedDecimalPlaceDigits;
+
+    for (const drawing of sets) {
+      switch (drawing.type) {
+        case 'path':
+          ctx.save();
+          ctx.strokeStyle = o.stroke === 'none' ? 'transparent' : o.stroke;
+          ctx.lineWidth = o.strokeWidth;
+          if (o.strokeLineDash) {
+            ctx.setLineDash(o.strokeLineDash);
+          }
+          if (o.strokeLineDashOffset) {
+            ctx.lineDashOffset = o.strokeLineDashOffset;
+          }
+          this._drawToContext(ctx, drawing, precision);
+          ctx.restore();
+          break;
+        case 'fillPath': {
+          ctx.save();
+          ctx.fillStyle = o.fill || '';
+          const fillRule: CanvasFillRule =
+            drawable.shape === 'curve' ||
+            drawable.shape === 'polygon' ||
+            drawable.shape === 'path'
+              ? 'evenodd'
+              : 'nonzero';
+          this._drawToContext(ctx, drawing, precision, fillRule);
+          ctx.restore();
+          break;
+        }
+        case 'fillSketch':
+          this.fillSketch(ctx, drawing, o);
+          break;
+      }
+    }
+  }
+
+  ellipse(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    options?: Options
+  ): Drawable {
+    const d = this.gen.ellipse(x, y, width, height, options);
+    this.draw(d);
+    return d;
+  }
+
+  getDefaultOptions(): ResolvedOptions {
+    return this.gen.defaultOptions;
+  }
+
+  line(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    options?: Options
+  ): Drawable {
+    const d = this.gen.line(x1, y1, x2, y2, options);
+    this.draw(d);
+    return d;
+  }
+
+  linearPath(points: Point[], options?: Options): Drawable {
+    const d = this.gen.linearPath(points, options);
+    this.draw(d);
+    return d;
+  }
+
+  path(d: string, options?: Options): Drawable {
+    const drawing = this.gen.path(d, options);
+    this.draw(drawing);
+    return drawing;
+  }
+
+  polygon(points: Point[], options?: Options): Drawable {
+    const d = this.gen.polygon(points, options);
+    this.draw(d);
+    return d;
+  }
+
+  rectangle(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    options?: Options
+  ): Drawable {
+    const d = this.gen.rectangle(x, y, width, height, options);
+    this.draw(d);
+    return d;
+  }
+}

blocksuite/affine/blocks/surface/src/utils/rough/core.ts

@@ -0,0 +1,93 @@
+import type { Point } from './geometry.js';
+import type { Random } from './math.js';
+
+export const SVGNS = 'http://www.w3.org/2000/svg';
+
+export interface Config {
+  options?: Options;
+}
+
+export interface DrawingSurface {
+  width: number | SVGAnimatedLength;
+  height: number | SVGAnimatedLength;
+}
+
+export interface Options {
+  maxRandomnessOffset?: number;
+  roughness?: number;
+  bowing?: number;
+  stroke?: string;
+  strokeWidth?: number;
+  curveFitting?: number;
+  curveTightness?: number;
+  curveStepCount?: number;
+  fill?: string;
+  fillStyle?: string;
+  fillWeight?: number;
+  hachureAngle?: number;
+  hachureGap?: number;
+  simplification?: number;
+  dashOffset?: number;
+  dashGap?: number;
+  zigzagOffset?: number;
+  seed?: number;
+  strokeLineDash?: number[];
+  strokeLineDashOffset?: number;
+  fillLineDash?: number[];
+  fillLineDashOffset?: number;
+  disableMultiStroke?: boolean;
+  disableMultiStrokeFill?: boolean;
+  preserveVertices?: boolean;
+  fixedDecimalPlaceDigits?: number;
+}
+
+export interface ResolvedOptions extends Options {
+  maxRandomnessOffset: number;
+  roughness: number;
+  bowing: number;
+  stroke: string;
+  strokeWidth: number;
+  curveFitting: number;
+  curveTightness: number;
+  curveStepCount: number;
+  fillStyle: string;
+  fillWeight: number;
+  hachureAngle: number;
+  hachureGap: number;
+  dashOffset: number;
+  dashGap: number;
+  zigzagOffset: number;
+  seed: number;
+  randomizer?: Random;
+  disableMultiStroke: boolean;
+  disableMultiStrokeFill: boolean;
+  preserveVertices: boolean;
+}
+
+export type OpType = 'move' | 'bcurveTo' | 'lineTo';
+export type OpSetType = 'path' | 'fillPath' | 'fillSketch';
+
+export interface Op {
+  op: OpType;
+  data: number[];
+}
+
+export interface OpSet {
+  type: OpSetType;
+  ops: Op[];
+  size?: Point;
+  path?: string;
+}
+
+export interface Drawable {
+  shape: string;
+  options: ResolvedOptions;
+  sets: OpSet[];
+}
+
+export interface PathInfo {
+  d: string;
+  stroke: string;
+  strokeWidth: number;
+  fill?: string;
+}

blocksuite/affine/blocks/surface/src/utils/rough/fillers/dashed-filler.ts

@@ -0,0 +1,62 @@
+import type { Op, OpSet, ResolvedOptions } from '../core.js';
+import type { Line, Point } from '../geometry.js';
+import { lineLength } from '../geometry.js';
+import type { PatternFiller, RenderHelper } from './filler-interface.js';
+import { polygonHachureLines } from './scan-line-hachure.js';
+
+export class DashedFiller implements PatternFiller {
+  private readonly helper: RenderHelper;
+
+  constructor(helper: RenderHelper) {
+    this.helper = helper;
+  }
+
+  private dashedLine(lines: Line[], o: ResolvedOptions): Op[] {
+    const offset =
+      o.dashOffset < 0
+        ? o.hachureGap < 0
+          ? o.strokeWidth * 4
+          : o.hachureGap
+        : o.dashOffset;
+    const gap =
+      o.dashGap < 0
+        ? o.hachureGap < 0
+          ? o.strokeWidth * 4
+          : o.hachureGap
+        : o.dashGap;
+    const ops: Op[] = [];
+    lines.forEach(line => {
+      const length = lineLength(line);
+      const count = Math.floor(length / (offset + gap));
+      const startOffset = (length + gap - count * (offset + gap)) / 2;
+      let p1 = line[0];
+      let p2 = line[1];
+      if (p1[0] > p2[0]) {
+        p1 = line[1];
+        p2 = line[0];
+      }
+      const alpha = Math.atan((p2[1] - p1[1]) / (p2[0] - p1[0]));
+      for (let i = 0; i < count; i++) {
+        const lstart = i * (offset + gap);
+        const lend = lstart + offset;
+        const start: Point = [
+          p1[0] + lstart * Math.cos(alpha) + startOffset * Math.cos(alpha),
+          p1[1] + lstart * Math.sin(alpha) + startOffset * Math.sin(alpha),
+        ];
+        const end: Point = [
+          p1[0] + lend * Math.cos(alpha) + startOffset * Math.cos(alpha),
+          p1[1] + lend * Math.sin(alpha) + startOffset * Math.sin(alpha),
+        ];
+        ops.push(
+          ...this.helper.doubleLineOps(start[0], start[1], end[0], end[1], o)
+        );
+      }
+    });
+    return ops;
+  }
+
+  fillPolygons(polygonList: Point[][], o: ResolvedOptions): OpSet {
+    const lines = polygonHachureLines(polygonList, o);
+    return { type: 'fillSketch', ops: this.dashedLine(lines, o) };
+  }
+}

blocksuite/affine/blocks/surface/src/utils/rough/fillers/dot-filler.ts

@@ -0,0 +1,50 @@
+import type { Op, OpSet, ResolvedOptions } from '../core.js';
+import type { Line, Point } from '../geometry.js';
+import { lineLength } from '../geometry.js';
+import type { PatternFiller, RenderHelper } from './filler-interface.js';
+import { polygonHachureLines } from './scan-line-hachure.js';
+
+export class DotFiller implements PatternFiller {
+  private readonly helper: RenderHelper;
+
+  constructor(helper: RenderHelper) {
+    this.helper = helper;
+  }
+
+  private dotsOnLines(lines: Line[], o: ResolvedOptions): OpSet {
+    const ops: Op[] = [];
+    let gap = o.hachureGap;
+    if (gap < 0) {
+      gap = o.strokeWidth * 4;
+    }
+    gap = Math.max(gap, 0.1);
+    let fweight = o.fillWeight;
+    if (fweight < 0) {
+      fweight = o.strokeWidth / 2;
+    }
+    const ro = gap / 4;
+    for (const line of lines) {
+      const length = lineLength(line);
+      const dl = length / gap;
+      const count = Math.ceil(dl) - 1;
+      const offset = length - count * gap;
+      const x = (line[0][0] + line[1][0]) / 2 - gap / 4;
+      const minY = Math.min(line[0][1], line[1][1]);
+
+      for (let i = 0; i < count; i++) {
+        const y = minY + offset + i * gap;
+        const cx = x - ro + Math.random() * 2 * ro;
+        const cy = y - ro + Math.random() * 2 * ro;
+        const el = this.helper.ellipse(cx, cy, fweight, fweight, o);
+        ops.push(...el.ops);
+      }
+    }
+    return { type: 'fillSketch', ops };
+  }
+
+  fillPolygons(polygonList: Point[][], o: ResolvedOptions): OpSet {
+    o = Object.assign({}, o, { hachureAngle: 0 });
+    const lines = polygonHachureLines(polygonList, o);
+    return this.dotsOnLines(lines, o);
+  }
+}

blocksuite/affine/blocks/surface/src/utils/rough/fillers/filler-interface.ts

@@ -0,0 +1,25 @@
+import type { Op, OpSet, ResolvedOptions } from '../core.js';
+import type { Point } from '../geometry.js';
+
+export interface PatternFiller {
+  fillPolygons(polygonList: Point[][], o: ResolvedOptions): OpSet;
+}
+
+export interface RenderHelper {
+  randOffset(x: number, o: ResolvedOptions): number;
+  randOffsetWithRange(min: number, max: number, o: ResolvedOptions): number;
+  ellipse(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    o: ResolvedOptions
+  ): OpSet;
+  doubleLineOps(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    o: ResolvedOptions
+  ): Op[];
+}

blocksuite/affine/blocks/surface/src/utils/rough/fillers/filler.ts

@@ -0,0 +1,54 @@
+import type { ResolvedOptions } from '../core.js';
+import { DashedFiller } from './dashed-filler.js';
+import { DotFiller } from './dot-filler.js';
+import type { PatternFiller, RenderHelper } from './filler-interface.js';
+import { HachureFiller } from './hachure-filler.js';
+import { HatchFiller } from './hatch-filler.js';
+import { ZigZagFiller } from './zigzag-filler.js';
+import { ZigZagLineFiller } from './zigzag-line-filler.js';
+
+const fillers: Record<string, PatternFiller> = {};
+
+export function getFiller(
+  o: ResolvedOptions,
+  helper: RenderHelper
+): PatternFiller {
+  let fillerName = o.fillStyle || 'hachure';
+  if (!fillers[fillerName]) {
+    switch (fillerName) {
+      case 'zigzag':
+        if (!fillers[fillerName]) {
+          fillers[fillerName] = new ZigZagFiller(helper);
+        }
+        break;
+      case 'cross-hatch':
+        if (!fillers[fillerName]) {
+          fillers[fillerName] = new HatchFiller(helper);
+        }
+        break;
+      case 'dots':
+        if (!fillers[fillerName]) {
+          fillers[fillerName] = new DotFiller(helper);
+        }
+        break;
+      case 'dashed':
+        if (!fillers[fillerName]) {
+          fillers[fillerName] = new DashedFiller(helper);
+        }
+        break;
+      case 'zigzag-line':
+        if (!fillers[fillerName]) {
+          fillers[fillerName] = new ZigZagLineFiller(helper);
+        }
+        break;
+      case 'hachure':
+      default:
+        fillerName = 'hachure';
+        if (!fillers[fillerName]) {
+          fillers[fillerName] = new HachureFiller(helper);
+        }
+        break;
+    }
+  }
+  return fillers[fillerName];
+}

blocksuite/affine/blocks/surface/src/utils/rough/fillers/hachure-filler.ts

@@ -0,0 +1,38 @@
+import type { Op, OpSet, ResolvedOptions } from '../core.js';
+import type { Line, Point } from '../geometry.js';
+import type { PatternFiller, RenderHelper } from './filler-interface.js';
+import { polygonHachureLines } from './scan-line-hachure.js';
+
+export class HachureFiller implements PatternFiller {
+  private readonly helper: RenderHelper;
+
+  constructor(helper: RenderHelper) {
+    this.helper = helper;
+  }
+
+  protected _fillPolygons(polygonList: Point[][], o: ResolvedOptions): OpSet {
+    const lines = polygonHachureLines(polygonList, o);
+    const ops = this.renderLines(lines, o);
+    return { type: 'fillSketch', ops };
+  }
+
+  fillPolygons(polygonList: Point[][], o: ResolvedOptions): OpSet {
+    return this._fillPolygons(polygonList, o);
+  }
+
+  protected renderLines(lines: Line[], o: ResolvedOptions): Op[] {
+    const ops: Op[] = [];
+    for (const line of lines) {
+      ops.push(
+        ...this.helper.doubleLineOps(
+          line[0][0],
+          line[0][1],
+          line[1][0],
+          line[1][1],
+          o
+        )
+      );
+    }
+    return ops;
+  }
+}

blocksuite/affine/blocks/surface/src/utils/rough/fillers/hatch-filler.ts

@@ -0,0 +1,13 @@
+import type { OpSet, ResolvedOptions } from '../core.js';
+import type { Point } from '../geometry.js';
+import { HachureFiller } from './hachure-filler.js';
+
+export class HatchFiller extends HachureFiller {
+  override fillPolygons(polygonList: Point[][], o: ResolvedOptions): OpSet {
+    const set = this._fillPolygons(polygonList, o);
+    const o2 = Object.assign({}, o, { hachureAngle: o.hachureAngle + 90 });
+    const set2 = this._fillPolygons(polygonList, o2);
+    set.ops = set.ops.concat(set2.ops);
+    return set;
+  }
+}

blocksuite/affine/blocks/surface/src/utils/rough/fillers/scan-line-hachure.ts

@@ -0,0 +1,152 @@
+import type { ResolvedOptions } from '../core.js';
+import type { Line, Point } from '../geometry.js';
+import { rotateLines, rotatePoints } from '../geometry.js';
+
+interface EdgeEntry {
+  ymin: number;
+  ymax: number;
+  x: number;
+  islope: number;
+}
+
+interface ActiveEdgeEntry {
+  s: number;
+  edge: EdgeEntry;
+}
+
+export function polygonHachureLines(
+  polygonList: Point[][],
+  o: ResolvedOptions
+): Line[] {
+  const angle = o.hachureAngle + 90;
+  let gap = o.hachureGap;
+  if (gap < 0) {
+    gap = o.strokeWidth * 4;
+  }
+  gap = Math.max(gap, 0.1);
+
+  const rotationCenter: Point = [0, 0];
+  if (angle) {
+    for (const polygon of polygonList) {
+      rotatePoints(polygon, rotationCenter, angle);
+    }
+  }
+  const lines = straightHachureLines(polygonList, gap);
+  if (angle) {
+    for (const polygon of polygonList) {
+      rotatePoints(polygon, rotationCenter, -angle);
+    }
+    rotateLines(lines, rotationCenter, -angle);
+  }
+  return lines;
+}
+
+function straightHachureLines(polygonList: Point[][], gap: number): Line[] {
+  const vertexArray: Point[][] = [];
+  for (const polygon of polygonList) {
+    const vertices = [...polygon];
+    if (vertices[0].join(',') !== vertices[vertices.length - 1].join(',')) {
+      vertices.push([vertices[0][0], vertices[0][1]]);
+    }
+    if (vertices.length > 2) {
+      vertexArray.push(vertices);
+    }
+  }
+
+  const lines: Line[] = [];
+  gap = Math.max(gap, 0.1);
+
+  // Create sorted edges table
+  const edges: EdgeEntry[] = [];
+
+  for (const vertices of vertexArray) {
+    for (let i = 0; i < vertices.length - 1; i++) {
+      const p1 = vertices[i];
+      const p2 = vertices[i + 1];
+      if (p1[1] !== p2[1]) {
+        const ymin = Math.min(p1[1], p2[1]);
+        edges.push({
+          ymin,
+          ymax: Math.max(p1[1], p2[1]),
+          x: ymin === p1[1] ? p1[0] : p2[0],
+          islope: (p2[0] - p1[0]) / (p2[1] - p1[1]),
+        });
+      }
+    }
+  }
+
+  edges.sort((e1, e2) => {
+    if (e1.ymin < e2.ymin) {
+      return -1;
+    }
+    if (e1.ymin > e2.ymin) {
+      return 1;
+    }
+    if (e1.x < e2.x) {
+      return -1;
+    }
+    if (e1.x > e2.x) {
+      return 1;
+    }
+    if (e1.ymax === e2.ymax) {
+      return 0;
+    }
+    return (e1.ymax - e2.ymax) / Math.abs(e1.ymax - e2.ymax);
+  });
+  if (!edges.length) {
+    return lines;
+  }
+
+  // Start scanning
+  let activeEdges: ActiveEdgeEntry[] = [];
+  let y = edges[0].ymin;
+  while (activeEdges.length || edges.length) {
+    if (edges.length) {
+      let ix = -1;
+      for (let i = 0; i < edges.length; i++) {
+        if (edges[i].ymin > y) {
+          break;
+        }
+        ix = i;
+      }
+      const removed = edges.splice(0, ix + 1);
+      removed.forEach(edge => {
+        activeEdges.push({ s: y, edge });
+      });
+    }
+    activeEdges = activeEdges.filter(ae => {
+      if (ae.edge.ymax <= y) {
+        return false;
+      }
+      return true;
+    });
+    activeEdges.sort((ae1, ae2) => {
+      if (ae1.edge.x === ae2.edge.x) {
+        return 0;
+      }
+      return (ae1.edge.x - ae2.edge.x) / Math.abs(ae1.edge.x - ae2.edge.x);
+    });
+
+    // fill between the edges
+    if (activeEdges.length > 1) {
+      for (let i = 0; i < activeEdges.length; i = i + 2) {
+        const nexti = i + 1;
+        if (nexti >= activeEdges.length) {
+          break;
+        }
+        const ce = activeEdges[i].edge;
+        const ne = activeEdges[nexti].edge;
+        lines.push([
+          [Math.round(ce.x), y],
+          [Math.round(ne.x), y],
+        ]);
+      }
+    }
+
+    y += gap;
+    activeEdges.forEach(ae => {
+      ae.edge.x = ae.edge.x + gap * ae.edge.islope;
+    });
+  }
+  return lines;
+}

blocksuite/affine/blocks/surface/src/utils/rough/fillers/zigzag-filler.ts

@@ -0,0 +1,31 @@
+import type { OpSet, ResolvedOptions } from '../core.js';
+import type { Line, Point } from '../geometry.js';
+import { lineLength } from '../geometry.js';
+import { HachureFiller } from './hachure-filler.js';
+import { polygonHachureLines } from './scan-line-hachure.js';
+
+export class ZigZagFiller extends HachureFiller {
+  override fillPolygons(polygonList: Point[][], o: ResolvedOptions): OpSet {
+    let gap = o.hachureGap;
+    if (gap < 0) {
+      gap = o.strokeWidth * 4;
+    }
+    gap = Math.max(gap, 0.1);
+    const o2 = Object.assign({}, o, { hachureGap: gap });
+    const lines = polygonHachureLines(polygonList, o2);
+    const zigZagAngle = (Math.PI / 180) * o.hachureAngle;
+    const zigzagLines: Line[] = [];
+    const dgx = gap * 0.5 * Math.cos(zigZagAngle);
+    const dgy = gap * 0.5 * Math.sin(zigZagAngle);
+    for (const [p1, p2] of lines) {
+      if (lineLength([p1, p2])) {
+        zigzagLines.push(
+          [[p1[0] - dgx, p1[1] + dgy], [...p2]],
+          [[p1[0] + dgx, p1[1] - dgy], [...p2]]
+        );
+      }
+    }
+    const ops = this.renderLines(zigzagLines, o);
+    return { type: 'fillSketch', ops };
+  }
+}

blocksuite/affine/blocks/surface/src/utils/rough/fillers/zigzag-line-filler.ts

@@ -0,0 +1,64 @@
+import type { Op, OpSet, ResolvedOptions } from '../core.js';
+import type { Line, Point } from '../geometry.js';
+import { lineLength } from '../geometry.js';
+import type { PatternFiller, RenderHelper } from './filler-interface.js';
+import { polygonHachureLines } from './scan-line-hachure.js';
+
+export class ZigZagLineFiller implements PatternFiller {
+  private readonly helper: RenderHelper;
+
+  constructor(helper: RenderHelper) {
+    this.helper = helper;
+  }
+
+  private zigzagLines(lines: Line[], zo: number, o: ResolvedOptions): Op[] {
+    const ops: Op[] = [];
+    lines.forEach(line => {
+      const length = lineLength(line);
+      const count = Math.round(length / (2 * zo));
+      let p1 = line[0];
+      let p2 = line[1];
+      if (p1[0] > p2[0]) {
+        p1 = line[1];
+        p2 = line[0];
+      }
+      const alpha = Math.atan((p2[1] - p1[1]) / (p2[0] - p1[0]));
+      for (let i = 0; i < count; i++) {
+        const lstart = i * 2 * zo;
+        const lend = (i + 1) * 2 * zo;
+        const dz = Math.sqrt(2 * Math.pow(zo, 2));
+        const start: Point = [
+          p1[0] + lstart * Math.cos(alpha),
+          p1[1] + lstart * Math.sin(alpha),
+        ];
+        const end: Point = [
+          p1[0] + lend * Math.cos(alpha),
+          p1[1] + lend * Math.sin(alpha),
+        ];
+        const middle: Point = [
+          start[0] + dz * Math.cos(alpha + Math.PI / 4),
+          start[1] + dz * Math.sin(alpha + Math.PI / 4),
+        ];
+        ops.push(
+          ...this.helper.doubleLineOps(
+            start[0],
+            start[1],
+            middle[0],
+            middle[1],
+            o
+          ),
+          ...this.helper.doubleLineOps(middle[0], middle[1], end[0], end[1], o)
+        );
+      }
+    });
+    return ops;
+  }
+
+  fillPolygons(polygonList: Point[][], o: ResolvedOptions): OpSet {
+    const gap = o.hachureGap < 0 ? o.strokeWidth * 4 : o.hachureGap;
+    const zo = o.zigzagOffset < 0 ? gap : o.zigzagOffset;
+    o = Object.assign({}, o, { hachureGap: gap + zo });
+    const lines = polygonHachureLines(polygonList, o);
+    return { type: 'fillSketch', ops: this.zigzagLines(lines, zo, o) };
+  }
+}

blocksuite/affine/blocks/surface/src/utils/rough/generator.ts

@@ -0,0 +1,340 @@
+import { curveToBezier } from '../points-on-curve/curve-to-bezier.js';
+import { pointsOnBezierCurves } from '../points-on-curve/index.js';
+import { pointsOnPath } from '../points-on-path/index.js';
+import type {
+  Config,
+  Drawable,
+  OpSet,
+  Options,
+  PathInfo,
+  ResolvedOptions,
+} from './core.js';
+import type { Point } from './geometry.js';
+import { randomSeed } from './math.js';
+import {
+  arc,
+  curve,
+  ellipseWithParams,
+  generateEllipseParams,
+  line,
+  linearPath,
+  patternFillArc,
+  patternFillPolygons,
+  rectangle,
+  solidFillPolygon,
+  svgPath,
+} from './renderer.js';
+
+const NOS = 'none';
+
+export class RoughGenerator {
+  private readonly config: Config;
+
+  defaultOptions: ResolvedOptions = {
+    maxRandomnessOffset: 2,
+    roughness: 1,
+    bowing: 1,
+    stroke: '#000',
+    strokeWidth: 1,
+    curveTightness: 0,
+    curveFitting: 0.95,
+    curveStepCount: 9,
+    fillStyle: 'hachure',
+    fillWeight: -1,
+    hachureAngle: -41,
+    hachureGap: -1,
+    dashOffset: -1,
+    dashGap: -1,
+    zigzagOffset: -1,
+    seed: 0,
+    disableMultiStroke: false,
+    disableMultiStrokeFill: false,
+    preserveVertices: false,
+  };
+
+  constructor(config?: Config) {
+    this.config = config || {};
+    if (this.config.options) {
+      this.defaultOptions = this._o(this.config.options);
+    }
+  }
+
+  static newSeed(): number {
+    return randomSeed();
+  }
+
+  private _d(shape: string, sets: OpSet[], options: ResolvedOptions): Drawable {
+    return { shape, sets: sets || [], options: options || this.defaultOptions };
+  }
+
+  private _o(options?: Options): ResolvedOptions {
+    return options
+      ? Object.assign({}, this.defaultOptions, options)
+      : this.defaultOptions;
+  }
+
+  private fillSketch(drawing: OpSet, o: ResolvedOptions): PathInfo {
+    let fweight = o.fillWeight;
+    if (fweight < 0) {
+      fweight = o.strokeWidth / 2;
+    }
+    return {
+      d: this.opsToPath(drawing),
+      stroke: o.fill || NOS,
+      strokeWidth: fweight,
+      fill: NOS,
+    };
+  }
+
+  arc(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    start: number,
+    stop: number,
+    closed = false,
+    options?: Options
+  ): Drawable {
+    const o = this._o(options);
+    const paths = [];
+    const outline = arc(x, y, width, height, start, stop, closed, true, o);
+    if (closed && o.fill) {
+      if (o.fillStyle === 'solid') {
+        const fillOptions: ResolvedOptions = { ...o };
+        fillOptions.disableMultiStroke = true;
+        const shape = arc(
+          x,
+          y,
+          width,
+          height,
+          start,
+          stop,
+          true,
+          false,
+          fillOptions
+        );
+        shape.type = 'fillPath';
+        paths.push(shape);
+      } else {
+        paths.push(patternFillArc(x, y, width, height, start, stop, o));
+      }
+    }
+    if (o.stroke !== NOS) {
+      paths.push(outline);
+    }
+    return this._d('arc', paths, o);
+  }
+
+  circle(x: number, y: number, diameter: number, options?: Options): Drawable {
+    const ret = this.ellipse(x, y, diameter, diameter, options);
+    ret.shape = 'circle';
+    return ret;
+  }
+
+  curve(points: Point[], options?: Options): Drawable {
+    const o = this._o(options);
+    const paths: OpSet[] = [];
+    const outline = curve(points, o);
+    if (o.fill && o.fill !== NOS && points.length >= 3) {
+      const bcurve = curveToBezier(points);
+      const polyPoints = pointsOnBezierCurves(
+        bcurve,
+        10,
+        (1 + o.roughness) / 2
+      );
+      if (o.fillStyle === 'solid') {
+        paths.push(solidFillPolygon([polyPoints], o));
+      } else {
+        paths.push(patternFillPolygons([polyPoints], o));
+      }
+    }
+    if (o.stroke !== NOS) {
+      paths.push(outline);
+    }
+    return this._d('curve', paths, o);
+  }
+
+  ellipse(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    options?: Options
+  ): Drawable {
+    const o = this._o(options);
+    const paths: OpSet[] = [];
+    const ellipseParams = generateEllipseParams(width, height, o);
+    const ellipseResponse = ellipseWithParams(x, y, o, ellipseParams);
+    if (o.fill) {
+      if (o.fillStyle === 'solid') {
+        const shape = ellipseWithParams(x, y, o, ellipseParams).opset;
+        shape.type = 'fillPath';
+        paths.push(shape);
+      } else {
+        paths.push(patternFillPolygons([ellipseResponse.estimatedPoints], o));
+      }
+    }
+    if (o.stroke !== NOS) {
+      paths.push(ellipseResponse.opset);
+    }
+    return this._d('ellipse', paths, o);
+  }
+
+  line(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    options?: Options
+  ): Drawable {
+    const o = this._o(options);
+    return this._d('line', [line(x1, y1, x2, y2, o)], o);
+  }
+
+  linearPath(points: Point[], options?: Options): Drawable {
+    const o = this._o(options);
+    return this._d('linearPath', [linearPath(points, false, o)], o);
+  }
+
+  opsToPath(drawing: OpSet, fixedDecimals?: number): string {
+    let path = '';
+    for (const item of drawing.ops) {
+      const data =
+        typeof fixedDecimals === 'number' && fixedDecimals >= 0
+          ? item.data.map(d => +d.toFixed(fixedDecimals))
+          : item.data;
+      switch (item.op) {
+        case 'move':
+          path += `M${data[0]} ${data[1]} `;
+          break;
+        case 'bcurveTo':
+          path += `C${data[0]} ${data[1]}, ${data[2]} ${data[3]}, ${data[4]} ${data[5]} `;
+          break;
+        case 'lineTo':
+          path += `L${data[0]} ${data[1]} `;
+          break;
+      }
+    }
+    return path.trim();
+  }
+
+  path(d: string, options?: Options): Drawable {
+    const o = this._o(options);
+    const paths: OpSet[] = [];
+    if (!d) {
+      return this._d('path', paths, o);
+    }
+    d = (d || '')
+      .replace(/\n/g, ' ')
+      .replace(/(-\s)/g, '-')
+      .replace('/(ss)/g', ' ');
+
+    const hasFill = o.fill && o.fill !== 'transparent' && o.fill !== NOS;
+    const hasStroke = o.stroke !== NOS;
+    const simplified = !!(o.simplification && o.simplification < 1);
+    const distance = simplified
+      ? 4 - 4 * o.simplification!
+      : (1 + o.roughness) / 2;
+    const sets = pointsOnPath(d, 1, distance);
+
+    if (hasFill) {
+      if (o.fillStyle === 'solid') {
+        paths.push(solidFillPolygon(sets, o));
+      } else {
+        paths.push(patternFillPolygons(sets, o));
+      }
+    }
+    if (hasStroke) {
+      if (simplified) {
+        sets.forEach(set => {
+          paths.push(linearPath(set, false, o));
+        });
+      } else {
+        paths.push(svgPath(d, o));
+      }
+    }
+
+    return this._d('path', paths, o);
+  }
+
+  polygon(points: Point[], options?: Options): Drawable {
+    const o = this._o(options);
+    const paths: OpSet[] = [];
+    const outline = linearPath(points, true, o);
+    if (o.fill) {
+      if (o.fillStyle === 'solid') {
+        paths.push(solidFillPolygon([points], o));
+      } else {
+        paths.push(patternFillPolygons([points], o));
+      }
+    }
+    if (o.stroke !== NOS) {
+      paths.push(outline);
+    }
+    return this._d('polygon', paths, o);
+  }
+
+  rectangle(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    options?: Options
+  ): Drawable {
+    const o = this._o(options);
+    const paths = [];
+    const outline = rectangle(x, y, width, height, o);
+    if (o.fill) {
+      const points: Point[] = [
+        [x, y],
+        [x + width, y],
+        [x + width, y + height],
+        [x, y + height],
+      ];
+      if (o.fillStyle === 'solid') {
+        paths.push(solidFillPolygon([points], o));
+      } else {
+        paths.push(patternFillPolygons([points], o));
+      }
+    }
+    if (o.stroke !== NOS) {
+      paths.push(outline);
+    }
+    return this._d('rectangle', paths, o);
+  }
+
+  toPaths(drawable: Drawable): PathInfo[] {
+    const sets = drawable.sets || [];
+    const o = drawable.options || this.defaultOptions;
+    const paths: PathInfo[] = [];
+    for (const drawing of sets) {
+      let path: PathInfo | null = null;
+      switch (drawing.type) {
+        case 'path':
+          path = {
+            d: this.opsToPath(drawing),
+            stroke: o.stroke,
+            strokeWidth: o.strokeWidth,
+            fill: NOS,
+          };
+          break;
+        case 'fillPath':
+          path = {
+            d: this.opsToPath(drawing),
+            stroke: NOS,
+            strokeWidth: 0,
+            fill: o.fill || NOS,
+          };
+          break;
+        case 'fillSketch':
+          path = this.fillSketch(drawing, o);
+          break;
+      }
+      if (path) {
+        paths.push(path);
+      }
+    }
+    return paths;
+  }
+}

blocksuite/affine/blocks/surface/src/utils/rough/geometry.ts

@@ -0,0 +1,43 @@
+export type Point = [number, number];
+export type Line = [Point, Point];
+
+export interface Rectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function rotatePoints(
+  points: Point[],
+  center: Point,
+  degrees: number
+): void {
+  if (points && points.length) {
+    const [cx, cy] = center;
+    const angle = (Math.PI / 180) * degrees;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    points.forEach(p => {
+      const [x, y] = p;
+      p[0] = (x - cx) * cos - (y - cy) * sin + cx;
+      p[1] = (x - cx) * sin + (y - cy) * cos + cy;
+    });
+  }
+}
+
+export function rotateLines(
+  lines: Line[],
+  center: Point,
+  degrees: number
+): void {
+  const points: Point[] = [];
+  lines.forEach(line => points.push(...line));
+  rotatePoints(points, center, degrees);
+}
+
+export function lineLength(line: Line): number {
+  const p1 = line[0];
+  const p2 = line[1];
+  return Math.sqrt(Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2));
+}

blocksuite/affine/blocks/surface/src/utils/rough/math.ts

@@ -0,0 +1,21 @@
+export function randomSeed(): number {
+  return Math.floor(Math.random() * 2 ** 31);
+}
+
+export class Random {
+  private seed: number;
+
+  constructor(seed: number) {
+    this.seed = seed;
+  }
+
+  next(): number {
+    if (this.seed) {
+      return (
+        ((2 ** 31 - 1) & (this.seed = Math.imul(48271, this.seed))) / 2 ** 31
+      );
+    } else {
+      return Math.random();
+    }
+  }
+}

blocksuite/affine/blocks/surface/src/utils/rough/renderer.ts

@@ -0,0 +1,742 @@
+import { absolutize } from '../path-data-parser/absolutize.js';
+import { normalize } from '../path-data-parser/normalize.js';
+import { parsePath } from '../path-data-parser/parser.js';
+import type { Op, OpSet, ResolvedOptions } from './core.js';
+import { getFiller } from './fillers/filler.js';
+import type { RenderHelper } from './fillers/filler-interface.js';
+import type { Point } from './geometry.js';
+import { Random } from './math.js';
+
+interface EllipseParams {
+  rx: number;
+  ry: number;
+  increment: number;
+}
+
+const helper: RenderHelper = {
+  randOffset,
+  randOffsetWithRange,
+  ellipse,
+  doubleLineOps: doubleLineFillOps,
+};
+
+export function line(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  o: ResolvedOptions
+): OpSet {
+  return { type: 'path', ops: _doubleLine(x1, y1, x2, y2, o) };
+}
+
+export function linearPath(
+  points: Point[],
+  close: boolean,
+  o: ResolvedOptions
+): OpSet {
+  const len = (points || []).length;
+  if (len > 2) {
+    const ops: Op[] = [];
+    for (let i = 0; i < len - 1; i++) {
+      ops.push(
+        ..._doubleLine(
+          points[i][0],
+          points[i][1],
+          points[i + 1][0],
+          points[i + 1][1],
+          o
+        )
+      );
+    }
+    if (close) {
+      ops.push(
+        ..._doubleLine(
+          points[len - 1][0],
+          points[len - 1][1],
+          points[0][0],
+          points[0][1],
+          o
+        )
+      );
+    }
+    return { type: 'path', ops };
+  } else if (len === 2) {
+    return line(points[0][0], points[0][1], points[1][0], points[1][1], o);
+  }
+  return { type: 'path', ops: [] };
+}
+
+export function polygon(points: Point[], o: ResolvedOptions): OpSet {
+  return linearPath(points, true, o);
+}
+
+export function rectangle(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  o: ResolvedOptions
+): OpSet {
+  const points: Point[] = [
+    [x, y],
+    [x + width, y],
+    [x + width, y + height],
+    [x, y + height],
+  ];
+  return polygon(points, o);
+}
+
+export function curve(points: Point[], o: ResolvedOptions): OpSet {
+  let o1 = _curveWithOffset(points, 1 * (1 + o.roughness * 0.2), o);
+  if (!o.disableMultiStroke) {
+    const o2 = _curveWithOffset(
+      points,
+      1.5 * (1 + o.roughness * 0.22),
+      cloneOptionsAlterSeed(o)
+    );
+    o1 = o1.concat(o2);
+  }
+  return { type: 'path', ops: o1 };
+}
+
+export interface EllipseResult {
+  opset: OpSet;
+  estimatedPoints: Point[];
+}
+
+export function ellipse(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  o: ResolvedOptions
+): OpSet {
+  const params = generateEllipseParams(width, height, o);
+  return ellipseWithParams(x, y, o, params).opset;
+}
+
+export function generateEllipseParams(
+  width: number,
+  height: number,
+  o: ResolvedOptions
+): EllipseParams {
+  const psq = Math.sqrt(
+    Math.PI *
+      2 *
+      Math.sqrt((Math.pow(width / 2, 2) + Math.pow(height / 2, 2)) / 2)
+  );
+  const stepCount = Math.ceil(
+    Math.max(o.curveStepCount, (o.curveStepCount / Math.sqrt(200)) * psq)
+  );
+  const increment = (Math.PI * 2) / stepCount;
+  let rx = Math.abs(width / 2);
+  let ry = Math.abs(height / 2);
+  const curveFitRandomness = 1 - o.curveFitting;
+  rx += _offsetOpt(rx * curveFitRandomness, o);
+  ry += _offsetOpt(ry * curveFitRandomness, o);
+  return { increment, rx, ry };
+}
+
+export function ellipseWithParams(
+  x: number,
+  y: number,
+  o: ResolvedOptions,
+  ellipseParams: EllipseParams
+): EllipseResult {
+  const [ap1, cp1] = _computeEllipsePoints(
+    ellipseParams.increment,
+    x,
+    y,
+    ellipseParams.rx,
+    ellipseParams.ry,
+    1,
+    ellipseParams.increment * _offset(0.1, _offset(0.4, 1, o), o),
+    o
+  );
+  let o1 = _curve(ap1, null, o);
+  if (!o.disableMultiStroke && o.roughness !== 0) {
+    const [ap2] = _computeEllipsePoints(
+      ellipseParams.increment,
+      x,
+      y,
+      ellipseParams.rx,
+      ellipseParams.ry,
+      1.5,
+      0,
+      o
+    );
+    const o2 = _curve(ap2, null, o);
+    o1 = o1.concat(o2);
+  }
+  return {
+    estimatedPoints: cp1,
+    opset: { type: 'path', ops: o1 },
+  };
+}
+
+export function arc(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  start: number,
+  stop: number,
+  closed: boolean,
+  roughClosure: boolean,
+  o: ResolvedOptions
+): OpSet {
+  const cx = x;
+  const cy = y;
+  let rx = Math.abs(width / 2);
+  let ry = Math.abs(height / 2);
+  rx += _offsetOpt(rx * 0.01, o);
+  ry += _offsetOpt(ry * 0.01, o);
+  let strt = start;
+  let stp = stop;
+  while (strt < 0) {
+    strt += Math.PI * 2;
+    stp += Math.PI * 2;
+  }
+  if (stp - strt > Math.PI * 2) {
+    strt = 0;
+    stp = Math.PI * 2;
+  }
+  const ellipseInc = (Math.PI * 2) / o.curveStepCount;
+  const arcInc = Math.min(ellipseInc / 2, (stp - strt) / 2);
+  const ops = _arc(arcInc, cx, cy, rx, ry, strt, stp, 1, o);
+  if (!o.disableMultiStroke) {
+    const o2 = _arc(arcInc, cx, cy, rx, ry, strt, stp, 1.5, o);
+    ops.push(...o2);
+  }
+  if (closed) {
+    if (roughClosure) {
+      ops.push(
+        ..._doubleLine(
+          cx,
+          cy,
+          cx + rx * Math.cos(strt),
+          cy + ry * Math.sin(strt),
+          o
+        ),
+        ..._doubleLine(
+          cx,
+          cy,
+          cx + rx * Math.cos(stp),
+          cy + ry * Math.sin(stp),
+          o
+        )
+      );
+    } else {
+      ops.push(
+        { op: 'lineTo', data: [cx, cy] },
+        {
+          op: 'lineTo',
+          data: [cx + rx * Math.cos(strt), cy + ry * Math.sin(strt)],
+        }
+      );
+    }
+  }
+  return { type: 'path', ops };
+}
+
+export function svgPath(path: string, o: ResolvedOptions): OpSet {
+  const segments = normalize(absolutize(parsePath(path)));
+  const ops: Op[] = [];
+  let first: Point = [0, 0];
+  let current: Point = [0, 0];
+  for (const { key, data } of segments) {
+    switch (key) {
+      case 'M': {
+        const ro = 1 * (o.maxRandomnessOffset || 0);
+        const pv = o.preserveVertices;
+        ops.push({
+          op: 'move',
+          data: data.map(d => d + (pv ? 0 : _offsetOpt(ro, o))),
+        });
+        current = [data[0], data[1]];
+        first = [data[0], data[1]];
+        break;
+      }
+      case 'L':
+        ops.push(..._doubleLine(current[0], current[1], data[0], data[1], o));
+        current = [data[0], data[1]];
+        break;
+      case 'C': {
+        const [x1, y1, x2, y2, x, y] = data;
+        ops.push(..._bezierTo(x1, y1, x2, y2, x, y, current, o));
+        current = [x, y];
+        break;
+      }
+      case 'Z':
+        ops.push(..._doubleLine(current[0], current[1], first[0], first[1], o));
+        current = [first[0], first[1]];
+        break;
+    }
+  }
+  return { type: 'path', ops };
+}
+
+// Fills
+
+export function solidFillPolygon(
+  polygonList: Point[][],
+  o: ResolvedOptions
+): OpSet {
+  const ops: Op[] = [];
+  for (const points of polygonList) {
+    if (points.length) {
+      const offset = o.maxRandomnessOffset || 0;
+      const len = points.length;
+      if (len > 2) {
+        ops.push({
+          op: 'move',
+          data: [
+            points[0][0] + _offsetOpt(offset, o),
+            points[0][1] + _offsetOpt(offset, o),
+          ],
+        });
+        for (let i = 1; i < len; i++) {
+          ops.push({
+            op: 'lineTo',
+            data: [
+              points[i][0] + _offsetOpt(offset, o),
+              points[i][1] + _offsetOpt(offset, o),
+            ],
+          });
+        }
+      }
+    }
+  }
+  return { type: 'fillPath', ops };
+}
+
+export function patternFillPolygons(
+  polygonList: Point[][],
+  o: ResolvedOptions
+): OpSet {
+  return getFiller(o, helper).fillPolygons(polygonList, o);
+}
+
+export function patternFillArc(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  start: number,
+  stop: number,
+  o: ResolvedOptions
+): OpSet {
+  const cx = x;
+  const cy = y;
+  let rx = Math.abs(width / 2);
+  let ry = Math.abs(height / 2);
+  rx += _offsetOpt(rx * 0.01, o);
+  ry += _offsetOpt(ry * 0.01, o);
+  let strt = start;
+  let stp = stop;
+  while (strt < 0) {
+    strt += Math.PI * 2;
+    stp += Math.PI * 2;
+  }
+  if (stp - strt > Math.PI * 2) {
+    strt = 0;
+    stp = Math.PI * 2;
+  }
+  const increment = (stp - strt) / o.curveStepCount;
+  const points: Point[] = [];
+  for (let angle = strt; angle <= stp; angle = angle + increment) {
+    points.push([cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)]);
+  }
+  points.push([cx + rx * Math.cos(stp), cy + ry * Math.sin(stp)]);
+  points.push([cx, cy]);
+  return patternFillPolygons([points], o);
+}
+
+export function randOffset(x: number, o: ResolvedOptions): number {
+  return _offsetOpt(x, o);
+}
+
+export function randOffsetWithRange(
+  min: number,
+  max: number,
+  o: ResolvedOptions
+): number {
+  return _offset(min, max, o);
+}
+
+export function doubleLineFillOps(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  o: ResolvedOptions
+): Op[] {
+  return _doubleLine(x1, y1, x2, y2, o, true);
+}
+
+// Private helpers
+
+function cloneOptionsAlterSeed(ops: ResolvedOptions): ResolvedOptions {
+  const result: ResolvedOptions = { ...ops };
+  result.randomizer = undefined;
+  if (ops.seed) {
+    result.seed = ops.seed + 1;
+  }
+  return result;
+}
+
+function random(ops: ResolvedOptions): number {
+  if (!ops.randomizer) {
+    ops.randomizer = new Random(ops.seed || 0);
+  }
+  return ops.randomizer.next();
+}
+
+function _offset(
+  min: number,
+  max: number,
+  ops: ResolvedOptions,
+  roughnessGain = 1
+): number {
+  return ops.roughness * roughnessGain * (random(ops) * (max - min) + min);
+}
+
+function _offsetOpt(
+  x: number,
+  ops: ResolvedOptions,
+  roughnessGain = 1
+): number {
+  return _offset(-x, x, ops, roughnessGain);
+}
+
+function _doubleLine(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  o: ResolvedOptions,
+  filling = false
+): Op[] {
+  const singleStroke = filling
+    ? o.disableMultiStrokeFill
+    : o.disableMultiStroke;
+  const o1 = _line(x1, y1, x2, y2, o, true, false);
+  if (singleStroke) {
+    return o1;
+  }
+  const o2 = _line(x1, y1, x2, y2, o, true, true);
+  return o1.concat(o2);
+}
+
+function _line(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  o: ResolvedOptions,
+  move: boolean,
+  overlay: boolean
+): Op[] {
+  const lengthSq = Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);
+  const length = Math.sqrt(lengthSq);
+  let roughnessGain = 1;
+  if (length < 200) {
+    roughnessGain = 1;
+  } else if (length > 500) {
+    roughnessGain = 0.4;
+  } else {
+    roughnessGain = -0.0016668 * length + 1.233334;
+  }
+
+  let offset = o.maxRandomnessOffset || 0;
+  if (offset * offset * 100 > lengthSq) {
+    offset = length / 10;
+  }
+  const halfOffset = offset / 2;
+  const divergePoint = 0.2 + random(o) * 0.2;
+  let midDispX = (o.bowing * o.maxRandomnessOffset * (y2 - y1)) / 200;
+  let midDispY = (o.bowing * o.maxRandomnessOffset * (x1 - x2)) / 200;
+  midDispX = _offsetOpt(midDispX, o, roughnessGain);
+  midDispY = _offsetOpt(midDispY, o, roughnessGain);
+  const ops: Op[] = [];
+  const randomHalf = () => _offsetOpt(halfOffset, o, roughnessGain);
+  const randomFull = () => _offsetOpt(offset, o, roughnessGain);
+  const preserveVertices = o.preserveVertices;
+  if (move) {
+    if (overlay) {
+      ops.push({
+        op: 'move',
+        data: [
+          x1 + (preserveVertices ? 0 : randomHalf()),
+          y1 + (preserveVertices ? 0 : randomHalf()),
+        ],
+      });
+    } else {
+      ops.push({
+        op: 'move',
+        data: [
+          x1 + (preserveVertices ? 0 : _offsetOpt(offset, o, roughnessGain)),
+          y1 + (preserveVertices ? 0 : _offsetOpt(offset, o, roughnessGain)),
+        ],
+      });
+    }
+  }
+  if (overlay) {
+    ops.push({
+      op: 'bcurveTo',
+      data: [
+        midDispX + x1 + (x2 - x1) * divergePoint + randomHalf(),
+        midDispY + y1 + (y2 - y1) * divergePoint + randomHalf(),
+        midDispX + x1 + 2 * (x2 - x1) * divergePoint + randomHalf(),
+        midDispY + y1 + 2 * (y2 - y1) * divergePoint + randomHalf(),
+        x2 + (preserveVertices ? 0 : randomHalf()),
+        y2 + (preserveVertices ? 0 : randomHalf()),
+      ],
+    });
+  } else {
+    ops.push({
+      op: 'bcurveTo',
+      data: [
+        midDispX + x1 + (x2 - x1) * divergePoint + randomFull(),
+        midDispY + y1 + (y2 - y1) * divergePoint + randomFull(),
+        midDispX + x1 + 2 * (x2 - x1) * divergePoint + randomFull(),
+        midDispY + y1 + 2 * (y2 - y1) * divergePoint + randomFull(),
+        x2 + (preserveVertices ? 0 : randomFull()),
+        y2 + (preserveVertices ? 0 : randomFull()),
+      ],
+    });
+  }
+  return ops;
+}
+
+function _curveWithOffset(
+  points: Point[],
+  offset: number,
+  o: ResolvedOptions
+): Op[] {
+  const ps: Point[] = [];
+  ps.push([
+    points[0][0] + _offsetOpt(offset, o),
+    points[0][1] + _offsetOpt(offset, o),
+  ]);
+  ps.push([
+    points[0][0] + _offsetOpt(offset, o),
+    points[0][1] + _offsetOpt(offset, o),
+  ]);
+  for (let i = 1; i < points.length; i++) {
+    ps.push([
+      points[i][0] + _offsetOpt(offset, o),
+      points[i][1] + _offsetOpt(offset, o),
+    ]);
+    if (i === points.length - 1) {
+      ps.push([
+        points[i][0] + _offsetOpt(offset, o),
+        points[i][1] + _offsetOpt(offset, o),
+      ]);
+    }
+  }
+  return _curve(ps, null, o);
+}
+
+function _curve(
+  points: Point[],
+  closePoint: Point | null,
+  o: ResolvedOptions
+): Op[] {
+  const len = points.length;
+  const ops: Op[] = [];
+  if (len > 3) {
+    const b = [];
+    const s = 1 - o.curveTightness;
+    ops.push({ op: 'move', data: [points[1][0], points[1][1]] });
+    for (let i = 1; i + 2 < len; i++) {
+      const cachedVertArray = points[i];
+      b[0] = [cachedVertArray[0], cachedVertArray[1]];
+      b[1] = [
+        cachedVertArray[0] + (s * points[i + 1][0] - s * points[i - 1][0]) / 6,
+        cachedVertArray[1] + (s * points[i + 1][1] - s * points[i - 1][1]) / 6,
+      ];
+      b[2] = [
+        points[i + 1][0] + (s * points[i][0] - s * points[i + 2][0]) / 6,
+        points[i + 1][1] + (s * points[i][1] - s * points[i + 2][1]) / 6,
+      ];
+      b[3] = [points[i + 1][0], points[i + 1][1]];
+      ops.push({
+        op: 'bcurveTo',
+        data: [b[1][0], b[1][1], b[2][0], b[2][1], b[3][0], b[3][1]],
+      });
+    }
+    if (closePoint && closePoint.length === 2) {
+      const ro = o.maxRandomnessOffset;
+      ops.push({
+        op: 'lineTo',
+        data: [
+          closePoint[0] + _offsetOpt(ro, o),
+          closePoint[1] + _offsetOpt(ro, o),
+        ],
+      });
+    }
+  } else if (len === 3) {
+    ops.push({ op: 'move', data: [points[1][0], points[1][1]] });
+    ops.push({
+      op: 'bcurveTo',
+      data: [
+        points[1][0],
+        points[1][1],
+        points[2][0],
+        points[2][1],
+        points[2][0],
+        points[2][1],
+      ],
+    });
+  } else if (len === 2) {
+    ops.push(
+      ..._doubleLine(points[0][0], points[0][1], points[1][0], points[1][1], o)
+    );
+  }
+  return ops;
+}
+
+function _computeEllipsePoints(
+  increment: number,
+  cx: number,
+  cy: number,
+  rx: number,
+  ry: number,
+  offset: number,
+  overlap: number,
+  o: ResolvedOptions
+): Point[][] {
+  const coreOnly = o.roughness === 0;
+  const corePoints: Point[] = [];
+  const allPoints: Point[] = [];
+
+  if (coreOnly) {
+    increment = increment / 4;
+    allPoints.push([
+      cx + rx * Math.cos(-increment),
+      cy + ry * Math.sin(-increment),
+    ]);
+    for (let angle = 0; angle <= Math.PI * 2; angle = angle + increment) {
+      const p: Point = [cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)];
+      corePoints.push(p);
+      allPoints.push(p);
+    }
+    allPoints.push([cx + rx * Math.cos(0), cy + ry * Math.sin(0)]);
+    allPoints.push([
+      cx + rx * Math.cos(increment),
+      cy + ry * Math.sin(increment),
+    ]);
+  } else {
+    const radOffset = _offsetOpt(0.5, o) - Math.PI / 2;
+    allPoints.push([
+      _offsetOpt(offset, o) + cx + 0.9 * rx * Math.cos(radOffset - increment),
+      _offsetOpt(offset, o) + cy + 0.9 * ry * Math.sin(radOffset - increment),
+    ]);
+    const endAngle = Math.PI * 2 + radOffset - 0.01;
+    for (let angle = radOffset; angle < endAngle; angle = angle + increment) {
+      const p: Point = [
+        _offsetOpt(offset, o) + cx + rx * Math.cos(angle),
+        _offsetOpt(offset, o) + cy + ry * Math.sin(angle),
+      ];
+      corePoints.push(p);
+      allPoints.push(p);
+    }
+    allPoints.push([
+      _offsetOpt(offset, o) +
+        cx +
+        rx * Math.cos(radOffset + Math.PI * 2 + overlap * 0.5),
+      _offsetOpt(offset, o) +
+        cy +
+        ry * Math.sin(radOffset + Math.PI * 2 + overlap * 0.5),
+    ]);
+    allPoints.push([
+      _offsetOpt(offset, o) + cx + 0.98 * rx * Math.cos(radOffset + overlap),
+      _offsetOpt(offset, o) + cy + 0.98 * ry * Math.sin(radOffset + overlap),
+    ]);
+    allPoints.push([
+      _offsetOpt(offset, o) +
+        cx +
+        0.9 * rx * Math.cos(radOffset + overlap * 0.5),
+      _offsetOpt(offset, o) +
+        cy +
+        0.9 * ry * Math.sin(radOffset + overlap * 0.5),
+    ]);
+  }
+
+  return [allPoints, corePoints];
+}
+
+function _arc(
+  increment: number,
+  cx: number,
+  cy: number,
+  rx: number,
+  ry: number,
+  strt: number,
+  stp: number,
+  offset: number,
+  o: ResolvedOptions
+) {
+  const radOffset = strt + _offsetOpt(0.1, o);
+  const points: Point[] = [];
+  points.push([
+    _offsetOpt(offset, o) + cx + 0.9 * rx * Math.cos(radOffset - increment),
+    _offsetOpt(offset, o) + cy + 0.9 * ry * Math.sin(radOffset - increment),
+  ]);
+  for (let angle = radOffset; angle <= stp; angle = angle + increment) {
+    points.push([
+      _offsetOpt(offset, o) + cx + rx * Math.cos(angle),
+      _offsetOpt(offset, o) + cy + ry * Math.sin(angle),
+    ]);
+  }
+  points.push([cx + rx * Math.cos(stp), cy + ry * Math.sin(stp)]);
+  points.push([cx + rx * Math.cos(stp), cy + ry * Math.sin(stp)]);
+  return _curve(points, null, o);
+}
+
+function _bezierTo(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  x: number,
+  y: number,
+  current: Point,
+  o: ResolvedOptions
+): Op[] {
+  const ops: Op[] = [];
+  const ros = [o.maxRandomnessOffset || 1, (o.maxRandomnessOffset || 1) + 0.3];
+  let f: Point = [0, 0];
+  const iterations = o.disableMultiStroke ? 1 : 2;
+  const preserveVertices = o.preserveVertices;
+  for (let i = 0; i < iterations; i++) {
+    if (i === 0) {
+      ops.push({ op: 'move', data: [current[0], current[1]] });
+    } else {
+      ops.push({
+        op: 'move',
+        data: [
+          current[0] + (preserveVertices ? 0 : _offsetOpt(ros[0], o)),
+          current[1] + (preserveVertices ? 0 : _offsetOpt(ros[0], o)),
+        ],
+      });
+    }
+    f = preserveVertices
+      ? [x, y]
+      : [x + _offsetOpt(ros[i], o), y + _offsetOpt(ros[i], o)];
+    ops.push({
+      op: 'bcurveTo',
+      data: [
+        x1 + _offsetOpt(ros[i], o),
+        y1 + _offsetOpt(ros[i], o),
+        x2 + _offsetOpt(ros[i], o),
+        y2 + _offsetOpt(ros[i], o),
+        f[0],
+        f[1],
+      ],
+    });
+  }
+  return ops;
+}

blocksuite/affine/blocks/surface/src/utils/rough/rough.ts

@@ -0,0 +1,22 @@
+import { RoughCanvas } from './canvas.js';
+import type { Config } from './core.js';
+import { RoughGenerator } from './generator.js';
+import { RoughSVG } from './svg.js';
+
+export default {
+  canvas(canvas: HTMLCanvasElement, config?: Config): RoughCanvas {
+    return new RoughCanvas(canvas, config);
+  },
+
+  svg(svg: SVGSVGElement, config?: Config): RoughSVG {
+    return new RoughSVG(svg, config);
+  },
+
+  generator(config?: Config): RoughGenerator {
+    return new RoughGenerator(config);
+  },
+
+  newSeed(): number {
+    return RoughGenerator.newSeed();
+  },
+};

blocksuite/affine/blocks/surface/src/utils/rough/svg.ts

@@ -0,0 +1,182 @@
+import type {
+  Config,
+  Drawable,
+  OpSet,
+  Options,
+  ResolvedOptions,
+} from './core.js';
+import { SVGNS } from './core.js';
+import { RoughGenerator } from './generator.js';
+import type { Point } from './geometry.js';
+
+export class RoughSVG {
+  private readonly gen: RoughGenerator;
+
+  private readonly svg: SVGSVGElement;
+
+  get generator(): RoughGenerator {
+    return this.gen;
+  }
+
+  constructor(svg: SVGSVGElement, config?: Config) {
+    this.svg = svg;
+    this.gen = new RoughGenerator(config);
+  }
+
+  private fillSketch(
+    doc: Document,
+    drawing: OpSet,
+    o: ResolvedOptions
+  ): SVGPathElement {
+    let fweight = o.fillWeight;
+    if (fweight < 0) {
+      fweight = o.strokeWidth / 2;
+    }
+    const path = doc.createElementNS(SVGNS, 'path');
+    path.setAttribute('d', this.opsToPath(drawing, o.fixedDecimalPlaceDigits));
+    path.setAttribute('stroke', o.fill || '');
+    path.setAttribute('stroke-width', fweight + '');
+    path.setAttribute('fill', 'none');
+    if (o.fillLineDash) {
+      path.setAttribute('stroke-dasharray', o.fillLineDash.join(' ').trim());
+    }
+    if (o.fillLineDashOffset) {
+      path.setAttribute('stroke-dashoffset', `${o.fillLineDashOffset}`);
+    }
+    return path;
+  }
+
+  arc(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    start: number,
+    stop: number,
+    closed = false,
+    options?: Options
+  ): SVGGElement {
+    const d = this.gen.arc(x, y, width, height, start, stop, closed, options);
+    return this.draw(d);
+  }
+
+  circle(
+    x: number,
+    y: number,
+    diameter: number,
+    options?: Options
+  ): SVGGElement {
+    const d = this.gen.circle(x, y, diameter, options);
+    return this.draw(d);
+  }
+
+  curve(points: Point[], options?: Options): SVGGElement {
+    const d = this.gen.curve(points, options);
+    return this.draw(d);
+  }
+
+  draw(drawable: Drawable): SVGGElement {
+    const sets = drawable.sets || [];
+    const o = drawable.options || this.getDefaultOptions();
+    const doc = this.svg.ownerDocument || window.document;
+    const g = doc.createElementNS(SVGNS, 'g');
+    const precision = drawable.options.fixedDecimalPlaceDigits;
+    for (const drawing of sets) {
+      let path = null;
+      switch (drawing.type) {
+        case 'path': {
+          path = doc.createElementNS(SVGNS, 'path');
+          path.setAttribute('d', this.opsToPath(drawing, precision));
+          path.setAttribute('stroke', o.stroke);
+          path.setAttribute('stroke-width', o.strokeWidth + '');
+          path.setAttribute('fill', 'none');
+          if (o.strokeLineDash) {
+            path.setAttribute(
+              'stroke-dasharray',
+              o.strokeLineDash.join(' ').trim()
+            );
+          }
+          if (o.strokeLineDashOffset) {
+            path.setAttribute('stroke-dashoffset', `${o.strokeLineDashOffset}`);
+          }
+          break;
+        }
+        case 'fillPath': {
+          path = doc.createElementNS(SVGNS, 'path');
+          path.setAttribute('d', this.opsToPath(drawing, precision));
+          path.setAttribute('stroke', 'none');
+          path.setAttribute('stroke-width', '0');
+          path.setAttribute('fill', o.fill || '');
+          if (drawable.shape === 'curve' || drawable.shape === 'polygon') {
+            path.setAttribute('fill-rule', 'evenodd');
+          }
+          break;
+        }
+        case 'fillSketch': {
+          path = this.fillSketch(doc, drawing, o);
+          break;
+        }
+      }
+      if (path) {
+        g.append(path);
+      }
+    }
+    return g;
+  }
+
+  ellipse(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    options?: Options
+  ): SVGGElement {
+    const d = this.gen.ellipse(x, y, width, height, options);
+    return this.draw(d);
+  }
+
+  getDefaultOptions(): ResolvedOptions {
+    return this.gen.defaultOptions;
+  }
+
+  line(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    options?: Options
+  ): SVGGElement {
+    const d = this.gen.line(x1, y1, x2, y2, options);
+    return this.draw(d);
+  }
+
+  linearPath(points: Point[], options?: Options): SVGGElement {
+    const d = this.gen.linearPath(points, options);
+    return this.draw(d);
+  }
+
+  opsToPath(drawing: OpSet, fixedDecimalPlaceDigits?: number): string {
+    return this.gen.opsToPath(drawing, fixedDecimalPlaceDigits);
+  }
+
+  path(d: string, options?: Options): SVGGElement {
+    const drawing = this.gen.path(d, options);
+    return this.draw(drawing);
+  }
+
+  polygon(points: Point[], options?: Options): SVGGElement {
+    const d = this.gen.polygon(points, options);
+    return this.draw(d);
+  }
+
+  rectangle(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    options?: Options
+  ): SVGGElement {
+    const d = this.gen.rectangle(x, y, width, height, options);
+    return this.draw(d);
+  }
+}

blocksuite/affine/blocks/surface/src/utils/sort.ts

@@ -0,0 +1,93 @@
+export function loadingSort<T extends { id: string; deps: string[] }>(
+  elements: T[]
+) {
+  const graph = new Map<string, string[]>();
+  const outDegree = new Map<string, number>();
+  const sortedOrder = [];
+  const map = new Map<string, T>();
+
+  elements.forEach(element => {
+    outDegree.set(element.id, 0);
+    map.set(element.id, element);
+  });
+
+  elements.forEach(element => {
+    element.deps.forEach(depId => {
+      if (outDegree.has(depId)) {
+        graph.has(depId)
+          ? graph.get(depId)!.push(element.id)
+          : graph.set(depId, [element.id]);
+        outDegree.set(element.id, outDegree.get(element.id)! + 1);
+      }
+    });
+  });
+
+  const queue: string[] = [];
+
+  for (const [id, degree] of outDegree) {
+    if (degree === 0) {
+      queue.push(id);
+    }
+  }
+
+  while (queue.length > 0) {
+    const node = queue.shift()!;
+    sortedOrder.push(node);
+
+    const deps = graph.get(node) || [];
+    deps.forEach(depId => {
+      if (outDegree.has(depId)) {
+        outDegree.set(depId, outDegree.get(depId)! - 1);
+
+        if (outDegree.get(depId) === 0) {
+          queue.push(depId);
+        }
+      }
+    });
+  }
+
+  return sortedOrder.map(id => map.get(id)!);
+}
+
+export function sortIndex(
+  a: { id: string; index: string },
+  b: { id: string; index: string },
+  groupIndexMap: Map<string, { id: string; index: string }>
+) {
+  const aGroupIndex = groupIndexMap.get(a.id);
+  const bGroupIndex = groupIndexMap.get(b.id);
+
+  if (aGroupIndex && bGroupIndex) {
+    return aGroupIndex.id === bGroupIndex.id
+      ? a.index === b.index
+        ? 0
+        : a.index > b.index
+          ? 1
+          : -1
+      : aGroupIndex.index > bGroupIndex.index
+        ? 1
+        : -1;
+  }
+
+  if (aGroupIndex) {
+    return aGroupIndex.id === b.id
+      ? 1
+      : aGroupIndex.index === b.index
+        ? 0
+        : aGroupIndex.index > b.index
+          ? 1
+          : -1;
+  }
+
+  if (bGroupIndex) {
+    return a.id === bGroupIndex.id
+      ? -1
+      : a.index === bGroupIndex.index
+        ? 0
+        : a.index > bGroupIndex.index
+          ? 1
+          : -1;
+  }
+
+  return a.index === b.index ? 0 : a.index > b.index ? 1 : -1;
+}

blocksuite/affine/blocks/surface/src/utils/update-xywh.ts

@@ -0,0 +1,82 @@
+import {
+  ConnectorElementModel,
+  MindmapElementModel,
+  NOTE_MIN_HEIGHT,
+  NOTE_MIN_WIDTH,
+  NoteBlockModel,
+} from '@blocksuite/affine-model';
+import { Bound, clamp } from '@blocksuite/global/gfx';
+import {
+  type GfxGroupCompatibleInterface,
+  type GfxModel,
+  isGfxGroupCompatibleModel,
+} from '@blocksuite/std/gfx';
+import type { BlockModel, BlockProps } from '@blocksuite/store';
+
+function updatChildElementsXYWH(
+  container: GfxGroupCompatibleInterface,
+  targetBound: Bound,
+  updateElement: (id: string, props: Record<string, unknown>) => void,
+  updateBlock: (
+    model: BlockModel,
+    callBackOrProps: (() => void) | Partial<BlockProps>
+  ) => void
+) {
+  const containerBound = Bound.deserialize(container.xywh);
+  const scaleX = targetBound.w / containerBound.w;
+  const scaleY = targetBound.h / containerBound.h;
+  container.childElements.forEach(child => {
+    const childBound = Bound.deserialize(child.xywh);
+    childBound.x = targetBound.x + scaleX * (childBound.x - containerBound.x);
+    childBound.y = targetBound.y + scaleY * (childBound.y - containerBound.y);
+    childBound.w = scaleX * childBound.w;
+    childBound.h = scaleY * childBound.h;
+    updateXYWH(child, childBound, updateElement, updateBlock);
+  });
+}
+
+export function updateXYWH(
+  ele: GfxModel,
+  bound: Bound,
+  updateElement: (id: string, props: Record<string, unknown>) => void,
+  updateBlock: (
+    model: BlockModel,
+    callBackOrProps: (() => void) | Partial<BlockProps>
+  ) => void
+) {
+  if (ele instanceof ConnectorElementModel) {
+    ele.moveTo(bound);
+  } else if (ele instanceof NoteBlockModel) {
+    const scale = ele.props.edgeless.scale ?? 1;
+    bound.w = clamp(bound.w, NOTE_MIN_WIDTH * scale, Infinity);
+    bound.h = clamp(bound.h, NOTE_MIN_HEIGHT * scale, Infinity);
+    if (bound.h >= NOTE_MIN_HEIGHT * scale) {
+      updateBlock.call(ele.store, ele, () => {
+        ele.props.edgeless.collapse = true;
+        ele.props.edgeless.collapsedHeight = bound.h / scale;
+      });
+    }
+    updateElement(ele.id, {
+      xywh: bound.serialize(),
+    });
+  } else if (ele instanceof MindmapElementModel) {
+    const rootId = ele.tree.id;
+    const rootEle = ele.childElements.find(child => child.id === rootId);
+    if (rootEle) {
+      const rootBound = Bound.deserialize(rootEle.xywh);
+      rootBound.x += bound.x - ele.x;
+      rootBound.y += bound.y - ele.y;
+      updateXYWH(rootEle, rootBound, updateElement, updateBlock);
+    }
+    ele.layout();
+  } else if (isGfxGroupCompatibleModel(ele)) {
+    updatChildElementsXYWH(ele, bound, updateElement, updateBlock);
+    updateElement(ele.id, {
+      xywh: bound.serialize(),
+    });
+  } else {
+    updateElement(ele.id, {
+      xywh: bound.serialize(),
+    });
+  }
+}

blocksuite/affine/blocks/surface/src/view.ts

@@ -0,0 +1,45 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { BlockViewExtension, FlavourExtension } from '@blocksuite/std';
+import { literal } from 'lit/static-html.js';
+
+import { effects } from './effects';
+import {
+  EdgelessCRUDExtension,
+  EdgelessLegacySlotExtension,
+  EditPropsMiddlewareBuilder,
+} from './extensions';
+import { ExportManagerExtension } from './extensions/export-manager/export-manager';
+import { DefaultTool } from './tool/default-tool';
+
+export class SurfaceViewExtension extends ViewExtensionProvider {
+  override name = 'affine-surface-block';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register([
+      FlavourExtension('affine:surface'),
+      EdgelessCRUDExtension,
+      EdgelessLegacySlotExtension,
+      ExportManagerExtension,
+    ]);
+    if (this.isEdgeless(context.scope)) {
+      context.register(DefaultTool);
+      context.register(
+        BlockViewExtension('affine:surface', literal`affine-surface`)
+      );
+      context.register(EditPropsMiddlewareBuilder);
+    } else {
+      context.register(
+        BlockViewExtension('affine:surface', literal`affine-surface-void`)
+      );
+    }
+  }
+}