@atlaskit/editor-common/dist/cjs/guideline/relativeGuideline.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.getRelativeGuidelines = exports.getRelativeGuideSnaps = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _mediaSingle = require("../media-single");
var _utils = require("./utils");
var RELATIVE_GUIDES_GAP = 6;
var getWidthRelativeGuideline = function getWidthRelativeGuideline(key, view, nodeWithPos, editorWidth, topOffset, size) {
  var node = nodeWithPos.node,
    pos = nodeWithPos.pos;
  var _view$dom$getBounding = view.dom.getBoundingClientRect(),
    viewHeight = _view$dom$getBounding.height;
  var _view$coordsAtPos = view.coordsAtPos(pos + 1),
    top = _view$coordsAtPos.top; // media node

  var _ref = size || (0, _utils.getMediaSingleDimensions)(node, editorWidth) || {},
    width = _ref.width,
    height = _ref.height;
  var y = top - topOffset - RELATIVE_GUIDES_GAP;
  if (!width || !height || y < 0 || y > viewHeight) {
    return null;
  }
  var start = 0;
  var end = 0;
  switch (node.attrs.layout) {
    case 'align-start':
    case 'wrap-left':
      start = -editorWidth / 2;
      end = start + width;
      break;
    case 'align-end':
    case 'wrap-right':
      end = editorWidth / 2;
      start = end - width;
      break;
    case 'center':
    case 'wide':
    case 'full-width':
      end = width / 2;
      start = -end;
      break;
    default:
  }
  return {
    key: key,
    position: {
      y: y,
      x: {
        start: start,
        end: end
      }
    },
    active: true,
    styles: {
      lineStyle: 'dashed',
      capStyle: 'line'
    }
  };
};
var getHeightRelativeGuideline = function getHeightRelativeGuideline(key, view, nodeWithPos, editorWidth, topOffset, size) {
  var node = nodeWithPos.node,
    pos = nodeWithPos.pos;
  var _view$dom$getBounding2 = view.dom.getBoundingClientRect(),
    viewHeight = _view$dom$getBounding2.height;
  var _view$coordsAtPos2 = view.coordsAtPos(pos + 1),
    top = _view$coordsAtPos2.top; // media node

  var _ref2 = size || (0, _utils.getMediaSingleDimensions)(node, editorWidth) || {},
    width = _ref2.width,
    height = _ref2.height;
  if (!width || !height) {
    return null;
  }
  var start = top - topOffset;
  var end = start + height;
  if (end < 0 || start > viewHeight) {
    return null;
  }
  var x = 0;
  var halfWidth = editorWidth / 2;
  switch (node.attrs.layout) {
    case 'align-start':
    case 'wrap-left':
      x = width - halfWidth;
      break;
    case 'align-end':
    case 'wrap-right':
      x = halfWidth;
      break;
    case 'center':
    case 'wide':
    case 'full-width':
      x = width / 2;
      break;
    default:
      x = 0;
  }
  return {
    key: key,
    position: {
      x: x + RELATIVE_GUIDES_GAP,
      y: {
        start: start,
        end: end
      }
    },
    active: true,
    styles: {
      lineStyle: 'dashed',
      capStyle: 'line'
    }
  };
};
var getRelativeGuideSnaps = exports.getRelativeGuideSnaps = function getRelativeGuideSnaps(relativeGuides, aspectRatio) {
  var snapsWidthFromMatchingHeight = Object.keys(relativeGuides.height || {}).map(function (heightKey) {
    var height = Number.parseInt(heightKey);
    return (0, _mediaSingle.roundToNearest)(height * aspectRatio);
  });
  var snapsWidthFromMatchingWidth = Object.keys(relativeGuides.width || {}).map(function (widthKey) {
    return Number.parseInt(widthKey);
  });
  return [].concat((0, _toConsumableArray2.default)(snapsWidthFromMatchingWidth), (0, _toConsumableArray2.default)(snapsWidthFromMatchingHeight));
};
var getRelativeGuidelines = exports.getRelativeGuidelines = function getRelativeGuidelines(relativeGuides, nodeWithPos, view, editorWidth, topOffset, size) {
  var matchWidth = relativeGuides.width ? relativeGuides.width[Math.round(size.width)] : [];
  var matchHeight = relativeGuides.height ? relativeGuides.height[Math.round(size.height)] : [];
  var matches = matchWidth || matchHeight;
  var getRelativeGuideline = matchWidth && getWidthRelativeGuideline || matchHeight && getHeightRelativeGuideline || null;
  if (matches && getRelativeGuideline) {
    return [getRelativeGuideline('relative_guide_current', view, nodeWithPos, editorWidth, topOffset, size)].concat((0, _toConsumableArray2.default)(matches.map(function (nodeWithPos, index) {
      return getRelativeGuideline("relative_guide_".concat(index), view, nodeWithPos, editorWidth, topOffset);
    }))).filter(function (config) {
      return !!config;
    });
  }
  return [];
};