Per Node Fullscreen

  1. Overview
  2. Internal Technical Guides
  3. Design (Dual Editor)
  4. Per Node Fullscreen

1. Front Matter

2. Introduction & Goals

Problem Summary

Creators working in the visual canvas need a focused way to inspect and edit a single node without the surrounding canvas layout competing for attention. A per-node fullscreen mode improves readability and reduces UI clutter during content authoring.

Goals

  • Allow a creator to expand a selected node into a focused fullscreen experience.

  • Reuse existing node rendering components so the fullscreen view looks consistent with the canvas editor.

  • Support a secondary “maximize” mode inside the modal for a more immersive viewing experience.

  • Close the fullscreen view safely with keyboard and click interactions.

Non-Goals

  • Full-screening the entire canvas or editor shell.

  • Introducing a new backend service or persistence layer.

  • Modifying node data shape or canvas schema.

Glossary

  • Fullscreen Modal: The overlay UI that temporarily replaces the canvas context with a single node view.

  • Node Renderer: The existing node component used to display the content in both canvas and fullscreen modes.

  • Canvas State: The React Flow-based state that holds nodes, edges, and editor interactions.

3. High-Level Architecture

System Diagram

+----------------------------+
| Canvas Node UI             |
+----------------------------+
              |
              v
+----------------------------+
| openFullscreen             |
+----------------------------+
              |
              v
+----------------------------+
| useNodeFullscreen Hook     |
+----------------------------+
              |
              v
+----------------------------+
| NodeFullscreenModal        |
+----------------------------+
              |
              v
+----------------------------+
| NodeFullscreenContent      |
+----------------------------+
              |
              v
+----------------------------+
| Node Renderer              |
| (Selected Node Type)       |
+----------------------------+
              |
              v
+----------------------------+
| Fullscreen UI              |
+----------------------------+

Technologies Used

  • Next.js / React / TypeScript

  • React Flow / XYFlow

  • Tailwind CSS and shadcn/ui components

  • Lucide icons

4. Detailed Design & Implementation

Data Model / Schema

No new database tables or schema changes are required.

The feature operates entirely on client-side state:

  • nodeId

  • nodeType

  • nodeNumber

  • isFullscreen

These values are stored and managed by the fullscreen hook in hooks/visual-canvas/useNodeFullscreen.ts.

UI Flow

  1. A node in the visual canvas renders a fullscreen action button.

  2. Clicking the button calls openFullscreen(nodeId, nodeType, nodeNumber).

  3. The exploration page mounts the fullscreen modal and passes the selected node context.

  4. The modal renders the node content using the dedicated fullscreen content component.

  5. The modal can switch between standard and expanded fullscreen view using onToggleFullscreen.

  6. The user can close the view with the close button or the Escape key.

Component Responsibilities

Runtime Behavior

  • The modal uses a fixed overlay with blurred backdrop and a centered panel.

  • Body scrolling is disabled while the modal is open.

  • Clicking the backdrop closes the modal when the overlay is not in the inner expanded state.

  • Escape key closes the modal.

Node Rendering Strategy

The fullscreen content component uses a hardcoded mapping of node types to renderer components such as:

  • Text

  • Image

  • Video

  • Code

  • File

  • Link

  • Audio

  • Reflection

  • Question

  • Quiz

  • Discussion

  • Scenario

This keeps fullscreen rendering aligned with the existing canvas node implementations.

5. Infrastructure & Operations

Dependencies

  • React Flow node state from the canvas page

  • Existing node UI components for each node type

  • Shared UI primitives such as dialog/modal buttons and scroll area

Monitoring & Alerting

No dedicated telemetry or alerting is implemented for this feature. Errors are primarily surfaced through UI fallback states such as:

  • node not found

  • unsupported node type

Deployment Plan

  • No database migration is required.

  • Deploy the fullscreen hook, modal component, content component, and canvas page integration together.

  • Validate that each supported node type opens correctly in fullscreen and closes cleanly.

6. Testing & Quality Assurance

Test Strategy

  • Manual validation for supported node types in the visual canvas editor.

  • Verification that the fullscreen modal opens from the node header action.

  • Verification of keyboard and backdrop close behavior.

  • Validation of the expanded fullscreen toggle.

Known Limitations

  • The fullscreen renderer is based on a manual mapping of node types, so adding a new node type requires updating the mapping.

  • The feature is currently scoped to the canvas editor experience and is not exposed in other contexts.

  • The modal uses client-side state only; there is no persistence or cross-session memory.

7. Maintenance & Support

Troubleshooting

  • Node does not open in fullscreen: Check whether the node type is included in the renderer map.

  • Fullscreen modal does not close: Verify the close handler is still wired through the parent canvas page.

  • Node content appears broken: Confirm the node component matches the current node data shape.

  • Modal is not centered or scrolls incorrectly: Review the modal container classes and overflow handling in the shared modal component.

Changelog

  • 1.0 - Draft: Initial implementation added for per-node fullscreen editing in the visual canvas, July 2026.

Written by Uriel Last updated July 1, 2026
Was this article helpful?