brush styles

Author: mbostock

src/marks/brush.js

@@ -1,14 +1,14 @@
 import {brush as brusher, brushX as brusherX, brushY as brusherY, create, select} from "d3";
 import {identity, maybeTuple} from "../options.js";
 import {Mark} from "../plot.js";
-import {applyIndirectStyles} from "../style.js";
+import {applyDirectStyles, applyIndirectStyles} from "../style.js";
 
-// TODO Allow brush styling?
 // TODO Disable standard mark channels (e.g., href, title)?
 const defaults = {
   ariaLabel: "brush",
-  fill: null,
-  stroke: null
+  fill: "#777",
+  fillOpacity: 0.3,
+  stroke: "#fff"
 };
 
 // TODO Initial selection?
@@ -30,13 +30,14 @@ export class Brush extends Mark {
   }
   render(index, scales, {x: X, y: Y}, dimensions) {
     const {marginLeft, width, marginRight, marginTop, height, marginBottom} = dimensions;
+    const {ariaLabel, ariaDescription, ariaHidden, ...options} = this;
     const left = marginLeft;
     const top = marginTop;
     const right = width - marginRight;
     const bottom = height - marginBottom;
     const mark = this;
     const g = create("svg:g")
-        .call(applyIndirectStyles, this)
+        .call(applyIndirectStyles, {ariaLabel, ariaDescription, ariaHidden})
         .call((X && Y ? brusher : X ? brusherX : brusherY)()
           .extent([[left, top], [right, bottom]])
           .on("start brush end", function(event) {
@@ -66,6 +67,10 @@ export class Brush extends Mark {
             this.selection = S;
             this.dispatchEvent(new Event("input", {bubbles: true}));
           }))
+        .call(g => g.selectAll(".selection")
+          .attr("shape-rendering", null) // reset d3-brush
+          .call(applyIndirectStyles, options)
+          .call(applyDirectStyles, options))
       .node();
     g.selection = null;
     return g;

src/style.js

@@ -32,7 +32,9 @@ export function styles(
   {
     ariaLabel: cariaLabel,
     fill: defaultFill = "currentColor",
+    fillOpacity: defaultFillOpacity,
     stroke: defaultStroke = "none",
+    strokeOpacity: defaultStrokeOpacity,
     strokeWidth: defaultStrokeWidth,
     strokeLinecap: defaultStrokeLinecap,
     strokeLinejoin: defaultStrokeLinejoin,
@@ -66,9 +68,9 @@ export function styles(
   }
 
   const [vfill, cfill] = maybeColorChannel(fill, defaultFill);
-  const [vfillOpacity, cfillOpacity] = maybeNumberChannel(fillOpacity);
+  const [vfillOpacity, cfillOpacity] = maybeNumberChannel(fillOpacity, defaultFillOpacity);
   const [vstroke, cstroke] = maybeColorChannel(stroke, defaultStroke);
-  const [vstrokeOpacity, cstrokeOpacity] = maybeNumberChannel(strokeOpacity);
+  const [vstrokeOpacity, cstrokeOpacity] = maybeNumberChannel(strokeOpacity, defaultStrokeOpacity);
   const [vopacity, copacity] = maybeNumberChannel(opacity);
 
   // For styles that have no effect if there is no stroke, only apply the