mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-07 19:31:03 +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>
207 lines
7.5 KiB
JavaScript
207 lines
7.5 KiB
JavaScript
window.examples = [
|
|
[
|
|
// Normal examples (demonstrate real life scenarios)
|
|
{
|
|
name: "Single 4k monitor",
|
|
screens: [
|
|
{id: 1, w: 3840, h: 2160, s: 163.0 / 96, name: `27" 4K UHD 163DPI`},
|
|
]
|
|
},
|
|
{
|
|
name: "Two monitors",
|
|
screens: [
|
|
{id: 1, w: 3840, h: 2160, s: 163.0 / 96, name: `27" 4K UHD 163DPI`},
|
|
{id: 2, w: 1920, h: 1080, s: 1, parent: {id: 1, align: "r", offset: 0}, name: `23" FHD 96DPI`},
|
|
]
|
|
},
|
|
{
|
|
name: "Two monitors (2)",
|
|
screens: [
|
|
{id: 1, w: 1920, h: 1080, s: 1, name: `23" FHD 96DPI`},
|
|
{id: 2, w: 1920, h: 1080, s: 1.25, parent: {id: 1, align: "r", offset: 0}, name: `23" FHD 96DPI (125%)`},
|
|
]
|
|
},
|
|
{
|
|
name: "Three monitors",
|
|
screens: [
|
|
{id: 1, w: 3840, h: 2160, s: 163.0 / 96, name: `27" 4K UHD 163DPI`},
|
|
{id: 2, w: 1920, h: 1080, s: 1, parent: {id: 1, align: "r", offset: 0}, name: `23" FHD 96DPI`},
|
|
{id: 3, w: 1920, h: 1080, s: 1.25, parent: {id: 1, align: "l", offset: 0}, name: `23" FHD 96DPI (125%)`},
|
|
]
|
|
},
|
|
{
|
|
name: "Four monitors",
|
|
screens: [
|
|
{id: 1, w: 3840, h: 2160, s: 163.0 / 96, name: `27" 4K UHD 163DPI`},
|
|
{id: 2, w: 1920, h: 1080, s: 1, parent: {id: 1, align: "r", offset: 0}, name: `23" FHD 96DPI`},
|
|
{id: 3, w: 1920, h: 1080, s: 1.25, parent: {id: 2, align: "b", offset: 0}, name: `23" FHD 96DPI (125%)`},
|
|
{id: 4, w: 1080, h: 1920, s: 1, parent: {id: 1, align: "l", offset: 0}, name: `23" FHD (90deg)`},
|
|
]
|
|
},
|
|
],
|
|
[
|
|
// Test cases examples (demonstrate the algorithm basics)
|
|
{
|
|
name: "Child scaled, Start offset",
|
|
screens: [
|
|
{id: 1, w: 1200, h: 1200, s: 1, name: "Parent"},
|
|
{id: 2, w: 1200, h: 1200, s: 1.5, parent: {id: 1, align: "r", offset: 600}, name: "Child"},
|
|
]
|
|
},
|
|
{
|
|
name: "Child scaled, End offset",
|
|
screens: [
|
|
{id: 1, w: 1200, h: 1200, s: 1, name: "Parent"},
|
|
{id: 2, w: 1200, h: 1200, s: 1.5, parent: {id: 1, align: "r", offset: -600}, name: "Child"},
|
|
]
|
|
},
|
|
{
|
|
name: "Parent scaled, Start offset percent",
|
|
screens: [
|
|
{id: 1, w: 1200, h: 1200, s: 1.5, name: "Parent"},
|
|
{id: 2, w: 1200, h: 1200, s: 1, parent: {id: 1, align: "r", offset: 600}, name: "Child"},
|
|
]
|
|
},
|
|
{
|
|
name: "Parent scaled, End offset percent",
|
|
screens: [
|
|
{id: 1, w: 1200, h: 1200, s: 1.5, name: "Parent"},
|
|
{id: 2, w: 1200, h: 1200, s: 1, parent: {id: 1, align: "r", offset: -600}, name: "Child"},
|
|
]
|
|
},
|
|
{
|
|
name: "Parent scaled, Start align",
|
|
screens: [
|
|
{id: 1, w: 1200, h: 1200, s: 1.5, name: "Parent"},
|
|
{id: 2, w: 1200, h: 1100, s: 1, parent: {id: 1, align: "r", offset: 0}, name: "Child"},
|
|
]
|
|
},
|
|
{
|
|
name: "Parent scaled, End align",
|
|
screens: [
|
|
{id: 1, w: 1200, h: 1200, s: 1.5, name: "Parent"},
|
|
{id: 2, w: 1200, h: 1200, s: 1, parent: {id: 1, align: "r", offset: 0}, name: "Child"},
|
|
]
|
|
},
|
|
{
|
|
name: "Parent scaled, in-between",
|
|
screens: [
|
|
{id: 1, w: 1200, h: 1200, s: 1.5, name: "Parent"},
|
|
{id: 2, w: 1200, h: 1500, s: 1, parent: {id: 1, align: "r", offset: -200}, name: "Child"},
|
|
]
|
|
},
|
|
],
|
|
[
|
|
// Edge cases examples
|
|
{
|
|
name: "Parent order (5 is parent of 4)",
|
|
screens: [
|
|
{id: 1, w: 1920, h: 1080, s: 1},
|
|
{id: 2, w: 1024, h: 600, s: 1.25, parent: {id: 1, align: "r", offset: -200}},
|
|
{id: 3, w: 800, h: 800, s: 1.25, parent: {id: 2, align: "b", offset: 0}},
|
|
{id: 4, w: 800, h: 1080, s: 1.5, parent: {id: 2, align: "re", offset: 100}},
|
|
{id: 5, w: 600, h: 600, s: 1, parent: {id: 3, align: "r", offset: 100}},
|
|
]
|
|
},
|
|
{
|
|
name: "de-intersection reparent",
|
|
screens: [
|
|
{id: 1, w: 1920, h: 1080, s: 1},
|
|
{id: 2, w: 1680, h: 1050, s: 1.25, parent: {id: 1, align: "r", offset: 10}},
|
|
{id: 3, w: 1440, h: 900, s: 1.5, parent: {id: 1, align: "le", offset: 150}},
|
|
{id: 4, w: 1024, h: 768, s: 1, parent: {id: 3, align: "bc", offset: -200}},
|
|
{id: 5, w: 1024, h: 768, s: 1.25, parent: {id: 4, align: "r", offset: 400}},
|
|
]
|
|
},
|
|
{
|
|
name: "de-intersection (unattached child)",
|
|
screens: [
|
|
{id: 1, w: 1920, h: 1080, s: 1},
|
|
{id: 2, w: 1024, h: 768, s: 1.5, parent: {id: 1, align: "le", offset: 10}},
|
|
{id: 3, w: 1024, h: 768, s: 1.25, parent: {id: 2, align: "b", offset: 100}},
|
|
{id: 4, w: 1024, h: 768, s: 1, parent: {id: 3, align: "r", offset: 500}},
|
|
]
|
|
},
|
|
{
|
|
name: "Multiple de-intersection",
|
|
screens: [
|
|
{id: 1, w: 1920, h: 1080, s: 1},
|
|
{id: 2, w: 1024, h: 768, s: 1, parent: {id: 1, align: "be", offset: 0}},
|
|
{id: 3, w: 1024, h: 768, s: 1, parent: {id: 2, align: "b", offset: 300}},
|
|
{id: 4, w: 1024, h: 768, s: 1.5, parent: {id: 2, align: "le", offset: 100}},
|
|
{id: 5, w: 1024, h: 768, s: 1, parent: {id: 4, align: "be", offset: 100}},
|
|
]
|
|
},
|
|
{
|
|
name: "Multiple de-intersection (left-side)",
|
|
screens: [
|
|
{id: 1, w: 1920, h: 1080, s: 1},
|
|
{id: 2, w: 1024, h: 768, s: 1, parent: {id: 1, align: "le", offset: 0}},
|
|
{id: 3, w: 1024, h: 768, s: 1, parent: {id: 2, align: "b", offset: 300}},
|
|
{id: 4, w: 1024, h: 768, s: 1.5, parent: {id: 2, align: "le", offset: 100}},
|
|
{id: 5, w: 1024, h: 768, s: 1, parent: {id: 4, align: "be", offset: 100}},
|
|
]
|
|
},
|
|
{
|
|
name: "Parent de-intersection child offset",
|
|
screens: [
|
|
{id: 1, w: 1600, h: 1600, s: 1.5},
|
|
{id: 2, w: 800, h: 800, s: 1, parent: {id: 1, align: "r", offset: 0}},
|
|
{id: 3, w: 800, h: 800, s: 1, parent: {id: 1, align: "r", offset: 800}},
|
|
{id: 4, w: 800, h: 1600, s: 1, parent: {id: 2, align: "r", offset: 0}},
|
|
]
|
|
},
|
|
],
|
|
].map(sections => sections.map(layout => {
|
|
return parseLayout(layout)
|
|
}))
|
|
|
|
function parseLayout(layout) {
|
|
const screens = []
|
|
|
|
for (const screen of layout.screens) {
|
|
let x = 0, y = 0
|
|
const {w, h} = screen
|
|
|
|
if (screen.parent) {
|
|
const parent = screens.find(s => s.ID == screen.parent.id).Bounds
|
|
const offset = screen.parent.offset
|
|
let align = screen.parent.align
|
|
let align2 = ""
|
|
|
|
if (align.length == 2) {
|
|
align2 = align.charAt(1)
|
|
align = align.charAt(0)
|
|
}
|
|
|
|
x = parent.X
|
|
y = parent.Y
|
|
// t: top, b: bottom, l: left, r: right, e: edge, c: corner
|
|
if (align == "t" || align == "b") {
|
|
x += offset + (align2 == "e" || align2 == "c" ? parent.Width : 0) - (align2 == "e" ? w : 0)
|
|
y += (align == "t" ? -h : parent.Height)
|
|
} else {
|
|
y += offset + (align2 == "e" || align2 == "c" ? parent.Height : 0) - (align2 == "e" ? h : 0)
|
|
x += (align == "l" ? -w : parent.Width)
|
|
}
|
|
}
|
|
|
|
screens.push({
|
|
ID: `${screen.id}`,
|
|
Name: screen.name ?? `Display${screen.id}`,
|
|
ScaleFactor: Math.round(screen.s * 100) / 100,
|
|
X: x,
|
|
Y: y,
|
|
Size: {Width: w, Height: h},
|
|
Bounds: {X: x, Y: y, Width: w, Height: h},
|
|
PhysicalBounds: {X: x, Y: y, Width: w, Height: h},
|
|
WorkArea: {X: x, Y: y, Width: w, Height: h-Math.round(40*screen.s)},
|
|
PhysicalWorkArea: {X: x, Y: y, Width: w, Height: h-Math.round(40*screen.s)},
|
|
IsPrimary: screen.id == 1,
|
|
Rotation: 0
|
|
})
|
|
}
|
|
|
|
return {name: layout.name, screens}
|
|
}
|