@midscene/visualizer 0.1.4 → 0.2.0

package/dist/lib/component/global-hover-preview.js

@@ -21,7 +21,10 @@ __export(global_hover_preview_exports, {
   default: () => global_hover_preview_default
 });
 module.exports = __toCommonJS(global_hover_preview_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime = (
+  // biome-ignore lint/a11y/useAltText: <explanation>
+  require("react/jsx-runtime")
+);
 var import_react = require("react");
 var import_store = require("./store");
 var import_global_hover_preview = require("./global-hover-preview.css");
@@ -31,7 +34,9 @@ const GlobalHoverPreview = () => {
   const wrapperRef = (0, import_react.useRef)(null);
   const hoverTask = (0, import_store.useExecutionDump)((store) => store.hoverTask);
   const hoverTimestamp = (0, import_store.useExecutionDump)((store) => store.hoverTimestamp);
-  const hoverPreviewConfig = (0, import_store.useExecutionDump)((store) => store.hoverPreviewConfig);
+  const hoverPreviewConfig = (0, import_store.useExecutionDump)(
+    (store) => store.hoverPreviewConfig
+  );
   const [imageW, setImageW] = (0, import_react.useState)(size);
   const [imageH, setImageH] = (0, import_react.useState)(size);
   const images = (_a = hoverTask == null ? void 0 : hoverTask.recorder) == null ? void 0 : _a.filter((item) => {
@@ -52,18 +57,26 @@ const GlobalHoverPreview = () => {
     left = x + widthInPractice > clientWidth ? clientWidth - widthInPractice : x;
     top = y + heightInPractice > clientHeight ? clientHeight - heightInPractice : y;
   }
-  return shouldShow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "global-hover-preview", style: { left, top }, ref: wrapperRef, children: (images == null ? void 0 : images.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "img",
+  return shouldShow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
     {
-      src: images[0],
-      onLoad: (img) => {
-        const imgElement = img.target;
-        const width = imgElement.naturalWidth;
-        const height = imgElement.naturalHeight;
-        setImageW(width);
-        setImageH(height);
-      }
+      className: "global-hover-preview",
+      style: { left, top },
+      ref: wrapperRef,
+      children: (images == null ? void 0 : images.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src: images[0],
+          onLoad: (img) => {
+            const imgElement = img.target;
+            const width = imgElement.naturalWidth;
+            const height = imgElement.naturalHeight;
+            setImageW(width);
+            setImageH(height);
+          }
+        }
+      ) : null
     }
-  ) : null }) : null;
+  ) : null;
 };
 var global_hover_preview_default = GlobalHoverPreview;

package/dist/lib/component/panel-title.css

@@ -1,8 +1,8 @@
 .task-list-name {
   padding: 2px 10px;
   font-weight: bold;
-  background: #DDDDDD;
-  border-top: 1px solid #CCCCCC;
-  border-bottom: 1px solid #CCCCCC;
+  background: #F8F8F8;
+  border-top: 1px solid #E5E5E5;
+  border-bottom: 1px solid #E5E5E5;
   margin-top: -1px;
 }

package/dist/lib/component/sidebar.css

@@ -4,9 +4,9 @@
   justify-content: space-between;
   width: 100%;
   height: 100%;
-  border-right: 1px solid #CCCCCC;
+  border-right: 1px solid #E5E5E5;
   overflow: auto;
-  background: #f7f7f7;
+  background: #F8F8F8;
 }
 .side-bar .brand {
   padding: 10px 5px;
@@ -25,7 +25,7 @@
   border-top: 1px solid none;
 }
 .side-bar .side-seperator.side-seperator-line {
-  border-top: 1px solid #CCCCCC;
+  border-top: 1px solid #E5E5E5;
 }
 .side-bar .side-seperator.side-seperator-space-up {
   margin-top: 10px;
@@ -35,7 +35,7 @@
 }
 .side-bar .side-sub-title {
   padding: 0 10px;
-  font-weight: bold;
+  margin-bottom: 6px;
 }
 .side-bar .side-item {
   cursor: pointer;
@@ -43,15 +43,10 @@
   padding: 2px 0;
 }
 .side-bar .side-item:hover {
-  background: #A3D6D2;
-  color: #333;
+  background: #dcdcdc80;
 }
 .side-bar .side-item.selected {
-  background: #06B1AB;
-  color: #ffffff;
-}
-.side-bar .side-item.selected .status-text {
-  color: #ffffff;
+  background: #bfc4da80;
 }
 .side-bar .side-item .side-item-content {
   padding: 0 10px 0 calc(10px + 16px);
@@ -73,7 +68,7 @@
   margin-top: -5px;
 }
 .side-bar .side-item-name .status-icon-success {
-  color: #3a773a;
+  color: #2B8243;
 }
 .side-bar .side-item-name .status-icon-fail {
   color: #ff0a0a;

package/dist/lib/component/sidebar.js

@@ -33,14 +33,14 @@ __export(sidebar_exports, {
 module.exports = __toCommonJS(sidebar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_sidebar = require("./sidebar.css");
-var import_react = require("react");
+var import_store = require("./store");
+var import_utils = require("../utils");
 var import_icons = require("@ant-design/icons");
 var import_antd = require("antd");
-var import_panel_title = __toESM(require("./panel-title"));
-var import_misc = require("./misc");
+var import_react = require("react");
 var import_logo_plain2 = __toESM(require("./assets/logo-plain2.js"));
-var import_store = require("./store");
-var import_utils = require("../utils");
+var import_misc = require("./misc");
+var import_panel_title = __toESM(require("./panel-title"));
 const SideItem = (props) => {
   var _a, _b, _c;
   const { task, onClick, selected } = props;
@@ -88,7 +88,7 @@ const SideItem = (props) => {
       },
       children: [
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `side-item-name`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "side-item-name", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `status-icon status-icon-${task.status}`, children: statusIcon }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title", children: (0, import_utils.typeStr)(task) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "status-text", children: statusText })
@@ -103,10 +103,14 @@ const Sidebar = (props) => {
   const setActiveTask = (0, import_store.useExecutionDump)((store) => store.setActiveTask);
   const activeTask = (0, import_store.useExecutionDump)((store) => store.activeTask);
   const setHoverTask = (0, import_store.useExecutionDump)((store) => store.setHoverTask);
-  const setHoverPreviewConfig = (0, import_store.useExecutionDump)((store) => store.setHoverPreviewConfig);
+  const setHoverPreviewConfig = (0, import_store.useExecutionDump)(
+    (store) => store.setHoverPreviewConfig
+  );
   const reset = (0, import_store.useExecutionDump)((store) => store.reset);
   const allTasks = (0, import_store.useAllCurrentTasks)();
-  const currentSelectedIndex = allTasks == null ? void 0 : allTasks.findIndex((task) => task === activeTask);
+  const currentSelectedIndex = allTasks == null ? void 0 : allTasks.findIndex(
+    (task) => task === activeTask
+  );
   (0, import_react.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (!(allTasks == null ? void 0 : allTasks.length) || (allTasks == null ? void 0 : allTasks.length) <= 1) {
@@ -182,22 +186,30 @@ const Sidebar = (props) => {
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "no tasks" });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "side-bar", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "top-controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "brand", onClick: reset, style: { display: (props == null ? void 0 : props.hideLogo) ? "none" : "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_logo_plain2.default,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
         {
-          style: { width: 70, height: 70, margin: "auto" },
-          onClick: () => {
-            if (props.logoAction) {
-              props.logoAction();
-            } else {
-              location.reload();
+          className: "brand",
+          onClick: reset,
+          style: { display: (props == null ? void 0 : props.hideLogo) ? "none" : "flex" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_logo_plain2.default,
+            {
+              style: { width: 70, height: 70, margin: "auto" },
+              onClick: () => {
+                if (props.logoAction) {
+                  props.logoAction();
+                } else {
+                  location.reload();
+                }
+              }
             }
-          }
+          )
         }
-      ) }),
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-list", children: sideList }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-seperator side-seperator-line side-seperator-space-up" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-meta-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-meta", children: "use Command + ⬆︎ / ⬇︎ to switch" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-meta-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-meta", children: "switch: Command + Up / Down" }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-controls", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { onClick: reset, type: "text", className: "unload_btn", children: "Unload" }) })
   ] });

package/dist/lib/component/store.js

@@ -82,10 +82,11 @@ const useExecutionDump = (0, import_zustand.create)((set, get) => {
       }
     },
     setActiveTask(task) {
+      var _a;
       set({ activeTask: task });
       console.log("task set", task);
       if (task.type === "Insight") {
-        syncToInsightDump(task.log.dump);
+        syncToInsightDump((_a = task.log) == null ? void 0 : _a.dump);
       } else {
         resetInsightDump();
       }
@@ -124,7 +125,12 @@ const useAllCurrentTasks = () => {
 };
 const useInsightDump = (0, import_zustand.create)((set) => {
   let loadId = 0;
-  const initData = { _loadId: 0, highlightSectionNames: [], highlightElements: [], data: null };
+  const initData = {
+    _loadId: 0,
+    highlightSectionNames: [],
+    highlightElements: [],
+    data: null
+  };
   return __spreadProps(__spreadValues({}, initData), {
     loadData: (data) => {
       set({

package/dist/lib/component/timeline.css

@@ -4,7 +4,7 @@
   flex-shrink: 0;
   width: 100%;
   height: 100%;
-  border-bottom: 1px solid #CCCCCC;
+  border-bottom: 1px solid #E5E5E5;
   position: relative;
   box-sizing: border-box;
 }

package/dist/lib/component/timeline.js

@@ -69,8 +69,8 @@ __export(timeline_exports, {
 });
 module.exports = __toCommonJS(timeline_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var PIXI = __toESM(require("pixi.js"));
+var import_react = require("react");
 var import_timeline = require("./timeline.css");
 var import_store = require("./store");
 function cloneSprite(sprite) {
@@ -98,17 +98,18 @@ const TimelineWidget = (props) => {
   const allScreenshots = props.screenshots || [];
   const maxTime = allScreenshots[allScreenshots.length - 1].timeOffset;
   const sizeRatio = 2;
-  const titleBg = 14540253;
-  const sideBg = 16250871;
+  const titleBg = 16316664;
+  const sideBg = 16777215;
   const gridTextColor = 0;
   const shotBorderColor = 7829367;
-  const gridLineColor = 13421772;
-  const gridHighlightColor = 438699;
+  const gridLineColor = 15066597;
+  const gridHighlightColor = 12567770;
+  const highlightMaskAlpha = 0.6;
   const timeContentFontSize = 20;
   const commonPadding = 12;
   const timeTextTop = commonPadding;
   const timeTitleBottom = timeTextTop * 2 + timeContentFontSize;
-  const highlightMaskAlpha = 0.6;
+  const hoverMaskColor = 14474460;
   const hoverMaskAlpha = 0.3;
   const closestScreenshotItemOnXY = (x, _y) => {
     let closestScreenshot;
@@ -213,6 +214,11 @@ const TimelineWidget = (props) => {
         titleBgSection.drawRect(0, 0, canvasWidth, timeTitleBottom);
         titleBgSection.endFill();
         gridsContainer.addChild(titleBgSection);
+        const titleBottomBorder = new PIXI.Graphics();
+        titleBottomBorder.beginFill(gridLineColor);
+        titleBottomBorder.drawRect(0, timeTitleBottom, canvasWidth, sizeRatio);
+        titleBottomBorder.endFill();
+        gridsContainer.addChild(titleBottomBorder);
         const gridHeight = canvasHeight;
         for (let i = 1; i <= gridCount; i++) {
           const gridLine = new PIXI.Graphics();
@@ -248,7 +254,9 @@ const TimelineWidget = (props) => {
             const originalWidth = img.width;
             const originalHeight = img.height;
             const screenshotHeight = screenshotMaxHeight;
-            const screenshotWidth = Math.floor(screenshotHeight / originalHeight * originalWidth);
+            const screenshotWidth = Math.floor(
+              screenshotHeight / originalHeight * originalWidth
+            );
             const screenshotX = leftForTimeOffset(screenshot.timeOffset);
             allScreenshots[index].x = screenshotX;
             allScreenshots[index].y = screenshotTop;
@@ -256,7 +264,12 @@ const TimelineWidget = (props) => {
             allScreenshots[index].height = screenshotMaxHeight;
             const border = new PIXI.Graphics();
             border.lineStyle(sizeRatio, shotBorderColor, 1);
-            border.drawRect(screenshotX, screenshotTop, screenshotWidth, screenshotMaxHeight);
+            border.drawRect(
+              screenshotX,
+              screenshotTop,
+              screenshotWidth,
+              screenshotMaxHeight
+            );
             border.endFill();
             container.addChild(border);
             screenshotSprite.x = screenshotX;
@@ -268,18 +281,28 @@ const TimelineWidget = (props) => {
         });
         const highlightMaskUpdater = (start, end, hoverStart, hoverEnd) => {
           highlightMaskContainer.removeChildren();
-          const mask = (start2, end2, alpha) => {
+          const mask = (start2, end2, color, alpha) => {
             if (typeof start2 === "undefined" || typeof end2 === "undefined" || end2 === 0) {
               return;
             }
             const leftBorder = new PIXI.Graphics();
             leftBorder.beginFill(gridHighlightColor, 1);
-            leftBorder.drawRect(leftForTimeOffset(start2), 0, sizeRatio, canvasHeight);
+            leftBorder.drawRect(
+              leftForTimeOffset(start2),
+              0,
+              sizeRatio,
+              canvasHeight
+            );
             leftBorder.endFill();
             highlightMaskContainer.addChild(leftBorder);
             const rightBorder = new PIXI.Graphics();
             rightBorder.beginFill(gridHighlightColor, 1);
-            rightBorder.drawRect(leftForTimeOffset(end2), 0, sizeRatio, canvasHeight);
+            rightBorder.drawRect(
+              leftForTimeOffset(end2),
+              0,
+              sizeRatio,
+              canvasHeight
+            );
             rightBorder.endFill();
             highlightMaskContainer.addChild(rightBorder);
             const mask2 = new PIXI.Graphics();
@@ -293,10 +316,15 @@ const TimelineWidget = (props) => {
             mask2.endFill();
             highlightMaskContainer.addChild(mask2);
           };
-          mask(start, end, highlightMaskAlpha);
-          mask(hoverStart, hoverEnd, hoverMaskAlpha);
+          mask(start, end, gridHighlightColor, highlightMaskAlpha);
+          mask(hoverStart, hoverEnd, hoverMaskColor, hoverMaskAlpha);
         };
-        highlightMaskUpdater((_a2 = props.highlightMask) == null ? void 0 : _a2.startMs, (_b2 = props.highlightMask) == null ? void 0 : _b2.endMs, 0, 0);
+        highlightMaskUpdater(
+          (_a2 = props.highlightMask) == null ? void 0 : _a2.startMs,
+          (_b2 = props.highlightMask) == null ? void 0 : _b2.endMs,
+          0,
+          0
+        );
         containerUpdaterRef.current = highlightMaskUpdater;
         app.stage.interactive = true;
         const onPointerMove = (event) => {
@@ -304,7 +332,10 @@ const TimelineWidget = (props) => {
           const x = event.offsetX * sizeRatio;
           const y = event.offsetY * sizeRatio;
           indicatorContainer.removeChildren();
-          const { closestScreenshot, closestIndex } = closestScreenshotItemOnXY(x, y);
+          const { closestScreenshot, closestIndex } = closestScreenshotItemOnXY(
+            x,
+            y
+          );
           if (closestIndex < 0) {
             (_a3 = props.onUnhighlight) == null ? void 0 : _a3.call(props);
             return;
@@ -317,9 +348,9 @@ const TimelineWidget = (props) => {
               newSpirit.drawRect(
                 x,
                 // follow mouse
-                closestScreenshot.y,
-                closestScreenshot.width,
-                closestScreenshot.height
+                closestScreenshot == null ? void 0 : closestScreenshot.y,
+                closestScreenshot == null ? void 0 : closestScreenshot.width,
+                closestScreenshot == null ? void 0 : closestScreenshot.height
               );
               newSpirit.endFill();
               indicatorContainer.addChild(newSpirit);
@@ -381,7 +412,9 @@ const Timeline = () => {
   const activeTask = (0, import_store.useExecutionDump)((store) => store.activeTask);
   const hoverTask = (0, import_store.useExecutionDump)((store) => store.hoverTask);
   const setHoverTask = (0, import_store.useExecutionDump)((store) => store.setHoverTask);
-  const setHoverPreviewConfig = (0, import_store.useExecutionDump)((store) => store.setHoverPreviewConfig);
+  const setHoverPreviewConfig = (0, import_store.useExecutionDump)(
+    (store) => store.setHoverPreviewConfig
+  );
   let startingTime = -1;
   let idCount = 1;
   const idTaskMap = {};