@bpmn-nova/studio 0.3.0-preview → 0.3.2-preview

package/dist/modules/export-svg/preview.js

@@ -0,0 +1,327 @@
+import { downloadSvg } from './render.js';
+
+function element(document, tag, className = '', text = '') {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text) node.textContent = text;
+  return node;
+}
+
+function button(document, label, className = '') {
+  const node = element(document, 'button', className, label);
+  node.type = 'button';
+  return node;
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+export class SvgExportPreviewController {
+  constructor({ container, createArtifact, title = '导出 SVG', initialTheme = 'current', onClose = null, onDownload = null } = {}) {
+    if (!container) throw new Error('SVG export preview requires a container.');
+    if (typeof createArtifact !== 'function') throw new Error('SVG export preview requires createArtifact().');
+    this.container = container;
+    this.document = container.ownerDocument;
+    this.ownerWindow = this.document.defaultView || globalThis;
+    this.createArtifact = createArtifact;
+    this.onClose = onClose;
+    this.onDownload = onDownload;
+    this.theme = ['light', 'dark'].includes(initialTheme) ? initialTheme : 'current';
+    this.transparentBackground = false;
+    this.artifact = null;
+    this.abortController = null;
+    this.objectUrl = null;
+    this.zoom = 1;
+    this.pan = { x: 0, y: 0 };
+    this.drag = null;
+    this.closed = false;
+    this._restoreFocus = this.document.activeElement instanceof this.ownerWindow.HTMLElement ? this.document.activeElement : null;
+    this._build(title);
+    this._bind();
+    this._generate();
+  }
+
+  _build(title) {
+    const document = this.document;
+    const root = element(document, 'div', 'nova-svg-export-preview is-entering');
+    root.setAttribute('role', 'dialog');
+    root.setAttribute('aria-modal', 'true');
+    root.setAttribute('aria-label', title);
+    const dialog = element(document, 'section', 'nova-svg-export-dialog');
+    const header = element(document, 'header', 'nova-svg-export-header');
+    const heading = element(document, 'div', 'nova-svg-export-heading');
+    heading.append(element(document, 'strong', '', title), element(document, 'span', '', '预览确认后下载'));
+    const close = button(document, '×', 'nova-svg-export-close');
+    close.setAttribute('aria-label', '关闭 SVG 预览');
+    header.append(heading, close);
+
+    const toolbar = element(document, 'div', 'nova-svg-export-toolbar');
+    const themeGroup = element(document, 'div', 'nova-svg-export-theme');
+    themeGroup.setAttribute('role', 'group');
+    themeGroup.setAttribute('aria-label', 'SVG 主题');
+    this.themeButtons = new Map();
+    for (const option of [{ value: 'current', label: '当前' }, { value: 'light', label: '浅色' }, { value: 'dark', label: '深色' }]) {
+      const item = button(document, option.label);
+      item.dataset.exportTheme = option.value;
+      item.addEventListener('click', () => this.setTheme(option.value));
+      themeGroup.appendChild(item);
+      this.themeButtons.set(option.value, item);
+    }
+    const transparentLabel = element(document, 'label', 'nova-svg-export-transparent');
+    const transparent = element(document, 'input');
+    transparent.type = 'checkbox';
+    transparent.addEventListener('change', () => this.setTransparentBackground(transparent.checked));
+    transparentLabel.append(transparent, document.createTextNode('透明背景'));
+    const viewportTools = element(document, 'div', 'nova-svg-export-viewport-tools');
+    const zoomOut = button(document, '−');
+    zoomOut.title = '缩小';
+    const fit = button(document, '最佳视图');
+    const actual = button(document, '1:1');
+    const zoomIn = button(document, '+');
+    zoomIn.title = '放大';
+    this.zoomText = element(document, 'span', '', '100%');
+    viewportTools.append(zoomOut, this.zoomText, zoomIn, fit, actual);
+    toolbar.append(themeGroup, transparentLabel, viewportTools);
+
+    const body = element(document, 'div', 'nova-svg-export-body');
+    const viewport = element(document, 'div', 'nova-svg-export-viewport');
+    viewport.tabIndex = 0;
+    viewport.setAttribute('aria-label', 'SVG 预览画布，可拖动和缩放');
+    const stage = element(document, 'div', 'nova-svg-export-stage');
+    const image = element(document, 'img', 'nova-svg-export-image');
+    image.alt = 'SVG 导出预览';
+    stage.appendChild(image);
+    viewport.appendChild(stage);
+    const state = element(document, 'div', 'nova-svg-export-state');
+    state.append(element(document, 'span', 'nova-svg-export-spinner'), element(document, 'strong', '', '正在生成 SVG…'));
+    body.append(viewport, state);
+
+    const warning = element(document, 'div', 'nova-svg-export-warnings');
+    warning.hidden = true;
+    const footer = element(document, 'footer', 'nova-svg-export-footer');
+    const summary = element(document, 'span', 'nova-svg-export-summary', '准备导出');
+    const actions = element(document, 'div', 'nova-svg-export-actions');
+    const cancel = button(document, '取消');
+    const retry = button(document, '重试', 'nova-svg-export-retry');
+    retry.hidden = true;
+    const confirm = button(document, '确认下载', 'is-primary');
+    confirm.disabled = true;
+    actions.append(cancel, retry, confirm);
+    footer.append(summary, actions);
+    dialog.append(header, toolbar, body, warning, footer);
+    root.appendChild(dialog);
+    this.container.appendChild(root);
+
+    Object.assign(this, { root, dialog, closeButton: close, toolbar, transparentInput: transparent, viewport, stage, image, state, warning, summary, cancelButton: cancel, retryButton: retry, confirmButton: confirm, zoomOutButton: zoomOut, zoomInButton: zoomIn, fitButton: fit, actualButton: actual });
+    this._syncThemeButtons();
+    this.ownerWindow.requestAnimationFrame(() => {
+      if (!root.isConnected) return;
+      root.classList.remove('is-entering');
+      root.classList.add('is-open');
+      close.focus({ preventScroll: true });
+    });
+  }
+
+  _bind() {
+    this.root.addEventListener('pointerdown', (event) => {
+      if (event.target === this.root) this.close();
+    });
+    this.closeButton.addEventListener('click', () => this.close());
+    this.cancelButton.addEventListener('click', () => this.close());
+    this.retryButton.addEventListener('click', () => this._generate());
+    this.confirmButton.addEventListener('click', () => {
+      if (!this.artifact) return;
+      downloadSvg(this.artifact, { document: this.document });
+      this.onDownload?.(this.artifact);
+      this.close();
+    });
+    this.zoomOutButton.addEventListener('click', () => this._zoomBy(0.85));
+    this.zoomInButton.addEventListener('click', () => this._zoomBy(1.18));
+    this.fitButton.addEventListener('click', () => this.fit());
+    this.actualButton.addEventListener('click', () => this.actualSize());
+    this.viewport.addEventListener('wheel', (event) => {
+      event.preventDefault();
+      const rect = this.viewport.getBoundingClientRect();
+      const point = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      this._setZoom(this.zoom * (event.deltaY < 0 ? 1.1 : 0.9), point);
+    }, { passive: false });
+    this.viewport.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0) return;
+      this.drag = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, pan: { ...this.pan } };
+      this.viewport.setPointerCapture?.(event.pointerId);
+      this.viewport.classList.add('is-dragging');
+    });
+    this.viewport.addEventListener('pointermove', (event) => {
+      if (!this.drag || event.pointerId !== this.drag.pointerId) return;
+      this.pan.x = this.drag.pan.x + event.clientX - this.drag.x;
+      this.pan.y = this.drag.pan.y + event.clientY - this.drag.y;
+      this._applyTransform();
+    });
+    const finishDrag = (event) => {
+      if (!this.drag || event.pointerId !== this.drag.pointerId) return;
+      if (this.viewport.hasPointerCapture?.(event.pointerId)) this.viewport.releasePointerCapture?.(event.pointerId);
+      this.drag = null;
+      this.viewport.classList.remove('is-dragging');
+    };
+    this.viewport.addEventListener('pointerup', finishDrag);
+    this.viewport.addEventListener('pointercancel', finishDrag);
+    this._keyHandler = (event) => {
+      if (!this.root?.isConnected) return;
+      if (event.key === 'Escape') { event.preventDefault(); this.close(); return; }
+      if (event.key !== 'Tab') return;
+      const focusable = [...this.dialog.querySelectorAll('button:not([disabled]):not([hidden]), input:not([disabled]), [tabindex]:not([tabindex="-1"])')].filter((node) => !node.hidden);
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable.at(-1);
+      if (event.shiftKey && this.document.activeElement === first) { event.preventDefault(); last.focus(); }
+      else if (!event.shiftKey && this.document.activeElement === last) { event.preventDefault(); first.focus(); }
+    };
+    this.document.addEventListener('keydown', this._keyHandler);
+  }
+
+  _syncThemeButtons() {
+    this.themeButtons.forEach((button, value) => {
+      const active = value === this.theme;
+      button.classList.toggle('is-active', active);
+      button.setAttribute('aria-pressed', String(active));
+    });
+  }
+
+  async _generate() {
+    if (this.closed) return;
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    const signal = this.abortController.signal;
+    this.artifact = null;
+    this.confirmButton.disabled = true;
+    this.retryButton.hidden = true;
+    this.warning.hidden = true;
+    this.root.classList.add('is-loading');
+    this.state.hidden = false;
+    this.state.classList.remove('is-error');
+    this.state.querySelector('strong').textContent = '正在生成 SVG…';
+    this.summary.textContent = '正在准备完整内容';
+    this._revokePreviewUrl();
+    this.image.removeAttribute('src');
+    try {
+      const artifact = await this.createArtifact({ theme: this.theme, transparentBackground: this.transparentBackground, signal });
+      if (signal.aborted || this.closed) return;
+      this.artifact = artifact;
+      this.objectUrl = this.ownerWindow.URL.createObjectURL(artifact.blob);
+      this.image.addEventListener('load', () => {
+        if (!this.root?.isConnected) return;
+        this.state.hidden = true;
+        this.root.classList.remove('is-loading');
+        this.fit();
+      }, { once: true });
+      this.image.src = this.objectUrl;
+      this.confirmButton.disabled = false;
+      this.summary.textContent = `${artifact.filename} · ${Math.round(artifact.width)} × ${Math.round(artifact.height)}`;
+      this._renderWarnings(artifact.warnings || []);
+    } catch (error) {
+      if (signal.aborted || this.closed) return;
+      this.root.classList.remove('is-loading');
+      this.state.hidden = false;
+      this.state.classList.add('is-error');
+      this.state.querySelector('strong').textContent = `生成失败：${error?.message || '未知错误'}`;
+      this.summary.textContent = 'SVG 尚未生成';
+      this.retryButton.hidden = false;
+    }
+  }
+
+  _renderWarnings(warnings) {
+    this.warning.replaceChildren();
+    if (!warnings.length) { this.warning.hidden = true; return; }
+    this.warning.hidden = false;
+    this.warning.appendChild(element(this.document, 'strong', '', `${warnings.length} 项内容已降级处理`));
+    const list = element(this.document, 'ul');
+    warnings.slice(0, 5).forEach((item) => list.appendChild(element(this.document, 'li', '', item.message)));
+    if (warnings.length > 5) list.appendChild(element(this.document, 'li', '', `另有 ${warnings.length - 5} 项`));
+    this.warning.appendChild(list);
+  }
+
+  _revokePreviewUrl() {
+    if (this.objectUrl) this.ownerWindow.URL.revokeObjectURL(this.objectUrl);
+    this.objectUrl = null;
+  }
+
+  _applyTransform() {
+    this.stage.style.transform = `translate(${this.pan.x}px, ${this.pan.y}px) scale(${this.zoom})`;
+    this.zoomText.textContent = `${Math.round(this.zoom * 100)}%`;
+  }
+
+  _setZoom(value, anchor = null) {
+    const next = clamp(value, 0.08, 6);
+    if (anchor) {
+      this.pan.x = anchor.x - (anchor.x - this.pan.x) * (next / this.zoom);
+      this.pan.y = anchor.y - (anchor.y - this.pan.y) * (next / this.zoom);
+    }
+    this.zoom = next;
+    this._applyTransform();
+  }
+
+  _zoomBy(factor) {
+    const rect = this.viewport.getBoundingClientRect();
+    this._setZoom(this.zoom * factor, { x: rect.width / 2, y: rect.height / 2 });
+  }
+
+  fit() {
+    if (!this.artifact) return;
+    const rect = this.viewport.getBoundingClientRect();
+    const zoom = clamp(Math.min((rect.width - 48) / this.artifact.width, (rect.height - 48) / this.artifact.height), 0.08, 2);
+    this.zoom = zoom;
+    this.pan = { x: (rect.width - this.artifact.width * zoom) / 2, y: (rect.height - this.artifact.height * zoom) / 2 };
+    this._applyTransform();
+  }
+
+  actualSize() {
+    if (!this.artifact) return;
+    const rect = this.viewport.getBoundingClientRect();
+    this.zoom = 1;
+    this.pan = { x: (rect.width - this.artifact.width) / 2, y: (rect.height - this.artifact.height) / 2 };
+    this._applyTransform();
+  }
+
+  setTheme(theme) {
+    if (!['current', 'light', 'dark'].includes(theme) || theme === this.theme) return;
+    this.theme = theme;
+    this._syncThemeButtons();
+    this._generate();
+  }
+
+  setTransparentBackground(value) {
+    const next = Boolean(value);
+    if (next === this.transparentBackground) return;
+    this.transparentBackground = next;
+    this.transparentInput.checked = next;
+    this._generate();
+  }
+
+  focus() {
+    this.closeButton?.focus?.({ preventScroll: true });
+  }
+
+  close({ immediate = false } = {}) {
+    if (this.closed) return;
+    this.closed = true;
+    this.abortController?.abort();
+    this.document.removeEventListener('keydown', this._keyHandler);
+    this._revokePreviewUrl();
+    const finalize = () => {
+      this.root?.remove();
+      this._restoreFocus?.focus?.({ preventScroll: true });
+      this.onClose?.();
+    };
+    if (immediate || this.ownerWindow.matchMedia?.('(prefers-reduced-motion: reduce)').matches) finalize();
+    else {
+      this.root.classList.remove('is-open');
+      this.root.classList.add('is-closing');
+      this.ownerWindow.setTimeout(finalize, 190);
+    }
+  }
+}
+
+export function openSvgExportPreview(options) {
+  return new SvgExportPreviewController(options);
+}