@hanzogui/floating 3.0.6 → 4.4.0

package/dist/cjs/interactions/safePolygon.cjs

@@ -3,20 +3,22 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var safePolygon_exports = {};
 __export(safePolygon_exports, {
@@ -26,12 +28,15 @@ module.exports = __toCommonJS(safePolygon_exports);
 var import_utils = require("./utils.cjs");
 function isPointInPolygon(point, polygon) {
   const [x, y] = point;
-  let isInside2 = !1;
+  let isInside2 = false;
   const length = polygon.length;
   for (let i = 0, j = length - 1; i < length; j = i++) {
-    const [xi, yi] = polygon[i] || [0, 0],
-      [xj, yj] = polygon[j] || [0, 0];
-    yi >= y != yj >= y && x <= (xj - xi) * (y - yi) / (yj - yi) + xi && (isInside2 = !isInside2);
+    const [xi, yi] = polygon[i] || [0, 0];
+    const [xj, yj] = polygon[j] || [0, 0];
+    const intersect = yi >= y !== yj >= y && x <= (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) {
+      isInside2 = !isInside2;
+    }
   }
   return isInside2;
 }
@@ -40,51 +45,90 @@ function isInside(point, rect) {
 }
 let debugSvg = null;
 function debugDrawPolygon(polygon, trough, cursor, anchor) {
-  if (debugSvg || (debugSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), debugSvg.id = "__safe-polygon-debug", Object.assign(debugSvg.style, {
-    position: "fixed",
-    inset: "0",
-    width: "100vw",
-    height: "100vh",
-    pointerEvents: "none",
-    zIndex: "999999"
-  }), document.body.appendChild(debugSvg)), debugSvg.innerHTML = "", trough.length) {
+  if (!debugSvg) {
+    debugSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    debugSvg.id = "__safe-polygon-debug";
+    Object.assign(debugSvg.style, {
+      position: "fixed",
+      inset: "0",
+      width: "100vw",
+      height: "100vh",
+      pointerEvents: "none",
+      zIndex: "999999"
+    });
+    document.body.appendChild(debugSvg);
+  }
+  debugSvg.innerHTML = "";
+  if (trough.length) {
     const troughEl = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
-    troughEl.setAttribute("points", trough.map(p => p.join(",")).join(" ")), troughEl.setAttribute("fill", "rgba(0,100,255,0.15)"), troughEl.setAttribute("stroke", "rgba(0,100,255,0.6)"), troughEl.setAttribute("stroke-width", "1"), debugSvg.appendChild(troughEl);
+    troughEl.setAttribute("points", trough.map(p => p.join(",")).join(" "));
+    troughEl.setAttribute("fill", "rgba(0,100,255,0.15)");
+    troughEl.setAttribute("stroke", "rgba(0,100,255,0.6)");
+    troughEl.setAttribute("stroke-width", "1");
+    debugSvg.appendChild(troughEl);
   }
   if (polygon.length) {
     const polyEl = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
-    polyEl.setAttribute("points", polygon.map(p => p.join(",")).join(" ")), polyEl.setAttribute("fill", "rgba(255,50,50,0.2)"), polyEl.setAttribute("stroke", "rgba(255,50,50,0.8)"), polyEl.setAttribute("stroke-width", "1.5"), debugSvg.appendChild(polyEl);
+    polyEl.setAttribute("points", polygon.map(p => p.join(",")).join(" "));
+    polyEl.setAttribute("fill", "rgba(255,50,50,0.2)");
+    polyEl.setAttribute("stroke", "rgba(255,50,50,0.8)");
+    polyEl.setAttribute("stroke-width", "1.5");
+    debugSvg.appendChild(polyEl);
   }
   const anchorCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  anchorCircle.setAttribute("cx", String(anchor[0])), anchorCircle.setAttribute("cy", String(anchor[1])), anchorCircle.setAttribute("r", "5"), anchorCircle.setAttribute("fill", "lime"), anchorCircle.setAttribute("stroke", "darkgreen"), anchorCircle.setAttribute("stroke-width", "1.5"), debugSvg.appendChild(anchorCircle);
+  anchorCircle.setAttribute("cx", String(anchor[0]));
+  anchorCircle.setAttribute("cy", String(anchor[1]));
+  anchorCircle.setAttribute("r", "5");
+  anchorCircle.setAttribute("fill", "lime");
+  anchorCircle.setAttribute("stroke", "darkgreen");
+  anchorCircle.setAttribute("stroke-width", "1.5");
+  debugSvg.appendChild(anchorCircle);
   const cursorCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  cursorCircle.setAttribute("cx", String(cursor[0])), cursorCircle.setAttribute("cy", String(cursor[1])), cursorCircle.setAttribute("r", "4"), cursorCircle.setAttribute("fill", "yellow"), cursorCircle.setAttribute("stroke", "orange"), cursorCircle.setAttribute("stroke-width", "1.5"), debugSvg.appendChild(cursorCircle);
+  cursorCircle.setAttribute("cx", String(cursor[0]));
+  cursorCircle.setAttribute("cy", String(cursor[1]));
+  cursorCircle.setAttribute("r", "4");
+  cursorCircle.setAttribute("fill", "yellow");
+  cursorCircle.setAttribute("stroke", "orange");
+  cursorCircle.setAttribute("stroke-width", "1.5");
+  debugSvg.appendChild(cursorCircle);
 }
 function debugClear() {
-  debugSvg && (debugSvg.remove(), debugSvg = null);
+  if (debugSvg) {
+    debugSvg.remove();
+    debugSvg = null;
+  }
 }
 function safePolygon(options = {}) {
   const {
-      buffer = 0.5,
-      blockPointerEvents = !1,
-      requireIntent = !0,
-      __debug = !1
-    } = options,
-    timeoutRef = {
-      current: -1
-    };
-  let hasLanded = !1,
-    lastX = null,
-    lastY = null,
-    lastCursorTime = typeof performance < "u" ? performance.now() : 0;
+    buffer = 0.5,
+    blockPointerEvents = false,
+    requireIntent = true,
+    __debug = false
+  } = options;
+  const timeoutRef = {
+    current: -1
+  };
+  let hasLanded = false;
+  let lastX = null;
+  let lastY = null;
+  let lastCursorTime = typeof performance !== "undefined" ? performance.now() : 0;
   function getCursorSpeed(x, y) {
-    const currentTime = performance.now(),
-      elapsedTime = currentTime - lastCursorTime;
-    if (lastX === null || lastY === null || elapsedTime === 0) return lastX = x, lastY = y, lastCursorTime = currentTime, null;
-    const deltaX = x - lastX,
-      deltaY = y - lastY,
-      speed = Math.sqrt(deltaX * deltaX + deltaY * deltaY) / elapsedTime;
-    return lastX = x, lastY = y, lastCursorTime = currentTime, speed;
+    const currentTime = performance.now();
+    const elapsedTime = currentTime - lastCursorTime;
+    if (lastX === null || lastY === null || elapsedTime === 0) {
+      lastX = x;
+      lastY = y;
+      lastCursorTime = currentTime;
+      return null;
+    }
+    const deltaX = x - lastX;
+    const deltaY = y - lastY;
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    const speed = distance / elapsedTime;
+    lastX = x;
+    lastY = y;
+    lastCursorTime = currentTime;
+    return speed;
   }
   const fn = ({
     x,
@@ -92,100 +136,138 @@ function safePolygon(options = {}) {
     placement,
     elements,
     onClose
-  }) => (hasLanded = !1, lastX = null, lastY = null, function (event) {
-    function close() {
-      (0, import_utils.clearTimeoutIfSet)(timeoutRef), onClose();
-    }
-    (0, import_utils.clearTimeoutIfSet)(timeoutRef);
-    const domReference = elements.domReference ?? elements.reference;
-    if (!domReference || !elements.floating || placement == null || x == null || y == null) return;
-    const {
+  }) => {
+    hasLanded = false;
+    lastX = null;
+    lastY = null;
+    return function onMouseMove(event) {
+      function close() {
+        (0, import_utils.clearTimeoutIfSet)(timeoutRef);
+        onClose();
+      }
+      (0, import_utils.clearTimeoutIfSet)(timeoutRef);
+      const domReference = elements.domReference ?? elements.reference;
+      if (!domReference || !elements.floating || placement == null || x == null || y == null) {
+        return;
+      }
+      const {
         clientX,
         clientY
-      } = event,
-      clientPoint = [clientX, clientY],
-      target = (0, import_utils.getTarget)(event),
-      isLeave = event.type === "mouseleave",
-      isOverFloatingEl = (0, import_utils.contains)(elements.floating, target),
-      isOverReferenceEl = (0, import_utils.contains)(domReference, target),
-      refRect = domReference.getBoundingClientRect(),
-      rect = elements.floating.getBoundingClientRect(),
-      side = placement.split("-")[0],
-      cursorLeaveFromRight = x > rect.right - rect.width / 2,
-      cursorLeaveFromBottom = y > rect.bottom - rect.height / 2,
-      isOverReferenceRect = isInside(clientPoint, refRect),
-      isFloatingWider = rect.width > refRect.width,
-      isFloatingTaller = rect.height > refRect.height,
-      left = (isFloatingWider ? refRect : rect).left,
-      right = (isFloatingWider ? refRect : rect).right,
-      top = (isFloatingTaller ? refRect : rect).top,
-      bottom = (isFloatingTaller ? refRect : rect).bottom;
-    if (isOverFloatingEl && (hasLanded = !0, !isLeave)) return;
-    if (isOverReferenceEl && (hasLanded = !1), isOverReferenceEl && !isLeave) {
-      hasLanded = !0;
-      return;
-    }
-    if (!isOverReferenceEl && isOverReferenceRect && !isLeave || isLeave && event.relatedTarget && (0, import_utils.contains)(elements.floating, event.relatedTarget)) return;
-    if (side === "top" && y >= refRect.bottom - 1 || side === "bottom" && y <= refRect.top + 1 || side === "left" && x >= refRect.right - 1 || side === "right" && x <= refRect.left + 1) return close();
-    let rectPoly = [];
-    switch (side) {
-      case "top":
-        rectPoly = [[left, refRect.top + 1], [left, rect.bottom - 1], [right, rect.bottom - 1], [right, refRect.top + 1]];
-        break;
-      case "bottom":
-        rectPoly = [[left, rect.top + 1], [left, refRect.bottom - 1], [right, refRect.bottom - 1], [right, rect.top + 1]];
-        break;
-      case "left":
-        rectPoly = [[rect.right - 1, bottom], [rect.right - 1, top], [refRect.left + 1, top], [refRect.left + 1, bottom]];
-        break;
-      case "right":
-        rectPoly = [[refRect.right - 1, bottom], [refRect.right - 1, top], [rect.left + 1, top], [rect.left + 1, bottom]];
-        break;
-    }
-    function getPolygon([x2, y2]) {
+      } = event;
+      const clientPoint = [clientX, clientY];
+      const target = (0, import_utils.getTarget)(event);
+      const isLeave = event.type === "mouseleave";
+      const isOverFloatingEl = (0, import_utils.contains)(elements.floating, target);
+      const isOverReferenceEl = (0, import_utils.contains)(domReference, target);
+      const refRect = domReference.getBoundingClientRect();
+      const rect = elements.floating.getBoundingClientRect();
+      const side = placement.split("-")[0];
+      const cursorLeaveFromRight = x > rect.right - rect.width / 2;
+      const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;
+      const isOverReferenceRect = isInside(clientPoint, refRect);
+      const isFloatingWider = rect.width > refRect.width;
+      const isFloatingTaller = rect.height > refRect.height;
+      const left = (isFloatingWider ? refRect : rect).left;
+      const right = (isFloatingWider ? refRect : rect).right;
+      const top = (isFloatingTaller ? refRect : rect).top;
+      const bottom = (isFloatingTaller ? refRect : rect).bottom;
+      if (isOverFloatingEl) {
+        hasLanded = true;
+        if (!isLeave) {
+          return;
+        }
+      }
+      if (isOverReferenceEl) {
+        hasLanded = false;
+      }
+      if (isOverReferenceEl && !isLeave) {
+        hasLanded = true;
+        return;
+      }
+      if (!isOverReferenceEl && isOverReferenceRect && !isLeave) {
+        return;
+      }
+      if (isLeave && event.relatedTarget && (0, import_utils.contains)(elements.floating, event.relatedTarget)) {
+        return;
+      }
+      if (side === "top" && y >= refRect.bottom - 1 || side === "bottom" && y <= refRect.top + 1 || side === "left" && x >= refRect.right - 1 || side === "right" && x <= refRect.left + 1) {
+        return close();
+      }
+      let rectPoly = [];
       switch (side) {
         case "top":
-          {
-            const cursorPointOne = [isFloatingWider ? x2 + buffer / 2 : cursorLeaveFromRight ? x2 + buffer * 4 : x2 - buffer * 4, y2 + buffer + 1],
-              cursorPointTwo = [isFloatingWider ? x2 - buffer / 2 : cursorLeaveFromRight ? x2 + buffer * 4 : x2 - buffer * 4, y2 + buffer + 1],
-              commonPoints = [[rect.left, cursorLeaveFromRight || isFloatingWider ? rect.bottom - buffer : rect.top], [rect.right, cursorLeaveFromRight ? isFloatingWider ? rect.bottom - buffer : rect.top : rect.bottom - buffer]];
-            return [cursorPointOne, cursorPointTwo, ...commonPoints];
-          }
+          rectPoly = [[left, refRect.top + 1], [left, rect.bottom - 1], [right, rect.bottom - 1], [right, refRect.top + 1]];
+          break;
         case "bottom":
-          {
-            const cursorPointOne = [isFloatingWider ? x2 + buffer / 2 : cursorLeaveFromRight ? x2 + buffer * 4 : x2 - buffer * 4, y2 - buffer],
-              cursorPointTwo = [isFloatingWider ? x2 - buffer / 2 : cursorLeaveFromRight ? x2 + buffer * 4 : x2 - buffer * 4, y2 - buffer],
-              commonPoints = [[rect.left, cursorLeaveFromRight || isFloatingWider ? rect.top + buffer : rect.bottom], [rect.right, cursorLeaveFromRight ? isFloatingWider ? rect.top + buffer : rect.bottom : rect.top + buffer]];
-            return [cursorPointOne, cursorPointTwo, ...commonPoints];
-          }
+          rectPoly = [[left, rect.top + 1], [left, refRect.bottom - 1], [right, refRect.bottom - 1], [right, rect.top + 1]];
+          break;
         case "left":
-          {
-            const cursorPointOne = [x2 + buffer + 1, isFloatingTaller ? y2 + buffer / 2 : cursorLeaveFromBottom ? y2 + buffer * 4 : y2 - buffer * 4],
-              cursorPointTwo = [x2 + buffer + 1, isFloatingTaller ? y2 - buffer / 2 : cursorLeaveFromBottom ? y2 + buffer * 4 : y2 - buffer * 4];
-            return [...[[cursorLeaveFromBottom || isFloatingTaller ? rect.right - buffer : rect.left, rect.top], [cursorLeaveFromBottom ? isFloatingTaller ? rect.right - buffer : rect.left : rect.right - buffer, rect.bottom]], cursorPointOne, cursorPointTwo];
-          }
+          rectPoly = [[rect.right - 1, bottom], [rect.right - 1, top], [refRect.left + 1, top], [refRect.left + 1, bottom]];
+          break;
         case "right":
-          {
-            const cursorPointOne = [x2 - buffer, isFloatingTaller ? y2 + buffer / 2 : cursorLeaveFromBottom ? y2 + buffer * 4 : y2 - buffer * 4],
-              cursorPointTwo = [x2 - buffer, isFloatingTaller ? y2 - buffer / 2 : cursorLeaveFromBottom ? y2 + buffer * 4 : y2 - buffer * 4],
-              commonPoints = [[cursorLeaveFromBottom || isFloatingTaller ? rect.left + buffer : rect.right, rect.top], [cursorLeaveFromBottom ? isFloatingTaller ? rect.left + buffer : rect.right : rect.left + buffer, rect.bottom]];
-            return [cursorPointOne, cursorPointTwo, ...commonPoints];
-          }
+          rectPoly = [[refRect.right - 1, bottom], [refRect.right - 1, top], [rect.left + 1, top], [rect.left + 1, bottom]];
+          break;
       }
-    }
-    const poly = getPolygon([x, y]);
-    if (__debug && debugDrawPolygon(poly, rectPoly, clientPoint, [x, y]), !isPointInPolygon([clientX, clientY], rectPoly)) {
-      if (hasLanded && !isOverReferenceRect) return __debug && debugClear(), close();
-      if (!isPointInPolygon([clientX, clientY], poly)) {
-        if (!isLeave && requireIntent) {
-          const cursorSpeed = getCursorSpeed(clientX, clientY);
-          if (cursorSpeed !== null && cursorSpeed < 0.1) return __debug && debugClear(), close();
+      function getPolygon([x2, y2]) {
+        switch (side) {
+          case "top":
+            {
+              const cursorPointOne = [isFloatingWider ? x2 + buffer / 2 : cursorLeaveFromRight ? x2 + buffer * 4 : x2 - buffer * 4, y2 + buffer + 1];
+              const cursorPointTwo = [isFloatingWider ? x2 - buffer / 2 : cursorLeaveFromRight ? x2 + buffer * 4 : x2 - buffer * 4, y2 + buffer + 1];
+              const commonPoints = [[rect.left, cursorLeaveFromRight ? rect.bottom - buffer : isFloatingWider ? rect.bottom - buffer : rect.top], [rect.right, cursorLeaveFromRight ? isFloatingWider ? rect.bottom - buffer : rect.top : rect.bottom - buffer]];
+              return [cursorPointOne, cursorPointTwo, ...commonPoints];
+            }
+          case "bottom":
+            {
+              const cursorPointOne = [isFloatingWider ? x2 + buffer / 2 : cursorLeaveFromRight ? x2 + buffer * 4 : x2 - buffer * 4, y2 - buffer];
+              const cursorPointTwo = [isFloatingWider ? x2 - buffer / 2 : cursorLeaveFromRight ? x2 + buffer * 4 : x2 - buffer * 4, y2 - buffer];
+              const commonPoints = [[rect.left, cursorLeaveFromRight ? rect.top + buffer : isFloatingWider ? rect.top + buffer : rect.bottom], [rect.right, cursorLeaveFromRight ? isFloatingWider ? rect.top + buffer : rect.bottom : rect.top + buffer]];
+              return [cursorPointOne, cursorPointTwo, ...commonPoints];
+            }
+          case "left":
+            {
+              const cursorPointOne = [x2 + buffer + 1, isFloatingTaller ? y2 + buffer / 2 : cursorLeaveFromBottom ? y2 + buffer * 4 : y2 - buffer * 4];
+              const cursorPointTwo = [x2 + buffer + 1, isFloatingTaller ? y2 - buffer / 2 : cursorLeaveFromBottom ? y2 + buffer * 4 : y2 - buffer * 4];
+              const commonPoints = [[cursorLeaveFromBottom ? rect.right - buffer : isFloatingTaller ? rect.right - buffer : rect.left, rect.top], [cursorLeaveFromBottom ? isFloatingTaller ? rect.right - buffer : rect.left : rect.right - buffer, rect.bottom]];
+              return [...commonPoints, cursorPointOne, cursorPointTwo];
+            }
+          case "right":
+            {
+              const cursorPointOne = [x2 - buffer, isFloatingTaller ? y2 + buffer / 2 : cursorLeaveFromBottom ? y2 + buffer * 4 : y2 - buffer * 4];
+              const cursorPointTwo = [x2 - buffer, isFloatingTaller ? y2 - buffer / 2 : cursorLeaveFromBottom ? y2 + buffer * 4 : y2 - buffer * 4];
+              const commonPoints = [[cursorLeaveFromBottom ? rect.left + buffer : isFloatingTaller ? rect.left + buffer : rect.right, rect.top], [cursorLeaveFromBottom ? isFloatingTaller ? rect.left + buffer : rect.right : rect.left + buffer, rect.bottom]];
+              return [cursorPointOne, cursorPointTwo, ...commonPoints];
+            }
         }
-        __debug && debugClear(), close();
       }
-    }
-  });
-  return fn.__options = {
+      const poly = getPolygon([x, y]);
+      if (__debug) {
+        debugDrawPolygon(poly, rectPoly, clientPoint, [x, y]);
+      }
+      if (isPointInPolygon([clientX, clientY], rectPoly)) {
+        return;
+      }
+      if (hasLanded && !isOverReferenceRect) {
+        if (__debug) debugClear();
+        return close();
+      }
+      if (isPointInPolygon([clientX, clientY], poly)) {
+        return;
+      }
+      if (!isLeave && requireIntent) {
+        const cursorSpeed = getCursorSpeed(clientX, clientY);
+        const cursorSpeedThreshold = 0.1;
+        if (cursorSpeed !== null && cursorSpeed < cursorSpeedThreshold) {
+          if (__debug) debugClear();
+          return close();
+        }
+      }
+      if (__debug) debugClear();
+      close();
+    };
+  };
+  fn.__options = {
     blockPointerEvents
-  }, fn;
+  };
+  return fn;
 }