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

package/dist/modules/viewer/runtime-content.js

@@ -0,0 +1,123 @@
+function element(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+export function formatRuntimeAssetSize(value) {
+  const bytes = Number(value);
+  if (!Number.isFinite(bytes) || bytes < 0) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(bytes < 10240 ? 1 : 0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(bytes < 1024 * 10240 ? 1 : 0)} MB`;
+}
+
+function assetMeta(asset) {
+  return [asset.mediaType, formatRuntimeAssetSize(asset.size)].filter(Boolean).join(' · ');
+}
+
+function unavailable(target, label = '资源不可用') {
+  target.classList.add('is-unavailable');
+  target.setAttribute('aria-disabled', 'true');
+  const state = target.querySelector('.mb-runtime-asset-state');
+  if (state) state.textContent = label;
+}
+
+function renderImage({ host, asset, action, resolveAsset, onPreview, compact, alt }) {
+  const button = element('button', 'mb-runtime-asset-image is-loading');
+  button.type = 'button';
+  button.setAttribute('aria-label', `预览图片：${alt || asset.name}`);
+  const state = element('span', 'mb-runtime-asset-state', '图片加载中');
+  button.appendChild(state);
+  host.appendChild(button);
+  Promise.resolve(resolveAsset?.(asset, 'thumbnail', action)).then((url) => {
+    if (!button.isConnected) return;
+    if (!url) { unavailable(button); return; }
+    const image = document.createElement('img');
+    image.alt = alt || asset.name;
+    image.loading = 'lazy';
+    image.addEventListener('error', () => {
+      if (!button.isConnected) return;
+      button.replaceChildren(element('span', 'mb-runtime-asset-state', '资源不可用'));
+      unavailable(button);
+    }, { once: true });
+    image.src = url;
+    button.replaceChildren(image);
+    button.classList.remove('is-loading');
+    button.addEventListener('click', () => onPreview?.(asset, action));
+  }).catch(() => { if (button.isConnected) unavailable(button); });
+  if (!compact) button.title = assetMeta(asset);
+}
+
+function renderFile({ host, asset, action, resolveAsset }) {
+  const link = element('a', 'mb-runtime-asset-file is-loading');
+  link.setAttribute('aria-label', `下载附件：${asset.name}`);
+  const copy = element('span', 'mb-runtime-asset-file-copy');
+  copy.append(element('strong', '', asset.name), element('small', '', assetMeta(asset)));
+  link.append(copy, element('span', 'mb-runtime-asset-state', '准备下载'));
+  host.appendChild(link);
+  Promise.resolve(resolveAsset?.(asset, 'download', action)).then((url) => {
+    if (!link.isConnected) return;
+    if (!url) { unavailable(link); return; }
+    link.href = url;
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+    link.download = asset.name;
+    link.classList.remove('is-loading');
+    link.querySelector('.mb-runtime-asset-state').textContent = '下载';
+  }).catch(() => { if (link.isConnected) unavailable(link); });
+}
+
+export function renderRuntimeApprovalContent({
+  container,
+  action,
+  resolveAsset,
+  onPreview,
+  compact = false,
+  imageLimit = compact ? 3 : Number.POSITIVE_INFINITY,
+}) {
+  const content = action?.content || { plainText: '', blocks: [], assets: [] };
+  const assets = new Map((content.assets || []).map((asset) => [asset.id, asset]));
+  const root = element('div', `mb-runtime-action-content${compact ? ' is-compact' : ''}`);
+  const media = element('div', 'mb-runtime-action-media');
+  let imageCount = 0;
+  let rendered = 0;
+
+  (content.blocks || []).forEach((block) => {
+    if (block.type === 'paragraph') {
+      if (block.text) { root.appendChild(element('p', 'mb-runtime-action-paragraph', block.text)); rendered += 1; }
+      return;
+    }
+    if (block.type === 'image') {
+      imageCount += 1;
+      if (imageCount > imageLimit) return;
+      const asset = assets.get(block.assetId);
+      if (!asset || !asset.mediaType.startsWith('image/')) {
+        media.appendChild(element('span', 'mb-runtime-asset-unsupported', '图片资源不可用'));
+      } else {
+        renderImage({ host: media, asset, action, resolveAsset, onPreview, compact, alt: block.alt });
+      }
+      rendered += 1;
+      return;
+    }
+    if (block.type === 'file') {
+      const asset = assets.get(block.assetId);
+      if (!asset) media.appendChild(element('span', 'mb-runtime-asset-unsupported', '附件资源不可用'));
+      else renderFile({ host: media, asset, action, resolveAsset });
+      rendered += 1;
+      return;
+    }
+    root.appendChild(element('p', 'mb-runtime-asset-unsupported', `暂不支持的内容：${block.type || 'unknown'}`));
+    rendered += 1;
+  });
+
+  if (!content.blocks?.length && content.plainText) {
+    root.appendChild(element('p', 'mb-runtime-action-paragraph', content.plainText));
+    rendered += 1;
+  }
+  if (imageCount > imageLimit) media.appendChild(element('span', 'mb-runtime-asset-more', `+${imageCount - imageLimit}`));
+  if (media.childNodes.length) root.appendChild(media);
+  if (rendered || media.childNodes.length) container.appendChild(root);
+  return () => root.remove();
+}

package/dist/modules/viewer/runtime-details-motion.js

@@ -0,0 +1,228 @@
+const DRAG_SLOP = 6;
+const DISMISS_DISTANCE = 120;
+const DISMISS_DISTANCE_RATIO = 0.25;
+const DISMISS_VELOCITY = 0.65;
+const VELOCITY_WINDOW = 100;
+const EXIT_FALLBACK = 320;
+
+function prefersReducedMotion() {
+  return typeof window !== 'undefined'
+    && typeof window.matchMedia === 'function'
+    && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function clamp(value, minimum, maximum) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+export function createRuntimeDetailsMotionController({
+  layer,
+  panel,
+  handle = null,
+  placement,
+  dragToDismiss = false,
+  onDismissed,
+}) {
+  let enterFrame = 0;
+  let settleFrame = 0;
+  let settleTimer = 0;
+  let exitTimer = 0;
+  let closing = false;
+  let disposed = false;
+  let pointer = null;
+
+  const canDrag = placement === 'bottom' && dragToDismiss && handle;
+
+  const clearSettle = () => {
+    if (settleFrame) cancelAnimationFrame(settleFrame);
+    if (settleTimer) clearTimeout(settleTimer);
+    settleFrame = 0;
+    settleTimer = 0;
+    layer.classList.remove('is-settling');
+  };
+
+  const resetDragStyles = () => {
+    layer.style.removeProperty('--mb-runtime-details-drag-offset');
+    layer.style.removeProperty('--mb-runtime-details-backdrop-progress');
+    layer.classList.remove('is-dragging');
+  };
+
+  const releasePointer = () => {
+    if (pointer && handle?.hasPointerCapture?.(pointer.id)) handle.releasePointerCapture(pointer.id);
+    pointer = null;
+    document.documentElement.classList.remove('mb-runtime-details-drag-active');
+  };
+
+  const removePointerListeners = () => {
+    if (!canDrag) return;
+    handle.removeEventListener('pointerdown', onPointerDown);
+    handle.removeEventListener('pointermove', onPointerMove);
+    handle.removeEventListener('pointerup', onPointerUp);
+    handle.removeEventListener('pointercancel', onPointerCancel);
+  };
+
+  const finish = (restoreFocus) => {
+    if (disposed) return;
+    disposed = true;
+    if (enterFrame) cancelAnimationFrame(enterFrame);
+    if (exitTimer) clearTimeout(exitTimer);
+    clearSettle();
+    releasePointer();
+    removePointerListeners();
+    panel.removeEventListener('transitionend', onExitTransitionEnd);
+    onDismissed({ restoreFocus });
+  };
+
+  const onExitTransitionEnd = (event) => {
+    if (event.target !== panel || event.propertyName !== 'transform') return;
+    finish(layer.dataset.runtimeDetailsRestoreFocus === 'true');
+  };
+
+  const dismiss = ({ immediate = false, restoreFocus = true } = {}) => {
+    if (disposed) return false;
+    layer.dataset.runtimeDetailsRestoreFocus = String(restoreFocus);
+    if (immediate || prefersReducedMotion()) {
+      finish(restoreFocus);
+      return true;
+    }
+    if (closing) return false;
+    closing = true;
+    if (enterFrame) cancelAnimationFrame(enterFrame);
+    clearSettle();
+    releasePointer();
+    panel.getBoundingClientRect();
+    layer.classList.remove('is-entering', 'is-open', 'is-dragging');
+    layer.classList.add('is-closing');
+    panel.addEventListener('transitionend', onExitTransitionEnd);
+    exitTimer = window.setTimeout(() => finish(restoreFocus), EXIT_FALLBACK);
+    return true;
+  };
+
+  const settle = () => {
+    clearSettle();
+    layer.classList.remove('is-dragging');
+    if (prefersReducedMotion()) {
+      resetDragStyles();
+      return;
+    }
+    layer.classList.add('is-settling');
+    panel.getBoundingClientRect();
+    settleFrame = requestAnimationFrame(() => {
+      settleFrame = 0;
+      layer.style.setProperty('--mb-runtime-details-drag-offset', '0px');
+      layer.style.setProperty('--mb-runtime-details-backdrop-progress', '1');
+      settleTimer = window.setTimeout(() => {
+        settleTimer = 0;
+        clearSettle();
+        resetDragStyles();
+      }, 220);
+    });
+  };
+
+  const resetPointer = () => {
+    releasePointer();
+  };
+
+  function onPointerDown(event) {
+    if (disposed || closing || pointer || (event.pointerType === 'mouse' && event.button !== 0)) return;
+    clearSettle();
+    pointer = {
+      id: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      dragging: false,
+      rejected: false,
+      height: Math.max(1, panel.getBoundingClientRect().height),
+      samples: [{ time: event.timeStamp, offset: 0 }],
+    };
+    handle.setPointerCapture?.(event.pointerId);
+  }
+
+  function onPointerMove(event) {
+    if (!pointer || event.pointerId !== pointer.id || pointer.rejected) return;
+    const deltaX = event.clientX - pointer.startX;
+    const deltaY = event.clientY - pointer.startY;
+    if (!pointer.dragging) {
+      if (Math.hypot(deltaX, deltaY) < DRAG_SLOP) return;
+      if (Math.abs(deltaY) <= Math.abs(deltaX) || deltaY < 0) {
+        pointer.rejected = true;
+        resetPointer();
+        return;
+      }
+      pointer.dragging = true;
+      layer.classList.add('is-dragging');
+      document.documentElement.classList.add('mb-runtime-details-drag-active');
+    }
+    event.preventDefault();
+    const offset = Math.max(0, deltaY);
+    const progress = 1 - clamp(offset / pointer.height, 0, 1);
+    layer.style.setProperty('--mb-runtime-details-drag-offset', `${offset}px`);
+    layer.style.setProperty('--mb-runtime-details-backdrop-progress', String(progress));
+    pointer.samples.push({ time: event.timeStamp, offset });
+    const cutoff = event.timeStamp - VELOCITY_WINDOW;
+    while (pointer.samples.length > 2 && pointer.samples[0].time < cutoff) pointer.samples.shift();
+  }
+
+  function onPointerUp(event) {
+    if (!pointer || event.pointerId !== pointer.id) return;
+    const activePointer = pointer;
+    const offset = Math.max(0, event.clientY - activePointer.startY);
+    activePointer.samples.push({ time: event.timeStamp, offset });
+    const cutoff = event.timeStamp - VELOCITY_WINDOW;
+    while (activePointer.samples.length > 2 && activePointer.samples[0].time < cutoff) activePointer.samples.shift();
+    const firstSample = activePointer.samples[0];
+    const lastSample = activePointer.samples.at(-1) || firstSample;
+    const elapsed = Math.max(1, lastSample.time - firstSample.time);
+    const velocity = (lastSample.offset - firstSample.offset) / elapsed;
+    const threshold = Math.min(DISMISS_DISTANCE, activePointer.height * DISMISS_DISTANCE_RATIO);
+    const shouldDismiss = activePointer.dragging
+      && (offset >= threshold || velocity >= DISMISS_VELOCITY);
+    resetPointer();
+    if (!activePointer.dragging) return;
+    if (shouldDismiss) dismiss({ restoreFocus: true });
+    else settle();
+  }
+
+  function onPointerCancel(event) {
+    if (!pointer || event.pointerId !== pointer.id) return;
+    const wasDragging = pointer.dragging;
+    resetPointer();
+    if (wasDragging) settle();
+  }
+
+  const enter = () => {
+    if (disposed || closing) return;
+    panel.getBoundingClientRect();
+    if (prefersReducedMotion()) {
+      layer.classList.remove('is-entering');
+      layer.classList.add('is-open');
+      return;
+    }
+    enterFrame = requestAnimationFrame(() => {
+      enterFrame = 0;
+      if (disposed || closing) return;
+      layer.classList.remove('is-entering');
+      layer.classList.add('is-open');
+    });
+  };
+
+  const destroy = () => {
+    if (disposed) return;
+    disposed = true;
+    if (enterFrame) cancelAnimationFrame(enterFrame);
+    if (exitTimer) clearTimeout(exitTimer);
+    clearSettle();
+    resetPointer();
+    removePointerListeners();
+    panel.removeEventListener('transitionend', onExitTransitionEnd);
+  };
+
+  if (canDrag) {
+    handle.addEventListener('pointerdown', onPointerDown);
+    handle.addEventListener('pointermove', onPointerMove);
+    handle.addEventListener('pointerup', onPointerUp);
+    handle.addEventListener('pointercancel', onPointerCancel);
+  }
+
+  return { enter, dismiss, destroy };
+}