LearnNewsExamplesServices
Frontmatter
id8791
titleCreate Portal.canvas.Base to standardize Canvas Workers
stateClosed
labels
airefactoringarchitecture
assigneestobiu
createdAtJan 19, 2026, 1:17 AM
updatedAtJan 19, 2026, 1:44 AM
githubUrlhttps://github.com/neomjs/neo/issues/8791
authortobiu
commentsCount1
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 19, 2026, 1:44 AM

Create Portal.canvas.Base to standardize Canvas Workers

Closed v11.23.0 airefactoringarchitecture
tobiu
tobiu commented on Jan 19, 2026, 1:17 AM

Create a Portal.canvas.Base class to abstract common logic for the four Portal canvases (HeaderCanvas, HomeCanvas, ServicesCanvas, TicketCanvas).

Goals:

  • Standardize initGraph: Implement the polling logic and the !me.animationId guard in the base class.
  • Standardize updateSize: Centralize the canvas resizing logic.
  • Fix Theme Reactivity: Use a reactive theme_ config in the base class to ensure afterSetTheme (and resource updates) are triggered correctly for all canvases.
  • Reduce Boilerplate: Remove repetitive code from the subclasses.

Target Files:

  • apps/portal/canvas/Base.mjs (New)
  • apps/portal/canvas/HeaderCanvas.mjs
  • apps/portal/canvas/HomeCanvas.mjs
  • apps/portal/canvas/ServicesCanvas.mjs
  • apps/portal/canvas/TicketCanvas.mjs
tobiu added the ai label on Jan 19, 2026, 1:17 AM
tobiu added the refactoring label on Jan 19, 2026, 1:17 AM
tobiu added the architecture label on Jan 19, 2026, 1:17 AM
tobiu referenced in commit a9883a7 - "refactor: standardize Portal canvases with new Base class (#8791)" on Jan 19, 2026, 1:43 AM
tobiu assigned to @tobiu on Jan 19, 2026, 1:43 AM
tobiu
tobiu Jan 19, 2026, 1:43 AM

Input from Gemini 3 Pro:

✦ I have successfully created Portal.canvas.Base and refactored all four Portal canvases to extend it.

Architectural Changes:

  • Centralized Logic: initGraph, clearGraph, updateSize, setTheme, and renderLoop are now defined in Portal.canvas.Base.
  • Standardized Initialization: The base initGraph implements the robust polling mechanism and the critical !me.animationId guard to prevent duplicate render loops.
  • Hook System: Introduced onGraphMounted(width, height) hook in the base class, which HeaderCanvas, HomeCanvas, and ServicesCanvas use to initialize their specific resources (particles, nodes) after the context is ready.
  • Reactive Theme: The theme_ config in Base is reactive, ensuring afterSetTheme is triggered correctly. It calls updateResources if the subclass implements it.
  • Singleton Inheritance Fix: Ensured singleton: true is defined in the subclasses (HeaderCanvas, HomeCanvas, ServicesCanvas, TicketCanvas) rather than the base class to allow proper extension.
  • Cleanup: Removed redundant method definitions and class fields from all four subclasses. ServicesCanvas and HomeCanvas correctly override updateSize to handle their specific scaling logic (including me.scale calculation and buffer resets), while HeaderCanvas and TicketCanvas rely on the base implementation.

Files Created/Modified:

  • apps/portal/canvas/Base.mjs (New)
  • apps/portal/canvas/HeaderCanvas.mjs
  • apps/portal/canvas/HomeCanvas.mjs
  • apps/portal/canvas/ServicesCanvas.mjs
  • apps/portal/canvas/TicketCanvas.mjs
tobiu closed this issue on Jan 19, 2026, 1:44 AM