smaller tip corners (#2420)

* smaller tip corners

* await postrender in test

Author: mbostock

src/marks/tip.js

@@ -281,19 +281,19 @@ function getTextTranslate(anchor, m, r, width, height) {
     case "middle":
       return [-width / 2, height / 2];
     case "top-left":
-      return [r, m + r];
+      return [r, m / 2 + r];
     case "top":
       return [-width / 2, m / 2 + r];
     case "top-right":
-      return [-width - r, m + r];
+      return [-width - r, m / 2 + r];
     case "right":
       return [-m / 2 - width - r, height / 2];
     case "bottom-left":
-      return [r, -m - r];
+      return [r, -m / 2 - r];
     case "bottom":
       return [-width / 2, -m / 2 - r];
     case "bottom-right":
-      return [-width - r, -m - r];
+      return [-width - r, -m / 2 - r];
     case "left":
       return [r + m / 2, height / 2];
   }
@@ -306,19 +306,19 @@ function getPath(anchor, m, r, width, height) {
     case "middle":
       return `M${-w / 2},${-h / 2}h${w}v${h}h${-w}z`;
     case "top-left":
-      return `M0,0l${m},${m}h${w - m}v${h}h${-w}z`;
+      return `M0,0l${m / 2},${m / 2}h${w - m / 2}v${h}h${-w}z`;
     case "top":
       return `M0,0l${m / 2},${m / 2}h${(w - m) / 2}v${h}h${-w}v${-h}h${(w - m) / 2}z`;
     case "top-right":
-      return `M0,0l${-m},${m}h${m - w}v${h}h${w}z`;
+      return `M0,0l${-m / 2},${m / 2}h${m / 2 - w}v${h}h${w}z`;
     case "right":
       return `M0,0l${-m / 2},${-m / 2}v${m / 2 - h / 2}h${-w}v${h}h${w}v${m / 2 - h / 2}z`;
     case "bottom-left":
-      return `M0,0l${m},${-m}h${w - m}v${-h}h${-w}z`;
+      return `M0,0l${m / 2},${-m / 2}h${w - m / 2}v${-h}h${-w}z`;
     case "bottom":
       return `M0,0l${m / 2},${-m / 2}h${(w - m) / 2}v${-h}h${-w}v${h}h${(w - m) / 2}z`;
     case "bottom-right":
-      return `M0,0l${-m},${-m}h${m - w}v${-h}h${w}z`;
+      return `M0,0l${-m / 2},${-m / 2}h${m / 2 - w}v${-h}h${w}z`;
     case "left":
       return `M0,0l${m / 2},${-m / 2}v${m / 2 - h / 2}h${w}v${h}h${-w}v${m / 2 - h / 2}z`;
   }

test/output/tipAnchors.svg

@@ -3,6 +3,33 @@ import * as d3 from "d3";
 import {feature, mesh} from "topojson-client";
 import {test} from "test/plot";
 
+test(async function tipAnchors() {
+  const plot = Plot.plot({
+    style: "overflow: visible;",
+    height: 160,
+    marks: [
+      Plot.frame({strokeOpacity: 0.2}),
+      (
+        [
+          "top",
+          "right",
+          "bottom",
+          "left", // sides
+          "top-left",
+          "top-right",
+          "bottom-right",
+          "bottom-left", // corners
+          "middle"
+        ] as const
+      ).map((anchor) => [
+        Plot.dot({length: 1}, {frameAnchor: anchor, fill: "blue"}),
+        Plot.tip([anchor], {frameAnchor: anchor, anchor})
+      ])
+    ]
+  });
+  return Object.assign(plot, {ready: new Promise((resolve) => setTimeout(resolve, 100))}); // postrender
+});
+
 test(async function tipAreaBand() {
   const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
   return Plot.areaY(aapl, {x: "Date", y1: "Low", y2: "High", tip: true, curve: "step", stroke: "currentColor"}).plot();