index.js 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import { __read } from "tslib";
  2. import { getItemsBBox } from '../utils';
  3. import { BBox } from '../../bbox';
  4. export var flex = function (container, children, config) {
  5. var width = container.width, height = container.height;
  6. var _a = config.flexDirection, flexDirection = _a === void 0 ? 'row' : _a, _b = config.flexWrap, flexWrap = _b === void 0 ? 'nowrap' : _b, _c = config.justifyContent, justifyContent = _c === void 0 ? 'flex-start' : _c, _d = config.alignContent, alignContent = _d === void 0 ? 'flex-start' : _d, _e = config.alignItems, alignItems = _e === void 0 ? 'flex-start' : _e;
  7. var isHorizontalFlow = flexDirection === 'row'; // || flexDirection === 'row-reverse';
  8. var isLeftToRightFlow = flexDirection === 'row' || flexDirection === 'column';
  9. // implement default layout;
  10. // flex direction
  11. var direction = isHorizontalFlow ? (isLeftToRightFlow ? [1, 0] : [-1, 0]) : isLeftToRightFlow ? [0, 1] : [0, -1];
  12. var _f = __read([0, 0], 2), offsetX = _f[0], offsetY = _f[1];
  13. var itemsFromDirection = children.map(function (child) {
  14. var _a;
  15. var width = child.width, height = child.height;
  16. var _b = __read([offsetX, offsetY], 2), x = _b[0], y = _b[1];
  17. _a = __read([offsetX + width * direction[0], offsetY + height * direction[1]], 2), offsetX = _a[0], offsetY = _a[1];
  18. return new BBox(x, y, width, height);
  19. });
  20. // flex wrap
  21. // todo
  22. // justify content
  23. // flex-start, flex-end, center
  24. var itemsForJustifyContentBBox = getItemsBBox(itemsFromDirection);
  25. var justifyContentOffset = {
  26. 'flex-start': 0,
  27. 'flex-end': isHorizontalFlow
  28. ? width - itemsForJustifyContentBBox.width
  29. : height - itemsForJustifyContentBBox.height,
  30. center: isHorizontalFlow
  31. ? (width - itemsForJustifyContentBBox.width) / 2
  32. : (height - itemsForJustifyContentBBox.height) / 2,
  33. };
  34. var itemsFromJustifyContent = itemsFromDirection.map(function (item) {
  35. var x = item.x, y = item.y;
  36. var itemBox = BBox.fromRect(item);
  37. itemBox.x = isHorizontalFlow ? x + justifyContentOffset[justifyContent] : x;
  38. itemBox.y = isHorizontalFlow ? y : y + justifyContentOffset[justifyContent];
  39. return itemBox;
  40. });
  41. // align items
  42. // flex-start, flex-end, center
  43. var itemsForAlignItemsBBox = getItemsBBox(itemsFromJustifyContent);
  44. var calcAlignItemsOffset = function (box) {
  45. var _a = __read(isHorizontalFlow ? ['height', height] : ['width', width], 2), key = _a[0], size = _a[1];
  46. switch (alignItems) {
  47. case 'flex-start':
  48. return 0;
  49. case 'flex-end':
  50. return size - box[key];
  51. case 'center':
  52. return size / 2 - box[key] / 2;
  53. default:
  54. return 0;
  55. }
  56. };
  57. var itemsFromAlignItems = itemsFromJustifyContent.map(function (item) {
  58. var x = item.x, y = item.y;
  59. var itemBox = BBox.fromRect(item);
  60. itemBox.x = isHorizontalFlow ? x : x + calcAlignItemsOffset(itemBox);
  61. itemBox.y = isHorizontalFlow ? y + calcAlignItemsOffset(itemBox) : y;
  62. return itemBox;
  63. });
  64. var finalItems = itemsFromAlignItems.map(function (item) {
  65. var _a, _b;
  66. var itemBox = BBox.fromRect(item);
  67. itemBox.x += (_a = container.x) !== null && _a !== void 0 ? _a : 0;
  68. itemBox.y += (_b = container.y) !== null && _b !== void 0 ? _b : 0;
  69. return itemBox;
  70. });
  71. return finalItems;
  72. };
  73. //# sourceMappingURL=index.js.map