plugins/components/Slider.qml

0001 /* This file is part of the KDE project
0002  * SPDX-FileCopyrightText: 2012 Dan Leinir Turthra Jensen <admin@leinir.dk>
0003  *
0004  * SPDX-License-Identifier: GPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.3
0008 import org.krita.sketch 1.0
0009
0010 Item {
0011     id: base;
0012     height: Constants.LargeFontSize;
0013     property double value: 0;
0014     property double exponentialValue: 0;
0015     property bool highPrecision: false;
0016     property bool useExponentialValue: false;
0017     onValueChanged: handle.resetHandle();
0018     onExponentialValueChanged: handle.resetHandle(true);
0019
0020     property alias border: fill.border;
0021     property alias background: fill.color;
0022
0023     Rectangle {
0024         id: fill;
0025         anchors.fill: parent;
0026         border.width: 1;
0027         border.color: Settings.theme.color("components/slider/background/border");
0028         color: Settings.theme.color("components/slider/background/fill");
0029         radius: height / 2;
0030     }
0031     MouseArea {
0032         anchors.fill: parent;
0033         function handlePos(mouse) {
0034             var position = mouse.x - (handle.height / 2);
0035             handle.x = position < 0 ? 0 : position > base.width - handle.width ? base.width - handle.width : position;
0036             handle.resetHandle(useExponentialValue);
0037         }
0038         onClicked: handlePos(mouse);
0039         onPositionChanged: handlePos(mouse);
0040     }
0041     Rectangle {
0042         id: handle;
0043         property bool settingSelf: false;
0044         property bool settingExp: false;
0045         function resetHandle(resetExponential)
0046         {
0047             if (!settingSelf) {
0048                 // Yes, this seems very odd. However, one cannot assign something undefined to a bool property, so...
0049                 settingExp = resetExponential ? true : false;
0050                 // This is required as width is not set if we are not done initialising yet.
0051                 if (base.width === 0)
0052                     return;
0053                 var newX = 0;
0054                 if (settingExp) {
0055                     var newX = Math.round(Math.log(1 + (base.exponentialValue / 100 * 15)) / 2.77258872 * (handle.maximumX - handle.minimumX) + handle.minimumX);
0056                 }
0057                 else {
0058                     var newX = Math.round(base.value / 100 * (handle.maximumX - handle.minimumX) + handle.minimumX);
0059                 }
0060                 if (newX !== handle.x)
0061                     handle.x = newX;
0062                 settingExp = false;
0063             }
0064         }
0065         y: 2
0066         x: 2
0067         function calculateWidth(x)
0068         {
0069             var v = 100 * ((Math.exp(2.77258872 * (x / 100)) - 1) / 15);
0070
0071             // Check boundary conditions as Math.exp may round off too much.
0072             if (x === 0 || x === 100) {
0073                 return x;
0074             }
0075
0076             return Math.min(100, Math.max(0, v));
0077         }
0078         onXChanged: {
0079             if (settingExp || settingSelf)
0080                  return;
0081             settingSelf = true;
0082             if (highPrecision) {
0083                 var newValue = ((handle.x - handle.minimumX) * 100) / (handle.maximumX - handle.minimumX);
0084                 if (base.value != newValue) {
0085                     base.exponentialValue = calculateWidth(newValue);
0086                     base.value = Math.max(0, newValue);
0087                 }
0088             }
0089             else {
0090                 var newValue = Math.round( ((handle.x - handle.minimumX) * 100) / (handle.maximumX - handle.minimumX) );
0091                 if (base.value != newValue) {
0092                     base.exponentialValue = calculateWidth(newValue);
0093                     base.value = Math.max(0, newValue);
0094                 }
0095             }
0096             settingSelf = false;
0097         }
0098         height: parent.height - 4;
0099         width: height;
0100         radius: (height / 2) + 1;
0101         color: Settings.theme.color("components/slider/handle/fill");
0102         border.width: 1;
0103         border.color: Settings.theme.color("components/slider/handle/border");
0104         property int minimumX: 2;
0105         property int maximumX: base.width - handle.width - 2;
0106     }
0107 }