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>
1 line
5.9 KiB
XML
1 line
5.9 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="-0.5 -0.5 1000 500" class="ge-export-svg-auto"><defs><style><![CDATA[@media (prefers-color-scheme:dark){svg.ge-export-svg-auto svg:not(mjx-container>svg),svg.ge-export-svg-auto:not(mjx-container>svg){filter:invert(100%) hue-rotate(180deg)}}]]></style></defs><g data-cell-id="0"><g data-cell-id="1"><path fill="#e8e8e8" stroke="#666" pointer-events="all" d="M200 80h480v360H200z" data-cell-id="cRYnzpdCW-J0f_YpP3mc-1"/><rect x="260" y="340" width="360" height="40" rx="6" ry="6" fill="#d5e8d4" stroke="#666" pointer-events="all" data-cell-id="cRYnzpdCW-J0f_YpP3mc-4"/><rect x="260" y="140" width="360" height="80" rx="12" ry="12" fill="#dae8fc" stroke="#666" pointer-events="all" data-cell-id="cRYnzpdCW-J0f_YpP3mc-2"/><path fill="#dbdbdb" stroke="#666" pointer-events="all" d="M200 60h480v20H200z" data-cell-id="cRYnzpdCW-J0f_YpP3mc-3"/><path fill="#d5e8d4" pointer-events="all" d="M260 180h360v180H260z" data-cell-id="cRYnzpdCW-J0f_YpP3mc-5"/><path d="M260 360V180" fill="none" stroke="#666" stroke-miterlimit="10" pointer-events="stroke" data-cell-id="cRYnzpdCW-J0f_YpP3mc-6"/><path d="M620 360V180" fill="none" stroke="#666" stroke-miterlimit="10" pointer-events="stroke" data-cell-id="cRYnzpdCW-J0f_YpP3mc-7"/><path d="M260 180h360" fill="none" stroke="#666" stroke-miterlimit="10" pointer-events="stroke" data-cell-id="cRYnzpdCW-J0f_YpP3mc-8"/><g data-cell-id="cRYnzpdCW-J0f_YpP3mc-9"><path d="m201.8 62.4 50.79 67.72" fill="none" stroke="#6c8ebf" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke"/><circle cx="200" cy="60" fill="#6c8ebf" stroke="#6c8ebf" stroke-width="3" pointer-events="all" r="3"/><path d="m257.99 137.32-7.8-5.4 4.8-3.6Z" fill="#6c8ebf" stroke="#6c8ebf" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="101%" height="101%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe flex-end;width:1px;height:1px;padding-top:100px;margin-left:185px"><div style="box-sizing:border-box;font-size:0;text-align:right" data-drawio-colors="color: #6C8EBF;"><div style="display:inline-block;font-size:20px;font-family:"monospace";color:#6c8ebf;line-height:1.2;pointer-events:all;white-space:nowrap"><font>outer_position</font></div></div></div></foreignObject><text x="185" y="106" fill="#6C8EBF" font-family=""monospace"" font-size="20" text-anchor="end">outer...</text></switch></g><g data-cell-id="cRYnzpdCW-J0f_YpP3mc-10"><path d="M620 140h240v240H620" fill="none" stroke="#6c8ebf" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="101%" height="101%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:1px;height:1px;padding-top:260px;margin-left:875px"><div style="box-sizing:border-box;font-size:0;text-align:left" data-drawio-colors="color: #6C8EBF;"><div style="display:inline-block;font-size:20px;font-family:"monospace";color:#6c8ebf;line-height:1.2;pointer-events:all;white-space:nowrap"><font>outer_size</font></div></div></div></foreignObject><text x="875" y="266" fill="#6C8EBF" font-family=""monospace"" font-size="20">outer...</text></switch></g><g data-cell-id="cRYnzpdCW-J0f_YpP3mc-11"><path d="M600 180h100v200h-80" fill="none" stroke="#82b366" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="101%" height="101%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:1px;height:1px;padding-top:280px;margin-left:715px"><div style="box-sizing:border-box;font-size:0;text-align:left" data-drawio-colors="color: #82B366;"><div style="display:inline-block;font-size:20px;font-family:"monospace";color:#82b366;line-height:1.2;pointer-events:all;white-space:nowrap"><font>surface_size</font></div></div></div></foreignObject><text x="715" y="286" fill="#82B366" font-family=""monospace"" font-size="20">surfa...</text></switch></g><g data-cell-id="cRYnzpdCW-J0f_YpP3mc-12"><path d="M258.66 142.68Q250 160 254.48 168.95" fill="none" stroke="#82b366" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="9 9" pointer-events="stroke"/><circle cx="260" cy="140" fill="#82b366" stroke="#82b366" stroke-width="3" pointer-events="all" r="3"/><path d="m258.5 177-6.71-6.71 5.37-2.68Z" fill="#82b366" stroke="#82b366" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="101%" height="101%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe flex-end;width:1px;height:1px;padding-top:160px;margin-left:185px"><div style="box-sizing:border-box;font-size:0;text-align:right" data-drawio-colors="color: #82B366;"><div style="display:inline-block;font-size:20px;font-family:"monospace";color:#82b366;line-height:1.2;pointer-events:all;white-space:nowrap"><font>surface_position</font></div></div></div></foreignObject><text x="185" y="166" fill="#82B366" font-family=""monospace"" font-size="20" text-anchor="end">surfa...</text></switch></g></g></g></svg>
|