@lvce-editor/preview-sandbox-worker 3.4.0 → 4.0.0

package/dist/previewSandBoxWorkerMain.js

@@ -1129,6 +1129,60 @@ const terminate = () => {
   globalThis.close();
 };
 
+const ENTRY_SIZE = 9;
+const OFFSET_EXISTS = 0;
+const OFFSET_X = 1;
+const OFFSET_Y = 2;
+const OFFSET_TOP = 3;
+const OFFSET_LEFT = 4;
+const OFFSET_RIGHT = 5;
+const OFFSET_BOTTOM = 6;
+const OFFSET_WIDTH = 7;
+const OFFSET_HEIGHT = 8;
+const states$2 = new Map();
+const getIndex = hdId => {
+  const value = Number(hdId);
+  if (!Number.isInteger(value) || value < 0) {
+    return -1;
+  }
+  return value;
+};
+const getOffset = hdId => {
+  const index = getIndex(hdId);
+  if (index === -1) {
+    return -1;
+  }
+  return index * ENTRY_SIZE;
+};
+
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+const setGeometryBuffer = (uid, geometryBuffer) => {
+  states$2.set(uid, new Float64Array(geometryBuffer));
+};
+const getRect = (uid, hdId) => {
+  const view = states$2.get(uid);
+  if (!view) {
+    return undefined;
+  }
+  const offset = getOffset(hdId);
+  if (offset === -1 || offset + ENTRY_SIZE > view.length) {
+    return undefined;
+  }
+  if (view[offset + OFFSET_EXISTS] !== 1) {
+    return undefined;
+  }
+  return {
+    bottom: view[offset + OFFSET_BOTTOM],
+    height: view[offset + OFFSET_HEIGHT],
+    left: view[offset + OFFSET_LEFT],
+    right: view[offset + OFFSET_RIGHT],
+    top: view[offset + OFFSET_TOP],
+    width: view[offset + OFFSET_WIDTH],
+    x: view[offset + OFFSET_X],
+    y: view[offset + OFFSET_Y]
+  };
+};
+
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
 const callBacks = Object.create(null);
@@ -1343,6 +1397,20 @@ const TAGS_TO_SKIP_TAG_ONLY = new Set(['html', 'body', 'head']);
 
 // Tags where we extract content as CSS
 const CSS_TAGS = new Set(['style']);
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+const getOrCreateHdId = (node, context) => {
+  const existingHdId = node.getAttribute?.('data-id');
+  if (existingHdId) {
+    const numericValue = Number(existingHdId);
+    if (Number.isInteger(numericValue) && numericValue >= context.nextId) {
+      context.nextId = numericValue + 1;
+    }
+    return existingHdId;
+  }
+  const hdId = String(context.nextId++);
+  node.setAttribute?.('data-id', hdId);
+  return hdId;
+};
 const serializeAttributeName = attrName => {
   if (attrName === 'class') {
     return 'className';
@@ -1440,7 +1508,7 @@ const serializeNode = (node, dom, css, context) => {
   applyAllowedAttributes(newNode, node);
 
   // Assign element tracking ID for interactivity
-  const hdId = String(context.nextId++);
+  const hdId = getOrCreateHdId(node, context);
   newNode['data-id'] = hdId;
   context.elementMap[hdId] = node
 
@@ -89829,12 +89897,16 @@ const createLocalStorage = () => {
   return localStorage;
 };
 
-const getGlobals = (width, height, devicePixelRatio = 1) => {
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+
+const getGlobals = (window, width, height, devicePixelRatio = 1) => {
   const localStorage = createLocalStorage();
+  const getComputedStyle = window.getComputedStyle.bind(window);
   return {
     globalGlobals: {
       alert: alert,
       devicePixelRatio,
+      getComputedStyle,
       innerHeight: height,
       innerWidth: width,
       localStorage
@@ -89842,6 +89914,7 @@ const getGlobals = (width, height, devicePixelRatio = 1) => {
     windowGlobals: {
       alert: alert,
       devicePixelRatio,
+      getComputedStyle,
       innerHeight: height,
       innerWidth: width
     }
@@ -89938,6 +90011,10 @@ const getTopLevelFunctionNames = script => {
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
 const setGlobals = (window, globalGlobals, windowGlobals) => {
+  const globalScope = globalThis;
+  globalScope.addEventListener = window.addEventListener.bind(window);
+  globalScope.removeEventListener = window.removeEventListener.bind(window);
+  globalScope.dispatchEvent = window.dispatchEvent.bind(window);
   for (const [key, value] of Object.entries(globalGlobals)) {
     // @ts-ignore
     globalThis[key] = value;
@@ -89956,7 +90033,7 @@ const executeScripts = (window, document, scripts, width = 0, height = 0, device
   const {
     globalGlobals,
     windowGlobals
-  } = getGlobals(width, height, devicePixelRatio);
+  } = getGlobals(window, width, height, devicePixelRatio);
   setGlobals(window, globalGlobals, windowGlobals);
   let firstError = null;
   let firstCodeFrame = '';
@@ -90011,6 +90088,9 @@ const getParsedNodesChildNodeCount = parsedDom => {
 /* eslint-disable @typescript-eslint/no-floating-promises */
 
 const observers = new Map();
+const isInternalMutation = records => {
+  return records.length > 0 && records.every(record => record.type === 'attributes' && record.attributeName === 'data-id');
+};
 const handleMutations = async uid => {
   const happyDomInstance = get(uid);
   if (!happyDomInstance) {
@@ -90036,7 +90116,10 @@ const observe = (uid, document, window) => {
   if (existingObserver) {
     existingObserver.disconnect();
   }
-  const observer = new window.MutationObserver(() => {
+  const observer = new window.MutationObserver(records => {
+    if (isInternalMutation(records)) {
+      return;
+    }
     handleMutations(uid);
   });
   observer.observe(document.documentElement, {
@@ -90068,6 +90151,12 @@ const toNumber = value => {
 
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
+const toCanvasRect = rect => {
+  return {
+    ...rect,
+    toJSON: () => rect
+  };
+};
 const reflectCanvasDimensionAttribute = (element, name, value) => {
   element.setAttribute(name, String(value));
 };
@@ -90160,28 +90249,20 @@ const patchCanvasElements = async (document, uid) => {
 
     // @ts-ignore
     element.getBoundingClientRect = () => {
-      return {
+      const rect = getRect(uid, dataId);
+      if (rect) {
+        return toCanvasRect(rect);
+      }
+      return toCanvasRect({
         bottom: heightValue,
         height: heightValue,
         left: 0,
         right: widthValue,
-        toJSON: () => {
-          return {
-            bottom: heightValue,
-            height: heightValue,
-            left: 0,
-            right: widthValue,
-            top: 0,
-            width: widthValue,
-            x: 0,
-            y: 0
-          };
-        },
         top: 0,
         width: widthValue,
         x: 0,
         y: 0
-      };
+      });
     };
     instances.push({
       dataId,
@@ -90196,6 +90277,85 @@ const patchCanvasElements = async (document, uid) => {
   });
 };
 
+const toRect = rect => {
+  return {
+    ...rect,
+    toJSON: () => rect
+  };
+};
+const getCanvasDimension = (element, name) => {
+  const value = Number(element[name]);
+  if (Number.isFinite(value)) {
+    return value;
+  }
+  const attributeValue = Number(element.getAttribute?.(name) || 0);
+  if (Number.isFinite(attributeValue)) {
+    return attributeValue;
+  }
+  return 0;
+};
+const getDirectCanvasChildRect = element => {
+  const {
+    children
+  } = element;
+  if (!children) {
+    return undefined;
+  }
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const tagName = (child?.tagName || '').toLowerCase();
+    if (tagName === 'canvas' && typeof child.getBoundingClientRect === 'function') {
+      return toRect(child.getBoundingClientRect());
+    }
+  }
+  return undefined;
+};
+const getFallbackRect = element => {
+  const tagName = (element.tagName || '').toLowerCase();
+  if (tagName === 'canvas') {
+    const width = getCanvasDimension(element, 'width');
+    const height = getCanvasDimension(element, 'height');
+    return toRect({
+      bottom: height,
+      height,
+      left: 0,
+      right: width,
+      top: 0,
+      width,
+      x: 0,
+      y: 0
+    });
+  }
+  const directCanvasChildRect = getDirectCanvasChildRect(element);
+  if (directCanvasChildRect) {
+    return directCanvasChildRect;
+  }
+  return toRect({
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0
+  });
+};
+const patchElement = (uid, hdId, element) => {
+  element.getBoundingClientRect = () => {
+    const rect = getRect(uid, hdId);
+    if (rect) {
+      return toRect(rect);
+    }
+    return getFallbackRect(element);
+  };
+};
+const patchElementGeometry = (uid, elementMap) => {
+  for (const [hdId, element] of Object.entries(elementMap)) {
+    patchElement(uid, hdId, element);
+  }
+};
+
 const updateContent = async (uid, width, height, content, scripts) => {
   try {
     const {
@@ -90203,12 +90363,16 @@ const updateContent = async (uid, width, height, content, scripts) => {
       window: happyDomWindow
     } = createWindow(content);
     await patchCanvasElements(happyDomDocument, uid);
+    const initialElementMap = Object.create(null);
+    serialize(happyDomDocument, initialElementMap);
+    patchElementGeometry(uid, initialElementMap);
     const {
       codeFrame,
       error
     } = executeScripts(happyDomWindow, happyDomDocument, scripts, width, height);
     const elementMap = Object.create(null);
     serialize(happyDomDocument, elementMap);
+    patchElementGeometry(uid, elementMap);
     set$1(uid, {
       document: happyDomDocument,
       elementMap,
@@ -90279,6 +90443,7 @@ const commandMap = {
   'SandBox.handlePointerup': handlePointerup,
   'SandBox.loadContent': loadContent,
   'SandBox.resize': resize,
+  'SandBox.setGeometryBuffer': setGeometryBuffer,
   'SandBox.terminate': terminate
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/preview-sandbox-worker",
-  "version": "3.4.0",
+  "version": "4.0.0",
   "description": "Preview SandBox Worker",
   "repository": {
     "type": "git",