@zenuml/core 3.47.9 → 3.48.0

package/e2e/data/diff-algorithm.js

@@ -1,199 +0,0 @@
-/*
- * Shared pixel-diff algorithm used by:
- * - compare-case.html (via window.diffFromImages)
- * - native-diff-ext/content.js (extension)
- * - analyze-compare-case.mjs (CLI, via window.diffFromImages on the page)
- *
- * Single source of truth for parameters and pixel classification.
- */
-
-// Default parameters — callers may override via `opts`
-export const DEFAULTS = {
-  LUMA_THRESHOLD: 240,
-  CHANNEL_TOLERANCE: 12,
-  POSITION_TOLERANCE: 0,
-};
-
-// Diff output colors (RGBA)
-export const COLORS = {
-  background: [240, 240, 240, 255],
-  match:      [0, 100, 0, 255],
-  htmlOnly:   [255, 0, 0, 255],
-  svgOnly:    [0, 0, 255, 255],
-  colorDiff:  [255, 0, 255, 255],
-};
-
-function luma(r, g, b) {
-  return 0.3 * r + 0.59 * g + 0.11 * b;
-}
-
-function getPixel(data, stride, x, y) {
-  const i = (y * stride + x) * 4;
-  return [data[i], data[i + 1], data[i + 2]];
-}
-
-/**
- * Run pixel diff on two same-sized RGBA pixel arrays.
- *
- * @param {Uint8ClampedArray} data1 - HTML screenshot pixel data
- * @param {Uint8ClampedArray} data2 - SVG screenshot pixel data
- * @param {number} w - width of both images (use max if sizes differ)
- * @param {number} h - height of both images
- * @param {number} stride1 - row stride for data1 (usually same as w)
- * @param {number} stride2 - row stride for data2
- * @param {object} [opts] - optional parameter overrides
- * @returns {{ diff: Uint8ClampedArray, stats: object }}
- */
-export function pixelDiff(data1, data2, w, h, stride1, stride2, opts) {
-  const LUMA_THRESHOLD = opts?.LUMA_THRESHOLD ?? DEFAULTS.LUMA_THRESHOLD;
-  const CHANNEL_TOLERANCE = opts?.CHANNEL_TOLERANCE ?? DEFAULTS.CHANNEL_TOLERANCE;
-  const POSITION_TOLERANCE = opts?.POSITION_TOLERANCE ?? DEFAULTS.POSITION_TOLERANCE;
-
-  const diff = new Uint8ClampedArray(w * h * 4);
-  let total = 0, matched = 0, htmlOnly = 0, svgOnly = 0, colorDiff = 0;
-
-  function pixelsClose(a, b) {
-    return Math.abs(a[0] - b[0]) <= CHANNEL_TOLERANCE &&
-           Math.abs(a[1] - b[1]) <= CHANNEL_TOLERANCE &&
-           Math.abs(a[2] - b[2]) <= CHANNEL_TOLERANCE;
-  }
-
-  function hasNearbyMatch(srcData, srcStride, dstData, dstStride, x, y) {
-    const p1 = getPixel(srcData, srcStride, x, y);
-    for (let dy = -POSITION_TOLERANCE; dy <= POSITION_TOLERANCE; dy++) {
-      for (let dx = -POSITION_TOLERANCE; dx <= POSITION_TOLERANCE; dx++) {
-        const nx = x + dx, ny = y + dy;
-        if (nx < 0 || nx >= w || ny < 0 || ny >= h) continue;
-        const p2 = getPixel(dstData, dstStride, nx, ny);
-        if (luma(...p2) < LUMA_THRESHOLD && pixelsClose(p1, p2)) return true;
-      }
-    }
-    return false;
-  }
-
-  for (let y = 0; y < h; y++) {
-    for (let x = 0; x < w; x++) {
-      const pA = getPixel(data1, stride1, x, y);
-      const pB = getPixel(data2, stride2, x, y);
-      const isA = luma(...pA) < LUMA_THRESHOLD;
-      const isB = luma(...pB) < LUMA_THRESHOLD;
-      const di = (y * w + x) * 4;
-
-      if (!isA && !isB) {
-        diff[di] = COLORS.background[0];
-        diff[di + 1] = COLORS.background[1];
-        diff[di + 2] = COLORS.background[2];
-        diff[di + 3] = COLORS.background[3];
-        continue;
-      }
-
-      total++;
-      const matchAB = hasNearbyMatch(data1, stride1, data2, stride2, x, y);
-      const matchBA = hasNearbyMatch(data2, stride2, data1, stride1, x, y);
-
-      let color;
-      if (isA && isB) {
-        if (matchAB || matchBA) {
-          matched++;
-          color = COLORS.match;
-        } else {
-          colorDiff++;
-          color = COLORS.colorDiff;
-        }
-      } else if (isA) {
-        if (matchAB) {
-          matched++;
-          color = COLORS.match;
-        } else {
-          htmlOnly++;
-          color = COLORS.htmlOnly;
-        }
-      } else {
-        if (matchBA) {
-          matched++;
-          color = COLORS.match;
-        } else {
-          svgOnly++;
-          color = COLORS.svgOnly;
-        }
-      }
-
-      diff[di] = color[0];
-      diff[di + 1] = color[1];
-      diff[di + 2] = color[2];
-      diff[di + 3] = color[3];
-    }
-  }
-
-  const posMatched = matched + colorDiff;
-  const pixelPct = total > 0 ? parseFloat((matched / total * 100).toFixed(1)) : 0.0;
-  const posPct = total > 0 ? parseFloat((posMatched / total * 100).toFixed(1)) : 0.0;
-
-  return {
-    diff,
-    stats: { matched, posMatched, total, htmlOnly, svgOnly, colorDiff, pixelPct, posPct },
-  };
-}
-
-/**
- * Load an image from a data URL into an ImageData-compatible object.
- * Works in any browser context (page or extension content script).
- */
-export function loadImage(dataUrl) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => resolve(img);
-    img.onerror = () => reject(new Error("Failed to load image"));
-    img.src = dataUrl;
-  });
-}
-
-/**
- * Draw an image onto a white-filled canvas and return its pixel data.
- */
-export function getImageData(img, w, h) {
-  const canvas = document.createElement("canvas");
-  canvas.width = w;
-  canvas.height = h;
-  const ctx = canvas.getContext("2d");
-  ctx.fillStyle = "white";
-  ctx.fillRect(0, 0, w, h);
-  ctx.drawImage(img, 0, 0);
-  return ctx.getImageData(0, 0, w, h).data;
-}
-
-/**
- * High-level: load two data-URL images, run diff, render to a canvas.
- * Returns { canvas, stats, badgeHtml }.
- */
-export async function diffImages(htmlDataUrl, svgDataUrl, opts) {
-  const [htmlImg, svgImg] = await Promise.all([
-    loadImage(htmlDataUrl),
-    loadImage(svgDataUrl),
-  ]);
-
-  const w = Math.max(htmlImg.width, svgImg.width);
-  const h = Math.max(htmlImg.height, svgImg.height);
-
-  const data1 = getImageData(htmlImg, w, h);
-  const data2 = getImageData(svgImg, w, h);
-
-  const { diff, stats } = pixelDiff(data1, data2, w, h, w, w, opts);
-
-  const canvas = document.createElement("canvas");
-  canvas.width = w;
-  canvas.height = h;
-  const ctx = canvas.getContext("2d");
-  const imageData = ctx.createImageData(w, h);
-  imageData.data.set(diff);
-  ctx.putImageData(imageData, 0, 0);
-
-  const badgeHtml =
-    `<b>${stats.pixelPct}%</b> native pixel match / <b>${stats.posPct}%</b> pos-only (${stats.matched}/${stats.total} px) ` +
-    `<span style="color:#006400">\u25a0</span> match ` +
-    `<span style="color:#ff0000">\u25a0</span> HTML-only (${stats.htmlOnly}) ` +
-    `<span style="color:#0000ff">\u25a0</span> SVG-only (${stats.svgOnly}) ` +
-    `<span style="color:#ff00ff">\u25a0</span> color diff (${stats.colorDiff})`;
-
-  return { canvas, stats, badgeHtml };
-}

package/e2e/fixtures/create-message.html

@@ -1,26 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>create message</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-A
-B
-C
-A->B.hello()
-      </pre>
-    </div>
-    <script type="module" src="/src/main-e2e.ts"></script>
-  </body>
-</html>

package/e2e/fixtures/editable-label.html

@@ -1,35 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>vue-sequence editable label</title>
-    <style>
-      body {
-        margin: 0;
-        /* mostly for demo on mobile */
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-title Editable label
-A.method(){
-  SelfMessage
-  new B(create)
-  return x;
-}
-C->D: Hello Alice
-D->C: Hello Bob
-D-->C: Response payload
-C->D: Good to see you
-    </pre
-      >
-    </div>
-    <!-- built files will be auto injected -->
-    <script type="module" src="/src/main-e2e.ts"></script>
-  </body>
-</html>

package/e2e/fixtures/editable-span.html

@@ -1,122 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>EditableSpan Test Page</title>
-    <style>
-      body {
-        margin: 20px;
-        font-family: Arial, sans-serif;
-      }
-      .test-container {
-        margin: 20px 0;
-        padding: 20px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-      .label {
-        font-weight: bold;
-        margin-bottom: 10px;
-      }
-      .log {
-        margin-top: 10px;
-        padding: 10px;
-        background: #f5f5f5;
-        border-radius: 4px;
-        font-family: monospace;
-        font-size: 12px;
-        max-height: 200px;
-        overflow-y: auto;
-      }
-      .log-entry {
-        margin: 2px 0;
-      }
-      .log-save {
-        color: green;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>EditableSpan Test Page</h1>
-    
-    <div class="test-container">
-      <div class="label">Test 1: Basic ESC Cancel</div>
-      <div>
-        Text: <span id="test1-span" data-testid="test1-span"></span>
-      </div>
-      <div class="log" id="test1-log" data-testid="test1-log"></div>
-    </div>
-
-    <div class="test-container">
-      <div class="label">Test 2: Enter Save</div>
-      <div>
-        Text: <span id="test2-span" data-testid="test2-span"></span>
-      </div>
-      <div class="log" id="test2-log" data-testid="test2-log"></div>
-    </div>
-
-    <div class="test-container">
-      <div class="label">Test 3: Blur Save</div>
-      <div>
-        Text: <span id="test3-span" data-testid="test3-span"></span>
-      </div>
-      <div class="log" id="test3-log" data-testid="test3-log"></div>
-      <button id="blur-target" data-testid="blur-target">Click here to blur</button>
-    </div>
-
-    <script type="module">
-      import { createRoot } from 'react-dom/client';
-      import { createElement } from 'react';
-      import { EditableSpan } from '../../src/components/common/EditableSpan/EditableSpan';
-
-      function createLogger(logId) {
-        const logEl = document.getElementById(logId);
-        return {
-          log: (message, type = 'info') => {
-            const entry = document.createElement('div');
-            entry.className = `log-entry log-${type}`;
-            entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
-            logEl.appendChild(entry);
-            logEl.scrollTop = logEl.scrollHeight;
-          }
-        };
-      }
-
-      function createReactiveSpan(rootEl, logger, initialValue) {
-        let value = initialValue;
-        const render = () => {
-          rootEl.render(createElement(EditableSpan, {
-            text: value,
-            onSave: (newText) => {
-              value = newText;
-              logger.log(`onSave called: "${newText}"`, 'save');
-              render();
-            }
-          }));
-        };
-        render();
-      }
-
-      // Test 1: ESC Cancel - should NOT call onSave when ESC is pressed
-      const logger1 = createLogger('test1-log');
-      const root1 = createRoot(document.getElementById('test1-span'));
-      createReactiveSpan(root1, logger1, 'Original Text');
-
-      // Test 2: Enter Save
-      const logger2 = createLogger('test2-log');
-      const root2 = createRoot(document.getElementById('test2-span'));
-      createReactiveSpan(root2, logger2, 'Press Enter');
-
-      // Test 3: Blur Save
-      const logger3 = createLogger('test3-log');
-      const root3 = createRoot(document.getElementById('test3-span'));
-      createReactiveSpan(root3, logger3, 'Click Outside');
-
-      // Make loggers available for testing
-      window.testLoggers = { logger1, logger2, logger3 };
-    </script>
-  </body>
-</html>

package/e2e/fixtures/empty-diagram.html

@@ -1,23 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>vue-sequence empty diagram</title>
-    <style>
-      body {
-        margin: 0;
-        /* mostly for demo on mobile */
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0"></pre>
-    </div>
-    <!-- built files will be auto injected -->
-    <script type="module" src="/src/main-e2e.ts"></script>
-  </body>
-</html>

package/e2e/fixtures/fixture.html

@@ -1,31 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>ZenUML Test Fixture</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0" id="zenuml-code"></pre>
-    </div>
-    <script type="module">
-      import { CASES } from "../data/compare-cases.js";
-      const params = new URLSearchParams(window.location.search);
-      const caseName = params.get("case");
-      if (caseName && CASES[caseName]) {
-        document.getElementById("zenuml-code").textContent = CASES[caseName];
-      } else {
-        document.getElementById("zenuml-code").textContent =
-          "// Case not found: " + caseName;
-      }
-    </script>
-    <script type="module" src="/src/main-e2e.ts"></script>
-  </body>
-</html>

package/e2e/fixtures/insert-participant.html

@@ -1,23 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>insert participant</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-A->C: Ping
-      </pre>
-    </div>
-    <script type="module" src="/src/main-e2e.ts"></script>
-  </body>
-</html>

package/e2e/fixtures/reorder-cross-fragment.html

@@ -1,31 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>reorder cross fragment</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-A
-B
-C
-B->A.outside()
-if(ready) {
-  A->B.alpha()
-  A->C.beta()
-}
-C->A.omega()
-      </pre>
-    </div>
-    <script type="module" src="/src/main-e2e.ts"></script>
-  </body>
-</html>

package/e2e/fixtures/reorder-fragment.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>reorder fragment</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-A
-B
-C
-if(ready) {
-  A->B: alpha
-  A->C: beta
-}
-      </pre>
-    </div>
-    <script type="module" src="/src/main-e2e.ts"></script>
-  </body>
-</html>

package/e2e/fixtures/reorder-message.html

@@ -1,27 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>reorder message</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-A
-B
-C
-A->B: first
-A->C: second
-      </pre>
-    </div>
-    <script type="module" src="/src/main-e2e.ts"></script>
-  </body>
-</html>

package/e2e/fixtures/svg-test.html

@@ -1,21 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>SVG Parity Test</title>
-    <style>
-      body { margin: 0; background: white; }
-    </style>
-  </head>
-  <body>
-    <div id="svg-output"></div>
-    <script type="module">
-      import { renderToSvg } from "/src/svg/renderToSvg.ts";
-      window.__renderSvg = (code) => {
-        const result = renderToSvg(code);
-        document.getElementById("svg-output").innerHTML = result.svg;
-      };
-    </script>
-  </body>
-</html>

package/e2e/fixtures/type-switch.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>vue-sequence type switch</title>
-    <style>
-      body {
-        margin: 0;
-        /* mostly for demo on mobile */
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-title Type Switch
-A->B.login()
-B->C: validate
-B-->A: token
-    </pre
-      >
-    </div>
-    <!-- built files will be auto injected -->
-    <script type="module" src="/src/main-e2e.ts"></script>
-  </body>
-</html>