kirigaya/digital-vcd-render
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化线sidebar | 完成数据格式转化

Browse Source
This commit is contained in:
锦恢 2024-08-27 22:31:51 +08:00
parent 60a370413b
commit 948370b644
24 changed files with 1284 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

578
design/webgl.drawio
View File

@ -1,6 +1,6 @@
<mxfile host="65bd71144e"> <mxfile host="65bd71144e">
<diagram id="fareUikBvdjO0hJmng89" name="makeBitVertex 原理图"> <diagram id="fareUikBvdjO0hJmng89" name="makeBitVertex 原理图">
<mxGraphModel dx="1353" dy="651" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" math="1" shadow="0"> <mxGraphModel dx="1080" dy="662" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" math="1" shadow="0">
<root> <root>
<mxCell id="0"/> <mxCell id="0"/>
<mxCell id="1" parent="0"/> <mxCell id="1" parent="0"/>
@ -566,11 +566,38 @@
<mxCell id="136" value="\[w&lt;br style=&quot;font-size: 18px;&quot;&gt;\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;fontSize=18;" parent="1" vertex="1"> <mxCell id="136" value="\[w&lt;br style=&quot;font-size: 18px;&quot;&gt;\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;fontSize=18;" parent="1" vertex="1">
<mxGeometry x="550" y="1460" width="50" height="60" as="geometry"/> <mxGeometry x="550" y="1460" width="50" height="60" as="geometry"/>
</mxCell> </mxCell>
<mxCell id="-8kxPptAfdRWaRZbJtpB-136" value="0" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="795" y="885" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="-8kxPptAfdRWaRZbJtpB-137" value="1" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="655" y="885" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="-8kxPptAfdRWaRZbJtpB-138" value="2" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="650" y="1020" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="-8kxPptAfdRWaRZbJtpB-139" value="3" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="650" y="1145" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="-8kxPptAfdRWaRZbJtpB-140" value="4" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="795" y="1230" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="-8kxPptAfdRWaRZbJtpB-141" value="5" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="950" y="1140" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="-8kxPptAfdRWaRZbJtpB-142" value="6" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="950" y="1000" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="-8kxPptAfdRWaRZbJtpB-143" value="7" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="940" y="885" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="137" value="t" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;fontColor=#000000;darkOpacity=0.05;fillColor=#FFF9B2;strokeColor=none;fillStyle=solid;direction=west;gradientDirection=north;gradientColor=#FFF2A1;shadow=1;size=20;pointerEvents=1;" parent="1" vertex="1">
<mxGeometry x="270" y="550" width="140" height="160" as="geometry"/>
</mxCell>
</root> </root>
</mxGraphModel> </mxGraphModel>
</diagram> </diagram>
<diagram id="ldzhMOmdS79g5s7hsVNb" name="makeVecVertex 原理图"> <diagram id="ldzhMOmdS79g5s7hsVNb" name="makeVecVertex 原理图">
<mxGraphModel dx="-105" dy="374" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" math="1" shadow="0"> <mxGraphModel dx="-425" dy="529" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" math="1" shadow="0">
<root> <root>
<mxCell id="0"/> <mxCell id="0"/>
<mxCell id="1" parent="0"/> <mxCell id="1" parent="0"/>
@ -838,161 +865,650 @@
</root> </root>
</mxGraphModel> </mxGraphModel>
</diagram> </diagram>
<diagram id="GKIpZteT5tedDBQSRgQ5" name="第 3 页"> <diagram id="GKIpZteT5tedDBQSRgQ5" name="corner-case 讨论和推导">
<mxGraphModel dx="794" dy="-626" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="1" shadow="0"> <mxGraphModel dx="280" dy="-538" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" math="1" shadow="0">
<root> <root>
<mxCell id="0"/> <mxCell id="0"/>
<mxCell id="1" parent="0"/> <mxCell id="1" parent="0"/>
<mxCell id="JvdDJyfJznzZnJYvxX4_-1" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-1" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="850" y="1250" as="sourcePoint"/> <mxPoint x="850" y="1250" as="sourcePoint"/>
<mxPoint x="650" y="1250" as="targetPoint"/> <mxPoint x="650" y="1250" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-2" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-2" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="670" y="1470" as="sourcePoint"/> <mxPoint x="670" y="1470" as="sourcePoint"/>
<mxPoint x="880" y="1350" as="targetPoint"/> <mxPoint x="880" y="1350" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-3" value="\[p_0\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" vertex="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-3" value="\[p_0\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" parent="1" vertex="1">
<mxGeometry x="640" y="1540" width="60" height="30" as="geometry"/> <mxGeometry x="640" y="1540" width="60" height="30" as="geometry"/>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-5" value="\[p_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" vertex="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-5" value="\[p_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" parent="1" vertex="1">
<mxGeometry x="1080" y="1250" width="60" height="30" as="geometry"/> <mxGeometry x="1080" y="1250" width="60" height="30" as="geometry"/>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-6" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-6" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1030" y="1400" as="sourcePoint"/> <mxPoint x="1030" y="1400" as="sourcePoint"/>
<mxPoint x="880" y="1320" as="targetPoint"/> <mxPoint x="880" y="1320" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-7" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-7" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1330" y="1310" as="sourcePoint"/> <mxPoint x="1330" y="1310" as="sourcePoint"/>
<mxPoint x="1170" y="1310" as="targetPoint"/> <mxPoint x="1170" y="1310" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-8" value="\[p_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" vertex="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-8" value="\[p_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" parent="1" vertex="1">
<mxGeometry x="1140" y="1280" width="60" height="30" as="geometry"/> <mxGeometry x="1140" y="1280" width="60" height="30" as="geometry"/>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-9" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-9" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="880" y="1290" as="sourcePoint"/> <mxPoint x="880" y="1290" as="sourcePoint"/>
<mxPoint x="670" y="1470" as="targetPoint"/> <mxPoint x="670" y="1470" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-10" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-10" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="669.58" y="1470" as="sourcePoint"/> <mxPoint x="669.58" y="1470" as="sourcePoint"/>
<mxPoint x="669.58" y="1510.0000000000002" as="targetPoint"/> <mxPoint x="669.58" y="1510.0000000000002" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-11" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-11" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="880" y="1350" as="sourcePoint"/> <mxPoint x="880" y="1350" as="sourcePoint"/>
<mxPoint x="880" y="1290" as="targetPoint"/> <mxPoint x="880" y="1290" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-12" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-12" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="670" y="1510" as="sourcePoint"/> <mxPoint x="670" y="1510" as="sourcePoint"/>
<mxPoint x="880" y="1350" as="targetPoint"/> <mxPoint x="880" y="1350" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-13" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-13" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1130" y="1430" as="sourcePoint"/> <mxPoint x="1130" y="1430" as="sourcePoint"/>
<mxPoint x="1130" y="1310" as="targetPoint"/> <mxPoint x="1130" y="1310" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-14" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-14" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1130" y="1310" as="sourcePoint"/> <mxPoint x="1130" y="1310" as="sourcePoint"/>
<mxPoint x="1170" y="1270" as="targetPoint"/> <mxPoint x="1170" y="1270" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-15" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-15" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1210" y="1470" as="sourcePoint"/> <mxPoint x="1210" y="1470" as="sourcePoint"/>
<mxPoint x="1210" y="1350" as="targetPoint"/> <mxPoint x="1210" y="1350" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-16" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-16" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1330" y="1350" as="sourcePoint"/> <mxPoint x="1330" y="1350" as="sourcePoint"/>
<mxPoint x="1210" y="1350" as="targetPoint"/> <mxPoint x="1210" y="1350" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-17" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-17" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1330" y="1270" as="sourcePoint"/> <mxPoint x="1330" y="1270" as="sourcePoint"/>
<mxPoint x="1164" y="1270" as="targetPoint"/> <mxPoint x="1164" y="1270" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-18" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-18" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1330" y="1350" as="sourcePoint"/> <mxPoint x="1330" y="1350" as="sourcePoint"/>
<mxPoint x="1330" y="1270" as="targetPoint"/> <mxPoint x="1330" y="1270" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-19" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-19" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1210" y="1470" as="sourcePoint"/> <mxPoint x="1210" y="1470" as="sourcePoint"/>
<mxPoint x="1130" y="1430" as="targetPoint"/> <mxPoint x="1130" y="1430" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-20" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-20" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1210" y="1350" as="sourcePoint"/> <mxPoint x="1210" y="1350" as="sourcePoint"/>
<mxPoint x="1130" y="1430" as="targetPoint"/> <mxPoint x="1130" y="1430" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-21" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-21" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1210" y="1350" as="sourcePoint"/> <mxPoint x="1210" y="1350" as="sourcePoint"/>
<mxPoint x="1130" y="1310" as="targetPoint"/> <mxPoint x="1130" y="1310" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-22" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-22" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1210" y="1350" as="sourcePoint"/> <mxPoint x="1210" y="1350" as="sourcePoint"/>
<mxPoint x="1170" y="1270" as="targetPoint"/> <mxPoint x="1170" y="1270" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-23" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-23" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1210" y="1350" as="sourcePoint"/> <mxPoint x="1210" y="1350" as="sourcePoint"/>
<mxPoint x="1330" y="1270" as="targetPoint"/> <mxPoint x="1330" y="1270" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-25" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-25" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="670" y="1490" as="sourcePoint"/> <mxPoint x="670" y="1490" as="sourcePoint"/>
<mxPoint x="880" y="1320" as="targetPoint"/> <mxPoint x="880" y="1320" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-26" value="" style="endArrow=none;dashed=1;html=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-26" value="" style="endArrow=none;dashed=1;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="570" y="1450" as="sourcePoint"/> <mxPoint x="570" y="1450" as="sourcePoint"/>
<mxPoint x="650" y="1450" as="targetPoint"/> <mxPoint x="650" y="1450" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-27" value="" style="endArrow=none;dashed=1;html=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-27" value="" style="endArrow=none;dashed=1;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="570" y="1530" as="sourcePoint"/> <mxPoint x="570" y="1530" as="sourcePoint"/>
<mxPoint x="650" y="1530" as="targetPoint"/> <mxPoint x="650" y="1530" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-28" value="" style="endArrow=classic;startArrow=classic;html=1;" edge="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-28" value="" style="endArrow=classic;startArrow=classic;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry"> <mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="610" y="1530" as="sourcePoint"/> <mxPoint x="610" y="1530" as="sourcePoint"/>
<mxPoint x="610" y="1450" as="targetPoint"/> <mxPoint x="610" y="1450" as="targetPoint"/>
</mxGeometry> </mxGeometry>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-29" value="\[w&lt;br style=&quot;font-size: 18px;&quot;&gt;\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;fontSize=18;" vertex="1" parent="1"> <mxCell id="JvdDJyfJznzZnJYvxX4_-29" value="\[w&lt;br style=&quot;font-size: 18px;&quot;&gt;\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;fontSize=18;" parent="1" vertex="1">
<mxGeometry x="550" y="1460" width="50" height="60" as="geometry"/> <mxGeometry x="550" y="1460" width="50" height="60" as="geometry"/>
</mxCell> </mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-30" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="640" y="1920" as="sourcePoint"/>
<mxPoint x="520" y="1800" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-31" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="800" y="1800" as="sourcePoint"/>
<mxPoint x="640" y="1920" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-32" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="640" y="2240" as="sourcePoint"/>
<mxPoint x="520" y="2400" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-33" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="800" y="2340" as="sourcePoint"/>
<mxPoint x="640" y="2240" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-34" value="case 1" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="420" y="1760" width="70" height="34" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-35" value="case 2" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="420" y="2210" width="70" height="34" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-36" value="case 3" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="420" y="2700" width="70" height="34" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-37" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="800" y="2740" as="sourcePoint"/>
<mxPoint x="519.9999999999999" y="2740" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-38" value="case 4" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="420" y="3170" width="70" height="34" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-39" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="680" y="3210" as="sourcePoint"/>
<mxPoint x="519.9999999999999" y="3210" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-40" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="800" y="3080" as="sourcePoint"/>
<mxPoint x="679.9999999999999" y="3210" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-41" value="case 5" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="400" y="3640" width="70" height="34" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-42" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="680" y="3600" as="sourcePoint"/>
<mxPoint x="519.9999999999999" y="3600" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-43" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="800" y="3720" as="sourcePoint"/>
<mxPoint x="680" y="3600" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-44" value="case 6" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="400" y="4080" width="70" height="34" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-45" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="560" y="4040" as="sourcePoint"/>
<mxPoint x="479.9999999999999" y="4200" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-46" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="790" y="4043" as="sourcePoint"/>
<mxPoint x="560" y="4040" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-47" value="case 7" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="400" y="4550" width="70" height="34" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-48" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="760" y="4600" as="sourcePoint"/>
<mxPoint x="599.9999999999999" y="4600" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-49" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="600" y="4600" as="sourcePoint"/>
<mxPoint x="480" y="4480" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-50" value="\[p_0\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" parent="1" vertex="1">
<mxGeometry x="500" y="1770" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-51" value="\[p_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" parent="1" vertex="1">
<mxGeometry x="790" y="1770" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-52" value="\[p_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" parent="1" vertex="1">
<mxGeometry x="650" y="1910" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-53" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="600" y="1960" as="sourcePoint"/>
<mxPoint x="640" y="1880" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-54" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="670" y="1960" as="sourcePoint"/>
<mxPoint x="640" y="1880" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-55" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="600" y="1960" as="sourcePoint"/>
<mxPoint x="670" y="1960" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-56" value="" style="endArrow=none;dashed=1;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="469.9999999999999" y="1880" as="sourcePoint"/>
<mxPoint x="630" y="1880" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-57" value="" style="endArrow=none;dashed=1;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="469.9999999999999" y="1920" as="sourcePoint"/>
<mxPoint x="549.9999999999999" y="1920" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-58" value="" style="endArrow=classic;startArrow=classic;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="510" y="1920" as="sourcePoint"/>
<mxPoint x="509.9999999999999" y="1880" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-59" value="\[w&lt;br style=&quot;font-size: 18px;&quot;&gt;\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;fontSize=18;" parent="1" vertex="1">
<mxGeometry x="440" y="1870" width="50" height="60" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-63" value="" style="endArrow=none;dashed=1;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="469.9999999999999" y="1920" as="sourcePoint"/>
<mxPoint x="630" y="1920" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-64" value="" style="endArrow=none;dashed=1;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="469.9999999999999" y="1960" as="sourcePoint"/>
<mxPoint x="590" y="1960" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-65" value="" style="endArrow=classic;startArrow=classic;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="509.9999999999999" y="1960" as="sourcePoint"/>
<mxPoint x="509.9999999999999" y="1920" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-66" value="\[w&lt;br style=&quot;font-size: 18px;&quot;&gt;\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;fontSize=18;" parent="1" vertex="1">
<mxGeometry x="440" y="1910" width="50" height="60" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-67" value="\[c_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="610" y="1840" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-70" value="\[k_1 (p_1p_2的斜率)&lt;br&gt;\]" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="730" y="1860" width="100" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-71" value="\[c_1 (x_1, y_1 + w)\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="840" y="1807.5" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-72" value="\[c_3 (x_1+\alpha, y_1 - w)\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="840" y="1887.5" width="170" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-73" value="\[\alpha = 2w(\sqrt{1+\frac{1}{k_1^2}}-\frac{1}{k_1})\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="930" y="1887.5" width="300" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-74" value="\[c_2 (x_1+\beta, y_1 - w)\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="840" y="1962.5" width="170" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-75" value="" style="endArrow=none;dashed=1;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="640" y="1920" as="sourcePoint"/>
<mxPoint x="639.6599999999999" y="2020" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-76" value="" style="endArrow=classic;startArrow=classic;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="640" y="2000" as="sourcePoint"/>
<mxPoint x="599.9999999999999" y="2000" as="targetPoint"/>
<Array as="points">
<mxPoint x="640" y="2000"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-77" value="\[c_3\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="660" y="1940" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-78" value="\[c_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="565" y="1932.5" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-79" value="" style="endArrow=none;dashed=1;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="670" y="1970" as="sourcePoint"/>
<mxPoint x="670" y="2020" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-80" value="" style="endArrow=none;dashed=1;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="600" y="1970" as="sourcePoint"/>
<mxPoint x="600" y="2020" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-81" value="" style="endArrow=classic;startArrow=classic;html=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="670" y="2000" as="sourcePoint"/>
<mxPoint x="639.9999999999999" y="2000" as="targetPoint"/>
<Array as="points"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-82" value="\[\beta\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="590" y="2010" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-83" value="\[\alpha\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="625" y="2010" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-84" value="\[k_2 (p_0p_1的斜率)&lt;br&gt;\]" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="550" y="1800" width="100" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-85" value="\[\beta = 2w(-\sqrt{1+\frac{1}{k_2^2}}-\frac{1}{k_2})\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="930" y="1962.5" width="300" height="30" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-86" value="case 8" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="400" y="4830" width="70" height="34" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-87" value="case 9" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="400" y="5120" width="70" height="34" as="geometry"/>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-88" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="800" y="5010" as="sourcePoint"/>
<mxPoint x="629.9999999999999" y="4930" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-89" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="630" y="4930" as="sourcePoint"/>
<mxPoint x="510" y="4810" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-90" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="720" y="5120" as="sourcePoint"/>
<mxPoint x="639.9999999999999" y="5310" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="JvdDJyfJznzZnJYvxX4_-91" value="" style="endArrow=none;html=1;strokeWidth=2;fillColor=#f0a30a;strokeColor=#F0B102;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="640" y="5310" as="sourcePoint"/>
<mxPoint x="490" y="5360" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-1" value="\[p_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" parent="1" vertex="1">
<mxGeometry x="460" y="2360" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-2" value="\[p_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" parent="1" vertex="1">
<mxGeometry x="610" y="2200" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-3" value="\[p_3\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#F0B102;" parent="1" vertex="1">
<mxGeometry x="780" y="2350" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-4" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="675" y="2190" as="sourcePoint"/>
<mxPoint x="605" y="2190" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-5" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="640" y="2290" as="sourcePoint"/>
<mxPoint x="605" y="2190" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-6" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="675" y="2190" as="sourcePoint"/>
<mxPoint x="640" y="2290" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-7" value="\[\alpha = \frac{2w}{k}(1-\sqrt{k^2+1})\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="855" y="2244" width="230" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-8" value="\[c_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="610" y="2290" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-9" value="\[c_3\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="670" y="2160" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-10" value="\[c_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="550" y="2160" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-11" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="680" y="3160" as="sourcePoint"/>
<mxPoint x="680" y="3260" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-12" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="680" y="3160" as="sourcePoint"/>
<mxPoint x="720" y="3240" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-13" value="\[c_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="650" y="3120" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-14" value="\[c_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="650" y="3260" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-15" value="\[c_3\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="710" y="3230" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-16" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="679.66" y="3560" as="sourcePoint"/>
<mxPoint x="679.66" y="3660" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-17" value="\[c_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="650" y="3520" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-18" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="710" y="3560" as="sourcePoint"/>
<mxPoint x="680" y="3660" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-19" value="\[c_3\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="695" y="3530" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-20" value="\[c_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="640" y="3660" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-21" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="520" y="4010" as="sourcePoint"/>
<mxPoint x="570.0000000000001" y="4114" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-22" value="\[c_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="550" y="4100" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-23" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="570.0000000000001" y="4010" as="sourcePoint"/>
<mxPoint x="570.0000000000001" y="4110" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-24" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="520" y="4010" as="sourcePoint"/>
<mxPoint x="570" y="4010" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-25" value="\[c_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="480" y="3980" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-26" value="\[c_3\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="550" y="3970" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-27" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="600" y="4550" as="sourcePoint"/>
<mxPoint x="600.0000000000001" y="4640" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-28" value="\[c_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="590" y="4520" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-29" value="\[c_3\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="590" y="4630" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-30" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="600" y="4550" as="sourcePoint"/>
<mxPoint x="570" y="4640" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-31" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="600" y="4640" as="sourcePoint"/>
<mxPoint x="570" y="4640" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-32" value="\[c_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="530" y="4630" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-33" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;entryX=0.506;entryY=0.061;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" target="22G-YO-WGZ0W5-mVoAxB-36" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="630" y="4880" as="sourcePoint"/>
<mxPoint x="630.0000000000001" y="4970" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-34" value="\[c_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="610" y="4840" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-35" value="\[c_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="565" y="4970" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-36" value="\[c_3\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="625" y="4970" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-37" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;" parent="1" target="22G-YO-WGZ0W5-mVoAxB-35" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="630" y="4880" as="sourcePoint"/>
<mxPoint x="640.0000000000001" y="4980" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-38" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;entryX=0.506;entryY=0.061;entryDx=0;entryDy=0;entryPerimeter=0;exitX=0.512;exitY=0.978;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="22G-YO-WGZ0W5-mVoAxB-39" target="22G-YO-WGZ0W5-mVoAxB-41" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="625" y="5260" as="sourcePoint"/>
<mxPoint x="625.0000000000001" y="5350" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-39" value="\[c_1\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="610" y="5250" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-40" value="\[c_2\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="660" y="5360" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-41" value="\[c_3\]" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="670" y="5360" width="60" height="30" as="geometry"/>
</mxCell>
<mxCell id="22G-YO-WGZ0W5-mVoAxB-42" value="" style="endArrow=none;html=1;strokeColor=#FFFFFF;strokeWidth=2;fontColor=#F0B102;dashed=1;exitX=0.499;exitY=1.042;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="22G-YO-WGZ0W5-mVoAxB-39" target="22G-YO-WGZ0W5-mVoAxB-40" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="625" y="5260" as="sourcePoint"/>
<mxPoint x="635.0000000000001" y="5360" as="targetPoint"/>
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
</diagram>
<diagram id="m1BxEIXYp9gx6O9X7brQ" name="第 4 页">
<mxGraphModel dx="680" dy="662" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" math="1" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-8" style="edgeStyle=none;html=1;exitX=1;exitY=0;exitDx=0;exitDy=0;entryX=1;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="Cx0NpzRG0N7dnmMbMZ0R-1" target="Cx0NpzRG0N7dnmMbMZ0R-2">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-9" style="edgeStyle=none;html=1;exitX=0;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="Cx0NpzRG0N7dnmMbMZ0R-1" target="Cx0NpzRG0N7dnmMbMZ0R-2">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-1" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
<mxGeometry x="120" y="240" width="80" height="80" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-2" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
<mxGeometry x="320" y="360" width="80" height="80" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-10" style="edgeStyle=none;html=1;exitX=1;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="Cx0NpzRG0N7dnmMbMZ0R-4" target="Cx0NpzRG0N7dnmMbMZ0R-5">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-11" style="edgeStyle=none;html=1;exitX=1;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="Cx0NpzRG0N7dnmMbMZ0R-4" target="Cx0NpzRG0N7dnmMbMZ0R-5">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-4" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
<mxGeometry x="120" y="570" width="80" height="80" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-5" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
<mxGeometry x="370" y="570" width="80" height="80" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-12" style="edgeStyle=none;html=1;exitX=0;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="Cx0NpzRG0N7dnmMbMZ0R-6" target="Cx0NpzRG0N7dnmMbMZ0R-7">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-13" style="edgeStyle=none;html=1;exitX=1;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="Cx0NpzRG0N7dnmMbMZ0R-6" target="Cx0NpzRG0N7dnmMbMZ0R-7">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-6" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
<mxGeometry x="120" y="800" width="80" height="80" as="geometry"/>
</mxCell>
<mxCell id="Cx0NpzRG0N7dnmMbMZ0R-7" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
<mxGeometry x="370" y="710" width="80" height="80" as="geometry"/>
</mxCell>
</root> </root>
</mxGraphModel> </mxGraphModel>
</diagram> </diagram>

11
public/vcd.css
View File

@ -4,7 +4,7 @@
--main-color: #CB81DA; --main-color: #CB81DA;
--main-dark-color: #2D323B; --main-dark-color: #2D323B;
--main-light-color: var(--main-color); --main-light-color: var(--main-color);
--sidebar-width: 230px; --sidebar-width: 330px;
--right-nav-width: 60px; --right-nav-width: 60px;
--time-scale-height: 50px; --time-scale-height: 50px;
--sidebar-padding: 10px; --sidebar-padding: 10px;
@ -119,3 +119,12 @@ a {
height: 200px; height: 200px;
width: 200px; width: 200px;
} }
.el-radio-button__original-radio:disabled:checked+.el-radio-button__inner {
opacity: 0.6;
}
.el-select__wrapper.is-disabled {
opacity: 0.6;
box-shadow: unset !important;
}

2
src/App.vue
View File

@ -73,7 +73,7 @@ onMounted(async () => {
// 设置全局宏 // 设置全局宏
document.body.style.setProperty('--time-scale-height', '50px'); document.body.style.setProperty('--time-scale-height', '50px');
document.body.style.setProperty('--vcd-render-padding', '30px'); document.body.style.setProperty('--vcd-render-padding', '30px');
document.body.style.setProperty('--sidebar-width', '230px'); document.body.style.setProperty('--sidebar-width', '330px');
document.body.style.setProperty('--toolbar-height', '60px'); document.body.style.setProperty('--toolbar-height', '60px');
// signal height // signal height

6
src/components/sidebar/group-context-menu.vue
View File

@ -6,6 +6,7 @@
:ref="el => groupcontextmenu.groupNameInput = el" :ref="el => groupcontextmenu.groupNameInput = el"
v-model="value" v-model="value"
size="default" size="default"
@keydown.enter="onKeydownEnter()"
></el-input> ></el-input>
</div> </div>
<div class="group-color-selector"> <div class="group-color-selector">
@ -71,11 +72,14 @@ const value = computed({
} }
}); });
function onClick(item) { function onClick(item) {
groupcontextmenu.currentGroupView.groupInfo.color = item.color; groupcontextmenu.currentGroupView.groupInfo.color = item.color;
} }
function onKeydownEnter() {
groupcontextmenu.show = false;
}
</script> </script>
<style> <style>

16
src/components/sidebar/group-item.vue
View File

@ -29,7 +29,7 @@
> >
<SignalItem <SignalItem
:view="view" :view="view"
@click="handleItemClick(view.signalInfo.link)" @click.stop="handleItemClick(view.signalInfo.link)"
@contextmenu.prevent="handleContextmenu($event, view, null)" @contextmenu.prevent="handleContextmenu($event, view, null)"
></SignalItem> ></SignalItem>
</div> </div>
@ -46,7 +46,8 @@ import { onUpdate } from './handle-drag';
import { VueDraggable } from 'vue-draggable-plus'; import { VueDraggable } from 'vue-draggable-plus';
import SignalItem from './signal-item.vue'; import SignalItem from './signal-item.vue';
import GroupContextMenu from './group-context-menu.vue'; import GroupContextMenu from './group-context-menu.vue';
import { groupcontextmenu, handleContextmenu, handleGroupClick, handleGroupContextmenu } from './handle-contextmenu'; import { contextmenu, groupcontextmenu, handleContextmenu, handleGroupClick, handleGroupContextmenu } from './handle-contextmenu';
import { sidebarSelectedWires } from '@/hook/sidebar-select-wire';
defineComponent({ name: 'group-item' }); defineComponent({ name: 'group-item' });
@ -72,13 +73,16 @@ const groupChildStyle = computed(() => ({
marginBottom: globalStyle.sideBarItemMargin + 'px' marginBottom: globalStyle.sideBarItemMargin + 'px'
})); }));
// 刚刚挂载后，展示对应的 context menu
// 刚刚挂载后，展示对应的 context menu
function handleItemClick(link) { function handleItemClick(link) {
if (globalLookup.sidebarSelectedWireLinks.has(link)) { contextmenu.show = false;
globalLookup.sidebarSelectedWireLinks.delete(link); groupcontextmenu.show = false;
if (sidebarSelectedWires.has(link)) {
sidebarSelectedWires.delete(link);
} else { } else {
globalLookup.sidebarSelectedWireLinks.add(link); sidebarSelectedWires.add(link);
} }
} }

33
src/components/sidebar/index.vue
View File

@ -23,7 +23,7 @@
<SignalItem <SignalItem
v-show="view.renderType === 0" v-show="view.renderType === 0"
:view="view" :view="view"
@click="handleItemClick(view.signalInfo.link)" @click.stop="handleItemClick(view.signalInfo.link)"
@contextmenu.prevent="handleContextmenu($event, view, index)" @contextmenu.prevent="handleContextmenu($event, view, index)"
/> />
@ -75,6 +75,7 @@ import { colorPicker, contextmenu, contextmenuStyle, groupcontextmenu, groupcont
import SignalItem from './signal-item.vue'; import SignalItem from './signal-item.vue';
import GroupItem from './group-item.vue'; import GroupItem from './group-item.vue';
import GroupContextMenu from './group-context-menu.vue'; import GroupContextMenu from './group-context-menu.vue';
import { sidebarSelectedWires } from '@/hook/sidebar-select-wire';
const { t } = useI18n(); const { t } = useI18n();
defineComponent({ name: 'side-bar' }); defineComponent({ name: 'side-bar' });
@ -100,20 +101,15 @@ function addSignal() {
emitter.emit('right-nav', 0); emitter.emit('right-nav', 0);
} }
/**
*
* @param {WaveRenderSidebarItem} view
*/
function getVForKey(view) {
return view.signalInfo.link + '-' + view.renderType;
}
function handleItemClick(link) { function handleItemClick(link) {
if (globalLookup.sidebarSelectedWireLinks.has(link)) { contextmenu.show = false;
globalLookup.sidebarSelectedWireLinks.delete(link); groupcontextmenu.show = false;
if (sidebarSelectedWires.has(link)) {
sidebarSelectedWires.delete(link);
} else { } else {
globalLookup.sidebarSelectedWireLinks.add(link); sidebarSelectedWires.add(link);
} }
} }
@ -121,6 +117,7 @@ function handleItemClick(link) {
function handleSidebarGlobalClick() { function handleSidebarGlobalClick() {
contextmenu.show = false; contextmenu.show = false;
groupcontextmenu.show = false; groupcontextmenu.show = false;
sidebarSelectedWires.clear();
} }
</script> </script>
@ -195,16 +192,16 @@ function handleSidebarGlobalClick() {
} }
.signal-info { .signal-info {
width: 90%; width: 150px;
display: flex; display: flex;
justify-content: space-between; justify-content: left;
align-items: center; align-items: center;
user-select: none; user-select: none;
} }
.signal-info-name { .signal-info-name {
cursor: pointer; cursor: pointer;
max-width: 100px; width: 100px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -233,12 +230,14 @@ function handleSidebarGlobalClick() {
.signal-info-current-value-wrapper { .signal-info-current-value-wrapper {
margin-left: 10px; margin-left: 10px;
width: 50px; padding-left: 5px;
overflow: hidden;
width: 150px;
border-radius: .5em; border-radius: .5em;
background-color: var(--background); background-color: var(--background);
height: var(--display-signal-info-height); height: var(--display-signal-info-height);
display: flex; display: flex;
justify-content: center; justify-content: left;
align-items: center; align-items: center;
} }

17
src/components/sidebar/signal-item.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="signal-item" <div class="signal-item"
:class="{ :class="{
'active': globalLookup.sidebarSelectedWireLinks.has(props.view.signalInfo.link), 'active': sidebarSelectedWires.has(props.view.signalInfo.link),
'right-active': contextmenu.isSameSignal(props.view) && contextmenu.show 'right-active': contextmenu.isSameSignal(props.view) && contextmenu.show
}" }"
> >
@ -28,11 +28,11 @@
<span></span> <span></span>
<el-tooltip <el-tooltip
effect="dark" effect="dark"
:content="globalLookup.currentSignalValues[signalInfo.link] + ''" :content="makeCurrentValue(signalInfo.link)"
placement="top" placement="top"
raw-content raw-content
><div class="signal-info-current-value"> ><div class="signal-info-current-value">
{{ globalLookup.currentSignalValues[signalInfo.link] }} {{ makeCurrentValue(signalInfo.link) }}
</div></el-tooltip> </div></el-tooltip>
</div> </div>
</div> </div>
@ -43,6 +43,8 @@ import { globalLookup, globalSetting } from '@/hook/global';
import { makeIconClass } from '@/hook/utils'; import { makeIconClass } from '@/hook/utils';
import { defineComponent, computed } from 'vue'; import { defineComponent, computed } from 'vue';
import { contextmenu } from './handle-contextmenu'; import { contextmenu } from './handle-contextmenu';
import { sidebarSelectedWires } from '@/hook/sidebar-select-wire';
import { FormatValueRender } from '@/hook/wave-view/toolbar/renderFormat';
defineComponent({ name: 'signal-item' }); defineComponent({ name: 'signal-item' });
@ -96,6 +98,15 @@ function makeSignalCaption(signal) {
} }
function makeCurrentValue(link) {
const value = globalLookup.currentSignalValues[link];
const realSignal = globalLookup.link2CurrentWires.get(link);
if (realSignal) {
const valueRender = new FormatValueRender(link, realSignal.size, '');
return valueRender.render(value, 20);
}
return '';
}
</script> </script>

28
src/components/toolbar/signal-modal.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div class=""> <div class="">
<el-radio-group v-model="signalModal" <el-radio-group
v-model="signalModal"
:disabled="disabled"
@change="onSignalModalUpdate" @change="onSignalModalUpdate"
> >
<!-- 数字模式 --> <!-- 数字模式 -->
@ -40,6 +42,7 @@
<script setup> <script setup>
import { globalLookup } from '@/hook/global'; import { globalLookup } from '@/hook/global';
import { sidebarSelectedWires } from '@/hook/sidebar-select-wire';
import { defineComponent, nextTick, ref, watch } from 'vue'; import { defineComponent, nextTick, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@ -48,8 +51,10 @@ defineComponent({ name: 'signal-modal' });
const { t } = useI18n(); const { t } = useI18n();
const signalModal = ref(0); const signalModal = ref(0);
const disabled = ref(true);
function onSignalModalUpdate() { function onSignalModalUpdate() {
console.log('enter change');
const links = globalLookup.sidebarSelectedWireLinks; const links = globalLookup.sidebarSelectedWireLinks;
if (links.size > 0) { if (links.size > 0) {
const modal = signalModal.value; const modal = signalModal.value;
@ -64,25 +69,20 @@ function onSignalModalUpdate() {
} }
} }
function getOneSelectLink() {
let selectedLink = undefined;
for (const link of globalLookup.sidebarSelectedWireLinks) {
selectedLink = link;
break;
}
return selectedLink;
}
sidebarSelectedWires.addToPipe(lastLink => {
watch(globalLookup.sidebarSelectedWireLinks, () => { if (lastLink) {
const link = getOneSelectLink(); const option = globalLookup.currentSignalRenderOptions.get(lastLink);
if (link) {
const option = globalLookup.currentSignalRenderOptions.get(link);
if (option && typeof option.renderModal === 'number') { if (option && typeof option.renderModal === 'number') {
signalModal.value = option.renderModal; signalModal.value = option.renderModal;
disabled.value = false;
} else { } else {
signalModal.value = 0; signalModal.value = 0;
disabled.value = false;
} }
} else {
signalModal.value = 0;
disabled.value = true;
} }
}); });

50
src/components/toolbar/signal-value-format.vue
View File

@ -2,6 +2,8 @@
<div class="signal-format"> <div class="signal-format">
<el-select <el-select
v-model="currentOption" v-model="currentOption"
:disabled="disabled"
@change="onChange()"
> >
<el-option-group <el-option-group
v-for="group in formatOptions" v-for="group in formatOptions"
@ -22,7 +24,9 @@
<script setup> <script setup>
import { defineComponent, reactive, ref } from 'vue'; import { globalLookup } from '@/hook/global';
import { sidebarSelectedWires } from '@/hook/sidebar-select-wire';
import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
// 负责展示波形 数值的 类型，分为 二进制、十六进制、八进制、十进制、浮点数（半精度、单精度、双精度） // 负责展示波形 数值的 类型，分为 二进制、十六进制、八进制、十进制、浮点数（半精度、单精度、双精度）
@ -30,9 +34,15 @@ defineComponent({ name: 'signal-value-format' });
const { t } = useI18n(); const { t } = useI18n();
const currentOption = ref(0); const currentOption = ref(2);
const formatOptions = reactive([ const disabled = ref(true);
{
function onChange() {
console.log(currentOption.value);
}
onMounted(() => {
formatOptions.push({
label: t('toolbar.format.category.base'), label: t('toolbar.format.category.base'),
options: [ options: [
{ {
@ -48,8 +58,9 @@ const formatOptions = reactive([
label: 'Hex' label: 'Hex'
}, },
] ]
}, });
{
formatOptions.push({
label: t('toolbar.format.category.dec'), label: t('toolbar.format.category.dec'),
options: [ options: [
{ {
@ -61,8 +72,9 @@ const formatOptions = reactive([
label: t('toolbar.format.unsigned') label: t('toolbar.format.unsigned')
}, },
] ]
}, });
{
formatOptions.push({
label: t('toolbar.format.category.float'), label: t('toolbar.format.category.float'),
options: [ options: [
{ {
@ -78,8 +90,26 @@ const formatOptions = reactive([
label: t('toolbar.format.double') label: t('toolbar.format.double')
}, },
] ]
}, });
]); });
const formatOptions = reactive([]);
sidebarSelectedWires.addToPipe(lastLink => {
if (lastLink) {
const option = globalLookup.currentSignalRenderOptions.get(lastLink);
if (option && typeof option.valueFormat === 'number') {
currentOption.value = option.valueFormat;
disabled.value = false;
} else {
currentOption.value = 2;
disabled.value = false;
}
} else {
currentOption.value = 2;
disabled.value = true;
}
})
</script> </script>

2
src/hook/global.js
View File

@ -89,6 +89,8 @@ export const globalLookup = reactive({
// 初始化时会被定义 // 初始化时会被定义
render: () => {}, render: () => {},
/** /**
* @description 非常核心的用于操控 webgl 进行渲染和动画的核心类 * @description 非常核心的用于操控 webgl 进行渲染和动画的核心类
* @type {WebGL2WaveRender} * @type {WebGL2WaveRender}

2
src/hook/render.js
View File

@ -65,6 +65,8 @@ function makeWaveView(parentElement) {
console.log('updater'); console.log('updater');
}; };
globalLookup
// 注册基本的响应事件 // 注册基本的响应事件
container.elo.container.addEventListener('wheel', container.elo.container.addEventListener('wheel',
registerWheelEvent(parentElement, container.pstate, globalLookup, eventHandler) registerWheelEvent(parentElement, container.pstate, globalLookup, eventHandler)

48
src/hook/sidebar-select-wire.js Normal file
View File

@ -0,0 +1,48 @@
import { globalLookup } from "./global";
export const sidebarSelectedWires = {
lastLink: undefined,
pipeFn: [],
togglePipe() {
const lastLink = this.lastLink;
for (const fn of this.pipeFn) {
fn(lastLink);
}
},
/**
*
* @param {(link: string) => void} callback
*/
addToPipe(callback) {
this.pipeFn.push(callback);
},
has(link) {
return globalLookup.sidebarSelectedWireLinks.has(link);
},
add(link) {
globalLookup.sidebarSelectedWireLinks.add(link);
this.lastLink = link;
this.togglePipe();
},
delete(link) {
globalLookup.sidebarSelectedWireLinks.delete(link);
if (this.lastLink === link) {
this.lastLink = undefined;
for (const link of globalLookup.sidebarSelectedWireLinks) {
this.lastLink = link;
break;
}
}
this.togglePipe();
},
clear() {
this.lastLink = undefined;
globalLookup.sidebarSelectedWireLinks.clear();
this.togglePipe();
}
};

2
src/hook/wave-view/dom-container.js
View File

@ -101,7 +101,7 @@ class DomContainer {
const domContainer = (obj) => { const domContainer = (obj) => {
const sidebarWidth = 280; const sidebarWidth = 380;
const fontHeight = 20; const fontHeight = 20;
const elo = mTree.createElemento(obj.elemento); const elo = mTree.createElemento(obj.elemento);

145
src/hook/wave-view/format.js
View File

@ -1,145 +0,0 @@
const replacer = '...';
// '\u205D'
const format = (fmt, len) => {
len = BigInt(len);
{
const m = fmt.match(/^%(?<sign>[s])?(?<radix>[bodh])(?<elen>\d+)?$/);
if (m) {
const radix = ({ b: 2, o: 8, d: 10, h: 16, H: 16 })[m.groups.radix];
if (m.groups.sign) {
return (val, pos) => {
if ((val >> (len - 1n)) & 1n) {
val = val - (2n ** len);
}
let txtOrig = val.toString(radix);
if (txtOrig.length <= pos) {
return txtOrig;
}
const sign = (val < 0) ? '-' : '+';
if (pos === 1) {
return sign;
}
if (pos === 2) {
return sign + replacer;
}
return sign + replacer + txtOrig.slice(2 - pos);
};
}
if (Number(m.groups.elen) > 0) {
const elen = BigInt(m.groups.elen);
return (val, pos) => {
let txtRes = [];
for (let i = 0n; i < len; i += elen) {
const chunk = (val >> i) & (2n ** elen - 1n);
txtRes.unshift(chunk.toString(radix));
}
txtRes = '{' + txtRes.join(', ') + '}';
if (txtRes.length <= pos) {
return txtRes;
}
if (pos === 1) {
return replacer;
}
return replacer + txtRes.slice(1 - pos);
};
}
return (val, pos) => {
let txtOrig = val.toString(radix);
if (txtOrig.length <= pos) {
return txtOrig;
}
if (pos === 1) {
return replacer;
}
return replacer + txtOrig.slice(1 - pos);
};
}
} {
const m = fmt.match(/^%a$/);
if (m) {
return (val, pos) => {
let txtRes = '';
for (let i = 0n; i < len; i += 8n) {
txtRes = String.fromCharCode(Number((val >> i) & 0xffn)) + txtRes;
}
txtRes = txtRes.trim();
if (txtRes.length <= pos) {
return txtRes;
}
txtRes = txtRes.slice(0, pos - 1) + replacer;
return txtRes;
};
}
} {
const m = fmt.match(/^%(?<form>[fe])(?<elen>32|64)$/);
if (m) {
const buf = new ArrayBuffer(8);
const bufBInt = new BigInt64Array(buf);
const elen = BigInt(m.groups.elen);
const bufFloat = new ((elen === 32n) ? Float32Array : Float64Array)(buf);
const mask = (elen === 32n) ? 0xffffffffn : 0xffffffffffffffffn;
if (m.groups.form === 'f') {
if (len > elen) {
return (val, pos) => {
let txtRes = [];
for (let i = 0n; i < len; i += elen) {
bufBInt[0] = (val >> i) & mask;
const fval = bufFloat[0];
txtRes.unshift(fval.toString());
}
txtRes = '{' + txtRes.join(', ') + '}';
if (txtRes.length <= pos) {
return txtRes;
}
if (pos === 1) {
return replacer;
}
return replacer + txtRes.slice(1 - pos);
};
}
return (val, pos) => {
bufBInt[0] = val & mask;
const fval = bufFloat[0];
let txtOrig;
txtOrig = fval.toString();
if (txtOrig.length <= pos) {
return txtOrig;
}
for (let i = pos; i >= 0; i--) {
txtOrig = fval.toPrecision(i + 1);
if (txtOrig.length <= pos) {
return txtOrig;
}
txtOrig = fval.toExponential(i);
if (txtOrig.length <= pos) {
return txtOrig;
}
}
return (val < 0) ? '-' : '+';
};
} else {// e
return (val, pos) => {
bufBInt[0] = val & mask;
const fval = bufFloat[0];
let txtOrig;
txtOrig = fval.toExponential();
if (txtOrig.length <= pos) {
return txtOrig;
}
for (let i = 4; i <= pos; i++) {
txtOrig = fval.toExponential(pos - i);
if (txtOrig.length <= pos) {
return txtOrig;
}
}
return (val < 0) ? '-' : '+';
};
}
}
}
return () => '?';
};
export default format;

24
src/hook/wave-view/get-label.js
View File

@ -1,14 +1,15 @@
import format from './format'; import { globalLookup } from '../global';
import { FormatValueRender } from './toolbar/renderFormat';
const getLabel = (lane) => { const getLabel = (lane) => {
if (typeof lane !== 'object') { if (typeof lane !== 'object') {
lane = {}; lane = {};
} }
const fmt = lane.format || '%h';
const width = Number(lane.width || 1);
const formatter = format(fmt, width);
return (value, mask, x, w) => { const width = Number(lane.width || 1);
const valueRender = new FormatValueRender(lane.ref, width, '');
return (value, mask, x, w, link) => {
if (mask) { if (mask) {
if (value) { if (value) {
@ -18,18 +19,9 @@ const getLabel = (lane) => {
} }
} }
const pos = (w / 8) | 0; const pos = (w / 8) | 0;
const valueString = valueRender.render(value, pos);
value = BigInt(value); return ['text', { x, class: 'common' }, valueString];
let txtShort = formatter(value, pos, width);
// TODO: 重构这里
if (txtShort.startsWith('...')) {
txtShort = txtShort.replace('...', '');
}
return ['text', { x, class: 'common' }, txtShort];
}; };
}; };

120
src/hook/wave-view/page-format.js
View File

@ -1,120 +0,0 @@
import onml from 'onml';
import format from './format';
const getElement = divName => {
if (typeof divName === 'string') {
const c = document.getElementById(divName);
if (c === null) {
throw new Error('<div> element width Id: "' + divName + '" not found');
}
return c;
}
return divName;
};
const fp64_2bigint = (val) => {
const buf = new ArrayBuffer(8);
const bufFloat = new Float64Array(buf);
const bufBInt = new BigInt64Array(buf);
bufFloat[0] = val;
return bufBInt[0];
};
const fp32_2bigint = (val) => {
const buf = new ArrayBuffer(8);
const bufFloat = new Float32Array(buf);
const bufUInt = new BigInt64Array(buf);
bufFloat[0] = val;
return bufUInt[0];
};
const rnda = 40 * (Math.random() - 0.5);
const specs = [
{fmt: '%b', val: 255n, len: 24},
{fmt: '%o', val: 255n, len: 24},
{fmt: '%d', val: 255n, len: 24},
{fmt: '%h', val: 255n, len: 24},
{fmt: '%b', val: 12345678n, len: 16},
{fmt: '%o', val: 12345678n, len: 16},
{fmt: '%d', val: 12345678n, len: 16},
{fmt: '%h', val: 12345678n, len: 16},
{fmt: '%b', val: fp32_2bigint(rnda), len: 32},
{fmt: '%o', val: fp32_2bigint(rnda), len: 32},
{fmt: '%d', val: fp32_2bigint(rnda), len: 32},
{fmt: '%h', val: fp32_2bigint(rnda), len: 32},
{fmt: '%sb', val: 12345678n, len: 24},
{fmt: '%so', val: 12345678n, len: 24},
{fmt: '%sd', val: 12345678n, len: 24},
{fmt: '%sh', val: 12345678n, len: 24},
{fmt: '%sb', val: 255n, len: 16},
{fmt: '%so', val: 255n, len: 16},
{fmt: '%sd', val: 255n, len: 16},
{fmt: '%sh', val: 255n, len: 16},
{fmt: '%sb', val: 12345678n, len: 25},
{fmt: '%so', val: 12345678n, len: 25},
{fmt: '%sd', val: 12345678n, len: 25},
{fmt: '%sh', val: 12345678n, len: 25},
{fmt: '%b8', val: 12345678n, len: 24},
{fmt: '%o8', val: 12345678n, len: 24},
{fmt: '%d8', val: 12345678n, len: 24},
{fmt: '%h8', val: 12345678n, len: 24},
{fmt: '%h8', val: 0x4142434445n, len: 40},
{fmt: '%a', val: 0x4142434445n, len: 40},
{fmt: '%f64', val: -0x27c0aad9be68b8fbn, len: 64},
{fmt: '%e64', val: -0x27c0aad9be68b8fbn, len: 64},
{fmt: '%f64', val: -0x3d23edde7c882195n, len: 64},
{fmt: '%e64', val: -0x3d23edde7c882195n, len: 64},
{fmt: '%f64', val: 0x3ee9e0fcaf9380fcn, len: 64},
{fmt: '%e64', val: 0x3ee9e0fcaf9380fcn, len: 64},
{fmt: '%f64', val: 0x405edd2f1a9fbe77n, len: 64},
{fmt: '%e64', val: 0x405edd2f1a9fbe77n, len: 64},
{fmt: '%f64', val: fp64_2bigint(rnda), len: 64},
{fmt: '%e64', val: fp64_2bigint(rnda), len: 64},
{fmt: '%f32', val: 0x42f6e979n, len: 32},
{fmt: '%e32', val: 0x42f6e979n, len: 32},
{fmt: '%f32', val: 0x374f07e5n, len: 32},
{fmt: '%e32', val: 0x374f07e5n, len: 32},
{fmt: '%f32', val: fp32_2bigint(rnda), len: 32},
{fmt: '%e32', val: fp32_2bigint(rnda), len: 32},
];
const getFmtTable = () => {
const poss = [1, 2, 3, 4, 5, 6, 7, 8, 16, 48];
const header = [
'', 'pos\u2192', ...poss,
'\u2B10fmt', '\u2B10len', ...poss.map(e => '*'.repeat(e))
].map(e => ['div', {class: 'tab-header'}, e]);
const rows = specs.flatMap(spec => [
spec.fmt, spec.len,
...poss.map(pos => format(spec.fmt, spec.len)(spec.val, pos))
].map(e => ['div', {class: 'tab-cell'}, e]));
const res = ['div', {class: 'tab-container'}, ...header, ...rows];
return res;
};
const getBody = () =>
['div',
['h1', 'WaveQL'],
['span', 'WaveQL = Wave Query Language'],
['h2', 'Data label formats'],
`Text label of multibit values can be formated using one of standard formats.
The label may be shortened to fit the space available in waveform.
Some examples of labels shown in the table below.`,
getFmtTable()
];
global.pageFormat = async (div) => {
const root = getElement(div);
onml.renderer(root)(getBody());
};
/* eslint-env browser */

2
src/hook/wave-view/render-shader.js
View File

@ -39,7 +39,7 @@ uniform vec2 scale;
uniform vec2 offset; uniform vec2 offset;
uniform vec4 colors[${colorsLength}]; uniform vec4 colors[${colorsLength}];
uniform vec2 shifts[7]; // 基础八位图偏移量，为了性能，pos 只传入整数，需要的坐标负数由该值提供 uniform vec2 shifts[7]; // 基础八位图偏移量，为了性能，pos 只传入整数，需要的坐标负数由该值提供
uniform vec2 widthShifts[8]; // 用于构造线宽的偏移 uniform vec2 widthShifts[9]; // 用于构造线宽的偏移
void main() { void main() {
vec2 shift = shifts[control.x]; vec2 shift = shifts[control.x];

21
src/hook/wave-view/render-utils.js
View File

@ -63,7 +63,7 @@ function makeGlColors() {
const r = rgba[0] / 255; const r = rgba[0] / 255;
const g = rgba[1] / 255; const g = rgba[1] / 255;
const b = rgba[2] / 255; const b = rgba[2] / 255;
glcolors.push(r, g, b, 0.1); glcolors.push(r, g, b, 0.2);
} }
return glcolors; return glcolors;
} }
@ -118,7 +118,8 @@ const gl_WidthShifts = new Float32Array([
0, - widthShift, // 4 0, - widthShift, // 4
widthShift, - widthShift, // 5 widthShift, - widthShift, // 5
widthShift, 0, // 6 widthShift, 0, // 6
widthShift, widthShift // 7 widthShift, widthShift, // 7
0, 0 // 8
]); ]);
@ -139,6 +140,20 @@ const ladderAnalog_GL_WidthShifts = new Float32Array([
]); ]);
const lineAnalog_WidthShift = 0.0015;
const lineAnlog_GL_WidthShifts = new Float32Array([
0, lineAnalog_WidthShift, // 0
- lineAnalog_WidthShift, lineAnalog_WidthShift, // 1
- lineAnalog_WidthShift, 0, // 2
- lineAnalog_WidthShift, - lineAnalog_WidthShift, // 3
0, - lineAnalog_WidthShift, // 4
lineAnalog_WidthShift, - lineAnalog_WidthShift, // 5
lineAnalog_WidthShift, 0, // 6
lineAnalog_WidthShift, lineAnalog_WidthShift, // 7
0, 0 // 8
]);
function prettyPrint(array) { function prettyPrint(array) {
const stack = []; const stack = [];
for (const num of array) { for (const num of array) {
@ -164,8 +179,10 @@ export {
screenWidthPixel, screenWidthPixel,
screenHeightPixel, screenHeightPixel,
gl_Shifts_for_bar, gl_Shifts_for_bar,
lineAnlog_GL_WidthShifts,
barShift, barShift,
glslInputLength, glslInputLength,
prettyPrint, prettyPrint,
lineAnalog_WidthShift,
ladderAnalog_GL_WidthShifts ladderAnalog_GL_WidthShifts
}; };

18
src/hook/wave-view/render-values.js
View File

@ -85,10 +85,8 @@ function addVecRenderItem(link) {
* @returns * @returns
*/ */
function* renderValues(desc, pstate) { function* renderValues(desc, pstate) {
const { width, height, yOffset, yStep, topBarHeight, botBarHeight } = pstate; const { width, height, yOffset, yStep, topBarHeight, botBarHeight, sidebarWidth } = pstate;
// TODO: 对齐参数
const sidebarWidth = 230;
// 根据 currentWiresRenderView 视图渲染 // 根据 currentWiresRenderView 视图渲染
// 此处应该和 render-wave 的相同注释的地方保持逻辑上的一致（render-wave.js 约 646 行） // 此处应该和 render-wave 的相同注释的地方保持逻辑上的一致（render-wave.js 约 646 行）
@ -108,7 +106,7 @@ function* renderValues(desc, pstate) {
// 如果没有关闭，把所有子节点加入其中 // 如果没有关闭，把所有子节点加入其中
if (view.groupInfo.collapse === false) { if (view.groupInfo.collapse === false) {
for (const child of view.children) { for (const child of view.children) {
const realSignal = addVecRenderItem(view.signalInfo.link); const realSignal = addVecRenderItem(child.signalInfo.link);
renderSignals.push(realSignal); renderSignals.push(realSignal);
} }
} }
@ -140,22 +138,22 @@ function* renderValues(desc, pstate) {
for (let i = 0; i < (iskip + ilen); i++) { for (let i = 0; i < (iskip + ilen); i++) {
const lane = renderSignals[i + (ifirst | 0)]; const lane = renderSignals[i + (ifirst | 0)];
const link = (lane || {}).ref;
if (lane && lane.kind === 'DIZ') { if (lane && lane.kind === 'DIZ') {
markers.push(['g', tt(0, Math.round((i - (iskip - ifirst) + 1.18) * yStep))].concat(water(lane, desc, pstate))); markers.push(['g', tt(0, Math.round((i - (iskip - ifirst) + 1.18) * yStep))].concat(water(lane, desc, pstate)));
} else if (lane && lane.kind === 'brace') { } else if (lane && lane.kind === 'brace') {
markers.push(['g', tt(0, Math.round((i - (iskip - ifirst) + 1.18) * yStep))].concat(bracer(lane, desc, pstate))); markers.push(['g', tt(0, Math.round((i - (iskip - ifirst) + 1.18) * yStep))].concat(bracer(lane, desc, pstate)));
} else if (lane && lane.ref) { } else if (lane && link) {
const chango = desc.chango[lane.ref]; const chango = desc.chango[link];
if (chango && chango.kind === 'vec') { if (chango && chango.kind === 'vec') {
// tt: 计算出当前这一行的所有 值 svg 在 Y 方向的偏移 // tt: 计算出当前这一行的所有 值 svg 在 Y 方向的偏移
const mLane = ['g', tt(0, Math.round((i - (iskip - ifirst) + 0.15) * yStep))]; const mLane = ['g', tt(0, Math.round((i - (iskip - ifirst) + 0.15) * yStep))];
const { wave } = chango; const { wave } = chango;
const jlen = wave.length; const jlen = wave.length;
perLane: { perLane: {
let [tPre, vPre, mPre] = wave[0]; let [tPre, vPre, mPre] = wave[0];
let xPre = getX(pstate, tPre); let xPre = getX(pstate, tPre);
const labeler = getLabel(lane); const labeler = getLabel(lane);
for (let j = 1; j <= jlen; j++) { for (let j = 1; j <= jlen; j++) {
@ -163,7 +161,6 @@ function* renderValues(desc, pstate) {
const [tCur, vCur, mCur] = (mark || [desc.time, 0, 0]); const [tCur, vCur, mCur] = (mark || [desc.time, 0, 0]);
const xCur = getX(pstate, tCur); const xCur = getX(pstate, tCur);
// console.log(mark, vPre, mPre, vCur, mCur);
if (vPre !== undefined || mPre !== undefined) { if (vPre !== undefined || mPre !== undefined) {
if (xPre > width && xCur > width) { // both time stamps to the right if (xPre > width && xCur > width) { // both time stamps to the right
@ -178,7 +175,8 @@ function* renderValues(desc, pstate) {
if (w > 8) { if (w > 8) {
const x = Math.round((xPreNorm + xCurNorm) / 2); const x = Math.round((xPreNorm + xCurNorm) / 2);
// 计算 当前这一个 值 在 X 方向上的偏移 // 计算 当前这一个 值 在 X 方向上的偏移
mLane.push(labeler(vPre, mPre, x, w)); const renderLabel = labeler(vPre, mPre, x, w, link);
mLane.push(renderLabel);
} }
} }
} }

4
src/hook/wave-view/render-wave.js
View File

@ -1,6 +1,6 @@
import { globalSetting, globalStyle } from '../global'; import { globalSetting, globalStyle } from '../global';
import { gl_Colors, gl_Shifts, gl_Shifts_for_bar, gl_WidthShifts, barShift, getRatio, screenHeightPixel, maskColorIndexOffset, posYFactor, glslInputLength, prettyPrint, ladderAnalog_GL_WidthShifts } from './render-utils.js'; import { gl_Colors, gl_Shifts, gl_Shifts_for_bar, gl_WidthShifts, barShift, getRatio, screenHeightPixel, maskColorIndexOffset, posYFactor, glslInputLength, prettyPrint, ladderAnalog_GL_WidthShifts, lineAnlog_GL_WidthShifts } from './render-utils.js';
import { vertexShader, fragmentShader } from './render-shader.js'; import { vertexShader, fragmentShader } from './render-shader.js';
import { renderAsBit, renderAsCommonDigital, renderAsLadderAnalog, renderAsLineAnalog } from './toolbar/renderModal'; import { renderAsBit, renderAsCommonDigital, renderAsLadderAnalog, renderAsLineAnalog } from './toolbar/renderModal';
@ -506,7 +506,7 @@ class WebGL2WaveRender {
gl.drawArrays(gl.TRIANGLES, 0, maskVertices.length / glslInputLength); gl.drawArrays(gl.TRIANGLES, 0, maskVertices.length / glslInputLength);
} else { } else {
// 折线渲染模式 // 折线渲染模式
gl.uniform2fv(webglLocation.widthShifts, gl_WidthShifts); gl.uniform2fv(webglLocation.widthShifts, lineAnlog_GL_WidthShifts);
gl.uniform2fv(webglLocation.shifts, gl_Shifts_for_bar); gl.uniform2fv(webglLocation.shifts, gl_Shifts_for_bar);
gl.bindVertexArray(signalItem.lineVao); gl.bindVertexArray(signalItem.lineVao);
gl.drawArrays(gl.TRIANGLES, 0, lineVertices.length / glslInputLength); gl.drawArrays(gl.TRIANGLES, 0, lineVertices.length / glslInputLength);

172
src/hook/wave-view/toolbar/corner-case.js Normal file
View File

@ -0,0 +1,172 @@
/**
* @author kirigaya
* @datetime
* @description 实现带有宽度的线的 corner case 部分的代码，具体的原理请看
* ./design/webgl.drawio 中的 【corner-case 讨论和推导】
*/
function corner() {
}
/**
* @description cb 是 counter backwards 倒数 的缩写
* @param {number} x1
* @param {number} y1
* @param {number} x2
* @param {number} y2
* @returns {number}
*/
function getSlopeCb(x1, y1, x2, y2) {
if (x1 === x2) {
return 0;
}
return (x1 - x2) / (y1 - y2);
}
/**
* @description 计算设计图中的 alpha 和 beta，返回的偏移量一定非负
* @param {number} x1
* @param {number} y1
* @param {number} x2
* @param {number} y2
* @param {number} w 当前 VAO 渲染的宽度
*/
function calcAlpha(x1, y1, x2, y2, w) {
if (x1 === x2) {
return 2 * w;
}
if (y1 === y2) {
return 0;
} else {
const b = (x1 - x2) / (y1 - y2);
let alpha = 2 * w;
// TODO: 检查数值溢出
if (y1 > y2) {
alpha = alpha * (Math.sqrt(1 + b * b) + b);
} else {
alpha = alpha * (Math.sqrt(1 + b * b) - b);
}
return alpha;
}
}
/**
*
* @param {number[]} p1
* @param {number[]} p2
* @param {number[]} p3
* @param {number} w
*/
export function getCornerTriangle(p1, p2, p3, w) {
const controlPoints = [];
const [x2, y2] = p2;
if (p1 === undefined) {
controlPoints.push({ x: x2, y: y2, ws: 0 });
controlPoints.push({ x: x2, y: y2, ws: 4 });
return controlPoints;
}
if (p3 === undefined) {
controlPoints.push({ x: x2, y: y2, ws: 0 });
controlPoints.push({ x: x2, y: y2, ws: 4 });
return controlPoints;
}
const [x1, y1] = p1;
const [x3, y3] = p3;
if (y1 < y2) {
if (y2 > y3) {
// case 2
const c2ws = calcAlpha(x1, y1, x2, y2, w);
const c3ws = calcAlpha(x2, y2, x3, y3, w);
const c1 = { x: x2, y: y2, ws: 4 };
const c2 = { x: x2 - c2ws, y: y2, ws: 0 };
const c3 = { x: x2 - c3ws, y: y2, ws: 0 };
controlPoints.push(c1, c2, c3);
} else if (y2 === y3) {
// case 6
const c2ws = calcAlpha(x1, y1, x2, y2, w);
const c1 = { x: x2, y: y2, ws: 4 };
const c2 = { x: x2 - c2ws, y: y2, ws: 0 };
const c3 = { x: x2, y: y2, ws: 0 };
controlPoints.push(c1, c2, c3);
} else {
// case 9
const c2ws = calcAlpha(x1, y1, x2, y2, w);
const c3ws = calcAlpha(x2, y2, x3, y3, w);
const c1 = { x: x2, y: y2, ws: 0 };
const c2 = { x: x2 - c2ws, y: y2, ws: 4 };
const c3 = { x: x2 + c3ws, y: y2, ws: 4 };
controlPoints.push(c1, c2, c3);
}
} else if (y1 === y2) {
if (y2 > y3) {
// case 5
const c3ws = calcAlpha(x2, y2, x3, y3, w);
const c1 = { x: x2, y: y2, ws: 4 };
const c2 = { x: x2, y: y2, ws: 0 };
const c3 = { x: x2 + c3ws, y: y2, ws: 0 };
controlPoints.push(c1, c2, c3);
} else if (y2 === y3) {
// case 3
controlPoints.push({ x: x2, y: y2, ws: 0 });
controlPoints.push({ x: x2, y: y2, ws: 4 });
} else {
// case 4
const c3ws = calcAlpha(x2, y2, x3, y3, w);
const c1 = { x: x2, y: y2, ws: 0 };
const c2 = { x: x2, y: y2, ws: 4 };
const c3 = { x: x2 + c3ws, y: y2, ws: 4 };
controlPoints.push(c1, c2, c3);
}
} else {
if (y2 > y3) {
// case 8
const c2ws = calcAlpha(x1, y1, x2, y2, w);
const c3ws = calcAlpha(x2, y2, x3, y3, w);
const c1 = { x: x2, y: y2, ws: 0 };
const c2 = { x: x2 - c2ws, y: y2, ws: 4 };
const c3 = { x: x2 + c3ws, y: y2, ws: 4 };
controlPoints.push(c1, c2, c3);
} else if (y2 === y3) {
// case 7
const c2ws = calcAlpha(x1, y1, x2, y2, w);
const c1 = { x: x2, y: y2, ws: 0 };
const c2 = { x: x2 - c2ws, y: y2, ws: 4 };
const c3 = { x: x2, y: y2, ws: 4 };
controlPoints.push(c1, c2, c3);
} else {
// case 1: y2 < y1 && y2 < y3
const c2ws = calcAlpha(x1, y1, x2, y2, w);
const c3ws = calcAlpha(x2, y2, x3, y3, w);
const c1 = { x: x2, y: y2, ws: 0 };
const c2 = { x: x2 - c2ws, y: y2, ws: 4 };
const c3 = { x: x2 + c3ws, y: y2, ws: 4 };
controlPoints.push(c1, c2, c3);
}
}
return controlPoints;
}

210
src/hook/wave-view/toolbar/renderFormat.js
View File

@ -1,5 +1,46 @@
import { globalLookup } from "@/hook/global";
/**
* @description 计算 value 的渲染格式
* @param {string} link
* @returns {number}
*/
function getValueFormatCode(link) {
const renderOptions = globalLookup.currentSignalRenderOptions;
if (renderOptions.has(link)) {
const option = renderOptions.get(link);
if (typeof option.valueFormat === 'number') {
return option.valueFormat;
}
}
return 0;
}
/**
* @description 高效计算 2 的 n 次方，n可以是负数
* @param {number} n 整数
*/
function efficentPow2(n) {
if (n === 0) {
return 1;
}
if (n > 0) {
return 1 << n;
}
if (n < 0) {
return 1 / (1 << (-n));
}
}
/**
* @description 16进制数字转换成有符号浮点数
* @param {string} hex
* @returns {number}
*/
export function hexToSignedInt(hex) { export function hexToSignedInt(hex) {
if (hex.length % 2 != 0) { if (hex.length % 2 != 0) {
hex = "0" + hex; hex = "0" + hex;
@ -11,3 +52,172 @@ export function hexToSignedInt(hex) {
} }
return num; return num;
} }
export class FormatValueRender {
/**
*
* @param {string} link 信号的ID
* @param {number} width 信号的位置宽度
* @param {string} replacer 位置不足的地方会用 replacer 补足，比如 ...
*/
constructor(link, width, replacer = '') {
this.formatCode = getValueFormatCode(link);
this.width = BigInt(width);
this.replacer = replacer;
}
/**
* @description 根据当前的设置进行数值的渲染
* @param {number} value 波形当前的数值
* @param {number} pos 当前的位置宽度
* @returns {string} 转换后需要渲染的字符串
*/
render(value, pos) {
const formatCode = this.formatCode;
switch (formatCode) {
// 二进制
case 0: return this.radixTransform(2, value, pos);
// 八进制
case 1: return this.radixTransform(8, value, pos);
// 十六进制
case 2: return this.radixTransform(16, value, pos);
// 有符号整型
case 3: return this.radixTransform(10, value, pos, true);
// 无符号整型
case 4: return this.radixTransform(10, value, pos);
// 半精度浮点数
case 5: return this.floatTransform(16, value, pos);
// 单精度浮点数
case 6: return this.floatTransform(32, value, pos);
// 双精度浮点数
case 7: return this.floatTransform(64, value, pos);
// 未知
default: return '?';
}
}
/**
* @description 整数的进制转换
* @param {number} radix 进制
* @param {number} value 值
* @param {number} pos 位置宽度
* @param {boolean} sign 是否是有符号数，默认为 false
*/
radixTransform(radix, value, pos, sign = false) {
const width = this.width;
const replacer = this.replacer;
if (value === 'x') {
return 'x';
}
value = BigInt(value);
// 如果是有符号数
if (sign) {
if ((value >> (width - 1n)) & 1n) {
value = value - (2n ** width);
}
let valueString = value.toString(radix);
if (valueString.length <= pos) {
return valueString;
}
const valSign = (value < 0) ? '-' : '+';
if (pos === 1) {
return valSign;
}
if (pos === 2) {
return valSign + replacer;
}
return valSign + replacer + valueString.slice(2 - pos);
}
// 无符号的各类进制数字
const valueString = value.toString(radix);
if (valueString.length <= pos) {
return valueString;
}
if (pos === 1) {
return replacer;
}
return replacer + valueString.slice(1 - pos);
}
/**
* @description IEEE 浮点数的转换
* 为什么没有 sign 参数？因为 IEEE 定义下的 float 第一个位置就是符号
* @param {number} fWidth 16， 32 或者 64
* @param {number} value 值
* @param {number} pos 位置
*/
floatTransform(fWidth, value, pos) {
if (fWidth === 16) {
value = this.calcIEEEFloat(value, 5, 10);
} else if (fWidth === 32) {
value = this.calcIEEEFloat(value, 8, 23);
} else if (fWidth === 64) {
value = this.calcIEEEFloat(value, 11, 52);
}
const valueString = value.toString();
if (valueString.length <= pos) {
return valueString;
}
const valSign = (value < 0) ? '-' : '+';
if (pos === 1) {
return valSign;
}
if (pos === 2) {
return valSign + replacer;
}
return valSign + replacer + valueString.slice(2 - pos);
}
/**
* @description 根据 e 和 m 得到计算 IEEE 浮点数的函数，默认第一个位置代表符号
* @param {number} value 值
* @param {number} eWidth 代表指数部分的位数
* @param {number} mWidth 代表有效尾数的位数
* @returns {(value: number) => number}
*/
calcIEEEFloat(value, eWidth, mWidth) {
const offset = (1 << (eWidth - 1)) - 1;
const mFrac = 1 << mWidth;
// 计算参考博客：https://blog.csdn.net/leo0308/article/details/117398166
let bits = value.toString(2);
const width = 1 + eWidth + mWidth;
// 应对 bits 长度和 预定长度不一致的情况
// 不足的地方补上 0，否则进行截断
if (bits.length < width) {
bits = '0'.repeat(width - bits.length) + bits;
}
if (bits.length > width) {
bits = bits.substring(bits.length - width);
}
const s = parseInt(bits[0], 2);
const e = parseInt(bits.substring(1, 1 + eWidth), 2);
const m = parseInt(bits.substring(2 + eWidth), 2);
const sign = (s === 1) ? -1 : 1;
// 全 0
if (e === 0) {
return sign * efficentPow2(-offset + 1 - mWidth) * m;
}
// 全 1
if (e === ((1 << eWidth) - 1)) {
if (m === 0) {
return sign * Infinity;
}
return NaN;
}
return sign * efficentPow2(e - offset) * (1 + m / mFrac);
}
}

151
src/hook/wave-view/toolbar/renderModal.js
View File

@ -29,10 +29,9 @@
*/ */
import { globalLookup } from "@/hook/global"; import { globalLookup } from "@/hook/global";
import { maskColorIndexOffset, posYFactor, prettyPrint } from "../render-utils"; import { lineAnalog_WidthShift, lineAnlog_GL_WidthShifts, maskColorIndexOffset, posYFactor, prettyPrint } from "../render-utils";
import { hexToSignedInt } from "./renderFormat"; import { hexToSignedInt } from "./renderFormat";
function makeQuadVertices(p1, p2, p3, p4) { function makeQuadVertices(p1, p2, p3, p4) {
return [ return [
...p1, ...p2, ...p3, ...p1, ...p2, ...p3,
@ -40,6 +39,36 @@ function makeQuadVertices(p1, p2, p3, p4) {
] ]
} }
/**
* @description 根据四个点计算有顺序的 triangle 类型的，其中，p1p2组成单独的 frag，p3p4组成单独的frag
* @param {number[]} p1
* @param {number[]} p2
* @param {number[]} p3
* @param {number[]} p4
* @returns
*/
function makeOrderedQuadVertices(p1, p2, p3, p4) {
let t;
if (p1[1] < p2[1]) {
t = p1;
p1 = p2;
p2 = t;
}
if (p3[1] < p4[1]) {
t = p3;
p3 = p4;
p4 = t;
}
// 保证 p1 的 y 比 p2 大
// 保证 p3 的 y 比 p4 大
return [
...p1, ...p3, ...p2,
...p2, ...p3, ...p4
]
}
/** /**
* *
* @param {number} x1 * @param {number} x1
@ -518,7 +547,6 @@ export function renderAsLadderAnalog(lookup, link, wave, time) {
const lineVertices = []; const lineVertices = [];
const maskVertices = []; const maskVertices = [];
// 制作 lineVertices // 制作 lineVertices
for (let i = 0; i < pointNum; ++ i) { for (let i = 0; i < pointNum; ++ i) {
// p0: 上一个点 // p0: 上一个点
@ -578,9 +606,28 @@ export function renderAsLadderAnalog(lookup, link, wave, time) {
} }
} }
// prettyPrint(lineVertices);
return { lineVertices, maskVertices }; return { lineVertices, maskVertices };
} }
/**
*
* @param {number[]} p1
* @param {number[]} p2
* @param {number[]} p3
* @returns {number}
*/
function getSlope(p1, p2, p3) {
if (p3 === undefined) {
} else {
}
}
/** /**
* @description Analog (Line) 模拟状 * @description Analog (Line) 模拟状
* @param {GlobalLookup} lookup * @param {GlobalLookup} lookup
@ -602,5 +649,103 @@ export function renderAsLineAnalog(lookup, link, wave, time) {
const lineVertices = []; const lineVertices = [];
const maskVertices = []; const maskVertices = [];
function makeLineAnalogRenderParam(link, wave, time) {
const [t1, val, mask] = wave;
if (mask) {
// 不定态
return { y: -1, color: 4 };
}
// 根据当前格式进行转换
const numVal = explainAsJSNumber(formatCode, val, width);
// 此时的 y 是一个 -1 到 1 的浮点数，因为 VAO 我设置了 Int
const y = coordinateTransform(numVal);
const colorParam = { y, color: 5 };
if (renderOptions.has(link)) {
const option = renderOptions.get(link);
if (typeof option.color === 'number') {
colorParam.color = option.color;
}
}
return colorParam;
}
for (let i = 0; i < length; ++ i) {
// const currentWave = wave[(i === 0) ? 0 : (i - 1)];
const currentWave = wave[i];
const nextWave = (i === (length - 1)) ? wave[i] : wave[i + 1];
const t1 = currentWave[0];
const t2 = (i === (length - 1)) ? time : wave[i + 1][0];
const currentParam = makeLineAnalogRenderParam(link, currentWave, time);
const nextParam = makeLineAnalogRenderParam(link, nextWave, time);
const color = currentParam.color;
const maskColor = color + maskColorIndexOffset;
const y1 = currentParam.y;
const y2 = nextParam.y;
// 给每一个点构造正方形
// 需要渲染的部分为 current 的正方形和 current 正方形和 next 正方形中间的连线
lineVertices.push(...makeQuadVertices(
[t1, y1 * posYFactor, 0, 1, color],
[t1, y1 * posYFactor, 0, 3, color],
[t1, y1 * posYFactor, 0, 5, color],
[t1, y1 * posYFactor, 0, 7, color],
));
// 根据 p1.y 和 p2.y 的相对位置，一共分为三种情况
if (y1 > y2) {
// y1 > y2
lineVertices.push(...makeQuadVertices(
[t1, y1 * posYFactor, 0, 3, color],
[t1, y1 * posYFactor, 0, 7, color],
[t2, y2 * posYFactor, 0, 7, color],
[t2, y2 * posYFactor, 0, 3, color],
));
} else if (y1 === y2) {
// y1 = y2
lineVertices.push(...makeQuadVertices(
[t1, y1 * posYFactor, 0, 5, color],
[t1, y1 * posYFactor, 0, 7, color],
[t2, y2 * posYFactor, 0, 1, color],
[t2, y2 * posYFactor, 0, 3, color],
));
} else {
// y1 < y2
lineVertices.push(...makeQuadVertices(
[t1, y1 * posYFactor, 0, 5, color],
[t1, y1 * posYFactor, 0, 1, color],
[t2, y2 * posYFactor, 0, 1, color],
[t2, y2 * posYFactor, 0, 5, color],
));
}
}
// if (y1 > -1 && y2 > -1) {
// maskVertices.push(...makeQuadVertices(
// [t1, factY1, 0, 0, maskColor],
// [t2, factY2, 0, 0, maskColor],
// [t2, - posYFactor, 0, 0, maskColor],
// [t1, - posYFactor, 0, 0, maskColor],
// ));
// } else if (y1 > -1 && y2 === -1) {
// maskVertices.push(
// t1, factY1, 0, 0, maskColor,
// t2, - posYFactor, 0, 0, maskColor,
// t1, - posYFactor, 0, 0, maskColor,
// )
// } else if (y1 === -1 && y2 > -1) {
// maskVertices.push(
// t1, - posYFactor, 0, 0, maskColor,
// t2, factY2, 0, 0, maskColor,
// t2, - posYFactor, 0, 0, maskColor,
// );
// }
return { lineVertices, maskVertices };
} }