@midscene/visualizer 1.6.1-beta-20260331083547.0 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/component/blackboard/index.mjs +15 -11
- package/dist/es/component/player/scenes/StepScene.mjs +6 -5
- package/dist/es/component/player/scenes/export-branded-video.mjs +9 -8
- package/dist/es/utils/highlight-element.mjs +62 -0
- package/dist/es/utils/replay-scripts.mjs +8 -5
- package/dist/lib/component/blackboard/index.js +15 -11
- package/dist/lib/component/player/scenes/StepScene.js +6 -5
- package/dist/lib/component/player/scenes/export-branded-video.js +9 -8
- package/dist/lib/utils/highlight-element.js +99 -0
- package/dist/lib/utils/replay-scripts.js +8 -5
- package/dist/types/utils/highlight-element.d.ts +3 -0
- package/package.json +5 -5
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import react from "react";
|
|
4
|
+
import { getCenterHighlightBox } from "../../utils/highlight-element.mjs";
|
|
4
5
|
import { normalizeBlackboardHighlights } from "./highlights.mjs";
|
|
5
6
|
import "./index.css";
|
|
6
7
|
const Blackboard = (props)=>{
|
|
@@ -32,25 +33,25 @@ const Blackboard = (props)=>{
|
|
|
32
33
|
}, [
|
|
33
34
|
screenshot
|
|
34
35
|
]);
|
|
35
|
-
const
|
|
36
|
+
const highlightBoxes = highlightOverlays.map((highlight)=>getCenterHighlightBox(highlight));
|
|
36
37
|
let bottomTipA = null;
|
|
37
|
-
if (1 ===
|
|
38
|
+
if (1 === highlightBoxes.length) bottomTipA = /*#__PURE__*/ jsx("div", {
|
|
38
39
|
className: "bottom-tip",
|
|
39
40
|
children: /*#__PURE__*/ jsxs("div", {
|
|
40
41
|
className: "bottom-tip-item",
|
|
41
42
|
children: [
|
|
42
43
|
"Element: ",
|
|
43
|
-
JSON.stringify(
|
|
44
|
+
JSON.stringify(highlightBoxes[0])
|
|
44
45
|
]
|
|
45
46
|
})
|
|
46
47
|
});
|
|
47
|
-
else if (
|
|
48
|
+
else if (highlightBoxes.length > 1) bottomTipA = /*#__PURE__*/ jsx("div", {
|
|
48
49
|
className: "bottom-tip",
|
|
49
50
|
children: /*#__PURE__*/ jsxs("div", {
|
|
50
51
|
className: "bottom-tip-item",
|
|
51
52
|
children: [
|
|
52
53
|
"Element: ",
|
|
53
|
-
JSON.stringify(
|
|
54
|
+
JSON.stringify(highlightBoxes)
|
|
54
55
|
]
|
|
55
56
|
})
|
|
56
57
|
});
|
|
@@ -91,15 +92,18 @@ const Blackboard = (props)=>{
|
|
|
91
92
|
children: "Search Area"
|
|
92
93
|
})
|
|
93
94
|
}),
|
|
94
|
-
highlightOverlays.map((el)
|
|
95
|
+
highlightOverlays.map((el)=>{
|
|
96
|
+
const highlightBox = getCenterHighlightBox(el);
|
|
97
|
+
return /*#__PURE__*/ jsx("div", {
|
|
95
98
|
className: "blackboard-rect blackboard-rect-highlight",
|
|
96
99
|
style: {
|
|
97
|
-
left: `${
|
|
98
|
-
top: `${
|
|
99
|
-
width: `${
|
|
100
|
-
height: `${
|
|
100
|
+
left: `${highlightBox.left / screenWidth * 100}%`,
|
|
101
|
+
top: `${highlightBox.top / screenHeight * 100}%`,
|
|
102
|
+
width: `${highlightBox.width / screenWidth * 100}%`,
|
|
103
|
+
height: `${highlightBox.height / screenHeight * 100}%`
|
|
101
104
|
}
|
|
102
|
-
}, `${el.key}-rect`)
|
|
105
|
+
}, `${el.key}-rect`);
|
|
106
|
+
})
|
|
103
107
|
]
|
|
104
108
|
})
|
|
105
109
|
]
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
import { mouseLoading } from "../../../utils/index.mjs";
|
|
4
|
+
import { getCenterHighlightBox } from "../../../utils/highlight-element.mjs";
|
|
4
5
|
import { deriveFrameState } from "./derive-frame-state.mjs";
|
|
5
6
|
import { getPlaybackViewport } from "./playback-layout.mjs";
|
|
6
7
|
const POINTER_PHASE = 0.375;
|
|
@@ -40,14 +41,14 @@ const StepsTimeline = ({ frameMap, autoZoom, frame, width: compWidth, height: co
|
|
|
40
41
|
return insights.map((insight, idx)=>{
|
|
41
42
|
const overlays = [];
|
|
42
43
|
if (insight.highlightElement) {
|
|
43
|
-
const
|
|
44
|
+
const highlightBox = getCenterHighlightBox(insight.highlightElement);
|
|
44
45
|
overlays.push(/*#__PURE__*/ jsx("div", {
|
|
45
46
|
style: {
|
|
46
47
|
position: 'absolute',
|
|
47
|
-
left:
|
|
48
|
-
top:
|
|
49
|
-
width:
|
|
50
|
-
height:
|
|
48
|
+
left: highlightBox.left,
|
|
49
|
+
top: highlightBox.top,
|
|
50
|
+
width: highlightBox.width,
|
|
51
|
+
height: highlightBox.height,
|
|
51
52
|
background: 'rgba(253, 89, 7, 0.4)',
|
|
52
53
|
border: `${2 * resScale}px solid #fd5907`,
|
|
53
54
|
boxShadow: `${2 * resScale}px ${2 * resScale}px ${+resScale}px rgba(51, 51, 51, 0.3)`,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { mouseLoading, mousePointer } from "../../../utils/index.mjs";
|
|
2
|
+
import { getCenterHighlightBox } from "../../../utils/highlight-element.mjs";
|
|
2
3
|
import { deriveFrameState } from "./derive-frame-state.mjs";
|
|
3
4
|
import { getPlaybackViewport } from "./playback-layout.mjs";
|
|
4
5
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
@@ -51,21 +52,21 @@ function drawInsightOverlays(ctx, insights, cameraTransform, bx, contentY) {
|
|
|
51
52
|
ctx.save();
|
|
52
53
|
ctx.globalAlpha *= insight.alpha;
|
|
53
54
|
if (insight.highlightElement) {
|
|
54
|
-
const
|
|
55
|
-
const rx = bx + (
|
|
56
|
-
const ry = contentY + (
|
|
57
|
-
const
|
|
58
|
-
const
|
|
55
|
+
const highlightBox = getCenterHighlightBox(insight.highlightElement);
|
|
56
|
+
const rx = bx + (highlightBox.left * cameraTransform.zoom + cameraTransform.tx * cameraTransform.zoom);
|
|
57
|
+
const ry = contentY + (highlightBox.top * cameraTransform.zoom + cameraTransform.ty * cameraTransform.zoom);
|
|
58
|
+
const highlightWidth = highlightBox.width * cameraTransform.zoom;
|
|
59
|
+
const highlightHeight = highlightBox.height * cameraTransform.zoom;
|
|
59
60
|
ctx.fillStyle = 'rgba(253, 89, 7, 0.4)';
|
|
60
|
-
ctx.fillRect(rx, ry,
|
|
61
|
+
ctx.fillRect(rx, ry, highlightWidth, highlightHeight);
|
|
61
62
|
ctx.strokeStyle = '#fd5907';
|
|
62
63
|
ctx.lineWidth = 1;
|
|
63
|
-
ctx.strokeRect(rx, ry,
|
|
64
|
+
ctx.strokeRect(rx, ry, highlightWidth, highlightHeight);
|
|
64
65
|
ctx.shadowColor = 'rgba(51, 51, 51, 0.4)';
|
|
65
66
|
ctx.shadowBlur = 2;
|
|
66
67
|
ctx.shadowOffsetX = 4;
|
|
67
68
|
ctx.shadowOffsetY = 4;
|
|
68
|
-
ctx.strokeRect(rx, ry,
|
|
69
|
+
ctx.strokeRect(rx, ry, highlightWidth, highlightHeight);
|
|
69
70
|
ctx.shadowBlur = 0;
|
|
70
71
|
ctx.shadowOffsetX = 0;
|
|
71
72
|
ctx.shadowOffsetY = 0;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
function _define_property(obj, key, value) {
|
|
2
|
+
if (key in obj) Object.defineProperty(obj, key, {
|
|
3
|
+
value: value,
|
|
4
|
+
enumerable: true,
|
|
5
|
+
configurable: true,
|
|
6
|
+
writable: true
|
|
7
|
+
});
|
|
8
|
+
else obj[key] = value;
|
|
9
|
+
return obj;
|
|
10
|
+
}
|
|
11
|
+
function _object_spread(target) {
|
|
12
|
+
for(var i = 1; i < arguments.length; i++){
|
|
13
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
14
|
+
var ownKeys = Object.keys(source);
|
|
15
|
+
if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
16
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
17
|
+
}));
|
|
18
|
+
ownKeys.forEach(function(key) {
|
|
19
|
+
_define_property(target, key, source[key]);
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
return target;
|
|
23
|
+
}
|
|
24
|
+
function highlight_element_ownKeys(object, enumerableOnly) {
|
|
25
|
+
var keys = Object.keys(object);
|
|
26
|
+
if (Object.getOwnPropertySymbols) {
|
|
27
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
28
|
+
if (enumerableOnly) symbols = symbols.filter(function(sym) {
|
|
29
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
30
|
+
});
|
|
31
|
+
keys.push.apply(keys, symbols);
|
|
32
|
+
}
|
|
33
|
+
return keys;
|
|
34
|
+
}
|
|
35
|
+
function _object_spread_props(target, source) {
|
|
36
|
+
source = null != source ? source : {};
|
|
37
|
+
if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
38
|
+
else highlight_element_ownKeys(Object(source)).forEach(function(key) {
|
|
39
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
40
|
+
});
|
|
41
|
+
return target;
|
|
42
|
+
}
|
|
43
|
+
const REPORT_HIGHLIGHT_EDGE_SIZE = 8;
|
|
44
|
+
const getCenterHighlightBox = (element)=>{
|
|
45
|
+
const centerX = Math.round(element.center[0]);
|
|
46
|
+
const centerY = Math.round(element.center[1]);
|
|
47
|
+
const offset = Math.ceil(REPORT_HIGHLIGHT_EDGE_SIZE / 2) - 1;
|
|
48
|
+
return {
|
|
49
|
+
left: Math.max(centerX - offset, 0),
|
|
50
|
+
top: Math.max(centerY - offset, 0),
|
|
51
|
+
width: REPORT_HIGHLIGHT_EDGE_SIZE,
|
|
52
|
+
height: REPORT_HIGHLIGHT_EDGE_SIZE
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
const normalizeHighlightElementForReport = (element)=>_object_spread_props(_object_spread({}, element), {
|
|
56
|
+
center: [
|
|
57
|
+
Math.round(element.center[0]),
|
|
58
|
+
Math.round(element.center[1])
|
|
59
|
+
],
|
|
60
|
+
rect: getCenterHighlightBox(element)
|
|
61
|
+
});
|
|
62
|
+
export { getCenterHighlightBox, normalizeHighlightElementForReport };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { mousePointer } from "./index.mjs";
|
|
3
3
|
import { paramStr, typeStr } from "@midscene/core/agent";
|
|
4
|
+
import { getCenterHighlightBox, normalizeHighlightElementForReport } from "./highlight-element.mjs";
|
|
4
5
|
function _define_property(obj, key, value) {
|
|
5
6
|
if (key in obj) Object.defineProperty(obj, key, {
|
|
6
7
|
value: value,
|
|
@@ -283,21 +284,23 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
|
|
|
283
284
|
}, contextScreenshot));
|
|
284
285
|
locateElements.forEach((element)=>{
|
|
285
286
|
var _task_log_taskInfo, _task_log, _context_shotSize, _context_shotSize1;
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
287
|
+
const highlightElement = normalizeHighlightElementForReport(element);
|
|
288
|
+
const highlightBox = getCenterHighlightBox(highlightElement);
|
|
289
|
+
insightCameraState = _object_spread_props(_object_spread({}, cameraStateForRect(highlightBox, width, height)), {
|
|
290
|
+
pointerLeft: highlightElement.center[0],
|
|
291
|
+
pointerTop: highlightElement.center[1]
|
|
289
292
|
});
|
|
290
293
|
const newCameraState = insightCameraState;
|
|
291
294
|
scripts.push(createScript({
|
|
292
295
|
type: 'insight',
|
|
293
296
|
context: context,
|
|
294
297
|
camera: newCameraState,
|
|
295
|
-
highlightElement
|
|
298
|
+
highlightElement,
|
|
296
299
|
searchArea: null == (_task_log = task.log) ? void 0 : null == (_task_log_taskInfo = _task_log.taskInfo) ? void 0 : _task_log_taskInfo.searchArea,
|
|
297
300
|
duration: 0.5 * locateDuration,
|
|
298
301
|
insightCameraDuration: locateDuration,
|
|
299
302
|
title,
|
|
300
|
-
subTitle:
|
|
303
|
+
subTitle: highlightElement.description || subTitle,
|
|
301
304
|
imageWidth: (null == (_context_shotSize = context.shotSize) ? void 0 : _context_shotSize.width) || imageWidth,
|
|
302
305
|
imageHeight: (null == (_context_shotSize1 = context.shotSize) ? void 0 : _context_shotSize1.height) || imageHeight,
|
|
303
306
|
taskId: currentTaskId
|
|
@@ -40,6 +40,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
40
40
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
41
41
|
const external_react_namespaceObject = require("react");
|
|
42
42
|
var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
|
|
43
|
+
const highlight_element_js_namespaceObject = require("../../utils/highlight-element.js");
|
|
43
44
|
const external_highlights_js_namespaceObject = require("./highlights.js");
|
|
44
45
|
require("./index.css");
|
|
45
46
|
const Blackboard = (props)=>{
|
|
@@ -71,25 +72,25 @@ const Blackboard = (props)=>{
|
|
|
71
72
|
}, [
|
|
72
73
|
screenshot
|
|
73
74
|
]);
|
|
74
|
-
const
|
|
75
|
+
const highlightBoxes = highlightOverlays.map((highlight)=>(0, highlight_element_js_namespaceObject.getCenterHighlightBox)(highlight));
|
|
75
76
|
let bottomTipA = null;
|
|
76
|
-
if (1 ===
|
|
77
|
+
if (1 === highlightBoxes.length) bottomTipA = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
77
78
|
className: "bottom-tip",
|
|
78
79
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
79
80
|
className: "bottom-tip-item",
|
|
80
81
|
children: [
|
|
81
82
|
"Element: ",
|
|
82
|
-
JSON.stringify(
|
|
83
|
+
JSON.stringify(highlightBoxes[0])
|
|
83
84
|
]
|
|
84
85
|
})
|
|
85
86
|
});
|
|
86
|
-
else if (
|
|
87
|
+
else if (highlightBoxes.length > 1) bottomTipA = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
87
88
|
className: "bottom-tip",
|
|
88
89
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
89
90
|
className: "bottom-tip-item",
|
|
90
91
|
children: [
|
|
91
92
|
"Element: ",
|
|
92
|
-
JSON.stringify(
|
|
93
|
+
JSON.stringify(highlightBoxes)
|
|
93
94
|
]
|
|
94
95
|
})
|
|
95
96
|
});
|
|
@@ -130,15 +131,18 @@ const Blackboard = (props)=>{
|
|
|
130
131
|
children: "Search Area"
|
|
131
132
|
})
|
|
132
133
|
}),
|
|
133
|
-
highlightOverlays.map((el)
|
|
134
|
+
highlightOverlays.map((el)=>{
|
|
135
|
+
const highlightBox = (0, highlight_element_js_namespaceObject.getCenterHighlightBox)(el);
|
|
136
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
134
137
|
className: "blackboard-rect blackboard-rect-highlight",
|
|
135
138
|
style: {
|
|
136
|
-
left: `${
|
|
137
|
-
top: `${
|
|
138
|
-
width: `${
|
|
139
|
-
height: `${
|
|
139
|
+
left: `${highlightBox.left / screenWidth * 100}%`,
|
|
140
|
+
top: `${highlightBox.top / screenHeight * 100}%`,
|
|
141
|
+
width: `${highlightBox.width / screenWidth * 100}%`,
|
|
142
|
+
height: `${highlightBox.height / screenHeight * 100}%`
|
|
140
143
|
}
|
|
141
|
-
}, `${el.key}-rect`)
|
|
144
|
+
}, `${el.key}-rect`);
|
|
145
|
+
})
|
|
142
146
|
]
|
|
143
147
|
})
|
|
144
148
|
]
|
|
@@ -29,6 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
29
29
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
30
|
const external_react_namespaceObject = require("react");
|
|
31
31
|
const index_js_namespaceObject = require("../../../utils/index.js");
|
|
32
|
+
const highlight_element_js_namespaceObject = require("../../../utils/highlight-element.js");
|
|
32
33
|
const external_derive_frame_state_js_namespaceObject = require("./derive-frame-state.js");
|
|
33
34
|
const external_playback_layout_js_namespaceObject = require("./playback-layout.js");
|
|
34
35
|
const POINTER_PHASE = 0.375;
|
|
@@ -68,14 +69,14 @@ const StepsTimeline = ({ frameMap, autoZoom, frame, width: compWidth, height: co
|
|
|
68
69
|
return insights.map((insight, idx)=>{
|
|
69
70
|
const overlays = [];
|
|
70
71
|
if (insight.highlightElement) {
|
|
71
|
-
const
|
|
72
|
+
const highlightBox = (0, highlight_element_js_namespaceObject.getCenterHighlightBox)(insight.highlightElement);
|
|
72
73
|
overlays.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
73
74
|
style: {
|
|
74
75
|
position: 'absolute',
|
|
75
|
-
left:
|
|
76
|
-
top:
|
|
77
|
-
width:
|
|
78
|
-
height:
|
|
76
|
+
left: highlightBox.left,
|
|
77
|
+
top: highlightBox.top,
|
|
78
|
+
width: highlightBox.width,
|
|
79
|
+
height: highlightBox.height,
|
|
79
80
|
background: 'rgba(253, 89, 7, 0.4)',
|
|
80
81
|
border: `${2 * resScale}px solid #fd5907`,
|
|
81
82
|
boxShadow: `${2 * resScale}px ${2 * resScale}px ${+resScale}px rgba(51, 51, 51, 0.3)`,
|
|
@@ -27,6 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
27
27
|
exportBrandedVideo: ()=>exportBrandedVideo
|
|
28
28
|
});
|
|
29
29
|
const index_js_namespaceObject = require("../../../utils/index.js");
|
|
30
|
+
const highlight_element_js_namespaceObject = require("../../../utils/highlight-element.js");
|
|
30
31
|
const external_derive_frame_state_js_namespaceObject = require("./derive-frame-state.js");
|
|
31
32
|
const external_playback_layout_js_namespaceObject = require("./playback-layout.js");
|
|
32
33
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
@@ -79,21 +80,21 @@ function drawInsightOverlays(ctx, insights, cameraTransform, bx, contentY) {
|
|
|
79
80
|
ctx.save();
|
|
80
81
|
ctx.globalAlpha *= insight.alpha;
|
|
81
82
|
if (insight.highlightElement) {
|
|
82
|
-
const
|
|
83
|
-
const rx = bx + (
|
|
84
|
-
const ry = contentY + (
|
|
85
|
-
const
|
|
86
|
-
const
|
|
83
|
+
const highlightBox = (0, highlight_element_js_namespaceObject.getCenterHighlightBox)(insight.highlightElement);
|
|
84
|
+
const rx = bx + (highlightBox.left * cameraTransform.zoom + cameraTransform.tx * cameraTransform.zoom);
|
|
85
|
+
const ry = contentY + (highlightBox.top * cameraTransform.zoom + cameraTransform.ty * cameraTransform.zoom);
|
|
86
|
+
const highlightWidth = highlightBox.width * cameraTransform.zoom;
|
|
87
|
+
const highlightHeight = highlightBox.height * cameraTransform.zoom;
|
|
87
88
|
ctx.fillStyle = 'rgba(253, 89, 7, 0.4)';
|
|
88
|
-
ctx.fillRect(rx, ry,
|
|
89
|
+
ctx.fillRect(rx, ry, highlightWidth, highlightHeight);
|
|
89
90
|
ctx.strokeStyle = '#fd5907';
|
|
90
91
|
ctx.lineWidth = 1;
|
|
91
|
-
ctx.strokeRect(rx, ry,
|
|
92
|
+
ctx.strokeRect(rx, ry, highlightWidth, highlightHeight);
|
|
92
93
|
ctx.shadowColor = 'rgba(51, 51, 51, 0.4)';
|
|
93
94
|
ctx.shadowBlur = 2;
|
|
94
95
|
ctx.shadowOffsetX = 4;
|
|
95
96
|
ctx.shadowOffsetY = 4;
|
|
96
|
-
ctx.strokeRect(rx, ry,
|
|
97
|
+
ctx.strokeRect(rx, ry, highlightWidth, highlightHeight);
|
|
97
98
|
ctx.shadowBlur = 0;
|
|
98
99
|
ctx.shadowOffsetX = 0;
|
|
99
100
|
ctx.shadowOffsetY = 0;
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
getCenterHighlightBox: ()=>getCenterHighlightBox,
|
|
28
|
+
normalizeHighlightElementForReport: ()=>normalizeHighlightElementForReport
|
|
29
|
+
});
|
|
30
|
+
function _define_property(obj, key, value) {
|
|
31
|
+
if (key in obj) Object.defineProperty(obj, key, {
|
|
32
|
+
value: value,
|
|
33
|
+
enumerable: true,
|
|
34
|
+
configurable: true,
|
|
35
|
+
writable: true
|
|
36
|
+
});
|
|
37
|
+
else obj[key] = value;
|
|
38
|
+
return obj;
|
|
39
|
+
}
|
|
40
|
+
function _object_spread(target) {
|
|
41
|
+
for(var i = 1; i < arguments.length; i++){
|
|
42
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
43
|
+
var ownKeys = Object.keys(source);
|
|
44
|
+
if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
45
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
46
|
+
}));
|
|
47
|
+
ownKeys.forEach(function(key) {
|
|
48
|
+
_define_property(target, key, source[key]);
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
return target;
|
|
52
|
+
}
|
|
53
|
+
function ownKeys(object, enumerableOnly) {
|
|
54
|
+
var keys = Object.keys(object);
|
|
55
|
+
if (Object.getOwnPropertySymbols) {
|
|
56
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
57
|
+
if (enumerableOnly) symbols = symbols.filter(function(sym) {
|
|
58
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
59
|
+
});
|
|
60
|
+
keys.push.apply(keys, symbols);
|
|
61
|
+
}
|
|
62
|
+
return keys;
|
|
63
|
+
}
|
|
64
|
+
function _object_spread_props(target, source) {
|
|
65
|
+
source = null != source ? source : {};
|
|
66
|
+
if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
67
|
+
else ownKeys(Object(source)).forEach(function(key) {
|
|
68
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
69
|
+
});
|
|
70
|
+
return target;
|
|
71
|
+
}
|
|
72
|
+
const REPORT_HIGHLIGHT_EDGE_SIZE = 8;
|
|
73
|
+
const getCenterHighlightBox = (element)=>{
|
|
74
|
+
const centerX = Math.round(element.center[0]);
|
|
75
|
+
const centerY = Math.round(element.center[1]);
|
|
76
|
+
const offset = Math.ceil(REPORT_HIGHLIGHT_EDGE_SIZE / 2) - 1;
|
|
77
|
+
return {
|
|
78
|
+
left: Math.max(centerX - offset, 0),
|
|
79
|
+
top: Math.max(centerY - offset, 0),
|
|
80
|
+
width: REPORT_HIGHLIGHT_EDGE_SIZE,
|
|
81
|
+
height: REPORT_HIGHLIGHT_EDGE_SIZE
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
const normalizeHighlightElementForReport = (element)=>_object_spread_props(_object_spread({}, element), {
|
|
85
|
+
center: [
|
|
86
|
+
Math.round(element.center[0]),
|
|
87
|
+
Math.round(element.center[1])
|
|
88
|
+
],
|
|
89
|
+
rect: getCenterHighlightBox(element)
|
|
90
|
+
});
|
|
91
|
+
exports.getCenterHighlightBox = __webpack_exports__.getCenterHighlightBox;
|
|
92
|
+
exports.normalizeHighlightElementForReport = __webpack_exports__.normalizeHighlightElementForReport;
|
|
93
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
94
|
+
"getCenterHighlightBox",
|
|
95
|
+
"normalizeHighlightElementForReport"
|
|
96
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
97
|
+
Object.defineProperty(exports, '__esModule', {
|
|
98
|
+
value: true
|
|
99
|
+
});
|
|
@@ -33,6 +33,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
33
33
|
});
|
|
34
34
|
const external_index_js_namespaceObject = require("./index.js");
|
|
35
35
|
const agent_namespaceObject = require("@midscene/core/agent");
|
|
36
|
+
const external_highlight_element_js_namespaceObject = require("./highlight-element.js");
|
|
36
37
|
function _define_property(obj, key, value) {
|
|
37
38
|
if (key in obj) Object.defineProperty(obj, key, {
|
|
38
39
|
value: value,
|
|
@@ -315,21 +316,23 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
|
|
|
315
316
|
}, contextScreenshot));
|
|
316
317
|
locateElements.forEach((element)=>{
|
|
317
318
|
var _task_log_taskInfo, _task_log, _context_shotSize, _context_shotSize1;
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
319
|
+
const highlightElement = (0, external_highlight_element_js_namespaceObject.normalizeHighlightElementForReport)(element);
|
|
320
|
+
const highlightBox = (0, external_highlight_element_js_namespaceObject.getCenterHighlightBox)(highlightElement);
|
|
321
|
+
insightCameraState = _object_spread_props(_object_spread({}, cameraStateForRect(highlightBox, width, height)), {
|
|
322
|
+
pointerLeft: highlightElement.center[0],
|
|
323
|
+
pointerTop: highlightElement.center[1]
|
|
321
324
|
});
|
|
322
325
|
const newCameraState = insightCameraState;
|
|
323
326
|
scripts.push(createScript({
|
|
324
327
|
type: 'insight',
|
|
325
328
|
context: context,
|
|
326
329
|
camera: newCameraState,
|
|
327
|
-
highlightElement
|
|
330
|
+
highlightElement,
|
|
328
331
|
searchArea: null == (_task_log = task.log) ? void 0 : null == (_task_log_taskInfo = _task_log.taskInfo) ? void 0 : _task_log_taskInfo.searchArea,
|
|
329
332
|
duration: 0.5 * locateDuration,
|
|
330
333
|
insightCameraDuration: locateDuration,
|
|
331
334
|
title,
|
|
332
|
-
subTitle:
|
|
335
|
+
subTitle: highlightElement.description || subTitle,
|
|
333
336
|
imageWidth: (null == (_context_shotSize = context.shotSize) ? void 0 : _context_shotSize.width) || imageWidth,
|
|
334
337
|
imageHeight: (null == (_context_shotSize1 = context.shotSize) ? void 0 : _context_shotSize1.height) || imageHeight,
|
|
335
338
|
taskId: currentTaskId
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { LocateResultElement, Rect } from '@midscene/core';
|
|
2
|
+
export declare const getCenterHighlightBox: (element: Pick<LocateResultElement, "center">) => Rect;
|
|
3
|
+
export declare const normalizeHighlightElementForReport: (element: LocateResultElement) => LocateResultElement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@midscene/visualizer",
|
|
3
|
-
"version": "1.6.1
|
|
3
|
+
"version": "1.6.1",
|
|
4
4
|
"repository": "https://github.com/web-infra-dev/midscene",
|
|
5
5
|
"homepage": "https://midscenejs.com/",
|
|
6
6
|
"types": "./dist/types/index.d.ts",
|
|
@@ -58,10 +58,10 @@
|
|
|
58
58
|
"antd": "^5.21.6",
|
|
59
59
|
"buffer": "6.0.3",
|
|
60
60
|
"dayjs": "^1.11.11",
|
|
61
|
-
"@midscene/
|
|
62
|
-
"@midscene/
|
|
63
|
-
"@midscene/
|
|
64
|
-
"@midscene/
|
|
61
|
+
"@midscene/core": "1.6.1",
|
|
62
|
+
"@midscene/shared": "1.6.1",
|
|
63
|
+
"@midscene/playground": "1.6.1",
|
|
64
|
+
"@midscene/web": "1.6.1"
|
|
65
65
|
},
|
|
66
66
|
"license": "MIT",
|
|
67
67
|
"scripts": {
|