@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/index.js

@@ -0,0 +1,209 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "addContainerLeftRightPadding", {
+  enumerable: true,
+  get: function get() {
+    return _columnState.addContainerLeftRightPadding;
+  }
+});
+Object.defineProperty(exports, "adjustColumnsWidths", {
+  enumerable: true,
+  get: function get() {
+    return _resizeState.adjustColumnsWidths;
+  }
+});
+Object.defineProperty(exports, "areColumnsEven", {
+  enumerable: true,
+  get: function get() {
+    return _resizeState.areColumnsEven;
+  }
+});
+Object.defineProperty(exports, "bulkColumnsResize", {
+  enumerable: true,
+  get: function get() {
+    return _resizeState.bulkColumnsResize;
+  }
+});
+Object.defineProperty(exports, "calculateColumnWidth", {
+  enumerable: true,
+  get: function get() {
+    return _columnState.calculateColumnWidth;
+  }
+});
+Object.defineProperty(exports, "contentWidth", {
+  enumerable: true,
+  get: function get() {
+    return _contentWidth.contentWidth;
+  }
+});
+Object.defineProperty(exports, "currentColWidth", {
+  enumerable: true,
+  get: function get() {
+    return _misc.currentColWidth;
+  }
+});
+Object.defineProperty(exports, "domCellAround", {
+  enumerable: true,
+  get: function get() {
+    return _misc.domCellAround;
+  }
+});
+Object.defineProperty(exports, "evenAllColumnsWidths", {
+  enumerable: true,
+  get: function get() {
+    return _resizeState.evenAllColumnsWidths;
+  }
+});
+Object.defineProperty(exports, "generateColgroup", {
+  enumerable: true,
+  get: function get() {
+    return _colgroup.generateColgroup;
+  }
+});
+Object.defineProperty(exports, "getCellsRefsInColumn", {
+  enumerable: true,
+  get: function get() {
+    return _columnState.getCellsRefsInColumn;
+  }
+});
+Object.defineProperty(exports, "getColumnStateFromDOM", {
+  enumerable: true,
+  get: function get() {
+    return _columnState.getColumnStateFromDOM;
+  }
+});
+Object.defineProperty(exports, "getDefaultLayoutMaxWidth", {
+  enumerable: true,
+  get: function get() {
+    return _misc.getDefaultLayoutMaxWidth;
+  }
+});
+Object.defineProperty(exports, "getFreeSpace", {
+  enumerable: true,
+  get: function get() {
+    return _columnState.getFreeSpace;
+  }
+});
+Object.defineProperty(exports, "getLayoutSize", {
+  enumerable: true,
+  get: function get() {
+    return _misc.getLayoutSize;
+  }
+});
+Object.defineProperty(exports, "getResizeCellPos", {
+  enumerable: true,
+  get: function get() {
+    return _dom.getResizeCellPos;
+  }
+});
+Object.defineProperty(exports, "getResizeState", {
+  enumerable: true,
+  get: function get() {
+    return _resizeState.getResizeState;
+  }
+});
+Object.defineProperty(exports, "getTotalWidth", {
+  enumerable: true,
+  get: function get() {
+    return _resizeState.getTotalWidth;
+  }
+});
+Object.defineProperty(exports, "growColumn", {
+  enumerable: true,
+  get: function get() {
+    return _resizeLogic.growColumn;
+  }
+});
+Object.defineProperty(exports, "hasTableBeenResized", {
+  enumerable: true,
+  get: function get() {
+    return _colgroup.hasTableBeenResized;
+  }
+});
+Object.defineProperty(exports, "insertColgroupFromNode", {
+  enumerable: true,
+  get: function get() {
+    return _colgroup.insertColgroupFromNode;
+  }
+});
+Object.defineProperty(exports, "isClickNear", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isClickNear;
+  }
+});
+Object.defineProperty(exports, "pointsAtCell", {
+  enumerable: true,
+  get: function get() {
+    return _misc.pointsAtCell;
+  }
+});
+Object.defineProperty(exports, "reduceSpace", {
+  enumerable: true,
+  get: function get() {
+    return _resizeLogic.reduceSpace;
+  }
+});
+Object.defineProperty(exports, "resizeColumn", {
+  enumerable: true,
+  get: function get() {
+    return _resizeColumn.resizeColumn;
+  }
+});
+Object.defineProperty(exports, "scale", {
+  enumerable: true,
+  get: function get() {
+    return _scaleTable.scale;
+  }
+});
+Object.defineProperty(exports, "scaleWithParent", {
+  enumerable: true,
+  get: function get() {
+    return _scaleTable.scaleWithParent;
+  }
+});
+Object.defineProperty(exports, "shrinkColumn", {
+  enumerable: true,
+  get: function get() {
+    return _resizeLogic.shrinkColumn;
+  }
+});
+Object.defineProperty(exports, "tableLayoutToSize", {
+  enumerable: true,
+  get: function get() {
+    return _misc.tableLayoutToSize;
+  }
+});
+Object.defineProperty(exports, "updateColgroup", {
+  enumerable: true,
+  get: function get() {
+    return _resizeState.updateColgroup;
+  }
+});
+Object.defineProperty(exports, "updateControls", {
+  enumerable: true,
+  get: function get() {
+    return _dom.updateControls;
+  }
+});
+
+var _colgroup = require("./colgroup");
+
+var _contentWidth = require("./content-width");
+
+var _columnState = require("./column-state");
+
+var _resizeLogic = require("./resize-logic");
+
+var _resizeState = require("./resize-state");
+
+var _misc = require("./misc");
+
+var _dom = require("./dom");
+
+var _scaleTable = require("./scale-table");
+
+var _resizeColumn = require("./resize-column");

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/misc.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.currentColWidth = currentColWidth;
+exports.domCellAround = domCellAround;
+exports.getDefaultLayoutMaxWidth = getDefaultLayoutMaxWidth;
+exports.getLayoutSize = getLayoutSize;
+exports.getTableMaxWidth = void 0;
+exports.pointsAtCell = pointsAtCell;
+exports.tableLayoutToSize = void 0;
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _ui = require("@atlaskit/editor-common/ui");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
+
+var tableLayoutToSize = {
+  default: _editorSharedStyles.akEditorDefaultLayoutWidth,
+  wide: _editorSharedStyles.akEditorWideLayoutWidth,
+  'full-width': _editorSharedStyles.akEditorFullWidthLayoutWidth
+}; // Translates named layouts in number values.
+
+exports.tableLayoutToSize = tableLayoutToSize;
+
+function getLayoutSize(tableLayout) {
+  var containerWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var options = arguments.length > 2 ? arguments[2] : undefined;
+  var isFullWidthModeEnabled = options.isFullWidthModeEnabled;
+
+  if (isFullWidthModeEnabled) {
+    return containerWidth ? Math.min(containerWidth - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+  }
+
+  var calculatedTableWidth = (0, _styles.calcTableWidth)(tableLayout, containerWidth, true);
+
+  if (calculatedTableWidth.endsWith('px')) {
+    return parseInt(calculatedTableWidth, 10);
+  }
+
+  if (tableLayout === 'default') {
+    return getDefaultLayoutMaxWidth(containerWidth);
+  }
+
+  return tableLayoutToSize[tableLayout] || containerWidth;
+}
+
+function getDefaultLayoutMaxWidth(containerWidth) {
+  return (0, _ui.mapBreakpointToLayoutMaxWidth)((0, _ui.getBreakpoint)(containerWidth));
+} // Does the current position point at a cell.
+
+
+function pointsAtCell($pos) {
+  return $pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter;
+} // Get the current col width, handles colspan.
+
+
+function currentColWidth(view, cellPos, _ref) {
+  var colspan = _ref.colspan,
+      colwidth = _ref.colwidth;
+  var width = colwidth && colwidth[colwidth.length - 1];
+
+  if (width) {
+    return width;
+  } // Not fixed, read current width from DOM
+
+
+  var domWidth = view.domAtPos(cellPos + 1).node.offsetWidth;
+  var parts = colspan || 0;
+
+  if (colwidth) {
+    for (var i = 0; i < (colspan || 0); i++) {
+      if (colwidth[i]) {
+        domWidth -= colwidth[i];
+        parts--;
+      }
+    }
+  }
+
+  return domWidth / parts;
+} // Attempts to find a parent TD/TH depending on target element.
+
+
+function domCellAround(target) {
+  while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
+    target = (0, _utils.containsClassName)(target, 'ProseMirror') ? null : target.parentNode;
+  }
+
+  return target;
+}
+
+var getTableMaxWidth = function getTableMaxWidth(_ref2) {
+  var table = _ref2.table,
+      tableStart = _ref2.tableStart,
+      state = _ref2.state,
+      layout = _ref2.layout,
+      getEditorContainerWidth = _ref2.getEditorContainerWidth;
+  var containerWidth = getEditorContainerWidth();
+  var parentWidth = (0, _nodeWidth.getParentNodeWidth)(tableStart, state, containerWidth);
+  var maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
+
+  if (table.attrs.isNumberColumnEnabled) {
+    maxWidth -= _editorSharedStyles.akEditorTableNumberColumnWidth;
+  }
+
+  return maxWidth;
+};
+
+exports.getTableMaxWidth = getTableMaxWidth;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/resize-column.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizeColumn = void 0;
+
+var _resizeLogic = require("./resize-logic");
+
+var _resizeState = require("./resize-state");
+
+// Resize a given column by an amount from the current state
+var resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, selectedColumns) {
+  var newState = amount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, amount, selectedColumns) : amount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, amount, selectedColumns) : resizeState;
+  (0, _resizeState.updateColgroup)(newState, tableRef);
+  return newState;
+};
+
+exports.resizeColumn = resizeColumn;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/resize-logic.js

@@ -0,0 +1,279 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.growColumn = void 0;
+exports.reduceSpace = reduceSpace;
+exports.shrinkColumn = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _columnState = require("./column-state");
+
+var _resizeState = require("./resize-state");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var growColumn = function growColumn(state, colIndex, amount, selectedColumns) {
+  // can't grow the last column
+  if (!state.cols[colIndex + 1]) {
+    return state;
+  }
+
+  var res = moveSpaceFrom(state, colIndex + 1, colIndex, amount);
+  var remaining = amount - res.amount;
+  var newState = res.state;
+
+  if (remaining > 0) {
+    newState = stackSpace(newState, colIndex, remaining).state;
+  }
+
+  if (selectedColumns) {
+    return (0, _resizeState.bulkColumnsResize)(newState, selectedColumns, colIndex);
+  }
+
+  return newState;
+};
+
+exports.growColumn = growColumn;
+
+var shrinkColumn = function shrinkColumn(state, colIndex, amount, selectedColumns) {
+  // try to shrink dragging column by giving from the column to the right first
+  var res = moveSpaceFrom(state, colIndex, colIndex + 1, -amount);
+  var newState = res.state;
+  var isOverflownTable = (0, _resizeState.getTotalWidth)(newState) > newState.maxSize;
+  var isLastColumn = !newState.cols[colIndex + 1]; // stop resizing the last column once table is not overflown
+
+  if (isLastColumn && !isOverflownTable) {
+    return newState;
+  }
+
+  var remaining = amount + res.amount;
+
+  if (remaining < 0) {
+    newState = stackSpace(newState, colIndex + 1, remaining).state;
+  }
+
+  if (selectedColumns) {
+    return (0, _resizeState.bulkColumnsResize)(newState, selectedColumns, colIndex);
+  }
+
+  return newState;
+};
+
+exports.shrinkColumn = shrinkColumn;
+
+function reduceSpace(state, amount) {
+  var ignoreCols = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var remaining = amount; // keep trying to resolve resize request until we run out of free space,
+  // or nothing to resize
+
+  var _loop = function _loop() {
+    // filter candidates only with free space
+    var candidates = state.cols.filter(function (column) {
+      return (0, _columnState.getFreeSpace)(column) && ignoreCols.indexOf(column.index) === -1;
+    });
+
+    if (candidates.length === 0) {
+      return "break";
+    }
+
+    var requestedResize = Math.floor(remaining / candidates.length);
+
+    if (requestedResize === 0) {
+      return "break";
+    }
+
+    candidates.forEach(function (candidate) {
+      var newWidth = candidate.width - requestedResize;
+
+      if (newWidth < candidate.minWidth) {
+        // If the new requested width is less than our min
+        // Calc what width we didn't use, we'll try extract that
+        // from other cols.
+        var remainder = candidate.minWidth - newWidth;
+        newWidth = candidate.minWidth;
+        remaining = remaining - requestedResize + remainder;
+      } else {
+        remaining -= requestedResize;
+      }
+
+      state = _objectSpread(_objectSpread({}, state), {}, {
+        cols: [].concat((0, _toConsumableArray2.default)(state.cols.slice(0, candidate.index)), [_objectSpread(_objectSpread({}, candidate), {}, {
+          width: newWidth
+        })], (0, _toConsumableArray2.default)(state.cols.slice(candidate.index + 1)))
+      });
+    });
+  };
+
+  while (remaining > 0) {
+    var _ret = _loop();
+
+    if (_ret === "break") break;
+  }
+
+  return state;
+}
+
+var ColType; // TODO: should handle when destIdx:
+// - is beyond the range, and then not give it back
+
+(function (ColType) {
+  ColType["SOURCE"] = "src";
+  ColType["DEST"] = "dest";
+})(ColType || (ColType = {}));
+
+function moveSpaceFrom(state, srcIdx, destIdx, amount) {
+  var useFreeSpace = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  var srcCol = state.cols[srcIdx];
+  var destCol = state.cols[destIdx];
+
+  if (useFreeSpace) {
+    var freeSpace = (0, _columnState.getFreeSpace)(srcCol); // if taking more than source column's free space, only take that much
+
+    if (amountFor(ColType.DEST)(amount) > freeSpace) {
+      amount = amount > 0 ? freeSpace : -freeSpace;
+    }
+  } // if the source column shrinks past its min size, don't give the space away
+
+
+  if (amountFor(ColType.SOURCE)(amount) < 0 && widthFor(ColType.SOURCE)(amount, srcCol, destCol) < srcCol.minWidth) {
+    amount = srcCol.width - srcCol.minWidth;
+  }
+
+  var newDest = destCol ? _objectSpread(_objectSpread({}, destCol), {}, {
+    width: widthFor(ColType.DEST)(amount, srcCol, destCol)
+  }) : undefined;
+
+  if (!newDest && amountFor(ColType.SOURCE)(amount) < 0) {
+    // non-zero-sum game, ensure that we're not removing more than the total table width either
+    var totalWidth = (0, _resizeState.getTotalWidth)(state);
+
+    if (totalWidth - srcCol.width + widthFor(ColType.SOURCE)(amount, srcCol, destCol) < state.maxSize) {
+      // would shrink table below max width, stop it
+      amount = state.maxSize - (totalWidth - srcCol.width) - srcCol.width - 1;
+    }
+  }
+
+  var newSrc = _objectSpread(_objectSpread({}, srcCol), {}, {
+    width: widthFor(ColType.SOURCE)(amount, srcCol, destCol)
+  });
+
+  var newCols = state.cols.map(function (existingCol, idx) {
+    return idx === srcIdx ? newSrc : idx === destIdx ? newDest : existingCol;
+  }).filter(Boolean);
+  return {
+    state: _objectSpread(_objectSpread({}, state), {}, {
+      cols: newCols
+    }),
+    amount: amount
+  };
+}
+
+function stackSpace(state, destIdx, amount) {
+  var candidates = getCandidates(state, destIdx, amount);
+
+  var _loop2 = function _loop2() {
+    // search for most (or least) free space in candidates
+    var candidateIdx = findNextFreeColumn(candidates, amount);
+
+    if (candidateIdx === -1) {
+      // stack to the right -> growing the dragging column and go overflow
+      if (amount > 0) {
+        return {
+          v: {
+            state: _objectSpread(_objectSpread({}, state), {}, {
+              cols: [].concat((0, _toConsumableArray2.default)(state.cols.slice(0, destIdx)), [_objectSpread(_objectSpread({}, state.cols[destIdx]), {}, {
+                width: state.cols[destIdx].width + amount
+              })], (0, _toConsumableArray2.default)(state.cols.slice(destIdx + 1)))
+            }),
+            remaining: amount
+          }
+        };
+      } // stacking to the left, if no free space remains
+
+
+      return "break";
+    }
+
+    var column = candidates.find(function (col) {
+      return col.index === candidateIdx;
+    });
+
+    if (!column || (0, _columnState.getFreeSpace)(column) <= 0) {
+      // no more columns with free space remain
+      return "break";
+    }
+
+    var res = moveSpaceFrom(state, column.index, destIdx, amount);
+    state = res.state;
+    amount -= res.amount;
+    candidates = candidates.filter(function (col) {
+      return col.index !== candidateIdx;
+    });
+  };
+
+  while (candidates.length && amount) {
+    var _ret2 = _loop2();
+
+    if (_ret2 === "break") break;
+    if ((0, _typeof2.default)(_ret2) === "object") return _ret2.v;
+  }
+
+  return {
+    state: state,
+    remaining: amount
+  };
+}
+
+function findNextFreeColumn(columns, amount) {
+  if (columns.length === 0) {
+    return -1;
+  }
+
+  var direction = amount < 0 ? 'left' : 'right';
+
+  if (direction === 'left') {
+    columns = columns.slice().reverse();
+  }
+
+  var freeIndex = -1;
+  columns.forEach(function (column) {
+    if ((0, _columnState.getFreeSpace)(column) && freeIndex === -1) {
+      freeIndex = column.index;
+    }
+  });
+
+  if (freeIndex === -1) {
+    return -1;
+  }
+
+  return freeIndex;
+}
+
+function amountFor(colType) {
+  return function (amount) {
+    return colType === ColType.SOURCE ? amount > 0 ? -amount : amount : amount < 0 ? -amount : amount;
+  };
+}
+
+function widthFor(colType) {
+  return function (amount, srcCol, destCol) {
+    return (colType === ColType.SOURCE ? srcCol : destCol).width + amountFor(colType)(amount);
+  };
+}
+
+function getCandidates(state, destIdx, amount) {
+  var candidates = state.cols; // only consider rows after the selected column in the direction of resize
+
+  return amount < 0 ? candidates.slice(0, destIdx) : candidates.slice(destIdx + 1);
+}