@midscene/visualizer 0.0.1 → 0.1.1

package/src/component/assets/logo-plain.svg

@@ -1,70 +0,0 @@
-<?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/src/component/assets/logo-plain2.svg

@@ -1,70 +0,0 @@
-<?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/src/component/blackboard.less

@@ -1,37 +0,0 @@
-@import './common.less';
-
-.blackboard {
-  .footer {
-    color: #aaa;
-  }
-
-  ul {
-    padding-left: 0px;
-  }
-
-  li {
-    list-style: none;
-  }
-
-  .bottom-tip {
-    height: 30px;
-  }
-  
-  .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 @heavy-border-color;
-  }
-}

package/src/component/blackboard.tsx

@@ -1,293 +0,0 @@
-'use client';
-import * as PIXI from 'pixi.js';
-import { ReactElement, useEffect, useMemo, useRef, useState } from 'react';
-import { Checkbox } from 'antd';
-import type { CheckboxProps } from 'antd';
-import { Rect } from '../../../midscene/dist/types';
-import { highlightColorForType, colorForName } from './color';
-import './blackboard.less';
-import { useBlackboardPreference, useInsightDump } from './store';
-
-const itemFillAlpha = 0.3;
-const bgOnAlpha = 0.8;
-const bgOffAlpha = 0.3;
-const noop = () => {
-  // noop
-};
-
-const BlackBoard = (): JSX.Element => {
-  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<HTMLDivElement>(null); // Should be HTMLDivElement not HTMLInputElement
-  const app = useMemo<PIXI.Application>(() => new PIXI.Application(), []);
-  const [appInitialed, setAppInitialed] = useState(false);
-
-  const itemMarkContainer = useMemo(() => new PIXI.Container(), []);
-  const textContainer = useMemo(() => new PIXI.Container(), []);
-
-  // key overlays
-  const pixiBgRef = useRef<PIXI.Sprite>();
-  const { bgVisible, setBgVisible, textsVisible, setTextsVisible } = useBlackboardPreference();
-
-  useEffect(() => {
-    Promise.resolve(
-      (async () => {
-        if (!domRef.current || !screenWidth) {
-          return;
-        }
-        await app.init({ width: screenWidth, height: screenHeight, background: 0xffffff });
-        const canvasEl = domRef.current;
-        domRef.current.appendChild(app.canvas); // Ensure app.view is appended
-        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);
-      })(),
-    );
-
-    // Clean up the PIXI application when the component unmounts
-    return () => {
-      console.log('will destroy');
-      app?.destroy(true, { children: true, texture: true });
-    };
-  }, [app, screenWidth, screenHeight]);
-
-  // draw all texts on PIXI app
-  useEffect(() => {
-    if (!appInitialed) {
-      return;
-    }
-
-    // draw the screenshot base64
-    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: Rect,
-    name: string,
-    themeColor: string,
-    alpha: number,
-    onPointOver: () => void,
-    onPointerOut: () => void,
-  ) => {
-    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: 0x0,
-    });
-    texts.x = left;
-    texts.y = Math.max(top - (nameFontSize + 4), 0);
-    return [graphics, texts];
-  };
-
-  const { highlightSectionRects, highlightElementRects } = useMemo(() => {
-    const highlightSectionRects: Rect[] = [];
-    const highlightElementRects: Rect[] = [];
-
-    itemMarkContainer.removeChildren();
-    textContainer.removeChildren();
-
-    sections.forEach((section) => {
-      // draw a section overlay
-      const ifHighlight = highlightSectionNames.includes(section.name);
-      if (ifHighlight) {
-        highlightSectionRects.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);
-    });
-
-    // some are tmp highlights, draw them separately
-    highlightElements.forEach((element) => {
-      const { rect } = element;
-      highlightElementRects.push(rect);
-      if (elements.includes(element)) {
-        return;
-      }
-      const [graphics, texts] = rectMarkForItem(rect, '', highlightColorForType('element'), 1, noop, noop);
-      itemMarkContainer.addChild(graphics);
-      textContainer.addChild(texts);
-    });
-
-    // element mark
-    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, 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(content, style);
-        textElement.x = left;
-        textElement.y = top;
-        textContainer.addChild(textElement);
-
-        const textBorder = new PIXI.Graphics();
-        textBorder.beginFill(0xaaaaaa, 0.2);
-        textBorder.lineStyle(1, 0x0, 1);
-        textBorder.drawRect(left, top, rect.width, rect.height);
-        textBorder.endFill();
-        textContainer.addChild(textBorder);
-      });
-    });
-    textContainer.visible = textsVisible;
-    return {
-      highlightSectionRects,
-      highlightElementRects,
-    };
-  }, [
-    app,
-    appInitialed,
-    sections,
-    highlightSectionNames,
-    highlightElements,
-    // bgVisible,
-    // textsVisible,
-  ]);
-
-  const onSetBg: CheckboxProps['onChange'] = (e) => {
-    setBgVisible(e.target.checked);
-    if (pixiBgRef.current) {
-      pixiBgRef.current.alpha = e.target.checked ? bgOnAlpha : bgOffAlpha;
-    }
-  };
-
-  const onSetTextsVisible: CheckboxProps['onChange'] = (e) => {
-    setTextsVisible(e.target.checked);
-    textContainer.visible = e.target.checked;
-  };
-
-  let bottomTipA: ReactElement | null = null;
-  if (highlightElementRects.length === 1) {
-    bottomTipA = (
-      <div className="bottom-tip">
-        <div className="bottom-tip-item">Element: {JSON.stringify(highlightElementRects[0])}</div>
-      </div>
-    );
-  } else if (highlightElementRects.length > 1) {
-    bottomTipA = (
-      <div className="bottom-tip">
-        <div className="bottom-tip-item">Element: {JSON.stringify(highlightElementRects)}</div>
-      </div>
-    );
-  }
-
-  let bottomTipB: ReactElement | null = null;
-  if (highlightSectionRects.length === 1) {
-    bottomTipB = (
-      <div className="bottom-tip">
-        <div className="bottom-tip-item">Section: {JSON.stringify(highlightSectionRects[0])}</div>
-      </div>
-    );
-  } else if (highlightSectionRects.length > 1) {
-    bottomTipB = (
-      <div className="bottom-tip">
-        <div className="bottom-tip-item">Sections: {JSON.stringify(highlightSectionRects)}</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="blackboard">
-      <div className="blackboard-main-content" style={{ width: '100%' }} ref={domRef} />
-      <div className="blackboard-filter">
-        <div className="overlay-control">
-          <Checkbox checked={bgVisible} onChange={onSetBg}>
-            Screenshot
-          </Checkbox>
-          <Checkbox checked={textsVisible} onChange={onSetTextsVisible}>
-            Text Mark
-          </Checkbox>
-        </div>
-      </div>
-      <div className="bottom-tip">
-        {bottomTipA}
-        {bottomTipB}
-      </div>
-
-      {/* {footer} */}
-    </div>
-  );
-};
-
-export default BlackBoard;

package/src/component/color.tsx

@@ -1,34 +0,0 @@
-// https://coolors.co/palettes/popular/#01204e
-const sectionColor = ['#028391'];
-const elementColor = ['#fb6107'];
-const highlightColorForSection = '#01204E';
-const highlightColorForElement = '#F56824'; // @main-orange
-
-function djb2Hash(str?: string): number {
-  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); // hash * 33 + c
-  }
-  return hash >>> 0; // Convert to unsigned 32
-}
-
-export function colorForName(type: 'section' | 'element', name: string): string {
-  const hashNumber = djb2Hash(name);
-  if (type === 'section') {
-    return sectionColor[hashNumber % sectionColor.length];
-  } else {
-    return elementColor[hashNumber % elementColor.length];
-  }
-}
-
-export function highlightColorForType(type: 'section' | 'element'): string {
-  if (type === 'section') {
-    return highlightColorForSection;
-  } else {
-    return highlightColorForElement;
-  }
-}

package/src/component/common.less

@@ -1,21 +0,0 @@
-@main-blue: #06B1AB;
-@sub-blue: #A3D6D2;
-
-@main-orange: #F9483E;
-
-@side-bg: #ECECEC;
-@title-bg: #DDDDDD;
-@border-color: #CCCCCC;
-@heavy-border-color: #888;
-
-@selected-bg: @main-blue;
-@selected-text: #ffffff;
-@hover-bg: @sub-blue;
-@hover-text: #333;
-
-
-@weak-text: #777;
-@weak-bg: #F3F3F3;
-
-@side-horizontal-padding: 10px;
-@side-vertical-spacing: 10px;

package/src/component/detail-panel.less

@@ -1,47 +0,0 @@
-@import './common.less';
-
-@layout-space: 10px;
-
-.detail-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: @layout-space;
-  background: #FFF;
-
-  .ant-segmented{
-    padding: 0;
-  }
-
-  .view-switcher{
-    margin-bottom: @layout-space;
-    flex-shrink: 0;
-  }
-
-  .detail-content{
-    box-sizing: border-box;
-    justify-content: center;
-    flex-direction: column;
-    display: flex;
-    flex-grow: 1;
-  }
-
-  .blackboard {
-    margin: 0 auto;
-  }
-
-  .screenshot-item {
-    margin-bottom: @layout-space;
-
-    .screenshot-item-title {
-      // font-weight: bold;
-      margin-bottom: 5px;
-    }
-
-    img {
-      border: 1px solid @heavy-border-color;
-      max-width: 100%;
-    }
-  }
-
-}