@midscene/visualizer 0.5.1 → 0.5.2-beta-20240929094445.0

package/dist/es/component/blackboard.css

@@ -22,4 +22,5 @@
 .blackboard-main-content canvas {
   width: 100%;
   border: 1px solid #888;
+  box-sizing: border-box;
 }

package/dist/es/component/blackboard.js

@@ -25,10 +25,11 @@ import * as PIXI from "pixi.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { colorForName, highlightColorForType } from "./color";
 import "./blackboard.css";
+import { DropShadowFilter } from "pixi-filters";
 import { useBlackboardPreference, useInsightDump } from "./store";
 const itemFillAlpha = 0.4;
-const highlightAlpha = 0.7;
-const bgOnAlpha = 0.8;
+const highlightAlpha = 0.4;
+const bgOnAlpha = 1;
 const bgOffAlpha = 0.3;
 const noop = () => {
 };
@@ -46,6 +47,14 @@ const rectMarkForItem = (rect, name, ifHighlight, onPointOver, onPointerOut) =>
     graphics.on("pointerover", onPointOver);
     graphics.on("pointerout", onPointerOut);
   }
+  const dropShadowFilter = new DropShadowFilter({
+    blur: 2,
+    quality: 3,
+    alpha: 0.4,
+    offset: { x: 4, y: 4 },
+    color: 3355443
+  });
+  graphics.filters = [dropShadowFilter];
   const nameFontSize = 18;
   const texts = new PIXI.Text(name, {
     fontSize: nameFontSize,

package/dist/es/component/color.js

@@ -1,7 +1,7 @@
 const sectionColor = ["#028391"];
 const elementColor = ["#01204E"];
 const highlightColorForSection = "#01204E";
-const highlightColorForElement = "#F56824";
+const highlightColorForElement = "#fd5907";
 function djb2Hash(str) {
   if (!str) {
     str = "unnamed";

package/dist/es/component/detail-panel.js

@@ -76,8 +76,9 @@ const DetailPanel = () => {
   useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Tab") {
+        const ifShift = e.shiftKey;
         const index = availableViewTypes.indexOf(viewType);
-        const nextIndex = (index + 1) % availableViewTypes.length;
+        const nextIndex = ifShift ? (index - 1 + availableViewTypes.length) % availableViewTypes.length : (index + 1) % availableViewTypes.length;
         setViewType(availableViewTypes[nextIndex]);
         e.preventDefault();
       }

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

@@ -33,8 +33,11 @@ const cameraStateForRect = (rect, imageWidth, imageHeight) => {
   } else {
     rectWidthOnPage = rect.height / imageHeight * imageWidth;
   }
-  const cameraPaddingRatio = 0.16;
-  const cameraWidth = rectWidthOnPage + imageWidth * cameraPaddingRatio * 2;
+  const cameraPaddingRatio = rectWidthOnPage < 50 ? 0.3 : 0.2;
+  const cameraWidth = Math.min(
+    imageWidth,
+    rectWidthOnPage + imageWidth * cameraPaddingRatio * 2
+  );
   const cameraHeight = cameraWidth * (imageHeight / imageWidth);
   let left = Math.min(
     rect.left - imageWidth * cameraPaddingRatio,
@@ -52,6 +55,20 @@ const cameraStateForRect = (rect, imageWidth, imageHeight) => {
     width: cameraWidth
   };
 };
+const mergeTwoCameraState = (cameraState1, cameraState2) => {
+  const newLeft = Math.min(cameraState1.left, cameraState2.left);
+  const newTop = Math.min(cameraState1.top, cameraState2.top);
+  const newRight = Math.max(
+    cameraState1.left + cameraState1.width,
+    cameraState2.left + cameraState2.width
+  );
+  const newWidth = newRight - newLeft;
+  return {
+    left: newLeft,
+    top: newTop,
+    width: newWidth
+  };
+};
 const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
   if (!execution)
     return null;
@@ -83,8 +100,10 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
   }
   const scripts = [];
   let insightCameraState = void 0;
+  let currentCameraState = fullPageCameraState;
   let insightOnTop = false;
-  execution.tasks.forEach((task) => {
+  const taskCount = execution.tasks.length;
+  execution.tasks.forEach((task, index) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     if (task.type === "Planning") {
       const planningTask = task;
@@ -120,7 +139,7 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
           type: "insight",
           img: insightDump.context.screenshotBase64,
           insightDump,
-          camera: fullPageCameraState,
+          camera: currentCameraState === fullPageCameraState || !insightCameraState ? void 0 : mergeTwoCameraState(currentCameraState, insightCameraState),
           duration: insightContentLength > 20 ? locateDuration : locateDuration * 0.5,
           title,
           subTitle
@@ -137,6 +156,7 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
       const title = typeStr(task);
       const subTitle = paramStr(task);
       scripts.push(pointerScript(mousePointer, title, subTitle));
+      currentCameraState = insightCameraState != null ? insightCameraState : fullPageCameraState;
       scripts.push({
         type: "img",
         img: (_g = (_f = task.recorder) == null ? void 0 : _f[0]) == null ? void 0 : _g.screenshot,
@@ -154,6 +174,7 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
         });
         insightOnTop = false;
       }
+      const imgStillDuration = index < taskCount - 1 ? stillDuration : 0;
       if ((_i = (_h = task.recorder) == null ? void 0 : _h[1]) == null ? void 0 : _i.screenshot) {
         scripts.push({
           type: "spinning-pointer",
@@ -165,15 +186,14 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
         scripts.push({
           type: "img",
           img: (_k = (_j = task.recorder) == null ? void 0 : _j[1]) == null ? void 0 : _k.screenshot,
-          duration: stillDuration,
-          // camera: fullPageCameraState,
+          duration: imgStillDuration,
           title,
           subTitle
         });
       } else {
         scripts.push({
           type: "sleep",
-          duration: stillDuration,
+          duration: imgStillDuration,
           title,
           subTitle
         });
@@ -182,7 +202,7 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
   });
   scripts.push({
     type: "img",
-    duration: stillDuration,
+    duration: stillDuration * 0.5,
     camera: fullPageCameraState
   });
   scripts.push({
@@ -193,5 +213,6 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
 };
 export {
   cameraStateForRect,
-  generateAnimationScripts
+  generateAnimationScripts,
+  mergeTwoCameraState
 };

package/dist/es/component/player.js

@@ -49,7 +49,7 @@ const cubicBezier = (t, p0, p1, p2, p3) => {
   return p0 * t2 * t2 * t2 + 3 * p1 * t * t2 * t2 + 3 * p2 * t * t * t2 + p3 * t * t * t;
 };
 const cubicImage = (t) => {
-  return linear(t);
+  return cubicBezier(t, 0, 0.69, 0.43, 1);
 };
 const cubicInsightElement = (t) => {
   return cubicBezier(t, 0, 0.5, 0.5, 1);
@@ -243,8 +243,8 @@ const Player = () => {
     const currentState = __spreadValues({}, cameraState.current);
     const startLeft = currentState.left;
     const startTop = currentState.top;
-    const startWidth = currentState.width;
     const startPointer = __spreadValues({}, currentState.pointer);
+    const startScale = currentState.width / imageWidth;
     const startTime = performance.now();
     const shouldMovePointer = targetState.pointer && (targetState.pointer.left !== startPointer.left || targetState.pointer.top !== startPointer.top);
     const pointerMoveDuration = shouldMovePointer ? duration * 0.375 : 0;
@@ -270,10 +270,17 @@ const Player = () => {
             1
           );
           const cameraProgress = cubicImage(rawCameraProgress);
-          nextState.left = startLeft + (targetState.left - startLeft) * cameraProgress;
-          nextState.top = startTop + (targetState.top - startTop) * cameraProgress;
-          const expectWidth = startWidth + (targetState.width - startWidth) * cameraProgress;
-          nextState.width = nextState.left + expectWidth > imageWidth ? imageWidth - nextState.left : expectWidth;
+          const targetScale = targetState.width / imageWidth;
+          const progressScale = startScale + (targetScale - startScale) * cameraProgress;
+          const progressWidth = imageWidth * progressScale;
+          const progressHeight = imageHeight * progressScale;
+          nextState.width = progressWidth;
+          const progressLeft = startLeft + (targetState.left - startLeft) * cameraProgress;
+          const progressTop = startTop + (targetState.top - startTop) * cameraProgress;
+          const horizontalExceed = progressLeft + progressWidth - imageWidth;
+          const verticalExceed = progressTop + progressHeight - imageHeight;
+          nextState.left = horizontalExceed > 0 ? progressLeft + horizontalExceed : progressLeft;
+          nextState.top = verticalExceed > 0 ? progressTop + verticalExceed : progressTop;
         }
         updateCamera(nextState);
         if (elapsedTime < duration) {

package/dist/index.css

@@ -465,6 +465,7 @@ footer.mt-8 {
 .blackboard-main-content canvas {
   width: 100%;
   border: 1px solid #888;
+  box-sizing: border-box;
 }
 
 /* src/component/global-hover-preview.less */