ui/Components/FocusedImage.qml

0001 // SPDX-FileCopyrightText: 2023 Joshua Goins <josh@redstrate.com>
0002 // SPDX-License-Identifier: LGPL-2.0-or-later
0003
0004 import QtQuick
0005 import org.kde.kirigami 2 as Kirigami
0006 import QtQuick.Controls 2 as QQC2
0007 import QtQml.Models
0008 import QtQuick.Layouts
0009
0010 Rectangle {
0011     id: root
0012
0013     // The aspect ratio of the viewport.
0014     readonly property real aspectRatio: width / height
0015
0016     property alias source: image.source
0017     property alias sourceSize: image.sourceSize
0018     property alias status: image.status
0019
0020     property bool crop: true
0021     property real focusX: 0.0
0022     property real focusY: 0.0
0023
0024     implicitWidth: parent.width
0025     implicitHeight: parent.width * (9.0 / 16.0)
0026
0027     clip: true
0028
0029     Image {
0030         id: image
0031
0032         // The aspect ratio of the image (before it's cropped).
0033         readonly property real aspectRatio: sourceSize.width / Math.max(sourceSize.height, 1)
0034
0035         // Whether the image is going to be vertically or horizontally cropped, based on if the aspect ratio is bigger
0036         // or smaller.
0037         readonly property bool horizontallyCropped: aspectRatio > parent.aspectRatio
0038         readonly property bool verticallyCropped: aspectRatio < parent.aspectRatio
0039
0040         // Transforms the focus from [-1, 1] to [0, 1].
0041         readonly property real focusRangeX: (-root.focusX + 1.0) / 2.0
0042         readonly property real focusRangeY: (-root.focusY + 1.0) / 2.0
0043
0044         // The x, y that centers the image.
0045         readonly property real centerX: parent.width - width
0046         readonly property real centerY: parent.height - height
0047
0048         // Sets the position from the range of [0, 1] where (0, 0) is the top-left of the image,
0049         // and (1, 1) is the bottom-right. Values of (0.5, 0.5) results in a perfectly centered image.
0050         x: centerX * focusRangeX
0051         y: centerY * focusRangeY
0052
0053         // Sets the width and height depending on whether the image is horizontally or vertically cropped.
0054         // For example, if it's vertically cropped then the image is set to the viewport size and the height is based on
0055         // the image aspect ratio. Vice versa for horizontally cropped images.
0056         width: horizontallyCropped ? (parent.height * aspectRatio) : parent.width
0057         height: verticallyCropped ? (parent.width * (1.0 / aspectRatio)) : parent.height
0058
0059         mipmap: true
0060         cache: true
0061     }
0062 }