feat(edgeless): mind map collapse (#8905)

### Changed - Add mind map collapsed feature - Add `propsUpdated` slot on canvas element model - Remove `cursorUpdated` slot, use `gfx.cursor$` instead - Move canvas renderer depended slots listener into itself - Add `responseExtension` to `GfxCompatibleInterface`, which used to expand the hit-testing area
toeverything · Dec 18, 2024 · a35ff22 · a35ff22
1 parent 661c628
commit a35ff22
Show file tree

Hide file tree

Showing 47 changed files with 1,176 additions and 308 deletions.
diff --git a/packages/affine/block-surface/src/commands/auto-align.ts b/packages/affine/block-surface/src/commands/auto-align.ts
@@ -4,13 +4,12 @@ import {
   ConnectorElementModel,
   EdgelessTextBlockModel,
   EmbedSyncedDocModel,
+  MindmapElementModel,
   NoteBlockModel,
 } from '@blocksuite/affine-model';
 import { Bound } from '@blocksuite/global/utils';
 import chunk from 'lodash.chunk';
 
-import { LayoutableMindmapElementModel } from '../utils/mindmap/utils.js';
-
 const ALIGN_HEIGHT = 200;
 const ALIGN_PADDING = 20;
 
@@ -121,7 +120,7 @@ function autoResizeElements(
   elements.forEach(ele => {
     if (
       ele instanceof ConnectorElementModel ||
-      ele instanceof LayoutableMindmapElementModel
+      ele instanceof MindmapElementModel
     ) {
       return;
     }

diff --git a/packages/affine/block-surface/src/element-model/index.ts b/packages/affine/block-surface/src/element-model/index.ts
@@ -2,11 +2,11 @@ import {
   BrushElementModel,
   ConnectorElementModel,
   GroupElementModel,
+  MindmapElementModel,
   ShapeElementModel,
   TextElementModel,
 } from '@blocksuite/affine-model';
 
-import { LayoutableMindmapElementModel } from '../utils/mindmap/utils.js';
 import { SurfaceElementModel } from './base.js';
 
 export const elementsCtorMap = {
@@ -15,14 +15,14 @@ export const elementsCtorMap = {
   shape: ShapeElementModel,
   brush: BrushElementModel,
   text: TextElementModel,
-  mindmap: LayoutableMindmapElementModel,
+  mindmap: MindmapElementModel,
 };
 
 export {
   BrushElementModel,
   ConnectorElementModel,
   GroupElementModel,
-  LayoutableMindmapElementModel,
+  MindmapElementModel,
   ShapeElementModel,
   SurfaceElementModel,
   TextElementModel,
@@ -43,7 +43,7 @@ export type ElementModelMap = {
   ['connector']: ConnectorElementModel;
   ['text']: TextElementModel;
   ['group']: GroupElementModel;
-  ['mindmap']: LayoutableMindmapElementModel;
+  ['mindmap']: MindmapElementModel;
 };
 
 export function isCanvasElementType(type: string): type is CanvasElementType {

diff --git a/packages/affine/block-surface/src/index.ts b/packages/affine/block-surface/src/index.ts
@@ -59,7 +59,6 @@ export {
   NODE_HORIZONTAL_SPACING,
   NODE_VERTICAL_SPACING,
 } from './utils/mindmap/layout.js';
-export { LayoutableMindmapElementModel } from './utils/mindmap/utils.js';
 export { RoughCanvas } from './utils/rough/canvas.js';
 
 import {

diff --git a/packages/affine/block-surface/src/renderer/canvas-renderer.ts b/packages/affine/block-surface/src/renderer/canvas-renderer.ts
@@ -1,6 +1,7 @@
 import type {
   GridManager,
   LayerManager,
+  SurfaceBlockModel,
   Viewport,
 } from '@blocksuite/block-std/gfx';
 import type { IBound } from '@blocksuite/global/utils';
@@ -37,6 +38,7 @@ type RendererOptions = {
   onStackingCanvasCreated?: (canvas: HTMLCanvasElement) => void;
   elementRenderers: Record<string, ElementRenderer>;
   gridManager: GridManager;
+  surfaceModel: SurfaceBlockModel;
 };
 
 export class CanvasRenderer {
@@ -90,6 +92,8 @@ export class CanvasRenderer {
     if (options.enableStackingCanvas) {
       this._initStackingCanvas(options.onStackingCanvasCreated);
     }
+
+    this._watchSurface(options.surfaceModel);
   }
 
   /**
@@ -274,10 +278,9 @@ export class CanvasRenderer {
       (this.grid.search(bound, {
         filter: ['canvas', 'local'],
       }) as SurfaceElementModel[]);
-    for (const element of elements) {
-      ctx.save();
 
-      const display = element.display ?? true;
+    for (const element of elements) {
+      const display = (element.display ?? true) && !element.hidden;
       if (display && intersects(getBoundWithRotation(element), bound)) {
         const renderFn =
           this.elementRenderers[
@@ -286,18 +289,18 @@ export class CanvasRenderer {
 
         if (!renderFn) {
           console.warn(`Cannot find renderer for ${element.type}`);
-          ctx.restore();
           continue;
         }
 
+        ctx.save();
+
         ctx.globalAlpha = element.opacity ?? 1;
         const dx = element.x - bound.x;
         const dy = element.y - bound.y;
 
         renderFn(element, ctx, matrix.translate(dx, dy), this, rc, bound);
+        ctx.restore();
       }
-
-      ctx.restore();
     }
 
     if (overLay) {
@@ -321,6 +324,28 @@ export class CanvasRenderer {
     this.refresh();
   }
 
+  private _watchSurface(surfaceModel: SurfaceBlockModel) {
+    const slots = [
+      'elementAdded',
+      'elementRemoved',
+      'localElementAdded',
+      'localElementDeleted',
+      'localElementUpdated',
+    ] as const;
+
+    slots.forEach(slotName => {
+      this._disposables.add(surfaceModel[slotName].on(() => this.refresh()));
+    });
+
+    this._disposables.add(
+      surfaceModel.elementUpdated.on(payload => {
+        // ignore externalXYWH update cause it's updated by the renderer
+        if (payload.props['externalXYWH']) return;
+        this.refresh();
+      })
+    );
+  }
+
   addOverlay(overlay: Overlay) {
     overlay.setRenderer(this);
     this._overlays.add(overlay);

diff --git a/packages/affine/block-surface/src/renderer/elements/mindmap.ts b/packages/affine/block-surface/src/renderer/elements/mindmap.ts
@@ -1,4 +1,7 @@
-import type { MindmapElementModel } from '@blocksuite/affine-model';
+import type {
+  MindmapElementModel,
+  MindmapNode,
+} from '@blocksuite/affine-model';
 import type { GfxModel } from '@blocksuite/block-std/gfx';
 import type { IBound } from '@blocksuite/global/utils';
 
@@ -21,15 +24,18 @@ export function mindmap(
 
   matrix = matrix.translate(-dx, -dy);
 
-  model.traverse((to, from) => {
-    if (from) {
-      const connector = model.getConnector(from, to);
-      if (!connector) return;
-
+  const traverse = (node: MindmapNode) => {
+    const connectors = model.getConnectors(node);
+    if (!connectors) return;
+    connectors.reverse().forEach(result => {
+      const { connector, outdated } = result;
       const elementGetter = (id: string) =>
         model.surface.getElementById(id) ??
         (model.surface.doc.getBlockById(id) as GfxModel);
-      ConnectorPathGenerator.updatePath(connector, null, elementGetter);
+
+      if (outdated) {
+        ConnectorPathGenerator.updatePath(connector, null, elementGetter);
+      }
 
       const dx = connector.x - bound.x;
       const dy = connector.y - bound.y;
@@ -45,13 +51,14 @@ export function mindmap(
       if (shouldSetGlobalAlpha) {
         ctx.globalAlpha = origin;
       }
-    }
-  });
+    });
 
-  model.extraConnectors.forEach(connector => {
-    const dx = connector.x - bound.x;
-    const dy = connector.y - bound.y;
+    if (node.detail.collapsed) {
+      return;
+    } else {
+      node.children.forEach(traverse);
+    }
+  };
 
-    renderConnector(connector, ctx, matrix.translate(dx, dy), renderer, rc);
-  });
+  model.tree && traverse(model.tree);
 }
diff --git a/packages/affine/block-surface/src/renderer/elements/shape/diamond.ts b/packages/affine/block-surface/src/renderer/elements/shape/diamond.ts
@@ -1,12 +1,15 @@
-import type { ShapeElementModel } from '@blocksuite/affine-model';
+import type {
+  LocalShapeElementModel,
+  ShapeElementModel,
+} from '@blocksuite/affine-model';
 
 import type { RoughCanvas } from '../../../utils/rough/canvas.js';
 import type { CanvasRenderer } from '../../canvas-renderer.js';
 
 import { type Colors, drawGeneralShape } from './utils.js';
 
 export function diamond(
-  model: ShapeElementModel,
+  model: ShapeElementModel | LocalShapeElementModel,
   ctx: CanvasRenderingContext2D,
   matrix: DOMMatrix,
   renderer: CanvasRenderer,

diff --git a/packages/affine/block-surface/src/renderer/elements/shape/ellipse.ts b/packages/affine/block-surface/src/renderer/elements/shape/ellipse.ts
@@ -1,12 +1,15 @@
-import type { ShapeElementModel } from '@blocksuite/affine-model';
+import type {
+  LocalShapeElementModel,
+  ShapeElementModel,
+} from '@blocksuite/affine-model';
 
 import type { RoughCanvas } from '../../../utils/rough/canvas.js';
 import type { CanvasRenderer } from '../../canvas-renderer.js';
 
 import { type Colors, drawGeneralShape } from './utils.js';
 
 export function ellipse(
-  model: ShapeElementModel,
+  model: ShapeElementModel | LocalShapeElementModel,
   ctx: CanvasRenderingContext2D,
   matrix: DOMMatrix,
   renderer: CanvasRenderer,

diff --git a/packages/affine/block-surface/src/renderer/elements/shape/index.ts b/packages/affine/block-surface/src/renderer/elements/shape/index.ts
@@ -1,4 +1,8 @@
-import type { ShapeElementModel, ShapeType } from '@blocksuite/affine-model';
+import type {
+  LocalShapeElementModel,
+  ShapeElementModel,
+  ShapeType,
+} from '@blocksuite/affine-model';
 import type { IBound } from '@blocksuite/global/utils';
 
 import {
@@ -30,7 +34,7 @@ import { type Colors, horizontalOffset, verticalOffset } from './utils.js';
 const shapeRenderers: Record<
   ShapeType,
   (
-    model: ShapeElementModel,
+    model: ShapeElementModel | LocalShapeElementModel,
     ctx: CanvasRenderingContext2D,
     matrix: DOMMatrix,
     renderer: CanvasRenderer,
@@ -45,7 +49,7 @@ const shapeRenderers: Record<
 };
 
 export function shape(
-  model: ShapeElementModel,
+  model: ShapeElementModel | LocalShapeElementModel,
   ctx: CanvasRenderingContext2D,
   matrix: DOMMatrix,
   renderer: CanvasRenderer,
@@ -76,7 +80,7 @@ export function shape(
 }
 
 function renderText(
-  model: ShapeElementModel,
+  model: ShapeElementModel | LocalShapeElementModel,
   ctx: CanvasRenderingContext2D,
   { color }: Colors
 ) {
@@ -103,9 +107,10 @@ function renderText(
     fontWeight
   );
   const metrics = getFontMetrics(fontFamily, fontSize, fontWeight);
-  const lines = deltaInsertsToChunks(
-    wrapTextDeltas(text, font, w - horPadding * 2)
-  );
+  const lines =
+    typeof text === 'string'
+      ? [text.split('\n').map(line => ({ insert: line }))]
+      : deltaInsertsToChunks(wrapTextDeltas(text, font, w - horPadding * 2));
   const horOffset = horizontalOffset(model.w, model.textAlign, horPadding);
   const vertOffset =
     verticalOffset(

diff --git a/packages/affine/block-surface/src/renderer/elements/shape/rect.ts b/packages/affine/block-surface/src/renderer/elements/shape/rect.ts
@@ -1,4 +1,7 @@
-import type { ShapeElementModel } from '@blocksuite/affine-model';
+import type {
+  LocalShapeElementModel,
+  ShapeElementModel,
+} from '@blocksuite/affine-model';
 
 import type { RoughCanvas } from '../../../utils/rough/canvas.js';
 import type { CanvasRenderer } from '../../canvas-renderer.js';
@@ -11,7 +14,7 @@ import { type Colors, drawGeneralShape } from './utils.js';
 const K_RECT = 1 - 0.5522847498;
 
 export function rect(
-  model: ShapeElementModel,
+  model: ShapeElementModel | LocalShapeElementModel,
   ctx: CanvasRenderingContext2D,
   matrix: DOMMatrix,
   renderer: CanvasRenderer,

diff --git a/packages/affine/block-surface/src/renderer/elements/shape/triangle.ts b/packages/affine/block-surface/src/renderer/elements/shape/triangle.ts
@@ -1,12 +1,15 @@
-import type { ShapeElementModel } from '@blocksuite/affine-model';
+import type {
+  LocalShapeElementModel,
+  ShapeElementModel,
+} from '@blocksuite/affine-model';
 
 import type { RoughCanvas } from '../../../utils/rough/canvas.js';
 import type { CanvasRenderer } from '../../canvas-renderer.js';
 
 import { type Colors, drawGeneralShape } from './utils.js';
 
 export function triangle(
-  model: ShapeElementModel,
+  model: ShapeElementModel | LocalShapeElementModel,
   ctx: CanvasRenderingContext2D,
   matrix: DOMMatrix,
   renderer: CanvasRenderer,

diff --git a/packages/affine/block-surface/src/renderer/elements/shape/utils.ts b/packages/affine/block-surface/src/renderer/elements/shape/utils.ts
@@ -1,4 +1,5 @@
 import type {
+  LocalShapeElementModel,
   ShapeElementModel,
   TextAlign,
   TextVerticalAlign,
@@ -28,7 +29,7 @@ export type Colors = {
 
 export function drawGeneralShape(
   ctx: CanvasRenderingContext2D,
-  shapeModel: ShapeElementModel,
+  shapeModel: ShapeElementModel | LocalShapeElementModel,
   renderer: CanvasRenderer,
   filled: boolean,
   fillColor: string,

diff --git a/packages/affine/block-surface/src/surface-block.ts b/packages/affine/block-surface/src/surface-block.ts
@@ -187,25 +187,9 @@ export class SurfaceBlockComponent extends BlockComponent<
         canvas.className = 'indexable-canvas';
       },
       elementRenderers: this._edgelessService.elementRenderers,
+      surfaceModel: this.model,
     });
 
-    this._disposables.add(
-      this.model.elementUpdated.on(payload => {
-        // ignore externalXYWH update cause it's updated by the renderer
-        if (payload.props['externalXYWH']) return;
-        this._renderer.refresh();
-      })
-    );
-    this._disposables.add(
-      this.model.elementAdded.on(() => {
-        this._renderer.refresh();
-      })
-    );
-    this._disposables.add(
-      this.model.elementRemoved.on(() => {
-        this._renderer.refresh();
-      })
-    );
     this._disposables.add(() => {
       this._renderer.dispose();
     });

diff --git a/packages/affine/block-surface/src/surface-spec.ts b/packages/affine/block-surface/src/surface-spec.ts
@@ -13,12 +13,14 @@ import {
 } from './adapters/extension.js';
 import { commands } from './commands/index.js';
 import { SurfaceBlockService } from './surface-service.js';
+import { MindMapView } from './view/mindmap.js';
 
 const CommonSurfaceBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:surface'),
   SurfaceBlockService,
   CommandExtension(commands),
   HighlightSelectionExtension,
+  MindMapView,
 ];
 
 export const PageSurfaceBlockSpec: ExtensionType[] = [