@grifhinz/logics-manager 2.2.0 → 2.3.1

package/clients/shared-web/media/layoutController.js

@@ -0,0 +1,246 @@
+(() => {
+  window.createCdxLogicsLayoutController = function createCdxLogicsLayoutController(options) {
+    const {
+      layout,
+      mainPane,
+      board,
+      activityPanel,
+      details,
+      splitter,
+      stackedQuery,
+      uiState,
+      persistState,
+      debugLog,
+      isDetailsCollapsed,
+      getPrimaryPaneScrollHeight
+    } = options;
+
+    const minBoardHeight = 120;
+    const minDetailsHeight = 220;
+    let isDraggingSplit = false;
+
+    function detectLayoutMode() {
+      return Boolean(stackedQuery && stackedQuery.matches) ? "stacked" : "horizontal";
+    }
+
+    function isStackedLayout() {
+      return uiState.layoutMode === "stacked";
+    }
+
+    function isSplitInteractionDisabled() {
+      return isStackedLayout() && isDetailsCollapsed();
+    }
+
+    function clearSplitSizing() {
+      if (!mainPane || !details) {
+        return;
+      }
+      mainPane.style.flex = "";
+      mainPane.style.height = "";
+      mainPane.style.paddingBottom = "";
+      details.style.flex = "";
+      details.style.height = "";
+      details.style.maxHeight = "";
+      if (splitter) {
+        splitter.style.bottom = "";
+      }
+    }
+
+    function syncStackedAnchoredLayout() {
+      if (!layout || !mainPane || !details || !isStackedLayout()) {
+        return;
+      }
+      const splitterHeight = splitter ? splitter.getBoundingClientRect().height : 0;
+      const detailsHeight = Math.ceil(details.getBoundingClientRect().height || details.offsetHeight || 0);
+      const reservedBottom = detailsHeight + (isSplitInteractionDisabled() ? 0 : splitterHeight);
+      mainPane.style.paddingBottom = `${reservedBottom}px`;
+      if (splitter) {
+        splitter.style.bottom = isSplitInteractionDisabled() ? "" : `${detailsHeight}px`;
+      }
+    }
+
+    function updateSplitterA11y() {
+      if (!splitter) {
+        return;
+      }
+      const splitDisabled = isSplitInteractionDisabled();
+      splitter.setAttribute("aria-disabled", String(splitDisabled));
+      splitter.tabIndex = splitDisabled ? -1 : 0;
+      if (isStackedLayout() && !splitDisabled) {
+        splitter.setAttribute("aria-valuemin", "0");
+        splitter.setAttribute("aria-valuemax", "100");
+        splitter.setAttribute("aria-valuenow", String(Math.round(uiState.splitRatio * 100)));
+      } else {
+        splitter.removeAttribute("aria-valuemin");
+        splitter.removeAttribute("aria-valuemax");
+        splitter.removeAttribute("aria-valuenow");
+      }
+    }
+
+    function applySplitRatio(nextRatio, shouldPersist = false) {
+      if (!layout || !mainPane || !details || !isStackedLayout()) {
+        return;
+      }
+      if (isSplitInteractionDisabled()) {
+        mainPane.style.flex = "1 1 auto";
+        mainPane.style.height = "";
+        mainPane.style.paddingBottom = "";
+        details.style.flex = "0 0 auto";
+        details.style.height = "";
+        details.style.maxHeight = "";
+        syncStackedAnchoredLayout();
+        updateSplitterA11y();
+        if (shouldPersist) {
+          persistState();
+        }
+        return;
+      }
+      const splitterHeight = splitter ? splitter.getBoundingClientRect().height : 0;
+      const available = layout.clientHeight - splitterHeight;
+      if (!Number.isFinite(available) || available <= 0) {
+        return;
+      }
+      const minBoard = Math.min(minBoardHeight, available);
+      const minDetails = Math.min(minDetailsHeight, Math.max(0, available - minBoard));
+      const minRatio = minBoard / available;
+      const maxRatio = (available - minDetails) / available;
+      const clampedRatio = Math.min(Math.max(nextRatio, minRatio), maxRatio);
+      const targetBoardHeight = Math.round(available * clampedRatio);
+      const boardContentHeight = Math.max(
+        typeof getPrimaryPaneScrollHeight === "function" ? getPrimaryPaneScrollHeight() || 0 : board?.scrollHeight || 0,
+        0
+      );
+      const compactBoardFloor = boardContentHeight > 0 ? Math.min(minBoardHeight, boardContentHeight) : minBoardHeight;
+      const boardHeight =
+        boardContentHeight > 0
+          ? Math.max(compactBoardFloor, Math.min(targetBoardHeight, boardContentHeight))
+          : targetBoardHeight;
+      const detailsHeight = Math.max(minDetails, available - boardHeight);
+      mainPane.style.flex = "1 1 auto";
+      mainPane.style.height = "";
+      details.style.flex = "0 0 auto";
+      details.style.height = `${detailsHeight}px`;
+      details.style.maxHeight = `${available}px`;
+      uiState.splitRatio = clampedRatio;
+      debugLog("split-ratio:update", { splitRatio: uiState.splitRatio });
+      syncStackedAnchoredLayout();
+      updateSplitterA11y();
+      if (shouldPersist) {
+        persistState();
+      }
+    }
+
+    function updateLayoutMode() {
+      if (!layout) {
+        return;
+      }
+      const previousLayoutMode = uiState.layoutMode;
+      uiState.layoutMode = detectLayoutMode();
+      const stacked = isStackedLayout();
+      layout.classList.toggle("layout--stacked", stacked);
+      layout.classList.toggle("layout--horizontal", !stacked);
+      layout.classList.toggle("layout--split-disabled", stacked && isDetailsCollapsed());
+      if (previousLayoutMode !== uiState.layoutMode) {
+        debugLog("layout-mode:change", { from: previousLayoutMode, to: uiState.layoutMode });
+      }
+      if (!stacked && isDraggingSplit) {
+        isDraggingSplit = false;
+        if (splitter) {
+          splitter.classList.remove("splitter--dragging");
+        }
+        document.body.classList.remove("is-resizing");
+        debugLog("splitter:drag-reset", { reason: "layout-not-stacked" });
+      }
+      if (stacked) {
+        if (splitter) {
+          splitter.style.display = "";
+        }
+        applySplitRatio(uiState.splitRatio, false);
+      } else {
+        if (splitter) {
+          splitter.style.display = "none";
+        }
+        clearSplitSizing();
+      }
+    }
+
+    function startSplitDrag(event) {
+      if (!splitter || !layout || !isStackedLayout() || isSplitInteractionDisabled()) {
+        return;
+      }
+      event.preventDefault();
+      isDraggingSplit = true;
+      splitter.classList.add("splitter--dragging");
+      document.body.classList.add("is-resizing");
+      if (typeof splitter.setPointerCapture === "function" && typeof event.pointerId === "number") {
+        splitter.setPointerCapture(event.pointerId);
+      }
+    }
+
+    function updateSplitDrag(event) {
+      if (!isDraggingSplit || !layout || !isStackedLayout() || isSplitInteractionDisabled()) {
+        return;
+      }
+      const rect = layout.getBoundingClientRect();
+      const splitterHeight = splitter ? splitter.getBoundingClientRect().height : 0;
+      const available = rect.height - splitterHeight;
+      if (available <= 0) {
+        return;
+      }
+      const offsetY = event.clientY - rect.top - splitterHeight / 2;
+      const minBoard = Math.min(minBoardHeight, available);
+      const minDetails = Math.min(minDetailsHeight, Math.max(0, available - minBoard));
+      const boardHeight = Math.min(Math.max(offsetY, minBoard), available - minDetails);
+      const ratio = boardHeight / available;
+      applySplitRatio(ratio, false);
+    }
+
+    function endSplitDrag(event) {
+      if (!isDraggingSplit) {
+        return;
+      }
+      isDraggingSplit = false;
+      if (splitter) {
+        splitter.classList.remove("splitter--dragging");
+        if (typeof splitter.releasePointerCapture === "function" && typeof event.pointerId === "number") {
+          splitter.releasePointerCapture(event.pointerId);
+        }
+      }
+      document.body.classList.remove("is-resizing");
+      persistState();
+    }
+
+    function nudgeSplitFromKeyboard(delta) {
+      if (!isStackedLayout() || isSplitInteractionDisabled()) {
+        return;
+      }
+      applySplitRatio(uiState.splitRatio + delta, true);
+    }
+
+    return {
+      updateSplitterA11y,
+      nudgeSplitFromKeyboard,
+      persistAndApplySplitRatio(nextRatio) {
+        applySplitRatio(nextRatio, true);
+      },
+      applySplitRatio,
+      syncStackedAnchoredLayout,
+      updateLayoutMode,
+      startSplitDrag,
+      updateSplitDrag,
+      endSplitDrag,
+      isStackedLayout,
+      isSplitInteractionDisabled,
+      isDraggingSplit() {
+        return isDraggingSplit;
+      },
+      resetDraggingState() {
+        isDraggingSplit = false;
+        if (splitter) {
+          splitter.classList.remove("splitter--dragging");
+        }
+        document.body.classList.remove("is-resizing");
+      }
+    };
+  };
+})();

package/clients/shared-web/media/logics.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="6" cy="6" r="2.5" stroke="currentColor" stroke-width="1.8"/>
+  <circle cx="18" cy="6" r="2.5" stroke="currentColor" stroke-width="1.8"/>
+  <circle cx="12" cy="18" r="2.5" stroke="currentColor" stroke-width="1.8"/>
+  <path d="M8 7.5L10.5 15.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+  <path d="M16 7.5L13.5 15.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+</svg>