@sanity/desk-tool
Version:
Tool for managing all sorts of content in a structured manner
252 lines (239 loc) • 11.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createPaneLayoutController = createPaneLayoutController;
var _constants = require("./constants");
var _helpers = require("./helpers");
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
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) { _defineProperty(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; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function createPaneLayoutController() {
var observers = [];
var elements = [];
var optionsMap = new WeakMap();
var userCollapsedElementSet = new Set();
var cache = {};
// Mutable internal state
var rootElement = null;
var rootWidth = 0;
var expandedElement = null;
var resizeDataMap = new Map();
var resizing = false;
function collapse(element) {
userCollapsedElementSet.add(element);
if (expandedElement === element) {
expandedElement = null;
}
_notifyObservers();
}
function expand(element) {
userCollapsedElementSet.delete(element);
expandedElement = element;
_notifyObservers();
}
function mount(element, options) {
optionsMap.set(element, _objectSpread(_objectSpread({}, options), {}, {
original: options
}));
elements.push(element);
if (rootElement) {
(0, _helpers._sortElements)(rootElement, elements);
}
expand(element);
return () => {
var idx = elements.indexOf(element);
if (idx > -1) {
elements.splice(idx, 1);
}
optionsMap.delete(element);
_notifyObservers();
};
}
// eslint-disable-next-line complexity
function resize(type, leftElement, deltaX) {
var leftIndex = elements.indexOf(leftElement);
var leftOptions = optionsMap.get(leftElement);
if (!leftOptions) return;
var rightElement = elements[leftIndex + 1];
var rightOptions = optionsMap.get(rightElement);
if (!rightOptions) return;
if (type === 'start') {
resizing = true;
cache.left = {
element: leftElement,
flex: leftOptions.flex || 1,
width: leftElement.offsetWidth
};
cache.right = {
element: rightElement,
flex: rightOptions.flex || 1,
width: rightElement.offsetWidth
};
_notifyObservers();
}
if (type === 'move' && cache.left && cache.right) {
resizeDataMap = new Map();
var _calcPaneResize2 = (0, _helpers._calcPaneResize)(cache, leftOptions, rightOptions, deltaX),
leftW = _calcPaneResize2.leftW,
rightW = _calcPaneResize2.rightW,
leftFlex = _calcPaneResize2.leftFlex,
rightFlex = _calcPaneResize2.rightFlex;
// update resize cache
resizeDataMap.set(leftElement, {
flex: leftFlex,
width: leftW
});
resizeDataMap.set(rightElement, {
flex: rightFlex,
width: rightW
});
_notifyObservers();
}
if (type === 'end') {
var _leftOptions$maxWidth, _leftResizeData$flex, _leftOptions$maxWidth2, _rightResizeData$flex;
resizing = false;
var leftResizeData = resizeDataMap.get(leftElement);
var rightResizeData = resizeDataMap.get(rightElement);
// Update left options
optionsMap.set(leftElement, _objectSpread(_objectSpread({}, leftOptions), {}, {
currentMinWidth: 0,
currentMaxWidth: (_leftOptions$maxWidth = leftOptions.maxWidth) !== null && _leftOptions$maxWidth !== void 0 ? _leftOptions$maxWidth : Infinity,
flex: (_leftResizeData$flex = leftResizeData === null || leftResizeData === void 0 ? void 0 : leftResizeData.flex) !== null && _leftResizeData$flex !== void 0 ? _leftResizeData$flex : leftOptions.flex
}));
// Update right options
optionsMap.set(rightElement, _objectSpread(_objectSpread({}, rightOptions), {}, {
currentMinWidth: 0,
currentMaxWidth: (_leftOptions$maxWidth2 = leftOptions.maxWidth) !== null && _leftOptions$maxWidth2 !== void 0 ? _leftOptions$maxWidth2 : Infinity,
flex: (_rightResizeData$flex = rightResizeData === null || rightResizeData === void 0 ? void 0 : rightResizeData.flex) !== null && _rightResizeData$flex !== void 0 ? _rightResizeData$flex : rightOptions.flex
}));
// Reset resize data map
resizeDataMap = new Map();
// Reset cache
delete cache.left;
delete cache.right;
_notifyObservers();
}
}
function setRootElement(nextRootElement) {
rootElement = nextRootElement;
}
function setRootWidth(nextRootWidth) {
rootWidth = nextRootWidth;
_notifyObservers();
}
function subscribe(observer) {
observers.push(observer);
return () => {
var idx = observers.push(observer);
if (idx > -1) {
observers.splice(idx, 1);
}
};
}
return {
collapse,
expand,
mount,
resize,
setRootElement,
setRootWidth,
subscribe
};
// eslint-disable-next-line complexity
function _notifyObservers() {
if (!rootWidth) return;
// Create a reversed array of pane elements, so we can loop over them backwards.
// Place the expanded element first (so it has the least chance of being collapsed).
var _elements = [];
var _iterator = _createForOfIteratorHelper(elements),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var _element2 = _step.value;
if (_element2 !== expandedElement) {
_elements.unshift(_element2);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
if (expandedElement) {
_elements.unshift(expandedElement);
}
var dataMap = new WeakMap();
var len = _elements.length;
var lastElement = _elements[0];
var collapsedWidth = (len - 1) * _constants.PANE_COLLAPSED_WIDTH;
var remaingWidth = rootWidth - collapsedWidth;
for (var _i = 0, _elements2 = _elements; _i < _elements2.length; _i++) {
var _resizeData$width, _resizeData$width2, _ref, _resizeData$flex;
var _element = _elements2[_i];
var _options = optionsMap.get(_element);
if (!_options) {
continue;
}
var minWidth = _options.currentMinWidth || _options.minWidth || _constants.PANE_DEFAULT_MIN_WIDTH;
var isLast = _element === lastElement;
// A pane is collapsed if:
// - it’s explictly collapsed by the user
var userCollapsed = userCollapsedElementSet.has(_element);
// - it’s minimum width is larger than the remaining width
var sizeCollapsed = minWidth > remaingWidth;
// - if the element is not the last (expanded pane)
var collapsed = isLast ? false : userCollapsed || sizeCollapsed;
var resizeData = resizeDataMap.get(_element);
// Collect pane data
dataMap.set(_element, {
element: _element,
collapsed: collapsed,
currentMinWidth: (_resizeData$width = resizeData === null || resizeData === void 0 ? void 0 : resizeData.width) !== null && _resizeData$width !== void 0 ? _resizeData$width : _options.currentMinWidth,
currentMaxWidth: (_resizeData$width2 = resizeData === null || resizeData === void 0 ? void 0 : resizeData.width) !== null && _resizeData$width2 !== void 0 ? _resizeData$width2 : _options.currentMaxWidth,
flex: (_ref = (_resizeData$flex = resizeData === null || resizeData === void 0 ? void 0 : resizeData.flex) !== null && _resizeData$flex !== void 0 ? _resizeData$flex : _options.flex) !== null && _ref !== void 0 ? _ref : 1
});
// Update remaining width
if (collapsed) {
remaingWidth -= _constants.PANE_COLLAPSED_WIDTH;
} else {
remaingWidth -= minWidth - _constants.PANE_COLLAPSED_WIDTH;
}
}
var panes = [];
var _iterator2 = _createForOfIteratorHelper(elements),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var _element3 = _step2.value;
var data = dataMap.get(_element3);
if (data) panes.push(data);
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
var _iterator3 = _createForOfIteratorHelper(observers),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var _observer = _step3.value;
_observer({
expandedElement: expandedElement || elements[elements.length - 1] || null,
panes,
resizing
});
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
}
}