@midscene/visualizer 0.6.2 → 0.6.3-beta-20241017035917.0

package/dist/es/component/blackboard.js

@@ -29,8 +29,6 @@ import { DropShadowFilter } from "pixi-filters";
 import { useBlackboardPreference, useInsightDump } from "./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) => {
@@ -72,7 +70,7 @@ const BlackBoard = () => {
   const highlightElements = 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 = useRef(null);
@@ -81,7 +79,8 @@ const BlackBoard = () => {
   const highlightContainer = useMemo(() => new PIXI.Container(), []);
   const elementMarkContainer = useMemo(() => new PIXI.Container(), []);
   const pixiBgRef = useRef();
-  const { bgVisible, setBgVisible, elementsVisible, setTextsVisible } = useBlackboardPreference();
+  const { markerVisible, setMarkerVisible, elementsVisible, setTextsVisible } = useBlackboardPreference();
+  const ifMarkerAvailable = !!screenshotBase64WithElementMarker;
   useEffect(() => {
     Promise.resolve(
       (() => __async(void 0, null, function* () {
@@ -127,14 +126,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 } = useMemo(() => {
@@ -179,10 +191,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) => {
@@ -211,7 +223,15 @@ const BlackBoard = () => {
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "blackboard-filter", children: /* @__PURE__ */ jsxs("div", { className: "overlay-control", children: [
-      /* @__PURE__ */ jsx(Checkbox, { checked: bgVisible, onChange: onSetBg, children: "Screenshot" }),
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: markerVisible,
+          onChange: onSetMarkerVisible,
+          disabled: !ifMarkerAvailable,
+          children: "Marker"
+        }
+      ),
       /* @__PURE__ */ jsx(Checkbox, { checked: elementsVisible, onChange: onSetElementsVisible, children: "Elements" })
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "bottom-tip", children: bottomTipA })

package/dist/es/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/es/component/player.js

@@ -445,7 +445,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 = () => {
@@ -454,7 +454,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/es/component/replay-scripts.js

@@ -21,6 +21,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import "./player.css";
 import { mousePointer, paramStr, typeStr } from "../utils";
 const stillDuration = 1200;
+const stillAfterInsightDuration = 300;
 const locateDuration = 800;
 const actionDuration = 1e3;
 const clearInsightDuration = 200;
@@ -138,9 +139,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,
@@ -150,7 +160,7 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
         });
         scripts.push({
           type: "sleep",
-          duration: 800,
+          duration: stillAfterInsightDuration,
           title,
           subTitle
         });

package/dist/es/component/store.js

@@ -21,10 +21,10 @@ import * as Z from "zustand";
 import { generateAnimationScripts } from "./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 });
@@ -88,11 +88,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;
+              }
             }
           });
         });

package/dist/index.css

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