@king-design/vue 3.7.0 → 3.8.0-beta.0

package/components/xmarkdown/useMermaid.js

@@ -0,0 +1,745 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Symbol from "@babel/runtime-corejs3/core-js/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { var _context8; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context8 = Object.prototype.toString.call(o)).call(_context8, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import _Number$isFinite from "@babel/runtime-corejs3/core-js/number/is-finite";
+import _Number$parseFloat from "@babel/runtime-corejs3/core-js/number/parse-float";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _Math$imul from "@babel/runtime-corejs3/core-js/math/imul";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+/**
+ * Mermaid 图表处理
+ *
+ * 负责渲染 Mermaid 图表，以及缩放、拖拽、下载等交互功能。
+ */
+import { useInstance } from 'intact-vue-next';
+import { _$ } from '../../i18n';
+import { selectValue } from '../utils';
+// 模块级常量
+var SCALE_STEP = 0.2;
+var WHEEL_STEP = 0.1;
+var VIEWPORT_MAX_HEIGHT = 480;
+// 模块级状态
+var mermaidPromise = null;
+/**
+ * 管理 Mermaid 图表的渲染与交互
+ */
+export function useMermaid(getRenderedBlockData, getPrefixCls) {
+  var instance = useInstance();
+  var renderSeed = 0;
+  var syncing = false;
+  var pendingSync = false;
+  var dragState = null;
+  var feedbackTimers = new _Set();
+  /**
+   * 同步渲染 Mermaid 图表
+   */
+  function syncBlocks(_x) {
+    return _syncBlocks.apply(this, arguments);
+  }
+  /**
+   * 渲染单个 Mermaid 块
+   */
+  function _syncBlocks() {
+    _syncBlocks = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(container) {
+      var _context;
+      var blocks, mermaid, _iterator, _step, block;
+      return _regeneratorRuntime.wrap(function _callee$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (instance.get('enableMermaid')) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            if (!syncing) {
+              _context2.next = 5;
+              break;
+            }
+            pendingSync = true;
+            return _context2.abrupt("return");
+          case 5:
+            // 获取所有需要渲染的 Mermaid 块
+            blocks = _filterInstanceProperty(_context = _Array$from(container.querySelectorAll('[data-kpc-mermaid="true"]'))).call(_context, function (block) {
+              return block.dataset.kpcRenderState !== 'done';
+            });
+            if (blocks.length) {
+              _context2.next = 8;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 8:
+            syncing = true;
+            _context2.prev = 9;
+            _context2.next = 12;
+            return loadMermaid();
+          case 12:
+            mermaid = _context2.sent;
+            if (mermaid) {
+              _context2.next = 15;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 15:
+            mermaid.initialize(_extends({
+              startOnLoad: false,
+              securityLevel: 'strict',
+              theme: 'default'
+            }, instance.get('mermaidConfig')));
+            _iterator = _createForOfIteratorHelperLoose(blocks);
+          case 17:
+            if ((_step = _iterator()).done) {
+              _context2.next = 23;
+              break;
+            }
+            block = _step.value;
+            _context2.next = 21;
+            return renderBlock(block, mermaid, container);
+          case 21:
+            _context2.next = 17;
+            break;
+          case 23:
+            _context2.prev = 23;
+            syncing = false;
+            if (pendingSync) {
+              pendingSync = false;
+              void syncBlocks(container);
+            }
+            return _context2.finish(23);
+          case 27:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee, null, [[9,, 23, 27]]);
+    }));
+    return _syncBlocks.apply(this, arguments);
+  }
+  function renderBlock(_x2, _x3, _x4) {
+    return _renderBlock.apply(this, arguments);
+  }
+  /**
+   * 初始化图表尺寸和缩放
+   */
+  function _renderBlock() {
+    _renderBlock = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(block, mermaid, container) {
+      var state, stage, blockId, renderedBlock, source, renderId, svg, error;
+      return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            state = block.dataset.kpcRenderState;
+            if (!(state === 'loading' || state === 'done')) {
+              _context3.next = 3;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 3:
+            stage = block.querySelector('[data-kpc-mermaid-stage="true"]');
+            blockId = block.dataset.kpcBlockId || '';
+            renderedBlock = getRenderedBlockData(blockId);
+            source = (renderedBlock == null ? void 0 : renderedBlock.source) || '';
+            if (!(!stage || !source)) {
+              _context3.next = 9;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 9:
+            block.dataset.kpcRenderState = 'loading';
+            stage.textContent = _$('Mermaid 渲染中...');
+            updateToolbarState(block);
+            _context3.prev = 12;
+            renderId = createMermaidRenderId(container, source, blockId, renderSeed++, getPrefixCls());
+            _context3.next = 16;
+            return mermaid.renderAsync(renderId, source);
+          case 16:
+            svg = _context3.sent;
+            if (container.contains(block)) {
+              _context3.next = 19;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 19:
+            stage.innerHTML = svg;
+            block.dataset.kpcRenderState = 'done';
+            prepareStage(block);
+            _context3.next = 33;
+            break;
+          case 24:
+            _context3.prev = 24;
+            _context3.t0 = _context3["catch"](12);
+            if (container.contains(block)) {
+              _context3.next = 28;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 28:
+            error = _context3.t0 instanceof Error ? _context3.t0 : new Error(String(_context3.t0));
+            stage.innerHTML = "<div class=\"" + getPrefixCls() + "-xmarkdown-mermaid-error\">" + escapeHtml(error.message) + "</div>";
+            block.dataset.kpcRenderState = 'error';
+            updateToolbarState(block, false);
+            instance.trigger('mermaidError', error, source);
+          case 33:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee2, null, [[12, 24]]);
+    }));
+    return _renderBlock.apply(this, arguments);
+  }
+  function prepareStage(block) {
+    var stage = block.querySelector('[data-kpc-mermaid-stage="true"]');
+    var svg = stage == null ? void 0 : stage.querySelector('svg');
+    var viewport = block.querySelector('[data-kpc-mermaid-viewport="true"]');
+    if (!stage || !svg) {
+      updateToolbarState(block, false);
+      return;
+    }
+    var _getBaseSize = getBaseSize(svg),
+      width = _getBaseSize.width,
+      height = _getBaseSize.height;
+    if (width > 0) block.dataset.kpcMermaidBaseWidth = String(width);
+    if (height > 0) block.dataset.kpcMermaidBaseHeight = String(height);
+    block.dataset.kpcScale = '1';
+    svg.style.maxWidth = '100%';
+    svg.style.height = 'auto';
+    block.dataset.kpcInitialScale = String(getFittedScale(block, viewport));
+    block.dataset.kpcScale = block.dataset.kpcInitialScale;
+    applyTransform(block);
+  }
+  /**
+   * 处理缩放
+   */
+  function stepScale(block, delta) {
+    setScale(block, getScale(block) + delta);
+  }
+  /**
+   * 读取当前缩放比例
+   */
+  function getScale(block) {
+    var parsed = Number(block.dataset.kpcScale || '1');
+    return _Number$isFinite(parsed) ? parsed : 1;
+  }
+  /**
+   * 读取初始适配缩放比例
+   */
+  function getInitialScale(block) {
+    var parsed = Number(block.dataset.kpcInitialScale || '1');
+    return _Number$isFinite(parsed) ? parsed : 1;
+  }
+  /**
+   * 计算最小缩放比例
+   */
+  function getMinScale(block) {
+    return Math.max(0.25, Math.min(getInitialScale(block), 1) * 0.6);
+  }
+  /**
+   * 计算最大缩放比例
+   */
+  function getMaxScale(block) {
+    return Math.max(2, getInitialScale(block) * 3);
+  }
+  /**
+   * 设置指定图表的缩放比例
+   */
+  function setScale(block, nextScale) {
+    var initialScale = getInitialScale(block);
+    block.dataset.kpcScale = String(clamp(nextScale, getMinScale(block), getMaxScale(block)));
+    applyTransform(block);
+    if (getScale(block) <= initialScale) {
+      var viewport = block.querySelector('[data-kpc-mermaid-viewport="true"]');
+      if (viewport) {
+        viewport.scrollLeft = 0;
+        viewport.scrollTop = 0;
+      }
+    }
+  }
+  /**
+   * 重置为初始缩放比例
+   */
+  function resetScale(block) {
+    block.dataset.kpcScale = String(getInitialScale(block));
+    applyTransform(block);
+  }
+  /**
+   * 应用缩放变换
+   */
+  function applyTransform(block) {
+    var stage = block.querySelector('[data-kpc-mermaid-stage="true"]');
+    var svg = stage == null ? void 0 : stage.querySelector('svg');
+    var viewport = block.querySelector('[data-kpc-mermaid-viewport="true"]');
+    if (!stage || !svg || !viewport) {
+      updateToolbarState(block, false);
+      return;
+    }
+    var scale = getScale(block);
+    var baseWidth = Number(block.dataset.kpcMermaidBaseWidth || '0');
+    var baseHeight = Number(block.dataset.kpcMermaidBaseHeight || '0');
+    var viewportWidth = Math.max(viewport.clientWidth, 1);
+    var viewportHeight = Math.max(viewport.clientHeight, 1);
+    var scaledWidth = Math.max(baseWidth * scale, 1);
+    var scaledHeight = Math.max(baseHeight * scale, 1);
+    var needsHorizontalScroll = scaledWidth + 16 > viewportWidth;
+    var needsVerticalScroll = scaledHeight + 16 > viewportHeight;
+    var stageWidth = needsHorizontalScroll ? scaledWidth + 16 : viewportWidth;
+    var stageHeight = needsVerticalScroll ? scaledHeight + 16 : viewportHeight;
+    block.dataset.kpcScale = String(scale);
+    stage.style.width = stageWidth + "px";
+    stage.style.height = stageHeight + "px";
+    stage.style.justifyContent = needsHorizontalScroll ? 'flex-start' : 'center';
+    stage.style.alignItems = needsVerticalScroll ? 'flex-start' : 'center';
+    svg.style.transformOrigin = 'center center';
+    svg.style.transform = 'none';
+    svg.style.width = scaledWidth + "px";
+    svg.style.height = scaledHeight + "px";
+    svg.style.maxWidth = 'none';
+    svg.style.cursor = 'default';
+    viewport.dataset.kpcCanDrag = needsHorizontalScroll || needsVerticalScroll ? 'true' : 'false';
+    updateToolbarState(block);
+  }
+  /**
+   * 计算 fitted 缩放比例
+   */
+  function getFittedScale(block, viewport) {
+    var targetViewport = viewport || block.querySelector('[data-kpc-mermaid-viewport="true"]');
+    var baseWidth = Number(block.dataset.kpcMermaidBaseWidth || '0');
+    var baseHeight = Number(block.dataset.kpcMermaidBaseHeight || '0');
+    if (!targetViewport || baseWidth <= 0 || baseHeight <= 0) return 1;
+    var rect = targetViewport.getBoundingClientRect();
+    var availableWidth = Math.max(rect.width - 16, 1);
+    var viewportMaxHeight = _Number$parseFloat(window.getComputedStyle(targetViewport).maxHeight || '') || VIEWPORT_MAX_HEIGHT;
+    var availableHeight = Math.max(viewportMaxHeight - 16, 1);
+    var fittedScale = Math.min(1, availableWidth / baseWidth, availableHeight / baseHeight);
+    return clamp(fittedScale, 0.25, 1);
+  }
+  /**
+   * 更新工具栏状态
+   */
+  function updateToolbarState(block, enabled) {
+    if (enabled === void 0) {
+      enabled = true;
+    }
+    var scale = getScale(block);
+    var initialScale = getInitialScale(block);
+    var isSourceView = block.dataset.kpcView === 'source';
+    var disableZoom = !enabled || isSourceView;
+    var zoomOutButton = block.querySelector('[data-kpc-action="zoom-mermaid-out"]');
+    var zoomInButton = block.querySelector('[data-kpc-action="zoom-mermaid-in"]');
+    var resetButton = block.querySelector('[data-kpc-action="reset-mermaid-zoom"]');
+    var downloadButton = block.querySelector('[data-kpc-action="download-mermaid"]');
+    if (zoomOutButton) zoomOutButton.disabled = disableZoom || scale <= getMinScale(block);
+    if (zoomInButton) zoomInButton.disabled = disableZoom || scale >= getMaxScale(block);
+    if (resetButton) resetButton.disabled = disableZoom || scale === initialScale;
+    if (downloadButton) downloadButton.disabled = !enabled || isSourceView;
+  }
+  /**
+   * 切换视图（图表/源码）
+   */
+  function setView(actionElement, view) {
+    var block = actionElement.closest('[data-kpc-mermaid="true"]');
+    if (!block) return;
+    block.dataset.kpcView = view;
+    applyTransform(block);
+    block.querySelectorAll('[data-kpc-action="set-mermaid-view-diagram"], [data-kpc-action="set-mermaid-view-source"]').forEach(function (button) {
+      button.dataset.kpcSelected = button.dataset.kpcAction === "set-mermaid-view-" + view ? 'true' : 'false';
+      button.setAttribute('aria-pressed', button.dataset.kpcSelected);
+    });
+    updateToolbarState(block);
+  }
+  /**
+   * 下载图表
+   */
+  function download(_x5) {
+    return _download.apply(this, arguments);
+  }
+  /**
+   * 处理指针按下（开始拖拽）
+   */
+  function _download() {
+    _download = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(actionElement) {
+      var block, svg, filename, dataUrl;
+      return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            block = actionElement.closest('[data-kpc-mermaid="true"]');
+            svg = block == null ? void 0 : block.querySelector('[data-kpc-mermaid-stage="true"] svg');
+            if (!(!block || !svg)) {
+              _context4.next = 4;
+              break;
+            }
+            return _context4.abrupt("return", false);
+          case 4:
+            filename = "mermaid-" + Date.now();
+            _context4.prev = 5;
+            _context4.next = 8;
+            return svgToPngDataUrl(svg);
+          case 8:
+            dataUrl = _context4.sent;
+            triggerDownload(dataUrl, filename + ".png");
+            return _context4.abrupt("return", true);
+          case 13:
+            _context4.prev = 13;
+            _context4.t0 = _context4["catch"](5);
+            _context4.prev = 15;
+            triggerDownload(serializeSvgAsDataUrl(svg), filename + ".svg");
+            return _context4.abrupt("return", true);
+          case 20:
+            _context4.prev = 20;
+            _context4.t1 = _context4["catch"](15);
+            return _context4.abrupt("return", false);
+          case 23:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee3, null, [[5, 13], [15, 20]]);
+    }));
+    return _download.apply(this, arguments);
+  }
+  function handlePointerDown(e, container) {
+    if (e.button !== 0) return;
+    var target = e.target;
+    var viewport = target == null ? void 0 : target.closest('[data-kpc-mermaid-viewport="true"]');
+    if (!viewport || !container.contains(viewport)) return;
+    if (viewport.dataset.kpcCanDrag !== 'true') return;
+    dragState = {
+      viewport: viewport,
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      startScrollLeft: viewport.scrollLeft,
+      startScrollTop: viewport.scrollTop
+    };
+    viewport.dataset.kpcDragging = 'true';
+    viewport.setPointerCapture == null || viewport.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }
+  /**
+   * 处理指针移动
+   */
+  function handlePointerMove(e) {
+    if (!dragState || dragState.pointerId !== e.pointerId) return;
+    dragState.viewport.scrollLeft = dragState.startScrollLeft - (e.clientX - dragState.startX);
+    dragState.viewport.scrollTop = dragState.startScrollTop - (e.clientY - dragState.startY);
+    e.preventDefault();
+  }
+  /**
+   * 处理指针抬起（结束拖拽）
+   */
+  function handlePointerUp(e) {
+    if (!dragState || dragState.pointerId !== e.pointerId) return;
+    finishDrag();
+  }
+  /**
+   * 结束拖拽
+   */
+  function finishDrag() {
+    if (!dragState) return;
+    dragState.viewport.dataset.kpcDragging = 'false';
+    dragState.viewport.releasePointerCapture == null || dragState.viewport.releasePointerCapture(dragState.pointerId);
+    dragState = null;
+  }
+  /**
+   * 处理滚轮缩放
+   */
+  function handleWheel(e, container) {
+    var target = e.target;
+    var viewport = target == null ? void 0 : target.closest('[data-kpc-mermaid-viewport="true"]');
+    if (!viewport || !container.contains(viewport) || !(e.ctrlKey || e.metaKey)) return;
+    var block = viewport.closest('[data-kpc-mermaid="true"]');
+    if (!block || block.dataset.kpcView === 'source') return;
+    e.preventDefault();
+    var delta = e.deltaY < 0 ? WHEEL_STEP : -WHEEL_STEP;
+    setScale(block, getScale(block) + delta);
+  }
+  /**
+   * 显示按钮反馈
+   */
+  function showFeedback(button, text) {
+    var previousTitle = button.getAttribute('title') || '';
+    var iconElement = button.querySelector('[data-kpc-icon="true"]');
+    var defaultIconClass = button.dataset.kpcDefaultIcon || '';
+    var feedbackIconClass = button.dataset.kpcFeedbackIcon || defaultIconClass;
+    if (button.dataset.kpcFeedbackMode === 'icon' && iconElement) {
+      iconElement.className = getPrefixCls() + "-xmarkdown-toolbar-icon " + getPrefixCls() + "-icon " + feedbackIconClass;
+      button.setAttribute('title', text);
+      button.setAttribute('aria-label', text);
+    } else {
+      button.textContent = text;
+    }
+    var timer = window.setTimeout(function () {
+      feedbackTimers.delete(timer);
+      if (!document.body.contains(button)) return;
+      if (button.dataset.kpcFeedbackMode === 'icon' && iconElement) {
+        iconElement.className = getPrefixCls() + "-xmarkdown-toolbar-icon " + getPrefixCls() + "-icon " + defaultIconClass;
+        button.setAttribute('title', button.dataset.kpcDefaultTitle || previousTitle);
+        button.setAttribute('aria-label', button.dataset.kpcDefaultTitle || previousTitle);
+      }
+    }, 1200);
+    feedbackTimers.add(timer);
+  }
+  /**
+   * 清理反馈定时器
+   */
+  function clearFeedbackTimers() {
+    feedbackTimers.forEach(function (timer) {
+      return clearTimeout(timer);
+    });
+    feedbackTimers.clear();
+  }
+  return {
+    syncBlocks: syncBlocks,
+    setView: setView,
+    stepScale: stepScale,
+    resetScale: resetScale,
+    download: download,
+    handlePointerDown: handlePointerDown,
+    handlePointerMove: handlePointerMove,
+    handlePointerUp: handlePointerUp,
+    handleWheel: handleWheel,
+    showFeedback: showFeedback,
+    finishDrag: finishDrag,
+    clearFeedbackTimers: clearFeedbackTimers
+  };
+}
+/**
+ * 加载 Mermaid 库
+ */
+function loadMermaid() {
+  if (!mermaidPromise) {
+    mermaidPromise = import('mermaid/dist/mermaid.min.js').then(function (module) {
+      return module.default || module;
+    }).catch(function () {
+      mermaidPromise = null;
+      return null;
+    });
+  }
+  return mermaidPromise;
+}
+/**
+ * 生成 Mermaid 渲染 id
+ */
+function createMermaidRenderId(container, source, blockId, renderSeed, prefixCls) {
+  var suffix = blockId || "tail-" + renderSeed;
+  var scope = hashText(suffix + "\n" + (source || ''));
+  var instanceScope = getMermaidInstanceScope(container, prefixCls);
+  return "kpc-xmarkdown-mermaid-" + scope + (instanceScope ? "-" + instanceScope : '') + "-" + suffix;
+}
+/**
+ * 获取当前 XMarkdown 在局部多实例场景下的序号
+ */
+function getMermaidInstanceScope(container, prefixCls) {
+  var rootSelector = "." + prefixCls + "-xmarkdown";
+  var root = container.closest(rootSelector) || container;
+  var current = root.parentElement;
+  while (current) {
+    var roots = _Array$from(current.querySelectorAll(rootSelector));
+    var index = roots.indexOf(root);
+    if (index > -1 && roots.length > 1) {
+      return index > 0 ? String(index) : '';
+    }
+    current = current.parentElement;
+  }
+  return '';
+}
+/**
+ * 生成稳定短 hash
+ */
+function hashText(text) {
+  var hash = 2166136261;
+  for (var i = 0; i < text.length; i++) {
+    hash ^= text.charCodeAt(i);
+    hash = _Math$imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(36);
+}
+/**
+ * 获取 SVG 基础尺寸
+ */
+function getBaseSize(svg) {
+  var viewBox = svg.getAttribute('viewBox');
+  if (viewBox) {
+    var _context5;
+    var _viewBox$trim$split$m = _mapInstanceProperty(_context5 = _trimInstanceProperty(viewBox).call(viewBox).split(/\s+/)).call(_context5, Number),
+      _width = _viewBox$trim$split$m[2],
+      _height = _viewBox$trim$split$m[3];
+    if (_width > 0 && _height > 0) return {
+      width: _width,
+      height: _height
+    };
+  }
+  var width = parseSvgSize(svg.getAttribute('width'));
+  var height = parseSvgSize(svg.getAttribute('height'));
+  if (width > 0 && height > 0) return {
+    width: width,
+    height: height
+  };
+  var rect = svg.getBoundingClientRect();
+  return {
+    width: rect.width,
+    height: rect.height
+  };
+}
+/**
+ * 解析 SVG 尺寸属性
+ */
+function parseSvgSize(value) {
+  if (!value || _includesInstanceProperty(value).call(value, '%')) return 0;
+  var parsed = _Number$parseFloat(value);
+  return _Number$isFinite(parsed) ? parsed : 0;
+}
+/**
+ * 序列化 SVG 为 Data URL
+ */
+function serializeSvgAsDataUrl(svg) {
+  var clonedSvg = svg.cloneNode(true);
+  clonedSvg.removeAttribute('style');
+  clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(clonedSvg));
+}
+/**
+ * SVG 转 PNG Data URL
+ */
+function svgToPngDataUrl(_x6) {
+  return _svgToPngDataUrl.apply(this, arguments);
+}
+/**
+ * 触发下载
+ */
+function _svgToPngDataUrl() {
+  _svgToPngDataUrl = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(svg) {
+    var width, height, image, canvas, context;
+    return _regeneratorRuntime.wrap(function _callee4$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          width = Math.max(Math.round(svg.getBoundingClientRect().width || parseSvgSize(svg.getAttribute('width')) || 1), 1);
+          height = Math.max(Math.round(svg.getBoundingClientRect().height || parseSvgSize(svg.getAttribute('height')) || 1), 1);
+          image = new Image();
+          image.decoding = 'async';
+          _context6.next = 6;
+          return new _Promise(function (resolve, reject) {
+            image.onload = function () {
+              return resolve();
+            };
+            image.onerror = function () {
+              return reject(new Error('Failed to load mermaid svg'));
+            };
+            image.src = serializeSvgAsDataUrl(svg);
+          });
+        case 6:
+          canvas = document.createElement('canvas');
+          canvas.width = width;
+          canvas.height = height;
+          context = canvas.getContext('2d');
+          if (context) {
+            _context6.next = 12;
+            break;
+          }
+          throw new Error('Failed to create canvas context');
+        case 12:
+          context.fillStyle = '#ffffff';
+          context.fillRect(0, 0, width, height);
+          context.drawImage(image, 0, 0, width, height);
+          return _context6.abrupt("return", canvas.toDataURL('image/png'));
+        case 16:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee4);
+  }));
+  return _svgToPngDataUrl.apply(this, arguments);
+}
+function triggerDownload(url, filename) {
+  var anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.rel = 'noopener';
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+}
+/**
+ * 复制文本到剪贴板
+ */
+export function copyText(_x7) {
+  return _copyText.apply(this, arguments);
+}
+/**
+ * 创建隐藏的复制元素
+ */
+function _copyText() {
+  _copyText = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(text) {
+    var fakeElement, result;
+    return _regeneratorRuntime.wrap(function _callee5$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _context7.prev = 0;
+          if (!navigator.clipboard) {
+            _context7.next = 5;
+            break;
+          }
+          _context7.next = 4;
+          return navigator.clipboard.writeText(text);
+        case 4:
+          return _context7.abrupt("return", true);
+        case 5:
+          _context7.next = 9;
+          break;
+        case 7:
+          _context7.prev = 7;
+          _context7.t0 = _context7["catch"](0);
+        case 9:
+          fakeElement = createFakeElement(text);
+          document.body.appendChild(fakeElement);
+          selectValue(fakeElement);
+          try {
+            document.execCommand('copy');
+            result = true;
+          } catch (e) {
+            result = false;
+          }
+          document.body.removeChild(fakeElement);
+          return _context7.abrupt("return", result);
+        case 15:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee5, null, [[0, 7]]);
+  }));
+  return _copyText.apply(this, arguments);
+}
+function createFakeElement(value) {
+  var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+  var fakeElement = document.createElement('textarea');
+  fakeElement.style.fontSize = '12pt';
+  fakeElement.style.border = '0';
+  fakeElement.style.padding = '0';
+  fakeElement.style.margin = '0';
+  fakeElement.style.position = 'absolute';
+  fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px';
+  fakeElement.style.top = (window.pageYOffset || document.documentElement.scrollTop) + "px";
+  fakeElement.setAttribute('readonly', '');
+  fakeElement.value = value;
+  return fakeElement;
+}
+/**
+ * 数值约束
+ */
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, Math.round(value * 100) / 100));
+}
+/**
+ * 转义 HTML
+ */
+function escapeHtml(text) {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}