🐛 show halos for text wrap group

owid · Dec 10, 2024 · 452bd7d · 452bd7d
1 parent 9555724
commit 452bd7d
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 39 deletions.
diff --git a/...@ourworldindata/grapher/src/halo/Halo.tsx → ...rworldindata/components/src/Halo/Halo.tsx b/...@ourworldindata/grapher/src/halo/Halo.tsx → ...rworldindata/components/src/Halo/Halo.tsx
@@ -14,16 +14,16 @@ export function Halo(props: {
     id: React.Key
     children: React.ReactElement
     show?: boolean
-    background?: Color
+    outlineColor?: Color
     style?: React.CSSProperties
 }): React.ReactElement {
     const show = props.show ?? true
     if (!show) return props.children
 
     const defaultStyle = {
         ...defaultHaloStyle,
-        fill: props.background ?? defaultHaloStyle.fill,
-        stroke: props.background ?? defaultHaloStyle.stroke,
+        fill: props.outlineColor ?? defaultHaloStyle.fill,
+        stroke: props.outlineColor ?? defaultHaloStyle.stroke,
     }
     const halo = React.cloneElement(props.children, {
         style: {

diff --git a/packages/@ourworldindata/components/src/TextWrap/TextWrapGroup.tsx b/packages/@ourworldindata/components/src/TextWrap/TextWrapGroup.tsx
@@ -3,6 +3,7 @@ import { computed } from "mobx"
 import { TextWrap } from "./TextWrap"
 import { splitIntoFragments } from "./TextWrapUtils"
 import { Bounds, last, max } from "@ourworldindata/utils"
+import { Halo } from "../Halo/Halo"
 
 interface TextWrapFragment {
     text: string
@@ -249,7 +250,15 @@ export class TextWrapGroup {
     render(
         x: number,
         y: number,
-        { textProps }: { textProps?: React.SVGProps<SVGTextElement> } = {}
+        {
+            showTextOutline,
+            textOutlineColor,
+            textProps,
+        }: {
+            showTextOutline?: boolean
+            textOutlineColor?: string
+            textProps?: React.SVGProps<SVGTextElement>
+        } = {}
     ): React.ReactElement {
         // Alternatively, we could render each TextWrap one by one. That would
         // give us a good but not pixel-perfect result since the text
@@ -259,29 +268,38 @@ export class TextWrapGroup {
         return (
             <>
                 {this.lines.map((line) => {
+                    const key = line.yOffset.toString()
                     const [textX, textY] =
                         line.fragments[0].textWrap.getPositionForSvgRendering(
                             x,
                             y
                         )
                     return (
-                        <text
-                            key={line.yOffset.toString()}
-                            x={textX}
-                            y={textY + line.yOffset}
-                            fontSize={this.fontSize.toFixed(2)}
-                            {...textProps}
+                        <Halo
+                            id={key}
+                            key={key}
+                            show={showTextOutline}
+                            outlineColor={textOutlineColor}
                         >
-                            {line.fragments.map((fragment, index) => (
-                                <tspan
-                                    key={index}
-                                    fontWeight={fragment.textWrap.fontWeight}
-                                >
-                                    {index === 0 ? "" : " "}
-                                    {fragment.text}
-                                </tspan>
-                            ))}
-                        </text>
+                            <text
+                                x={textX}
+                                y={textY + line.yOffset}
+                                fontSize={this.fontSize.toFixed(2)}
+                                {...textProps}
+                            >
+                                {line.fragments.map((fragment, index) => (
+                                    <tspan
+                                        key={index}
+                                        fontWeight={
+                                            fragment.textWrap.fontWeight
+                                        }
+                                    >
+                                        {index === 0 ? "" : " "}
+                                        {fragment.text}
+                                    </tspan>
+                                ))}
+                            </text>
+                        </Halo>
                     )
                 })}
             </>

diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts
@@ -60,3 +60,5 @@ export {
 } from "./SharedDataPageConstants.js"
 
 export { Button } from "./Button/Button.js"
+
+export { Halo } from "./Halo/Halo.js"
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -32,7 +32,7 @@ import {
 import { ChartSeries } from "../chart/ChartInterface"
 import { darkenColorForText } from "../color/ColorUtils"
 import { AxisConfig } from "../axis/AxisConfig.js"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 
 // Minimum vertical space between two legend items
 const LEGEND_ITEM_MIN_SPACING = 4
@@ -168,20 +168,17 @@ class LineLabels extends React.Component<{
                     )
                     const textColor = darkenColorForText(series.color)
                     return (
-                        <Halo
-                            id={key}
-                            key={key}
-                            show={this.showTextOutline}
-                            background={this.textOutlineColor}
-                        >
+                        <React.Fragment key={key}>
                             {series.textWrap.render(labelText.x, labelText.y, {
+                                showTextOutline: this.showTextOutline,
+                                textOutlineColor: this.textOutlineColor,
                                 textProps: {
                                     fill: textColor,
                                     opacity: this.textOpacity,
                                     textAnchor: this.anchor,
                                 },
                             })}
-                        </Halo>
+                        </React.Fragment>
                     )
                 })}
             </g>
@@ -207,7 +204,7 @@ class LineLabels extends React.Component<{
                             id={key}
                             key={key}
                             show={this.showTextOutline}
-                            background={this.textOutlineColor}
+                            outlineColor={this.textOutlineColor}
                         >
                             {series.annotationTextWrap.render(
                                 labelText.x,

diff --git a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
@@ -15,7 +15,7 @@ import {
     GRAPHER_DARK_TEXT,
     GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 
 export interface NoDataModalManager {
     canChangeEntity?: boolean

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
@@ -10,7 +10,7 @@ import { computed } from "mobx"
 import { observer } from "mobx-react"
 import { DualAxis } from "../axis/Axis"
 import { generateComparisonLinePoints } from "./ComparisonLineGenerator"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 import { Color, ComparisonLineConfig } from "@ourworldindata/types"
 import { GRAPHER_FONT_SCALE_10_5 } from "../core/GrapherConstants"
 
@@ -125,7 +125,7 @@ export class ComparisonLine extends React.Component<{
                     >
                         <Halo
                             id={`path-${renderUid}`}
-                            background={this.props.backgroundColor}
+                            outlineColor={this.props.backgroundColor}
                         >
                             <textPath
                                 baselineShift="-0.2rem"

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
@@ -18,7 +18,7 @@ import {
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
 import React from "react"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 import { MultiColorPolyline } from "./MultiColorPolyline"
 import {
     ScatterPointsWithLabelsProps,
@@ -425,7 +425,7 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                             <Halo
                                 key={series.displayKey + "-endLabel"}
                                 id={series.displayKey + "-endLabel"}
-                                background={this.props.backgroundColor}
+                                outlineColor={this.props.backgroundColor}
                             >
                                 <text
                                     id={makeIdForHumanConsumption(
@@ -561,7 +561,7 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                     <Halo
                         key={`${series.displayKey}-label-${index}`}
                         id={`${series.displayKey}-label-${index}`}
-                        background={this.props.backgroundColor}
+                        outlineColor={this.props.backgroundColor}
                     >
                         <text
                             id={makeIdForHumanConsumption(

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
@@ -18,7 +18,7 @@ import {
     GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
 import { CoreColumn } from "@ourworldindata/core-table"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 import {
     ScatterSeries,
     SCATTER_POINT_MAX_RADIUS,
@@ -310,7 +310,7 @@ const LegendItem = ({
             />
             <Halo
                 id={label}
-                background={backgroundColor}
+                outlineColor={backgroundColor}
                 style={{ ...style, strokeWidth: 3.5 }}
             >
                 <text

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -80,7 +80,7 @@ import {
     getSeriesName,
 } from "../lineCharts/LineChartHelpers"
 import { SelectionArray } from "../selection/SelectionArray"
-import { Halo } from "../halo/Halo"
+import { Halo } from "@ourworldindata/components"
 
 type SVGMouseOrTouchEvent =
     | React.MouseEvent<SVGGElement>
@@ -1108,7 +1108,10 @@ export class SlopeChart
             allSlopesStartFromZero
         )
             return (
-                <Halo id="x-axis-zero-label" background={this.backgroundColor}>
+                <Halo
+                    id="x-axis-zero-label"
+                    outlineColor={this.backgroundColor}
+                >
                     <text
                         x={this.startX}
                         y={this.yAxis.place(0)}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -60,3 +60,5 @@ export {
		} from "./SharedDataPageConstants.js"

		export { Button } from "./Button/Button.js"

		export { Halo } from "./Halo/Halo.js"