sheet-happens 0.0.39 → 0.0.41

package/dist/index.modern.js

@@ -529,7 +529,7 @@ var findInDisplayData = function findInDisplayData(displayData, start, direction
   return maxXY(cell, [0, 0]);
 };
 
-var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, onEdit, onCommit, onKnobAreaChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange, dontChangeSelectionOnOrderChange) {
+var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, onEdit, onCommit, onKnobAreaChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange, dontChangeSelectionOnOrderChange) {
   var _useState = useState(null),
       hitTarget = _useState[0],
       setHitTarget = _useState[1];
@@ -619,6 +619,11 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
     var rect = e.target.getBoundingClientRect();
     var xy = [e.clientX - rect.left, e.clientY - rect.top];
+
+    if (xy[0] > e.target.clientWidth || xy[1] > e.target.clientHeight) {
+      return null;
+    }
+
     return xy;
   }, []);
   var getScrollPosition = useCallback(function (e) {
@@ -1038,9 +1043,9 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         pixelToRow = _ref$current3$cellLay.pixelToRow,
         getIndentX = _ref$current3$cellLay.getIndentX,
         getIndentY = _ref$current3$cellLay.getIndentY;
+    window.document.body.style.cursor = 'auto';
     var xy = getMousePosition(e);
     if (!xy) return;
-    window.document.body.style.cursor = 'auto';
     var hitTarget = getMouseHit(xy);
 
     if (hitTarget) {
@@ -1283,11 +1288,48 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     }
   }, [getMousePosition, getScrollPosition, getMouseHit, onCellWidthChange, onCellHeightChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onKnobAreaChange, onInvalidateRow, onInvalidateColumn, columnGroupKeys, rowGroupKeys]);
   var onDoubleClick = useCallback(function (e) {
-    var pixelToCell = ref.current.cellLayout.pixelToCell;
+    var _ref$current4 = ref.current,
+        selection = _ref$current4.selection,
+        _ref$current4$cellLay = _ref$current4.cellLayout,
+        pixelToCell = _ref$current4$cellLay.pixelToCell,
+        columnToPixel = _ref$current4$cellLay.columnToPixel;
     e.preventDefault();
     if (e.shiftKey) return;
     var xy = getMousePosition(e);
     if (!xy) return;
+    var x = xy[0];
+    var columns = visibleCells.columns;
+
+    if (onCellWidthChange) {
+      var autosized = [];
+
+      for (var _iterator10 = _createForOfIteratorHelperLoose(columns), _step10; !(_step10 = _iterator10()).done;) {
+        var index = _step10.value;
+        var edge = columnToPixel(index, 1);
+
+        if (Math.abs(edge - x) < SIZES.resizeZone && canSizeColumn(index)) {
+          var _normalizeSelection5 = normalizeSelection(selection),
+              _normalizeSelection5$ = _normalizeSelection5[0],
+              minX = _normalizeSelection5$[0],
+              _normalizeSelection5$2 = _normalizeSelection5[1],
+              maxX = _normalizeSelection5$2[0];
+
+          var indices = isColumnSelection(selection) && index >= minX && index <= maxX ? mapSelectionColumns(selection)(function (i) {
+            return i;
+          }) : [index];
+          autosized.push.apply(autosized, indices);
+        }
+      }
+
+      for (var _i = 0, _autosized = autosized; _i < _autosized.length; _i++) {
+        var column = _autosized[_i];
+        onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(column - 1);
+        onCellWidthChange([column], getAutoSizeWidth(column));
+      }
+
+      if (autosized.length) return;
+    }
+
     var hitTarget = getMouseHit(xy);
 
     if (hitTarget) {
@@ -1298,7 +1340,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     var editCell = pixelToCell(xy);
     if (editMode) onCommit === null || onCommit === void 0 ? void 0 : onCommit();
     onEdit === null || onEdit === void 0 ? void 0 : onEdit(editCell);
-  }, [getMousePosition, getMouseHit, onCommit, onEdit]);
+  }, [getMousePosition, getMouseHit, onCommit, onEdit, onInvalidateColumn, onCellWidthChange, getAutoSizeWidth, visibleCells, canSizeColumn]);
   var onContextMenu = useCallback(function (e) {
     var _ref$current$cellLayo2 = ref.current.cellLayout,
         pixelToCell = _ref$current$cellLayo2.pixelToCell,
@@ -1345,21 +1387,21 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 };
 
 var parseKnobOperation = function parseKnobOperation(knobArea, selection, sourceData, editData, cellReadOnly) {
-  var _normalizeSelection5 = normalizeSelection(knobArea),
-      _normalizeSelection5$ = _normalizeSelection5[0],
-      kx1 = _normalizeSelection5$[0],
-      ky1 = _normalizeSelection5$[1],
-      _normalizeSelection5$2 = _normalizeSelection5[1],
-      kx2 = _normalizeSelection5$2[0],
-      ky2 = _normalizeSelection5$2[1];
-
-  var _normalizeSelection6 = normalizeSelection(selection),
+  var _normalizeSelection6 = normalizeSelection(knobArea),
       _normalizeSelection6$ = _normalizeSelection6[0],
-      sx1 = _normalizeSelection6$[0],
-      sy1 = _normalizeSelection6$[1],
+      kx1 = _normalizeSelection6$[0],
+      ky1 = _normalizeSelection6$[1],
       _normalizeSelection6$2 = _normalizeSelection6[1],
-      sx2 = _normalizeSelection6$2[0],
-      sy2 = _normalizeSelection6$2[1];
+      kx2 = _normalizeSelection6$2[0],
+      ky2 = _normalizeSelection6$2[1];
+
+  var _normalizeSelection7 = normalizeSelection(selection),
+      _normalizeSelection7$ = _normalizeSelection7[0],
+      sx1 = _normalizeSelection7$[0],
+      sy1 = _normalizeSelection7$[1],
+      _normalizeSelection7$2 = _normalizeSelection7[1],
+      sx2 = _normalizeSelection7$2[0],
+      sy2 = _normalizeSelection7$2[1];
 
   var fx1 = kx1;
   var fy1 = ky1;
@@ -1484,6 +1526,65 @@ var useScroll = function useScroll(offset, maxScroll, cellLayout, onOffsetChange
     }
   }, [cellLayout, onOffsetChange, onMaxScrollChange]);
 };
+var clipDataOffset = function clipDataOffset(view, offset, freeze, maxCells, cellLayout) {
+  var newX = offset[0],
+      newY = offset[1];
+  var maxColumns = maxCells[0],
+      maxRows = maxCells[1];
+  var absoluteToColumn = cellLayout.absoluteToColumn,
+      columnToAbsolute = cellLayout.columnToAbsolute,
+      absoluteToRow = cellLayout.absoluteToRow,
+      rowToAbsolute = cellLayout.rowToAbsolute;
+
+  var _getViewExtent = getViewExtent(view, [newX, newY], freeze, cellLayout),
+      _getViewExtent$edge = _getViewExtent.edge,
+      rightEdge = _getViewExtent$edge[0],
+      bottomEdge = _getViewExtent$edge[1],
+      _getViewExtent$viewpo = _getViewExtent.viewport,
+      scrollW = _getViewExtent$viewpo[0],
+      scrollH = _getViewExtent$viewpo[1];
+
+  if (rightEdge > maxColumns) {
+    var remainder = columnToAbsolute(maxColumns) - columnToAbsolute(newX);
+    newX = absoluteToColumn(columnToAbsolute(newX) - scrollW + remainder) + 1;
+  }
+
+  if (bottomEdge > maxRows) {
+    var _remainder = rowToAbsolute(maxRows) - rowToAbsolute(newY);
+
+    newY = absoluteToRow(rowToAbsolute(newY) - scrollH + _remainder) + 1;
+  }
+
+  return [newX, newY];
+};
+var getViewExtent = function getViewExtent(view, offset, freeze, cellLayout) {
+  var cellToAbsolute = cellLayout.cellToAbsolute,
+      absoluteToColumn = cellLayout.absoluteToColumn,
+      columnToAbsolute = cellLayout.columnToAbsolute,
+      absoluteToRow = cellLayout.absoluteToRow,
+      rowToAbsolute = cellLayout.rowToAbsolute,
+      getIndentX = cellLayout.getIndentX,
+      getIndentY = cellLayout.getIndentY;
+  var x = offset[0],
+      y = offset[1];
+  var w = view[0],
+      h = view[1];
+
+  var _cellToAbsolute2 = cellToAbsolute(freeze),
+      frozenX = _cellToAbsolute2[0],
+      frozenY = _cellToAbsolute2[1];
+
+  var scrollW = w - frozenX - getIndentX();
+  var scrollH = h - frozenY - getIndentY();
+  var leftEdge = x + freeze[0];
+  var topEdge = y + freeze[1];
+  var rightEdge = absoluteToColumn(columnToAbsolute(leftEdge) + scrollW);
+  var bottomEdge = absoluteToRow(rowToAbsolute(topEdge) + scrollH);
+  return {
+    edge: [rightEdge, bottomEdge],
+    viewport: [scrollW, scrollH]
+  };
+};
 var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, maxScroll, cellLayout, callback) {
   var x = cell[0],
       y = cell[1];
@@ -1496,9 +1597,9 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
       columnToPixel = cellLayout.columnToPixel,
       rowToPixel = cellLayout.rowToPixel;
 
-  var _cellToAbsolute2 = cellToAbsolute(freeze),
-      frozenX = _cellToAbsolute2[0],
-      frozenY = _cellToAbsolute2[1];
+  var _cellToAbsolute3 = cellToAbsolute(freeze),
+      frozenX = _cellToAbsolute3[0],
+      frozenY = _cellToAbsolute3[1];
 
   var _cellToPixel = cellToPixel(cell),
       left = _cellToPixel[0],
@@ -1536,9 +1637,9 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
   if (!isSameXY(newOffset, offset)) {
     var scroll = cellToAbsolute(newOffset);
 
-    var _cellToAbsolute3 = cellToAbsolute([0, 0], [0.5, 0.5]),
-        nudgeX = _cellToAbsolute3[0],
-        nudgeY = _cellToAbsolute3[1];
+    var _cellToAbsolute4 = cellToAbsolute([0, 0], [0.5, 0.5]),
+        nudgeX = _cellToAbsolute4[0],
+        nudgeY = _cellToAbsolute4[1];
 
     callback(newOffset, maxXY(maxScroll, scroll));
     setTimeout(function () {
@@ -1550,6 +1651,85 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
   }
 };
 
+var resolveSheetStyle = function resolveSheetStyle(sheetStyle) {
+  var _sheetStyle$shadowBlu, _sheetStyle$shadowOpa, _sheetStyle$shadowCol;
+
+  return {
+    freezeColumns: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeColumns) || 0,
+    freezeRows: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeRows) || 0,
+    hideColumnHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideColumnHeaders) || false,
+    hideRowHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideRowHeaders) || false,
+    hideGridlines: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideGridlines) || false,
+    hideScrollBars: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideScrollBars) || false,
+    columnHeaderHeight: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideColumnHeaders ? 1 : SIZES.headerHeight,
+    rowHeaderWidth: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideRowHeaders ? 1 : SIZES.headerWidth,
+    shadowBlur: (_sheetStyle$shadowBlu = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowBlur) != null ? _sheetStyle$shadowBlu : SIZES.shadowBlur,
+    shadowOpacity: (_sheetStyle$shadowOpa = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowOpacity) != null ? _sheetStyle$shadowOpa : SIZES.shadowOpacity,
+    shadowColor: (_sheetStyle$shadowCol = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowColor) != null ? _sheetStyle$shadowCol : COLORS.shadowColor
+  };
+};
+var resolveCellStyle = function resolveCellStyle(optionalStyle, defaultStyle) {
+  return _extends({}, defaultStyle, optionalStyle);
+};
+var applyAlignment = function applyAlignment(start, cellSize, style, imageWidth, alignment) {
+  if (alignment === void 0) {
+    alignment = style.textAlign;
+  }
+
+  if (alignment === 'left') {
+    return start + style.marginLeft;
+  } else if (alignment === 'center') {
+    return start + cellSize * 0.5 - imageWidth / 2;
+  } else if (alignment === 'right') {
+    return start + (cellSize - style.marginRight - imageWidth);
+  }
+
+  return start;
+};
+
+var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle) {
+  var context = useMemo(function () {
+    return document.createElement('canvas').getContext('2d');
+  }, []);
+  var getAutoSizeWidth = useCallback(function (x) {
+    if (!context) return 0;
+    var maxWidth = 0;
+
+    for (var _iterator = _createForOfIteratorHelperLoose(rows), _step; !(_step = _iterator()).done;) {
+      var y = _step.value;
+      var cellContent = displayData(x, y);
+
+      if (cellContent != null) {
+        var style = cellStyle(x, y);
+        var finalStyle = resolveCellStyle(style, DEFAULT_CELL_STYLE);
+        context.fillStyle = finalStyle.color;
+        context.font = finalStyle.weight + ' ' + finalStyle.fontSize + 'px ' + finalStyle.fontFamily;
+
+        if (typeof cellContent === 'string' || typeof cellContent === 'number') {
+          var _context$measureText = context.measureText(cellContent.toString()),
+              width = _context$measureText.width;
+
+          maxWidth = Math.max(maxWidth, width + finalStyle.marginLeft + finalStyle.marginRight);
+        } else if (typeof cellContent === 'object') {
+          for (var _iterator2 = _createForOfIteratorHelperLoose(cellContent.items), _step2; !(_step2 = _iterator2()).done;) {
+            var obj = _step2.value;
+
+            if (typeof obj.content === 'string' || typeof obj.content === 'number') {
+              var _context$measureText2 = context.measureText(obj.content.toString()),
+                  _width = _context$measureText2.width;
+
+              maxWidth = Math.max(maxWidth, obj.x + _width);
+            }
+          }
+        }
+      }
+    }
+
+    return Math.ceil(maxWidth);
+  }, [context]);
+  return getAutoSizeWidth;
+};
+
 var useClipboardCopy = function useClipboardCopy(textAreaRef, selection, editMode, editData) {
   useLayoutEffect(function () {
     var textArea = textAreaRef.current;
@@ -2172,42 +2352,6 @@ var makeIntMap = function makeIntMap(initialSize) {
   };
 };
 
-var resolveSheetStyle = function resolveSheetStyle(sheetStyle) {
-  var _sheetStyle$shadowBlu, _sheetStyle$shadowOpa, _sheetStyle$shadowCol;
-
-  return {
-    freezeColumns: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeColumns) || 0,
-    freezeRows: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeRows) || 0,
-    hideColumnHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideColumnHeaders) || false,
-    hideRowHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideRowHeaders) || false,
-    hideGridlines: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideGridlines) || false,
-    hideScrollBars: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideScrollBars) || false,
-    columnHeaderHeight: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideColumnHeaders ? 1 : SIZES.headerHeight,
-    rowHeaderWidth: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideRowHeaders ? 1 : SIZES.headerWidth,
-    shadowBlur: (_sheetStyle$shadowBlu = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowBlur) != null ? _sheetStyle$shadowBlu : SIZES.shadowBlur,
-    shadowOpacity: (_sheetStyle$shadowOpa = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowOpacity) != null ? _sheetStyle$shadowOpa : SIZES.shadowOpacity,
-    shadowColor: (_sheetStyle$shadowCol = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowColor) != null ? _sheetStyle$shadowCol : COLORS.shadowColor
-  };
-};
-var resolveCellStyle = function resolveCellStyle(optionalStyle, defaultStyle) {
-  return _extends({}, defaultStyle, optionalStyle);
-};
-var applyAlignment = function applyAlignment(start, cellSize, style, imageWidth, alignment) {
-  if (alignment === void 0) {
-    alignment = style.textAlign;
-  }
-
-  if (alignment === 'left') {
-    return start + style.marginLeft;
-  } else if (alignment === 'center') {
-    return start + cellSize * 0.5 - imageWidth / 2;
-  } else if (alignment === 'right') {
-    return start + (cellSize - style.marginRight - imageWidth);
-  }
-
-  return start;
-};
-
 var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragIndices, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset) {
   var canvas = context.canvas;
   var width = canvas.width,
@@ -3003,6 +3147,23 @@ var Sheet = forwardRef(function (props, ref) {
     }
   }, [visibleCells, props.onScrollChange]);
 
+  var scrollToSelection = function scrollToSelection(selection, toHead) {
+    if (toHead === void 0) {
+      toHead = false;
+    }
+
+    var overlay = overlayRef.current;
+    if (!overlay) return;
+    var anchor = selection[0],
+        head = selection[1];
+    var view = [canvasWidth, canvasHeight];
+    var freeze = [freezeColumns, freezeRows];
+    scrollToCell(overlay, toHead ? head : anchor, view, freeze, dataOffset, maxScroll, cellLayout, function (dataOffset, maxScroll) {
+      setDataOffset(dataOffset);
+      setMaxScroll(maxScroll);
+    });
+  };
+
   var changeSelection = function changeSelection(newSelection, scrollTo, toHead) {
     if (scrollTo === void 0) {
       scrollTo = true;
@@ -3020,12 +3181,7 @@ var Sheet = forwardRef(function (props, ref) {
     if (!overlay) return;
 
     if (scrollTo) {
-      var anchor = newSelection[0],
-          head = newSelection[1];
-      scrollToCell(overlay, toHead ? head : anchor, [canvasWidth, canvasHeight], [freezeColumns, freezeRows], dataOffset, maxScroll, cellLayout, function (dataOffset, maxScroll) {
-        setDataOffset(dataOffset);
-        setMaxScroll(maxScroll);
-      });
+      scrollToSelection(newSelection, toHead);
     }
 
     if (props.onSelectionChanged) {
@@ -3080,13 +3236,23 @@ var Sheet = forwardRef(function (props, ref) {
     setLastEditKey(editKeys.apply(void 0, editCell));
   };
 
+  var _props$maxColumns = props.maxColumns,
+      maxColumns = _props$maxColumns === void 0 ? Infinity : _props$maxColumns,
+      _props$maxRows = props.maxRows,
+      maxRows = _props$maxRows === void 0 ? Infinity : _props$maxRows;
+  useLayoutEffect(function () {
+    var view = [canvasWidth, canvasHeight];
+    var freeze = [freezeColumns, freezeRows];
+    setDataOffset(clipDataOffset(view, dataOffset, freeze, [maxColumns, maxRows], cellLayout));
+  }, [maxRows, maxColumns]);
   var hitmapRef = useRef(NO_CLICKABLES);
   var textAreaRef = useRef(null);
   useClipboardCopy(textAreaRef, selection, editMode, editData);
   useClipboardPaste(textAreaRef, selection, changeSelection, props.onChange, cellReadOnly);
   var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll);
+  var getAutoSizeWidth = useAutoSizeColumn(visibleCells.rows, displayData, cellStyle);
 
-  var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, setDropTarget, changeSelection, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onCellWidthChange, props.onCellHeightChange, props.onRightClick, props.dontCommitEditOnSelectionChange, props.dontChangeSelectionOnOrderChange),
+  var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, setDropTarget, changeSelection, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onCellWidthChange, props.onCellHeightChange, props.onRightClick, props.dontCommitEditOnSelectionChange, props.dontChangeSelectionOnOrderChange),
       mouseHandlers = _useMouse.mouseHandlers,
       knobPosition = _useMouse.knobPosition;