@atlaskit/editor-plugin-block-controls/dist/cjs/pm-plugins/utils/drag-handle-positions.js

Block controls plugin for @atlaskit/editor-core

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.shouldMaskNodeControls = exports.shouldBeSticky = exports.getTopPosition = exports.getNodeHeight = exports.getLeftPosition = exports.getControlHeightCSSValue = exports.getControlBottomCSSValue = void 0;
var _styles = require("@atlaskit/editor-common/styles");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _consts = require("../../ui/consts");
var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
var getTopPosition = exports.getTopPosition = function getTopPosition(dom, type) {
  if (!dom) {
    return 'auto';
  }
  var table = dom.querySelector('table');
  var isTable = table && (!type || type === 'table');
  if (isTable) {
    return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
  } else if (type === 'rule') {
    return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, "px");
  } else if (type === 'layoutColumn') {
    return "".concat(-dom.offsetTop / 2, "px");
  } else if (type === 'heading-1') {
    return "".concat(dom.offsetTop + _consts.DRAG_HANDLE_H1_TOP_ADJUSTMENT, "px");
  } else if (type === 'heading-2') {
    return "".concat(dom.offsetTop + _consts.DRAG_HANDLE_H2_TOP_ADJUSTMENT, "px");
  } else if (type === 'heading-3') {
    return "".concat(dom.offsetTop, "px");
  } else if (type === 'heading-4') {
    return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_H4_TOP_ADJUSTMENT, "px");
  } else if (type === 'heading-5') {
    return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_H5_TOP_ADJUSTMENT, "px");
  } else if (type === 'heading-6') {
    return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_H6_TOP_ADJUSTMENT, "px");
  } else if (type === 'paragraph-small') {
    return "".concat(dom.offsetTop + _consts.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, "px");
  } else if (type === 'paragraph') {
    return "".concat(dom.offsetTop + _consts.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, "px");
  } else {
    return "".concat(dom.offsetTop, "px");
  }
};
var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, type, innerContainer, macroInteractionUpdates, parentType) {
  if (!dom) {
    return 'auto';
  }
  if (!innerContainer) {
    return type === 'layoutColumn' ? "".concat(dom.offsetLeft + dom.clientWidth / 2 - _consts.DRAG_HANDLE_HEIGHT / 2, "px") : "".concat(dom.offsetLeft - (0, _consts.dragHandleGap)(type, parentType) - _styles.DRAG_HANDLE_WIDTH, "px");
  }

  // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div
  // We need to adjust the left offset position of the drag handle to account for the relative span
  var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
  var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - (0, _consts.dragHandleGap)(type, parentType) - _styles.DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - (0, _consts.dragHandleGap)(type, parentType) - _styles.DRAG_HANDLE_WIDTH, "px");
};

// anchorRectCache seems to have a 100% cache miss rate
var getNodeHeight = exports.getNodeHeight = function getNodeHeight(dom, anchor, anchorRectCache) {
  return (anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchor)) || (dom === null || dom === void 0 ? void 0 : dom.offsetHeight);
};
var shouldBeSticky = exports.shouldBeSticky = function shouldBeSticky(nodeType) {
  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && STICKY_NODES.includes(nodeType);
};
var getControlBottomCSSValue = exports.getControlBottomCSSValue = function getControlBottomCSSValue(anchor, isSticky, isTopLevelNode, isLayoutColumn) {
  return (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
    bottom: 'unset'
  } : {
    bottom: "anchor(".concat(anchor, " end)")
  };
};
var getControlHeightCSSValue = exports.getControlHeightCSSValue = function getControlHeightCSSValue(nodeHeight, isSticky, isTopLevelNode, fallbackPxHeight, isLayoutColumn) {
  return (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
    height: 'unset'
  } : {
    height: "".concat(nodeHeight || fallbackPxHeight, "px")
  };
};
var shouldMaskNodeControls = exports.shouldMaskNodeControls = function shouldMaskNodeControls(nodeType, isTopLevelNode) {
  return (
    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
    isTopLevelNode && ['table'].includes(nodeType) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
  );
};