From e6e3bd287904f349eb847f1fac671bd6da719b79 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Tue, 25 Jan 2022 12:02:01 -0800 Subject: [PATCH] default paintOrder --- README.md | 2 +- src/marks/text.js | 9 ++++----- src/style.js | 7 ++++++- test/output/metroInequalityChange.svg | 2 +- test/plots/metro-inequality-change.js | 1 - 5 files changed, 12 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index c26256e169..6fb96f2eb3 100644 --- a/README.md +++ b/README.md @@ -1128,7 +1128,7 @@ The **fontSize** and **rotate** options can be specified as either channels or c If the **frameAnchor** option is not specified, then **textAnchor** and **lineAnchor** default to middle. Otherwise, **textAnchor** defaults to start if **frameAnchor** is on the left, end if **frameAnchor** is on the right, and otherwise middle. Similarly, **lineAnchor** defaults to top if **frameAnchor** is on the top, bottom if **frameAnchor** is on the bottom, and otherwise middle. -If the **stroke** option is specified, the **paintOrder** option defaults to stroke, and the **strokeWidth** option defaults to 3, making it easy to create a “halo” around text labels. +The **paintOrder** option defaults to “stroke” and the **strokeWidth** option defaults to 3. By setting **fill** to the foreground color and **stroke** to the background color (such as black and white, respectively), you can surround text with a “halo” which may improve legibility against a busy background. #### Plot.text(*data*, *options*) diff --git a/src/marks/text.js b/src/marks/text.js index f4fc87030e..31a2041075 100644 --- a/src/marks/text.js +++ b/src/marks/text.js @@ -6,7 +6,9 @@ import {Mark} from "../plot.js"; import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyAttr, applyTransform, offset, impliedString, applyFrameAnchor} from "../style.js"; const defaults = { - strokeLinejoin: "round" + strokeLinejoin: "round", + strokeWidth: 3, + paintOrder: "stroke" }; export class Text extends Mark { @@ -39,10 +41,7 @@ export class Text extends Mark { {name: "rotate", value: numberChannel(vrotate), optional: true}, {name: "text", value: text, filter: nonempty} ], - { - ...options.stroke && {paintOrder: "stroke", strokeWidth: 3}, - ...options - }, + options, defaults ); this.rotate = crotate; diff --git a/src/style.js b/src/style.js index a7acba1e8c..45b227b7ee 100644 --- a/src/style.js +++ b/src/style.js @@ -32,7 +32,8 @@ export function styles( strokeWidth: defaultStrokeWidth, strokeLinecap: defaultStrokeLinecap, strokeLinejoin: defaultStrokeLinejoin, - strokeMiterlimit: defaultStrokeMiterlimit + strokeMiterlimit: defaultStrokeMiterlimit, + paintOrder: defaultPaintOrder } ) { @@ -73,6 +74,10 @@ export function styles( if (strokeLinecap === undefined) strokeLinecap = defaultStrokeLinecap; if (strokeLinejoin === undefined) strokeLinejoin = defaultStrokeLinejoin; if (strokeMiterlimit === undefined) strokeMiterlimit = defaultStrokeMiterlimit; + + // The paint order only takes effect if there is both a fill and a stroke + // (at least if we ignore markers, which no built-in marks currently use). + if (cfill !== "none" && paintOrder === undefined) paintOrder = defaultPaintOrder; } const [vstrokeWidth, cstrokeWidth] = maybeNumberChannel(strokeWidth); diff --git a/test/output/metroInequalityChange.svg b/test/output/metroInequalityChange.svg index 7f9f8335ca..a7d2e359b0 100644 --- a/test/output/metroInequalityChange.svg +++ b/test/output/metroInequalityChange.svg @@ -334,5 +334,5 @@ - New YorkChicagoHoustonWashington, D.C.San FranciscoSan JoseFairfield, Conn.Binghamton, N.Y. + New YorkChicagoHoustonWashington, D.C.San FranciscoSan JoseFairfield, Conn.Binghamton, N.Y. \ No newline at end of file diff --git a/test/plots/metro-inequality-change.js b/test/plots/metro-inequality-change.js index dd684fa163..e111e9ff21 100644 --- a/test/plots/metro-inequality-change.js +++ b/test/plots/metro-inequality-change.js @@ -34,7 +34,6 @@ export default async function() { text: "nyt_display", fill: "black", stroke: "white", - strokeWidth: 4, dy: -8 }) ]