@vectojs/markdown 0.20.2 → 0.20.3

package/dist/index.js

@@ -1327,6 +1327,70 @@ function highlightLine(line, lang, theme, carry = null) {
   flush(theme.codeColor);
   return { segments, carry: null };
 }
+var HSCROLL_HIT_H = 12;
+var HSCROLL_THUMB_H = 4;
+var HSCROLL_THUMB_INSET = 4;
+var HSCROLL_THUMB_MIN = 24;
+var HSCROLL_TRACK_COLOR = "rgba(128, 128, 128, 0.14)";
+var HSCROLL_THUMB_COLOR = "rgba(128, 128, 128, 0.45)";
+var HSCROLL_THUMB_ACTIVE_COLOR = "rgba(128, 128, 128, 0.75)";
+function hScrollMetrics(trackW, maxScrollX) {
+  const content = trackW + maxScrollX;
+  const proportional = content > 0 ? trackW / content * trackW : trackW;
+  const thumbW = Math.min(trackW, Math.max(HSCROLL_THUMB_MIN, proportional));
+  return { thumbW, range: Math.max(1, trackW - thumbW) };
+}
+var HScrollTrack = class extends import_ui.UIComponent {
+  constructor(block) {
+    super();
+    this.block = block;
+    this.on("pointerdown", (e) => {
+      if (e.localX === void 0) return;
+      const maxSX = this.block.maxScrollX;
+      if (maxSX <= 0) return;
+      const { thumbW, range } = hScrollMetrics(this.width, maxSX);
+      const thumbX = this.block.scrollX / maxSX * range;
+      if (e.localX < thumbX || e.localX > thumbX + thumbW) {
+        this.block.setScrollX((e.localX - thumbW / 2) / range * maxSX);
+      }
+      this.dragging = true;
+      this.dragAnchorX = e.localX;
+      this.scrollAtDragStart = this.block.scrollX;
+      this.scene?.markDirty();
+    });
+    this.on("pointermove", (e) => {
+      if (!this.dragging || e.localX === void 0) return;
+      const maxSX = this.block.maxScrollX;
+      const { range } = hScrollMetrics(this.width, maxSX);
+      const dx = e.localX - this.dragAnchorX;
+      this.block.setScrollX(this.scrollAtDragStart + dx / range * maxSX);
+    });
+    const endDrag = () => {
+      if (!this.dragging) return;
+      this.dragging = false;
+      this.scene?.markDirty();
+    };
+    this.on("pointerup", endDrag);
+    this.on("pointerleave", endDrag);
+  }
+  block;
+  /** True while a drag owns the thumb; read by the block's painter for the active tint. */
+  dragging = false;
+  dragAnchorX = 0;
+  scrollAtDragStart = 0;
+  getA11yAttributes() {
+    return {
+      role: "scrollbar",
+      label: "Scroll code horizontally",
+      value: String(Math.round(this.block.scrollX)),
+      valuemin: "0",
+      valuemax: String(Math.round(this.block.maxScrollX))
+    };
+  }
+  /** Nothing to draw: the thumb is painted by the owning block, so both share one pass. */
+  render() {
+  }
+};
 var CodeBlock = class extends import_ui.UIComponent {
   lines;
   /**
@@ -1364,6 +1428,12 @@ var CodeBlock = class extends import_ui.UIComponent {
   /** Memoized widest prepared line, keyed by the grid identity it came from. */
   contentWidthGrid = null;
   contentWidthValue = 0;
+  /**
+   * The interactive horizontal scrollbar strip (#527), created lazily by
+   * {@link syncScrollTrack} the first time the block overflows. Kept, and merely
+   * disabled, when the overflow later disappears — see there for why.
+   */
+  hTrack = null;
   lang;
   theme;
   /**
@@ -1668,6 +1738,31 @@ var CodeBlock = class extends import_ui.UIComponent {
     }
     return this.grid;
   }
+  /**
+   * Fit the interactive scrollbar strip (#527) to the current overflow.
+   *
+   * Called from {@link render} rather than from `setWidth` or `buildLines`:
+   * `setWidth` is documented as costing nothing and `maxScrollX` costs a grid
+   * build, while `render` is about to pay for that grid anyway. Once created,
+   * the child is KEPT and merely de-`interactive`d when the overflow disappears
+   * — this runs inside the scene's tree walk, and removing a child mid-walk is
+   * how siblings get skipped.
+   */
+  syncScrollTrack() {
+    if (this.maxScrollX <= 0) {
+      if (this.hTrack) this.hTrack.interactive = false;
+      return;
+    }
+    if (!this.hTrack) {
+      this.hTrack = new HScrollTrack(this);
+      this.add(this.hTrack);
+    }
+    this.hTrack.interactive = true;
+    this.hTrack.x = this.pad;
+    this.hTrack.y = this.height - HSCROLL_HIT_H;
+    this.hTrack.width = Math.max(0, this.width - this.pad * 2);
+    this.hTrack.height = HSCROLL_HIT_H;
+  }
   /**
    * Not hit-testable, and deliberately still not `interactive`, even though the
    * block now consumes wheel events to scroll.
@@ -1676,11 +1771,16 @@ var CodeBlock = class extends import_ui.UIComponent {
    * hit-testing, so no a11y shadow node is needed. Creating one would place a
    * `pointer-events: auto` element above the transparent text mirror and swallow
    * the mousedown that starts a native drag-selection.
+   *
+   * Pointer-driven scrolling therefore lives on the {@link HScrollTrack} CHILD,
+   * whose shadow node covers only the bottom-padding strip below the last
+   * selectable carrier — never the text itself.
    */
   isPointInside() {
     return false;
   }
   render(r) {
+    this.syncScrollTrack();
     r.beginPath();
     r.roundRect(0, 0, this.width, this.height, this.theme.codeRadius);
     r.fill(this.theme.codeBgColor);
@@ -1750,6 +1850,24 @@ var CodeBlock = class extends import_ui.UIComponent {
       }
     }
     r.restore();
+    const maxSX = this.maxScrollX;
+    if (maxSX > 0) {
+      const trackW = Math.max(0, this.width - this.pad * 2);
+      const { thumbW, range } = hScrollMetrics(trackW, maxSX);
+      const trackY = this.height - HSCROLL_THUMB_H - HSCROLL_THUMB_INSET;
+      r.beginPath();
+      r.roundRect(this.pad, trackY, trackW, HSCROLL_THUMB_H, HSCROLL_THUMB_H / 2);
+      r.fill(HSCROLL_TRACK_COLOR);
+      r.beginPath();
+      r.roundRect(
+        this.pad + this.scrollX / maxSX * range,
+        trackY,
+        thumbW,
+        HSCROLL_THUMB_H,
+        HSCROLL_THUMB_H / 2
+      );
+      r.fill(this.hTrack?.dragging ? HSCROLL_THUMB_ACTIVE_COLOR : HSCROLL_THUMB_COLOR);
+    }
   }
 };
 var codeAtlases = /* @__PURE__ */ new Map();

package/dist/index.mjs

@@ -1273,6 +1273,70 @@ function highlightLine(line, lang, theme, carry = null) {
   flush(theme.codeColor);
   return { segments, carry: null };
 }
+var HSCROLL_HIT_H = 12;
+var HSCROLL_THUMB_H = 4;
+var HSCROLL_THUMB_INSET = 4;
+var HSCROLL_THUMB_MIN = 24;
+var HSCROLL_TRACK_COLOR = "rgba(128, 128, 128, 0.14)";
+var HSCROLL_THUMB_COLOR = "rgba(128, 128, 128, 0.45)";
+var HSCROLL_THUMB_ACTIVE_COLOR = "rgba(128, 128, 128, 0.75)";
+function hScrollMetrics(trackW, maxScrollX) {
+  const content = trackW + maxScrollX;
+  const proportional = content > 0 ? trackW / content * trackW : trackW;
+  const thumbW = Math.min(trackW, Math.max(HSCROLL_THUMB_MIN, proportional));
+  return { thumbW, range: Math.max(1, trackW - thumbW) };
+}
+var HScrollTrack = class extends UIComponent {
+  constructor(block) {
+    super();
+    this.block = block;
+    this.on("pointerdown", (e) => {
+      if (e.localX === void 0) return;
+      const maxSX = this.block.maxScrollX;
+      if (maxSX <= 0) return;
+      const { thumbW, range } = hScrollMetrics(this.width, maxSX);
+      const thumbX = this.block.scrollX / maxSX * range;
+      if (e.localX < thumbX || e.localX > thumbX + thumbW) {
+        this.block.setScrollX((e.localX - thumbW / 2) / range * maxSX);
+      }
+      this.dragging = true;
+      this.dragAnchorX = e.localX;
+      this.scrollAtDragStart = this.block.scrollX;
+      this.scene?.markDirty();
+    });
+    this.on("pointermove", (e) => {
+      if (!this.dragging || e.localX === void 0) return;
+      const maxSX = this.block.maxScrollX;
+      const { range } = hScrollMetrics(this.width, maxSX);
+      const dx = e.localX - this.dragAnchorX;
+      this.block.setScrollX(this.scrollAtDragStart + dx / range * maxSX);
+    });
+    const endDrag = () => {
+      if (!this.dragging) return;
+      this.dragging = false;
+      this.scene?.markDirty();
+    };
+    this.on("pointerup", endDrag);
+    this.on("pointerleave", endDrag);
+  }
+  block;
+  /** True while a drag owns the thumb; read by the block's painter for the active tint. */
+  dragging = false;
+  dragAnchorX = 0;
+  scrollAtDragStart = 0;
+  getA11yAttributes() {
+    return {
+      role: "scrollbar",
+      label: "Scroll code horizontally",
+      value: String(Math.round(this.block.scrollX)),
+      valuemin: "0",
+      valuemax: String(Math.round(this.block.maxScrollX))
+    };
+  }
+  /** Nothing to draw: the thumb is painted by the owning block, so both share one pass. */
+  render() {
+  }
+};
 var CodeBlock = class extends UIComponent {
   lines;
   /**
@@ -1310,6 +1374,12 @@ var CodeBlock = class extends UIComponent {
   /** Memoized widest prepared line, keyed by the grid identity it came from. */
   contentWidthGrid = null;
   contentWidthValue = 0;
+  /**
+   * The interactive horizontal scrollbar strip (#527), created lazily by
+   * {@link syncScrollTrack} the first time the block overflows. Kept, and merely
+   * disabled, when the overflow later disappears — see there for why.
+   */
+  hTrack = null;
   lang;
   theme;
   /**
@@ -1614,6 +1684,31 @@ var CodeBlock = class extends UIComponent {
     }
     return this.grid;
   }
+  /**
+   * Fit the interactive scrollbar strip (#527) to the current overflow.
+   *
+   * Called from {@link render} rather than from `setWidth` or `buildLines`:
+   * `setWidth` is documented as costing nothing and `maxScrollX` costs a grid
+   * build, while `render` is about to pay for that grid anyway. Once created,
+   * the child is KEPT and merely de-`interactive`d when the overflow disappears
+   * — this runs inside the scene's tree walk, and removing a child mid-walk is
+   * how siblings get skipped.
+   */
+  syncScrollTrack() {
+    if (this.maxScrollX <= 0) {
+      if (this.hTrack) this.hTrack.interactive = false;
+      return;
+    }
+    if (!this.hTrack) {
+      this.hTrack = new HScrollTrack(this);
+      this.add(this.hTrack);
+    }
+    this.hTrack.interactive = true;
+    this.hTrack.x = this.pad;
+    this.hTrack.y = this.height - HSCROLL_HIT_H;
+    this.hTrack.width = Math.max(0, this.width - this.pad * 2);
+    this.hTrack.height = HSCROLL_HIT_H;
+  }
   /**
    * Not hit-testable, and deliberately still not `interactive`, even though the
    * block now consumes wheel events to scroll.
@@ -1622,11 +1717,16 @@ var CodeBlock = class extends UIComponent {
    * hit-testing, so no a11y shadow node is needed. Creating one would place a
    * `pointer-events: auto` element above the transparent text mirror and swallow
    * the mousedown that starts a native drag-selection.
+   *
+   * Pointer-driven scrolling therefore lives on the {@link HScrollTrack} CHILD,
+   * whose shadow node covers only the bottom-padding strip below the last
+   * selectable carrier — never the text itself.
    */
   isPointInside() {
     return false;
   }
   render(r) {
+    this.syncScrollTrack();
     r.beginPath();
     r.roundRect(0, 0, this.width, this.height, this.theme.codeRadius);
     r.fill(this.theme.codeBgColor);
@@ -1696,6 +1796,24 @@ var CodeBlock = class extends UIComponent {
       }
     }
     r.restore();
+    const maxSX = this.maxScrollX;
+    if (maxSX > 0) {
+      const trackW = Math.max(0, this.width - this.pad * 2);
+      const { thumbW, range } = hScrollMetrics(trackW, maxSX);
+      const trackY = this.height - HSCROLL_THUMB_H - HSCROLL_THUMB_INSET;
+      r.beginPath();
+      r.roundRect(this.pad, trackY, trackW, HSCROLL_THUMB_H, HSCROLL_THUMB_H / 2);
+      r.fill(HSCROLL_TRACK_COLOR);
+      r.beginPath();
+      r.roundRect(
+        this.pad + this.scrollX / maxSX * range,
+        trackY,
+        thumbW,
+        HSCROLL_THUMB_H,
+        HSCROLL_THUMB_H / 2
+      );
+      r.fill(this.hTrack?.dragging ? HSCROLL_THUMB_ACTIVE_COLOR : HSCROLL_THUMB_COLOR);
+    }
   }
 };
 var codeAtlases = /* @__PURE__ */ new Map();

package/dist/markdown-code.d.ts

@@ -71,6 +71,12 @@ export declare class CodeBlock extends UIComponent {
     /** Memoized widest prepared line, keyed by the grid identity it came from. */
     private contentWidthGrid;
     private contentWidthValue;
+    /**
+     * The interactive horizontal scrollbar strip (#527), created lazily by
+     * {@link syncScrollTrack} the first time the block overflows. Kept, and merely
+     * disabled, when the overflow later disappears — see there for why.
+     */
+    private hTrack;
     private lang;
     private theme;
     /**
@@ -203,6 +209,17 @@ export declare class CodeBlock extends UIComponent {
      */
     private buildLines;
     private ensureGrid;
+    /**
+     * Fit the interactive scrollbar strip (#527) to the current overflow.
+     *
+     * Called from {@link render} rather than from `setWidth` or `buildLines`:
+     * `setWidth` is documented as costing nothing and `maxScrollX` costs a grid
+     * build, while `render` is about to pay for that grid anyway. Once created,
+     * the child is KEPT and merely de-`interactive`d when the overflow disappears
+     * — this runs inside the scene's tree walk, and removing a child mid-walk is
+     * how siblings get skipped.
+     */
+    private syncScrollTrack;
     /**
      * Not hit-testable, and deliberately still not `interactive`, even though the
      * block now consumes wheel events to scroll.
@@ -211,6 +228,10 @@ export declare class CodeBlock extends UIComponent {
      * hit-testing, so no a11y shadow node is needed. Creating one would place a
      * `pointer-events: auto` element above the transparent text mirror and swallow
      * the mousedown that starts a native drag-selection.
+     *
+     * Pointer-driven scrolling therefore lives on the {@link HScrollTrack} CHILD,
+     * whose shadow node covers only the bottom-padding strip below the last
+     * selectable carrier — never the text itself.
      */
     isPointInside(): boolean;
     render(r: IRenderer): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/markdown",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "publishConfig": {
     "access": "public"
   },