Learnify - Mind Map Node Collapse/Expand Button

Overview

A circular button appears on hover over mind map nodes that have children, allowing users to collapse/expand node branches.

Key Files

Main Logic

  • Location: /blocksuite/affine/gfx/mindmap/src/view/view.ts
  • Class: MindMapView

Key Methods

  1. _initCollapseButtons() - Initializes collapse buttons for all nodes
  2. _updateCollapseButton() - Creates/updates individual collapse buttons
  3. _updateButtonVisibility() (lines 431-461) - Controls button visibility

Style Configuration

  • Location: /blocksuite/affine/model/src/elements/mindmap/style.ts
  • Defines different button styles (StyleOne through StyleFour)

Button Creation

  • Created as LocalShapeElementModel
  • Button ID format: collapse-btn-${nodeId}
  • Position: Left or right of node based on layout direction

Visibility Logic

Button shows when:

  1. Node has children AND
  2. Node is not hidden AND
  3. One of these conditions:
    • Node is collapsed (always shows with child count)
    • Node is selected
    • Node or button is being hovered

Hover State Management

1
_hoveredState: Map<string, { button: boolean, node: boolean }>

Button Appearance

Collapsed State

  • Shows as filled circle with number of children
  • Typical size: 24x24px
  • Colored fill with white text

Expanded State

  • Shows as circular button (often just border)
  • Typical size: 16x16px
  • White fill with colored border

Interaction

  • Cursor changes to pointer on hover
  • Click triggers model.toggleCollapse()
  • Includes telemetry tracking

Example Style (StyleOne)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
collapseButton: {
  width: 16,
  height: 16,
  radius: 16,
  fillColor: '--affine-white',
  strokeColor: '--affine-text-primary-color',
  strokeWidth: 3
}

expandButton: {
  width: 24,
  height: 24,
  radius: 12,
  fillColor: '--affine-primary-color',
  strokeWidth: 0,
  textColor: '--affine-white'
}