@midscene/visualizer 0.0.1

package/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  root: true,
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-magic-numbers': 'off',
+    '@typescript-eslint/no-parameter-properties': 'off',
+  },
+  extends: ['@modern-js'],
+};

package/README.md

@@ -0,0 +1,24 @@
+# visualizer
+
+## Get Started
+
+按开发环境的要求，运行和调试项目
+
+运行和调试组件
+
+```
+pnpm run dev
+```
+
+按照社区规范和最佳实践，生成构建产物
+
+```
+pnpm run build
+```
+
+继续创建更多项目要素
+
+```
+pnpm run new
+```
+

package/dist/es/assets/logo-plain.16842bbc.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2019 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="141.563mm" height="53.8692mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 16897.65 6430.11"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .str0 {stroke:#E62129;stroke-width:23.87;stroke-miterlimit:22.9256}
+    .str1 {stroke:#06B1AB;stroke-width:9.1;stroke-miterlimit:22.9256}
+    .fil0 {fill:none}
+    .fil8 {fill:#FEFEFE}
+    .fil1 {fill:#332C2B}
+    .fil12 {fill:#F7B873}
+    .fil5 {fill:#F3A04E}
+    .fil9 {fill:#52C2F1}
+    .fil13 {fill:#06B1AB}
+    .fil2 {fill:#F63D55}
+    .fil11 {fill:#F9483E}
+    .fil6 {fill:url(#id0)}
+    .fil4 {fill:url(#id1)}
+    .fil10 {fill:url(#id2)}
+    .fil3 {fill:url(#id3)}
+    .fil7 {fill:url(#id4)}
+   ]]>
+  </style>
+  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="11103.21" y1="5027.34" x2="10930.41" y2="1211.98">
+   <stop offset="0" style="stop-opacity:1; stop-color:#0A77D4"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#00B1E0"/>
+  </linearGradient>
+  <linearGradient id="id1" gradientUnits="userSpaceOnUse" xlink:href="#id0" x1="11407.32" y1="5023.83" x2="11286.4" y2="1215.5">
+  </linearGradient>
+  <linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="6311.87" y1="4699.25" x2="3547.5" y2="1677.39">
+   <stop offset="0" style="stop-opacity:1; stop-color:#F65926"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#F0AB1F"/>
+  </linearGradient>
+  <linearGradient id="id3" gradientUnits="userSpaceOnUse" x1="3105.35" y1="5075.61" x2="2612.67" y2="1311.04">
+   <stop offset="0" style="stop-opacity:1; stop-color:#E52652"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#FF4956"/>
+  </linearGradient>
+  <linearGradient id="id4" gradientUnits="userSpaceOnUse" x1="14599.77" y1="4808.34" x2="12000" y2="1573.25">
+   <stop offset="0" style="stop-opacity:1; stop-color:#02C0A7"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#02E097"/>
+  </linearGradient>
+ </defs>
+ <g id="图层_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1978240863120">
+   <path class="fil0 str0" d="M2921.92 814.37l2943.46 0c660.05,0 1200.11,540.04 1200.11,1200.11l0 669.56c-180.23,1562.84 -842.69,2686.31 -2539.2,2867.65l-656.9 0c-1403.42,-112.59 -2125.37,-923.3 -2147.58,-2450.77l0 -1086.44c0,-660.07 540.04,-1200.11 1200.11,-1200.11z"/>
+   <path class="fil1" d="M908.05 649.1c172.38,0 312.1,139.73 312.1,312.1 0,172.38 -139.73,312.1 -312.1,312.1 -172.38,0 -312.1,-139.73 -312.1,-312.1 0,-172.38 139.73,-312.1 312.1,-312.1zm15081.56 0c-172.38,0 -312.1,139.73 -312.1,312.1 0,172.38 139.73,312.1 312.1,312.1 172.38,0 312.1,-139.73 312.1,-312.1 0,-172.38 -139.73,-312.1 -312.1,-312.1zm315.15 -649.07l-4739.56 0c-332.34,-0.73 -635.61,30.83 -892.17,114.33 -1164.61,314.95 -1684.86,539.69 -2204.5,542.55 -529.24,2.92 -1057.71,-221.77 -2243.89,-542.55 -256.56,-83.5 -559.83,-115.06 -892.17,-114.33l-4739.56 0c-326.11,0 -592.9,266.79 -592.9,592.9l0 727.65c0,326.11 262.25,574.15 588.16,562.9 244.44,-8.44 379.43,161.6 368.56,407.41l0 1401.3c844.04,3884.05 6459.63,3705.54 6872.25,-983.68 37.55,-479.97 225.37,-745.7 619.85,-795.03 394.48,49.33 582.3,315.06 619.85,795.03 221.1,2512.67 1570.99,3564.6 3624.76,3705.62 1575.25,-121.99 2822.57,-766.6 3247.49,-2721.94l0 -1401.3c-10.86,-245.81 124.13,-415.84 368.56,-407.41 325.91,11.24 588.16,-236.8 588.16,-562.9l0 -727.65c0,-326.11 -266.79,-592.9 -592.9,-592.9z"/>
+   <path class="fil2" d="M4404.53 5551.69l138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0 -682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0z"/>
+   <path class="fil3" d="M2884.03 3833.6c-562.03,-552.91 337.59,-1229.84 756.52,-784.77l-668.1 -718.53c-248.45,-631.92 -96.85,-1153.5 631.64,-1515.94l-682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0c447.09,-261.52 828.85,-610.16 1124.32,-1073.8 -192.91,108.48 -371.35,123.1 -530.58,12.63 -269.77,225.61 -533.22,868.1 -809.3,676.82l-1287.75 -1333.74z"/>
+   <path class="fil4" d="M12967.79 5585.01c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0 -669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l645.03 0z"/>
+   <circle class="fil5" cx="3266.42" cy="4767.17" r="119.53"/>
+   <path class="fil6 str1" d="M11243.45 3832.57c-587.85,-563.96 251.45,-1254.43 691.78,-800.45l-702.77 -732.9c-285.07,-644.56 -170.14,-1176.57 521.59,-1546.26l-669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l508.57 0c422,-266.75 774.17,-622.36 1034.13,-1095.27 -182.37,110.65 -356.62,125.56 -520.16,12.88 -250.21,230.12 -467.1,885.46 -750.63,690.36l-1351.23 -1360.42z"/>
+   <path class="fil7" d="M11754.05 752.96c-691.73,369.69 -806.66,901.7 -521.59,1546.26l702.77 732.9c-440.33,-453.98 -1279.63,236.49 -691.78,800.45 1571.66,1582.35 780.78,887.85 1587.88,1752.45l136.46 0c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0z"/>
+   <circle class="fil8" cx="13725.89" cy="2247.09" r="867.65"/>
+   <circle class="fil9" cx="11745.99" cy="4944.33" r="119.53"/>
+   <path class="fil10" d="M3604.1 814.37c-728.5,362.44 -880.09,884.02 -631.64,1515.94l668.1 718.53c-418.94,-445.08 -1318.56,231.85 -756.52,784.77l1503.3 1718.08 138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0z"/>
+   <path class="fil11" d="M3602.42 3012.57l-2.01 -1.79 -1.22 -1c-433.3,-363.07 -1259.33,288.49 -715.16,823.82l1503.3 1718.08 138.96 0c366.16,-39.14 684.05,-122.25 959.42,-244.11l-1883.3 -2295z"/>
+   <circle class="fil8" cx="5652.09" cy="2247.09" r="867.65"/>
+   <circle class="fil12" cx="5669.32" cy="4261.82" r="86.65"/>
+   <circle class="fil8" cx="3775.08" cy="4120.55" r="174.77"/>
+   <path class="fil13" d="M11770.33 2919.17l123.64 74.69c7.2,5.99 14.32,12.27 21.35,18.8l1988.29 2318.88c-264.55,126.79 -574.49,213.07 -935.82,253.47l-136.46 0c-807.1,-864.6 -16.22,-170.1 -1587.88,-1752.45 -520.29,-499.15 77.34,-1097.23 526.88,-913.39z"/>
+   <circle class="fil8" cx="12254.65" cy="4297.71" r="174.77"/>
+  </g>
+ </g>
+</svg>

package/dist/es/assets/logo-plain2.16842bbc.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2019 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="141.563mm" height="53.8692mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 16897.65 6430.11"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .str0 {stroke:#E62129;stroke-width:23.87;stroke-miterlimit:22.9256}
+    .str1 {stroke:#06B1AB;stroke-width:9.1;stroke-miterlimit:22.9256}
+    .fil0 {fill:none}
+    .fil8 {fill:#FEFEFE}
+    .fil1 {fill:#332C2B}
+    .fil12 {fill:#F7B873}
+    .fil5 {fill:#F3A04E}
+    .fil9 {fill:#52C2F1}
+    .fil13 {fill:#06B1AB}
+    .fil2 {fill:#F63D55}
+    .fil11 {fill:#F9483E}
+    .fil6 {fill:url(#id0)}
+    .fil4 {fill:url(#id1)}
+    .fil10 {fill:url(#id2)}
+    .fil3 {fill:url(#id3)}
+    .fil7 {fill:url(#id4)}
+   ]]>
+  </style>
+  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="11103.21" y1="5027.34" x2="10930.41" y2="1211.98">
+   <stop offset="0" style="stop-opacity:1; stop-color:#0A77D4"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#00B1E0"/>
+  </linearGradient>
+  <linearGradient id="id1" gradientUnits="userSpaceOnUse" xlink:href="#id0" x1="11407.32" y1="5023.83" x2="11286.4" y2="1215.5">
+  </linearGradient>
+  <linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="6311.87" y1="4699.25" x2="3547.5" y2="1677.39">
+   <stop offset="0" style="stop-opacity:1; stop-color:#F65926"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#F0AB1F"/>
+  </linearGradient>
+  <linearGradient id="id3" gradientUnits="userSpaceOnUse" x1="3105.35" y1="5075.61" x2="2612.67" y2="1311.04">
+   <stop offset="0" style="stop-opacity:1; stop-color:#E52652"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#FF4956"/>
+  </linearGradient>
+  <linearGradient id="id4" gradientUnits="userSpaceOnUse" x1="14599.77" y1="4808.34" x2="12000" y2="1573.25">
+   <stop offset="0" style="stop-opacity:1; stop-color:#02C0A7"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#02E097"/>
+  </linearGradient>
+ </defs>
+ <g id="图层_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1978240863120">
+   <path class="fil0 str0" d="M2921.92 814.37l2943.46 0c660.05,0 1200.11,540.04 1200.11,1200.11l0 669.56c-180.23,1562.84 -842.69,2686.31 -2539.2,2867.65l-656.9 0c-1403.42,-112.59 -2125.37,-923.3 -2147.58,-2450.77l0 -1086.44c0,-660.07 540.04,-1200.11 1200.11,-1200.11z"/>
+   <path class="fil1" d="M908.05 649.1c172.38,0 312.1,139.73 312.1,312.1 0,172.38 -139.73,312.1 -312.1,312.1 -172.38,0 -312.1,-139.73 -312.1,-312.1 0,-172.38 139.73,-312.1 312.1,-312.1zm15081.56 0c-172.38,0 -312.1,139.73 -312.1,312.1 0,172.38 139.73,312.1 312.1,312.1 172.38,0 312.1,-139.73 312.1,-312.1 0,-172.38 -139.73,-312.1 -312.1,-312.1zm315.15 -649.07l-4739.56 0c-332.34,-0.73 -635.61,30.83 -892.17,114.33 -1164.61,314.95 -1684.86,539.69 -2204.5,542.55 -529.24,2.92 -1057.71,-221.77 -2243.89,-542.55 -256.56,-83.5 -559.83,-115.06 -892.17,-114.33l-4739.56 0c-326.11,0 -592.9,266.79 -592.9,592.9l0 727.65c0,326.11 262.25,574.15 588.16,562.9 244.44,-8.44 379.43,161.6 368.56,407.41l0 1401.3c844.04,3884.05 6459.63,3705.54 6872.25,-983.68 37.55,-479.97 225.37,-745.7 619.85,-795.03 394.48,49.33 582.3,315.06 619.85,795.03 221.1,2512.67 1570.99,3564.6 3624.76,3705.62 1575.25,-121.99 2822.57,-766.6 3247.49,-2721.94l0 -1401.3c-10.86,-245.81 124.13,-415.84 368.56,-407.41 325.91,11.24 588.16,-236.8 588.16,-562.9l0 -727.65c0,-326.11 -266.79,-592.9 -592.9,-592.9z"/>
+   <path class="fil2" d="M4404.53 5551.69l138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0 -682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0z"/>
+   <path class="fil3" d="M2884.03 3833.6c-562.03,-552.91 337.59,-1229.84 756.52,-784.77l-668.1 -718.53c-248.45,-631.92 -96.85,-1153.5 631.64,-1515.94l-682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0c447.09,-261.52 828.85,-610.16 1124.32,-1073.8 -192.91,108.48 -371.35,123.1 -530.58,12.63 -269.77,225.61 -533.22,868.1 -809.3,676.82l-1287.75 -1333.74z"/>
+   <path class="fil4" d="M12967.79 5585.01c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0 -669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l645.03 0z"/>
+   <circle class="fil5" cx="3266.42" cy="4767.17" r="119.53"/>
+   <path class="fil6 str1" d="M11243.45 3832.57c-587.85,-563.96 251.45,-1254.43 691.78,-800.45l-702.77 -732.9c-285.07,-644.56 -170.14,-1176.57 521.59,-1546.26l-669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l508.57 0c422,-266.75 774.17,-622.36 1034.13,-1095.27 -182.37,110.65 -356.62,125.56 -520.16,12.88 -250.21,230.12 -467.1,885.46 -750.63,690.36l-1351.23 -1360.42z"/>
+   <path class="fil7" d="M11754.05 752.96c-691.73,369.69 -806.66,901.7 -521.59,1546.26l702.77 732.9c-440.33,-453.98 -1279.63,236.49 -691.78,800.45 1571.66,1582.35 780.78,887.85 1587.88,1752.45l136.46 0c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0z"/>
+   <circle class="fil8" cx="13725.89" cy="2247.09" r="867.65"/>
+   <circle class="fil9" cx="11745.99" cy="4944.33" r="119.53"/>
+   <path class="fil10" d="M3604.1 814.37c-728.5,362.44 -880.09,884.02 -631.64,1515.94l668.1 718.53c-418.94,-445.08 -1318.56,231.85 -756.52,784.77l1503.3 1718.08 138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0z"/>
+   <path class="fil11" d="M3602.42 3012.57l-2.01 -1.79 -1.22 -1c-433.3,-363.07 -1259.33,288.49 -715.16,823.82l1503.3 1718.08 138.96 0c366.16,-39.14 684.05,-122.25 959.42,-244.11l-1883.3 -2295z"/>
+   <circle class="fil8" cx="5652.09" cy="2247.09" r="867.65"/>
+   <circle class="fil12" cx="5669.32" cy="4261.82" r="86.65"/>
+   <circle class="fil8" cx="3775.08" cy="4120.55" r="174.77"/>
+   <path class="fil13" d="M11770.33 2919.17l123.64 74.69c7.2,5.99 14.32,12.27 21.35,18.8l1988.29 2318.88c-264.55,126.79 -574.49,213.07 -935.82,253.47l-136.46 0c-807.1,-864.6 -16.22,-170.1 -1587.88,-1752.45 -520.29,-499.15 77.34,-1097.23 526.88,-913.39z"/>
+   <circle class="fil8" cx="12254.65" cy="4297.71" r="174.77"/>
+  </g>
+ </g>
+</svg>

package/dist/es/component/blackboard.css

@@ -0,0 +1,25 @@
+.blackboard .footer {
+  color: #aaa;
+}
+.blackboard ul {
+  padding-left: 0px;
+}
+.blackboard li {
+  list-style: none;
+}
+.blackboard .bottom-tip {
+  height: 30px;
+}
+.blackboard .bottom-tip-item {
+  max-width: 500px;
+  color: #AAA;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+}
+.blackboard-filter {
+  margin: 10px 0;
+}
+.blackboard-main-content canvas {
+  width: 100%;
+  border: 1px solid #888;
+}

package/dist/es/component/blackboard.js

@@ -0,0 +1,256 @@
+"use client";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as PIXI from "pixi.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Checkbox } from "antd";
+import { highlightColorForType, colorForName } from "./color";
+import "./blackboard.css";
+import { useBlackboardPreference, useInsightDump } from "./store";
+const itemFillAlpha = 0.3;
+const bgOnAlpha = 0.8;
+const bgOffAlpha = 0.3;
+const noop = () => {
+};
+const BlackBoard = () => {
+  const dump = useInsightDump((store) => store.data);
+  const setHighlightSectionNames = useInsightDump((store) => store.setHighlightSectionNames);
+  const setHighlightElements = useInsightDump((store) => store.setHighlightElements);
+  const highlightSectionNames = useInsightDump((store) => store.highlightSectionNames);
+  const highlightElements = useInsightDump((store) => store.highlightElements);
+  const { context, matchedSection: sections, matchedElement: elements } = dump;
+  const { size, screenshotBase64 } = context;
+  const screenWidth = size.width;
+  const screenHeight = size.height;
+  const domRef = useRef(null);
+  const app = useMemo(() => new PIXI.Application(), []);
+  const [appInitialed, setAppInitialed] = useState(false);
+  const itemMarkContainer = useMemo(() => new PIXI.Container(), []);
+  const textContainer = useMemo(() => new PIXI.Container(), []);
+  const pixiBgRef = useRef();
+  const { bgVisible, setBgVisible, textsVisible, setTextsVisible } = useBlackboardPreference();
+  useEffect(() => {
+    Promise.resolve(
+      (() => __async(void 0, null, function* () {
+        if (!domRef.current || !screenWidth) {
+          return;
+        }
+        yield app.init({ width: screenWidth, height: screenHeight, background: 16777215 });
+        const canvasEl = domRef.current;
+        domRef.current.appendChild(app.canvas);
+        const { clientWidth } = domRef.current.parentElement;
+        const targetHeight = window.innerHeight * 0.7;
+        const viewportRatio = clientWidth / targetHeight;
+        if (screenWidth / screenHeight <= viewportRatio) {
+          const ratio = targetHeight / screenHeight;
+          canvasEl.style.width = `${Math.floor(screenWidth * ratio)}px`;
+          canvasEl.style.height = `${Math.floor(screenHeight * ratio)}px`;
+        }
+        app.stage.addChild(itemMarkContainer);
+        app.stage.addChild(textContainer);
+        setAppInitialed(true);
+      }))()
+    );
+    return () => {
+      console.log("will destroy");
+      app == null ? void 0 : app.destroy(true, { children: true, texture: true });
+    };
+  }, [app, screenWidth, screenHeight]);
+  useEffect(() => {
+    if (!appInitialed) {
+      return;
+    }
+    const img = new Image();
+    img.src = screenshotBase64;
+    img.onload = () => {
+      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;
+    };
+  }, [app.stage, appInitialed]);
+  const rectMarkForItem = (rect, name, themeColor, alpha, onPointOver, onPointerOut) => {
+    const { left, top, width, height } = rect;
+    const graphics = new PIXI.Graphics();
+    graphics.beginFill(themeColor, alpha);
+    graphics.lineStyle(1, themeColor, 1);
+    graphics.drawRect(left, top, width, height);
+    graphics.endFill();
+    graphics.interactive = true;
+    graphics.on("pointerover", onPointOver);
+    graphics.on("pointerout", onPointerOut);
+    const nameFontSize = 18;
+    const texts = new PIXI.Text(name, {
+      fontSize: nameFontSize,
+      fill: 0
+    });
+    texts.x = left;
+    texts.y = Math.max(top - (nameFontSize + 4), 0);
+    return [graphics, texts];
+  };
+  const { highlightSectionRects, highlightElementRects } = useMemo(() => {
+    const highlightSectionRects2 = [];
+    const highlightElementRects2 = [];
+    itemMarkContainer.removeChildren();
+    textContainer.removeChildren();
+    sections.forEach((section) => {
+      const ifHighlight = highlightSectionNames.includes(section.name);
+      if (ifHighlight) {
+        highlightSectionRects2.push(section.rect);
+      }
+      const [graphics, texts] = rectMarkForItem(
+        section.rect,
+        section.name,
+        ifHighlight ? highlightColorForType("section") : colorForName("section", section.name),
+        ifHighlight ? 1 : itemFillAlpha,
+        () => {
+          setHighlightSectionNames([section.name]);
+        },
+        () => {
+          setHighlightSectionNames([]);
+        }
+      );
+      itemMarkContainer.addChild(graphics);
+      textContainer.addChild(texts);
+    });
+    highlightElements.forEach((element) => {
+      const { rect } = element;
+      highlightElementRects2.push(rect);
+      if (elements.includes(element)) {
+        return;
+      }
+      const [graphics, texts] = rectMarkForItem(rect, "", highlightColorForType("element"), 1, noop, noop);
+      itemMarkContainer.addChild(graphics);
+      textContainer.addChild(texts);
+    });
+    elements.forEach((element) => {
+      const { rect, content } = element;
+      const ifHighlight = highlightElements.includes(element);
+      const [graphics, texts] = rectMarkForItem(
+        rect,
+        content,
+        ifHighlight ? highlightColorForType("element") : colorForName("element", content),
+        ifHighlight ? 1 : itemFillAlpha,
+        () => {
+          setHighlightElements([element]);
+        },
+        () => {
+          setHighlightElements([]);
+        }
+      );
+      itemMarkContainer.addChild(graphics);
+      textContainer.addChild(texts);
+    });
+    sections.forEach((section) => {
+      const { content } = section;
+      const ifHighlight = highlightSectionNames.includes(section.name);
+      const sectionTheme = ifHighlight ? "#FFFFFF" : colorForName("section", section.name);
+      content.forEach((text) => {
+        const { content: content2, rect } = text;
+        const { left, top } = rect;
+        const style = new PIXI.TextStyle({
+          wordWrap: true,
+          wordWrapWidth: rect.width,
+          fontSize: 18,
+          fill: sectionTheme
+        });
+        const textElement = new PIXI.Text(content2, style);
+        textElement.x = left;
+        textElement.y = top;
+        textContainer.addChild(textElement);
+        const textBorder = new PIXI.Graphics();
+        textBorder.beginFill(11184810, 0.2);
+        textBorder.lineStyle(1, 0, 1);
+        textBorder.drawRect(left, top, rect.width, rect.height);
+        textBorder.endFill();
+        textContainer.addChild(textBorder);
+      });
+    });
+    textContainer.visible = textsVisible;
+    return {
+      highlightSectionRects: highlightSectionRects2,
+      highlightElementRects: highlightElementRects2
+    };
+  }, [
+    app,
+    appInitialed,
+    sections,
+    highlightSectionNames,
+    highlightElements
+    // bgVisible,
+    // textsVisible,
+  ]);
+  const onSetBg = (e) => {
+    setBgVisible(e.target.checked);
+    if (pixiBgRef.current) {
+      pixiBgRef.current.alpha = e.target.checked ? bgOnAlpha : bgOffAlpha;
+    }
+  };
+  const onSetTextsVisible = (e) => {
+    setTextsVisible(e.target.checked);
+    textContainer.visible = e.target.checked;
+  };
+  let bottomTipA = null;
+  if (highlightElementRects.length === 1) {
+    bottomTipA = /* @__PURE__ */ jsx("div", { className: "bottom-tip", children: /* @__PURE__ */ jsxs("div", { className: "bottom-tip-item", children: [
+      "Element: ",
+      JSON.stringify(highlightElementRects[0])
+    ] }) });
+  } else if (highlightElementRects.length > 1) {
+    bottomTipA = /* @__PURE__ */ jsx("div", { className: "bottom-tip", children: /* @__PURE__ */ jsxs("div", { className: "bottom-tip-item", children: [
+      "Element: ",
+      JSON.stringify(highlightElementRects)
+    ] }) });
+  }
+  let bottomTipB = null;
+  if (highlightSectionRects.length === 1) {
+    bottomTipB = /* @__PURE__ */ jsx("div", { className: "bottom-tip", children: /* @__PURE__ */ jsxs("div", { className: "bottom-tip-item", children: [
+      "Section: ",
+      JSON.stringify(highlightSectionRects[0])
+    ] }) });
+  } else if (highlightSectionRects.length > 1) {
+    bottomTipB = /* @__PURE__ */ jsx("div", { className: "bottom-tip", children: /* @__PURE__ */ jsxs("div", { className: "bottom-tip-item", children: [
+      "Sections: ",
+      JSON.stringify(highlightSectionRects)
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "blackboard", children: [
+    /* @__PURE__ */ jsx("div", { className: "blackboard-main-content", style: { width: "100%" }, ref: domRef }),
+    /* @__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: textsVisible, onChange: onSetTextsVisible, children: "Text Mark" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "bottom-tip", children: [
+      bottomTipA,
+      bottomTipB
+    ] })
+  ] });
+};
+var blackboard_default = BlackBoard;
+export {
+  blackboard_default as default
+};

package/dist/es/component/color.js

@@ -0,0 +1,34 @@
+const sectionColor = ["#028391"];
+const elementColor = ["#fb6107"];
+const highlightColorForSection = "#01204E";
+const highlightColorForElement = "#F56824";
+function djb2Hash(str) {
+  if (!str) {
+    console.warn("djb2Hash: empty string");
+    str = "unnamed";
+  }
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) + hash + str.charCodeAt(i);
+  }
+  return hash >>> 0;
+}
+function colorForName(type, name) {
+  const hashNumber = djb2Hash(name);
+  if (type === "section") {
+    return sectionColor[hashNumber % sectionColor.length];
+  } else {
+    return elementColor[hashNumber % elementColor.length];
+  }
+}
+function highlightColorForType(type) {
+  if (type === "section") {
+    return highlightColorForSection;
+  } else {
+    return highlightColorForElement;
+  }
+}
+export {
+  colorForName,
+  highlightColorForType
+};

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

@@ -0,0 +1,34 @@
+.detail-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 10px;
+  background: #FFF;
+}
+.detail-panel .ant-segmented {
+  padding: 0;
+}
+.detail-panel .view-switcher {
+  margin-bottom: 10px;
+  flex-shrink: 0;
+}
+.detail-panel .detail-content {
+  box-sizing: border-box;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  flex-grow: 1;
+}
+.detail-panel .blackboard {
+  margin: 0 auto;
+}
+.detail-panel .screenshot-item {
+  margin-bottom: 10px;
+}
+.detail-panel .screenshot-item .screenshot-item-title {
+  margin-bottom: 5px;
+}
+.detail-panel .screenshot-item img {
+  border: 1px solid #888;
+  max-width: 100%;
+}

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

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./detail-panel.css";
+import { Segmented, ConfigProvider } from "antd";
+import { CameraOutlined, FileTextOutlined, ScheduleOutlined } from "@ant-design/icons";
+import { useEffect, useState } from "react";
+import BlackBoard from "./blackboard";
+import { useExecutionDump, useInsightDump } from "./store";
+import { timeStr, filterBase64Value } from "../utils";
+const ScreenshotItem = (props) => {
+  return /* @__PURE__ */ jsxs("div", { className: "screenshot-item", children: [
+    /* @__PURE__ */ jsx("div", { className: "screenshot-item-title", children: props.time }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("img", { src: props.img }) })
+  ] });
+};
+const VIEW_TYPE_SCREENSHOT = "screenshot";
+const VIEW_TYPE_JSON = "json";
+const VIEW_TYPE_BLACKBOARD = "blackboard";
+const DetailPanel = () => {
+  var _a;
+  const dumpId = useInsightDump((store) => store._loadId);
+  const blackboardViewAvailable = Boolean(dumpId);
+  const activeTask = useExecutionDump((store) => store.activeTask);
+  const [preferredViewType, setViewType] = useState(dumpId ? VIEW_TYPE_BLACKBOARD : VIEW_TYPE_SCREENSHOT);
+  const viewType = preferredViewType === VIEW_TYPE_BLACKBOARD && !dumpId ? VIEW_TYPE_SCREENSHOT : preferredViewType;
+  let content;
+  if (!activeTask) {
+    content = /* @__PURE__ */ jsx("div", { children: "please select a task" });
+  } else if (viewType === VIEW_TYPE_JSON) {
+    content = /* @__PURE__ */ jsx("div", { className: "json-content", children: filterBase64Value(JSON.stringify(activeTask, void 0, 2)) });
+  } else if (viewType === VIEW_TYPE_BLACKBOARD) {
+    if (dumpId) {
+      content = /* @__PURE__ */ jsx(BlackBoard, {}, `${dumpId}`);
+    } else {
+      content = /* @__PURE__ */ jsx("div", { children: "invalid view" });
+    }
+  } else if (viewType === VIEW_TYPE_SCREENSHOT) {
+    if ((_a = activeTask.recorder) == null ? void 0 : _a.length) {
+      content = /* @__PURE__ */ jsx("div", { children: activeTask.recorder.filter((item) => item.screenshot).map((item, index) => {
+        const fullTime = timeStr(item.ts);
+        const str = item.timing ? `${fullTime} / ${item.timing}` : fullTime;
+        return /* @__PURE__ */ jsx(ScreenshotItem, { time: str, img: item.screenshot }, index);
+      }) });
+    } else {
+      content = /* @__PURE__ */ jsx("div", { children: "no screenshot" });
+    }
+  }
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Tab") {
+        if (viewType === VIEW_TYPE_BLACKBOARD) {
+          setViewType(VIEW_TYPE_SCREENSHOT);
+        } else if (viewType === VIEW_TYPE_SCREENSHOT) {
+          setViewType(VIEW_TYPE_JSON);
+        } else {
+          setViewType(blackboardViewAvailable ? VIEW_TYPE_BLACKBOARD : VIEW_TYPE_SCREENSHOT);
+        }
+        e.preventDefault();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+  const options = [
+    { label: "Screenshots", value: VIEW_TYPE_SCREENSHOT, icon: /* @__PURE__ */ jsx(CameraOutlined, {}) },
+    { label: "JSON View", value: VIEW_TYPE_JSON, icon: /* @__PURE__ */ jsx(FileTextOutlined, {}) }
+  ];
+  if (blackboardViewAvailable) {
+    options.unshift({ label: "Visualization", value: VIEW_TYPE_BLACKBOARD, icon: /* @__PURE__ */ jsx(ScheduleOutlined, {}) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "detail-panel", children: [
+    /* @__PURE__ */ jsx("div", { className: "view-switcher", children: /* @__PURE__ */ jsx(
+      ConfigProvider,
+      {
+        theme: {
+          components: {
+            Segmented: {
+              itemSelectedBg: "#D7D7D7",
+              itemSelectedColor: "#000000"
+              // itemHoverColor: '#ffffff',
+              // itemHoverBg: '#A3D6D2', // @sub-blue
+              /* 这里是你的组件 token */
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          Segmented,
+          {
+            options,
+            value: viewType,
+            onChange: (value) => {
+              setViewType(value);
+            }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "detail-content", children: content })
+  ] });
+};
+var detail_panel_default = DetailPanel;
+export {
+  detail_panel_default as default
+};