locusing 0.1.2

package/dist/export.js

@@ -0,0 +1,528 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/export.ts
+var export_exports = {};
+__export(export_exports, {
+  PlaywrightExporter: () => PlaywrightExporter,
+  exportSVGToPNG: () => exportSVGToPNG,
+  exportToPNG: () => exportToPNG,
+  generateExportHTML: () => generateExportHTML,
+  generateExportHTMLWithInlineCSS: () => generateExportHTMLWithInlineCSS
+});
+module.exports = __toCommonJS(export_exports);
+
+// src/core/render-svg.ts
+var DEFAULT_FRAME = {
+  width: 16,
+  height: 9
+};
+var XHTML_NS = "http://www.w3.org/1999/xhtml";
+var SVG_NS = "http://www.w3.org/2000/svg";
+function toSVGString(diagram, options = {}) {
+  const { width = 800, height = 600, background, frame } = options;
+  const frameConfig = frame ? typeof frame === "boolean" ? DEFAULT_FRAME : frame : null;
+  if (frameConfig) {
+    const { width: fw, height: fh } = frameConfig;
+    const viewBox = `${-fw / 2} ${-fh / 2} ${fw} ${fh}`;
+    let content2 = "";
+    if (background) {
+      content2 += `<rect x="${-fw / 2}" y="${-fh / 2}" width="${fw}" height="${fh}" fill="${background}"/>`;
+    }
+    content2 += `<g transform="scale(1,-1)">${shapeToSVGString(diagram.shape)}</g>`;
+    return `<svg xmlns="${SVG_NS}" width="${width}" height="${height}" viewBox="${viewBox}">${content2}</svg>`;
+  }
+  let content = "";
+  if (background) {
+    content += `<rect width="100%" height="100%" fill="${background}"/>`;
+  }
+  content += shapeToSVGString(diagram.shape);
+  return `<svg xmlns="${SVG_NS}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${content}</svg>`;
+}
+function shapeToSVGString(shape) {
+  const attrs = [`id="${shape.id}"`];
+  const style = styleToString(shape.style);
+  const transform = transformToString(shape.transform);
+  if (style) attrs.push(style);
+  if (transform) attrs.push(`transform="${transform}"`);
+  switch (shape.type) {
+    case "rect":
+      attrs.push(`x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}"`);
+      if (shape.rx) attrs.push(`rx="${shape.rx}"`);
+      if (shape.ry) attrs.push(`ry="${shape.ry}"`);
+      return `<rect ${attrs.join(" ")}/>`;
+    case "circle":
+      attrs.push(`cx="${shape.cx}" cy="${shape.cy}" r="${shape.r}"`);
+      return `<circle ${attrs.join(" ")}/>`;
+    case "ellipse":
+      attrs.push(`cx="${shape.cx}" cy="${shape.cy}" rx="${shape.rx}" ry="${shape.ry}"`);
+      return `<ellipse ${attrs.join(" ")}/>`;
+    case "line":
+      attrs.push(`x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}"`);
+      return `<line ${attrs.join(" ")}/>`;
+    case "polyline":
+      attrs.push(`points="${shape.points.map((p) => `${p[0]},${p[1]}`).join(" ")}"`);
+      return `<polyline ${attrs.join(" ")}/>`;
+    case "polygon":
+      attrs.push(`points="${shape.points.map((p) => `${p[0]},${p[1]}`).join(" ")}"`);
+      return `<polygon ${attrs.join(" ")}/>`;
+    case "path":
+      attrs.push(`d="${commandsToPath(shape.commands)}"`);
+      return `<path ${attrs.join(" ")}/>`;
+    case "arc":
+      attrs.push(`d="${arcToPath(shape.cx, shape.cy, shape.r, shape.startAngle, shape.endAngle)}"`);
+      return `<path ${attrs.join(" ")}/>`;
+    case "text":
+      const textStyle = textStyleToString(shape.style);
+      if (textStyle) attrs.push(textStyle);
+      attrs.push(`x="${shape.x}" y="${shape.y}"`);
+      return `<text ${attrs.join(" ")}>${escapeXML(shape.content)}</text>`;
+    case "tex":
+      const texShape = shape;
+      return `<foreignObject x="${texShape.x}" y="${texShape.y}" width="1000" height="200" overflow="visible"><div xmlns="${XHTML_NS}" style="font-size:${texShape.fontSize}px;color:${texShape.color};display:inline-block;white-space:nowrap">${texShape.html}</div></foreignObject>`;
+    case "group":
+      const children = shape.children.map(shapeToSVGString).join("");
+      return `<g ${attrs.join(" ")}>${children}</g>`;
+    case "svg":
+      const svgShapeStr = shape;
+      const scaleXStr = shape.width / svgShapeStr.originalWidth;
+      const scaleYStr = shape.height / svgShapeStr.originalHeight;
+      return `<g ${attrs.join(" ")} transform="scale(${scaleXStr}, ${scaleYStr})">${svgShapeStr.content}</g>`;
+    case "image":
+      const imgShapeStr = shape;
+      attrs.push(`href="${imgShapeStr.src}"`);
+      attrs.push(`x="${-shape.width / 2}" y="${-shape.height / 2}"`);
+      attrs.push(`width="${shape.width}" height="${shape.height}"`);
+      attrs.push('preserveAspectRatio="xMidYMid meet"');
+      return `<image ${attrs.join(" ")}/>`;
+    default:
+      return "";
+  }
+}
+function styleToString(style) {
+  const parts = [];
+  if (style.fill) parts.push(`fill="${style.fill}"`);
+  if (style.fillOpacity !== void 0) parts.push(`fill-opacity="${style.fillOpacity}"`);
+  if (style.stroke) parts.push(`stroke="${style.stroke}"`);
+  if (style.strokeWidth !== void 0) parts.push(`stroke-width="${style.strokeWidth}"`);
+  if (style.strokeOpacity !== void 0) parts.push(`stroke-opacity="${style.strokeOpacity}"`);
+  if (style.strokeDasharray) parts.push(`stroke-dasharray="${style.strokeDasharray}"`);
+  if (style.strokeLinecap) parts.push(`stroke-linecap="${style.strokeLinecap}"`);
+  if (style.strokeLinejoin) parts.push(`stroke-linejoin="${style.strokeLinejoin}"`);
+  if (style.opacity !== void 0) parts.push(`opacity="${style.opacity}"`);
+  return parts.join(" ");
+}
+function textStyleToString(style) {
+  const parts = [];
+  if (style.fontSize) parts.push(`font-size="${style.fontSize}"`);
+  if (style.fontFamily) parts.push(`font-family="${style.fontFamily}"`);
+  if (style.fontWeight) parts.push(`font-weight="${style.fontWeight}"`);
+  if (style.textAnchor) parts.push(`text-anchor="${style.textAnchor}"`);
+  if (style.dominantBaseline) parts.push(`dominant-baseline="${style.dominantBaseline}"`);
+  return parts.join(" ");
+}
+function transformToString(matrix) {
+  const [a, b, c, d, e, f] = [
+    matrix[0],
+    matrix[3],
+    matrix[1],
+    matrix[4],
+    matrix[2],
+    matrix[5]
+  ];
+  if (a === 1 && b === 0 && c === 0 && d === 1 && e === 0 && f === 0) {
+    return "";
+  }
+  return `matrix(${a},${b},${c},${d},${e},${f})`;
+}
+function commandsToPath(commands, _frameMode = false) {
+  return commands.map((cmd) => {
+    switch (cmd.type) {
+      case "M":
+        return `M${cmd.x},${cmd.y}`;
+      case "L":
+        return `L${cmd.x},${cmd.y}`;
+      case "H":
+        return `H${cmd.x}`;
+      case "V":
+        return `V${cmd.y}`;
+      case "C":
+        return `C${cmd.x1},${cmd.y1} ${cmd.x2},${cmd.y2} ${cmd.x},${cmd.y}`;
+      case "S":
+        return `S${cmd.x2},${cmd.y2} ${cmd.x},${cmd.y}`;
+      case "Q":
+        return `Q${cmd.x1},${cmd.y1} ${cmd.x},${cmd.y}`;
+      case "T":
+        return `T${cmd.x},${cmd.y}`;
+      case "A": {
+        return `A${cmd.rx},${cmd.ry} ${cmd.angle} ${cmd.largeArc ? 1 : 0},${cmd.sweep ? 1 : 0} ${cmd.x},${cmd.y}`;
+      }
+      case "Z":
+        return "Z";
+    }
+  }).join(" ");
+}
+function arcToPath(cx, cy, r, startAngle, endAngle) {
+  const startX = cx + r * Math.cos(startAngle);
+  const startY = cy + r * Math.sin(startAngle);
+  const endX = cx + r * Math.cos(endAngle);
+  const endY = cy + r * Math.sin(endAngle);
+  const largeArc = Math.abs(endAngle - startAngle) > Math.PI ? 1 : 0;
+  const sweep = endAngle > startAngle ? 1 : 0;
+  return `M${startX},${startY} A${r},${r} 0 ${largeArc},${sweep} ${endX},${endY}`;
+}
+function escapeXML(str) {
+  if (typeof str !== "string") {
+    str = String(str != null ? str : "");
+  }
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+// src/export/html-template.ts
+var KATEX_CSS_URL = "https://cdn.jsdelivr.net/npm/katex@0.16.27/dist/katex.min.css";
+function generateExportHTML(svgContent, options) {
+  const {
+    width = 1920,
+    height = 1080,
+    background = "transparent"
+  } = options;
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=${width}, height=${height}">
+  <link rel="stylesheet" href="${KATEX_CSS_URL}" crossorigin="anonymous">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    html, body {
+      width: ${width}px;
+      height: ${height}px;
+      overflow: hidden;
+    }
+    body {
+      background: ${background};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    /* KaTeX \u5728 SVG foreignObject \u4E2D\u7684\u6837\u5F0F\u4FEE\u6B63 */
+    .katex {
+      font-size: inherit;
+      line-height: 1;
+    }
+    .katex-html {
+      white-space: nowrap;
+    }
+  </style>
+</head>
+<body>
+  ${svgContent}
+</body>
+</html>`;
+}
+function generateExportHTMLWithInlineCSS(katexCSS, svgContent, options) {
+  const {
+    width = 1920,
+    height = 1080,
+    background = "transparent"
+  } = options;
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=${width}, height=${height}">
+  <style>
+    ${katexCSS}
+  </style>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    html, body {
+      width: ${width}px;
+      height: ${height}px;
+      overflow: hidden;
+    }
+    body {
+      background: ${background};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    .katex {
+      font-size: inherit;
+      line-height: 1;
+    }
+    .katex-html {
+      white-space: nowrap;
+    }
+  </style>
+</head>
+<body>
+  ${svgContent}
+</body>
+</html>`;
+}
+
+// src/export/playwright-exporter.ts
+var PlaywrightExporter = class {
+  constructor(options = {}) {
+    this.browser = null;
+    this.page = null;
+    var _a, _b;
+    this.options = {
+      headless: (_a = options.headless) != null ? _a : true,
+      browser: (_b = options.browser) != null ? _b : "chromium"
+    };
+  }
+  /**
+   * 启动浏览器
+   *
+   * @throws 如果 Playwright 未安装
+   */
+  async launch() {
+    if (this.browser) {
+      return;
+    }
+    let playwright;
+    try {
+      playwright = await import("playwright");
+    } catch (e) {
+      throw new Error(
+        "Playwright is not installed. Please install it with: pnpm add -D playwright"
+      );
+    }
+    const browserType = playwright[this.options.browser];
+    if (!browserType) {
+      throw new Error(`Unknown browser type: ${this.options.browser}`);
+    }
+    this.browser = await browserType.launch({
+      headless: this.options.headless
+    });
+    this.page = await this.browser.newPage();
+  }
+  /**
+   * 关闭浏览器
+   */
+  async close() {
+    if (this.page) {
+      await this.page.close();
+      this.page = null;
+    }
+    if (this.browser) {
+      await this.browser.close();
+      this.browser = null;
+    }
+  }
+  /**
+   * 获取页面实例，确保已启动
+   */
+  getPage() {
+    if (!this.browser || !this.page) {
+      throw new Error("Browser not launched. Call launch() first.");
+    }
+    return this.page;
+  }
+  /**
+   * 导出 Diagram 为图片
+   *
+   * @param diagram - 要导出的 Diagram
+   * @param options - 导出选项
+   * @returns 导出结果
+   */
+  async exportDiagram(diagram, options = {}) {
+    const {
+      width = 1920,
+      height = 1080,
+      frame = true
+    } = options;
+    const svgString = toSVGString(diagram, {
+      width,
+      height,
+      frame,
+      background: "transparent"
+      // HTML 背景会处理
+    });
+    return this.exportSVGString(svgString, options);
+  }
+  /**
+   * 导出 Scene 为图片（静态帧）
+   *
+   * @param SceneClass - Scene 类
+   * @param options - 导出选项
+   * @returns 导出结果
+   */
+  async exportScene(SceneClass, options = {}) {
+    const _a = options, { frameTime: _frameTime = 0 } = _a, exportOptions = __objRest(_a, ["frameTime"]);
+    const scene = new SceneClass();
+    if (typeof scene.construct === "function") {
+      if (typeof scene.toSVGString === "function") {
+        const svgString = scene.toSVGString();
+        return this.exportSVGString(svgString, exportOptions);
+      }
+    }
+    throw new Error(
+      "Scene export requires the Scene to have a toSVGString() method. For animated scenes, use browser-based export."
+    );
+  }
+  /**
+   * 导出 SVG 字符串为图片
+   *
+   * @param svgString - SVG 字符串
+   * @param options - 导出选项
+   * @returns 导出结果
+   */
+  async exportSVGString(svgString, options = {}) {
+    const page = this.getPage();
+    const {
+      format = "png",
+      quality = 90,
+      deviceScaleFactor = 2,
+      width = 1920,
+      height = 1080,
+      background = "transparent",
+      waitForFonts = true,
+      renderDelay = 100
+    } = options;
+    await page.setViewportSize({
+      width,
+      height
+    });
+    await page.emulateMedia({ colorScheme: "light" });
+    const html = generateExportHTML(svgString, { width, height, background });
+    await page.setContent(html, {
+      waitUntil: "networkidle"
+    });
+    if (waitForFonts) {
+      await page.waitForFunction(
+        () => document.fonts.ready.then(() => true),
+        { timeout: 1e4 }
+      ).catch(() => {
+        console.warn("Font loading timeout, continuing with available fonts");
+      });
+    }
+    if (renderDelay > 0) {
+      await page.waitForTimeout(renderDelay);
+    }
+    const buffer = await page.screenshot({
+      type: format,
+      quality: format !== "png" ? quality : void 0,
+      fullPage: false,
+      omitBackground: background === "transparent",
+      scale: "device"
+    });
+    const actualWidth = width * deviceScaleFactor;
+    const actualHeight = height * deviceScaleFactor;
+    return {
+      buffer: Buffer.from(buffer),
+      mimeType: `image/${format}`,
+      width: actualWidth,
+      height: actualHeight
+    };
+  }
+};
+async function exportToPNG(diagram, outputPath, options = {}) {
+  const fs = await import("fs/promises");
+  const exporter = new PlaywrightExporter();
+  try {
+    await exporter.launch();
+    const result = await exporter.exportDiagram(diagram, __spreadProps(__spreadValues({}, options), {
+      format: "png"
+    }));
+    await fs.writeFile(outputPath, result.buffer);
+  } finally {
+    await exporter.close();
+  }
+}
+async function exportSVGToPNG(svgString, outputPath, options = {}) {
+  const fs = await import("fs/promises");
+  const exporter = new PlaywrightExporter();
+  try {
+    await exporter.launch();
+    const result = await exporter.exportSVGString(svgString, __spreadProps(__spreadValues({}, options), {
+      format: "png"
+    }));
+    await fs.writeFile(outputPath, result.buffer);
+  } finally {
+    await exporter.close();
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PlaywrightExporter,
+  exportSVGToPNG,
+  exportToPNG,
+  generateExportHTML,
+  generateExportHTMLWithInlineCSS
+});