mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-07 23:02:31 +08:00
efe0c8d534
* [v3-Windows] New DIP system for Enhanced High DPI Monitor Support * Update changelog * Remove asset middleware * Remove SetThreadDpiAwarenessContext() * Fix macOS build. * Fill missing screens fields (linux, darwin) * Skip DPI transformation on unsupported platforms * Simplify distanceFromRectSquared() * Update v3/pkg/application/screenmanager.go Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: Lea Anthony <lea.anthony@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
142 lines
5.8 KiB
HTML
142 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Screens Demo</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
background-color: white;
|
|
}
|
|
#container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
}
|
|
svg {
|
|
user-select: none;
|
|
cursor: crosshair;
|
|
}
|
|
.controls > div {
|
|
padding-bottom: 10px;
|
|
}
|
|
.controls > div > span:first-child {
|
|
display: inline-block;
|
|
width: 6em;
|
|
}
|
|
.controls .radio-btn {
|
|
display: inline-block;
|
|
padding: 0 3px 2px;
|
|
border-radius: 5px;
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
background-color: #ecf3f7;
|
|
box-shadow: 1px 1px 3px 0px #00000070;
|
|
border: solid 1px #9a9a9a;
|
|
cursor: default;
|
|
user-select: none;
|
|
}
|
|
.controls .radio-btn.active {
|
|
background-color: #d0d8dc;
|
|
box-shadow: inset 1px 1px 3px 0px #00000070;
|
|
}
|
|
#probe-buttons:not(.active) button:last-child {
|
|
display: none;
|
|
}
|
|
#probe-buttons.active button:not(:last-child) {
|
|
display: none;
|
|
}
|
|
.advanced {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<!-- Remove the underscore "_" from the class name to show test buttons in advanced move -->
|
|
<div class="advanced_" style="display: none;">
|
|
<button onclick="document.location.reload()">Reload</button>
|
|
<button onclick="test1()">Test1</button>
|
|
<button onclick="test2()">Test2</button>
|
|
<hr>
|
|
</div>
|
|
<div class="advanced">
|
|
<label>
|
|
✥
|
|
<input id="step" type="number" value="50" style="width: 55px" title="DIP Step, Arrow Move" onkeydown="arrowMove(event)">
|
|
</label>
|
|
X:
|
|
<button onclick="updateDipRect(-step.value)"><</button>
|
|
<button onclick="updateDipRect(+step.value)">></button>
|
|
Width:
|
|
<button onclick="updateDipRect(0, 0, -step.value)">-</button>
|
|
<button onclick="updateDipRect(0, 0, +step.value)">+</button>
|
|
|
|
<input id="x" type="number" value="100" style="width: 55px" title="X">
|
|
<input id="y" type="number" value="100" style="width: 55px" title="Y">
|
|
|
|
<input id="w" type="number" value="800" style="width: 55px" title="Width">
|
|
<input id="h" type="number" value="600" style="width: 55px" title="Height">
|
|
|
|
<button onclick="drawRect({X: +x.value, Y: +y.value, Width: +w.value, Height: +h.value})">Set rect</button>
|
|
|
|
Layers: <input id="slider" type="range" min="1" max="5" value="3" style="width: 70px" oninput="drawRect()">
|
|
<hr>
|
|
</div>
|
|
<div class="controls" onmousedown="radioBtnClick(event)">
|
|
<div id="layout-selector" class="radio-btn-group">
|
|
<span>Screens</span>:
|
|
<span class="radio-btn" data-value="0">System</span>
|
|
<span class="advanced">
|
|
<span> - Examples </span>
|
|
<select id="examples-type" onchange="setExamplesType(event.target.value)">
|
|
<option value="0" selected>Normal</option>
|
|
<option value="1">Test cases</option>
|
|
<option value="2">Edge cases</option>
|
|
</select> :
|
|
<span id="examples-list"></span>
|
|
<small id="example-name"></small>
|
|
</span>
|
|
</div>
|
|
<div id="coordinate-selector" class="radio-btn-group">
|
|
<span>Coordinates</span>:
|
|
<span class="radio-btn active" data-value="0">Physical (PX)</span>
|
|
<span class="radio-btn" data-value="1">Logical (DIP)</span>
|
|
<label><input type="checkbox" id="retain-viewbox" onchange="draw()" checked> Retain viewbox</label>
|
|
<button onclick="showAdvanced(event)" style="margin-left: 1em">Show advanced</button>
|
|
|
|
<span id="probe-buttons" class="advanced">
|
|
<button onclick="probeLayout()">Probe layout</button>
|
|
<button onclick="probeAllExamples()">Probe all examples</button>
|
|
<button onclick="window.cancelProbing = true">Cancel Probing</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<svg
|
|
id="svg"
|
|
viewBox="0 0 500 500"
|
|
fill="none"
|
|
stroke="none"
|
|
preserveAspectRatio="xMinYMin"
|
|
>
|
|
<defs>
|
|
<svg id="point1" preserveAspectRatio="xMinYMin" viewBox="0 0 100 100"><path d="M9 1H2.4L7.1 5.7 5.7 7.1 1 2.4V9H-1V2.3L-5.7 7-7.1 5.6-2.6 1H-9V-1H-2.4L-7.1-5.7-6-7-1-2.4V-9H1V-2.6L5.6-7.2 7-5.7 2.3-1H9V1Z" /></svg>
|
|
<path id="point2" d="M9 1H2.4L7.1 5.7 5.7 7.1 1 2.4V9H-1V2.3L-5.7 7-7.1 5.6-2.6 1H-9V-1H-2.4L-7.1-5.7-6-7-1-2.4V-9H1V-2.6L5.6-7.2 7-5.7 2.3-1H9V1Z" />
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
|
|
<script src="/wails/runtime.js" type="module"></script>
|
|
<script id="script" src="./examples.js"></script>
|
|
<script id="script" src="./main.js" defer></script>
|
|
</body>
|
|
</html>
|