Merge pull request #246 from jappeace-sloth/feat/width-style-property

Add wsWidth: a fixed-width style property through all bridges

Author: jappeace

Changelog.md

@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+### Added
+
+- `wsWidth`: a fixed-width style property (platform-native units,
+  like `wsPadding`) applied through all platform bridges and
+  animatable via keyframes, so sibling rows can align into table
+  columns (#245).
+
 ### Changed
 
 - Missing fields in record construction are compile errors now

cbits/ui_bridge_android.c

@@ -741,6 +741,19 @@ static void android_set_num_prop(int32_t nodeId, int32_t propId, double value)
         LOGI("setNumProp(node=%d, padding=%d)", nodeId, px);
         break;
     }
+    case UI_PROP_WIDTH: {
+        /* Fixed width in raw pixels (same unit convention as
+         * UI_PROP_PADDING); height stays WRAP_CONTENT. The gravity
+         * case above uses the same LayoutParams pattern. */
+        jint px = (jint)value;
+        jobject layoutParams = (*env)->NewObject(env,
+            g_class_ViewGroup_LayoutParams, g_ctor_ViewGroup_LayoutParams,
+            px, (jint)-2); /* width, WRAP_CONTENT */
+        (*env)->CallVoidMethod(env, view, g_method_setLayoutParams, layoutParams);
+        (*env)->DeleteLocalRef(env, layoutParams);
+        LOGI("setNumProp(node=%d, width=%d)", nodeId, px);
+        break;
+    }
     case UI_PROP_INPUT_TYPE: {
         /* Haskell 0 = InputText  -> Android TYPE_CLASS_TEXT           (1)
          * Haskell 1 = InputNumber -> Android TYPE_CLASS_NUMBER |

include/UIBridge.h

@@ -39,6 +39,7 @@
 #define UI_PROP_TRANSLATE_Y         10
 #define UI_PROP_AUTO_FOCUS          11
 #define UI_PROP_TOUCH_PASSTHROUGH   12
+#define UI_PROP_WIDTH               13
 
 /* Event types */
 #define UI_EVENT_CLICK       0

ios/Hatter/UIBridgeIOS.m

@@ -580,6 +580,24 @@ static void ios_set_num_prop(int32_t nodeId, int32_t propId, double value)
         LOGI("setNumProp(node=%d, padding=%.1f)", nodeId, value);
         break;
     }
+    case UI_PROP_WIDTH: {
+        /* Fixed width in points; a constraint overrides the
+         * intrinsic content width inside the UIStackView layout.
+         * Deactivate any width constraint from an earlier render
+         * before pinning the new one. */
+        CGFloat pt = (CGFloat)value;
+        NSArray<NSLayoutConstraint *> *existing = [view.constraints copy];
+        for (NSLayoutConstraint *constraint in existing) {
+            if (constraint.firstAttribute == NSLayoutAttributeWidth
+                && constraint.firstItem == view
+                && constraint.secondItem == nil) {
+                constraint.active = NO;
+            }
+        }
+        [view.widthAnchor constraintEqualToConstant:pt].active = YES;
+        LOGI("setNumProp(node=%d, width=%.1f)", nodeId, value);
+        break;
+    }
     case UI_PROP_SCALE_TYPE: {
         /* Haskell 0 = ScaleFit, 1 = ScaleFill, 2 = ScaleNone */
         if ([view isKindOfClass:[UIImageView class]]) {

src/Hatter/Animation.hs

@@ -187,6 +187,7 @@ defaultStyleEmpty = WidgetStyle
   , wsBackgroundColor  = Nothing
   , wsTranslateX       = Nothing
   , wsTranslateY       = Nothing
+  , wsWidth            = Nothing
   , wsTouchPassthrough = Nothing
   }
 
@@ -217,6 +218,8 @@ interpolateStyle nodeId fromStyle toStyle progress = do
     (wsTranslateX fromStyle) (wsTranslateX toStyle)
   lerpNumProp Bridge.PropTranslateY
     (wsTranslateY fromStyle) (wsTranslateY toStyle)
+  lerpNumProp Bridge.PropWidth
+    (wsWidth fromStyle) (wsWidth toStyle)
   -- TouchPassthrough is boolean — snaps to target, no interpolation.
   case wsTouchPassthrough toStyle of
     Just enabled ->

src/Hatter/Render.hs

@@ -170,6 +170,9 @@ applyStyle nodeId style = do
   case wsTranslateY style of
     Just ty -> Bridge.setNumProp nodeId Bridge.PropTranslateY ty
     Nothing -> pure ()
+  case wsWidth style of
+    Just width -> Bridge.setNumProp nodeId Bridge.PropWidth width
+    Nothing    -> pure ()
   case wsTouchPassthrough style of
     Just enabled -> Bridge.setNumProp nodeId Bridge.PropTouchPassthrough
                       (if enabled then 1.0 else 0.0)

src/Hatter/UIBridge.hs

@@ -86,6 +86,7 @@ data PropId
   | PropTranslateY
   | PropAutoFocus
   | PropTouchPassthrough
+  | PropWidth
   deriving (Show, Eq, Enum, Bounded)
 
 -- | Map a 'PropId' to its C integer code.
@@ -110,6 +111,7 @@ propIdToInt PropTranslateX    = 9
 propIdToInt PropTranslateY    = 10
 propIdToInt PropAutoFocus          = 11
 propIdToInt PropTouchPassthrough  = 12
+propIdToInt PropWidth             = 13
 
 -- | Event types corresponding to @UI_EVENT_*@ in @UIBridge.h@.
 data EventType

src/Hatter/Widget.hs

@@ -201,6 +201,10 @@ data WidgetStyle = WidgetStyle
   , wsTranslateY      :: Maybe Double
     -- ^ Vertical translation offset in platform-native units.
     -- Moves the widget without affecting sibling layout.
+  , wsWidth           :: Maybe Double
+    -- ^ Fixed width in platform-native units (px on Android, pt on
+    -- iOS), like 'wsPadding'. Meaningful on any node, so sibling
+    -- rows can align into table columns (#245).
   , wsTouchPassthrough :: Maybe Bool
     -- ^ When 'True', the widget does not intercept touches, allowing
     -- sibling views underneath (in a 'Stack') to receive them.
@@ -217,6 +221,7 @@ defaultStyle = WidgetStyle
   , wsBackgroundColor  = Nothing
   , wsTranslateX       = Nothing
   , wsTranslateY       = Nothing
+  , wsWidth            = Nothing
   , wsTouchPassthrough = Nothing
   }
 
@@ -325,6 +330,7 @@ lerpStyle t from to = WidgetStyle
   , wsBackgroundColor  = lerpMaybeColor (wsBackgroundColor from) (wsBackgroundColor to)
   , wsTranslateX       = lerpMaybeDouble (wsTranslateX from) (wsTranslateX to)
   , wsTranslateY       = lerpMaybeDouble (wsTranslateY from) (wsTranslateY to)
+  , wsWidth            = lerpMaybeDouble (wsWidth from) (wsWidth to)
   , wsTouchPassthrough = snapMaybe (wsTouchPassthrough from) (wsTouchPassthrough to)
   }
   where

test/CounterDemoMain.hs

@@ -10,7 +10,7 @@ import Data.Text qualified as Text
 import Foreign.Ptr (Ptr)
 import Hatter (startMobileApp, platformLog, loggingMobileContext, MobileApp(..), newActionState, runActionM, createAction, Action)
 import Hatter.AppContext (AppContext)
-import Hatter.Widget (ButtonConfig(..), Color(..), FontConfig(..), TextAlignment(..), TextConfig(..), Widget(..), WidgetStyle(..), column, row)
+import Hatter.Widget (ButtonConfig(..), Color(..), FontConfig(..), TextAlignment(..), TextConfig(..), Widget(..), WidgetStyle(..), column, defaultStyle, row)
 
 main :: IO (Ptr AppContext)
 main = do
@@ -32,7 +32,7 @@ counterView :: IORef Int -> Action -> Action -> IO Widget
 counterView counterState onIncrement onDecrement = do
   n <- readIORef counterState
   pure $ column
-    [ Styled (WidgetStyle (Just 16.0) (Just AlignCenter) (Just (Color 0 255 0 255)) Nothing Nothing Nothing)
+    [ Styled ((defaultStyle { wsPadding = Just 16.0, wsTextAlign = Just AlignCenter, wsBackgroundColor = Just (Color 0 255 0 255) }))
         (Text TextConfig
           { tcLabel      = "Counter: " <> Text.pack (show n)
           , tcFontConfig = Just (FontConfig 24.0)

test/Test/ActionTests.hs

@@ -20,7 +20,8 @@ import Hatter
   , runActionM
   )
 import Hatter.Widget
-  ( ButtonConfig(..)
+  ( defaultStyle
+  , ButtonConfig(..)
   , InputType(..)
   , LayoutSettings(..)
   , TextConfig(..)
@@ -294,7 +295,7 @@ incrementalRenderTests = testGroup "Incremental rendering"
 
       , testCase "styled unchanged keeps same node ID" $ do
           ((), rs) <- withActions (pure ())
-          let style = WidgetStyle (Just 10.0) Nothing Nothing Nothing Nothing Nothing
+          let style = defaultStyle { wsPadding = Just 10.0 }
               widget = Styled style (Text TextConfig { tcLabel = "styled", tcFontConfig = Nothing, tcTextColor = Nothing })
           renderWidget rs widget
           tree1 <- readIORef (rsRenderedTree rs)
@@ -310,7 +311,7 @@ incrementalRenderTests = testGroup "Incremental rendering"
 
       , testCase "styled child change updates in-place" $ do
           ((), rs) <- withActions (pure ())
-          let style = WidgetStyle (Just 10.0) Nothing Nothing Nothing Nothing Nothing
+          let style = defaultStyle { wsPadding = Just 10.0 }
               widget1 = Styled style (Text TextConfig { tcLabel = "before", tcFontConfig = Nothing, tcTextColor = Nothing })
           renderWidget rs widget1
           tree1 <- readIORef (rsRenderedTree rs)
@@ -329,7 +330,7 @@ incrementalRenderTests = testGroup "Incremental rendering"
       , testCase "styled child type change reapplies style" $ do
           (clickAction, rs) <- withActions $
             createAction (pure ())
-          let style = WidgetStyle (Just 10.0) Nothing Nothing Nothing Nothing Nothing
+          let style = defaultStyle { wsPadding = Just 10.0 }
               widget1 = Styled style (Text TextConfig { tcLabel = "txt", tcFontConfig = Nothing, tcTextColor = Nothing })
           renderWidget rs widget1
           -- Re-render with different child type but same style