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

Block controls plugin for @atlaskit/editor-core

import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, dragHandleGap } from '../../ui/consts';
const STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
export const getTopPosition = (dom, type) => {
  if (!dom) {
    return 'auto';
  }
  const table = dom.querySelector('table');
  const isTable = table && (!type || type === 'table');
  if (isTable) {
    return `${dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0)}px`;
  } else if (type === 'rule') {
    return `${dom.offsetTop - DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT}px`;
  } else if (type === 'layoutColumn') {
    return `${-dom.offsetTop / 2}px`;
  } else if (type === 'heading-1') {
    return `${dom.offsetTop + DRAG_HANDLE_H1_TOP_ADJUSTMENT}px`;
  } else if (type === 'heading-2') {
    return `${dom.offsetTop + DRAG_HANDLE_H2_TOP_ADJUSTMENT}px`;
  } else if (type === 'heading-3') {
    return `${dom.offsetTop}px`;
  } else if (type === 'heading-4') {
    return `${dom.offsetTop - DRAG_HANDLE_H4_TOP_ADJUSTMENT}px`;
  } else if (type === 'heading-5') {
    return `${dom.offsetTop - DRAG_HANDLE_H5_TOP_ADJUSTMENT}px`;
  } else if (type === 'heading-6') {
    return `${dom.offsetTop - DRAG_HANDLE_H6_TOP_ADJUSTMENT}px`;
  } else if (type === 'paragraph-small') {
    return `${dom.offsetTop + DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT}px`;
  } else if (type === 'paragraph') {
    return `${dom.offsetTop + DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT}px`;
  } else {
    return `${dom.offsetTop}px`;
  }
};
export const getLeftPosition = (dom, type, innerContainer, macroInteractionUpdates, parentType) => {
  if (!dom) {
    return 'auto';
  }
  if (!innerContainer) {
    return type === 'layoutColumn' ? `${dom.offsetLeft + dom.clientWidth / 2 - DRAG_HANDLE_HEIGHT / 2}px` : `${dom.offsetLeft - dragHandleGap(type, parentType) - 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
  const relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
  const leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
  return getComputedStyle(innerContainer).transform === 'none' ? `${innerContainer.offsetLeft + leftAdjustment - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH}px` : `${innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH}px`;
};

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