@aznabee/freehand-ui 0.1.4 → 0.1.5

package/dist/freehand-ui.cjs

@@ -41,7 +41,12 @@ var DEFAULT_OPTIONS = {
   /** Override the handwriting stack, e.g. a next/font CSS variable. */
   fontFamily: null,
   /** Fetch Caveat when the page has not provided it. */
-  autoLoadFont: true
+  autoLoadFont: true,
+  /**
+   * Overlay stacking order. Omit to mirror the target element's z-index so
+   * doodles stay above the annotated element but below modals and other UI.
+   */
+  zIndex: null
 };
 function resolveElement(target) {
   if (!target) return null;
@@ -134,6 +139,40 @@ function getScrollableAncestors(element) {
   ancestors.push(window);
   return ancestors;
 }
+function resolveOverlayZIndex(element, override) {
+  if (override != null) return override;
+  const { zIndex, position } = getComputedStyle(element);
+  if (zIndex !== "auto") {
+    const parsed = Number.parseInt(zIndex, 10);
+    if (Number.isFinite(parsed)) return parsed + 1;
+  }
+  let node = element.parentElement;
+  while (node && node !== document.documentElement) {
+    const style = getComputedStyle(node);
+    if (style.zIndex !== "auto" && style.position !== "static") {
+      const parsed = Number.parseInt(style.zIndex, 10);
+      if (Number.isFinite(parsed)) return parsed + 1;
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+function insertOverlaySvg(svg, element) {
+  const parent = element.parentNode;
+  if (!parent) {
+    document.body.appendChild(svg);
+    return;
+  }
+  parent.insertBefore(svg, element.nextSibling);
+}
+function syncOverlayStacking(svg, element, zIndexOverride) {
+  const zIndex = resolveOverlayZIndex(element, zIndexOverride);
+  if (zIndex == null) {
+    svg.style.zIndex = "";
+  } else {
+    svg.style.zIndex = String(zIndex);
+  }
+}
 
 // src/geometry.js
 function averageCornerRadius(element) {
@@ -959,7 +998,6 @@ function createOverlaySvg(left, top, width, height) {
   svg.style.height = `${height}px`;
   svg.style.pointerEvents = "none";
   svg.style.overflow = "visible";
-  svg.style.zIndex = "2147483646";
   return svg;
 }
 
@@ -1489,7 +1527,8 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    document.body.appendChild(this.svg);
+    insertOverlaySvg(this.svg, this.element);
+    syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
     if (this.options.children) {
@@ -1547,6 +1586,7 @@ var DoodleOverlay = class {
     );
     const overlayRect = unionRects(absoluteRects, margin);
     clearSvg(this.svg);
+    syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.svg.setAttribute("width", String(overlayRect.width));
     this.svg.setAttribute("height", String(overlayRect.height));
     this.svg.setAttribute("viewBox", `0 0 ${overlayRect.width} ${overlayRect.height}`);

package/dist/freehand-ui.js

@@ -16,7 +16,12 @@ var DEFAULT_OPTIONS = {
   /** Override the handwriting stack, e.g. a next/font CSS variable. */
   fontFamily: null,
   /** Fetch Caveat when the page has not provided it. */
-  autoLoadFont: true
+  autoLoadFont: true,
+  /**
+   * Overlay stacking order. Omit to mirror the target element's z-index so
+   * doodles stay above the annotated element but below modals and other UI.
+   */
+  zIndex: null
 };
 function resolveElement(target) {
   if (!target) return null;
@@ -109,6 +114,40 @@ function getScrollableAncestors(element) {
   ancestors.push(window);
   return ancestors;
 }
+function resolveOverlayZIndex(element, override) {
+  if (override != null) return override;
+  const { zIndex, position } = getComputedStyle(element);
+  if (zIndex !== "auto") {
+    const parsed = Number.parseInt(zIndex, 10);
+    if (Number.isFinite(parsed)) return parsed + 1;
+  }
+  let node = element.parentElement;
+  while (node && node !== document.documentElement) {
+    const style = getComputedStyle(node);
+    if (style.zIndex !== "auto" && style.position !== "static") {
+      const parsed = Number.parseInt(style.zIndex, 10);
+      if (Number.isFinite(parsed)) return parsed + 1;
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+function insertOverlaySvg(svg, element) {
+  const parent = element.parentNode;
+  if (!parent) {
+    document.body.appendChild(svg);
+    return;
+  }
+  parent.insertBefore(svg, element.nextSibling);
+}
+function syncOverlayStacking(svg, element, zIndexOverride) {
+  const zIndex = resolveOverlayZIndex(element, zIndexOverride);
+  if (zIndex == null) {
+    svg.style.zIndex = "";
+  } else {
+    svg.style.zIndex = String(zIndex);
+  }
+}
 
 // src/geometry.js
 function averageCornerRadius(element) {
@@ -934,7 +973,6 @@ function createOverlaySvg(left, top, width, height) {
   svg.style.height = `${height}px`;
   svg.style.pointerEvents = "none";
   svg.style.overflow = "visible";
-  svg.style.zIndex = "2147483646";
   return svg;
 }
 
@@ -1464,7 +1502,8 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    document.body.appendChild(this.svg);
+    insertOverlaySvg(this.svg, this.element);
+    syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
     if (this.options.children) {
@@ -1522,6 +1561,7 @@ var DoodleOverlay = class {
     );
     const overlayRect = unionRects(absoluteRects, margin);
     clearSvg(this.svg);
+    syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.svg.setAttribute("width", String(overlayRect.width));
     this.svg.setAttribute("height", String(overlayRect.height));
     this.svg.setAttribute("viewBox", `0 0 ${overlayRect.width} ${overlayRect.height}`);

package/dist/index.d.ts

@@ -99,6 +99,11 @@ export interface DoodleOptions {
    * handwriting fallbacks.
    */
   autoLoadFont?: boolean;
+  /**
+   * Overlay stacking order. Omit to follow the target element's z-index so
+   * doodles stay above the annotated element but below modals and other UI.
+   */
+  zIndex?: number | null;
 }
 
 export interface DoodleInstance {

package/dist/react.cjs

@@ -46,7 +46,12 @@ var DEFAULT_OPTIONS = {
   /** Override the handwriting stack, e.g. a next/font CSS variable. */
   fontFamily: null,
   /** Fetch Caveat when the page has not provided it. */
-  autoLoadFont: true
+  autoLoadFont: true,
+  /**
+   * Overlay stacking order. Omit to mirror the target element's z-index so
+   * doodles stay above the annotated element but below modals and other UI.
+   */
+  zIndex: null
 };
 function resolveElement(target) {
   if (!target) return null;
@@ -139,6 +144,40 @@ function getScrollableAncestors(element) {
   ancestors.push(window);
   return ancestors;
 }
+function resolveOverlayZIndex(element, override) {
+  if (override != null) return override;
+  const { zIndex, position } = getComputedStyle(element);
+  if (zIndex !== "auto") {
+    const parsed = Number.parseInt(zIndex, 10);
+    if (Number.isFinite(parsed)) return parsed + 1;
+  }
+  let node = element.parentElement;
+  while (node && node !== document.documentElement) {
+    const style = getComputedStyle(node);
+    if (style.zIndex !== "auto" && style.position !== "static") {
+      const parsed = Number.parseInt(style.zIndex, 10);
+      if (Number.isFinite(parsed)) return parsed + 1;
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+function insertOverlaySvg(svg, element) {
+  const parent = element.parentNode;
+  if (!parent) {
+    document.body.appendChild(svg);
+    return;
+  }
+  parent.insertBefore(svg, element.nextSibling);
+}
+function syncOverlayStacking(svg, element, zIndexOverride) {
+  const zIndex = resolveOverlayZIndex(element, zIndexOverride);
+  if (zIndex == null) {
+    svg.style.zIndex = "";
+  } else {
+    svg.style.zIndex = String(zIndex);
+  }
+}
 
 // src/geometry.js
 function averageCornerRadius(element) {
@@ -964,7 +1003,6 @@ function createOverlaySvg(left, top, width, height) {
   svg.style.height = `${height}px`;
   svg.style.pointerEvents = "none";
   svg.style.overflow = "visible";
-  svg.style.zIndex = "2147483646";
   return svg;
 }
 
@@ -1494,7 +1532,8 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    document.body.appendChild(this.svg);
+    insertOverlaySvg(this.svg, this.element);
+    syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
     if (this.options.children) {
@@ -1552,6 +1591,7 @@ var DoodleOverlay = class {
     );
     const overlayRect = unionRects(absoluteRects, margin);
     clearSvg(this.svg);
+    syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.svg.setAttribute("width", String(overlayRect.width));
     this.svg.setAttribute("height", String(overlayRect.height));
     this.svg.setAttribute("viewBox", `0 0 ${overlayRect.width} ${overlayRect.height}`);

package/dist/react.js

@@ -29,7 +29,12 @@ var DEFAULT_OPTIONS = {
   /** Override the handwriting stack, e.g. a next/font CSS variable. */
   fontFamily: null,
   /** Fetch Caveat when the page has not provided it. */
-  autoLoadFont: true
+  autoLoadFont: true,
+  /**
+   * Overlay stacking order. Omit to mirror the target element's z-index so
+   * doodles stay above the annotated element but below modals and other UI.
+   */
+  zIndex: null
 };
 function resolveElement(target) {
   if (!target) return null;
@@ -122,6 +127,40 @@ function getScrollableAncestors(element) {
   ancestors.push(window);
   return ancestors;
 }
+function resolveOverlayZIndex(element, override) {
+  if (override != null) return override;
+  const { zIndex, position } = getComputedStyle(element);
+  if (zIndex !== "auto") {
+    const parsed = Number.parseInt(zIndex, 10);
+    if (Number.isFinite(parsed)) return parsed + 1;
+  }
+  let node = element.parentElement;
+  while (node && node !== document.documentElement) {
+    const style = getComputedStyle(node);
+    if (style.zIndex !== "auto" && style.position !== "static") {
+      const parsed = Number.parseInt(style.zIndex, 10);
+      if (Number.isFinite(parsed)) return parsed + 1;
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+function insertOverlaySvg(svg, element) {
+  const parent = element.parentNode;
+  if (!parent) {
+    document.body.appendChild(svg);
+    return;
+  }
+  parent.insertBefore(svg, element.nextSibling);
+}
+function syncOverlayStacking(svg, element, zIndexOverride) {
+  const zIndex = resolveOverlayZIndex(element, zIndexOverride);
+  if (zIndex == null) {
+    svg.style.zIndex = "";
+  } else {
+    svg.style.zIndex = String(zIndex);
+  }
+}
 
 // src/geometry.js
 function averageCornerRadius(element) {
@@ -947,7 +986,6 @@ function createOverlaySvg(left, top, width, height) {
   svg.style.height = `${height}px`;
   svg.style.pointerEvents = "none";
   svg.style.overflow = "visible";
-  svg.style.zIndex = "2147483646";
   return svg;
 }
 
@@ -1477,7 +1515,8 @@ var DoodleOverlay = class {
   }
   mount() {
     this.svg = createOverlaySvg(0, 0, 0, 0);
-    document.body.appendChild(this.svg);
+    insertOverlaySvg(this.svg, this.element);
+    syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.resizeObserver = new ResizeObserver(this.onResize);
     this.resizeObserver.observe(this.element);
     if (this.options.children) {
@@ -1535,6 +1574,7 @@ var DoodleOverlay = class {
     );
     const overlayRect = unionRects(absoluteRects, margin);
     clearSvg(this.svg);
+    syncOverlayStacking(this.svg, this.element, this.options.zIndex);
     this.svg.setAttribute("width", String(overlayRect.width));
     this.svg.setAttribute("height", String(overlayRect.height));
     this.svg.setAttribute("viewBox", `0 0 ${overlayRect.width} ${overlayRect.height}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aznabee/freehand-ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Wrap any existing web element with a beautiful, responsive, hand-drawn doodle layer",
   "type": "module",
   "main": "./dist/freehand-ui.cjs",