@jsenv/dom 0.17.26 → 0.17.28

package/dist/jsenv_dom.js

@@ -2702,6 +2702,12 @@ const normalizeStyle = (
 
   if (colorPropertySet.has(propertyName)) {
     if (typeof value === "string") {
+      if (context === "css") {
+        // A string is already what the DOM takes, and it takes more of them
+        // (system colors, relative color syntax) than this parser knows;
+        // parsing it to rgba and back would only cost.
+        return value;
+      }
       if (isCSSKeyword(value)) {
         return value;
       }
@@ -9477,7 +9483,8 @@ const css$4 = /* css */`
        not to the gesture, and two fingers are never a drag. */
     touch-action: pinch-zoom;
   }
-  [data-drag-ignore] {
+  [data-drag-ignore],
+  [data-own-target] {
     -webkit-touch-callout: default;
     touch-action: auto;
   }
@@ -11931,7 +11938,8 @@ const css$1 = /* css */`
   [data-drag-source] {
     cursor: default;
   }
-  [data-drag-ignore] {
+  [data-drag-ignore],
+  [data-own-target] {
     cursor: auto;
   }
 
@@ -12026,6 +12034,14 @@ const css$1 = /* css */`
 // can start a drag, and they have to be true BEFORE anyone drags anything.
 import.meta.css = [css$1, "@jsenv/dom/src/interaction/drag/drag_to.js"];
 
+// What a press must not be read from at all. `data-drag-ignore` is said by
+// something whose press is its own business — a text one wants to select, a
+// control that reads the pointer itself. `data-own-target` is the same fact said
+// once for every gesture there is: an element declaring that a press landing on
+// it is aimed AT it, whatever it happens to sit inside (see also
+// DRAG_EXCLUDED_SELECTOR in drag_to_travel.js).
+const DRAG_IGNORED_SELECTOR = "[data-drag-ignore],[data-own-target]";
+
 /**
  * Starts a drag-to-reorder interaction on a list item.
  *
@@ -12525,7 +12541,7 @@ const startDragTo = (event, effects, {
 } = {}) => {
   // An area that opted out of dragging (a text one wants to select, a control that
   // owns the gesture): the press there is none of our business.
-  if (event.target.closest && event.target.closest("[data-drag-ignore]")) {
+  if (event.target.closest && event.target.closest(DRAG_IGNORED_SELECTOR)) {
     return undefined;
   }
   // A secondary button (right click and friends) is a context menu, not a grab.
@@ -12707,7 +12723,7 @@ const startDragToCarryCopy = (event, {
 }) => {
   // An area that opted out of dragging (a text one wants to select, a control
   // that owns the gesture): the press there is none of our business.
-  if (event.target.closest && event.target.closest("[data-drag-ignore]")) {
+  if (event.target.closest && event.target.closest(DRAG_IGNORED_SELECTOR)) {
     return undefined;
   }
   // A secondary button (right click and friends) is a context menu, not a grab.
@@ -13452,8 +13468,11 @@ const DRAG_RESISTANCE = 0.3;
 // from one travels, and the click it would have made is swallowed on the way
 // out. A drag SOURCE is not either: it says which way it goes and only takes
 // that (see DRAG_SOURCE_AXES_ATTRIBUTE) — but a dedicated handle is, being a
-// place whose only purpose is to be taken hold of, from the first pixel.
-const DRAG_EXCLUDED_SELECTOR = ["input", "textarea", "select", '[contenteditable=""]', '[contenteditable="true"]', "[data-drag-handle]", "[data-no-drag-travel]"].join(",");
+// place whose only purpose is to be taken hold of, from the first pixel. And so
+// is an OWN TARGET: an element saying a press landing on it is aimed at IT,
+// which is the same sentence said to every gesture at once rather than to this
+// one (see DRAG_IGNORED_SELECTOR in drag_to.js).
+const DRAG_EXCLUDED_SELECTOR = ["input", "textarea", "select", '[contenteditable=""]', '[contenteditable="true"]', "[data-drag-handle]", "[data-no-drag-travel]", "[data-own-target]"].join(",");
 
 // Which axes a box travels on, one attribute per gesture, said in the DOM by
 // whoever owns the box: it is what a box ABOVE another reads to know the
@@ -19707,14 +19726,22 @@ const getMaxWidth = (
  * Summing their `width` values therefore over-counts the true line width.
  *
  * Instead we compute the bounding extent per line: track the minimum `left`
- * and maximum `right` across all rects sharing the same rounded `top`, then
- * use `right - left` as the line width. This is correct regardless of nesting
+ * and maximum `right` across all rects of the same line, then use
+ * `right - left` as the line width. This is correct regardless of nesting
  * depth and works well for regular inline text content.
  *
- * Limitation: rects are grouped by `Math.round(r.top)`, so elements on the
- * same visual line but with slightly different baselines (e.g. an icon taller
- * than surrounding text) could be counted as separate lines. This is unlikely
- * to matter in practice for normal text rendering.
+ * ## Implementation note — lines are found by vertical overlap
+ *
+ * Boxes sharing a line do not share a `top`: an inline icon sized to 1em and
+ * sitting on the baseline, a superscript, an inline-block, all start a pixel
+ * or a fraction of one away from the text beside them (and that fraction
+ * moves with a sub-pixel scroll offset). Grouping rects by their rounded
+ * `top` would count such a box as a line of its own, and the "longest line"
+ * would come out as the text without it — short enough to make it wrap once
+ * applied as a width. A rect therefore joins the line it overlaps vertically
+ * by more than half the smaller of the two heights: boxes on one line share
+ * most of their height, while the text rects of two consecutive lines overlap
+ * by a sliver at most (a line-height below the font's content height).
  *
  * Limitation: `range.getClientRects()` returns rects for text nodes and inline
  * boxes as laid out in the flow, ignoring any `overflow: hidden` or `max-width`
@@ -19732,31 +19759,41 @@ const measureLongestVisualLineWidth = (el) => {
   const range = document.createRange();
   range.selectNodeContents(el);
 
-  const lineBoundsByTop = new Map();
-  for (const r of range.getClientRects()) {
-    if (r.width === 0) {
+  const lines = [];
+  for (const rect of range.getClientRects()) {
+    if (rect.width === 0) {
       continue;
     }
-    const top = Math.round(r.top);
-    const existing = lineBoundsByTop.get(top);
-    if (existing === undefined) {
-      lineBoundsByTop.set(top, { left: r.left, right: r.right });
-    } else {
-      if (r.left < existing.left) {
-        existing.left = r.left;
-      }
-      if (r.right > existing.right) {
-        existing.right = r.right;
-      }
+    const line = lines.find((candidate) => sharesLine(candidate, rect));
+    if (line === undefined) {
+      lines.push({
+        top: rect.top,
+        bottom: rect.bottom,
+        left: rect.left,
+        right: rect.right,
+      });
+      continue;
+    }
+    if (rect.top < line.top) {
+      line.top = rect.top;
+    }
+    if (rect.bottom > line.bottom) {
+      line.bottom = rect.bottom;
+    }
+    if (rect.left < line.left) {
+      line.left = rect.left;
+    }
+    if (rect.right > line.right) {
+      line.right = rect.right;
     }
   }
 
-  if (lineBoundsByTop.size <= 1) {
+  if (lines.length <= 1) {
     return null;
   }
 
   let longestLineWidth = 0;
-  for (const { left, right } of lineBoundsByTop.values()) {
+  for (const { left, right } of lines) {
     const w = right - left;
     if (w > longestLineWidth) {
       longestLineWidth = w;
@@ -19765,6 +19802,19 @@ const measureLongestVisualLineWidth = (el) => {
   return longestLineWidth;
 };
 
+const sharesLine = (line, rect) => {
+  const overlapTop = rect.top > line.top ? rect.top : line.top;
+  const overlapBottom = rect.bottom < line.bottom ? rect.bottom : line.bottom;
+  const overlap = overlapBottom - overlapTop;
+  if (overlap <= 0) {
+    return false;
+  }
+  const rectHeight = rect.bottom - rect.top;
+  const lineHeight = line.bottom - line.top;
+  const smallerHeight = rectHeight < lineHeight ? rectHeight : lineHeight;
+  return overlap > smallerHeight / 2;
+};
+
 // Measures the width of the widest row of direct children.
 // Uses children's bounding rects (which respect overflow:hidden / max-width)
 // rather than Range.getClientRects() which sees through clipping boundaries.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.17.26",
+  "version": "0.17.28",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {