@effindomv2/fui-as 0.1.12 → 0.1.14

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,

package/src/nodes/Text.ts

@@ -15,9 +15,15 @@ export class Text extends TextCore {
     if (props.hasWidth) {
       text.width(props.widthValue, props.widthUnit);
     }
+    if (props.hasFillWidth) {
+      text.fillWidth();
+    }
     if (props.hasHeight) {
       text.height(props.heightValue, props.heightUnit);
     }
+    if (props.hasFillHeight) {
+      text.fillHeight();
+    }
     if (props.hasFontFamily) {
       const family = props.fontFamilyValue;
       if (family !== null) {

package/src/nodes/TextCore.ts

@@ -20,9 +20,11 @@ export class TextProps {
   widthValue: f32 = 0.0;
   widthUnit: Unit = Unit.Pixel;
   hasWidth: bool = false;
+  hasFillWidth: bool = false;
   heightValue: f32 = 0.0;
   heightUnit: Unit = Unit.Pixel;
   hasHeight: bool = false;
+  hasFillHeight: bool = false;
   fontId: u32 = 0;
   fontSize: f32 = 0.0;
   hasFont: bool = false;
@@ -66,9 +68,11 @@ export class TextCore extends Node {
   private widthValue: f32 = 0.0;
   private widthUnit: Unit = Unit.Pixel;
   private hasWidth: bool = false;
+  private hasFillWidth: bool = false;
   private heightValue: f32 = 0.0;
   private heightUnit: Unit = Unit.Pixel;
   private hasHeight: bool = false;
+  private hasFillHeight: bool = false;
   private fontId: u32 = 0;
   private fontSizeValue: f32 = 0.0;
   private hasFont: bool = false;
@@ -147,6 +151,7 @@ export class TextCore extends Node {
     this.widthValue = value;
     this.widthUnit = unit;
     this.hasWidth = true;
+    this.hasFillWidth = false;
     if (this.hasBuiltHandle()) {
       ui.setWidth(this.handle, value, <u32>unit);
       this.notifyRetainedLayoutMutation();
@@ -158,6 +163,7 @@ export class TextCore extends Node {
     this.heightValue = value;
     this.heightUnit = unit;
     this.hasHeight = true;
+    this.hasFillHeight = false;
     if (this.hasBuiltHandle()) {
       ui.setHeight(this.handle, value, <u32>unit);
       this.notifyRetainedLayoutMutation();
@@ -165,6 +171,30 @@ export class TextCore extends Node {
     return this;
   }
 
+  fillWidth(): this {
+    this.hasFillWidth = true;
+    if (this.hasBuiltHandle()) {
+      ui.setFillWidth(this.handle, true);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  fillHeight(): this {
+    this.hasFillHeight = true;
+    if (this.hasBuiltHandle()) {
+      ui.setFillHeight(this.handle, true);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  fillSize(): this {
+    this.fillWidth();
+    this.fillHeight();
+    return this;
+  }
+
   text(content: string): this {
     this.contentValue = content;
     if (this.hasBuiltHandle()) {
@@ -423,9 +453,15 @@ export class TextCore extends Node {
     if (this.hasWidth) {
       ui.setWidth(this.handle, this.widthValue, <u32>this.widthUnit);
     }
+    if (this.hasFillWidth) {
+      ui.setFillWidth(this.handle, true);
+    }
     if (this.hasHeight) {
       ui.setHeight(this.handle, this.heightValue, <u32>this.heightUnit);
     }
+    if (this.hasFillHeight) {
+      ui.setFillHeight(this.handle, true);
+    }
     ui.setText(this.handle, this.contentValue);
     if (this.textStyleRunsWords !== null) {
       ui.setTextStyleRuns(this.handle, changetype<Uint32Array>(this.textStyleRunsWords));