Skip to content

Add zoom (+/−), fit, and fullscreen controls to visual notes graph#33

Draft
Copilot wants to merge 3 commits into
mainfrom
copilot/add-full-screen-zoom-buttons
Draft

Add zoom (+/−), fit, and fullscreen controls to visual notes graph#33
Copilot wants to merge 3 commits into
mainfrom
copilot/add-full-screen-zoom-buttons

Conversation

Copilot AI commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

The graph view was fixed-height with no way to enlarge it, making dense graphs hard to read. This adds a compact toolbar with zoom and fullscreen controls directly in the graph header.

Controls added

  • / + — zoom out/in, scaling cy.zoom() by ÷1.25 / ×1.25 centred on the viewport midpoint
  • — fit to view, calls the existing refitGraph() to reset zoom and pan
  • / — fullscreen toggle; applies position: fixed; inset: 0 over the entire viewport, with the graph expanding to fill remaining height via flexbox; Escape exits (with preventDefault to stop propagation)

Implementation notes

  • isFullscreen state persists across re-renders so the overlay survives sidecar-change reloads
  • Fullscreen class and state are cleared in onunload to prevent a stuck overlay on component destruction
  • Escape listener registered via Obsidian's registerDomEvent — auto-cleaned on unload, no manual teardown needed
  • All buttons carry aria-label + title attributes

CSS

.visual-notes-fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--layer-notice, 200);
  display: flex;
  flex-direction: column;
}
.visual-notes-fullscreen .visual-notes-graph {
  flex: 1;
  height: auto;
  min-height: 0;
}

Tests

Six new source-contract assertions in renderer.test.ts cover: toolbar presence, zoom scaling factors, fullscreen class toggle, Escape handler, onunload cleanup, and button accessibility labels.

Copilot AI changed the title [WIP] Add full screen and zoom buttons for visual block render Add zoom (+/−), fit, and fullscreen controls to visual notes graph Jun 15, 2026
Copilot AI requested a review from bobthearsonist June 15, 2026 23:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants