Common style channels

src/marks/area.js

@@ -1,37 +1,22 @@
-import {group} from "d3";
-import {create} from "d3";
-import {area as shapeArea} from "d3";
+import {area as shapeArea, create, group} from "d3";
 import {Curve} from "../curve.js";
 import {defined} from "../defined.js";
-import {Mark, indexOf, maybeColor, titleGroup, maybeNumber} from "../mark.js";
-import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr} from "../style.js";
+import {Mark, indexOf} from "../mark.js";
+import {styles, findStyle, applyDirectStyles, applyIndirectStyles, applyTransform, applyGroupedChannelStyles} from "../style.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
 export class Area extends Mark {
-  constructor(
-    data,
-    {
+  constructor(data, options = {}) {
+    const [constants, channels] = styles(options);
+    const {
       x1,
       y1,
       x2,
       y2,
-      z, // optional grouping for multiple series
-      title,
-      fill,
-      fillOpacity,
-      stroke,
-      strokeOpacity,
+      z = findStyle(channels, "fill", "stroke"), // optional grouping for multiple series
       curve,
-      tension,
-      ...options
-    } = {}
-  ) {
-    const [vstroke, cstroke] = maybeColor(stroke, "none");
-    const [vstrokeOpacity, cstrokeOpacity] = maybeNumber(strokeOpacity);
-    const [vfill, cfill] = maybeColor(fill, cstroke === "none" ? "currentColor" : "none");
-    const [vfillOpacity, cfillOpacity] = maybeNumber(fillOpacity);
-    if (z === undefined && vfill != null) z = vfill;
-    if (z === undefined && vstroke != null) z = vstroke;
+      tension
+    } = options;
     super(
       data,
       [
@@ -40,44 +25,30 @@ export class Area extends Mark {
         {name: "x2", value: x2, scale: "x", optional: true},
         {name: "y2", value: y2, scale: "y", optional: true},
         {name: "z", value: z, optional: true},
-        {name: "title", value: title, optional: true},
-        {name: "fill", value: vfill, scale: "color", optional: true},
-        {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true},
-        {name: "stroke", value: vstroke, scale: "color", optional: true},
-        {name: "strokeOpacity", value: vstrokeOpacity, scale: "opacity", optional: true}
+        ...channels
       ],
       options
     );
+    Object.assign(this, constants);
     this.curve = Curve(curve, tension);
-    Style(this, {
-      fill: cfill,
-      fillOpacity: cfillOpacity,
-      stroke: cstroke,
-      strokeMiterlimit: cstroke === "none" ? undefined : 1,
-      strokeOpacity: cstrokeOpacity,
-      ...options
-    });
   }
-  render(I, {x, y}, {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1, z: Z, title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO}) {
+  render(I, {x, y}, channels) {
+    const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1, z: Z} = channels;
     return create("svg:g")
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y)
         .call(g => g.selectAll()
           .data(Z ? group(I, i => Z[i]).values() : [I])
           .join("path")
             .call(applyDirectStyles, this)
-            .call(applyAttr, "fill", F && (([i]) => F[i]))
-            .call(applyAttr, "fill-opacity", FO && (([i]) => FO[i]))
-            .call(applyAttr, "stroke", S && (([i]) => S[i]))
-            .call(applyAttr, "stroke-opacity", SO && (([i]) => SO[i]))
+            .call(applyGroupedChannelStyles, channels)
             .attr("d", shapeArea()
               .curve(this.curve)
               .defined(i => defined(X1[i]) && defined(Y1[i]) && defined(X2[i]) && defined(Y2[i]))
               .x0(i => X1[i])
               .y0(i => Y1[i])
               .x1(i => X2[i])
-              .y1(i => Y2[i]))
-            .call(titleGroup(L)))
+              .y1(i => Y2[i])))
       .node();
   }
 }

src/style.js

@@ -1,7 +1,59 @@
-import {string, number} from "./mark.js";
+import {string, number, maybeColor, maybeNumber, titleGroup} from "./mark.js";
 
 export const offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5;
 
+// TODO This works for Area, but Line has different defaults (primary fill vs. primary stroke).
+export function styles({
+  title,
+  fill,
+  fillOpacity,
+  stroke,
+  strokeWidth,
+  strokeOpacity,
+  strokeLinejoin,
+  strokeLinecap,
+  strokeMiterlimit,
+  strokeDasharray,
+  mixBlendMode,
+  shapeRendering
+} = {}) {
+  const [vstroke, cstroke] = maybeColor(stroke, "none");
+  const [vstrokeOpacity, cstrokeOpacity] = maybeNumber(strokeOpacity);
+  const [vfill, cfill] = maybeColor(fill, cstroke === "none" ? "currentColor" : "none");
+  const [vfillOpacity, cfillOpacity] = maybeNumber(fillOpacity);
+  if (strokeMiterlimit === undefined) strokeMiterlimit = cstroke === "none" ? undefined : 1;
+  return [
+    {
+      fill: impliedString(cfill, "currentColor"),
+      fillOpacity: impliedNumber(cfillOpacity, 1),
+      stroke: impliedString(cstroke, "none"),
+      strokeWidth: impliedNumber(strokeWidth, 1),
+      strokeOpacity: impliedNumber(cstrokeOpacity, 1),
+      strokeLinejoin: impliedString(strokeLinejoin, "miter"),
+      strokeLinecap: impliedString(strokeLinecap, "butt"),
+      strokeMiterlimit: impliedNumber(strokeMiterlimit, 4),
+      strokeDasharray: string(strokeDasharray),
+      mixBlendMode: impliedString(mixBlendMode, "normal"),
+      shapeRendering: impliedString(shapeRendering, "auto")
+    },
+    [
+      {name: "title", value: title, optional: true},
+      {name: "fill", value: vfill, scale: "color", optional: true},
+      {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true},
+      {name: "stroke", value: vstroke, scale: "color", optional: true},
+      {name: "strokeOpacity", value: vstrokeOpacity, scale: "opacity", optional: true}
+    ]
+  ];
+}
+
+export function findStyle(channels, ...names) {
+  for (const name of names) {
+    const channel = channels.find(d => d.name === name);
+    if (channel && channel.value != null) return channel.value;
+  }
+}
+
+// TODO remove me
 export function Style(mark, {
   fill,
   fillOpacity,
@@ -28,6 +80,15 @@ export function Style(mark, {
   mark.shapeRendering = impliedString(shapeRendering, "auto");
 }
 
+// TODO This works for Area and Line, but Dot needs to be applied to individual elements.
+export function applyGroupedChannelStyles(selection, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO}) {
+  applyAttr(selection, "fill", F && (([i]) => F[i]));
+  applyAttr(selection, "fill-opacity", FO && (([i]) => FO[i]));
+  applyAttr(selection, "stroke", S && (([i]) => S[i]));
+  applyAttr(selection, "stroke-opacity", SO && (([i]) => SO[i]));
+  titleGroup(L)(selection);
+}
+
 export function applyIndirectStyles(selection, mark) {
   applyAttr(selection, "fill", mark.fill);
   applyAttr(selection, "fill-opacity", mark.fillOpacity);