@midscene/visualizer 0.6.1 → 0.6.2

package/dist/es/component/player.js

@@ -40,10 +40,7 @@ import * as PIXI from "pixi.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import "./player.css";
 import { mouseLoading, mousePointer } from "../utils";
-import {
-  LoadingOutlined,
-  PlayCircleOutlined
-} from "@ant-design/icons";
+import { CaretRightOutlined, LoadingOutlined } from "@ant-design/icons";
 import { ConfigProvider, Spin } from "antd";
 import { rectMarkForItem } from "./blackboard";
 import { useExecutionDump } from "./store";
@@ -68,7 +65,7 @@ const linear = (t) => {
 const sleep = (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
-const ERROR_FRAME_CANCEL = "frame cancel";
+const ERROR_FRAME_CANCEL = "frame cancel (this is an error on purpose)";
 const frameKit = () => {
   let cancelFlag = false;
   return {
@@ -95,7 +92,6 @@ const frameKit = () => {
       }, ms);
     },
     cancel: () => {
-      console.log("set frame cancel");
       cancelFlag = true;
     }
   };
@@ -109,13 +105,16 @@ const Player = () => {
   var _a;
   const [titleText, setTitleText] = useState("");
   const [subTitleText, setSubTitleText] = useState("");
-  const scripts = useExecutionDump((store) => store.activeExecutionAnimation);
-  const imageWidth = useExecutionDump(
-    (store) => store.activeExecutionScreenshotWidth
+  const taskScripts = useExecutionDump(
+    (store) => store.activeExecutionAnimation
   );
-  const imageHeight = useExecutionDump(
-    (store) => store.activeExecutionScreenshotHeight
+  const replayAllMode = useExecutionDump((store) => store.replayAllMode);
+  const replayAllScripts = useExecutionDump(
+    (store) => store.allExecutionAnimation
   );
+  const scripts = replayAllMode ? replayAllScripts : taskScripts;
+  const imageWidth = useExecutionDump((store) => store.insightWidth) || 1920;
+  const imageHeight = useExecutionDump((store) => store.insightHeight) || 1080;
   const canvasWidth = imageWidth + canvasPaddingLeft * 2;
   const canvasHeight = imageHeight + canvasPaddingTop * 2;
   const currentImg = useRef(((_a = scripts == null ? void 0 : scripts[0]) == null ? void 0 : _a.img) || null);
@@ -139,8 +138,8 @@ const Player = () => {
     top: 0,
     width: imageWidth,
     pointer: {
-      left: imageWidth / 2,
-      top: imageHeight / 2
+      left: Math.round(imageWidth / 2),
+      top: Math.round(imageHeight / 2)
     }
   };
   const [animationProgress, setAnimationProgress] = useState(-1);
@@ -285,14 +284,18 @@ const Player = () => {
       const animate = (currentTime) => {
         const nextState = __spreadValues({}, cameraState.current);
         const elapsedTime = currentTime - startTime;
-        if (shouldMovePointer && elapsedTime < pointerMoveDuration) {
-          const rawMouseProgress = Math.min(
-            elapsedTime / pointerMoveDuration,
-            1
-          );
-          const mouseProgress = cubicMouse(rawMouseProgress);
-          nextState.pointer.left = startPointer.left + (targetState.pointer.left - startPointer.left) * mouseProgress;
-          nextState.pointer.top = startPointer.top + (targetState.pointer.top - startPointer.top) * mouseProgress;
+        if (shouldMovePointer) {
+          if (elapsedTime <= pointerMoveDuration) {
+            const rawMouseProgress = Math.min(
+              elapsedTime / pointerMoveDuration,
+              1
+            );
+            const mouseProgress = cubicMouse(rawMouseProgress);
+            nextState.pointer.left = startPointer.left + (targetState.pointer.left - startPointer.left) * mouseProgress;
+            nextState.pointer.top = startPointer.top + (targetState.pointer.top - startPointer.top) * mouseProgress;
+          } else {
+            nextState.pointer = targetState.pointer;
+          }
         }
         if (elapsedTime > cameraMoveStart) {
           const cameraElapsedTime = elapsedTime - cameraMoveStart;
@@ -547,13 +550,13 @@ const Player = () => {
   if (animationProgress < 1) {
     statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }), size: "default" });
   } else if (mouseOverStatusIcon) {
-    statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(PlayCircleOutlined, {}), size: "default" });
+    statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(CaretRightOutlined, {}), size: "default" });
     statusStyle.cursor = "pointer";
     statusStyle.background = "#888";
     statusOnClick = () => setReplayMark(Date.now());
   } else {
     statusIconElement = // <Spin indicator={<CheckCircleOutlined />} size="default" />
-    /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(PlayCircleOutlined, {}), size: "default" });
+    /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(CaretRightOutlined, {}), size: "default" });
   }
   return /* @__PURE__ */ jsxs("div", { className: "player-container", children: [
     /* @__PURE__ */ jsx("div", { className: "canvas-container", ref: divContainerRef }),

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

@@ -50,9 +50,9 @@ const cameraStateForRect = (rect, imageWidth, imageHeight) => {
   );
   top = Math.max(top, 0);
   return {
-    left,
-    top,
-    width: cameraWidth
+    left: Math.round(left),
+    top: Math.round(top),
+    width: Math.round(cameraWidth)
   };
 };
 const mergeTwoCameraState = (cameraState1, cameraState2) => {
@@ -208,7 +208,7 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
     title: "Done",
     subTitle: initSubTitle,
     type: "img",
-    duration: stillDuration * 0.5,
+    duration: stillDuration,
     camera: fullPageCameraState
   });
   return scripts;

package/dist/es/component/store.js

@@ -35,11 +35,13 @@ const useExecutionDump = create((set, get) => {
   const initData = {
     dump: null,
     activeTask: null,
+    replayAllMode: false,
+    allExecutionAnimation: null,
+    insightWidth: null,
+    insightHeight: null,
     activeExecution: null,
     activeExecutionAnimation: null,
     // TODO: get from dump
-    activeExecutionScreenshotWidth: 0,
-    activeExecutionScreenshotHeight: 0,
     hoverTask: null,
     hoverTimestamp: null,
     hoverPreviewConfig: null
@@ -52,22 +54,75 @@ const useExecutionDump = create((set, get) => {
     const { reset } = useInsightDump.getState();
     reset();
   };
+  const resetActiveExecution = () => {
+    set({
+      activeExecution: null,
+      activeExecutionAnimation: null,
+      _executionDumpLoadId: ++_executionDumpLoadId
+    });
+    resetInsightDump();
+  };
   return __spreadProps(__spreadValues({}, initData), {
     _executionDumpLoadId,
+    setReplayAllMode: (replayAllMode) => {
+      const state = get();
+      if (state.allExecutionAnimation) {
+        set({ replayAllMode });
+        if (replayAllMode) {
+          resetActiveExecution();
+        }
+      } else {
+        console.error(
+          "allExecutionAnimation not found, failed to set replayAllMode"
+        );
+      }
+    },
     setGroupedDump: (dump) => {
       console.log("will set ExecutionDump", dump);
       set(__spreadProps(__spreadValues({}, initData), {
         dump
       }));
       resetInsightDump();
-      if (dump && dump.executions.length > 0 && dump.executions[0].tasks.length > 0) {
-        get().setActiveTask(dump.executions[0].tasks[0]);
+      if (dump && dump.executions.length > 0) {
+        let width = 0;
+        let height = 0;
+        dump.executions.forEach((execution) => {
+          execution.tasks.forEach((task) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            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 (!width || !height) {
+          console.warn(
+            "width or height not found, failed to generate animation"
+          );
+          return;
+        }
+        const allScripts = [];
+        dump.executions.forEach((execution) => {
+          const scripts = generateAnimationScripts(execution, width, height);
+          if (scripts) {
+            allScripts.push(...scripts);
+          }
+        });
+        set({
+          allExecutionAnimation: allScripts,
+          _executionDumpLoadId: ++_executionDumpLoadId,
+          replayAllMode: true,
+          insightWidth: width,
+          insightHeight: height
+        });
       }
     },
     setActiveTask(task) {
       var _a;
       let parentExecution;
-      const dump = get().dump;
+      const state = get();
+      const dump = state.dump;
       if (dump) {
         parentExecution = dump.executions.find(
           (execution) => execution.tasks.includes(task)
@@ -76,27 +131,14 @@ const useExecutionDump = create((set, get) => {
       if (!parentExecution) {
         throw new Error("parentExecution not found");
       }
-      let width = 0;
-      let height = 0;
-      parentExecution.tasks.forEach((t) => {
-        var _a2, _b, _c, _d, _e, _f, _g, _h;
-        if (t.type === "Insight") {
-          const insightTask = t;
-          width = ((_d = (_c = (_b = (_a2 = insightTask.log) == null ? void 0 : _a2.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;
-        }
-      });
+      const width = state.insightWidth;
+      const height = state.insightHeight;
       set({
+        replayAllMode: false,
         activeTask: task,
         activeExecution: parentExecution,
         _executionDumpLoadId: ++_executionDumpLoadId,
-        activeExecutionAnimation: generateAnimationScripts(
-          parentExecution,
-          width,
-          height
-        ),
-        activeExecutionScreenshotWidth: width,
-        activeExecutionScreenshotHeight: height
+        activeExecutionAnimation: width && height ? generateAnimationScripts(parentExecution, width, height) : null
       });
       console.log("will set task", task);
       if (task.type === "Insight") {

package/dist/es/index.css

@@ -78,6 +78,17 @@ footer.mt-8 {
   display: flex;
   flex-direction: row;
   background: #F8F8F8;
+  justify-content: space-between;
+}
+.page-nav .page-nav-left {
+  display: flex;
+  flex-direction: row;
+}
+.page-nav .page-nav-toolbar {
+  margin-left: 20px;
+}
+.page-nav .page-nav-toolbar .ant-btn {
+  background: #E9E9E9;
 }
 .page-nav .logo img {
   height: 20px;
@@ -103,6 +114,15 @@ footer.mt-8 {
   height: 100%;
   box-sizing: border-box;
 }
+.main-right .replay-all-mode-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 22px;
+  box-sizing: border-box;
+  margin: 0 auto;
+}
 .main-right .main-content {
   display: flex;
   flex-direction: row;

package/dist/es/index.js

@@ -22,9 +22,12 @@ import "./index.css";
 import DetailSide from "./component/detail-side";
 import Sidebar from "./component/sidebar";
 import { useExecutionDump } from "./component/store";
-import { DownOutlined } from "@ant-design/icons";
+import {
+  CaretRightOutlined,
+  DownOutlined
+} from "@ant-design/icons";
 import { Helmet } from "@modern-js/runtime/head";
-import { Alert, ConfigProvider, Dropdown, Select, Upload, message } from "antd";
+import { Alert, Button, ConfigProvider, Dropdown, Upload, message } from "antd";
 import { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
@@ -32,12 +35,21 @@ import logo from "./assets/logo-plain.0f78df8a.png";
 import DetailPanel from "./component/detail-panel";
 import GlobalHoverPreview from "./component/global-hover-preview";
 import { iconForStatus, timeCostStrElement } from "./component/misc";
+import Player from "./component/player";
 import Timeline from "./component/timeline";
 const { Dragger } = Upload;
 let globalRenderCount = 1;
 function Visualizer(props) {
   const { dumps, hideLogo = false } = props;
   const executionDump = useExecutionDump((store) => store.dump);
+  const executionDumpLoadId = useExecutionDump(
+    (store) => store._executionDumpLoadId
+  );
+  const replayAllMode = useExecutionDump((store) => store.replayAllMode);
+  const setReplayAllMode = useExecutionDump((store) => store.setReplayAllMode);
+  const replayAllScripts = useExecutionDump(
+    (store) => store.allExecutionAnimation
+  );
   const setGroupedDump = useExecutionDump((store) => store.setGroupedDump);
   const reset = useExecutionDump((store) => store.reset);
   const [mainLayoutChangeFlag, setMainLayoutChangeFlag] = useState(0);
@@ -117,6 +129,11 @@ function Visualizer(props) {
       /* @__PURE__ */ jsx("p", { className: "ant-upload-text", children: "All data will be processed locally by the browser. No data will be sent to the server." })
     ] })) });
   } else {
+    const content = replayAllMode ? /* @__PURE__ */ jsx("div", { className: "replay-all-mode-wrapper", children: /* @__PURE__ */ jsx(Player, {}, executionDumpLoadId) }) : /* @__PURE__ */ jsxs(PanelGroup, { autoSaveId: "page-detail-layout-v2", direction: "horizontal", children: [
+      /* @__PURE__ */ jsx(Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ jsx("div", { className: "main-content-container", children: /* @__PURE__ */ jsx(DetailPanel, {}) }) }),
+      /* @__PURE__ */ jsx(PanelResizeHandle, {}),
+      /* @__PURE__ */ jsx(Panel, { maxSize: 95, children: /* @__PURE__ */ jsx("div", { className: "main-side", children: /* @__PURE__ */ jsx(DetailSide, {}) }) })
+    ] });
     mainContent = /* @__PURE__ */ jsxs(
       PanelGroup,
       {
@@ -142,18 +159,7 @@ function Visualizer(props) {
           ),
           /* @__PURE__ */ jsx(Panel, { defaultSize: 80, maxSize: 95, children: /* @__PURE__ */ jsxs("div", { className: "main-right", children: [
             /* @__PURE__ */ jsx(Timeline, {}, mainLayoutChangeFlag),
-            /* @__PURE__ */ jsx("div", { className: "main-content", children: /* @__PURE__ */ jsxs(
-              PanelGroup,
-              {
-                autoSaveId: "page-detail-layout-v2",
-                direction: "horizontal",
-                children: [
-                  /* @__PURE__ */ jsx(Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ jsx("div", { className: "main-content-container", children: /* @__PURE__ */ jsx(DetailPanel, {}) }) }),
-                  /* @__PURE__ */ jsx(PanelResizeHandle, {}),
-                  /* @__PURE__ */ jsx(Panel, { maxSize: 95, children: /* @__PURE__ */ jsx("div", { className: "main-side", children: /* @__PURE__ */ jsx(DetailSide, {}) }) })
-                ]
-              }
-            ) })
+            /* @__PURE__ */ jsx("div", { className: "main-content", children: content })
           ] }) })
         ]
       }
@@ -185,25 +191,6 @@ function Visualizer(props) {
       globalRenderCount += 1;
     };
   }, []);
-  const selectOptions = dumps == null ? void 0 : dumps.map((dump, index) => ({
-    value: index,
-    label: `${dump.groupName} - ${dump.groupDescription}`,
-    groupName: dump.groupName,
-    groupDescription: dump.groupDescription
-  }));
-  const selectWidget = selectOptions && selectOptions.length > 1 ? /* @__PURE__ */ jsx(
-    Select,
-    {
-      options: selectOptions,
-      defaultValue: 0,
-      onChange: (value) => {
-        const dump = dumps[value];
-        setGroupedDump(dump);
-      },
-      defaultOpen: true,
-      style: { width: "100%" }
-    }
-  ) : null;
   return /* @__PURE__ */ jsxs(
     ConfigProvider,
     {
@@ -226,13 +213,40 @@ function Visualizer(props) {
             style: { height: containerHeight },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "page-nav", children: [
-                /* @__PURE__ */ jsx("div", { className: "logo", children: /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    alt: "Midscene_logo",
-                    src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/logo-light-with-text.png"
-                  }
-                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "page-nav-left", children: [
+                  /* @__PURE__ */ jsx("div", { className: "logo", children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      alt: "Midscene_logo",
+                      src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/logo-light-with-text.png"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: "page-nav-toolbar", children: /* @__PURE__ */ jsx(
+                    ConfigProvider,
+                    {
+                      theme: {
+                        components: {
+                          Button: { textHoverBg: "#bfc4da80" }
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "text",
+                          icon: /* @__PURE__ */ jsx(CaretRightOutlined, {}),
+                          disabled: !replayAllScripts || replayAllScripts.length === 0,
+                          style: {
+                            background: replayAllMode ? "#bfc4da80" : void 0
+                          },
+                          onClick: () => {
+                            setReplayAllMode(true);
+                          },
+                          children: "Replay All"
+                        }
+                      )
+                    }
+                  ) })
+                ] }),
                 /* @__PURE__ */ jsx(
                   PlaywrightCaseSelector,
                   {

package/dist/index.css

@@ -79,6 +79,17 @@ footer.mt-8 {
   display: flex;
   flex-direction: row;
   background: #F8F8F8;
+  justify-content: space-between;
+}
+.page-nav .page-nav-left {
+  display: flex;
+  flex-direction: row;
+}
+.page-nav .page-nav-toolbar {
+  margin-left: 20px;
+}
+.page-nav .page-nav-toolbar .ant-btn {
+  background: #E9E9E9;
 }
 .page-nav .logo img {
   height: 20px;
@@ -104,6 +115,15 @@ footer.mt-8 {
   height: 100%;
   box-sizing: border-box;
 }
+.main-right .replay-all-mode-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 22px;
+  box-sizing: border-box;
+  margin: 0 auto;
+}
 .main-right .main-content {
   display: flex;
   flex-direction: row;