@midscene/visualizer 0.6.2 → 0.6.3-beta-20241017035917.0

package/dist/lib/component/blackboard.js

@@ -63,8 +63,6 @@ var import_pixi_filters = require("pixi-filters");
 var import_store = require("./store");
 const itemFillAlpha = 0.4;
 const highlightAlpha = 0.4;
-const bgOnAlpha = 1;
-const bgOffAlpha = 0.3;
 const noop = () => {
 };
 const rectMarkForItem = (rect, name, ifHighlight, onPointOver, onPointerOut) => {
@@ -106,7 +104,7 @@ const BlackBoard = () => {
   const highlightElements = (0, import_store.useInsightDump)((store) => store.highlightElements);
   const highlightIds = highlightElements.map((e) => e.id);
   const { context } = dump;
-  const { size, screenshotBase64 } = context;
+  const { size, screenshotBase64, screenshotBase64WithElementMarker } = context;
   const screenWidth = size.width;
   const screenHeight = size.height;
   const domRef = (0, import_react.useRef)(null);
@@ -115,7 +113,8 @@ const BlackBoard = () => {
   const highlightContainer = (0, import_react.useMemo)(() => new PIXI.Container(), []);
   const elementMarkContainer = (0, import_react.useMemo)(() => new PIXI.Container(), []);
   const pixiBgRef = (0, import_react.useRef)();
-  const { bgVisible, setBgVisible, elementsVisible, setTextsVisible } = (0, import_store.useBlackboardPreference)();
+  const { markerVisible, setMarkerVisible, elementsVisible, setTextsVisible } = (0, import_store.useBlackboardPreference)();
+  const ifMarkerAvailable = !!screenshotBase64WithElementMarker;
   (0, import_react.useEffect)(() => {
     Promise.resolve(
       (() => __async(void 0, null, function* () {
@@ -161,14 +160,27 @@ const BlackBoard = () => {
       if (!app.stage)
         return;
       const screenshotTexture = PIXI.Texture.from(img);
-      const screenshotSprite = new PIXI.Sprite(screenshotTexture);
-      screenshotSprite.x = 0;
-      screenshotSprite.y = 0;
-      screenshotSprite.width = screenWidth;
-      screenshotSprite.height = screenHeight;
-      app.stage.addChildAt(screenshotSprite, 0);
-      pixiBgRef.current = screenshotSprite;
-      screenshotSprite.alpha = bgVisible ? bgOnAlpha : bgOffAlpha;
+      const backgroundSprite = new PIXI.Sprite(screenshotTexture);
+      backgroundSprite.x = 0;
+      backgroundSprite.y = 0;
+      backgroundSprite.width = screenWidth;
+      backgroundSprite.height = screenHeight;
+      app.stage.addChildAt(backgroundSprite, 0);
+      if (ifMarkerAvailable) {
+        const markerImg = new Image();
+        markerImg.src = screenshotBase64WithElementMarker;
+        markerImg.onload = () => {
+          const markerTexture = PIXI.Texture.from(markerImg);
+          const markerSprite = new PIXI.Sprite(markerTexture);
+          markerSprite.x = 0;
+          markerSprite.y = 0;
+          markerSprite.width = screenWidth;
+          markerSprite.height = screenHeight;
+          app.stage.addChildAt(markerSprite, 1);
+          pixiBgRef.current = markerSprite;
+          markerSprite.visible = markerVisible;
+        };
+      }
     };
   }, [app.stage, appInitialed]);
   const { highlightElementRects } = (0, import_react.useMemo)(() => {
@@ -213,10 +225,10 @@ const BlackBoard = () => {
     // bgVisible,
     // elementsVisible,
   ]);
-  const onSetBg = (e) => {
-    setBgVisible(e.target.checked);
+  const onSetMarkerVisible = (e) => {
+    setMarkerVisible(e.target.checked);
     if (pixiBgRef.current) {
-      pixiBgRef.current.alpha = e.target.checked ? bgOnAlpha : bgOffAlpha;
+      pixiBgRef.current.visible = e.target.checked;
     }
   };
   const onSetElementsVisible = (e) => {
@@ -245,7 +257,15 @@ const BlackBoard = () => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blackboard-filter", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "overlay-control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: bgVisible, onChange: onSetBg, children: "Screenshot" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_antd.Checkbox,
+        {
+          checked: markerVisible,
+          onChange: onSetMarkerVisible,
+          disabled: !ifMarkerAvailable,
+          children: "Marker"
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: elementsVisible, onChange: onSetElementsVisible, children: "Elements" })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-tip", children: bottomTipA })

package/dist/lib/component/player.css

@@ -2,7 +2,7 @@
   width: fit-content;
   max-width: 100%;
   max-height: 100%;
-  padding: 12px;
+  padding: 12px 0;
   padding-bottom: 0;
   background: #434443DD;
   box-sizing: border-box;
@@ -20,6 +20,7 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  padding: 0 12px;
 }
 .player-container .canvas-container canvas {
   max-width: 100%;
@@ -54,6 +55,7 @@
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
+  padding: 0 12px;
 }
 .player-container .player-controls .status-icon {
   transition: 0.2s;

package/dist/lib/component/player.js

@@ -476,7 +476,7 @@ const Player = () => {
         const totalDuration = scripts.reduce((acc, item) => {
           return acc + item.duration + (item.insightCameraDuration || 0);
         }, 0);
-        const progressUpdateInterval = 300;
+        const progressUpdateInterval = 200;
         const startTime = performance.now();
         setAnimationProgress(0);
         const updateProgress = () => {
@@ -485,7 +485,9 @@ const Player = () => {
             1
           );
           setAnimationProgress(progress);
-          return timeout(updateProgress, progressUpdateInterval);
+          if (progress < 1) {
+            return timeout(updateProgress, progressUpdateInterval);
+          }
         };
         frame(updateProgress);
         for (const index in scripts) {

package/dist/lib/component/replay-scripts.js

@@ -44,6 +44,7 @@ module.exports = __toCommonJS(replay_scripts_exports);
 var import_player = require("./player.css");
 var import_utils = require("../utils");
 const stillDuration = 1200;
+const stillAfterInsightDuration = 300;
 const locateDuration = 800;
 const actionDuration = 1e3;
 const clearInsightDuration = 200;
@@ -161,9 +162,18 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
           throw new Error("insight dump is required");
         }
         const insightContentLength = insightDump.context.content.length;
+        if (insightDump.context.screenshotBase64WithElementMarker) {
+          scripts.push({
+            type: "img",
+            img: insightDump.context.screenshotBase64,
+            duration: stillAfterInsightDuration,
+            title,
+            subTitle
+          });
+        }
         scripts.push({
           type: "insight",
-          img: insightDump.context.screenshotBase64,
+          img: insightDump.context.screenshotBase64WithElementMarker || insightDump.context.screenshotBase64,
           insightDump,
           camera: currentCameraState === fullPageCameraState || !insightCameraState ? void 0 : mergeTwoCameraState(currentCameraState, insightCameraState),
           duration: insightContentLength > 20 ? locateDuration : locateDuration * 0.5,
@@ -173,7 +183,7 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
         });
         scripts.push({
           type: "sleep",
-          duration: 800,
+          duration: stillAfterInsightDuration,
           title,
           subTitle
         });

package/dist/lib/component/store.js

@@ -55,10 +55,10 @@ var Z = __toESM(require("zustand"));
 var import_replay_scripts = require("./replay-scripts");
 const { create } = Z;
 const useBlackboardPreference = create((set) => ({
-  bgVisible: true,
+  markerVisible: true,
   elementsVisible: true,
-  setBgVisible: (visible) => {
-    set({ bgVisible: visible });
+  setMarkerVisible: (visible) => {
+    set({ markerVisible: visible });
   },
   setTextsVisible: (visible) => {
     set({ elementsVisible: visible });
@@ -122,11 +122,13 @@ const useExecutionDump = create((set, get) => {
         let height = 0;
         dump.executions.forEach((execution) => {
           execution.tasks.forEach((task) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
             if (task.type === "Insight") {
               const insightTask = task;
-              width = ((_d = (_c = (_b = (_a = insightTask.log) == null ? void 0 : _a.dump) == null ? void 0 : _b.context) == null ? void 0 : _c.size) == null ? void 0 : _d.width) || 1920;
-              height = ((_h = (_g = (_f = (_e = insightTask.log) == null ? void 0 : _e.dump) == null ? void 0 : _f.context) == null ? void 0 : _g.size) == null ? void 0 : _h.height) || 1080;
+              if ((_d = (_c = (_b = (_a = insightTask.log) == null ? void 0 : _a.dump) == null ? void 0 : _b.context) == null ? void 0 : _c.size) == null ? void 0 : _d.width) {
+                width = (_h = (_g = (_f = (_e = insightTask.log) == null ? void 0 : _e.dump) == null ? void 0 : _f.context) == null ? void 0 : _g.size) == null ? void 0 : _h.width;
+                height = (_l = (_k = (_j = (_i = insightTask.log) == null ? void 0 : _i.dump) == null ? void 0 : _j.context) == null ? void 0 : _k.size) == null ? void 0 : _l.height;
+              }
             }
           });
         });