Feature: add label and labelBackground on crosshair (#303)

* feat: add label & labelBackground on crosshair (RectCoordConv). * feat: add label & labelBackground on crosshair (PolarCoordConv). * fix: remove unnecessary 1px spacing. * fix: typo for label. * fix: pin crosshair on region boundary. * fix: deprecate flutter format sub-command in favor of dart format. * chore: dart format --set-exit-if-changed . --------- Co-authored-by: dan12411 <[email protected]>
entronad · Jul 18, 2024 · 616e0e9 · 616e0e9
1 parent 336f953
commit 616e0e9
Show file tree

Hide file tree

Showing 10 changed files with 238 additions and 32 deletions.
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -25,7 +25,7 @@ jobs:
       run: flutter pub get
 
     - name: Run formatter
-      run: flutter format --set-exit-if-changed .
+      run: dart format --set-exit-if-changed .
 
     - name: Run analyzer
       run: flutter analyze .

diff --git a/example/lib/pages/animation.dart b/example/lib/pages/animation.dart
@@ -146,7 +146,8 @@ class AnimationPageState extends State<AnimationPage> {
                   ],
                   marks: [
                     IntervalMark(
-                      transition: Transition(duration: const Duration(seconds: 1)),
+                      transition:
+                          Transition(duration: const Duration(seconds: 1)),
                       entrance: {MarkEntrance.y},
                       label: LabelEncode(
                           encoder: (tuple) => Label(tuple['sold'].toString())),
@@ -259,7 +260,8 @@ class AnimationPageState extends State<AnimationPage> {
                         CircleShape(),
                         SquareShape(),
                       ]),
-                      transition: Transition(duration: const Duration(seconds: 1)),
+                      transition:
+                          Transition(duration: const Duration(seconds: 1)),
                     )
                   ],
                   axes: [
@@ -329,7 +331,8 @@ class AnimationPageState extends State<AnimationPage> {
                       color: ColorEncode(
                           variable: 'genre', values: Defaults.colors10),
                       modifiers: [StackModifier()],
-                      transition: Transition(duration: const Duration(seconds: 2)),
+                      transition:
+                          Transition(duration: const Duration(seconds: 2)),
                       entrance: {MarkEntrance.y},
                     )
                   ],
@@ -382,7 +385,8 @@ class AnimationPageState extends State<AnimationPage> {
                         Defaults.colors10.first.withAlpha(80),
                         Defaults.colors10.first.withAlpha(10),
                       ])),
-                      transition: Transition(duration: const Duration(seconds: 2)),
+                      transition:
+                          Transition(duration: const Duration(seconds: 2)),
                       entrance: {
                         MarkEntrance.x,
                         MarkEntrance.y,
@@ -392,7 +396,8 @@ class AnimationPageState extends State<AnimationPage> {
                     LineMark(
                       shape: ShapeEncode(value: BasicLineShape(smooth: true)),
                       size: SizeEncode(value: 0.5),
-                      transition: Transition(duration: const Duration(seconds: 2)),
+                      transition:
+                          Transition(duration: const Duration(seconds: 2)),
                       entrance: {
                         MarkEntrance.x,
                         MarkEntrance.y,

diff --git a/lib/graphic.dart b/lib/graphic.dart
@@ -178,7 +178,12 @@ export 'src/shape/util/style.dart' show getPaintStyle;
 
 export 'src/graffiti/transition.dart' show Transition;
 export 'src/graffiti/element/element.dart'
-    show MarkElement, ElementStyle, PaintStyle, PrimitiveElement, getBlockPaintPoint;
+    show
+        MarkElement,
+        ElementStyle,
+        PaintStyle,
+        PrimitiveElement,
+        getBlockPaintPoint;
 export 'src/graffiti/element/arc.dart' show ArcElement;
 export 'src/graffiti/element/circle.dart' show CircleElement;
 export 'src/graffiti/element/group.dart' show GroupElement;

diff --git a/lib/src/graffiti/element/label.dart b/lib/src/graffiti/element/label.dart
@@ -230,7 +230,7 @@ class LabelElement extends BlockElement<LabelStyle> {
   Rect getBlock() {
     const horizontalSpacing = 1;
     final left = paintPoint.dx - horizontalSpacing;
-    final top = paintPoint.dy - 1;
+    final top = paintPoint.dy;
     final width = _textSize.width + 2 * horizontalSpacing;
     final height = _textSize.height;
 

diff --git a/lib/src/guide/axis/axis.dart b/lib/src/guide/axis/axis.dart
@@ -54,7 +54,8 @@ typedef GridMapper = PaintStyle? Function(String? text, int index, int total);
 /// Gets an axis labelBackground style form an axis value text.
 ///
 /// [index] and [total] is current and total count of all ticks respectively.
-typedef LabelBackgroundMapper = PaintStyle? Function(String? text, int index, int total);
+typedef LabelBackgroundMapper = PaintStyle? Function(
+    String? text, int index, int total);
 
 /// The specification of an axis.
 ///
@@ -80,7 +81,8 @@ class AxisGuide<V> {
   })  : assert(isSingle([tickLine, tickLineMapper], allowNone: true)),
         assert(isSingle([label, labelMapper], allowNone: true)),
         assert(isSingle([grid, gridMapper], allowNone: true)),
-        assert(isSingle([labelBackground, labelBackgroundMapper], allowNone: true));
+        assert(isSingle([labelBackground, labelBackgroundMapper],
+            allowNone: true));
 
   /// The dimension where this axis lies.
   ///
@@ -214,7 +216,8 @@ class TickInfo {
   bool get haveLabel => label != null && text != null && text!.isNotEmpty;
 
   /// Whether this tick has a labelBackground to render.
-  bool get haveLabelBackground => labelBackground != null && text != null && text!.isNotEmpty;
+  bool get haveLabelBackground =>
+      labelBackground != null && text != null && text!.isNotEmpty;
 }
 
 /// The operator to create tick informations.
@@ -234,7 +237,8 @@ class TickInfoOp extends Operator<List<TickInfo>> {
     final grid = params['grid'] as PaintStyle?;
     final gridMapper = params['gridMapper'] as GridMapper?;
     final labelBackground = params['labelBackground'] as PaintStyle?;
-    final labelBackgroundMapper = params['labelBackgroundMapper'] as LabelBackgroundMapper?;
+    final labelBackgroundMapper =
+        params['labelBackgroundMapper'] as LabelBackgroundMapper?;
 
     final scale = scales[variable]!;
 

diff --git a/lib/src/guide/axis/horizontal.dart b/lib/src/guide/axis/horizontal.dart
@@ -40,20 +40,20 @@ List<MarkElement>? renderHorizontalAxis(
             style: tick.tickLine!.style));
       }
       if (tick.haveLabel) {
-        final babel = LabelElement(
+        final label = LabelElement(
             text: tick.text!,
             anchor: Offset(x, y),
             defaultAlign: flip ? Alignment.topCenter : Alignment.bottomCenter,
             style: tick.label!);
 
         if (tick.haveLabelBackground) {
           rst.add(RectElement(
-            rect: babel.getBlock(),
+            rect: label.getBlock(),
             style: tick.labelBackground!,
           ));
         }
 
-        rst.add(babel);
+        rst.add(label);
       }
     }
   }

diff --git a/lib/src/guide/axis/radial.dart b/lib/src/guide/axis/radial.dart
@@ -92,20 +92,20 @@ List<MarkElement>? renderRadialAxis(
   final labelAlign = radialLabelAlign(featureOffset) * flipSign;
   for (var index in labelAnchors.keys) {
     final tick = ticks[index];
-    final babel = LabelElement(
+    final label = LabelElement(
         text: tick.text!,
         anchor: labelAnchors[index]!,
         defaultAlign: labelAlign,
         style: tick.label!);
 
     if (tick.haveLabelBackground) {
       rst.add(RectElement(
-        rect: babel.getBlock(),
+        rect: label.getBlock(),
         style: tick.labelBackground!,
       ));
     }
 
-    rst.add(babel);
+    rst.add(label);
   }
 
   return rst.isEmpty ? null : rst;

diff --git a/lib/src/guide/axis/vertical.dart b/lib/src/guide/axis/vertical.dart
@@ -40,20 +40,20 @@ List<MarkElement>? renderVerticalAxis(
             style: tick.tickLine!.style));
       }
       if (tick.haveLabel) {
-        final babel = LabelElement(
+        final label = LabelElement(
             text: tick.text!,
             anchor: Offset(x, y),
             defaultAlign: flip ? Alignment.centerRight : Alignment.centerLeft,
             style: tick.label!);
 
         if (tick.haveLabelBackground) {
           rst.add(RectElement(
-            rect: babel.getBlock(),
+            rect: label.getBlock(),
             style: tick.labelBackground!,
           ));
         }
 
-        rst.add(babel);
+        rst.add(label);
       }
     }
   }