@deephaven/golden-layout 1.23.1-legacy-table-plugin.bbf55c8.0 → 1.24.0

package/dist/items/RowOrColumn.js

@@ -4,7 +4,14 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import $ from 'jquery';
 import AbstractContentItem from "./AbstractContentItem.js";
 import { animFrame } from "../utils/index.js";
-import { Splitter } from "../controls/index.js";
+import { IntersectionSplitter, Splitter } from "../controls/index.js";
+/**
+ * A single 2D intersection handle. `parentSplitterIndex` is the "bar" splitter
+ * owned by this RowOrColumn; `stemOwner`/`stemSplitterIndex` identify the
+ * perpendicular "stem" splitter that crosses it, which may live arbitrarily
+ * deep in this item's subtree. `junctionAtNearEdge` records which end of the
+ * stem meets the bar.
+ */
 export default class RowOrColumn extends AbstractContentItem {
   constructor(isColumn, layoutManager, config, parent) {
     super(layoutManager, config, parent, $('<div class="lm_item lm_' + (isColumn ? 'column' : 'row') + '"></div>'));
@@ -13,6 +20,7 @@ export default class RowOrColumn extends AbstractContentItem {
     _defineProperty(this, "childElementContainer", void 0);
     _defineProperty(this, "parent", void 0);
     _defineProperty(this, "_splitter", []);
+    _defineProperty(this, "_intersectionSplitter", []);
     _defineProperty(this, "_splitterSize", void 0);
     _defineProperty(this, "_splitterGrabSize", void 0);
     _defineProperty(this, "_isColumn", void 0);
@@ -20,6 +28,12 @@ export default class RowOrColumn extends AbstractContentItem {
     _defineProperty(this, "_splitterPosition", null);
     _defineProperty(this, "_splitterMinPosition", null);
     _defineProperty(this, "_splitterMaxPosition", null);
+    _defineProperty(this, "_isIntersectionDragging", false);
+    _defineProperty(this, "_activeFourWayPartner", null);
+    _defineProperty(this, "_activeFourWaySharedCenterMin", null);
+    _defineProperty(this, "_activeFourWaySharedCenterMax", null);
+    _defineProperty(this, "_activeFourWayBaseCenter", null);
+    _defineProperty(this, "_activeFourWayPartnerBaseCenter", null);
     this.parent = parent;
     this.isRow = !isColumn;
     this.isColumn = isColumn;
@@ -150,6 +164,7 @@ export default class RowOrColumn extends AbstractContentItem {
     if (this.contentItems.length > 0) {
       this._calculateRelativeSizes();
       this._setAbsoluteSizes();
+      this._scheduleIntersectionRefresh();
     }
     this.emitBubblingEvent('stateChanged');
     this.emit('resize');
@@ -167,6 +182,16 @@ export default class RowOrColumn extends AbstractContentItem {
     for (i = 0; i < this.contentItems.length - 1; i++) {
       this.contentItems[i].element.after(this._createSplitter(i).element);
     }
+
+    // Initialise children eagerly so their splitters exist before we attach
+    // intersection handles to them. _$init is idempotent so the outer
+    // callDownwards('_$init') traversal will skip them as no-ops.
+    for (i = 0; i < this.contentItems.length; i++) {
+      if (this.contentItems[i].isInitialised !== true) {
+        this.contentItems[i]._$init();
+      }
+    }
+    this._refreshIntersectionSplitters();
   }
 
   /**
@@ -473,6 +498,14 @@ export default class RowOrColumn extends AbstractContentItem {
    * @param   {lm.controls.Splitter} splitter
    */
   _onSplitterDragStop(splitter) {
+    this._applySplitterDragStop(splitter);
+    this._scheduleSetSize();
+  }
+
+  /**
+   * Applies drag-stop updates for one splitter without scheduling layout.
+   */
+  _applySplitterDragStop(splitter) {
     var _items$before$element2, _items$after$element$2, _this$_splitterPositi, _items$before$config$2, _items$after$config$t;
     var items = this._getItemsForSplitter(splitter);
     var sizeBefore = (_items$before$element2 = items.before.element[this._dimension]()) !== null && _items$before$element2 !== void 0 ? _items$before$element2 : 0;
@@ -485,7 +518,628 @@ export default class RowOrColumn extends AbstractContentItem {
       top: 0,
       left: 0
     });
+  }
+
+  /**
+   * Schedules a full descendant size update on the next animation frame.
+   */
+  _scheduleSetSize() {
     animFrame(this.callDownwards.bind(this, 'setSize', undefined, undefined, undefined));
+    // setSize only propagates downwards, so it repositions intersection handles
+    // owned by this item and its descendants. A handle that sits at a crossing
+    // is owned by the parent RowOrColumn (it depends on a child splitter's
+    // position), so ancestors must be refreshed too or their handles drift out
+    // of sync with the lines after a drag.
+    this._scheduleAncestorIntersectionRefresh();
+  }
+
+  /**
+   * Schedule intersection handle refresh after layout and browser positioning settle.
+   */
+  _scheduleIntersectionRefresh() {
+    animFrame(() => {
+      animFrame(this._refreshIntersectionSplitters.bind(this));
+    });
+  }
+
+  /**
+   * Schedule an intersection handle refresh on every RowOrColumn ancestor so
+   * crossing handles stay aligned after a drag that only resized descendants.
+   */
+  _scheduleAncestorIntersectionRefresh() {
+    var ancestor = this.parent;
+    while (ancestor != null) {
+      if (ancestor instanceof RowOrColumn) {
+        ancestor._scheduleIntersectionRefresh();
+      }
+      ancestor = ancestor.parent;
+    }
+  }
+
+  // ============================================================================
+  // Intersection Splitter Methods - Support for 2D grid resizing
+  // ============================================================================
+
+  /**
+   * Create intersection splitters at the crossing points between this
+   * RowOrColumn's splitters and the splitters of any perpendicular child.
+   *
+   * Each handle is appended into this RowOrColumn's container and positioned
+   * with JS (via `_positionIntersectionSplitter`) during refresh so it stays
+   * aligned as the layout changes. Handles are keyed by their splitter indices
+   * so existing ones are reused rather than recreated.
+   *
+   * @returns The set of crossing keys that currently exist, so callers can
+   *          sweep handles whose crossing no longer exists.
+   */
+  _createIntersectionSplitters() {
+    this.childElementContainer.css('position', 'relative');
+    var ensuredKeys = new Set();
+    for (var parentSplitterIndex = 0; parentSplitterIndex < this._splitter.length; parentSplitterIndex++) {
+      var beforeItem = this.contentItems[parentSplitterIndex];
+      var afterItem = this.contentItems[parentSplitterIndex + 1];
+
+      // A splitter "bar" is crossed by perpendicular splitter lines reaching its
+      // shared edge from either side. Those lines can be nested arbitrarily deep
+      // (e.g. a row inside a column inside the adjacent row), so walk each
+      // adjacent subtree down to the touching edge. The before item meets the
+      // bar at its far edge, the after item at its near edge.
+      var stems = [...this._collectEdgeStemSplitters(beforeItem, false, 'b'), ...this._collectEdgeStemSplitters(afterItem, true, 'a')];
+      for (var i = 0; i < stems.length; i++) {
+        var stem = stems[i];
+        var key = parentSplitterIndex + ':' + stem.path;
+        ensuredKeys.add(key);
+        this._ensureIntersectionSplitter(key, parentSplitterIndex, stem.stemOwner, stem.stemSplitterIndex, stem.junctionAtNearEdge);
+      }
+    }
+    return ensuredKeys;
+  }
+
+  /**
+   * Collect every perpendicular splitter line within `item`'s subtree that
+   * reaches the shared edge with one of this row/column's splitter bars, so a
+   * crossing handle can be created for it. Lines can be nested arbitrarily deep,
+   * so descend until the edge is no longer shared.
+   *
+   * @param item The subtree root to search.
+   * @param nearEdge true when the bar sits at the start of `item` along the bar
+   *                 main axis (junction at the near end), false when at the end.
+   * @param path Dot/colon-delimited string uniquely identifying this stem within
+   *             the layout tree, used as part of the intersection handle key.
+   * @returns Array of stem descriptors for each crossing found in the subtree.
+   */
+  _collectEdgeStemSplitters(item, nearEdge, path) {
+    if (!(item instanceof RowOrColumn)) {
+      return [];
+    }
+    if (item._isColumn !== this._isColumn) {
+      // Perpendicular to the bar: every splitter here crosses it, and every
+      // child spans the full cross extent so all share the edge - recurse into
+      // each to pick up deeper crossings.
+      var results = [];
+      for (var i = 0; i < item._splitter.length; i++) {
+        results.push({
+          stemOwner: item,
+          stemSplitterIndex: i,
+          junctionAtNearEdge: nearEdge,
+          path: path + ':' + i
+        });
+      }
+      for (var _i6 = 0; _i6 < item.contentItems.length; _i6++) {
+        results.push(...this._collectEdgeStemSplitters(item.contentItems[_i6], nearEdge, path + '.' + _i6));
+      }
+      return results;
+    }
+
+    // Parallel to the bar: only the child at the shared edge can reach it.
+    var edgeIndex = nearEdge ? 0 : item.contentItems.length - 1;
+    return this._collectEdgeStemSplitters(item.contentItems[edgeIndex], nearEdge, path + '.' + edgeIndex);
+  }
+
+  /**
+   * Recreate intersection splitters based on current splitter topology.
+   * This keeps handles aligned and present after layout tree mutations.
+   */
+  _refreshIntersectionSplitters() {
+    var previousCount = this._intersectionSplitter.length;
+    var ensuredKeys = this._createIntersectionSplitters();
+
+    // Sweep handles whose crossing no longer exists after a topology change.
+    this._intersectionSplitter = this._intersectionSplitter.filter(record => {
+      if (ensuredKeys.has(record.key)) {
+        return true;
+      }
+      record.splitter._$destroy();
+      return false;
+    });
+    for (var i = 0; i < this._intersectionSplitter.length; i++) {
+      this._positionIntersectionSplitter(this._intersectionSplitter[i]);
+    }
+
+    // If handles were added/removed due to topology change, run one more pass
+    // on the next frame to settle post-layout positions.
+    if (this._intersectionSplitter.length !== previousCount) {
+      animFrame(() => {
+        for (var _i7 = 0; _i7 < this._intersectionSplitter.length; _i7++) {
+          this._positionIntersectionSplitter(this._intersectionSplitter[_i7]);
+        }
+      });
+    }
+  }
+
+  /**
+   * Destroy all previously created intersection splitters.
+   */
+  _destroyIntersectionSplitters() {
+    for (var i = 0; i < this._intersectionSplitter.length; i++) {
+      this._intersectionSplitter[i].splitter._$destroy();
+    }
+    this._intersectionSplitter = [];
+  }
+
+  /**
+   * Tear down splitters (including intersection handles and their document-level
+   * drag listeners) before delegating to the base destroy logic.
+   */
+  _$destroy() {
+    this._destroyIntersectionSplitters();
+    for (var i = 0; i < this._splitter.length; i++) {
+      this._splitter[i]._$destroy();
+    }
+    this._splitter = [];
+    AbstractContentItem.prototype._$destroy.call(this);
+  }
+
+  /**
+   * Whether any golden-layout drag that should suppress intersection hover
+   * affordances is in progress. Covers a 1D splitter drag or a panel drag
+   * (both signalled by `lm_dragging` on the body) and the 2D intersection drag
+   * itself (`lm_intersection_dragging`). During these the handle must not light
+   * up its cross as the pointer passes over a crossing.
+   *
+   * @returns True when a golden-layout drag is active.
+   */
+  static _isAnyDragInProgress() {
+    return $(document.body).hasClass('lm_dragging') || $(document.body).hasClass('lm_intersection_dragging');
+  }
+
+  /**
+   * Create a single intersection splitter anchored in this row/column overlay
+   * at the given coordinates.
+   *
+   * @param key Unique key identifying this crossing (parent splitter index plus
+   *            the stem's tree path), used to reuse an existing handle instead
+   *            of creating a duplicate.
+   * @param parentSplitterIndex Index into this row/column's `_splitter` array of
+   *                            the "bar" splitter that owns the crossing.
+   * @param stemOwner The RowOrColumn (possibly a descendant) that owns the
+   *                  perpendicular "stem" splitter crossing the bar.
+   * @param stemSplitterIndex Index into `stemOwner._splitter` of the stem
+   *                          splitter.
+   * @param junctionAtNearEdge True when the stem meets the bar at the stem
+   *                           owner's near edge, false at its far edge.
+   */
+  _ensureIntersectionSplitter(key, parentSplitterIndex, stemOwner, stemSplitterIndex, junctionAtNearEdge) {
+    var existing = this._intersectionSplitter.find(item => item.key === key);
+    if (existing != null) {
+      existing.parentSplitterIndex = parentSplitterIndex;
+      existing.stemOwner = stemOwner;
+      existing.stemSplitterIndex = stemSplitterIndex;
+      existing.junctionAtNearEdge = junctionAtNearEdge;
+      return;
+    }
+    var intersectionSplitter = new IntersectionSplitter(this._splitterSize, this._splitterGrabSize);
+
+    // Handlers close over the record so reuse (which mutates the record in
+    // place) keeps them pointed at the current crossing.
+    var record = {
+      splitter: intersectionSplitter,
+      key,
+      parentSplitterIndex,
+      stemOwner,
+      stemSplitterIndex,
+      junctionAtNearEdge
+    };
+    intersectionSplitter.on('dragStart', () => this._onIntersectionSplitterDragStart(record));
+    intersectionSplitter.on('drag', (offsetX, offsetY) => this._onIntersectionSplitterDrag(record, offsetX, offsetY));
+    intersectionSplitter.on('dragStop', () => this._onIntersectionSplitterDragStop(record));
+
+    // Highlight both perpendicular lines while hovering the grab area, mirroring
+    // the active line affordance used for 1D splitter drags.
+    var hoverPartner = null;
+    intersectionSplitter.element.on('mouseenter', () => {
+      // Ignore hover state changes while any drag is in progress. This covers
+      // our own active 2D drag (crossing other handles must not transfer or pin
+      // highlights) as well as 1D golden-layout splitter or panel drags, which
+      // would otherwise flash the cross highlight as the pointer passes over a
+      // crossing mid-drag.
+      if (this._isIntersectionDragging || RowOrColumn._isAnyDragInProgress()) {
+        return;
+      }
+      this._setIntersectionHighlight(record, true);
+      hoverPartner = this._findNearFourWayPartner(record);
+      if (hoverPartner != null) {
+        this._setIntersectionHighlight(hoverPartner, true);
+      }
+    });
+    intersectionSplitter.element.on('mouseleave', () => {
+      if (this._isIntersectionDragging || $(document.body).hasClass('lm_intersection_dragging')) {
+        return;
+      }
+      this._setIntersectionHighlight(record, false);
+      if (hoverPartner != null) {
+        this._setIntersectionHighlight(hoverPartner, false);
+        hoverPartner = null;
+      }
+    });
+    intersectionSplitter.element.css({
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      transform: 'translate(-50%, -50%)',
+      zIndex: 60
+    });
+    this.childElementContainer.append(intersectionSplitter.element);
+    this._intersectionSplitter.push(record);
+  }
+
+  /**
+   * Move an intersection handle to the current centre of its crossing.
+   *
+   * @param record The intersection handle record to reposition.
+   */
+  _positionIntersectionSplitter(record) {
+    var position = this._getIntersectionPosition(record);
+    if (position == null) {
+      return;
+    }
+    record.splitter.element.css({
+      left: position.left,
+      top: position.top
+    });
+  }
+
+  /**
+   * Compute intersection coordinates (the centre of the crossing) relative to
+   * this row/column container.
+   *
+   * Uses `getBoundingClientRect` for the container and both splitter elements
+   * rather than jQuery `.position()`. `.position()` is relative to each
+   * element's offset parent, which varies with nesting and `position: relative`
+   * on intermediate items, so adding those values together mis-places the
+   * handle at some crossings. Rect-based deltas are independent of the offset
+   * parent chain and always land on the visual crossing.
+   *
+   * @param record The intersection handle record to locate.
+   * @returns The `{ left, top }` crossing centre relative to this row/column
+   *          container, or null when the geometry is unavailable.
+   */
+  _getIntersectionPosition(record) {
+    var _record$stemOwner;
+    var parentSplitter = this._splitter[record.parentSplitterIndex];
+    var childSplitter = (_record$stemOwner = record.stemOwner) === null || _record$stemOwner === void 0 ? void 0 : _record$stemOwner._splitter[record.stemSplitterIndex];
+    var container = this.childElementContainer[0];
+    var parentEl = parentSplitter === null || parentSplitter === void 0 ? void 0 : parentSplitter.element[0];
+    var childEl = childSplitter === null || childSplitter === void 0 ? void 0 : childSplitter.element[0];
+    if (container == null || parentEl == null || childEl == null) {
+      return null;
+    }
+    var containerRect = container.getBoundingClientRect();
+    var parentRect = parentEl.getBoundingClientRect();
+    var childRect = childEl.getBoundingClientRect();
+    var parentCenterX = parentRect.left + parentRect.width / 2 - containerRect.left;
+    var parentCenterY = parentRect.top + parentRect.height / 2 - containerRect.top;
+    var childCenterX = childRect.left + childRect.width / 2 - containerRect.left;
+    var childCenterY = childRect.top + childRect.height / 2 - containerRect.top;
+
+    // The parent splitter runs along the cross axis (the "bar") and the child
+    // splitter along the main axis (the "stem"); take each line's centre.
+    if (this._isColumn) {
+      return {
+        left: childCenterX,
+        top: parentCenterY
+      };
+    }
+    return {
+      left: parentCenterX,
+      top: childCenterY
+    };
+  }
+
+  /**
+   * Toggle the active-line highlight on both splitters that meet at an
+   * intersection. Reuses the standard `.lm_dragging` line style so the 2D
+   * affordance is visually identical to the existing 1D drag affordance, and
+   * adds `.lm_intersection_line` to lift the lines above pane content so an
+   * offset junction renders cleanly instead of being clipped by a neighbour.
+   *
+   * @param record The intersection handle whose two perpendicular lines to
+   *               toggle.
+   * @param highlighted True to add the highlight, false to remove it.
+   */
+  _setIntersectionHighlight(record, highlighted) {
+    var _record$stemOwner2;
+    var parentSplitter = this._splitter[record.parentSplitterIndex];
+    var childSplitter = (_record$stemOwner2 = record.stemOwner) === null || _record$stemOwner2 === void 0 ? void 0 : _record$stemOwner2._splitter[record.stemSplitterIndex];
+    parentSplitter === null || parentSplitter === void 0 || parentSplitter.element.toggleClass('lm_dragging', highlighted);
+    parentSplitter === null || parentSplitter === void 0 || parentSplitter.element.toggleClass('lm_intersection_line', highlighted);
+    childSplitter === null || childSplitter === void 0 || childSplitter.element.toggleClass('lm_dragging', highlighted);
+    childSplitter === null || childSplitter === void 0 || childSplitter.element.toggleClass('lm_intersection_line', highlighted);
+  }
+
+  /**
+   * Find a nearby sibling intersection on the same parent splitter so a
+   * near-aligned 4-way corner can be dragged as one.
+   *
+   * @param record The intersection handle to find a partner for.
+   * @returns The closest sibling handle within tolerance, or null if none.
+   */
+  _findNearFourWayPartner(record) {
+    // getBoundingClientRect() returns zeros in jsdom; skip partner detection
+    // when geometry is unavailable so unit tests remain deterministic.
+    var container = this.childElementContainer[0];
+    var containerRect = container === null || container === void 0 ? void 0 : container.getBoundingClientRect();
+    if (containerRect == null || containerRect.width === 0 && containerRect.height === 0) {
+      return null;
+    }
+    var base = this._getIntersectionPosition(record);
+    if (base == null) {
+      return null;
+    }
+
+    // Keep this intentionally conservative for now; can be made configurable.
+    var tolerancePx = 8;
+    var best = null;
+    var bestDist = Number.POSITIVE_INFINITY;
+    for (var i = 0; i < this._intersectionSplitter.length; i++) {
+      var candidate = this._intersectionSplitter[i];
+      if (candidate.key === record.key || candidate.parentSplitterIndex !== record.parentSplitterIndex) {
+        continue;
+      }
+      var position = this._getIntersectionPosition(candidate);
+      if (position == null) {
+        continue;
+      }
+      var dx = Math.abs(position.left - base.left);
+      var dy = Math.abs(position.top - base.top);
+      if (dx > tolerancePx || dy > tolerancePx) {
+        continue;
+      }
+      var dist = dx + dy;
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = candidate;
+      }
+    }
+    return best;
+  }
+
+  /**
+   * Clamp and apply one splitter visual drag offset on the owner's active axis.
+   *
+   * @param owner The RowOrColumn that owns the splitter and its min/max bounds.
+   * @param splitter The splitter whose visual position to move.
+   * @param offset The desired pixel offset along the owner's active axis;
+   *               clamped to the owner's min/max drag range before applying.
+   */
+  _setSplitterDragOffset(owner, splitter, offset) {
+    var min = owner._splitterMinPosition;
+    var max = owner._splitterMaxPosition;
+    if (min == null || max == null) {
+      return;
+    }
+    var clamped = Math.max(min, Math.min(max, offset));
+    owner._splitterPosition = clamped;
+    splitter.element.css(owner._isColumn ? 'top' : 'left', clamped);
+  }
+
+  /**
+   * Get the splitter line center on the owner's active drag axis.
+   *
+   * @param owner The RowOrColumn that determines the active axis.
+   * @param splitter The splitter to measure.
+   * @returns The line centre in client coordinates on the active axis, or null
+   *          when the element is unavailable.
+   */
+  _getSplitterAxisCenter(owner, splitter) {
+    var element = splitter.element[0];
+    if (element == null) {
+      return null;
+    }
+    var rect = element.getBoundingClientRect();
+    return owner._isColumn ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+  }
+
+  /**
+   * Invoked when an intersection splitter's DragListener fires dragStart.
+   * Calculates movement bounds for both axes (via the existing 1D logic) so the
+   * drag stays within valid ranges, and highlights both perpendicular lines.
+   *
+   * @param record The intersection handle that started dragging.
+   */
+  _onIntersectionSplitterDragStart(record) {
+    var parentSplitter = this._splitter[record.parentSplitterIndex];
+    var childSplitter = record.stemOwner._splitter[record.stemSplitterIndex];
+    var partner = this._findNearFourWayPartner(record);
+    var partnerSplitter = partner ? partner.stemOwner._splitter[partner.stemSplitterIndex] : null;
+
+    // Reuse the existing 1D splitter drag logic to compute bounds for each axis.
+    this._onSplitterDragStart(parentSplitter);
+    record.stemOwner._onSplitterDragStart(childSplitter);
+    this._activeFourWaySharedCenterMin = null;
+    this._activeFourWaySharedCenterMax = null;
+    this._activeFourWayBaseCenter = null;
+    this._activeFourWayPartnerBaseCenter = null;
+    if (partner != null && partnerSplitter != null) {
+      partner.stemOwner._onSplitterDragStart(partnerSplitter);
+      var baseCenter = this._getSplitterAxisCenter(record.stemOwner, childSplitter);
+      var partnerBaseCenter = this._getSplitterAxisCenter(partner.stemOwner, partnerSplitter);
+      var recordMin = record.stemOwner._splitterMinPosition;
+      var recordMax = record.stemOwner._splitterMaxPosition;
+      var partnerMin = partner.stemOwner._splitterMinPosition;
+      var partnerMax = partner.stemOwner._splitterMaxPosition;
+      if (recordMin != null && recordMax != null && partnerMin != null && partnerMax != null && baseCenter != null && partnerBaseCenter != null) {
+        var recordCenterMin = baseCenter + recordMin;
+        var recordCenterMax = baseCenter + recordMax;
+        var partnerCenterMin = partnerBaseCenter + partnerMin;
+        var partnerCenterMax = partnerBaseCenter + partnerMax;
+        var sharedCenterMin = Math.max(recordCenterMin, partnerCenterMin);
+        var sharedCenterMax = Math.min(recordCenterMax, partnerCenterMax);
+        if (sharedCenterMin <= sharedCenterMax) {
+          this._activeFourWayPartner = partner;
+          this._activeFourWaySharedCenterMin = sharedCenterMin;
+          this._activeFourWaySharedCenterMax = sharedCenterMax;
+          this._activeFourWayBaseCenter = baseCenter;
+          this._activeFourWayPartnerBaseCenter = partnerBaseCenter;
+        } else {
+          this._activeFourWayPartner = null;
+        }
+      } else {
+        this._activeFourWayPartner = null;
+      }
+    } else {
+      this._activeFourWayPartner = null;
+    }
+    this._isIntersectionDragging = true;
+    this._setIntersectionHighlight(record, true);
+    if (this._activeFourWayPartner != null) {
+      this._setIntersectionHighlight(this._activeFourWayPartner, true);
+    }
+    $(document.body).addClass('lm_intersection_dragging');
+  }
+
+  /**
+   * Invoked when an intersection splitter's DragListener fires drag. Moves both
+   * splitter lines by delegating to the existing 1D logic, which clamps each
+   * axis to its own valid range. The lines moving form the 2D drag affordance.
+   *
+   * The stem line spans the full extent of its owner along the parent axis, so
+   * when the parent line moves the junction would otherwise detach. The stem is
+   * stretched to follow the parent line while its far tip stays anchored.
+   *
+   * The stretch is applied with a CSS `transform: scale(...)` about the far tip
+   * rather than by changing the line's `width`/`height`/`top`/`left`. Splitter
+   * lines are real in-flow elements (floated / `position: relative`), so
+   * mutating their box size reflows sibling panes and headers (tabs jump,
+   * content shifts, gaps appear). A transform is painted without affecting
+   * layout, so the affordance stretches cleanly even for deeply nested grids.
+   *
+   * @param record The intersection handle being dragged.
+   * @param offsetX Horizontal pixels moved from the drag origin. Can be negative.
+   * @param offsetY Vertical pixels moved from the drag origin. Can be negative.
+   */
+  _onIntersectionSplitterDrag(record, offsetX, offsetY) {
+    var _this$_splitterPositi2, _record$stemOwner$ele;
+    var parentSplitter = this._splitter[record.parentSplitterIndex];
+    var childSplitter = record.stemOwner._splitter[record.stemSplitterIndex];
+    var partner = this._activeFourWayPartner;
+    var partnerSplitter = partner ? partner.stemOwner._splitter[partner.stemSplitterIndex] : null;
+    this._onSplitterDrag(parentSplitter, offsetX, offsetY);
+    if (partner != null && partnerSplitter != null) {
+      // Keep both stems aligned by applying one shared clamped offset across the
+      // intersection axis for both stem owners.
+      var desiredStemOffset = record.stemOwner._isColumn ? offsetY : offsetX;
+      var sharedCenterMin = this._activeFourWaySharedCenterMin;
+      var sharedCenterMax = this._activeFourWaySharedCenterMax;
+      var baseCenter = this._activeFourWayBaseCenter;
+      var partnerBaseCenter = this._activeFourWayPartnerBaseCenter;
+      if (sharedCenterMin != null && sharedCenterMax != null && baseCenter != null && partnerBaseCenter != null) {
+        var desiredCenter = baseCenter + desiredStemOffset;
+        var sharedCenter = Math.max(sharedCenterMin, Math.min(sharedCenterMax, desiredCenter));
+        this._setSplitterDragOffset(record.stemOwner, childSplitter, sharedCenter - baseCenter);
+        this._setSplitterDragOffset(partner.stemOwner, partnerSplitter, sharedCenter - partnerBaseCenter);
+      }
+    } else {
+      record.stemOwner._onSplitterDrag(childSplitter, offsetX, offsetY);
+    }
+
+    // Scale the stem line along the parent axis so its junction tip tracks the
+    // parent line while its far tip stays put. `_splitterPosition` is the
+    // parent's clamped offset; the stem owner extent gives the line's length.
+    var shift = (_this$_splitterPositi2 = this._splitterPosition) !== null && _this$_splitterPositi2 !== void 0 ? _this$_splitterPositi2 : 0;
+    var fullLength = (_record$stemOwner$ele = record.stemOwner.element[this._dimension]()) !== null && _record$stemOwner$ele !== void 0 ? _record$stemOwner$ele : 0;
+    var newLength = record.junctionAtNearEdge ? fullLength - shift : fullLength + shift;
+    // Keep the stretched stem visible and non-inverted even when the parent
+    // splitter's clamped shift exceeds the stem owner's span.
+    var minVisibleLength = Math.max(this._splitterSize, 1);
+    var safeLength = Math.max(newLength, minVisibleLength);
+    var scale = fullLength > 0 ? safeLength / fullLength : 1;
+
+    // Anchor the far tip: scale about the edge opposite the junction.
+    var farEdge = record.junctionAtNearEdge ? this._isColumn ? 'bottom' : 'right' : this._isColumn ? 'top' : 'left';
+    childSplitter.element.css({
+      'transform-origin': farEdge,
+      transform: this._isColumn ? "scaleY(".concat(scale, ")") : "scaleX(".concat(scale, ")")
+    });
+    if (partner != null && partnerSplitter != null) {
+      var _this$_splitterPositi3, _partner$stemOwner$el;
+      var partnerShift = (_this$_splitterPositi3 = this._splitterPosition) !== null && _this$_splitterPositi3 !== void 0 ? _this$_splitterPositi3 : 0;
+      var partnerFullLength = (_partner$stemOwner$el = partner.stemOwner.element[this._dimension]()) !== null && _partner$stemOwner$el !== void 0 ? _partner$stemOwner$el : 0;
+      var partnerNewLength = partner.junctionAtNearEdge ? partnerFullLength - partnerShift : partnerFullLength + partnerShift;
+      var partnerMinVisibleLength = Math.max(this._splitterSize, 1);
+      var partnerSafeLength = Math.max(partnerNewLength, partnerMinVisibleLength);
+      var partnerScale = partnerFullLength > 0 ? partnerSafeLength / partnerFullLength : 1;
+      var partnerFarEdge = partner.junctionAtNearEdge ? this._isColumn ? 'bottom' : 'right' : this._isColumn ? 'top' : 'left';
+      partnerSplitter.element.css({
+        'transform-origin': partnerFarEdge,
+        transform: this._isColumn ? "scaleY(".concat(partnerScale, ")") : "scaleX(".concat(partnerScale, ")")
+      });
+    }
+  }
+
+  /**
+   * Invoked when an intersection splitter's DragListener fires dragStop.
+   * Applies both axis updates atomically (via the existing 1D logic), clears the
+   * highlight unless the pointer is still over the handle, then relayouts once.
+   *
+   * @param record The intersection handle that finished dragging.
+   */
+  _onIntersectionSplitterDragStop(record) {
+    var parentSplitter = this._splitter[record.parentSplitterIndex];
+    var childSplitter = record.stemOwner._splitter[record.stemSplitterIndex];
+    var partner = this._activeFourWayPartner;
+    var partnerSplitter = partner ? partner.stemOwner._splitter[partner.stemSplitterIndex] : null;
+    this._applySplitterDragStop(parentSplitter);
+
+    // In 4-way mode, enforce one final shared stem offset before applying stop
+    // so both corners land perfectly aligned on drop.
+    if (partner != null && partnerSplitter != null && this._activeFourWaySharedCenterMin != null && this._activeFourWaySharedCenterMax != null && this._activeFourWayBaseCenter != null && this._activeFourWayPartnerBaseCenter != null) {
+      var _record$stemOwner$_sp;
+      var baseOffset = (_record$stemOwner$_sp = record.stemOwner._splitterPosition) !== null && _record$stemOwner$_sp !== void 0 ? _record$stemOwner$_sp : 0;
+      var desiredCenter = this._activeFourWayBaseCenter + baseOffset;
+      var sharedCenter = Math.max(this._activeFourWaySharedCenterMin, Math.min(this._activeFourWaySharedCenterMax, desiredCenter));
+      this._setSplitterDragOffset(record.stemOwner, childSplitter, sharedCenter - this._activeFourWayBaseCenter);
+      this._setSplitterDragOffset(partner.stemOwner, partnerSplitter, sharedCenter - this._activeFourWayPartnerBaseCenter);
+    }
+    record.stemOwner._applySplitterDragStop(childSplitter);
+    if (partner != null && partnerSplitter != null) {
+      partner.stemOwner._applySplitterDragStop(partnerSplitter);
+    }
+
+    // Clear the stretch transform applied during drag so the stem line falls
+    // back to its CSS full-extent size once the layout is reapplied.
+    childSplitter.element.css({
+      transform: '',
+      'transform-origin': ''
+    });
+    if (partnerSplitter != null) {
+      partnerSplitter.element.css({
+        transform: '',
+        'transform-origin': ''
+      });
+    }
+    this._isIntersectionDragging = false;
+    this._setIntersectionHighlight(record, false);
+    if (partner != null) {
+      this._setIntersectionHighlight(partner, false);
+    }
+    this._activeFourWayPartner = null;
+    this._activeFourWaySharedCenterMin = null;
+    this._activeFourWaySharedCenterMax = null;
+    this._activeFourWayBaseCenter = null;
+    this._activeFourWayPartnerBaseCenter = null;
+    $(document.body).removeClass('lm_intersection_dragging');
+    this._scheduleSetSize();
   }
 }
 //# sourceMappingURL=RowOrColumn.js.map