qml: round block clock confirmation segments

Author: johnny9

qml/components/blockclockdial.cpp

@@ -381,39 +381,41 @@ void BlockClockDial::paintBlocks(QPainter * painter)
 
     QPen pen(m_confirmation_colors.constLast());
     pen.setWidthF(m_pen_width);
-    pen.setCapStyle(Qt::FlatCap);
+    pen.setCapStyle(Qt::RoundCap);
     const QRectF bounds = getBoundsForPen(pen);
     painter->setPen(pen);
 
-    // Boundaries are explicit: the period starts at zero, each block closes
-    // one confirmation segment, and the current time closes the newest one.
-    QList<qreal> boundaries;
-    boundaries.reserve(m_block_time_fractions.size() + 2);
-    boundaries.push_back(0.0);
-    boundaries.append(m_block_time_fractions);
-    boundaries.push_back(m_current_time_fraction);
-
-    const qreal gap{degreesPerPixel()};
+    // Rounded caps extend half a stroke beyond each path endpoint. Separate
+    // their center lines by one stroke plus a small visible gap so neighboring
+    // confirmation segments retain the pill-shaped spacing from the design.
+    const QList<qreal> boundaries{coalescedBlockBoundaries(bounds)};
+    const qreal boundary_gap_degrees{
+        degreesForArcPixels(m_pen_width + blockSegmentGapPixels(), bounds)};
+    const qreal half_boundary_gap{boundary_gap_degrees / 2.0};
+    const qreal animated_fraction{qBound<qreal>(0.0, m_animating_max_angle / 360.0, 1.0)};
     const qsizetype segment_count{boundaries.size() - 1};
     for (qsizetype segment{0}; segment < segment_count; ++segment) {
+        const qreal segment_start{boundaries.at(segment)};
+        const qreal segment_end{qMin(boundaries.at(segment + 1), animated_fraction)};
+        const qreal available_degrees{(segment_end - segment_start) * 360.0};
+        if (available_degrees <= boundary_gap_degrees) {
+            if (boundaries.at(segment + 1) > animated_fraction) break;
+            continue;
+        }
+
         const qsizetype color_index{qMin<qsizetype>(5, segment_count - segment - 1)};
         pen.setColor(m_confirmation_colors.at(color_index));
         painter->setPen(pen);
 
-        const qreal startAngle{90 - 360 * boundaries.at(segment)};
-        qreal nextAngle{90 - 360 * boundaries.at(segment + 1)};
+        const qreal start_angle{90 - 360 * segment_start - half_boundary_gap};
+        const qreal end_angle{90 - 360 * segment_end + half_boundary_gap};
 
         QPainterPath path;
-        path.arcMoveTo(bounds, startAngle);
-
-        if (-1 * nextAngle + 90 > m_animating_max_angle) {
-            nextAngle = -1 * m_animating_max_angle + 90;
-            segment = segment_count;
-        }
-
-        const qreal spanAngle = -1 * (startAngle - nextAngle) + gap;
-        path.arcTo(bounds, startAngle, spanAngle);
+        path.arcMoveTo(bounds, start_angle);
+        path.arcTo(bounds, start_angle, end_angle - start_angle);
         painter->drawPath(path);
+
+        if (boundaries.at(segment + 1) > animated_fraction) break;
     }
 }
 
@@ -512,6 +514,50 @@ double BlockClockDial::degreesPerPixel()
     return 360 / circumference;
 }
 
+qreal BlockClockDial::degreesForArcPixels(qreal pixels, const QRectF& bounds) const
+{
+    const qreal radius{qMin(bounds.width(), bounds.height()) / 2.0};
+    if (radius <= 0.0) return 360.0;
+    return qRadiansToDegrees(pixels / radius);
+}
+
+qreal BlockClockDial::blockSegmentGapPixels() const
+{
+    // The Figma dial uses a gap around half the stroke width, with one device
+    // pixel as the lower bound for small miniatures.
+    return qMax<qreal>(1.0, m_pen_width / 2.0);
+}
+
+QList<qreal> BlockClockDial::coalescedBlockBoundaries(const QRectF& bounds) const
+{
+    const qreal current_fraction{qBound<qreal>(0.0, m_current_time_fraction, 1.0)};
+    if (current_fraction <= 0.0) return {0.0};
+
+    // A rounded segment needs room for both half-caps, the visual gap, and at
+    // least one pixel of center line. Keep the newest boundary in each cluster
+    // so simplification affects presentation only and favors recent blocks.
+    const qreal minimum_interval_fraction{
+        degreesForArcPixels(m_pen_width + blockSegmentGapPixels() + 1.0, bounds) / 360.0};
+    QList<qreal> descending_boundaries{current_fraction};
+    qreal next_boundary{current_fraction};
+    for (auto it{m_block_time_fractions.crbegin()}; it != m_block_time_fractions.crend(); ++it) {
+        const qreal boundary{*it};
+        if (boundary <= 0.0 || boundary >= current_fraction) continue;
+        if (next_boundary - boundary < minimum_interval_fraction) continue;
+
+        descending_boundaries.push_back(boundary);
+        next_boundary = boundary;
+    }
+
+    // Do not leave an undersized first segment against the period boundary.
+    if (descending_boundaries.size() > 1 && descending_boundaries.constLast() < minimum_interval_fraction) {
+        descending_boundaries.removeLast();
+    }
+    descending_boundaries.push_back(0.0);
+    std::reverse(descending_boundaries.begin(), descending_boundaries.end());
+    return descending_boundaries;
+}
+
 void BlockClockDial::paintTimeTicks(QPainter * painter)
 {
     QPen pen(m_time_tick_color);

qml/components/blockclockdial.h

@@ -94,6 +94,9 @@ public Q_SLOTS:
     void paintTimeTicks(QPainter * painter);
     QRectF getBoundsForPen(const QPen & pen);
     double degreesPerPixel();
+    qreal degreesForArcPixels(qreal pixels, const QRectF& bounds) const;
+    qreal blockSegmentGapPixels() const;
+    QList<qreal> coalescedBlockBoundaries(const QRectF& bounds) const;
     void setupConnectingGradient(const QPen & pen);
     void setupSyncedGradient(const QRectF& bounds);
     void invalidateSyncedGradient();

test/test_blockclockdial.cpp

@@ -91,6 +91,7 @@ private Q_SLOTS:
     void connectingDelayControlsInitialAnimation();
     void inactiveDialStopsAnimationAndRetainsLatestState();
     void paintDoesNotAdvanceAnimationState();
+    void closeBlockBoundariesCoalesceToNewestBoundary();
 };
 
 void BlockClockDialTests::ibdProgressRendersImmediateHalfArc()
@@ -230,6 +231,30 @@ void BlockClockDialTests::paintDoesNotAdvanceAnimationState()
     QCOMPARE(first, second);
 }
 
+void BlockClockDialTests::closeBlockBoundariesCoalesceToNewestBoundary()
+{
+    BlockClockDial clustered_dial;
+    ConfigureDial(clustered_dial);
+    clustered_dial.setAnimateDial(false);
+    clustered_dial.setConnected(true);
+    clustered_dial.setSynced(true);
+    clustered_dial.setCurrentTimeFraction(0.75);
+    clustered_dial.setBlockTimeFractions({0.25, 0.2501, 0.2502});
+
+    BlockClockDial simplified_dial;
+    ConfigureDial(simplified_dial);
+    simplified_dial.setAnimateDial(false);
+    simplified_dial.setConnected(true);
+    simplified_dial.setSynced(true);
+    simplified_dial.setCurrentTimeFraction(0.75);
+    simplified_dial.setBlockTimeFractions({0.2502});
+
+    // The source data remains complete, while visually overlapping boundaries
+    // collapse to the newest timestamp in the cluster.
+    QCOMPARE(clustered_dial.blockTimeFractions().size(), 3);
+    QCOMPARE(RenderDial(clustered_dial), RenderDial(simplified_dial));
+}
+
 #ifdef BITCOINQML_NO_TEST_MAIN
 BITCOINQML_REGISTER_QT_TEST(BlockClockDialTests)
 #else