@vvfx/sdk 0.2.11 → 0.2.13

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.11
+ * Version: v0.2.13
  */
 
 import { math, spec, generateGUID, SpriteComponent, TextComponent, assertExist as assertExist$1, version, VFXItem, PrecompositionManager, AssetManager, FrameComponent, glContext, CompositionComponent, Texture as Texture$1, getStandardJSON, EffectComponent, Geometry as Geometry$1, Material, Player, EventEmitter as EventEmitter$1 } from '@galacean/effects';
@@ -69602,6 +69602,10 @@ function vi(t) {
     return false;
 }
 
+function serializeInlineScriptJson(value) {
+    return JSON.stringify(value).replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
+}
+
 function createAutoHeightMessageListener(iframe, options) {
     if (!(options == null ? void 0 : options.autoHeightId) || !options.onAutoHeight) {
         return function() {
@@ -69616,7 +69620,7 @@ function createAutoHeightMessageListener(iframe, options) {
             options.onAutoHeight == null ? void 0 : options.onAutoHeight.call(options, event.data.height);
             return;
         }
-        var phase = getCardHTMLStreamRuntimePhase(event.data);
+        var phase = options.streamRuntimeId ? getCardHTMLStreamRuntimePhase(event.data, options.streamRuntimeId) : undefined;
         if (phase) {
             options.onStreamRuntimePhase == null ? void 0 : options.onStreamRuntimePhase.call(options, phase);
         }
@@ -69626,15 +69630,19 @@ function createAutoHeightMessageListener(iframe, options) {
         window.removeEventListener('message', handleMessage);
     };
 }
-function getCardHTMLStreamRuntimePhase(data) {
+function getCardHTMLStreamRuntimePhase(data, expectedRuntimeId) {
     if ((typeof data === "undefined" ? "undefined" : _type_of(data)) !== 'object' || data === null) {
         return undefined;
     }
     var message = data;
-    if (message.type !== 'huamei:html-stream-runtime-status' || _type_of(message.payload) !== 'object' || message.payload === null) {
+    if (message.source !== 'vvfx-card-html-stream-runtime' || message.type !== 'huamei:html-stream-runtime-status' || _type_of(message.payload) !== 'object' || message.payload === null) {
+        return undefined;
+    }
+    var payload = message.payload;
+    if (payload.runtimeId !== expectedRuntimeId) {
         return undefined;
     }
-    var phase = message.payload.phase;
+    var phase = payload.phase;
     return [
         'parsing',
         'draining',
@@ -69662,7 +69670,7 @@ function withCardHTMLAutoHeightBridge(html, id) {
     if (!id) {
         return html;
     }
-    var script = "\n<script data-vvfx-card-html-auto-height>\n(() => {\n  const id = " + JSON.stringify(id) + ";\n  let frame = 0;\n  const getNodeHeight = (node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      if (window.getComputedStyle(node).position === 'fixed') {\n        return 0;\n      }\n      const rect = node.getBoundingClientRect();\n      return rect.bottom + window.scrollY;\n    }\n    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {\n      const range = document.createRange();\n      range.selectNodeContents(node);\n      const rects = Array.from(range.getClientRects());\n      range.detach();\n      return rects.reduce((height, rect) => Math.max(height, rect.bottom + window.scrollY), 0);\n    }\n\n    return 0;\n  };\n  const getContentHeight = (element) => {\n    if (!element) return 0;\n    return Array.from(element.childNodes).reduce((height, child) => {\n      return Math.max(height, getNodeHeight(child));\n    }, 0);\n  };\n  const getHeight = () => {\n    const body = document.body;\n    const root = document.documentElement;\n    const contentHeight = getContentHeight(body);\n    const scrollHeight = Math.max(root.scrollHeight, body ? body.scrollHeight : 0);\n    return Math.ceil(contentHeight > 0 ? contentHeight : scrollHeight);\n  };\n  const postHeight = () => {\n    frame = 0;\n    window.parent.postMessage({\n      source: 'vvfx-card-html-auto-height',\n      id,\n      height: getHeight(),\n    }, '*');\n  };\n  const schedule = () => {\n    if (frame) return;\n    frame = requestAnimationFrame(postHeight);\n  };\n  window.addEventListener('message', (event) => {\n    const message = event.data;\n    if (!message || message.source !== 'vvfx-card-html-auto-height-request' || message.id !== id) {\n      return;\n    }\n\n    schedule();\n  });\n  window.addEventListener('load', schedule);\n  window.addEventListener('resize', schedule);\n  new ResizeObserver(schedule).observe(document.documentElement);\n  if (document.body) {\n    new ResizeObserver(schedule).observe(document.body);\n    new MutationObserver(schedule).observe(document.body, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n  schedule();\n})();\n</script>";
+    var script = "\n<script data-vvfx-card-html-auto-height>\n(() => {\n  const id = " + serializeInlineScriptJson(id) + ";\n  let frame = 0;\n  const getNodeHeight = (node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      if (window.getComputedStyle(node).position === 'fixed') {\n        return 0;\n      }\n      const rect = node.getBoundingClientRect();\n      return rect.bottom + window.scrollY;\n    }\n    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {\n      const range = document.createRange();\n      range.selectNodeContents(node);\n      const rects = Array.from(range.getClientRects());\n      range.detach();\n      return rects.reduce((height, rect) => Math.max(height, rect.bottom + window.scrollY), 0);\n    }\n\n    return 0;\n  };\n  const getContentHeight = (element) => {\n    if (!element) return 0;\n    return Array.from(element.childNodes).reduce((height, child) => {\n      return Math.max(height, getNodeHeight(child));\n    }, 0);\n  };\n  const getHeight = () => {\n    const body = document.body;\n    const root = document.documentElement;\n    const contentHeight = getContentHeight(body);\n    const scrollHeight = Math.max(root.scrollHeight, body ? body.scrollHeight : 0);\n    return Math.ceil(contentHeight > 0 ? contentHeight : scrollHeight);\n  };\n  const postHeight = () => {\n    frame = 0;\n    window.parent.postMessage({\n      source: 'vvfx-card-html-auto-height',\n      id,\n      height: getHeight(),\n    }, '*');\n  };\n  const schedule = () => {\n    if (frame) return;\n    frame = requestAnimationFrame(postHeight);\n  };\n  window.addEventListener('message', (event) => {\n    const message = event.data;\n    if (!message || message.source !== 'vvfx-card-html-auto-height-request' || message.id !== id) {\n      return;\n    }\n\n    schedule();\n  });\n  window.addEventListener('load', schedule);\n  window.addEventListener('resize', schedule);\n  new ResizeObserver(schedule).observe(document.documentElement);\n  if (document.body) {\n    new ResizeObserver(schedule).observe(document.body);\n    new MutationObserver(schedule).observe(document.body, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n  schedule();\n})();\n</script>";
     if (/<\/body>/i.test(html)) {
         return html.replace(/<\/body>/i, "" + script + "</body>");
     }
@@ -69871,14 +69879,37 @@ function withCardHTMLAnchorNavigationGuard(html, allowAnchorNavigation) {
     return "" + html + script;
 }
 
+var runtimeSequence = 0;
+function createCardHTMLRuntimeId(cardId) {
+    runtimeSequence += 1;
+    return (cardId || 'card') + ":" + runtimeSequence;
+}
+function withCardHTMLRuntimeContext(html, runtimeId) {
+    var script = "<script data-vvfx-card-html-runtime-context>window.__VVFX_CARD_HTML_RUNTIME_ID__=" + serializeInlineScriptJson(runtimeId) + ";</script>";
+    if (/<head(?:\s[^>]*)?>/i.test(html)) {
+        return html.replace(/<head(\s[^>]*)?>/i, function(match) {
+            return "" + match + script;
+        });
+    }
+    if (/<html(?:\s[^>]*)?>/i.test(html)) {
+        return html.replace(/<html(\s[^>]*)?>/i, function(match) {
+            return match + "<head>" + script + "</head>";
+        });
+    }
+    return "<!doctype html><html><head>" + script + "</head><body>" + html + "</body></html>";
+}
+
 function renderDocumentContent(overlay, content, options) {
     var _files_get;
     var iframe = document.createElement('iframe');
     var files = normalizeDocumentFiles(content.files);
     var entry = normalizePath(content.entry);
     var createFileUrl = createDocumentFileUrlFactory(files);
+    var streamRuntimeId = createCardHTMLRuntimeId(options == null ? void 0 : options.autoHeightId);
     var messageCleanup = createHostMessageListener(iframe, content);
-    var autoHeightMessageCleanup = createAutoHeightMessageListener(iframe, options);
+    var autoHeightMessageCleanup = createAutoHeightMessageListener(iframe, _extends({}, options, {
+        streamRuntimeId: streamRuntimeId
+    }));
     iframe.style.width = '100%';
     iframe.style.height = '100%';
     iframe.style.border = '0';
@@ -69889,7 +69920,7 @@ function renderDocumentContent(overlay, content, options) {
         iframe.setAttribute('sandbox', content.sandbox);
     }
     var entryHtml = (_files_get = files.get(entry)) != null ? _files_get : '';
-    iframe.srcdoc = withCardHTMLAutoHeightBridge(withCardHTMLAnchorNavigationGuard(withCardHTMLViewportStyle(transformHTMLDocument(entry, entryHtml, createFileUrl)), content.allowAnchorNavigation), options == null ? void 0 : options.autoHeightId);
+    iframe.srcdoc = withCardHTMLAutoHeightBridge(withCardHTMLAnchorNavigationGuard(withCardHTMLRuntimeContext(withCardHTMLViewportStyle(transformHTMLDocument(entry, entryHtml, createFileUrl)), streamRuntimeId), content.allowAnchorNavigation), options == null ? void 0 : options.autoHeightId);
     overlay.appendChild(iframe);
     return function() {
         messageCleanup();
@@ -70484,6 +70515,7 @@ var EDITING_VIEWPORT_PADDING = 48;
 var EDITING_VIEWPORT_BOX_SCALE = 1.1;
 var AUTO_HEIGHT_EPSILON = 0.5;
 var AUTO_HEIGHT_MAX_MULTIPLIER = 32;
+var AUTO_HEIGHT_FEEDBACK_STEP_LIMIT = 2;
 var CARD_RASTERIZE_READY_TIMEOUT = 3000;
 var CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
 var requestHTMLOverlayFrame = function requestHTMLOverlayFrame(callback) {
@@ -70531,6 +70563,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             autoHeightCleanups: new Map(),
             autoHeightFrames: new Map(),
             autoHeightInitialHeights: new Map(),
+            autoHeightFeedback: new Map(),
             autoHeightStreamPhases: new Map()
         };
         this.handleContainerDoubleClick = function(event) {
@@ -70684,6 +70717,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         });
         this.state.autoHeightFrames.clear();
         this.state.autoHeightInitialHeights.clear();
+        this.state.autoHeightFeedback.clear();
         this.state.autoHeightStreamPhases.clear();
         this.eventCleanups.forEach(function(cleanup) {
             cleanup();
@@ -71982,6 +72016,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             cancelHTMLOverlayFrame(frame);
             this.state.autoHeightFrames.delete(id);
         }
+        this.state.autoHeightFeedback.delete(id);
     };
     _proto.applyAutoHeight = function applyAutoHeight(id, height) {
         var item = this.options.getItems().find(function(candidate) {
@@ -72001,11 +72036,30 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
             return;
         }
+        if (this.isAutoHeightFeedbackLoop(id, item.property.height, nextHeight)) {
+            return;
+        }
         this.options.setCardItemHeight(id, nextHeight, {
             anchor: this.getAutoHeightAnchor(item),
             previousHeight: item.property.height
         });
     };
+    _proto.isAutoHeightFeedbackLoop = function isAutoHeightFeedbackLoop(id, currentHeight, nextHeight) {
+        if (nextHeight <= currentHeight) {
+            this.state.autoHeightFeedback.delete(id);
+            return false;
+        }
+        var offset = nextHeight - currentHeight;
+        var previous = this.state.autoHeightFeedback.get(id);
+        var continues = previous !== undefined && Math.abs(previous.nextHeight - currentHeight) <= AUTO_HEIGHT_EPSILON && Math.abs(previous.offset - offset) <= AUTO_HEIGHT_EPSILON;
+        var steps = continues ? previous.steps + 1 : 0;
+        this.state.autoHeightFeedback.set(id, {
+            nextHeight: nextHeight,
+            offset: offset,
+            steps: steps
+        });
+        return steps >= AUTO_HEIGHT_FEEDBACK_STEP_LIMIT;
+    };
     _proto.setAutoHeightStreamPhase = function setAutoHeightStreamPhase(id, phase) {
         if (phase === 'parsing' || phase === 'draining' || phase === 'finalizing') {
             this.state.autoHeightStreamPhases.set(id, phase);