Skip to main content

Drop Indicator

Overview​

This model provides the mappings used by the DropIndicatorDirective to determine orientation and styling when showing drop indicators.

Orientation​

export type Orientation = 'horizontal' | 'vertical';

Represents the orientation of the drop indicator.

  • horizontal: Indicates placement along the top or bottom.

  • vertical: Indicates placement along the left or right.

edgeToOrientationMap​

import { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';

export const edgeToOrientationMap: Record<Edge, Orientation> = {
  top: 'horizontal',
  bottom: 'horizontal',
  left: 'vertical',
  right: 'vertical',
};

Maps an Edge (from Atlaskit) to its corresponding orientation.

Example​

const orientation = edgeToOrientationMap['top'];
// "horizontal"

orientationStyles​

export const orientationStyles: Record<Orientation, string> = {
  horizontal: 'orientation-horizontal',
  vertical: 'orientation-vertical',
};

Maps each orientation to its associated CSS class.

Example​

const cssClass = orientationStyles['vertical'];
// "orientation-vertical"

edgeStyles​

import { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';

export const edgeStyles: Record<Edge, string> = {
  top: 'edge-top',
  right: 'edge-right',
  bottom: 'edge-bottom',
  left: 'edge-left',
};

Maps an Edge to the CSS class used for styling the drop indicator.

Example​

const cssClass = edgeStyles['right'];
// "edge-right"

See Also​