Utilities for adding and subtracting numeric values from object properties, useful for coordinate and dimension calculations in drag and drop operations.
Adds numeric adjustments to object properties. Useful for applying coordinate transformations or dimension adjustments.
/**
* Adds numeric adjustments to object properties
* @param object - The base object with numeric properties
* @param adjustments - One or more adjustment objects to add
* @returns A new object with the adjustments applied
*/
function add<T extends Record<U, number>, U extends string>(
object: T,
...adjustments: Partial<T>[]
): T;Usage Examples:
import { add } from "@dnd-kit/utilities";
// Adding coordinates
const position = { x: 10, y: 20 };
const offset = { x: 5, y: -3 };
const newPosition = add(position, offset);
// Result: { x: 15, y: 17 }
// Adding multiple adjustments
const dimensions = { width: 100, height: 200 };
const adjustment1 = { width: 10 };
const adjustment2 = { height: -5 };
const newDimensions = add(dimensions, adjustment1, adjustment2);
// Result: { width: 110, height: 195 }
// Complex object with multiple properties
const transform = { x: 0, y: 0, scaleX: 1, scaleY: 1 };
const delta = { x: 25, y: 15, scaleX: 0.1 };
const newTransform = add(transform, delta);
// Result: { x: 25, y: 15, scaleX: 1.1, scaleY: 1 }Subtracts numeric adjustments from object properties. Useful for reversing transformations or calculating differences.
/**
* Subtracts numeric adjustments from object properties
* @param object - The base object with numeric properties
* @param adjustments - One or more adjustment objects to subtract
* @returns A new object with the adjustments subtracted
*/
function subtract<T extends Record<U, number>, U extends string>(
object: T,
...adjustments: Partial<T>[]
): T;Usage Examples:
import { subtract } from "@dnd-kit/utilities";
// Subtracting coordinates
const position = { x: 10, y: 20 };
const offset = { x: 5, y: 3 };
const newPosition = subtract(position, offset);
// Result: { x: 5, y: 17 }
// Calculating relative positions
const absolutePosition = { x: 150, y: 100 };
const containerOffset = { x: 50, y: 25 };
const relativePosition = subtract(absolutePosition, containerOffset);
// Result: { x: 100, y: 75 }
// Reversing multiple transformations
const currentState = { x: 100, y: 200, rotation: 45 };
const transformation1 = { x: 20, rotation: 15 };
const transformation2 = { y: 30, rotation: 10 };
const originalState = subtract(currentState, transformation1, transformation2);
// Result: { x: 80, y: 170, rotation: 20 }