@vvfx/sdk 0.2.8 → 0.2.10

package/dist/gesture-handler/src/icons.js

@@ -0,0 +1,24 @@
+const assetsPrefix = 'https://mdn.alipayobjects.com/rms/uri/file/as/0.0.6';
+export const cursorMap = {
+    normal: { type: 'preset', content: 'default' },
+    rotation: { type: 'svg', content: 'default', url: `${assetsPrefix}/icons/cursor-rotate-32.svg` },
+    circle: { type: 'svg', content: 'default', url: `${assetsPrefix}/icons/cursor-rotate-32.svg` },
+    scale: { type: 'svg', content: 'default', url: `${assetsPrefix}/icons/cursor-scale-32.svg` },
+    hand: { type: 'preset', content: 'grab' },
+    pointer: { type: 'preset', content: 'pointer' },
+    'text-create': { type: 'preset', content: 'text' },
+    'active-hand': { type: 'preset', content: 'grabbing' },
+    'frame-create': { type: 'preset', content: 'crosshair' },
+    'box-select': { type: 'preset', content: 'crosshair' },
+    'text-rotation': { type: 'svg', content: 'default', url: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*R722QoloC44AAAAAKkAAAAgAev-aAQ/original' },
+};
+export async function loadCursorIcons() {
+    const cursorIconLoaders = Object.entries(cursorMap)
+        .filter((entry) => Boolean(entry[1].url))
+        .map(([key, value]) => fetch(value.url)
+        .then(res => res.text())
+        .then(text => cursorMap[key] = { ...value, content: text }));
+    await Promise.all(cursorIconLoaders).catch((e) => {
+        console.error(e);
+    });
+}

package/dist/gesture-handler/utils.js

@@ -0,0 +1,40 @@
+import { Text } from '../wireframe';
+// 截断逻辑
+export function processText(textContent, style, width, maxLines) {
+    const lines = [];
+    let currentLine = '';
+    const chars = textContent.split('');
+    const tempText = new Text('', style);
+    for (let i = 0; i < chars.length; i++) {
+        const char = chars[i];
+        const testLine = currentLine + char;
+        tempText.text = testLine;
+        // 宽度检查
+        if (tempText.width > width) {
+            lines.push(currentLine);
+            // 行数检查
+            if (lines.length >= maxLines) {
+                // 最后一行添加...
+                const lastLine = lines[maxLines - 1];
+                if (lastLine.length > 2) {
+                    lines[maxLines - 1] = lastLine.slice(0, -2) + '...';
+                }
+                else {
+                    lines[maxLines - 1] = '...';
+                }
+                break;
+            }
+            currentLine = char;
+        }
+        else {
+            currentLine = testLine;
+        }
+        // 处理最后一行
+        if (i === chars.length - 1 && currentLine) {
+            lines.push(currentLine);
+        }
+    }
+    // 限制行数
+    const displayLines = lines.slice(0, maxLines);
+    return displayLines.join('\n');
+}

package/dist/html-overlay/anchor-navigation-runtime.js

@@ -0,0 +1,27 @@
+export function withCardHTMLAnchorNavigationGuard(html, allowAnchorNavigation) {
+    if (allowAnchorNavigation === true) {
+        return html;
+    }
+    const script = `
+<script data-vvfx-card-html-anchor-navigation-guard>
+(() => {
+  document.addEventListener('click', event => {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      return;
+    }
+
+    const anchor = target.closest('a[href]');
+    if (!anchor) {
+      return;
+    }
+
+    event.preventDefault();
+  }, true);
+})();
+</script>`;
+    if (/<\/body>/i.test(html)) {
+        return html.replace(/<\/body>/i, `${script}</body>`);
+    }
+    return `${html}${script}`;
+}

package/dist/html-overlay/auto-height-layout.d.ts

@@ -0,0 +1,6 @@
+export declare function resolveTopAnchoredCardPosition({ nextHeight, position, previousHeight, scaleY, }: {
+    nextHeight: number;
+    position: [number, number];
+    previousHeight: number;
+    scaleY: number;
+}): [number, number];

package/dist/html-overlay/auto-height-layout.js

@@ -0,0 +1,7 @@
+export function resolveTopAnchoredCardPosition({ nextHeight, position, previousHeight, scaleY, }) {
+    const normalizedScaleY = Number.isFinite(scaleY) ? scaleY : 1;
+    return [
+        position[0],
+        position[1] + (nextHeight - previousHeight) * normalizedScaleY / 2,
+    ];
+}

package/dist/html-overlay/auto-height-runtime.js

@@ -0,0 +1,132 @@
+export function createAutoHeightMessageListener(iframe, options) {
+    if (!options?.autoHeightId || !options.onAutoHeight) {
+        return () => {
+            // pass
+        };
+    }
+    const handleMessage = (event) => {
+        if (event.source !== iframe.contentWindow) {
+            return;
+        }
+        if (isCardHTMLAutoHeightMessage(event.data, options.autoHeightId)) {
+            options.onAutoHeight?.(event.data.height);
+            return;
+        }
+        const phase = getCardHTMLStreamRuntimePhase(event.data);
+        if (phase) {
+            options.onStreamRuntimePhase?.(phase);
+        }
+    };
+    window.addEventListener('message', handleMessage);
+    return () => {
+        window.removeEventListener('message', handleMessage);
+    };
+}
+export function getCardHTMLStreamRuntimePhase(data) {
+    if (typeof data !== 'object' || data === null) {
+        return undefined;
+    }
+    const message = data;
+    if (message.type !== 'huamei:html-stream-runtime-status' || typeof message.payload !== 'object' || message.payload === null) {
+        return undefined;
+    }
+    const phase = message.payload.phase;
+    return ['parsing', 'draining', 'complete', 'finalizing', 'disposed', 'error'].includes(String(phase))
+        ? phase
+        : undefined;
+}
+export function isCardHTMLAutoHeightMessage(data, id) {
+    if (typeof data !== 'object' || data === null) {
+        return false;
+    }
+    const message = data;
+    return message.source === 'vvfx-card-html-auto-height' &&
+        message.id === id &&
+        typeof message.height === 'number';
+}
+export function requestCardHTMLAutoHeight(iframe, id) {
+    iframe.contentWindow?.postMessage({
+        source: 'vvfx-card-html-auto-height-request',
+        id,
+    }, '*');
+}
+export function withCardHTMLAutoHeightBridge(html, id) {
+    if (!id) {
+        return html;
+    }
+    const script = `
+<script data-vvfx-card-html-auto-height>
+(() => {
+  const id = ${JSON.stringify(id)};
+  let frame = 0;
+  const getNodeHeight = (node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      if (window.getComputedStyle(node).position === 'fixed') {
+        return 0;
+      }
+      const rect = node.getBoundingClientRect();
+      return rect.bottom + window.scrollY;
+    }
+    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
+      const range = document.createRange();
+      range.selectNodeContents(node);
+      const rects = Array.from(range.getClientRects());
+      range.detach();
+      return rects.reduce((height, rect) => Math.max(height, rect.bottom + window.scrollY), 0);
+    }
+
+    return 0;
+  };
+  const getContentHeight = (element) => {
+    if (!element) return 0;
+    return Array.from(element.childNodes).reduce((height, child) => {
+      return Math.max(height, getNodeHeight(child));
+    }, 0);
+  };
+  const getHeight = () => {
+    const body = document.body;
+    const root = document.documentElement;
+    const contentHeight = getContentHeight(body);
+    const scrollHeight = Math.max(root.scrollHeight, body ? body.scrollHeight : 0);
+    return Math.ceil(contentHeight > 0 ? contentHeight : scrollHeight);
+  };
+  const postHeight = () => {
+    frame = 0;
+    window.parent.postMessage({
+      source: 'vvfx-card-html-auto-height',
+      id,
+      height: getHeight(),
+    }, '*');
+  };
+  const schedule = () => {
+    if (frame) return;
+    frame = requestAnimationFrame(postHeight);
+  };
+  window.addEventListener('message', (event) => {
+    const message = event.data;
+    if (!message || message.source !== 'vvfx-card-html-auto-height-request' || message.id !== id) {
+      return;
+    }
+
+    schedule();
+  });
+  window.addEventListener('load', schedule);
+  window.addEventListener('resize', schedule);
+  new ResizeObserver(schedule).observe(document.documentElement);
+  if (document.body) {
+    new ResizeObserver(schedule).observe(document.body);
+    new MutationObserver(schedule).observe(document.body, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+  }
+  schedule();
+})();
+</script>`;
+    if (/<\/body>/i.test(html)) {
+        return html.replace(/<\/body>/i, `${script}</body>`);
+    }
+    return `${html}${script}`;
+}

package/dist/html-overlay/document-runtime.js

@@ -0,0 +1,71 @@
+import { createAutoHeightMessageListener, withCardHTMLAutoHeightBridge } from './auto-height-runtime';
+import { createDocumentFileUrlFactory, normalizeDocumentFiles, transformHTMLDocument } from './document-transform';
+import { createHostMessageListener } from './host-message-runtime';
+import { normalizePath } from './path-utils';
+import { withCardHTMLViewportStyle } from './html-viewport-style';
+import { withCardHTMLAnchorNavigationGuard } from './anchor-navigation-runtime';
+export function renderDocumentContent(overlay, content, options) {
+    const iframe = document.createElement('iframe');
+    const files = normalizeDocumentFiles(content.files);
+    const entry = normalizePath(content.entry);
+    const createFileUrl = createDocumentFileUrlFactory(files);
+    const messageCleanup = createHostMessageListener(iframe, content);
+    const autoHeightMessageCleanup = createAutoHeightMessageListener(iframe, options);
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+    iframe.style.border = '0';
+    iframe.style.display = 'block';
+    if (content.sandbox === true || content.sandbox === undefined) {
+        iframe.setAttribute('sandbox', 'allow-scripts');
+    }
+    else if (typeof content.sandbox === 'string') {
+        iframe.setAttribute('sandbox', content.sandbox);
+    }
+    const entryHtml = files.get(entry) ?? '';
+    iframe.srcdoc = withCardHTMLAutoHeightBridge(withCardHTMLAnchorNavigationGuard(withCardHTMLViewportStyle(transformHTMLDocument(entry, entryHtml, createFileUrl)), content.allowAnchorNavigation), options?.autoHeightId);
+    overlay.appendChild(iframe);
+    return () => {
+        messageCleanup();
+        autoHeightMessageCleanup();
+        iframe.remove();
+    };
+}
+export function renderDOMContentInIframe(overlay, render, cleanup) {
+    const iframe = document.createElement('iframe');
+    let mount;
+    let disposed = false;
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+    iframe.style.border = '0';
+    iframe.style.display = 'block';
+    const handleLoad = () => {
+        if (disposed) {
+            return;
+        }
+        if (mount) {
+            cleanup?.(mount);
+            mount = undefined;
+        }
+        const doc = iframe.contentDocument;
+        if (!doc?.body) {
+            return;
+        }
+        mount = doc.createElement('div');
+        mount.style.width = '100%';
+        mount.style.height = '100%';
+        doc.body.appendChild(mount);
+        render(mount);
+    };
+    iframe.addEventListener('load', handleLoad);
+    overlay.appendChild(iframe);
+    iframe.srcdoc = withCardHTMLViewportStyle('');
+    return () => {
+        disposed = true;
+        iframe.removeEventListener('load', handleLoad);
+        if (mount) {
+            cleanup?.(mount);
+            mount = undefined;
+        }
+        iframe.remove();
+    };
+}

package/dist/html-overlay/document-transform.js

@@ -0,0 +1,96 @@
+import { createDataUrl, getMimeType } from './mime-utils';
+import { normalizePath, resolvePath, shouldRewriteResource, splitResourcePath } from './path-utils';
+export function normalizeDocumentFiles(files) {
+    return new Map(Object.entries(files).map(([path, source]) => [normalizePath(path), source]));
+}
+export function createDocumentFileUrlFactory(files) {
+    const urlCache = new Map();
+    const resolving = new Set();
+    const createFileUrl = (rawPath, fromPath) => {
+        const { path, suffix } = splitResourcePath(rawPath);
+        const resolvedPath = resolvePath(path, fromPath);
+        if (!files.has(resolvedPath)) {
+            return rawPath;
+        }
+        let url = urlCache.get(resolvedPath);
+        if (!url) {
+            const source = files.get(resolvedPath) ?? '';
+            const transformedSource = resolving.has(resolvedPath)
+                ? source
+                : transformDocumentFile(resolvedPath, source, createFileUrl, resolving);
+            url = createDataUrl(transformedSource, getMimeType(resolvedPath));
+            urlCache.set(resolvedPath, url);
+        }
+        return `${url}${suffix}`;
+    };
+    return createFileUrl;
+}
+export function transformDocumentFile(path, source, createFileUrl, resolving = new Set()) {
+    resolving.add(path);
+    try {
+        if (path.endsWith('.css')) {
+            return transformCSSDocument(path, source, createFileUrl);
+        }
+        if (path.endsWith('.js') || path.endsWith('.mjs')) {
+            return transformJSDocument(path, source, createFileUrl);
+        }
+        if (path.endsWith('.html') || path.endsWith('.htm')) {
+            return transformHTMLDocument(path, source, createFileUrl);
+        }
+        return source;
+    }
+    finally {
+        resolving.delete(path);
+    }
+}
+export function transformHTMLDocument(path, source, createFileUrl) {
+    return source
+        .replace(/\b(src|href)=("|')([^"']+)\2/g, (match, attr, quote, url) => {
+        if (!shouldRewriteResource(url)) {
+            return match;
+        }
+        return `${attr}=${quote}${createFileUrl(url, path)}${quote}`;
+    })
+        .replace(/<style\b([^>]*)>([\s\S]*?)<\/style>/gi, (_match, attrs, css) => {
+        return `<style${attrs}>${transformCSSDocument(path, css, createFileUrl)}</style>`;
+    })
+        .replace(/<script\b([^>]*)>([\s\S]*?)<\/script>/gi, (_match, attrs, js) => {
+        return `<script${attrs}>${transformJSDocument(path, js, createFileUrl)}</script>`;
+    });
+}
+export function transformCSSDocument(path, source, createFileUrl) {
+    return source
+        .replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/g, (match, quote, url) => {
+        if (!shouldRewriteResource(url)) {
+            return match;
+        }
+        return `url(${quote}${createFileUrl(url, path)}${quote})`;
+    })
+        .replace(/@import\s+(?:url\()?(['"])([^'"]+)\1\)?/g, (match, quote, url) => {
+        if (!shouldRewriteResource(url)) {
+            return match;
+        }
+        return `@import ${quote}${createFileUrl(url, path)}${quote}`;
+    });
+}
+export function transformJSDocument(path, source, createFileUrl) {
+    return source
+        .replace(/\bfrom\s+(['"])([^'"]+)\1/g, (match, quote, url) => {
+        if (!shouldRewriteResource(url)) {
+            return match;
+        }
+        return `from ${quote}${createFileUrl(url, path)}${quote}`;
+    })
+        .replace(/\bimport\s+(['"])([^'"]+)\1/g, (match, quote, url) => {
+        if (!shouldRewriteResource(url)) {
+            return match;
+        }
+        return `import ${quote}${createFileUrl(url, path)}${quote}`;
+    })
+        .replace(/\bimport\(\s*(['"])([^'"]+)\1\s*\)/g, (match, quote, url) => {
+        if (!shouldRewriteResource(url)) {
+            return match;
+        }
+        return `import(${quote}${createFileUrl(url, path)}${quote})`;
+    });
+}

package/dist/html-overlay/dom-order.js

@@ -0,0 +1,8 @@
+export function syncElementStackOrder(_container, elements) {
+    elements.forEach((element, index) => {
+        const zIndex = `${index + 1}`;
+        if (element.style.zIndex !== zIndex) {
+            element.style.zIndex = zIndex;
+        }
+    });
+}

package/dist/html-overlay/host-message-runtime.js

@@ -0,0 +1,24 @@
+export function createHostMessageListener(iframe, content) {
+    if (!content.allowHostMessaging || !content.onMessage) {
+        return () => {
+            // pass
+        };
+    }
+    const handleMessage = (event) => {
+        if (event.source !== iframe.contentWindow || !isCardHTMLDocumentMessage(event.data)) {
+            return;
+        }
+        content.onMessage?.(event.data);
+    };
+    window.addEventListener('message', handleMessage);
+    return () => {
+        window.removeEventListener('message', handleMessage);
+    };
+}
+export function isCardHTMLDocumentMessage(data) {
+    if (typeof data !== 'object' || data === null) {
+        return false;
+    }
+    const message = data;
+    return message.source === 'vvfx-card-html' && typeof message.type === 'string';
+}