@jsenv/navi 0.0.1 → 0.1.0

package/src/components/svg/font_sized_svg.jsx

@@ -0,0 +1,45 @@
+/**
+ * FontSizedSvg component
+ *
+ * This component wraps an SVG element to make it inherit the current font size.
+ * It creates a container that's exactly 1em × 1em in size, allowing the SVG to scale
+ * proportionally with the surrounding text.
+ *
+ * Usage:
+ * ```jsx
+ * <FontSizedSvg>
+ *   <svg width="100%" height="100%" viewBox="...">
+ *     <path d="..." />
+ *    </svg>
+ * </FontSizedSvg>
+ * ```
+ *
+ * Notes:
+ * - The wrapped SVG should use width="100%" and height="100%" to fill the container
+ * - This ensures SVG icons match the current text size without additional styling
+ * - Useful for inline icons that should respect the parent's font-size
+ */
+
+export const FontSizedSvg = ({
+  width = "1em",
+  height = "1em",
+  children,
+  ...props
+}) => {
+  return (
+    <span
+      {...props}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        width,
+        height,
+        justifySelf: "center",
+        lineHeight: "1em",
+        flexShrink: 0,
+      }}
+    >
+      {children}
+    </span>
+  );
+};

package/src/components/svg/icon_and_text.jsx

@@ -0,0 +1,21 @@
+import { FontSizedSvg } from "./font_sized_svg.jsx";
+
+export const IconAndText = ({ icon, children, ...rest }) => {
+  if (typeof icon === "function") icon = icon({});
+
+  return (
+    <span
+      className="icon_and_text"
+      {...rest}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "0.1em",
+        ...rest.style,
+      }}
+    >
+      <FontSizedSvg className="icon">{icon}</FontSizedSvg>
+      <span className="text">{children}</span>
+    </span>
+  );
+};

package/src/components/svg/svg_mask_overlay.jsx

@@ -0,0 +1,105 @@
+/**
+ * SVGComposition Component
+ *
+ * Creates composite SVGs by combining independent SVG elements with masking.
+ *
+ * This component solves the challenge of combining independently created SVGs into
+ * a single visual composition. Each SVG can have its own coordinate system, viewBox,
+ * and styling, allowing for maximum reusability of individual icons or graphics.
+ *
+ * When overlaying SVGs, each subsequent overlay "cuts out" its portion from the base SVG,
+ * creating a seamless integration where SVGs appear to interact with each other visually.
+ *
+ * Key benefits:
+ * - Maintains each SVG's independence - use them individually elsewhere
+ * - Handles different viewBox dimensions automatically
+ * - Works with any SVG components regardless of internal implementation
+ * - Supports unlimited overlay elements
+ * - Creates proper masking between elements for visual integration
+ *
+ * Usage example combining two independent icon components:
+ * ```jsx
+ * <SVGMaskOverlay viewBox="0 0 24 24">
+ *   <DatabaseSvg />
+ *   <svg x="12" y="12" width="16" height="16" overflow="visible">
+ *     <PlusSvg />
+ *   </svg>
+ * </SVGMaskOverlay>
+ * ```
+ *
+ * @param {Object} props - Component properties
+ * @param {string} props.viewBox - The main viewBox for the composition (required)
+ * @param {ReactNode[]} props.children - SVG elements (first is base, rest are overlays)
+ * @returns {ReactElement} A composed SVG with all elements properly masked
+ */
+
+import { cloneElement } from "preact";
+
+import.meta.css = /* css */ `
+  .svg_mask_content * {
+    fill: black !important;
+    stroke: black !important;
+    fill-opacity: 1 !important;
+    stroke-opacity: 1 !important;
+    color: black !important;
+    opacity: 1 !important;
+  }
+`;
+
+export const SVGMaskOverlay = ({ viewBox, children }) => {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+  if (children.length === 1) {
+    return children[0];
+  }
+  if (!viewBox) {
+    console.error("SVGComposition requires an explicit viewBox");
+    return null;
+  }
+
+  // First SVG is the base, all others are overlays
+  const [baseSvg, ...overlaySvgs] = children;
+
+  // Generate unique ID for this instance
+  const instanceId = `svgmo-${Math.random().toString(36).slice(2, 9)}`;
+
+  // Create nested masked elements
+  let maskedElement = baseSvg;
+
+  // Apply each mask in sequence
+  overlaySvgs.forEach((overlaySvg, index) => {
+    const maskId = `mask-${instanceId}-${index}`;
+    maskedElement = <g mask={`url(#${maskId})`}>{maskedElement}</g>;
+  });
+
+  return (
+    <svg viewBox={viewBox} width="100%" height="100%">
+      <defs>
+        {/* Define masks that respect position */}
+        {overlaySvgs.map((overlaySvg, index) => {
+          const maskId = `mask-${instanceId}-${index}`;
+
+          // IMPORTANT: clone the overlay SVG exactly as is, just add the mask class
+          return (
+            <mask id={maskId} key={maskId}>
+              {/* White background makes everything visible by default */}
+              <rect width="100%" height="100%" fill="white" />
+
+              {/* EXACT CLONE of the overlay SVG */}
+              {cloneElement(overlaySvg, {
+                className: "svg_mask_content", // Apply styling to make it black
+              })}
+            </mask>
+          );
+        })}
+      </defs>
+
+      {/* Base SVG with all masks applied */}
+      {maskedElement}
+
+      {/* Render all overlays */}
+      {overlaySvgs}
+    </svg>
+  );
+};

package/src/components/table/drag/table_drag.jsx

@@ -0,0 +1,506 @@
+import {
+  createDragToMoveGestureController,
+  createPubSub,
+  dragAfterThreshold,
+  getDropTargetInfo,
+  getScrollContainer,
+  stickyAsRelativeCoords,
+} from "@jsenv/dom";
+import { createContext } from "preact";
+import { forwardRef } from "preact/compat";
+import { useMemo, useState } from "preact/hooks";
+
+import { useStableCallback } from "../../use_stable_callback.js";
+import { Z_INDEX_CELL_FOREGROUND, Z_INDEX_DROP_PREVIEW } from "../z_indexes.js";
+
+const DEBUG_VISUAL = false;
+
+import.meta.css = /* css */ `
+  .navi_table_drag_clone_container {
+    position: absolute;
+    left: var(--table-visual-left);
+    top: var(--table-visual-top);
+    width: var(--table-visual-width);
+    height: var(--table-visual-height);
+    /* background: rgba(0, 0, 0, 0.5); */
+  }
+
+  .navi_table_cell[data-grabbed]::before,
+  .navi_table_cell[data-grabbed]::after {
+    box-shadow: none !important;
+  }
+
+  /* We preprend ".navi_table_container" to ensure it propertly overrides */
+  .navi_table_drag_clone_container .navi_table_cell {
+    opacity: ${DEBUG_VISUAL ? 0.5 : 0};
+  }
+
+  .navi_table_drag_clone_container .navi_table_cell[data-grabbed] {
+    opacity: 0.7;
+  }
+
+  .navi_table_drag_clone_container .navi_table_cell_sticky_frontier {
+    opacity: 0;
+  }
+
+  .navi_table_drag_clone_container .navi_table_cell[data-sticky-left],
+  .navi_table_drag_clone_container .navi_table_cell[data-sticky-top] {
+    position: relative;
+  }
+
+  .navi_table_cell_foreground {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    background: lightgrey;
+    opacity: 0;
+    z-index: ${Z_INDEX_CELL_FOREGROUND};
+  }
+  .navi_table_cell[data-first-row] .navi_table_cell_foreground {
+    background-color: grey;
+  }
+  .navi_table_cell_foreground[data-visible] {
+    opacity: 1;
+  }
+
+  .navi_table_drag_clone_container .navi_table_cell_foreground {
+    opacity: 1;
+    background-color: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+  }
+  .navi_table_drag_clone_container
+    .navi_table_cell[data-first-row][data-grabbed] {
+    opacity: 1;
+  }
+  .navi_table_drag_clone_container
+    .navi_table_cell[data-first-row]
+    .navi_table_cell_foreground {
+    opacity: 0;
+  }
+
+  .navi_table_column_drop_preview {
+    position: absolute;
+    left: var(--column-left);
+    top: var(--column-top);
+    width: var(--column-width);
+    height: var(--column-height);
+    pointer-events: none;
+    z-index: ${Z_INDEX_DROP_PREVIEW};
+    /* Invisible container - just for positioning */
+    background: transparent;
+    border: none;
+  }
+
+  .navi_table_column_drop_preview_line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: rgba(0, 0, 255, 0.5);
+    opacity: 0;
+    left: 0; /* Default: left edge for dropping before */
+    transform: translateX(-50%);
+  }
+  .navi_table_column_drop_preview[data-after]
+    .navi_table_column_drop_preview_line {
+    left: 100%; /* Right edge for dropping after */
+  }
+  .navi_table_column_drop_preview[data-visible]
+    .navi_table_column_drop_preview_line {
+    opacity: 1;
+  }
+
+  .navi_table_column_drop_preview .arrow_positioner {
+    position: absolute;
+    left: 0; /* Default: left edge for dropping before */
+    display: flex;
+    opacity: 0;
+    transform: translateX(-50%);
+    color: rgba(0, 0, 255, 0.5);
+  }
+  .navi_table_column_drop_preview[data-after] .arrow_positioner {
+    left: 100%; /* Right edge for dropping after */
+  }
+  .navi_table_column_drop_preview[data-visible] .arrow_positioner {
+    opacity: 1;
+  }
+  .navi_table_column_drop_preview .arrow_positioner[data-top] {
+    top: -10px;
+  }
+  .navi_table_column_drop_preview .arrow_positioner[data-bottom] {
+    bottom: -10px;
+  }
+  .arrow_positioner svg {
+    width: 10px;
+    height: 10px;
+  }
+`;
+
+export const TableDragContext = createContext();
+export const useTableDragContextValue = ({
+  tableDragCloneContainerRef,
+  tableColumnDropPreviewRef,
+  columns,
+  setColumnOrder,
+  canChangeColumnOrder,
+}) => {
+  setColumnOrder = useStableCallback(setColumnOrder);
+
+  const [grabTarget, setGrabTarget] = useState(null);
+  const grabColumn = (columnIndex) => {
+    setGrabTarget(`column:${columnIndex}`);
+  };
+  const releaseColumn = (columnIndex, newColumnIndex) => {
+    setGrabTarget(null);
+    if (columnIndex === newColumnIndex) {
+      return;
+    }
+    const columnIds = columns.map((col) => col.id);
+    const columnIdsWithNewOrder = moveItem(
+      columnIds,
+      columnIndex,
+      newColumnIndex,
+    );
+    setColumnOrder(columnIdsWithNewOrder);
+  };
+
+  return useMemo(() => {
+    return {
+      tableDragCloneContainerRef,
+      tableColumnDropPreviewRef,
+      grabTarget,
+      grabColumn,
+      releaseColumn,
+      setColumnOrder,
+      canChangeColumnOrder,
+    };
+  }, [grabTarget, canChangeColumnOrder]);
+};
+const moveItem = (array, indexA, indexB) => {
+  const newArray = [];
+  const movedItem = array[indexA];
+  const movingRight = indexA < indexB;
+
+  for (let i = 0; i < array.length; i++) {
+    if (movingRight) {
+      // Moving right: add target first, then moved item after
+      if (i !== indexA) {
+        newArray.push(array[i]);
+      }
+      if (i === indexB) {
+        newArray.push(movedItem);
+      }
+    } else {
+      // Moving left: add moved item first, then target after
+      if (i === indexB) {
+        newArray.push(movedItem);
+      }
+      if (i !== indexA) {
+        newArray.push(array[i]);
+      }
+    }
+  }
+  return newArray;
+};
+export const swapItem = (array, indexA, indexB) => {
+  const newArray = [];
+  const itemAtPositionA = array[indexA];
+  const itemAtPositionB = array[indexB];
+  for (let i = 0; i < array.length; i++) {
+    if (i === indexB) {
+      // At the new position, put the dragged column
+      newArray.push(itemAtPositionA);
+      continue;
+    }
+    if (i === indexA) {
+      // At the old position, put what was at the new position
+      newArray.push(itemAtPositionB);
+      continue;
+    }
+    // Everything else stays the same
+    newArray.push(array[i]);
+  }
+  return newArray;
+};
+
+export const TableDragCloneContainer = forwardRef((props, ref) => {
+  const { tableId } = props;
+
+  return (
+    <div
+      ref={ref}
+      className="navi_table_drag_clone_container"
+      data-overlay-for={tableId}
+    ></div>
+  );
+});
+export const TableColumnDropPreview = forwardRef((props, ref) => {
+  return (
+    <div ref={ref} className="navi_table_column_drop_preview">
+      <div className="arrow_positioner" data-top="">
+        {/* This is an arrow pointing down */}
+        <svg fill="currentColor" viewBox="0 0 30.727 30.727">
+          <path
+            d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0
+		l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"
+          />
+        </svg>
+      </div>
+      <div className="navi_table_column_drop_preview_line"></div>
+      <div className="arrow_positioner" data-bottom="">
+        {/* This is an arrow pointing up */}
+        <svg fill="currentColor" viewBox="0 0 30.727 30.727">
+          <path
+            d="M29.994,20.544L15.363,5.915L0.733,20.543c-0.977,0.978-0.977,2.561,0,3.536c0.977,0.977,2.559,0.976,3.536,0
+		l11.095-11.093L26.461,24.08c0.977,0.976,2.559,0.976,3.535,0C30.971,23.103,30.971,21.521,29.994,20.544z"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+});
+
+export const initDragTableColumnViaPointer = (
+  pointerdownEvent,
+  { tableDragCloneContainer, dropPreview, onGrab, onDrag, onRelease },
+) => {
+  dragAfterThreshold(pointerdownEvent, () => {
+    const [teardown, addTeardown] = createPubSub();
+
+    const tableCell = pointerdownEvent.target.closest(".navi_table_cell");
+    const table = tableCell.closest(".navi_table");
+    const columnIndex = Array.from(tableCell.parentNode.children).indexOf(
+      tableCell,
+    );
+
+    // Track the drop target column index (starts as current column)
+    let dropColumnIndex = columnIndex;
+
+    const tableClone = table.cloneNode(true);
+    // ensure [data-drag-obstacle] inside the table clone are ignored
+    tableClone.setAttribute("data-drag-ignore", "");
+
+    // Scale down the table clone and set transform origin to mouse grab point
+    // const tableRect = table.getBoundingClientRect();
+    // const mouseX = mousedownEvent.clientX - tableRect.left;
+    // const mouseY = mousedownEvent.clientY - tableRect.top;
+    // tableClone.style.transform = "scale(1.2)";
+    // tableClone.style.transformOrigin = `${mouseX}px ${mouseY}px`;
+
+    update_sticky_elements: {
+      // In the table clone we need to convert sticky elements to position: relative
+      // with calculated offsets that match their appearance in the original context
+      const scrollContainer = getScrollContainer(table);
+
+      // important: only on cells, not on <col> nor <tr>
+      const originalStickyCells = table.querySelectorAll(
+        ".navi_table_cell[data-sticky-left], .navi_table_cell[data-sticky-top]",
+      );
+      const cloneStickyCells = tableClone.querySelectorAll(
+        ".navi_table_cell[data-sticky-left], .navi_table_cell[data-sticky-top]",
+      );
+
+      originalStickyCells.forEach((originalCell, index) => {
+        const cloneCell = cloneStickyCells[index];
+        const relativePosition = stickyAsRelativeCoords(
+          originalCell,
+          // Our clone is absolutely positioned on top of <table />
+          // So we need the sticky position relative to <table />
+          table,
+          {
+            scrollContainer,
+          },
+        );
+        if (relativePosition) {
+          const [relativeLeft, relativeTop] = relativePosition;
+          cloneCell.style.position = "relative";
+          if (relativeLeft !== undefined) {
+            cloneCell.style.left = `${relativeLeft}px`;
+          }
+          if (relativeTop !== undefined) {
+            cloneCell.style.top = `${relativeTop}px`;
+          }
+        }
+      });
+    }
+
+    sync_data_grabbed: {
+      // ensure [data-grabbed] are present in the table clone
+      // we could retry on "sync_attributes" but we want to be sure it's done asap to prevent table from being displayed at all
+      // I fear without this we might have an intermediate step where the table column clone is not visible
+      // as [data-grabbed] are not set
+      // Would not be a problem but this ensure we see exactly the table clone right away preventing any possibility
+      // of visual glitches
+      const tableCloneCells = tableClone.querySelectorAll(".navi_table_cell");
+      tableCloneCells.forEach((cellClone) => {
+        const cellColumnIndex = Array.from(
+          cellClone.parentNode.children,
+        ).indexOf(cellClone);
+        if (cellColumnIndex === columnIndex) {
+          cellClone.setAttribute("data-grabbed", "");
+        }
+      });
+    }
+
+    append_in_dom: {
+      tableDragCloneContainer.appendChild(tableClone);
+      addTeardown(() => {
+        tableClone.remove();
+      });
+    }
+
+    sync_attributes: {
+      // Sync attribute changes from original table to clone
+      // This is used to:
+      // - handle table cells being selected as result of mousedown on the <th />
+      // - nothing else is supposed to change in the original <table /> during the drag gesture
+      const syncTableAttributes = createTableAttributeSync(table, tableClone);
+      addTeardown(() => {
+        syncTableAttributes.disconnect();
+      });
+    }
+
+    const colgroup = table.querySelector(".navi_colgroup");
+    const colElements = Array.from(colgroup.children);
+
+    const col = colElements[columnIndex];
+    const colgroupClone = tableClone.querySelector(".navi_colgroup");
+    const colClone = colgroupClone.children[columnIndex];
+    const dragToMoveGestureController = createDragToMoveGestureController({
+      name: "move-column",
+      direction: { x: true },
+      threshold: 0,
+      onGrab,
+      onDrag: (gestureInfo) => {
+        onDrag?.(gestureInfo, dropColumnIndex);
+      },
+      resetPositionAfterRelease: !DEBUG_VISUAL,
+      onRelease: (gestureInfo) => {
+        if (!DEBUG_VISUAL) {
+          teardown();
+        }
+        onRelease?.(gestureInfo, dropColumnIndex);
+      },
+    });
+    const dragToMoveGesture = dragToMoveGestureController.grabViaPointer(
+      pointerdownEvent,
+      {
+        element: colClone,
+        referenceElement: col,
+        elementToMove: tableClone,
+      },
+    );
+
+    drop_preview: {
+      // Get all column elements for drop target detection
+      const dropCandidateElements = colElements.filter(
+        (col) =>
+          !(col.getAttribute("data-drag-obstacle") || "").includes(
+            "move-column",
+          ),
+      );
+
+      const updateDropTarget = (dropTargetInfo) => {
+        const targetColumn = dropTargetInfo.element;
+        const targetColumnIndex = colElements.indexOf(targetColumn);
+        dropColumnIndex = targetColumnIndex;
+        if (dropColumnIndex === columnIndex) {
+          dropPreview.removeAttribute("data-visible");
+          return;
+        }
+        // Position the invisible container to match the target column
+        const { left, top, width, height } =
+          targetColumn.getBoundingClientRect();
+        dropPreview.style.setProperty("--column-left", `${left}px`);
+        dropPreview.style.setProperty("--column-top", `${top}px`);
+        dropPreview.style.setProperty("--column-width", `${width}px`);
+        dropPreview.style.setProperty("--column-height", `${height}px`);
+        // Set data-after attribute to control line position via CSS
+        if (dropColumnIndex > columnIndex) {
+          // Dropping after: CSS will position line at right edge (100%)
+          dropPreview.setAttribute("data-after", "");
+        } else {
+          // Dropping before: CSS will position line at left edge (0%)
+          dropPreview.removeAttribute("data-after");
+        }
+        dropPreview.setAttribute("data-drop-column-index", dropColumnIndex);
+        dropPreview.setAttribute("data-visible", "");
+      };
+
+      dragToMoveGesture.addDragCallback((gestureInfo) => {
+        const dropTargetInfo = getDropTargetInfo(
+          gestureInfo,
+          dropCandidateElements,
+        );
+        if (!dropTargetInfo) {
+          dropPreview.removeAttribute("data-visible");
+          return;
+        }
+        updateDropTarget(dropTargetInfo);
+      });
+      dragToMoveGesture.addReleaseCallback(() => {
+        dropPreview.removeAttribute("data-visible");
+      });
+    }
+
+    return dragToMoveGesture;
+  });
+};
+
+/**
+ * Creates a MutationObserver that syncs attribute changes from original table to clone
+ * @param {HTMLElement} table - The original table element
+ * @param {HTMLElement} cloneTable - The cloned table element
+ * @returns {MutationObserver} The observer instance with disconnect method
+ */
+const createTableAttributeSync = (table, tableClone) => {
+  // Create a map to quickly find corresponding elements in the clone
+  const createElementMap = () => {
+    const map = new Map();
+    const cells = table.querySelectorAll(".navi_table_cell");
+    const cellClones = tableClone.querySelectorAll(".navi_table_cell");
+    for (let i = 0; i < cells.length; i++) {
+      if (cellClones[i]) {
+        map.set(cells[i], cellClones[i]);
+      }
+    }
+    return map;
+  };
+
+  const elementMap = createElementMap();
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === "attributes") {
+        const originalElement = mutation.target;
+        const cloneElement = elementMap.get(originalElement);
+
+        if (cloneElement) {
+          const attributeName = mutation.attributeName;
+          if (attributeName === "style") {
+            return;
+          }
+
+          // Sync the attribute change to the clone
+          if (originalElement.hasAttribute(attributeName)) {
+            const attributeValue = originalElement.getAttribute(attributeName);
+            cloneElement.setAttribute(attributeName, attributeValue);
+          } else {
+            cloneElement.removeAttribute(attributeName);
+          }
+        }
+      }
+    });
+  });
+
+  // Observe attribute changes on all table cells
+  const cellsToObserve = table.querySelectorAll(".navi_table_cell");
+  cellsToObserve.forEach((cell) => {
+    observer.observe(cell, {
+      attributes: true,
+      attributeOldValue: false,
+      subtree: false,
+    });
+  });
+
+  return observer;
+};