dbcdb6f1b4
Added `Window::safe_area`, which describes the area of the surface that is unobstructed by notches, bezels etc. The drawing code in the examples have been updated to draw a star inside the safe area, and the plain background outside of it. Also renamed `Window::inner_position` to `Window::surface_position`, and changed it to from screen coordinates to window coordinates, to better align how these coordinate systems work together. Finally, added some SVG images and documentation to describe how all of this works. This is fully implemented on macOS and iOS, and partially on the web. Co-authored-by: daxpedda <daxpedda@gmail.com>
130 lines
10 KiB
Text
130 lines
10 KiB
Text
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0" version="24.8.6" pages="2">
|
|
<diagram name="desktop" id="3DDum1nDijUk3y7wIDRm">
|
|
<mxGraphModel dx="1080" dy="707" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1000" pageHeight="500" math="0" shadow="0">
|
|
<root>
|
|
<mxCell id="0" />
|
|
<mxCell id="1" parent="0" />
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-1" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#E8E8E8;fontColor=#333333;strokeColor=#666666;" parent="1" vertex="1">
|
|
<mxGeometry x="200" y="80" width="480" height="360" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-4" value="" style="rounded=1;whiteSpace=wrap;html=1;shadow=0;fillColor=#d5e8d4;strokeColor=#666666;" parent="1" vertex="1">
|
|
<mxGeometry x="260" y="340" width="360" height="40" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-2" value="" style="rounded=1;whiteSpace=wrap;html=1;shadow=0;fillColor=#dae8fc;strokeColor=#666666;" parent="1" vertex="1">
|
|
<mxGeometry x="260" y="140" width="360" height="80" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-3" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#DBDBDB;strokeColor=#666666;fontColor=#333333;" parent="1" vertex="1">
|
|
<mxGeometry x="200" y="60" width="480" height="20" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-5" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=none;fillColor=#d5e8d4;" parent="1" vertex="1">
|
|
<mxGeometry x="260" y="180" width="360" height="180" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-6" value="" style="endArrow=none;html=1;rounded=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeColor=#666666;" parent="1" source="cRYnzpdCW-J0f_YpP3mc-4" target="cRYnzpdCW-J0f_YpP3mc-2" edge="1">
|
|
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
|
<mxPoint x="10" y="310" as="sourcePoint" />
|
|
<mxPoint x="60" y="260" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-7" value="" style="endArrow=none;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;strokeColor=#666666;" parent="1" source="cRYnzpdCW-J0f_YpP3mc-4" target="cRYnzpdCW-J0f_YpP3mc-2" edge="1">
|
|
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
|
<mxPoint x="770" y="570" as="sourcePoint" />
|
|
<mxPoint x="770" y="210" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-8" value="" style="endArrow=none;html=1;rounded=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0;entryDx=0;entryDy=0;strokeColor=#666666;" parent="1" source="cRYnzpdCW-J0f_YpP3mc-2" target="cRYnzpdCW-J0f_YpP3mc-5" edge="1">
|
|
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
|
<mxPoint x="220.00000000000023" y="179.69" as="sourcePoint" />
|
|
<mxPoint x="740.0000000000002" y="179.69" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-9" value="<font>outer_position</font>" style="endArrow=blockThin;html=1;strokeWidth=3;rounded=0;exitX=0;exitY=0;exitDx=0;exitDy=0;dashed=1;align=right;fontSize=20;fontFamily=monospace;fontColor=#6C8EBF;labelBackgroundColor=none;spacingLeft=0;spacingRight=15;spacing=0;fillColor=#dae8fc;strokeColor=#6C8EBF;endFill=1;startArrow=oval;startFill=1;endSize=6;targetPerimeterSpacing=0;entryX=0;entryY=0;entryDx=0;entryDy=0;" parent="1" source="cRYnzpdCW-J0f_YpP3mc-3" edge="1" target="cRYnzpdCW-J0f_YpP3mc-2">
|
|
<mxGeometry x="-0.36" y="-24" width="50" height="50" relative="1" as="geometry">
|
|
<mxPoint x="80" y="160" as="sourcePoint" />
|
|
<mxPoint x="240" y="160" as="targetPoint" />
|
|
<mxPoint as="offset" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-10" value="<font>outer_size</font>" style="endArrow=none;html=1;strokeWidth=3;rounded=0;dashed=1;align=left;fontSize=20;fontFamily=monospace;fontColor=#6C8EBF;labelBackgroundColor=none;spacingLeft=15;spacingRight=0;spacing=0;exitX=1;exitY=0;exitDx=0;exitDy=0;fillColor=#dae8fc;strokeColor=#6c8ebf;entryX=1;entryY=1;entryDx=0;entryDy=0;" parent="1" source="cRYnzpdCW-J0f_YpP3mc-2" edge="1" target="cRYnzpdCW-J0f_YpP3mc-4">
|
|
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
|
<mxPoint x="850" y="170" as="sourcePoint" />
|
|
<mxPoint x="760" y="420" as="targetPoint" />
|
|
<Array as="points">
|
|
<mxPoint x="860" y="140" />
|
|
<mxPoint x="860" y="380" />
|
|
</Array>
|
|
<mxPoint as="offset" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-11" value="<font>surface_size</font>" style="endArrow=none;html=1;strokeWidth=3;rounded=0;dashed=1;align=left;fontSize=20;fontFamily=monospace;fontColor=#82B366;labelBackgroundColor=none;spacingLeft=15;spacingRight=0;spacing=0;entryX=1;entryY=1;entryDx=0;entryDy=0;fillColor=#d5e8d4;strokeColor=#82B366;" parent="1" target="cRYnzpdCW-J0f_YpP3mc-4" edge="1">
|
|
<mxGeometry x="0.0526" width="50" height="50" relative="1" as="geometry">
|
|
<mxPoint x="600" y="180" as="sourcePoint" />
|
|
<mxPoint x="760" y="420" as="targetPoint" />
|
|
<Array as="points">
|
|
<mxPoint x="700" y="180" />
|
|
<mxPoint x="700" y="380" />
|
|
</Array>
|
|
<mxPoint as="offset" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="cRYnzpdCW-J0f_YpP3mc-12" value="<font>surface_position</font>" style="endArrow=blockThin;html=1;strokeWidth=3;rounded=0;dashed=1;align=right;fontSize=20;fontFamily=monospace;fontColor=#82B366;labelBackgroundColor=none;spacingLeft=0;spacingRight=15;spacing=0;fillColor=#d5e8d4;strokeColor=#82b366;exitX=0;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=0;entryDy=0;curved=1;startArrow=oval;startFill=1;endFill=1;" parent="1" source="cRYnzpdCW-J0f_YpP3mc-2" target="cRYnzpdCW-J0f_YpP3mc-5" edge="1">
|
|
<mxGeometry y="-50" width="50" height="50" relative="1" as="geometry">
|
|
<mxPoint x="140" y="140" as="sourcePoint" />
|
|
<mxPoint x="160" y="200" as="targetPoint" />
|
|
<Array as="points">
|
|
<mxPoint x="250" y="160" />
|
|
</Array>
|
|
<mxPoint x="-5" y="-22" as="offset" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
</root>
|
|
</mxGraphModel>
|
|
</diagram>
|
|
<diagram name="mobile" id="D5mAeJSS4Z33KEKjPCBt">
|
|
<mxGraphModel dx="1710" dy="1120" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="720" pageHeight="720" math="0" shadow="0">
|
|
<root>
|
|
<mxCell id="0" />
|
|
<mxCell id="1" parent="0" />
|
|
<mxCell id="RxwCrVmIsQwV7z5iJ9nY-1" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E8E8E8;fontColor=#333333;strokeColor=#666666;" parent="1" vertex="1">
|
|
<mxGeometry x="200" y="40" width="320" height="640" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="RxwCrVmIsQwV7z5iJ9nY-2" value="" style="rounded=1;whiteSpace=wrap;html=1;shadow=0;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
|
|
<mxGeometry x="210" y="50" width="300" height="620" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="RxwCrVmIsQwV7z5iJ9nY-4" value="" style="rounded=0;whiteSpace=wrap;html=1;shadow=0;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="1" vertex="1">
|
|
<mxGeometry x="210" y="90" width="300" height="540" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="RxwCrVmIsQwV7z5iJ9nY-20" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#DBDBDB;strokeColor=#666666;fontColor=#333333;" parent="1" vertex="1">
|
|
<mxGeometry x="290" y="640" width="140" height="10" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="RxwCrVmIsQwV7z5iJ9nY-3" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#DBDBDB;strokeColor=#666666;fontColor=#333333;" parent="1" vertex="1">
|
|
<mxGeometry x="300" y="50" width="120" height="30" as="geometry" />
|
|
</mxCell>
|
|
<mxCell id="RxwCrVmIsQwV7z5iJ9nY-12" value="<font>surface_size</font>" style="endArrow=none;html=1;strokeWidth=3;rounded=0;dashed=1;align=left;fontSize=20;fontFamily=monospace;fontColor=#82B366;labelBackgroundColor=none;spacingLeft=15;spacingRight=15;spacing=0;fillColor=#d5e8d4;strokeColor=#82b366;exitX=1;exitY=0;exitDx=0;exitDy=0;" parent="1" source="RxwCrVmIsQwV7z5iJ9nY-2" edge="1">
|
|
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
|
<mxPoint x="210" y="50" as="sourcePoint" />
|
|
<mxPoint x="510" y="670" as="targetPoint" />
|
|
<Array as="points">
|
|
<mxPoint x="560" y="50" />
|
|
<mxPoint x="560" y="670" />
|
|
</Array>
|
|
<mxPoint as="offset" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="NrHAzeOh65jb3hkBOxW9-1" value="<div>safe_area.top</div>" style="endArrow=blockThin;html=1;strokeWidth=3;rounded=0;align=right;fontSize=20;fontFamily=monospace;fontColor=#D79B00;labelBackgroundColor=none;spacingLeft=0;spacingRight=15;spacing=0;fillColor=#ffe6cc;strokeColor=#d79b00;startArrow=blockThin;startFill=1;endFill=1;" edge="1" parent="1">
|
|
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
|
<mxPoint x="180" y="50" as="sourcePoint" />
|
|
<mxPoint x="180" y="90" as="targetPoint" />
|
|
<mxPoint as="offset" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
<mxCell id="NrHAzeOh65jb3hkBOxW9-5" value="<div>safe_area.bottom</div>" style="endArrow=blockThin;html=1;strokeWidth=3;rounded=0;align=right;fontSize=20;fontFamily=monospace;fontColor=#D79B00;labelBackgroundColor=none;spacingLeft=0;spacingRight=15;spacing=0;fillColor=#ffe6cc;strokeColor=#d79b00;startArrow=blockThin;startFill=1;endFill=1;" edge="1" parent="1">
|
|
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
|
<mxPoint x="180" y="670" as="sourcePoint" />
|
|
<mxPoint x="180" y="630" as="targetPoint" />
|
|
<mxPoint as="offset" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
</root>
|
|
</mxGraphModel>
|
|
</diagram>
|
|
</mxfile>
|