for 1-d brushes, removes the 1px inset on the non-data dimension

this inset is making it possible to select values that are ON the edge, but it's nicer to the eye to not have it where it's not necessary

Author: Fil

src/interactions/brush.js

@@ -42,8 +42,8 @@ export class Brush extends Mark {
       let snapping;
       _brush
         .extent([
-          [dimensions.marginLeft - 1, dimensions.marginTop - 1],
-          [dimensions.width - dimensions.marginRight + 1, dimensions.height - dimensions.marginBottom + 1]
+          [dimensions.marginLeft - (dim !== "y"), dimensions.marginTop - (dim !== "x")],
+          [dimensions.width - dimensions.marginRight + (dim !== "y"), dimensions.height - dimensions.marginBottom + (dim !== "x")]
         ])
         .on("start brush end", function (event) {
           if (syncing) return;

test/output/brushXDot.html

@@ -35,10 +35,10 @@
       <text transform="translate(620,140)">body_mass_g →</text>
     </g>
     <g aria-label="brush" fill="none" pointer-events="all">
-      <rect class="overlay" pointer-events="all" cursor="crosshair" x="19" y="9" width="602" height="132"></rect>
-      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="103.333" y="9" width="266.667" height="132"></rect>
-      <rect class="handle handle--w" cursor="ew-resize" style="" x="100.333" y="6" width="6" height="138"></rect>
-      <rect class="handle handle--e" cursor="ew-resize" style="" x="367" y="6" width="6" height="138"></rect>
+      <rect class="overlay" pointer-events="all" cursor="crosshair" x="19" y="10" width="602" height="130"></rect>
+      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="103.333" y="10" width="266.667" height="130"></rect>
+      <rect class="handle handle--w" cursor="ew-resize" style="" x="100.333" y="7" width="6" height="136"></rect>
+      <rect class="handle handle--e" cursor="ew-resize" style="" x="367" y="7" width="6" height="136"></rect>
     </g>
     <g aria-label="dot" pointer-events="none" transform="translate(0.5,0.5)"></g>
     <g aria-label="dot" fill="#ccc" pointer-events="none" transform="translate(0.5,0.5)">

test/output/brushXHistogram.html

@@ -66,10 +66,10 @@
       <text transform="translate(620,370)">body_mass_g →</text>
     </g>
     <g aria-label="brush" fill="none" pointer-events="all">
-      <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="19" width="582" height="352"></rect>
-      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="166.973" y="19" width="227.297" height="352"></rect>
-      <rect class="handle handle--w" cursor="ew-resize" style="" x="163.973" y="16" width="6" height="358"></rect>
-      <rect class="handle handle--e" cursor="ew-resize" style="" x="391.27" y="16" width="6" height="358"></rect>
+      <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="20" width="582" height="350"></rect>
+      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="166.973" y="20" width="227.297" height="350"></rect>
+      <rect class="handle handle--w" cursor="ew-resize" style="" x="163.973" y="17" width="6" height="356"></rect>
+      <rect class="handle handle--e" cursor="ew-resize" style="" x="391.27" y="17" width="6" height="356"></rect>
     </g>
     <g aria-label="rect" fill-opacity="0.8" pointer-events="none"></g>
     <g aria-label="rect" fill-opacity="0.3" pointer-events="none">

test/output/brushXHistogramFaceted.html

@@ -148,19 +148,19 @@
       </g>
       <g aria-label="brush">
         <g fill="none" pointer-events="all" transform="translate(0,0)">
-          <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="19" width="562" height="135"></rect>
-          <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="161.081" y="19" width="227.027" height="135"></rect>
-          <rect class="handle handle--w" cursor="ew-resize" style="" x="158.081" y="16" width="6" height="141"></rect>
-          <rect class="handle handle--e" cursor="ew-resize" style="" x="385.108" y="16" width="6" height="141"></rect>
+          <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="20" width="562" height="133"></rect>
+          <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="161.081" y="20" width="227.027" height="133"></rect>
+          <rect class="handle handle--w" cursor="ew-resize" style="" x="158.081" y="17" width="6" height="139"></rect>
+          <rect class="handle handle--e" cursor="ew-resize" style="" x="385.108" y="17" width="6" height="139"></rect>
         </g>
         <g fill="none" pointer-events="all" transform="translate(0,148)">
-          <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="19" width="562" height="135"></rect>
+          <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="20" width="562" height="133"></rect>
           <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="display: none;"></rect>
           <rect class="handle handle--w" cursor="ew-resize" style="display: none;"></rect>
           <rect class="handle handle--e" cursor="ew-resize" style="display: none;"></rect>
         </g>
         <g fill="none" pointer-events="all" transform="translate(0,296)">
-          <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="19" width="562" height="135"></rect>
+          <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="20" width="562" height="133"></rect>
           <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="display: none;"></rect>
           <rect class="handle handle--w" cursor="ew-resize" style="display: none;"></rect>
           <rect class="handle handle--e" cursor="ew-resize" style="display: none;"></rect>

test/output/brushXLine.html

@@ -63,10 +63,10 @@
       <text y="0.71em" transform="translate(578.662,370)">2018</text>
     </g>
     <g aria-label="brush" fill="none" pointer-events="all">
-      <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="19" width="582" height="352"></rect>
-      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="230.154" y="19" width="164.397" height="352"></rect>
-      <rect class="handle handle--w" cursor="ew-resize" style="" x="227.154" y="16" width="6" height="358"></rect>
-      <rect class="handle handle--e" cursor="ew-resize" style="" x="391.55" y="16" width="6" height="358"></rect>
+      <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="20" width="582" height="350"></rect>
+      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="230.154" y="20" width="164.397" height="350"></rect>
+      <rect class="handle handle--w" cursor="ew-resize" style="" x="227.154" y="17" width="6" height="356"></rect>
+      <rect class="handle handle--e" cursor="ew-resize" style="" x="391.55" y="17" width="6" height="356"></rect>
     </g>
     <g aria-label="line" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" pointer-events="none" transform="translate(0.5,0.5)"></g>
     <g aria-label="line" fill="none" stroke="#ccc" stroke-width="0.5" stroke-linejoin="round" stroke-linecap="round" pointer-events="none" transform="translate(0.5,0.5)">

test/output/brushXTemporal.html

@@ -67,10 +67,10 @@
       <text y="0.71em" transform="translate(572.838,370)">2018</text>
     </g>
     <g aria-label="brush" fill="none" pointer-events="all">
-      <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="19" width="582" height="352"></rect>
-      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="163.683" y="19" width="114.001" height="352"></rect>
-      <rect class="handle handle--w" cursor="ew-resize" style="" x="160.683" y="16" width="6" height="358"></rect>
-      <rect class="handle handle--e" cursor="ew-resize" style="" x="274.684" y="16" width="6" height="358"></rect>
+      <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="20" width="582" height="350"></rect>
+      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="163.683" y="20" width="114.001" height="350"></rect>
+      <rect class="handle handle--w" cursor="ew-resize" style="" x="160.683" y="17" width="6" height="356"></rect>
+      <rect class="handle handle--e" cursor="ew-resize" style="" x="274.684" y="17" width="6" height="356"></rect>
     </g>
     <g aria-label="rect" fill-opacity="0.8" pointer-events="none"></g>
     <g aria-label="rect" fill-opacity="0.3" pointer-events="none">

test/output/brushXTemporalReversed.html

@@ -67,10 +67,10 @@
       <text y="0.71em" transform="translate(543.479,370)">2014</text>
     </g>
     <g aria-label="brush" fill="none" pointer-events="all">
-      <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="19" width="582" height="352"></rect>
-      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="382.316" y="19" width="114.001" height="352"></rect>
-      <rect class="handle handle--w" cursor="ew-resize" style="" x="379.316" y="16" width="6" height="358"></rect>
-      <rect class="handle handle--e" cursor="ew-resize" style="" x="493.317" y="16" width="6" height="358"></rect>
+      <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="20" width="582" height="350"></rect>
+      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="382.316" y="20" width="114.001" height="350"></rect>
+      <rect class="handle handle--w" cursor="ew-resize" style="" x="379.316" y="17" width="6" height="356"></rect>
+      <rect class="handle handle--e" cursor="ew-resize" style="" x="493.317" y="17" width="6" height="356"></rect>
     </g>
     <g aria-label="rect" fill-opacity="0.8" pointer-events="none"></g>
     <g aria-label="rect" fill-opacity="0.3" pointer-events="none">

test/output/brushYDot.html

@@ -54,10 +54,10 @@
       <text transform="translate(620,370)">culmen_length_mm →</text>
     </g>
     <g aria-label="brush" fill="none" pointer-events="all">
-      <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="19" width="582" height="352"></rect>
-      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="39" y="82.5" width="582" height="208.333"></rect>
-      <rect class="handle handle--n" cursor="ns-resize" style="" x="36" y="79.5" width="588" height="6"></rect>
-      <rect class="handle handle--s" cursor="ns-resize" style="" x="36" y="287.833" width="588" height="6"></rect>
+      <rect class="overlay" pointer-events="all" cursor="crosshair" x="40" y="19" width="580" height="352"></rect>
+      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="40" y="82.5" width="580" height="208.333"></rect>
+      <rect class="handle handle--n" cursor="ns-resize" style="" x="37" y="79.5" width="586" height="6"></rect>
+      <rect class="handle handle--s" cursor="ns-resize" style="" x="37" y="287.833" width="586" height="6"></rect>
     </g>
     <g aria-label="dot" pointer-events="none" transform="translate(0.5,0.5)"></g>
     <g aria-label="dot" fill="#ccc" pointer-events="none" transform="translate(0.5,0.5)">

test/output/brushYHistogram.html

@@ -77,10 +77,10 @@
       <text transform="translate(620,370)">Frequency →</text>
     </g>
     <g aria-label="brush" fill="none" pointer-events="all">
-      <rect class="overlay" pointer-events="all" cursor="crosshair" x="39" y="19" width="582" height="352"></rect>
-      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="39" y="175.556" width="582" height="116.667"></rect>
-      <rect class="handle handle--n" cursor="ns-resize" style="" x="36" y="172.556" width="588" height="6"></rect>
-      <rect class="handle handle--s" cursor="ns-resize" style="" x="36" y="289.222" width="588" height="6"></rect>
+      <rect class="overlay" pointer-events="all" cursor="crosshair" x="40" y="19" width="580" height="352"></rect>
+      <rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="40" y="175.556" width="580" height="116.667"></rect>
+      <rect class="handle handle--n" cursor="ns-resize" style="" x="37" y="172.556" width="586" height="6"></rect>
+      <rect class="handle handle--s" cursor="ns-resize" style="" x="37" y="289.222" width="586" height="6"></rect>
     </g>
     <g aria-label="rect" fill-opacity="0.8" pointer-events="none"></g>
     <g aria-label="rect" fill-opacity="0.3" pointer-events="none">