@midscene/visualizer 1.5.8 → 1.5.9-beta-20260325080051.0

package/dist/es/component/blackboard/highlights.mjs

@@ -0,0 +1,47 @@
+function formatCenterKey(center) {
+    return `${center[0]}:${center[1]}`;
+}
+function formatRectKey(rect) {
+    return `${rect.left}:${rect.top}:${rect.width}:${rect.height}`;
+}
+function getElementLabel(element) {
+    if ('content' in element && element.content) return element.content;
+    if ("description" in element && element.description) return element.description;
+}
+function normalizeBlackboardHighlights(elements) {
+    if (!(null == elements ? void 0 : elements.length)) return [];
+    const deduped = new Map();
+    elements.forEach((element, index)=>{
+        if (!(null == element ? void 0 : element.rect) || !(null == element ? void 0 : element.center)) return;
+        const label = getElementLabel(element);
+        const dedupeKey = [
+            'id' in element ? element.id : '',
+            label || '',
+            formatCenterKey(element.center),
+            formatRectKey(element.rect)
+        ].join('|');
+        if (!deduped.has(dedupeKey)) deduped.set(dedupeKey, {
+            key: 'id' in element && element.id || `${dedupeKey || 'highlight'}-${index}`,
+            label,
+            center: element.center,
+            rect: element.rect
+        });
+    });
+    return Array.from(deduped.values());
+}
+function roundRect(rect) {
+    return {
+        left: Math.round(rect.left),
+        top: Math.round(rect.top),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height)
+    };
+}
+function formatBlackboardHighlightSummary(highlight) {
+    const center = `[${Math.round(highlight.center[0])}, ${Math.round(highlight.center[1])}]`;
+    const rect = roundRect(highlight.rect);
+    const rectText = `rect=${JSON.stringify(rect)}`;
+    if (highlight.label) return `${highlight.label} center=${center}, ${rectText}`;
+    return `center=${center}, ${rectText}`;
+}
+export { formatBlackboardHighlightSummary, normalizeBlackboardHighlights };

package/dist/es/component/blackboard/index.css

@@ -44,6 +44,7 @@
 .blackboard-rect {
   box-sizing: content-box;
   pointer-events: none;
+  z-index: 1;
   position: absolute;
 }
 
@@ -85,6 +86,7 @@
   border: calc(2px * var(--ui-scale, 1)) solid #fd5907;
   box-shadow: 0 0 calc(6px * var(--ui-scale, 1)) rgba(253, 89, 7, .5);
   pointer-events: none;
+  z-index: 2;
   background: rgba(253, 89, 7, .4);
   border-radius: 50%;
   animation: 1.2s ease-in-out infinite blackboard-pulse;

package/dist/es/component/blackboard/index.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import react from "react";
+import { normalizeBlackboardHighlights } from "./highlights.mjs";
 import "./index.css";
 const Blackboard = (props)=>{
     var _props_uiContext;
@@ -20,7 +21,10 @@ const Blackboard = (props)=>{
     const { shotSize, screenshot } = context;
     const screenWidth = shotSize.width;
     const screenHeight = shotSize.height;
-    const screenshotBase64 = useMemo(()=>{
+    const highlightOverlays = react.useMemo(()=>normalizeBlackboardHighlights(highlightElements), [
+        highlightElements
+    ]);
+    const screenshotBase64 = react.useMemo(()=>{
         if (!screenshot) return '';
         if ('object' == typeof screenshot && 'base64' in screenshot) return screenshot.base64;
         if ('string' == typeof screenshot) return screenshot;
@@ -28,7 +32,7 @@ const Blackboard = (props)=>{
     }, [
         screenshot
     ]);
-    const highlightElementRects = highlightElements.map((e)=>e.rect);
+    const highlightElementRects = highlightOverlays.map((highlight)=>highlight.rect);
     let bottomTipA = null;
     if (1 === highlightElementRects.length) bottomTipA = /*#__PURE__*/ jsx("div", {
         className: "bottom-tip",
@@ -56,7 +60,8 @@ const Blackboard = (props)=>{
             /*#__PURE__*/ jsxs("div", {
                 className: "blackboard-main-content",
                 style: {
-                    width: '100%',
+                    width: 'fit-content',
+                    maxWidth: '100%',
                     position: 'relative'
                 },
                 children: [
@@ -86,19 +91,15 @@ const Blackboard = (props)=>{
                                     children: "Search Area"
                                 })
                             }),
-                            highlightElements.map((el, idx)=>/*#__PURE__*/ jsx("div", {
+                            highlightOverlays.map((el)=>/*#__PURE__*/ jsx("div", {
                                     className: "blackboard-rect blackboard-rect-highlight",
                                     style: {
                                         left: `${el.rect.left / screenWidth * 100}%`,
                                         top: `${el.rect.top / screenHeight * 100}%`,
                                         width: `${el.rect.width / screenWidth * 100}%`,
                                         height: `${el.rect.height / screenHeight * 100}%`
-                                    },
-                                    children: el.content && /*#__PURE__*/ jsx("span", {
-                                        className: "blackboard-rect-label",
-                                        children: el.content
-                                    })
-                                }, el.id || idx))
+                                    }
+                                }, `${el.key}-rect`))
                         ]
                     })
                 ]

package/dist/lib/component/blackboard/highlights.js

@@ -0,0 +1,84 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    formatBlackboardHighlightSummary: ()=>formatBlackboardHighlightSummary,
+    normalizeBlackboardHighlights: ()=>normalizeBlackboardHighlights
+});
+function formatCenterKey(center) {
+    return `${center[0]}:${center[1]}`;
+}
+function formatRectKey(rect) {
+    return `${rect.left}:${rect.top}:${rect.width}:${rect.height}`;
+}
+function getElementLabel(element) {
+    if ('content' in element && element.content) return element.content;
+    if ("description" in element && element.description) return element.description;
+}
+function normalizeBlackboardHighlights(elements) {
+    if (!(null == elements ? void 0 : elements.length)) return [];
+    const deduped = new Map();
+    elements.forEach((element, index)=>{
+        if (!(null == element ? void 0 : element.rect) || !(null == element ? void 0 : element.center)) return;
+        const label = getElementLabel(element);
+        const dedupeKey = [
+            'id' in element ? element.id : '',
+            label || '',
+            formatCenterKey(element.center),
+            formatRectKey(element.rect)
+        ].join('|');
+        if (!deduped.has(dedupeKey)) deduped.set(dedupeKey, {
+            key: 'id' in element && element.id || `${dedupeKey || 'highlight'}-${index}`,
+            label,
+            center: element.center,
+            rect: element.rect
+        });
+    });
+    return Array.from(deduped.values());
+}
+function roundRect(rect) {
+    return {
+        left: Math.round(rect.left),
+        top: Math.round(rect.top),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height)
+    };
+}
+function formatBlackboardHighlightSummary(highlight) {
+    const center = `[${Math.round(highlight.center[0])}, ${Math.round(highlight.center[1])}]`;
+    const rect = roundRect(highlight.rect);
+    const rectText = `rect=${JSON.stringify(rect)}`;
+    if (highlight.label) return `${highlight.label} center=${center}, ${rectText}`;
+    return `center=${center}, ${rectText}`;
+}
+exports.formatBlackboardHighlightSummary = __webpack_exports__.formatBlackboardHighlightSummary;
+exports.normalizeBlackboardHighlights = __webpack_exports__.normalizeBlackboardHighlights;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "formatBlackboardHighlightSummary",
+    "normalizeBlackboardHighlights"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/blackboard/index.css

@@ -44,6 +44,7 @@
 .blackboard-rect {
   box-sizing: content-box;
   pointer-events: none;
+  z-index: 1;
   position: absolute;
 }
 
@@ -85,6 +86,7 @@
   border: calc(2px * var(--ui-scale, 1)) solid #fd5907;
   box-shadow: 0 0 calc(6px * var(--ui-scale, 1)) rgba(253, 89, 7, .5);
   pointer-events: none;
+  z-index: 2;
   background: rgba(253, 89, 7, .4);
   border-radius: 50%;
   animation: 1.2s ease-in-out infinite blackboard-pulse;

package/dist/lib/component/blackboard/index.js

@@ -1,6 +1,15 @@
 "use strict";
 "use client";
 var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -30,6 +39,8 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const external_highlights_js_namespaceObject = require("./highlights.js");
 require("./index.css");
 const Blackboard = (props)=>{
     var _props_uiContext;
@@ -49,7 +60,10 @@ const Blackboard = (props)=>{
     const { shotSize, screenshot } = context;
     const screenWidth = shotSize.width;
     const screenHeight = shotSize.height;
-    const screenshotBase64 = (0, external_react_namespaceObject.useMemo)(()=>{
+    const highlightOverlays = external_react_default().useMemo(()=>(0, external_highlights_js_namespaceObject.normalizeBlackboardHighlights)(highlightElements), [
+        highlightElements
+    ]);
+    const screenshotBase64 = external_react_default().useMemo(()=>{
         if (!screenshot) return '';
         if ('object' == typeof screenshot && 'base64' in screenshot) return screenshot.base64;
         if ('string' == typeof screenshot) return screenshot;
@@ -57,7 +71,7 @@ const Blackboard = (props)=>{
     }, [
         screenshot
     ]);
-    const highlightElementRects = highlightElements.map((e)=>e.rect);
+    const highlightElementRects = highlightOverlays.map((highlight)=>highlight.rect);
     let bottomTipA = null;
     if (1 === highlightElementRects.length) bottomTipA = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "bottom-tip",
@@ -85,7 +99,8 @@ const Blackboard = (props)=>{
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 className: "blackboard-main-content",
                 style: {
-                    width: '100%',
+                    width: 'fit-content',
+                    maxWidth: '100%',
                     position: 'relative'
                 },
                 children: [
@@ -115,19 +130,15 @@ const Blackboard = (props)=>{
                                     children: "Search Area"
                                 })
                             }),
-                            highlightElements.map((el, idx)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            highlightOverlays.map((el)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                     className: "blackboard-rect blackboard-rect-highlight",
                                     style: {
                                         left: `${el.rect.left / screenWidth * 100}%`,
                                         top: `${el.rect.top / screenHeight * 100}%`,
                                         width: `${el.rect.width / screenWidth * 100}%`,
                                         height: `${el.rect.height / screenHeight * 100}%`
-                                    },
-                                    children: el.content && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                        className: "blackboard-rect-label",
-                                        children: el.content
-                                    })
-                                }, el.id || idx))
+                                    }
+                                }, `${el.key}-rect`))
                         ]
                     })
                 ]

package/dist/types/component/blackboard/highlights.d.ts

@@ -0,0 +1,11 @@
+import type { BaseElement, LocateResultElement, Rect } from '@midscene/core';
+type HighlightLikeElement = (Pick<BaseElement, 'center' | 'rect'> & Partial<Pick<BaseElement, 'content' | 'id'>>) | LocateResultElement;
+export interface BlackboardHighlightOverlay {
+    key: string;
+    label?: string;
+    center: [number, number];
+    rect: Rect;
+}
+export declare function normalizeBlackboardHighlights(elements: HighlightLikeElement[] | undefined): BlackboardHighlightOverlay[];
+export declare function formatBlackboardHighlightSummary(highlight: BlackboardHighlightOverlay): string;
+export {};

package/dist/types/component/blackboard/index.d.ts

@@ -1,9 +1,10 @@
 import type { BaseElement, Rect, UIContext } from '@midscene/core';
+import React from 'react';
 import './index.less';
 export declare const Blackboard: (props: {
     uiContext: UIContext | undefined | null;
     highlightElements?: BaseElement[];
     highlightRect?: Rect;
     hideController?: boolean;
-}) => import("react").JSX.Element;
+}) => React.JSX.Element;
 export default Blackboard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "1.5.8",
+  "version": "1.5.9-beta-20260325080051.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -58,10 +58,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/core": "1.5.8",
-    "@midscene/shared": "1.5.8",
-    "@midscene/web": "1.5.8",
-    "@midscene/playground": "1.5.8"
+    "@midscene/core": "1.5.9-beta-20260325080051.0",
+    "@midscene/shared": "1.5.9-beta-20260325080051.0",
+    "@midscene/playground": "1.5.9-beta-20260325080051.0",
+    "@midscene/web": "1.5.9-beta-20260325080051.0"
   },
   "license": "MIT",
   "scripts": {