@midscene/visualizer - npm Package Compare versions

Comparing version 0.6.2 to 0.6.3-beta-20241017035917.0

dist/es/component/blackboard.js

@@ -32,4 +32,2 @@ "use client";
 const highlightAlpha = 0.4;
-const bgOnAlpha = 1;
-const bgOffAlpha = 0.3;
 const noop = () => {
@@ -76,3 +74,3 @@ };
   const { context } = dump;
-  const { size, screenshotBase64 } = context;
+  const { size, screenshotBase64, screenshotBase64WithElementMarker } = context;
   const screenWidth = size.width;
@@ -86,3 +84,4 @@ const screenHeight = size.height;
   const pixiBgRef = useRef();
-  const { bgVisible, setBgVisible, elementsVisible, setTextsVisible } = useBlackboardPreference();
+  const { markerVisible, setMarkerVisible, elementsVisible, setTextsVisible } = useBlackboardPreference();
+  const ifMarkerAvailable = !!screenshotBase64WithElementMarker;
   useEffect(() => {
@@ -133,10 +132,23 @@ Promise.resolve(
       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;
+        };
+      }
     };
@@ -186,6 +198,6 @@ }, [app.stage, appInitialed]);
   ]);
-  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;
     }
@@ -219,3 +231,11 @@ };
     /* @__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" })
@@ -222,0 +242,0 @@ ] }) }),

dist/es/component/player.js

@@ -448,3 +448,3 @@ "use client";
         }, 0);
-        const progressUpdateInterval = 300;
+        const progressUpdateInterval = 200;
         const startTime = performance.now();
@@ -458,3 +458,5 @@ setAnimationProgress(0);
           setAnimationProgress(progress);
-          return timeout(updateProgress, progressUpdateInterval);
+          if (progress < 1) {
+            return timeout(updateProgress, progressUpdateInterval);
+          }
         };
@@ -461,0 +463,0 @@ frame(updateProgress);

dist/es/component/replay-scripts.js

@@ -24,2 +24,3 @@ "use client";
 const stillDuration = 1200;
+const stillAfterInsightDuration = 300;
 const locateDuration = 800;
@@ -142,5 +143,14 @@ const actionDuration = 1e3;
         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,
@@ -155,3 +165,3 @@ camera: currentCameraState === fullPageCameraState || !insightCameraState ? void 0 : mergeTwoCameraState(currentCameraState, insightCameraState),
           type: "sleep",
-          duration: 800,
+          duration: stillAfterInsightDuration,
           title,
@@ -158,0 +168,0 @@ subTitle

dist/es/component/store.js

@@ -24,6 +24,6 @@ var __defProp = Object.defineProperty;
 const useBlackboardPreference = create((set) => ({
-  bgVisible: true,
+  markerVisible: true,
   elementsVisible: true,
-  setBgVisible: (visible) => {
-    set({ bgVisible: visible });
+  setMarkerVisible: (visible) => {
+    set({ markerVisible: visible });
   },
@@ -92,7 +92,9 @@ setTextsVisible: (visible) => {
           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;
+              }
             }
@@ -99,0 +101,0 @@ });

dist/lib/component/blackboard.js

@@ -66,4 +66,2 @@ "use strict";
 const highlightAlpha = 0.4;
-const bgOnAlpha = 1;
-const bgOffAlpha = 0.3;
 const noop = () => {
@@ -110,3 +108,3 @@ };
   const { context } = dump;
-  const { size, screenshotBase64 } = context;
+  const { size, screenshotBase64, screenshotBase64WithElementMarker } = context;
   const screenWidth = size.width;
@@ -120,3 +118,4 @@ const screenHeight = size.height;
   const pixiBgRef = (0, import_react.useRef)();
-  const { bgVisible, setBgVisible, elementsVisible, setTextsVisible } = (0, import_store.useBlackboardPreference)();
+  const { markerVisible, setMarkerVisible, elementsVisible, setTextsVisible } = (0, import_store.useBlackboardPreference)();
+  const ifMarkerAvailable = !!screenshotBase64WithElementMarker;
   (0, import_react.useEffect)(() => {
@@ -167,10 +166,23 @@ Promise.resolve(
       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;
+        };
+      }
     };
@@ -220,6 +232,6 @@ }, [app.stage, appInitialed]);
   ]);
-  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;
     }
@@ -253,3 +265,11 @@ };
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blackboard-filter", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "overlay-control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: bgVisible, onChange: onSetBg, children: "Screenshot" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_antd.Checkbox,
+        {
+          checked: markerVisible,
+          onChange: onSetMarkerVisible,
+          disabled: !ifMarkerAvailable,
+          children: "Marker"
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: elementsVisible, onChange: onSetElementsVisible, children: "Elements" })
@@ -256,0 +276,0 @@ ] }) }),

dist/lib/component/player.js

@@ -479,3 +479,3 @@ "use strict";
         }, 0);
-        const progressUpdateInterval = 300;
+        const progressUpdateInterval = 200;
         const startTime = performance.now();
@@ -489,3 +489,5 @@ setAnimationProgress(0);
           setAnimationProgress(progress);
-          return timeout(updateProgress, progressUpdateInterval);
+          if (progress < 1) {
+            return timeout(updateProgress, progressUpdateInterval);
+          }
         };
@@ -492,0 +494,0 @@ frame(updateProgress);

dist/lib/component/replay-scripts.js

@@ -47,2 +47,3 @@ "use strict";
 const stillDuration = 1200;
+const stillAfterInsightDuration = 300;
 const locateDuration = 800;
@@ -165,5 +166,14 @@ const actionDuration = 1e3;
         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,
@@ -178,3 +188,3 @@ camera: currentCameraState === fullPageCameraState || !insightCameraState ? void 0 : mergeTwoCameraState(currentCameraState, insightCameraState),
           type: "sleep",
-          duration: 800,
+          duration: stillAfterInsightDuration,
           title,
@@ -181,0 +191,0 @@ subTitle

dist/lib/component/store.js

@@ -58,6 +58,6 @@ "use strict";
 const useBlackboardPreference = create((set) => ({
-  bgVisible: true,
+  markerVisible: true,
   elementsVisible: true,
-  setBgVisible: (visible) => {
-    set({ bgVisible: visible });
+  setMarkerVisible: (visible) => {
+    set({ markerVisible: visible });
   },
@@ -126,7 +126,9 @@ setTextsVisible: (visible) => {
           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;
+              }
             }
@@ -133,0 +135,0 @@ });

dist/types/component/store.d.ts

@@ -5,5 +5,5 @@ import * as Z from 'zustand';
 export declare const useBlackboardPreference: Z.UseBoundStore<Z.StoreApi<{
-    bgVisible: boolean;
+    markerVisible: boolean;
     elementsVisible: boolean;
-    setBgVisible: (visible: boolean) => void;
+    setMarkerVisible: (visible: boolean) => void;
     setTextsVisible: (visible: boolean) => void;
@@ -10,0 +10,0 @@ }>>;

package.json

 {
   "name": "@midscene/visualizer",
-  "version": "0.6.2",
+  "version": "0.6.3-beta-20241017035917.0",
   "repository": "https://github.com/web-infra-dev/midscene",
@@ -44,3 +44,3 @@ "homepage": "https://midscenejs.com/",
     "zustand": "4.5.2",
-    "@midscene/core": "0.6.2"
+    "@midscene/core": "0.6.3-beta-20241017035917.0"
   },
@@ -47,0 +47,0 @@ "sideEffects": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21184894

increased by0.03%

Lines of code

9169

increased by0.84%

No dependency changes