@jsenv/dom 0.6.0 → 0.7.0

package/src/interaction/drag/drag_to_move.js

@@ -1,301 +0,0 @@
-import { getScrollBox, getScrollport } from "../../position/dom_coords.js";
-import { createStyleController } from "../../style/style_controller.js";
-import { getScrollContainer } from "../scroll/scroll_container.js";
-import { initDragConstraints } from "./drag_constraint.js";
-import { createDragElementPositioner } from "./drag_element_positioner.js";
-import { createDragGestureController } from "./drag_gesture.js";
-import { applyStickyFrontiersToAutoScrollArea } from "./sticky_frontiers.js";
-
-const dragStyleController = createStyleController("drag_to_move");
-
-export const createDragToMoveGestureController = ({
-  stickyFrontiers = true,
-  // Padding to reduce the area used to autoscroll by this amount (applied after sticky frontiers)
-  // This creates an invisible space around the area where elements cannot be dragged
-  autoScrollAreaPadding = 0,
-  // constraints,
-  areaConstraint = "scroll", // "scroll" | "scrollport" | "none" | {left,top,right,bottom} | function
-  obstaclesContainer,
-  obstacleAttributeName = "data-drag-obstacle",
-  // Visual feedback line connecting mouse cursor to the moving grab point when constraints prevent following
-  // This provides intuitive feedback during drag operations when the element cannot reach the mouse
-  // position due to obstacles, boundaries, or other constraints. The line originates from where the mouse
-  // initially grabbed the element, but moves with the element to show the current anchor position.
-  // It becomes visible when there's a significant distance between mouse and grab point.
-  showConstraintFeedbackLine = true,
-  showDebugMarkers = true,
-  resetPositionAfterRelease = false,
-  ...options
-} = {}) => {
-  const initGrabToMoveElement = (
-    dragGesture,
-    { element, referenceElement, elementToMove, convertScrollablePosition },
-  ) => {
-    const direction = dragGesture.gestureInfo.direction;
-    const dragGestureName = dragGesture.gestureInfo.name;
-    const scrollContainer = dragGesture.gestureInfo.scrollContainer;
-    const elementImpacted = elementToMove || element;
-    const translateXAtGrab = dragStyleController.getUnderlyingValue(
-      elementImpacted,
-      "transform.translateX",
-    );
-    const translateYAtGrab = dragStyleController.getUnderlyingValue(
-      elementImpacted,
-      "transform.translateY",
-    );
-    dragGesture.addReleaseCallback(() => {
-      if (resetPositionAfterRelease) {
-        dragStyleController.clear(elementImpacted);
-      } else {
-        dragStyleController.commit(elementImpacted);
-      }
-    });
-
-    let elementWidth;
-    let elementHeight;
-    {
-      const updateElementDimension = () => {
-        const elementRect = element.getBoundingClientRect();
-        elementWidth = elementRect.width;
-        elementHeight = elementRect.height;
-      };
-      updateElementDimension();
-      dragGesture.addBeforeDragCallback(updateElementDimension);
-    }
-
-    let scrollArea;
-    {
-      // computed at start so that scrollWidth/scrollHeight are fixed
-      // even if the dragging side effects increases them afterwards
-      scrollArea = {
-        left: 0,
-        top: 0,
-        right: scrollContainer.scrollWidth,
-        bottom: scrollContainer.scrollHeight,
-      };
-    }
-
-    let scrollport;
-    let autoScrollArea;
-    {
-      // for visible are we also want to snapshot the widht/height
-      // and we'll add scrollContainer container scrolls during drag (getScrollport does that)
-      const scrollBox = getScrollBox(scrollContainer);
-      const updateScrollportAndAutoScrollArea = () => {
-        scrollport = getScrollport(scrollBox, scrollContainer);
-        autoScrollArea = scrollport;
-        if (stickyFrontiers) {
-          autoScrollArea = applyStickyFrontiersToAutoScrollArea(
-            autoScrollArea,
-            {
-              scrollContainer,
-              direction,
-              dragGestureName,
-            },
-          );
-        }
-        if (autoScrollAreaPadding > 0) {
-          autoScrollArea = {
-            paddingLeft: autoScrollAreaPadding,
-            paddingTop: autoScrollAreaPadding,
-            paddingRight: autoScrollAreaPadding,
-            paddingBottom: autoScrollAreaPadding,
-            left: autoScrollArea.left + autoScrollAreaPadding,
-            top: autoScrollArea.top + autoScrollAreaPadding,
-            right: autoScrollArea.right - autoScrollAreaPadding,
-            bottom: autoScrollArea.bottom - autoScrollAreaPadding,
-          };
-        }
-      };
-      updateScrollportAndAutoScrollArea();
-      dragGesture.addBeforeDragCallback(updateScrollportAndAutoScrollArea);
-    }
-
-    // Set up dragging attribute
-    element.setAttribute("data-grabbed", "");
-    dragGesture.addReleaseCallback(() => {
-      element.removeAttribute("data-grabbed");
-    });
-
-    // Will be used for dynamic constraints on sticky elements
-    let hasCrossedScrollportLeftOnce = false;
-    let hasCrossedScrollportTopOnce = false;
-    const dragConstraints = initDragConstraints(dragGesture, {
-      areaConstraint,
-      obstaclesContainer: obstaclesContainer || scrollContainer,
-      obstacleAttributeName,
-      showConstraintFeedbackLine,
-      showDebugMarkers,
-      referenceElement,
-    });
-    dragGesture.addBeforeDragCallback(
-      (layoutRequested, currentLayout, limitLayout, { dragEvent }) => {
-        dragConstraints.applyConstraints(
-          layoutRequested,
-          currentLayout,
-          limitLayout,
-          {
-            elementWidth,
-            elementHeight,
-            scrollArea,
-            scrollport,
-            hasCrossedScrollportLeftOnce,
-            hasCrossedScrollportTopOnce,
-            autoScrollArea,
-            dragEvent,
-          },
-        );
-      },
-    );
-
-    const dragToMove = (gestureInfo) => {
-      const { isGoingDown, isGoingUp, isGoingLeft, isGoingRight, layout } =
-        gestureInfo;
-      const left = layout.left;
-      const top = layout.top;
-      const right = left + elementWidth;
-      const bottom = top + elementHeight;
-
-      auto_scroll: {
-        hasCrossedScrollportLeftOnce =
-          hasCrossedScrollportLeftOnce || left < scrollport.left;
-        hasCrossedScrollportTopOnce =
-          hasCrossedScrollportTopOnce || top < scrollport.top;
-
-        const getScrollMove = (axis) => {
-          const isGoingPositive = axis === "x" ? isGoingRight : isGoingDown;
-          if (isGoingPositive) {
-            const elementEnd = axis === "x" ? right : bottom;
-            const autoScrollAreaEnd =
-              axis === "x" ? autoScrollArea.right : autoScrollArea.bottom;
-
-            if (elementEnd <= autoScrollAreaEnd) {
-              return 0;
-            }
-            const scrollAmountNeeded = elementEnd - autoScrollAreaEnd;
-            return scrollAmountNeeded;
-          }
-
-          const isGoingNegative = axis === "x" ? isGoingLeft : isGoingUp;
-          if (!isGoingNegative) {
-            return 0;
-          }
-
-          const referenceOrEl = referenceElement || element;
-          const canAutoScrollNegative =
-            axis === "x"
-              ? !referenceOrEl.hasAttribute("data-sticky-left") ||
-                hasCrossedScrollportLeftOnce
-              : !referenceOrEl.hasAttribute("data-sticky-top") ||
-                hasCrossedScrollportTopOnce;
-          if (!canAutoScrollNegative) {
-            return 0;
-          }
-
-          const elementStart = axis === "x" ? left : top;
-          const autoScrollAreaStart =
-            axis === "x" ? autoScrollArea.left : autoScrollArea.top;
-          if (elementStart >= autoScrollAreaStart) {
-            return 0;
-          }
-
-          const scrollAmountNeeded = autoScrollAreaStart - elementStart;
-          return -scrollAmountNeeded;
-        };
-
-        let scrollLeftTarget;
-        let scrollTopTarget;
-        if (direction.x) {
-          const containerScrollLeftMove = getScrollMove("x");
-          if (containerScrollLeftMove) {
-            scrollLeftTarget =
-              scrollContainer.scrollLeft + containerScrollLeftMove;
-          }
-        }
-        if (direction.y) {
-          const containerScrollTopMove = getScrollMove("y");
-          if (containerScrollTopMove) {
-            scrollTopTarget =
-              scrollContainer.scrollTop + containerScrollTopMove;
-          }
-        }
-        // now we know what to do, do it
-        if (scrollLeftTarget !== undefined) {
-          scrollContainer.scrollLeft = scrollLeftTarget;
-        }
-        if (scrollTopTarget !== undefined) {
-          scrollContainer.scrollTop = scrollTopTarget;
-        }
-      }
-
-      move: {
-        const { scrollableLeft, scrollableTop } = layout;
-        const [positionedLeft, positionedTop] = convertScrollablePosition(
-          scrollableLeft,
-          scrollableTop,
-        );
-        const transform = {};
-        if (direction.x) {
-          const leftTarget = positionedLeft;
-          const leftAtGrab = dragGesture.gestureInfo.leftAtGrab;
-          const leftDelta = leftTarget - leftAtGrab;
-          const translateX = translateXAtGrab
-            ? translateXAtGrab + leftDelta
-            : leftDelta;
-          transform.translateX = translateX;
-          // console.log({
-          //   leftAtGrab,
-          //   scrollableLeft,
-          //   left,
-          //   leftTarget,
-          // });
-        }
-        if (direction.y) {
-          const topTarget = positionedTop;
-          const topAtGrab = dragGesture.gestureInfo.topAtGrab;
-          const topDelta = topTarget - topAtGrab;
-          const translateY = translateYAtGrab
-            ? translateYAtGrab + topDelta
-            : topDelta;
-          transform.translateY = translateY;
-        }
-        dragStyleController.set(elementImpacted, {
-          transform,
-        });
-      }
-    };
-    dragGesture.addDragCallback(dragToMove);
-  };
-
-  const dragGestureController = createDragGestureController(options);
-  const grab = dragGestureController.grab;
-  dragGestureController.grab = ({
-    element,
-    referenceElement,
-    elementToMove,
-    ...rest
-  } = {}) => {
-    const scrollContainer = getScrollContainer(referenceElement || element);
-    const [
-      elementScrollableLeft,
-      elementScrollableTop,
-      convertScrollablePosition,
-    ] = createDragElementPositioner(element, referenceElement, elementToMove);
-    const dragGesture = grab({
-      element,
-      scrollContainer,
-      layoutScrollableLeft: elementScrollableLeft,
-      layoutScrollableTop: elementScrollableTop,
-      ...rest,
-    });
-    initGrabToMoveElement(dragGesture, {
-      element,
-      referenceElement,
-      elementToMove,
-      convertScrollablePosition,
-    });
-    return dragGesture;
-  };
-
-  return dragGestureController;
-};

package/src/interaction/drag/drag_to_resize_gesture.js

@@ -1,68 +0,0 @@
-import { createDragGestureController } from "./drag_gesture.js";
-
-export const startDragToResizeGesture = (
-  pointerdownEvent,
-  { onDragStart, onDrag, onRelease, ...options },
-) => {
-  const target = pointerdownEvent.target;
-  if (!target.closest) {
-    return null;
-  }
-  const elementWithDataResizeHandle = target.closest("[data-resize-handle]");
-  if (!elementWithDataResizeHandle) {
-    return null;
-  }
-  let elementToResize;
-  const dataResizeHandle =
-    elementWithDataResizeHandle.getAttribute("data-resize-handle");
-  if (!dataResizeHandle || dataResizeHandle === "true") {
-    elementToResize = elementWithDataResizeHandle.closest("[data-resize]");
-  } else {
-    elementToResize = document.querySelector(`#${dataResizeHandle}`);
-  }
-  if (!elementToResize) {
-    console.warn("No element to resize found");
-    return null;
-  }
-  // inspired by https://developer.mozilla.org/en-US/docs/Web/CSS/resize
-  // "horizontal", "vertical", "both"
-  const resizeDirection = getResizeDirection(elementToResize);
-  if (!resizeDirection.x && !resizeDirection.y) {
-    return null;
-  }
-
-  const dragToResizeGestureController = createDragGestureController({
-    gestureAttribute: "data-resizing",
-    onDragStart: (...args) => {
-      onDragStart?.(...args);
-    },
-    onDrag,
-    onRelease: (...args) => {
-      elementWithDataResizeHandle.removeAttribute("data-active");
-      onRelease?.(...args);
-    },
-  });
-  elementWithDataResizeHandle.setAttribute("data-active", "");
-  const dragToResizeGesture = dragToResizeGestureController.grabViaPointer(
-    pointerdownEvent,
-    {
-      element: elementToResize,
-      direction: resizeDirection,
-      cursor:
-        resizeDirection.x && resizeDirection.y
-          ? "nwse-resize"
-          : resizeDirection.x
-            ? "ew-resize"
-            : "ns-resize",
-      ...options,
-    },
-  );
-  return dragToResizeGesture;
-};
-
-const getResizeDirection = (element) => {
-  const direction = element.getAttribute("data-resize");
-  const x = direction === "horizontal" || direction === "both";
-  const y = direction === "vertical" || direction === "both";
-  return { x, y };
-};

package/src/interaction/drag/drop_target_detection.js

@@ -1,148 +0,0 @@
-/**
- * Detects the drop target based on what element is actually under the mouse cursor.
- * Uses document.elementsFromPoint() to respect visual stacking order naturally.
- *
- * @param {Object} gestureInfo - Gesture information
- * @param {Element[]} targetElements - Array of potential drop target elements
- * @returns {Object|null} Drop target info with elementSide or null if no valid target found
- */
-export const getDropTargetInfo = (gestureInfo, targetElements) => {
-  const dragElement = gestureInfo.element;
-  const dragElementRect = dragElement.getBoundingClientRect();
-  const intersectingTargets = [];
-  let someTargetIsCol;
-  let someTargetIsTr;
-  for (const targetElement of targetElements) {
-    const targetRect = targetElement.getBoundingClientRect();
-    if (!rectangleAreIntersecting(dragElementRect, targetRect)) {
-      continue;
-    }
-    if (!someTargetIsCol && targetElement.tagName === "COL") {
-      someTargetIsCol = true;
-    }
-    if (!someTargetIsTr && targetElement.tagName === "TR") {
-      someTargetIsTr = true;
-    }
-    intersectingTargets.push(targetElement);
-  }
-
-  if (intersectingTargets.length === 0) {
-    return null;
-  }
-
-  const dragElementCenterX = dragElementRect.left + dragElementRect.width / 2;
-  const dragElementCenterY = dragElementRect.top + dragElementRect.height / 2;
-  // Clamp coordinates to viewport to avoid issues with elementsFromPoint
-  const viewportWidth = document.documentElement.clientWidth;
-  const viewportHeight = document.documentElement.clientHeight;
-  const clientX =
-    dragElementCenterX < 0
-      ? 0
-      : dragElementCenterX > viewportWidth
-        ? viewportWidth - 1
-        : dragElementCenterX;
-  const clientY =
-    dragElementCenterY < 0
-      ? 0
-      : dragElementCenterY > viewportHeight
-        ? viewportHeight - 1
-        : dragElementCenterY;
-
-  // Find the first target element in the stack (topmost visible target)
-  const elementsUnderDragElement = document.elementsFromPoint(clientX, clientY);
-  let targetElement = null;
-  let targetIndex = -1;
-  for (const element of elementsUnderDragElement) {
-    // First, check if the element itself is a target
-    const directIndex = intersectingTargets.indexOf(element);
-    if (directIndex !== -1) {
-      targetElement = element;
-      targetIndex = directIndex;
-      break;
-    }
-    // Special case: if element is <td> or <th> and not in targets,
-    // try to find its corresponding <col> element
-    if (!isTableCell(element)) {
-      continue;
-    }
-    try_col: {
-      if (!someTargetIsCol) {
-        break try_col;
-      }
-      const tableCellCol = findTableCellCol(element);
-      if (!tableCellCol) {
-        break try_col;
-      }
-      const colIndex = intersectingTargets.indexOf(tableCellCol);
-      if (colIndex === -1) {
-        break try_col;
-      }
-      targetElement = tableCellCol;
-      targetIndex = colIndex;
-      break;
-    }
-    try_tr: {
-      if (!someTargetIsTr) {
-        break try_tr;
-      }
-      const tableRow = element.closest("tr");
-      const rowIndex = targetElements.indexOf(tableRow);
-      if (rowIndex === -1) {
-        break try_tr;
-      }
-      targetElement = tableRow;
-      targetIndex = rowIndex;
-      break;
-    }
-  }
-  if (!targetElement) {
-    targetElement = intersectingTargets[0];
-    targetIndex = 0;
-  }
-
-  // Determine position within the target for both axes
-  const targetRect = targetElement.getBoundingClientRect();
-  const targetCenterX = targetRect.left + targetRect.width / 2;
-  const targetCenterY = targetRect.top + targetRect.height / 2;
-  const result = {
-    index: targetIndex,
-    element: targetElement,
-    elementSide: {
-      x: dragElementRect.left < targetCenterX ? "start" : "end",
-      y: dragElementRect.top < targetCenterY ? "start" : "end",
-    },
-    intersecting: intersectingTargets,
-  };
-  return result;
-};
-
-const rectangleAreIntersecting = (r1, r2) => {
-  return !(
-    r2.left > r1.right ||
-    r2.right < r1.left ||
-    r2.top > r1.bottom ||
-    r2.bottom < r1.top
-  );
-};
-
-const isTableCell = (el) => {
-  return el.tagName === "TD" || el.tagName === "TH";
-};
-
-/**
- * Find the corresponding <col> element for a given <td> or <th> cell
- * @param {Element} cellElement - The <td> or <th> element
- * @param {Element[]} targetColElements - Array of <col> elements to search in
- * @returns {Element|null} The corresponding <col> element or null if not found
- */
-const findTableCellCol = (cellElement) => {
-  const table = cellElement.closest("table");
-  const colgroup = table.querySelector("colgroup");
-  if (!colgroup) {
-    return null;
-  }
-  const cols = colgroup.querySelectorAll("col");
-  const columnIndex = cellElement.cellIndex;
-  const correspondingCol = cols[columnIndex];
-  return correspondingCol;
-};

package/src/interaction/drag/sticky_frontiers.js

@@ -1,160 +0,0 @@
-import { getElementSignature } from "../../element_signature.js";
-import { getScrollRelativeRect } from "../../position/dom_coords.js";
-
-export const applyStickyFrontiersToAutoScrollArea = (
-  autoScrollArea,
-  { direction, scrollContainer, dragName },
-) => {
-  let { left, right, top, bottom } = autoScrollArea;
-
-  if (direction.x) {
-    const horizontalStickyFrontiers = createStickyFrontierOnAxis(
-      scrollContainer,
-      {
-        name: dragName,
-        scrollContainer,
-        primarySide: "left",
-        oppositeSide: "right",
-      },
-    );
-    for (const horizontalStickyFrontier of horizontalStickyFrontiers) {
-      const { side, bounds, element } = horizontalStickyFrontier;
-      if (side === "left") {
-        if (bounds.right <= left) {
-          continue;
-        }
-        left = bounds.right;
-        if (import.meta.dev && left > right) {
-          console.warn(
-            `Sticky frontier created invalid horizontal visible area: left (${left}) > right (${right}). Original: left=${bounds.right}, right=${right}`,
-            {
-              frontierElement: element,
-              frontierBounds: bounds,
-              dragName,
-            },
-          );
-        }
-        continue;
-      }
-      // right
-      if (bounds.left >= right) {
-        continue;
-      }
-      right = bounds.left;
-      if (import.meta.dev && left > right) {
-        console.warn(
-          `Sticky frontier created invalid horizontal visible area: left (${left}) > right (${right}). Original: left=${left}, right=${bounds.left}`,
-          {
-            frontierElement: element,
-            frontierBounds: bounds,
-            dragName,
-          },
-        );
-      }
-      continue;
-    }
-  }
-
-  if (direction.y) {
-    const verticalStickyFrontiers = createStickyFrontierOnAxis(
-      scrollContainer,
-      {
-        name: dragName,
-        scrollContainer,
-        primarySide: "top",
-        oppositeSide: "bottom",
-      },
-    );
-    for (const verticalStickyFrontier of verticalStickyFrontiers) {
-      const { side, bounds, element } = verticalStickyFrontier;
-
-      // Frontier acts as a top barrier - constrains from the bottom edge of the frontier
-      if (side === "top") {
-        if (bounds.bottom <= top) {
-          continue;
-        }
-        top = bounds.bottom;
-        if (import.meta.dev && top > bottom) {
-          console.warn(
-            `Sticky frontier created invalid vertical visible area: top (${top}) > bottom (${bottom}). Original: top=${bounds.bottom}, bottom=${bottom}`,
-            {
-              frontierElement: element,
-              frontierBounds: bounds,
-              dragName,
-            },
-          );
-        }
-        continue;
-      }
-
-      // Frontier acts as a bottom barrier - constrains from the top edge of the frontier
-      if (bounds.top >= bottom) {
-        continue;
-      }
-      bottom = bounds.top;
-      if (import.meta.dev && top > bottom) {
-        console.warn(
-          `Sticky frontier created invalid vertical visible area: top (${top}) > bottom (${bottom}). Original: top=${top}, bottom=${bounds.top}`,
-          {
-            frontierElement: element,
-            frontierBounds: bounds,
-            dragName,
-          },
-        );
-      }
-      continue;
-    }
-  }
-
-  return { left, right, top, bottom };
-};
-
-const createStickyFrontierOnAxis = (
-  element,
-  { name, scrollContainer, primarySide, oppositeSide },
-) => {
-  const primaryAttrName = `data-drag-sticky-${primarySide}-frontier`;
-  const oppositeAttrName = `data-drag-sticky-${oppositeSide}-frontier`;
-  const frontiers = element.querySelectorAll(
-    `[${primaryAttrName}], [${oppositeAttrName}]`,
-  );
-  const matchingStickyFrontiers = [];
-  for (const frontier of frontiers) {
-    if (frontier.closest("[data-drag-ignore]")) {
-      continue;
-    }
-    const hasPrimary = frontier.hasAttribute(primaryAttrName);
-    const hasOpposite = frontier.hasAttribute(oppositeAttrName);
-    // Check if element has both sides (invalid)
-    if (hasPrimary && hasOpposite) {
-      const elementSignature = getElementSignature(frontier);
-      console.warn(
-        `Sticky frontier element (${elementSignature}) has both ${primarySide} and ${oppositeSide} attributes. 
-  A sticky frontier should only have one side attribute.`,
-      );
-      continue;
-    }
-    const attrName = hasPrimary ? primaryAttrName : oppositeAttrName;
-    const attributeValue = frontier.getAttribute(attrName);
-    if (attributeValue && name) {
-      const frontierNames = attributeValue.split(",");
-      const isMatching = frontierNames.some(
-        (frontierName) =>
-          frontierName.trim().toLowerCase() === name.toLowerCase(),
-      );
-      if (!isMatching) {
-        continue;
-      }
-    }
-    const frontierBounds = getScrollRelativeRect(frontier, scrollContainer);
-    const stickyFrontierObject = {
-      type: "sticky-frontier",
-      element: frontier,
-      side: hasPrimary ? primarySide : oppositeSide,
-      bounds: frontierBounds,
-      name: `sticky_frontier_${hasPrimary ? primarySide : oppositeSide} (${getElementSignature(frontier)})`,
-    };
-    matchingStickyFrontiers.push(stickyFrontierObject);
-  }
-  return matchingStickyFrontiers;
-};

package/src/interaction/event_marker.js

@@ -1,14 +0,0 @@
-export const createEventMarker = (symbolName) => {
-  const symbol = Symbol.for(symbolName);
-
-  const isMarked = (event) => {
-    return Boolean(event[symbol]);
-  };
-
-  return {
-    mark: (event) => {
-      event[symbol] = true;
-    },
-    isMarked,
-  };
-};