From 48c7420c7a8b8575405cb66e36ef85290ae28cc4 Mon Sep 17 00:00:00 2001
From: Amit Haridas <amit.wh@gmail.com>
Date: Wed, 30 Sep 2026 22:08:10 +0530
Subject: [PATCH] fix(flowchart): UMD browser fallback for viewport + add to
 controller test mount
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 6 pre-existing flowchart-controller test failures
('ReferenceError: require is not defined') were caused by
flowchart-canvas.js falling through to require('./flowchart-viewport')
when window.FlowchartViewport was undefined — because flowchart-viewport
was added in C4a but the controller test's script loader was never
updated to include it, and viewport itself had no browser-global
fallback.

Two coordinated fixes:

  - Add the same UMD wrapper to flowchart-viewport.js that the other
    pure modules already use (CommonJS module.exports + window
    global fallback for the standalone window and jsdom). Now the
    canvas's 'window.FlowchartViewport || require(...)' short-circuits
    in the browser case, matching what shapes / store / mermaid do.

  - Load flowchart-viewport.js in the controller test mount helper,
    in dependency order between mermaid and store. The canvas now
    sees window.FlowchartViewport set and never falls through to
    require() under jsdom.

Test suite: 104 suites / 1353 tests passing (was 1347 with 6 failing).
The 6 'require is not defined' failures are gone.

Amit Haridas
---
 src/flowchart/flowchart-viewport.js | 12 +++++++++++-
 tests/flowchart-controller.test.js  |  1 +
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/flowchart/flowchart-viewport.js b/src/flowchart/flowchart-viewport.js
index dc84f90..4bc42f3 100644
--- a/src/flowchart/flowchart-viewport.js
+++ b/src/flowchart/flowchart-viewport.js
@@ -58,4 +58,14 @@ function snap(value, gridSize) {
   return Math.round(value / gridSize) * gridSize;
 }
 
-module.exports = { zoomAt, panBy, reset, wheelFactor, snap, MIN_SCALE, MAX_SCALE };
+// v4.13.0 — UMD wrapper. The browser global fallback lets the standalone
+// flowchart window load this via <script> tag (contextIsolation:true means
+// the renderer cannot require()), and lets the controller's jsdom tests
+// load it via new Function(...) without a Node `require`.
+const _exported = { zoomAt, panBy, reset, wheelFactor, snap, MIN_SCALE, MAX_SCALE };
+if (typeof module === 'object' && module.exports) {
+  module.exports = _exported;
+}
+if (typeof window !== 'undefined') {
+  window.FlowchartViewport = _exported;
+}
diff --git a/tests/flowchart-controller.test.js b/tests/flowchart-controller.test.js
index 8c08d35..fa9f0cc 100644
--- a/tests/flowchart-controller.test.js
+++ b/tests/flowchart-controller.test.js
@@ -44,6 +44,7 @@ async function mount(apiMockOverrides = {}) {
   const scriptPaths = [
     'flowchart/flowchart-shapes.js',
     'flowchart/flowchart-mermaid.js',
+    'flowchart/flowchart-viewport.js',
     'flowchart/flowchart-store.js',
     'flowchart/flowchart-canvas.js',
   ];