better fontSize disambiguation (#679)

* better fontSize disambiguation

* Update src/marks/text.js

Co-authored-by: Philippe Rivière <fil@rezo.net>

Co-authored-by: Philippe Rivière <fil@rezo.net>

Author: mbostock

src/marks/text.js

@@ -25,13 +25,13 @@ export class Text extends Mark {
       rotate
     } = options;
     const [vrotate, crotate] = maybeNumberChannel(rotate, 0);
-    const [vfontSize, cfontSize] = maybeNumberChannel(fontSize);
+    const [vfontSize, cfontSize] = maybeFontSizeChannel(fontSize);
     super(
       data,
       [
         {name: "x", value: x, scale: "x", optional: true},
         {name: "y", value: y, scale: "y", optional: true},
-        {name: "fontSize", value: numberChannel(vfontSize), optional: true},
+        {name: "fontSize", value: vfontSize, optional: true},
         {name: "rotate", value: numberChannel(vrotate), optional: true},
         {name: "text", value: text, filter: nonempty}
       ],
@@ -105,3 +105,39 @@ function applyDirectTextStyles(selection, mark) {
   applyAttr(selection, "dx", mark.dx);
   applyAttr(selection, "dy", mark.dy);
 }
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
+const fontSizes = new Set([
+  // global keywords
+  "inherit",
+  "initial",
+  "revert",
+  "unset",
+  // absolute keywords
+  "xx-small",
+  "x-small",
+  "small",
+  "medium",
+  "large",
+  "x-large",
+  "xx-large",
+  "xxx-large",
+  // relative keywords
+  "larger",
+  "smaller"
+]);
+
+// The font size may be expressed as a constant in the following forms:
+// - number in pixels
+// - string keyword: see above
+// - string <length>: e.g., "12px"
+// - string <percentage>: e.g., "80%"
+// Anything else is assumed to be a channel definition.
+function maybeFontSizeChannel(fontSize) {
+  if (fontSize == null || typeof fontSize === "number") return [undefined, fontSize];
+  if (typeof fontSize !== "string") return [fontSize, undefined];
+  fontSize = fontSize.trim().toLowerCase();
+  return fontSizes.has(fontSize) || /^[+-]?\d*\.?\d+(e[+-]?\d+)?(\w*|%)$/.test(fontSize)
+    ? [undefined, fontSize]
+    : [fontSize, undefined];
+}

test/marks/text-test.js

@@ -56,3 +56,21 @@ it("text(data, {stroke}) has a default strokeLinejoin of round", () => {
   assert.strictEqual(text.stroke, "red");
   assert.strictEqual(text.strokeLinejoin, "round");
 });
+
+it("text(data, {fontSize}) allows fontSize to be a number, length, keyword, or percentage", () => {
+  assert.strictEqual(Plot.text(undefined, {fontSize: 42}).fontSize, 42);
+  assert.strictEqual(Plot.text(undefined, {fontSize: "42"}).fontSize, "42");
+  assert.strictEqual(Plot.text(undefined, {fontSize: "42px"}).fontSize, "42px");
+  assert.strictEqual(Plot.text(undefined, {fontSize: "42pt"}).fontSize, "42pt");
+  assert.strictEqual(Plot.text(undefined, {fontSize: " 42pt"}).fontSize, "42pt");
+  assert.strictEqual(Plot.text(undefined, {fontSize: " 42pt "}).fontSize, "42pt");
+  assert.strictEqual(Plot.text(undefined, {fontSize: " 50% "}).fontSize, "50%");
+  assert.strictEqual(Plot.text(undefined, {fontSize: " Larger "}).fontSize, "larger");
+  assert.strictEqual(Plot.text(undefined, {fontSize: "unset"}).fontSize, "unset");
+});
+
+it("text(data, {fontSize}) allows fontSize to be a channel", () => {
+  const text = Plot.text(undefined, {fontSize: "x"});
+  assert.strictEqual(text.fontSize, undefined);
+  assert.strictEqual(text.channels.find(c => c.name === "fontSize").value, "x");
+});