@coinbase/cds-mobile-visualization 3.4.0-beta.9 → 3.4.0

package/esm/chart/line/__stories__/ReferenceLine.stories.js

@@ -1,9 +1,14 @@
 const _excluded = ["accentColor", "yellowColor"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
+import { useDerivedValue, withTiming } from 'react-native-reanimated';
+import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { useTheme } from '@coinbase/cds-mobile';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useCartesianChartContext } from '../../ChartProvider';
+import { Scrubber } from '../../scrubber';
+import { getPointOnSerializableScale, useScrubberContext } from '../../utils';
 import { DefaultReferenceLineLabel } from '../DefaultReferenceLineLabel';
 import { DottedLine } from '../DottedLine';
 import { LineChart } from '../LineChart';
@@ -126,7 +131,96 @@ const ReferenceLineStories = () => {
           stroke: theme.color.bgWarning
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Start Price Reference Line",
+      children: /*#__PURE__*/_jsx(StartPriceReferenceLine, {})
     })]
   });
 };
+const FADE_ZONE = 128;
+const StartPriceLabel = /*#__PURE__*/memo(props => {
+  const theme = useTheme();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXSerializableScale,
+    drawingArea
+  } = useCartesianChartContext();
+  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const opacity = useDerivedValue(() => {
+    if (scrubberPosition.value === undefined) return withTiming(0, {
+      duration: 250
+    });
+    if (!xScale) return withTiming(1, {
+      duration: 250
+    });
+    const scrubX = getPointOnSerializableScale(scrubberPosition.value, xScale);
+    const rightEdge = drawingArea.x + drawingArea.width;
+    const target = rightEdge - scrubX >= FADE_ZONE ? 1 : 0;
+    return withTiming(target, {
+      duration: 250
+    });
+  }, [scrubberPosition, xScale, drawingArea]);
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
+    background: theme.color.bgSecondary,
+    borderRadius: 12.5,
+    color: theme.color.fg,
+    font: "label1",
+    inset: {
+      top: 4,
+      bottom: 4,
+      left: 8,
+      right: 8
+    },
+    opacity: opacity
+  }));
+});
+function StartPriceReferenceLine() {
+  const theme = useTheme();
+  const hourData = useMemo(() => sparklineInteractiveData.hour, []);
+  const startPrice = hourData[0].value;
+  const endPrice = hourData[hourData.length - 1].value;
+  const isPositive = endPrice >= startPrice;
+  const seriesColor = isPositive ? theme.color.fgPositive : theme.color.fgNegative;
+  return /*#__PURE__*/_jsxs(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    areaType: "dotted",
+    height: 300,
+    inset: 0,
+    series: [{
+      id: 'hourly-prices',
+      data: hourData.map(d => d.value),
+      color: seriesColor
+    }],
+    xAxis: {
+      range: _ref2 => {
+        let {
+          min,
+          max
+        } = _ref2;
+        return {
+          min,
+          max: max - 24
+        };
+      }
+    },
+    children: [/*#__PURE__*/_jsx(Scrubber, {}), /*#__PURE__*/_jsx(ReferenceLine, {
+      LabelComponent: StartPriceLabel,
+      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+        dashIntervals: [0, 16],
+        strokeWidth: 3
+      })),
+      dataY: startPrice,
+      label: startPrice.toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      }),
+      labelDx: -12,
+      labelHorizontalAlignment: "right",
+      stroke: theme.color.fgMuted
+    })]
+  });
+}
 export default ReferenceLineStories;

package/esm/chart/point/Point.js

@@ -5,7 +5,7 @@ import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Circle, Group, interpolateColors } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { projectPoint } from '../utils';
-import { buildTransition, defaultTransition } from '../utils/transition';
+import { buildTransition, defaultAccessoryEnterTransition, defaultTransition, getTransition } from '../utils/transition';
 import { DefaultPointLabel } from './DefaultPointLabel';
 
 /**
@@ -16,6 +16,7 @@ export const Point = /*#__PURE__*/memo(_ref => {
   let {
     dataX,
     dataY,
+    xAxisId,
     yAxisId,
     fill: fillProp,
     radius = 5,
@@ -27,7 +28,8 @@ export const Point = /*#__PURE__*/memo(_ref => {
     labelPosition = 'center',
     labelOffset,
     labelFont,
-    transition = defaultTransition,
+    transitions,
+    transition,
     animate: animateProp
   } = _ref;
   const theme = useTheme();
@@ -40,9 +42,11 @@ export const Point = /*#__PURE__*/memo(_ref => {
     drawingArea
   } = useCartesianChartContext();
   const animate = animateProp != null ? animateProp : animationEnabled;
-  const xScale = getXScale();
+  const xScale = getXScale(xAxisId);
   const yScale = getYScale(yAxisId);
   const shouldAnimate = animate != null ? animate : false;
+  const updateTransition = useMemo(() => getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions == null ? void 0 : transitions.update, transition]);
+  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [animate, transitions == null ? void 0 : transitions.enter]);
 
   // Calculate pixel coordinates from data coordinates
   const pixelCoordinate = useMemo(() => {
@@ -62,9 +66,13 @@ export const Point = /*#__PURE__*/memo(_ref => {
   // Animated values for position
   const animatedX = useSharedValue(0);
   const animatedY = useSharedValue(0);
-
-  // Animated value for color interpolation (0 = old color, 1 = new color)
+  const enterOpacity = useSharedValue(shouldAnimate ? 0 : 1);
   const colorProgress = useSharedValue(1);
+  const isReady = !!xScale && !!yScale;
+  useEffect(() => {
+    if (!shouldAnimate || !isReady) return;
+    enterOpacity.value = buildTransition(1, enterTransition);
+  }, [shouldAnimate, isReady, enterTransition, enterOpacity]);
 
   // Update position when coordinates change
   useEffect(() => {
@@ -72,26 +80,26 @@ export const Point = /*#__PURE__*/memo(_ref => {
       return;
     }
     if (shouldAnimate && previousPixelCoordinate) {
-      animatedX.value = buildTransition(pixelCoordinate.x, transition);
-      animatedY.value = buildTransition(pixelCoordinate.y, transition);
+      animatedX.value = buildTransition(pixelCoordinate.x, updateTransition);
+      animatedY.value = buildTransition(pixelCoordinate.y, updateTransition);
     } else {
       cancelAnimation(animatedX);
       cancelAnimation(animatedY);
       animatedX.value = pixelCoordinate.x;
       animatedY.value = pixelCoordinate.y;
     }
-  }, [pixelCoordinate, shouldAnimate, previousPixelCoordinate, animatedX, animatedY, transition]);
+  }, [pixelCoordinate, shouldAnimate, previousPixelCoordinate, animatedX, animatedY, updateTransition]);
 
   // Update color when fill changes
   useEffect(() => {
     if (shouldAnimate && previousFill && previousFill !== fill) {
       colorProgress.value = 0;
-      colorProgress.value = buildTransition(1, transition);
+      colorProgress.value = buildTransition(1, updateTransition);
     } else {
       cancelAnimation(colorProgress);
       colorProgress.value = 1;
     }
-  }, [fill, shouldAnimate, previousFill, colorProgress, transition]);
+  }, [fill, shouldAnimate, previousFill, colorProgress, updateTransition]);
 
   // Create animated point for circles
   const animatedPoint = useDerivedValue(() => {
@@ -108,24 +116,19 @@ export const Point = /*#__PURE__*/memo(_ref => {
     }
     return interpolateColors(colorProgress.value, [0, 1], [previousFill, fill]);
   }, [colorProgress, previousFill, fill]);
-
-  // Check if point is within drawing area
-  const isWithinDrawingArea = useDerivedValue(() => {
-    return animatedX.value >= drawingArea.x && animatedX.value <= drawingArea.x + drawingArea.width && animatedY.value >= drawingArea.y && animatedY.value <= drawingArea.y + drawingArea.height;
-  }, [animatedX, animatedY, drawingArea]);
-
-  // Compute effective opacity based on drawing area bounds
+  const isWithinDrawingArea = useMemo(() => {
+    if (!pixelCoordinate) return false;
+    return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
+  }, [pixelCoordinate, drawingArea]);
   const effectiveOpacity = useDerivedValue(() => {
     const baseOpacity = opacity != null ? opacity : 1;
-    return isWithinDrawingArea.value ? baseOpacity : 0;
-  }, [isWithinDrawingArea, opacity]);
+    return isWithinDrawingArea ? baseOpacity * enterOpacity.value : 0;
+  }, [isWithinDrawingArea, opacity, enterOpacity]);
   const offset = useMemo(() => labelOffset != null ? labelOffset : radius * 2, [labelOffset, radius]);
   if (!pixelCoordinate) {
     return null;
   }
-
-  // If animation is disabled or on first render, use static rendering
-  if (!shouldAnimate || !previousPixelCoordinate) {
+  if (!shouldAnimate) {
     const isWithinBounds = pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
     const staticOpacity = isWithinBounds ? opacity != null ? opacity : 1 : 0;
     return /*#__PURE__*/_jsxs(_Fragment, {
@@ -159,20 +162,16 @@ export const Point = /*#__PURE__*/memo(_ref => {
       })]
     });
   }
-
-  // Animated rendering
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Group, {
-      opacity: effectiveOpacity,
-      children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
-        c: animatedPoint,
-        color: stroke,
-        r: radius + strokeWidth / 2
-      }), /*#__PURE__*/_jsx(Circle, {
-        c: animatedPoint,
-        color: animatedFillColor,
-        r: radius - strokeWidth / 2
-      })]
+  return /*#__PURE__*/_jsxs(Group, {
+    opacity: effectiveOpacity,
+    children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: stroke,
+      r: radius + strokeWidth / 2
+    }), /*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: animatedFillColor,
+      r: radius - strokeWidth / 2
     }), label && /*#__PURE__*/_jsx(LabelComponent, {
       dataX: dataX,
       dataY: dataY,

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -1,19 +1,18 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
-import { cancelAnimation, Easing, useAnimatedReaction, useDerivedValue, useSharedValue, withRepeat, withSequence } from 'react-native-reanimated';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo } from 'react';
+import { cancelAnimation, Easing, useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
 import { useTheme } from '@coinbase/cds-mobile';
 import { Circle, Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { unwrapAnimatedValue } from '../utils';
 import { projectPointWithSerializableScale } from '../utils/point';
-import { buildTransition, defaultTransition } from '../utils/transition';
+import { buildTransition, defaultTransition, getTransition } from '../utils/transition';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const radius = 5;
-const strokeWidth = 2;
+const defaultRadius = 5;
+const defaultStrokeWidth = 2;
 const pulseOpacityStart = 0.5;
 const pulseOpacityEnd = 0;
-const pulseRadiusStart = 10;
-const pulseRadiusEnd = 15;
+const pulseRadiusStartMultiplier = 2;
+const pulseRadiusEndMultiplier = 3;
 const defaultPulseTransition = {
   type: 'timing',
   duration: 1600,
@@ -30,7 +29,10 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     idlePulse,
     animate = true,
     transitions,
-    opacity: opacityProp = 1
+    opacity: opacityProp = 1,
+    radius = defaultRadius,
+    stroke,
+    strokeWidth = defaultStrokeWidth
   } = _ref;
   const theme = useTheme();
   const {
@@ -40,16 +42,13 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     drawingArea
   } = useCartesianChartContext();
   const targetSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
-  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const xScale = useMemo(() => getXSerializableScale(targetSeries == null ? void 0 : targetSeries.xAxisId), [getXSerializableScale, targetSeries == null ? void 0 : targetSeries.xAxisId]);
   const yScale = useMemo(() => getYSerializableScale(targetSeries == null ? void 0 : targetSeries.yAxisId), [getYSerializableScale, targetSeries == null ? void 0 : targetSeries.yAxisId]);
   const color = useMemo(() => {
     var _ref2;
     return (_ref2 = colorProp != null ? colorProp : targetSeries == null ? void 0 : targetSeries.color) != null ? _ref2 : theme.color.fgPrimary;
   }, [colorProp, targetSeries == null ? void 0 : targetSeries.color, theme.color.fgPrimary]);
-  const updateTransition = useMemo(() => {
-    var _transitions$update;
-    return (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : defaultTransition;
-  }, [transitions == null ? void 0 : transitions.update]);
+  const updateTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.update, animate, defaultTransition), [transitions == null ? void 0 : transitions.update, animate]);
   const pulseTransition = useMemo(() => {
     var _transitions$pulse;
     return (_transitions$pulse = transitions == null ? void 0 : transitions.pulse) != null ? _transitions$pulse : defaultPulseTransition;
@@ -58,10 +57,20 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     var _transitions$pulseRep;
     return (_transitions$pulseRep = transitions == null ? void 0 : transitions.pulseRepeatDelay) != null ? _transitions$pulseRep : defaultPulseRepeatDelay;
   }, [transitions == null ? void 0 : transitions.pulseRepeatDelay]);
+  const pulseRadiusStart = radius * pulseRadiusStartMultiplier;
+  const pulseRadiusEnd = radius * pulseRadiusEndMultiplier;
   const pulseOpacity = useSharedValue(0);
   const pulseRadius = useSharedValue(pulseRadiusStart);
-  const animatedX = useSharedValue(0);
-  const animatedY = useSharedValue(0);
+
+  // Convert idlePulse prop to SharedValue so useAnimatedReaction can detect changes.
+  // In the new React Native architecture, regular JS props are captured by value in worklets
+  // and won't update when the prop changes.
+  const idlePulseShared = useSharedValue(idlePulse != null ? idlePulse : false);
+  useEffect(() => {
+    idlePulseShared.value = idlePulse != null ? idlePulse : false;
+  }, [idlePulse, idlePulseShared]);
+  const animatedX = useSharedValue(null);
+  const animatedY = useSharedValue(null);
 
   // Calculate the target point position - project data to pixels
   const targetPoint = useDerivedValue(() => {
@@ -95,49 +104,43 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
 
   // Create animated point using the animated values
   const animatedPoint = useDerivedValue(() => {
+    // If the animated values have not been set yet, return the target point
+    if (animatedX.value === null || animatedY.value === null) return targetPoint.value;
     return {
       x: animatedX.value,
       y: animatedY.value
     };
-  }, [animatedX, animatedY]);
+  }, [targetPoint, animatedX, animatedY]);
   useImperativeHandle(ref, () => ({
     pulse: () => {
       // Only trigger manual pulse when idlePulse is not enabled
-      if (!idlePulse) {
+      if (!idlePulseShared.value) {
         cancelAnimation(pulseOpacity);
         cancelAnimation(pulseRadius);
 
         // Manual pulse without delay
-        const immediatePulseTransition = _extends({}, pulseTransition, {
-          delay: 0
-        });
         pulseOpacity.value = pulseOpacityStart;
         pulseRadius.value = pulseRadiusStart;
-        pulseOpacity.value = buildTransition(pulseOpacityEnd, immediatePulseTransition);
-        pulseRadius.value = buildTransition(pulseRadiusEnd, immediatePulseTransition);
+        pulseOpacity.value = buildTransition(pulseOpacityEnd, pulseTransition);
+        pulseRadius.value = buildTransition(pulseRadiusEnd, pulseTransition);
       }
     }
-  }), [idlePulse, pulseOpacity, pulseRadius, pulseTransition]);
+  }), [idlePulseShared, pulseOpacity, pulseRadius, pulseTransition, pulseRadiusStart, pulseRadiusEnd]);
 
   // Watch idlePulse changes and control continuous pulse
-  useAnimatedReaction(() => idlePulse, (current, previous) => {
-    if (!animate) return;
+  useAnimatedReaction(() => idlePulseShared.value, current => {
     if (current) {
       // Start continuous pulse when idlePulse is enabled
-      // Create instant transition to reset pulse after delay
-      const instantTransition = {
-        type: 'timing',
-        duration: 0
-      };
-      const resetWithDelay = _extends({}, instantTransition, {
-        delay: pulseRepeatDelay
-      });
       pulseOpacity.value = pulseOpacityStart;
       pulseRadius.value = pulseRadiusStart;
-      pulseOpacity.value = withRepeat(withSequence(buildTransition(pulseOpacityEnd, pulseTransition), buildTransition(pulseOpacityStart, resetWithDelay)), -1,
+      pulseOpacity.value = withRepeat(withSequence(buildTransition(pulseOpacityEnd, pulseTransition), withDelay(pulseRepeatDelay, withTiming(pulseOpacityStart, {
+        duration: 0
+      }))), -1,
       // infinite loop
       false);
-      pulseRadius.value = withRepeat(withSequence(buildTransition(pulseRadiusEnd, pulseTransition), buildTransition(pulseRadiusStart, resetWithDelay)), -1,
+      pulseRadius.value = withRepeat(withSequence(buildTransition(pulseRadiusEnd, pulseTransition), withDelay(pulseRepeatDelay, withTiming(pulseRadiusStart, {
+        duration: 0
+      }))), -1,
       // infinite loop
       false);
     } else {
@@ -147,7 +150,7 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       pulseOpacity.value = pulseOpacityEnd;
       pulseRadius.value = pulseRadiusStart;
     }
-  }, [animate, pulseTransition, pulseRepeatDelay]);
+  }, [pulseTransition, pulseRepeatDelay, pulseRadiusStart, pulseRadiusEnd]);
   const pulseVisibility = useDerivedValue(() => {
     // Never pulse when scrubbing
     if (!unwrapAnimatedValue(isIdle)) return 0;
@@ -168,7 +171,7 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       r: pulseRadius
     }), /*#__PURE__*/_jsx(Circle, {
       c: animatedPoint,
-      color: theme.color.bg,
+      color: stroke != null ? stroke : theme.color.bg,
       r: radius + strokeWidth / 2
     }), /*#__PURE__*/_jsx(Circle, {
       c: animatedPoint,

package/esm/chart/scrubber/DefaultScrubberLabel.js

@@ -1,28 +1,44 @@
-const _excluded = ["verticalAlignment", "dy", "boundsInset"];
+const _excluded = ["dx", "dy"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DefaultReferenceLineLabel } from '../line';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * DefaultScrubberLabel is the default label component for the scrubber line.
  * It will automatically add padding around the label when elevated to fit within chart bounds to prevent shadow from being cutoff.
- * It will also center the label vertically with the top available area.
+ * In vertical layout, it positions the label above the scrubber line.
+ * In horizontal layout, it centers the label in the chart's right inset.
  */
 export const DefaultScrubberLabel = /*#__PURE__*/memo(_ref => {
   let {
-      verticalAlignment = 'middle',
-      dy,
-      boundsInset
+      dx: dxProp,
+      dy: dyProp
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
-    drawingArea
+    drawingArea,
+    layout,
+    width: chartWidth
   } = useCartesianChartContext();
+  const isHorizontalLayout = layout === 'horizontal';
+  const dx = useMemo(() => {
+    if (dxProp !== undefined) return dxProp;
+    if (isHorizontalLayout) {
+      const drawingAreaEnd = drawingArea.x + drawingArea.width;
+      const rightOffset = chartWidth - drawingAreaEnd;
+      return rightOffset / 2;
+    }
+    return 0;
+  }, [drawingArea.width, drawingArea.x, dxProp, isHorizontalLayout, chartWidth]);
+  const dy = useMemo(() => {
+    if (dyProp !== undefined) return dyProp;
+    if (isHorizontalLayout) return 0;
+    return -0.5 * drawingArea.y;
+  }, [dyProp, isHorizontalLayout, drawingArea.y]);
   return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({
-    boundsInset: boundsInset,
-    dy: dy != null ? dy : -0.5 * drawingArea.y,
-    verticalAlignment: verticalAlignment
+    dx: dx,
+    dy: dy
   }, props));
 });