@effindomv2/fui-as 0.1.12 → 0.1.13

package/src/controls/internal/SliderPresenter.ts

@@ -1,6 +1,7 @@
 import { BorderStyle, Orientation, Unit } from "../../core/ffi";
 import { Theme } from "../../core/Theme";
 import { FlexBox } from "../../nodes";
+import { SliderSizing } from "../ControlSizing";
 
 function clamp(value: f32, min: f32, max: f32): f32 {
   if (value < min) {
@@ -12,6 +13,18 @@ function clamp(value: f32, min: f32, max: f32): f32 {
   return value;
 }
 
+function resolveThumbSize(metrics: SliderPresenterMetrics): f32 {
+  return metrics.thumbSize > 1.0 ? metrics.thumbSize : 1.0;
+}
+
+function resolveTrackThickness(metrics: SliderPresenterMetrics): f32 {
+  return clamp(metrics.trackThickness, 1.0, resolveThumbSize(metrics));
+}
+
+function resolveCrossAxisExtra(metrics: SliderPresenterMetrics): f32 {
+  return metrics.crossAxisExtra > 0.0 ? metrics.crossAxisExtra : 0.0;
+}
+
 export class SliderPresenterMetrics {
   constructor(
     readonly thumbSize: f32,
@@ -20,6 +33,20 @@ export class SliderPresenterMetrics {
   ) {}
 }
 
+const DEFAULT_SLIDER_METRICS = new SliderPresenterMetrics(18.0, 6.0, 2.0);
+
+function resolveSliderMetrics(sizing: SliderSizing | null): SliderPresenterMetrics {
+  if (sizing === null) {
+    return DEFAULT_SLIDER_METRICS;
+  }
+  const thumbSize = sizing.hasThumbSize ? sizing.thumbSizePx : DEFAULT_SLIDER_METRICS.thumbSize;
+  const trackThickness = sizing.hasTrackThickness ? sizing.trackThicknessPx : DEFAULT_SLIDER_METRICS.trackThickness;
+  if (thumbSize == DEFAULT_SLIDER_METRICS.thumbSize && trackThickness == DEFAULT_SLIDER_METRICS.trackThickness) {
+    return DEFAULT_SLIDER_METRICS;
+  }
+  return new SliderPresenterMetrics(thumbSize, trackThickness, DEFAULT_SLIDER_METRICS.crossAxisExtra);
+}
+
 export class SliderVisualState {
   constructor(
     readonly value: f32,
@@ -61,15 +88,15 @@ class DefaultSliderPresenter extends SliderPresenter {
   private readonly fillNode: FlexBox;
   private readonly thumbNode: FlexBox;
 
-  constructor() {
+  constructor(metrics: SliderPresenterMetrics = DEFAULT_SLIDER_METRICS) {
     const root = new FlexBox();
-    super(root, new SliderPresenterMetrics(18.0, 6.0, 2.0));
+    super(root, metrics);
     const trackNode = new FlexBox().positionAbsolute();
     const fillNode = new FlexBox().positionAbsolute();
     const thumbNode = new FlexBox()
       .positionAbsolute()
-      .width(18.0, Unit.Pixel)
-      .height(18.0, Unit.Pixel);
+      .width(metrics.thumbSize, Unit.Pixel)
+      .height(metrics.thumbSize, Unit.Pixel);
     this.trackNode = trackNode;
     this.fillNode = fillNode;
     this.thumbNode = thumbNode;
@@ -81,26 +108,30 @@ class DefaultSliderPresenter extends SliderPresenter {
 
   layout(state: SliderVisualState, length: f32): void {
     const metrics = this.metrics;
-    const available = length > metrics.thumbSize ? length - metrics.thumbSize : 0.0;
+    const thumbSize = resolveThumbSize(metrics);
+    const trackThickness = resolveTrackThickness(metrics);
+    const crossAxisExtra = resolveCrossAxisExtra(metrics);
+    const available = length > thumbSize ? length - thumbSize : 0.0;
     const fraction = clamp(state.normalizedValue, 0.0, 1.0);
-    const crossAxisInset = metrics.crossAxisExtra * 0.5;
+    const crossAxisInset = crossAxisExtra * 0.5;
+    const trackOffset = crossAxisInset + ((thumbSize - trackThickness) * 0.5);
     if (state.orientation == Orientation.Vertical) {
       this.root
-        .width(metrics.thumbSize + metrics.crossAxisExtra, Unit.Pixel)
+        .width(thumbSize + crossAxisExtra, Unit.Pixel)
         .height(length, Unit.Pixel);
       this.trackNode
-        .width(metrics.trackThickness, Unit.Pixel)
+        .width(trackThickness, Unit.Pixel)
         .height(available, Unit.Pixel)
         .position(
-          crossAxisInset + ((metrics.thumbSize - metrics.trackThickness) * 0.5),
-          metrics.thumbSize * 0.5,
+          trackOffset,
+          thumbSize * 0.5,
         );
       this.fillNode
-        .width(metrics.trackThickness, Unit.Pixel)
+        .width(trackThickness, Unit.Pixel)
         .height(available * fraction, Unit.Pixel)
         .position(
-          crossAxisInset + ((metrics.thumbSize - metrics.trackThickness) * 0.5),
-          metrics.thumbSize * 0.5 + (available * (1.0 - fraction)),
+          trackOffset,
+          thumbSize * 0.5 + (available * (1.0 - fraction)),
         );
       this.thumbNode.position(
         crossAxisInset,
@@ -111,20 +142,20 @@ class DefaultSliderPresenter extends SliderPresenter {
 
     this.root
       .width(length, Unit.Pixel)
-      .height(metrics.thumbSize + metrics.crossAxisExtra, Unit.Pixel);
+      .height(thumbSize + crossAxisExtra, Unit.Pixel);
     this.trackNode
       .width(available, Unit.Pixel)
-      .height(metrics.trackThickness, Unit.Pixel)
+      .height(trackThickness, Unit.Pixel)
       .position(
-        metrics.thumbSize * 0.5,
-        crossAxisInset + ((metrics.thumbSize - metrics.trackThickness) * 0.5),
+        thumbSize * 0.5,
+        trackOffset,
       );
     this.fillNode
       .width(available * fraction, Unit.Pixel)
-      .height(metrics.trackThickness, Unit.Pixel)
+      .height(trackThickness, Unit.Pixel)
       .position(
-        metrics.thumbSize * 0.5,
-        crossAxisInset + ((metrics.thumbSize - metrics.trackThickness) * 0.5),
+        thumbSize * 0.5,
+        trackOffset,
       );
     this.thumbNode.position(
       available * fraction,
@@ -137,12 +168,17 @@ class DefaultSliderPresenter extends SliderPresenter {
       ? theme.colors.accentPressed
       : (state.hovered ? theme.colors.accentHovered : theme.colors.accent);
     const metrics = this.metrics;
-    const trackRadius = metrics.trackThickness * 0.5;
+    const thumbSize = resolveThumbSize(metrics);
+    const trackThickness = resolveTrackThickness(metrics);
+    const trackRadius = trackThickness * 0.5;
     this.trackNode.cornerRadius(trackRadius);
     this.trackNode.bgColor(theme.colors.scrollbarTrack);
     this.fillNode.cornerRadius(trackRadius);
     this.fillNode.bgColor(accent);
-    this.thumbNode.cornerRadius(metrics.thumbSize * 0.5);
+    this.thumbNode
+      .width(thumbSize, Unit.Pixel)
+      .height(thumbSize, Unit.Pixel)
+      .cornerRadius(thumbSize * 0.5);
     this.thumbNode.bgColor(accent);
     this.thumbNode.border(1.0, theme.colors.surface, BorderStyle.Solid);
   }
@@ -155,3 +191,7 @@ class DefaultSliderTemplate extends SliderTemplate {
 }
 
 export const defaultSliderTemplate = new DefaultSliderTemplate();
+
+export function createDefaultSliderPresenter(sizing: SliderSizing | null = null): SliderPresenter {
+  return new DefaultSliderPresenter(resolveSliderMetrics(sizing));
+}

package/src/controls/templating.ts

@@ -32,6 +32,7 @@ export {
   SliderVisualState,
 } from "./internal/SliderPresenter";
 export {
+  DropdownFieldMetrics,
   DropdownFieldPresenter,
   DropdownFieldTemplate,
   DropdownFieldVisualState,