@atlaskit/editor-common/dist/cjs/resizer/useBreakoutGuidelines.js

A package that contains common classes and components for editor and renderer

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SNAP_GAP = void 0;
exports.useBreakoutGuidelines = useBreakoutGuidelines;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var SNAP_GAP = exports.SNAP_GAP = 8;
var GUIDELINE_KEYS = {
  lineLength: 'grid',
  wide: 'wide',
  fullWidth: 'full_width'
};
var CURRENT_LAYOUT_KEYS = {
  lineLength: 'center',
  wide: 'wide',
  fullWidth: 'full-width'
};
var roundToNearest = function roundToNearest(value) {
  var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
  return Math.round(value / interval) * interval;
};
function useBreakoutGuidelines(getEditorWidth, isResizing) {
  var dynamicFullWidthGuidelineOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  var widthState = getEditorWidth();
  var _useMemo = (0, _react.useMemo)(function () {
      if (!isResizing) {
        return {};
      }
      var _ref = widthState || {},
        width = _ref.width,
        lineLength = _ref.lineLength;
      var wideCalWithRatio = lineLength ? Math.round(lineLength * _editorSharedStyles.breakoutWideScaleRatio) : undefined;
      // When page is full width, lineLength from widthState can be much wider than 760.
      // But the lineLength variable here is being used like a const 760.
      // when the page is full width, the calculation of wide is wrong.
      // Actuall the wide is the wide breakout point, which is
      var wide = (0, _experiments.editorExperiment)('single_column_layouts', true) ? _editorSharedStyles.akEditorCalculatedWideLayoutWidth : wideCalWithRatio;
      var padding = width && width <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
        exposure: true
      }) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
      var layoutCalculatedWidth = width ? width - (padding + dynamicFullWidthGuidelineOffset) * 2 : undefined;
      var fullWidth = width && layoutCalculatedWidth ? Math.min(layoutCalculatedWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth) : undefined;
      return {
        wide: wide,
        fullWidth: fullWidth,
        // When page is full width, lineLength from widthState can be much wider than 760.
        // But the lineLength variable here is being used like a const 760.
        lineLength: (0, _experiments.editorExperiment)('single_column_layouts', true) ? _editorSharedStyles.akEditorDefaultLayoutWidth : lineLength
      };
    }, [widthState, isResizing, dynamicFullWidthGuidelineOffset]),
    lineLength = _useMemo.lineLength,
    wide = _useMemo.wide,
    fullWidth = _useMemo.fullWidth;

  // calculate snapping width
  var defaultSnappingWidths = (0, _react.useMemo)(function () {
    if (!fullWidth || !wide || !lineLength || fullWidth <= ((0, _experiments.editorExperiment)('single_column_layouts', true) ? _editorSharedStyles.akEditorDefaultLayoutWidth : lineLength)) {
      return null;
    }
    if (fullWidth - wide > SNAP_GAP) {
      return {
        lineLength: lineLength,
        wide: wide,
        fullWidth: fullWidth
      };
    }
    if (fullWidth <= wide && fullWidth - lineLength > SNAP_GAP) {
      return {
        lineLength: lineLength,
        fullWidth: fullWidth
      };
    }
    return null;
  }, [fullWidth, lineLength, wide]);
  var snaps = (0, _react.useMemo)(function () {
    if (!isResizing || !defaultSnappingWidths) {
      return null;
    }
    return {
      x: Object.values(defaultSnappingWidths)
    };
  }, [defaultSnappingWidths, isResizing]);

  // calculate guidelines, and calculate which lines are active
  var _useState = (0, _react.useState)(null),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    currentLayout = _useState2[0],
    setCurrentLayout = _useState2[1];
  var guidelines = (0, _react.useMemo)(function () {
    var guidelines = [];
    if (!defaultSnappingWidths) {
      return guidelines;
    }
    Object.entries(defaultSnappingWidths).map(function (_ref2) {
      var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
        key = _ref3[0],
        value = _ref3[1];
      if (value) {
        guidelines.push({
          key: "".concat(GUIDELINE_KEYS[key], "_left"),
          position: {
            x: -roundToNearest(value / 2)
          },
          active: currentLayout === CURRENT_LAYOUT_KEYS[key]
        });
        guidelines.push({
          key: "".concat(GUIDELINE_KEYS[key], "_right"),
          position: {
            x: roundToNearest(value / 2)
          },
          active: currentLayout === CURRENT_LAYOUT_KEYS[key]
        });
      }
    });
    return guidelines;
  }, [defaultSnappingWidths, currentLayout]);
  var setCurrentWidth = (0, _react.useCallback)(function (newWidth) {
    if (typeof newWidth !== 'number') {
      setCurrentLayout(null);
      return;
    }
    if (lineLength && Math.abs(newWidth - lineLength) < SNAP_GAP / 2) {
      setCurrentLayout('center');
    } else if (wide && Math.abs(newWidth - wide) < SNAP_GAP / 2) {
      setCurrentLayout('wide');
    } else if (fullWidth && (
    // we only allow snap from one side, so we don't use Math.abs here
    fullWidth + _editorSharedStyles.akEditorGutterPadding - newWidth < SNAP_GAP / 2 || newWidth >= fullWidth)) {
      setCurrentLayout('full-width');
    } else {
      setCurrentLayout(null);
    }
  }, [lineLength, wide, fullWidth]);
  return {
    snaps: snaps,
    currentLayout: currentLayout,
    guidelines: guidelines,
    setCurrentWidth: setCurrentWidth
  };
}