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

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useCallback, useMemo, useState } from 'react';
import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
export var 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;
};
export function useBreakoutGuidelines(getEditorWidth, isResizing) {
  var dynamicFullWidthGuidelineOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  var widthState = getEditorWidth();
  var _useMemo = useMemo(function () {
      if (!isResizing) {
        return {};
      }
      var _ref = widthState || {},
        width = _ref.width,
        lineLength = _ref.lineLength;
      var wideCalWithRatio = lineLength ? Math.round(lineLength * 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 = editorExperiment('single_column_layouts', true) ? akEditorCalculatedWideLayoutWidth : wideCalWithRatio;
      var padding = width && width <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
        exposure: true
      }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
      var layoutCalculatedWidth = width ? width - (padding + dynamicFullWidthGuidelineOffset) * 2 : undefined;
      var fullWidth = width && layoutCalculatedWidth ? Math.min(layoutCalculatedWidth, 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: editorExperiment('single_column_layouts', true) ? akEditorDefaultLayoutWidth : lineLength
      };
    }, [widthState, isResizing, dynamicFullWidthGuidelineOffset]),
    lineLength = _useMemo.lineLength,
    wide = _useMemo.wide,
    fullWidth = _useMemo.fullWidth;

  // calculate snapping width
  var defaultSnappingWidths = useMemo(function () {
    if (!fullWidth || !wide || !lineLength || fullWidth <= (editorExperiment('single_column_layouts', true) ? 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 = useMemo(function () {
    if (!isResizing || !defaultSnappingWidths) {
      return null;
    }
    return {
      x: Object.values(defaultSnappingWidths)
    };
  }, [defaultSnappingWidths, isResizing]);

  // calculate guidelines, and calculate which lines are active
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    currentLayout = _useState2[0],
    setCurrentLayout = _useState2[1];
  var guidelines = useMemo(function () {
    var guidelines = [];
    if (!defaultSnappingWidths) {
      return guidelines;
    }
    Object.entries(defaultSnappingWidths).map(function (_ref2) {
      var _ref3 = _slicedToArray(_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 = 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 + 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
  };
}