@midscene/visualizer 0.1.4 → 0.2.0

package/dist/es/component/sidebar.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./sidebar.css";
-import { useEffect } from "react";
+import { useAllCurrentTasks, useExecutionDump } from "./store";
+import { typeStr } from "../utils";
 import {
   ArrowRightOutlined,
   CheckOutlined,
@@ -10,11 +11,10 @@ import {
   MinusOutlined
 } from "@ant-design/icons";
 import { Button } from "antd";
-import PanelTitle from "./panel-title";
-import { timeCostStrElement } from "./misc";
+import { useEffect } from "react";
 import Logo from "./assets/logo-plain2.js";
-import { useAllCurrentTasks, useExecutionDump } from "./store";
-import { typeStr } from "../utils";
+import { timeCostStrElement } from "./misc";
+import PanelTitle from "./panel-title";
 const SideItem = (props) => {
   var _a, _b, _c;
   const { task, onClick, selected } = props;
@@ -62,7 +62,7 @@ const SideItem = (props) => {
       },
       children: [
         " ",
-        /* @__PURE__ */ jsxs("div", { className: `side-item-name`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "side-item-name", children: [
           /* @__PURE__ */ jsx("span", { className: `status-icon status-icon-${task.status}`, children: statusIcon }),
           /* @__PURE__ */ jsx("div", { className: "title", children: typeStr(task) }),
           /* @__PURE__ */ jsx("div", { className: "status-text", children: statusText })
@@ -77,10 +77,14 @@ const Sidebar = (props) => {
   const setActiveTask = useExecutionDump((store) => store.setActiveTask);
   const activeTask = useExecutionDump((store) => store.activeTask);
   const setHoverTask = useExecutionDump((store) => store.setHoverTask);
-  const setHoverPreviewConfig = useExecutionDump((store) => store.setHoverPreviewConfig);
+  const setHoverPreviewConfig = useExecutionDump(
+    (store) => store.setHoverPreviewConfig
+  );
   const reset = useExecutionDump((store) => store.reset);
   const allTasks = useAllCurrentTasks();
-  const currentSelectedIndex = allTasks == null ? void 0 : allTasks.findIndex((task) => task === activeTask);
+  const currentSelectedIndex = allTasks == null ? void 0 : allTasks.findIndex(
+    (task) => task === activeTask
+  );
   useEffect(() => {
     const handleKeyDown = (e) => {
       if (!(allTasks == null ? void 0 : allTasks.length) || (allTasks == null ? void 0 : allTasks.length) <= 1) {
@@ -156,22 +160,30 @@ const Sidebar = (props) => {
   }) : /* @__PURE__ */ jsx("span", { children: "no tasks" });
   return /* @__PURE__ */ jsxs("div", { className: "side-bar", children: [
     /* @__PURE__ */ jsxs("div", { className: "top-controls", children: [
-      /* @__PURE__ */ jsx("div", { className: "brand", onClick: reset, style: { display: (props == null ? void 0 : props.hideLogo) ? "none" : "flex" }, children: /* @__PURE__ */ jsx(
-        Logo,
+      /* @__PURE__ */ 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__ */ jsx(
+            Logo,
+            {
+              style: { width: 70, height: 70, margin: "auto" },
+              onClick: () => {
+                if (props.logoAction) {
+                  props.logoAction();
+                } else {
+                  location.reload();
+                }
+              }
             }
-          }
+          )
         }
-      ) }),
+      ),
       /* @__PURE__ */ jsx("div", { className: "task-list", children: sideList }),
       /* @__PURE__ */ jsx("div", { className: "side-seperator side-seperator-line side-seperator-space-up" }),
-      /* @__PURE__ */ jsx("div", { className: "task-meta-section", children: /* @__PURE__ */ jsx("div", { className: "task-meta", children: "use Command + ⬆︎ / ⬇︎ to switch" }) })
+      /* @__PURE__ */ jsx("div", { className: "task-meta-section", children: /* @__PURE__ */ jsx("div", { className: "task-meta", children: "switch: Command + Up / Down" }) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "bottom-controls", children: /* @__PURE__ */ jsx(Button, { onClick: reset, type: "text", className: "unload_btn", children: "Unload" }) })
   ] });

package/dist/es/component/store.js

@@ -58,10 +58,11 @@ const useExecutionDump = 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();
       }
@@ -100,7 +101,12 @@ const useAllCurrentTasks = () => {
 };
 const useInsightDump = 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/es/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/es/component/timeline.js

@@ -38,8 +38,8 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from "react";
 import * as PIXI from "pixi.js";
+import { useEffect, useMemo, useRef } from "react";
 import "./timeline.css";
 import { useAllCurrentTasks, useExecutionDump } from "./store";
 function cloneSprite(sprite) {
@@ -67,17 +67,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;
@@ -182,6 +183,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();
@@ -217,7 +223,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;
@@ -225,7 +233,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;
@@ -237,18 +250,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();
@@ -262,10 +285,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) => {
@@ -273,7 +301,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;
@@ -286,9 +317,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);
@@ -350,7 +381,9 @@ const Timeline = () => {
   const activeTask = useExecutionDump((store) => store.activeTask);
   const hoverTask = useExecutionDump((store) => store.hoverTask);
   const setHoverTask = useExecutionDump((store) => store.setHoverTask);
-  const setHoverPreviewConfig = useExecutionDump((store) => store.setHoverPreviewConfig);
+  const setHoverPreviewConfig = useExecutionDump(
+    (store) => store.setHoverPreviewConfig
+  );
   let startingTime = -1;
   let idCount = 1;
   const idTaskMap = {};