Double tap and hover triggers; vertical sliders with bound min/max and thumb stroke

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oMokUGNW6txknJs7xxTik

Author: claude

lib/src/transformers/node_transformers/passive_slider_transformer.dart

@@ -1,3 +1,5 @@
+import 'dart:math' as math;
+
 import 'package:codelessly_api/codelessly_api.dart';
 import 'package:flutter/material.dart';
 
@@ -94,13 +96,29 @@ class PassiveSliderWidget extends StatelessWidget {
           scopedValues: scopedValues,
         ) ??
         node.value;
+    final double min =
+        PropertyValueDelegate.getPropertyValue<double>(
+          node,
+          'min',
+          scopedValues: scopedValues,
+        ) ??
+        node.properties.min;
+    final double max =
+        PropertyValueDelegate.getPropertyValue<double>(
+          node,
+          'max',
+          scopedValues: scopedValues,
+        ) ??
+        node.properties.max;
 
     return TransformerSlider(
       node: node,
       settings: settings,
       variablesOverrides: variablesOverrides,
       onChanged: (value) => onChanged(context, value),
       value: value,
+      min: min,
+      max: max,
     );
   }
 }
@@ -113,6 +131,8 @@ class TransformerSlider extends StatelessWidget {
     required this.onChanged,
     required this.value,
     this.variablesOverrides = const [],
+    this.min,
+    this.max,
   });
 
   final SliderNode node;
@@ -121,8 +141,18 @@ class TransformerSlider extends StatelessWidget {
   final ValueChanged<double>? onChanged;
   final double value;
 
+  /// The slider's minimum, when bound; [SliderProperties.min] otherwise.
+  final double? min;
+
+  /// The slider's maximum, when bound; [SliderProperties.max] otherwise.
+  /// Never less than the minimum.
+  final double? max;
+
   @override
   Widget build(BuildContext context) {
+    final double min = this.min ?? node.properties.min;
+    final double max = math.max(min, this.max ?? node.properties.max);
+    final bool vertical = node.properties.orientation == AxisC.vertical;
     final SliderTrackShape trackShape = switch (node.properties.trackShape) {
       SliderTrackShapeEnum.rectangle => const RectangularSliderTrackShape(),
       SliderTrackShapeEnum.roundedRectangle =>
@@ -158,9 +188,12 @@ class TransformerSlider extends StatelessWidget {
     };
     final bool showsLabel = showValueIndicator != ShowValueIndicator.never;
 
-    return SizedBox(
-      width: node.basicBoxLocal.width,
-      height: node.basicBoxLocal.height,
+    // A vertical slider is a horizontal one turned a quarter turn
+    // counterclockwise, so min sits at the bottom. RotatedBox turns its
+    // layout and hit testing too, so the whole node box drags the thumb.
+    final Widget slider = SizedBox(
+      width: vertical ? node.basicBoxLocal.height : node.basicBoxLocal.width,
+      height: vertical ? node.basicBoxLocal.width : node.basicBoxLocal.height,
       child: SliderTheme(
         data: SliderThemeData(
           trackHeight: node.properties.trackHeight,
@@ -171,10 +204,12 @@ class TransformerSlider extends StatelessWidget {
           inactiveTrackColor: node.properties.inactiveTrackColor
               .toFlutterColor(),
           thumbColor: node.properties.thumbColor.toFlutterColor(),
-          thumbShape: RoundSliderThumbShape(
+          thumbShape: StrokedSliderThumbShape(
             enabledThumbRadius: node.properties.showThumb
                 ? node.properties.thumbRadius
                 : 0,
+            strokeColor: node.properties.thumbStrokeColor?.toFlutterColor(),
+            strokeWidth: node.properties.thumbStrokeWidth,
           ),
           trackShape: trackShape,
           // GappedSliderTrackShape requires a gap; 6 is the Material 3
@@ -208,22 +243,100 @@ class TransformerSlider extends StatelessWidget {
           ),
         ),
         child: Slider(
-          value: value.clamp(node.properties.min, node.properties.max),
+          value: value.clamp(min, max),
           onChanged: onChanged,
           autofocus: node.properties.autofocus,
-          min: node.properties.min,
-          max: node.properties.max,
+          min: min,
+          max: max,
           divisions: node.properties.isDiscrete
               ? node.properties.divisions
               : null,
           label: showsLabel ? getSliderLabel(node, value) : null,
           secondaryTrackValue: node.properties.secondaryTrackValue?.clamp(
-            node.properties.min,
-            node.properties.max,
+            min,
+            max,
           ),
           padding: node.properties.padding?.flutterEdgeInsets,
         ),
       ),
     );
+
+    final TextDirection direction =
+        Directionality.maybeOf(context) ?? TextDirection.ltr;
+    final TextDirection flipped = direction == TextDirection.ltr
+        ? TextDirection.rtl
+        : TextDirection.ltr;
+    // Vertical runs bottom to top in left to right text, so an inverted
+    // vertical slider runs top to bottom.
+    final Widget directed = node.properties.inverted
+        ? Directionality(textDirection: flipped, child: slider)
+        : Directionality(textDirection: direction, child: slider);
+
+    if (!vertical) {
+      return node.properties.inverted ? directed : slider;
+    }
+    return SizedBox(
+      width: node.basicBoxLocal.width,
+      height: node.basicBoxLocal.height,
+      child: RotatedBox(quarterTurns: 3, child: directed),
+    );
+  }
+}
+
+/// A [RoundSliderThumbShape] with an optional stroke drawn inside its edge.
+class StrokedSliderThumbShape extends RoundSliderThumbShape {
+  /// Creates a [StrokedSliderThumbShape].
+  const StrokedSliderThumbShape({
+    super.enabledThumbRadius,
+    this.strokeColor,
+    this.strokeWidth = 0,
+  });
+
+  /// Color of the stroke; no stroke when null.
+  final Color? strokeColor;
+
+  /// Width of the stroke; no stroke when 0.
+  final double strokeWidth;
+
+  @override
+  void paint(
+    PaintingContext context,
+    Offset center, {
+    required Animation<double> activationAnimation,
+    required Animation<double> enableAnimation,
+    required bool isDiscrete,
+    required TextPainter labelPainter,
+    required RenderBox parentBox,
+    required SliderThemeData sliderTheme,
+    required TextDirection textDirection,
+    required double value,
+    required double textScaleFactor,
+    required Size sizeWithOverflow,
+  }) {
+    super.paint(
+      context,
+      center,
+      activationAnimation: activationAnimation,
+      enableAnimation: enableAnimation,
+      isDiscrete: isDiscrete,
+      labelPainter: labelPainter,
+      parentBox: parentBox,
+      sliderTheme: sliderTheme,
+      textDirection: textDirection,
+      value: value,
+      textScaleFactor: textScaleFactor,
+      sizeWithOverflow: sizeWithOverflow,
+    );
+    final Color? color = strokeColor;
+    if (color == null || strokeWidth <= 0 || enabledThumbRadius <= 0) return;
+    final double width = math.min(strokeWidth, enabledThumbRadius);
+    context.canvas.drawCircle(
+      center,
+      enabledThumbRadius - width / 2,
+      Paint()
+        ..style = PaintingStyle.stroke
+        ..strokeWidth = width
+        ..color = color,
+    );
   }
 }

lib/src/transformers/passive_transformer_manager.dart

@@ -98,6 +98,7 @@ class PassiveNodeTransformerManager extends WidgetNodeTransformerManager {
         if (settings.withReactions) {
           widget = wrapWithReaction(context, styled, widget);
           widget = wrapWithSwipes(context, styled, widget);
+          widget = wrapWithPointerTriggers(context, styled, widget);
           widget = wrapWithSemantics(styled, widget);
         }
         if (settings.withRotation) {

lib/src/transformers/widget_node_transformer_manager.dart

@@ -4,6 +4,7 @@ import 'dart:typed_data';
 
 import 'package:codelessly_api/codelessly_api.dart';
 import 'package:collection/collection.dart';
+import 'package:flutter/gestures.dart' show PointerDeviceKind;
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:provider/provider.dart';
@@ -389,6 +390,88 @@ abstract class WidgetNodeTransformerManager
     );
   }
 
+  /// Runs [node]'s double tap and hover reactions.
+  ///
+  /// A double tap recognizer is only added when a double tap reaction
+  /// exists, since it makes single taps wait out the double tap timeout
+  /// (300ms) before they fire `click`. Hover reactions listen with a
+  /// [MouseRegion], which touch input never enters. The legacy
+  /// [TriggerType.cursorEnter] and [TriggerType.cursorExit] run with
+  /// [TriggerType.hoverEnter] and [TriggerType.hoverExit].
+  Widget wrapWithPointerTriggers(
+    BuildContext context,
+    BaseNode node,
+    Widget widget,
+  ) {
+    if (node is! ReactionMixin) return widget;
+    final List<Reaction> reactions = (node as ReactionMixin).reactions
+        .where(
+          (reaction) =>
+              _pointerTriggers.contains(reaction.trigger.type) &&
+              reaction.action.enabled,
+        )
+        .toList();
+    if (reactions.isEmpty) return widget;
+    bool has(TriggerType type) =>
+        reactions.any((reaction) => reaction.trigger.type == type);
+
+    if (has(TriggerType.doubleTap)) {
+      widget = GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onDoubleTap: () => FunctionsRepository.triggerAction(
+          context,
+          TriggerType.doubleTap,
+          reactions: reactions,
+        ),
+        child: widget,
+      );
+    }
+
+    final bool enters =
+        has(TriggerType.hoverEnter) || has(TriggerType.cursorEnter);
+    final bool exits =
+        has(TriggerType.hoverExit) || has(TriggerType.cursorExit);
+    if (enters || exits) {
+      void run(PointerEvent event, List<TriggerType> types) {
+        if (event.kind == PointerDeviceKind.touch) return;
+        for (final TriggerType type in types) {
+          FunctionsRepository.triggerAction(
+            context,
+            type,
+            reactions: reactions,
+          );
+        }
+      }
+
+      widget = MouseRegion(
+        opaque: false,
+        hitTestBehavior: HitTestBehavior.opaque,
+        onEnter: enters
+            ? (event) => run(event, const [
+                TriggerType.hoverEnter,
+                TriggerType.cursorEnter,
+              ])
+            : null,
+        onExit: exits
+            ? (event) => run(event, const [
+                TriggerType.hoverExit,
+                TriggerType.cursorExit,
+              ])
+            : null,
+        child: widget,
+      );
+    }
+    return widget;
+  }
+
+  static const Set<TriggerType> _pointerTriggers = {
+    TriggerType.doubleTap,
+    TriggerType.hoverEnter,
+    TriggerType.hoverExit,
+    TriggerType.cursorEnter,
+    TriggerType.cursorExit,
+  };
+
   BorderRadius? getBorderRadius(BaseNode node) {
     if (node is CornerMixin) {
       if (node.cornerRadius.linked &&