fb-slides 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-slides",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "description": "Markdown-driven reveal.js decks: live demo embeds, annotation, mermaid, and a zero-config dev server",
   "keywords": [

package/runtime/annotate.js

@@ -52,7 +52,7 @@ const WIDTH = 3.4; // px, the bright core of the line
 
 // The arrow's head: how far back along the shaft the wings reach, and how far
 // they open off it. A short arrow shrinks its head rather than being all head.
-const HEAD_LEN = 48;
+const HEAD_LEN = 56;
 const HEAD_SPREAD = 0.55; // radians
 // Under this, a press-and-release is a click placing the tail, not a whole
 // arrow: the tip then follows the pointer until the second click.
@@ -254,8 +254,9 @@ const RevealAnnotate = () => ({
 
     // The slab of canvas a stroke can reach, clamped to the viewport. Padded by
     // half the widest pass, plus a little for the curve's overshoot between
-    // points.
-    const boundsOf = (points) => {
+    // points; `extra` widens it further for shapes whose paint reaches past
+    // the points themselves.
+    const boundsOf = (points, extra = 0) => {
       let minX = Infinity;
       let minY = Infinity;
       let maxX = -Infinity;
@@ -266,7 +267,7 @@ const RevealAnnotate = () => ({
         if (x > maxX) maxX = x;
         if (y > maxY) maxY = y;
       }
-      const pad = MAX_WIDTH / 2 + 3;
+      const pad = MAX_WIDTH / 2 + 3 + extra;
       const x = Math.max(0, Math.floor(minX - pad));
       const y = Math.max(0, Math.floor(minY - pad));
       return {
@@ -317,8 +318,6 @@ const RevealAnnotate = () => ({
       const { from, to } = stroke;
       const length = Math.hypot(to.x - from.x, to.y - from.y);
       if (length < 1) return true;
-      const box = boundsOf([from, to]);
-      if (box.w <= 0 || box.h <= 0) return true;
 
       const fade = progress === null ? 1 : 1 - progress;
       const angle = Math.atan2(to.y - from.y, to.x - from.x);
@@ -332,6 +331,13 @@ const RevealAnnotate = () => ({
         y: to.y - head * 0.75 * Math.sin(angle),
       };
 
+      // The wings go into the bounds along with the line's own ends: an
+      // axis-aligned arrow has a razor-thin from-to box, and the head reaches
+      // further out of it sideways than the stroke padding covers. The extra
+      // head-width of pad keeps the glow well clear of the clip on every side.
+      const box = boundsOf([from, to, ...wings], head);
+      if (box.w <= 0 || box.h <= 0) return true;
+
       for (const { ink, passes } of LAYERS) {
         onLayer(box, stroke.ink[ink], (c) => {
           c.lineCap = 'round';