From affab54152cb95c8b9f34a48562bae1e0db606e8 Mon Sep 17 00:00:00 2001 From: Christoph Seipel Date: Sat, 24 Feb 2024 01:24:29 +0100 Subject: [PATCH 1/2] Inverted property to slider that reverses the direction --- internal/compiler/widgets/common/slider-base.slint | 14 ++++++++------ internal/compiler/widgets/cosmic-base/slider.slint | 10 ++++++++-- .../compiler/widgets/cupertino-base/slider.slint | 10 ++++++++-- internal/compiler/widgets/fluent-base/slider.slint | 12 ++++++++++-- .../compiler/widgets/material-base/slider.slint | 10 ++++++++-- 5 files changed, 42 insertions(+), 14 deletions(-) diff --git a/internal/compiler/widgets/common/slider-base.slint b/internal/compiler/widgets/common/slider-base.slint index 457064dd84d..f28e068b265 100644 --- a/internal/compiler/widgets/common/slider-base.slint +++ b/internal/compiler/widgets/common/slider-base.slint @@ -6,6 +6,7 @@ export component SliderBase { in property minimum: 0; in property maximum: 100; in property orientation; + in property inverted; in property handle-x; in property handle-y; in property handle-width; @@ -13,6 +14,7 @@ export component SliderBase { out property pressed <=> touch-area.enabled; out property has-hover <=> touch-area.has-hover; out property vertical: root.orientation == Orientation.vertical; + out property has-focus <=> focus-scope.has-focus; out property handle-has-hover: touch-area.mouse-x >= root.handle-x && touch-area.mouse-x <= root.handle-x + root.handle-width && touch-area.mouse-y >= root.handle-y && touch-area.mouse-y <= root.handle-y + root.handle-height; @@ -43,8 +45,9 @@ export component SliderBase { if (!root.handle-has-hover) { - root.set-value((!root.vertical ? root.size-to-value(touch-area.mouse-x, root.width) : - root.size-to-value(touch-area.mouse-y, root.height)) + root.minimum); + root.set-value( (!vertical ? root.size-to-value(touch-area.mouse-x + ((touch-area.mouse-x/root.width - 0.5)*root.ref-size ), root.width) : + root.size-to-value(touch-area.mouse-y + ((touch-area.mouse-y/root.height - 0.5)*root.ref-size ), root.height)) + ); } self.pressed-value = value; @@ -55,9 +58,8 @@ export component SliderBase { if (!self.enabled) { return; } - - root.set-value(self.pressed-value + (!vertical ? root.size-to-value(touch-area.mouse-x - touch-area.pressed-x, root.width - root.ref-size) : - root.size-to-value(touch-area.mouse-y - touch-area.pressed-y, root.height - root.ref-size)) + root.set-value( (!vertical ? root.size-to-value(touch-area.mouse-x + ((touch-area.mouse-x/root.width - 0.5)*root.ref-size ), root.width) : + root.size-to-value(touch-area.mouse-y + ((touch-area.mouse-y/root.height - 0.5)*root.ref-size ), root.height)) ); } } @@ -87,7 +89,7 @@ export component SliderBase { } pure function size-to-value(size: length, range: length) -> float { - size * (root.maximum - root.minimum) / range; + !inverted ? size/range * (root.maximum - root.minimum) + root.minimum : (1 - size/range )* (root.maximum - root.minimum) + root.minimum ; } function set-value(value: float) { diff --git a/internal/compiler/widgets/cosmic-base/slider.slint b/internal/compiler/widgets/cosmic-base/slider.slint index c4630c7eafe..79df6cb088f 100644 --- a/internal/compiler/widgets/cosmic-base/slider.slint +++ b/internal/compiler/widgets/cosmic-base/slider.slint @@ -7,6 +7,7 @@ import { SliderBase } from "../common/slider-base.slint"; export component Slider { in property orientation <=> base.orientation; + in property inverted <=> base.inverted; in property maximum <=> base.maximum; in property minimum <=> base.minimum; in property enabled <=> base.enabled; @@ -49,8 +50,13 @@ export component Slider { } thumb := Rectangle { - x: base.vertical ? (parent.width - self.width) / 2 : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum); - y: base.vertical ? (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2; + x: base.vertical ? (parent.width - self.width) / 2 + : inverted ? (parent.width - self.width) * (root.maximum - root.value) / (root.maximum - root.minimum) + : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum); + y: base.vertical ? (inverted ? + (parent.height - self.height) * (root.maximum - root.value) / (root.maximum - root.minimum) + : (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum)) + : (parent.height - self.height) / 2; width: 20px; height: self.width; border-radius: 10px; diff --git a/internal/compiler/widgets/cupertino-base/slider.slint b/internal/compiler/widgets/cupertino-base/slider.slint index 4612477aae6..c4b760e6197 100644 --- a/internal/compiler/widgets/cupertino-base/slider.slint +++ b/internal/compiler/widgets/cupertino-base/slider.slint @@ -6,6 +6,7 @@ import { SliderBase } from "../common/slider-base.slint"; export component Slider { in property orientation <=> i-base.orientation; + in property inverted <=> i-base.inverted; in property maximum <=> i-base.maximum; in property minimum <=> i-base.minimum; in property enabled <=> i-base.enabled; @@ -57,8 +58,13 @@ export component Slider { } i-thumb := Rectangle { - x: i-base.vertical ? (parent.width - self.width) / 2 : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum); - y: i-base.vertical ? (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2; + x: i-base.vertical ? (parent.width - self.width) / 2 + : inverted ? (parent.width - self.width) * (root.maximum - root.value) / (root.maximum - root.minimum) + : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum); + y: i-base.vertical ? (inverted ? + (parent.height - self.height) * (root.maximum - root.value) / (root.maximum - root.minimum) + : (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum)) + : (parent.height - self.height) / 2; width: 20px; height: self.width; border-radius: 10px; diff --git a/internal/compiler/widgets/fluent-base/slider.slint b/internal/compiler/widgets/fluent-base/slider.slint index 3a3db9128d5..57aea4fc07a 100644 --- a/internal/compiler/widgets/fluent-base/slider.slint +++ b/internal/compiler/widgets/fluent-base/slider.slint @@ -6,6 +6,7 @@ import { SliderBase } from "../common/slider-base.slint"; export component Slider { in property orientation <=> i-base.orientation; + in property inverted <=> i-base.inverted; in property maximum <=> i-base.maximum; in property minimum <=> i-base.minimum; in property enabled <=> i-base.enabled; @@ -59,8 +60,15 @@ export component Slider { } i-thumb := Rectangle { - x: i-base.vertical ? (parent.width - self.width) / 2 : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum); - y: i-base.vertical ? (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2; + //x: i-base.vertical ? (parent.width - self.width) / 2 : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum); + x: i-base.vertical ? (parent.width - self.width) / 2 + : inverted ? (parent.width - self.width) * (root.maximum - root.value) / (root.maximum - root.minimum) + : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum); + //y: i-base.vertical ? (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2; + y: i-base.vertical ? (inverted ? + (parent.height - self.height) * (root.maximum - root.value) / (root.maximum - root.minimum) + : (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum)) + : (parent.height - self.height) / 2; width: 20px; height: self.width; border-radius: 10px; diff --git a/internal/compiler/widgets/material-base/slider.slint b/internal/compiler/widgets/material-base/slider.slint index 758a1e30686..b2d65774691 100644 --- a/internal/compiler/widgets/material-base/slider.slint +++ b/internal/compiler/widgets/material-base/slider.slint @@ -8,6 +8,7 @@ import { SliderBase } from "../common/slider-base.slint"; // Allows to select a value from a range of values. export component Slider { in property orientation <=> i-base.orientation; + in property inverted <=> i-base.inverted; in property maximum <=> i-base.maximum; in property enabled <=> i-base.enabled; in property minimum <=> i-base.minimum; @@ -76,8 +77,13 @@ export component Slider { i-handle := Rectangle { background: MaterialPalette.accent-background; - x: i-base.vertical ? (parent.width - self.width) / 2 : (parent.width - i-handle.width) * (root.value - root.minimum) / (root.maximum - root.minimum); - y: i-base.vertical ? (parent.height - i-handle.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2; + x: i-base.vertical ? (parent.width - self.width) / 2 + : inverted ? (parent.width - self.width) * (root.maximum - root.value) / (root.maximum - root.minimum) + : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum); + y: i-base.vertical ? (inverted ? + (parent.height - self.height) * (root.maximum - root.value) / (root.maximum - root.minimum) + : (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum)) + : (parent.height - self.height) / 2; width: i-base.vertical ? root.width : root.height; height: i-base.vertical ? root.width : root.height; border-radius: max(self.width, self.height) / 2; From 75517a30aa472cda5ffa924b3dbbf164e1d94acc Mon Sep 17 00:00:00 2001 From: Christoph Seipel Date: Wed, 28 Feb 2024 00:53:22 +0100 Subject: [PATCH 2/2] Add inverted property to slider documentation. --- docs/reference/src/language/widgets/slider.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/reference/src/language/widgets/slider.md b/docs/reference/src/language/widgets/slider.md index de41e5398e3..018eff296e1 100644 --- a/docs/reference/src/language/widgets/slider.md +++ b/docs/reference/src/language/widgets/slider.md @@ -9,6 +9,7 @@ - **`minimum`** (_in_ _float_): The minimum value (default: 0) - **`maximum`** (_in_ _float_): The maximum value (default: 100) - **`orientation`** (_in_ _enum [`Orientation`](../builtins/enums.md#orientation)_): If set to true the Slider is displayed vertical (default: horizontal). +- **`inverted`**: (_in_ _bool_): Defaults to false. If set to true, the slider changes it's direction. ### Callbacks