@octanejs/visx 0.1.0

package/src/zoom/Zoom.tsrx

@@ -0,0 +1,375 @@
+import { useState, useRef, useCallback, useEffect } from 'octane';
+import type { ReactElement } from 'react';
+import { localPoint } from '@octanejs/visx/event';
+import {
+	composeMatrices,
+	inverseMatrix,
+	applyMatrixToPoint,
+	applyInverseMatrixToPoint,
+	translateMatrix,
+	identityMatrix,
+	scaleMatrix,
+} from './util/matrix';
+import type {
+	TransformMatrix,
+	Point,
+	Translate,
+	Scale,
+	ScaleSignature,
+	PinchDelta,
+	GenericWheelEvent,
+	InteractionEvent,
+	Zoom as ZoomType,
+} from './types';
+
+// default prop values
+const defaultInitialTransformMatrix = {
+	scaleX: 1,
+	scaleY: 1,
+	translateX: 0,
+	translateY: 0,
+	skewX: 0,
+	skewY: 0,
+};
+
+const defaultWheelDelta = (event: GenericWheelEvent) => -event.deltaY > 0
+	? { scaleX: 1.1, scaleY: 1.1 }
+	: { scaleX: 0.9, scaleY: 0.9 };
+
+const defaultPinchDelta: PinchDelta = ({ offset: [s], lastOffset: [lastS] }) => ({
+	scaleX: s - lastS < 0 ? 0.9 : 1.1,
+	scaleY: s - lastS < 0 ? 0.9 : 1.1,
+});
+
+export type ZoomProps<ElementType> = {
+	/** Width of the zoom container. */
+	width: number;
+	/** Height of the zoom container. */
+	height: number;
+	/**
+ * ```js
+ *  wheelDelta(event)
+ * ```
+ *
+ * A function that returns { scaleX,scaleY } factors to scale the matrix by.
+ * Scale factors greater than 1 will increase (zoom in), less than 1 will decrease (zoom out).
+ */
+	wheelDelta?: (event: GenericWheelEvent) => Scale;
+	/**
+ * ```js
+ *  pinchDelta(state)
+ * ```
+ *
+ * A function that returns { scaleX, scaleY, point } factors to scale the matrix by.
+ * Scale factors greater than 1 will increase (zoom in), less than 1 will decrease (zoom out), the point is used to find where to zoom.
+ * The state parameter is from react-use-gestures onPinch handler
+ */
+	pinchDelta?: PinchDelta;
+	/** Minimum x scale value for transform. */
+	scaleXMin?: number;
+	/** Maximum x scale value for transform. */
+	scaleXMax?: number;
+	/** Minimum y scale value for transform. */
+	scaleYMin?: number;
+	/** Maximum y scale value for transform. */
+	scaleYMax?: number;
+	/**
+ * By default constrain() will only constrain scale values. To change
+ * constraints you can pass in your own constrain function as a prop.
+ *
+ * For example, if you wanted to constrain your view to within [[0, 0], [width, height]]:
+ *
+ * ```js
+ * function constrain(transformMatrix, prevTransformMatrix) {
+ *   const min = applyMatrixToPoint(transformMatrix, { x: 0, y: 0 });
+ *   const max = applyMatrixToPoint(transformMatrix, { x: width, y: height });
+ *   if (max.x < width || max.y < height) {
+ *     return prevTransformMatrix;
+ *   }
+ *   if (min.x > 0 || min.y > 0) {
+ *     return prevTransformMatrix;
+ *   }
+ *   return transformMatrix;
+ * }
+ * ```
+ */
+	constrain?: (transform: TransformMatrix, prevTransform: TransformMatrix) => TransformMatrix;
+	/** Initial transform matrix to apply. */
+	initialTransformMatrix?: TransformMatrix;
+	children: (zoom: ZoomType<ElementType>) => ReactElement;
+};
+
+function Zoom<ElementType extends Element>({
+	scaleXMin = 0,
+	scaleXMax = Infinity,
+	scaleYMin = 0,
+	scaleYMax = Infinity,
+	initialTransformMatrix = defaultInitialTransformMatrix,
+	wheelDelta = defaultWheelDelta,
+	pinchDelta = defaultPinchDelta,
+	width,
+	height,
+	constrain,
+	children,
+}: ZoomProps<ElementType>): ReactElement {
+	const containerRef = useRef<ElementType>(null);
+	const matrixStateRef = useRef<TransformMatrix>(initialTransformMatrix);
+	const pointerActiveRef = useRef(false);
+	const lastPinchDistanceRef = useRef(0);
+	const pinchMemoRef = useRef<unknown>(undefined);
+
+	const [transformMatrix, setTransformMatrixState] = useState<TransformMatrix>(
+		initialTransformMatrix!,
+	);
+	const [isDragging, setIsDragging] = useState(false);
+	const [startTranslate, setStartTranslate] = useState<Translate | undefined>(undefined);
+	const [startPoint, setStartPoint] = useState<Point | undefined>(undefined);
+
+	const defaultConstrain = useCallback((
+		newTransformMatrix: TransformMatrix,
+		prevTransformMatrix: TransformMatrix,
+	) => {
+		if (constrain) return constrain(newTransformMatrix, prevTransformMatrix);
+		const { scaleX, scaleY } = newTransformMatrix;
+		const shouldConstrainScaleX = scaleX > scaleXMax! || scaleX < scaleXMin!;
+		const shouldConstrainScaleY = scaleY > scaleYMax! || scaleY < scaleYMin!;
+
+		if (shouldConstrainScaleX || shouldConstrainScaleY) {
+			return prevTransformMatrix;
+		}
+		return newTransformMatrix;
+	}, [constrain, scaleXMin, scaleXMax, scaleYMin, scaleYMax]);
+
+	const setTransformMatrix = useCallback((newTransformMatrix: TransformMatrix) => {
+		setTransformMatrixState((prevTransformMatrix) => {
+			const updatedTransformMatrix = defaultConstrain(newTransformMatrix, prevTransformMatrix);
+			matrixStateRef.current = updatedTransformMatrix;
+			return updatedTransformMatrix;
+		});
+	}, [defaultConstrain]);
+
+	const applyToPoint = useCallback(
+		({ x, y }: Point) => applyMatrixToPoint(transformMatrix, { x, y }),
+		[transformMatrix],
+	);
+
+	const applyInverseToPoint = useCallback(
+		({ x, y }: Point) => applyInverseMatrixToPoint(transformMatrix, { x, y }),
+		[transformMatrix],
+	);
+
+	const reset = useCallback(() => {
+		setTransformMatrix(initialTransformMatrix);
+	}, [initialTransformMatrix, setTransformMatrix]);
+
+	const scale = useCallback(({ scaleX, scaleY: maybeScaleY, point }: ScaleSignature) => {
+		const scaleY = maybeScaleY || scaleX;
+		const cleanPoint = point || { x: width / 2, y: height / 2 };
+		// need to use ref value instead of state here because wheel listener does not have access to latest state
+		const translate = applyInverseMatrixToPoint(matrixStateRef.current, cleanPoint);
+		const nextMatrix = composeMatrices(
+			matrixStateRef.current,
+			translateMatrix(translate.x, translate.y),
+			scaleMatrix(scaleX, scaleY),
+			translateMatrix(-translate.x, -translate.y),
+		);
+		setTransformMatrix(nextMatrix);
+		if (isDragging) {
+			const { translateX, translateY } = matrixStateRef.current;
+			setStartPoint(point);
+			setStartTranslate({ translateX, translateY });
+		}
+	}, [height, width, isDragging, setTransformMatrix]);
+
+	const translate = useCallback(({ translateX, translateY }: Translate) => {
+		const nextMatrix = composeMatrices(transformMatrix, translateMatrix(translateX, translateY));
+		setTransformMatrix(nextMatrix);
+	}, [setTransformMatrix, transformMatrix]);
+
+	const setTranslate = useCallback(({ translateX, translateY }: Translate) => {
+		const nextMatrix = {
+			...transformMatrix,
+			translateX,
+			translateY,
+		};
+		setTransformMatrix(nextMatrix);
+	}, [setTransformMatrix, transformMatrix]);
+
+	const translateTo = useCallback(({ x, y }: Point) => {
+		const point = applyInverseMatrixToPoint(transformMatrix, { x, y });
+		setTranslate({ translateX: point.x, translateY: point.y });
+	}, [setTranslate, transformMatrix]);
+
+	const invert = useCallback(() => inverseMatrix(transformMatrix), [transformMatrix]);
+
+	const toStringInvert = useCallback(() => {
+		const { translateX, translateY, scaleX, scaleY, skewX, skewY } = invert();
+		return `matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, ${translateX}, ${translateY})`;
+	}, [invert]);
+
+	const dragStart = useCallback((event: InteractionEvent) => {
+		const { translateX, translateY } = transformMatrix;
+		setStartPoint(localPoint(event) || undefined);
+		setStartTranslate({ translateX, translateY });
+		setIsDragging(true);
+	}, [transformMatrix]);
+
+	const dragMove = useCallback((
+		event: InteractionEvent,
+		options?: { offsetX?: number; offsetY?: number },
+	) => {
+		if (!isDragging || !startPoint || !startTranslate) return;
+		const currentPoint = localPoint(event);
+		const dx = currentPoint ? -(startPoint.x - currentPoint.x) : -startPoint.x;
+		const dy = currentPoint ? -(startPoint.y - currentPoint.y) : -startPoint.y;
+
+		let translateX = startTranslate.translateX + dx;
+		if (options?.offsetX) translateX += options?.offsetX ?? 0;
+		let translateY = startTranslate.translateY + dy;
+		if (options?.offsetY) translateY += options?.offsetY ?? 0;
+		setTranslate({
+			translateX,
+			translateY,
+		});
+	}, [isDragging, setTranslate, startPoint, startTranslate]);
+
+	const dragEnd = useCallback(() => {
+		setStartPoint(undefined);
+		setStartTranslate(undefined);
+		setIsDragging(false);
+	}, []);
+
+	const handleWheel = useCallback((event: GenericWheelEvent) => {
+		event.preventDefault();
+		const point = localPoint(event) || undefined;
+		const { scaleX, scaleY } = wheelDelta!(event);
+		scale({ scaleX, scaleY, point });
+	}, [scale, wheelDelta]);
+
+	const handlePinch: ZoomType<ElementType>['handlePinch'] = useCallback((state) => {
+		const { origin: [ox, oy], memo } = state;
+		let currentMemo = memo;
+		if (containerRef.current) {
+			const { top, left } = currentMemo ?? containerRef.current.getBoundingClientRect();
+			if (!currentMemo) {
+				currentMemo = { top, left };
+			}
+			const { scaleX, scaleY } = pinchDelta(state);
+			scale({
+				scaleX,
+				scaleY,
+				point: { x: ox - left, y: oy - top },
+			});
+		}
+		return currentMemo;
+	}, [scale, pinchDelta]);
+
+	const toString = useCallback(() => {
+		const { translateX, translateY, scaleX, scaleY, skewX, skewY } = transformMatrix;
+		return `matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, ${translateX}, ${translateY})`;
+	}, [transformMatrix]);
+
+	const center = useCallback(() => {
+		const centerPoint = { x: width / 2, y: height / 2 };
+		const inverseCentroid = applyInverseToPoint(centerPoint);
+		translate({
+			translateX: inverseCentroid.x - centerPoint.x,
+			translateY: inverseCentroid.y - centerPoint.y,
+		});
+	}, [height, width, applyInverseToPoint, translate]);
+
+	const clear = useCallback(() => {
+		setTransformMatrix(identityMatrix());
+	}, [setTransformMatrix]);
+
+	useEffect(() => {
+		const target = containerRef.current;
+		if (!target || typeof window === 'undefined') return;
+
+		const onPointerDown = (event: PointerEvent) => {
+			pointerActiveRef.current = true;
+			dragStart(event);
+		};
+		const onPointerMove = (event: PointerEvent) => {
+			if (pointerActiveRef.current) dragMove(event);
+		};
+		const onPointerUp = () => {
+			if (!pointerActiveRef.current) return;
+			pointerActiveRef.current = false;
+			dragEnd();
+		};
+		const onWheel = (event: WheelEvent) => handleWheel(event);
+		const onTouchStart = (event: TouchEvent) => {
+			if (event.touches.length !== 2) return;
+			const [a, b] = [event.touches[0], event.touches[1]];
+			lastPinchDistanceRef.current = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
+			pinchMemoRef.current = undefined;
+			if (pointerActiveRef.current) {
+				pointerActiveRef.current = false;
+				dragEnd();
+			}
+		};
+		const onTouchMove = (event: TouchEvent) => {
+			if (event.touches.length !== 2) return;
+			event.preventDefault();
+			const [a, b] = [event.touches[0], event.touches[1]];
+			const distance = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
+			pinchMemoRef.current = handlePinch({
+				event,
+				origin: [(a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2],
+				offset: [distance, 0],
+				lastOffset: [lastPinchDistanceRef.current || distance, 0],
+				memo: pinchMemoRef.current,
+			});
+			lastPinchDistanceRef.current = distance;
+		};
+
+		target.addEventListener('pointerdown', onPointerDown);
+		target.addEventListener('wheel', onWheel, { passive: false });
+		target.addEventListener('touchstart', onTouchStart, { passive: false });
+		target.addEventListener('touchmove', onTouchMove, { passive: false });
+		window.addEventListener('pointermove', onPointerMove);
+		window.addEventListener('pointerup', onPointerUp);
+		window.addEventListener('pointercancel', onPointerUp);
+		return () => {
+			target.removeEventListener('pointerdown', onPointerDown);
+			target.removeEventListener('wheel', onWheel);
+			target.removeEventListener('touchstart', onTouchStart);
+			target.removeEventListener('touchmove', onTouchMove);
+			window.removeEventListener('pointermove', onPointerMove);
+			window.removeEventListener('pointerup', onPointerUp);
+			window.removeEventListener('pointercancel', onPointerUp);
+		};
+	}, [dragEnd, dragMove, dragStart, handlePinch, handleWheel]);
+
+	const zoom: ZoomType<ElementType> = {
+		initialTransformMatrix,
+		transformMatrix,
+		isDragging,
+		center,
+		clear,
+		scale,
+		translate,
+		translateTo,
+		setTranslate,
+		setTransformMatrix,
+		reset,
+		handleWheel,
+		handlePinch,
+		dragEnd,
+		dragMove,
+		dragStart,
+		toString,
+		invert,
+		toStringInvert,
+		applyToPoint,
+		applyInverseToPoint,
+		containerRef,
+	};
+
+	return <>
+		{children(zoom)}
+	</>;
+}
+
+export default Zoom

package/src/zoom/Zoom.tsrx.d.ts

@@ -0,0 +1,62 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactElement } from 'react';
+import type { TransformMatrix, Scale, PinchDelta, GenericWheelEvent, Zoom as ZoomType } from './types';
+export type ZoomProps<ElementType> = {
+    /** Width of the zoom container. */
+    width: number;
+    /** Height of the zoom container. */
+    height: number;
+    /**
+ * ```js
+ *  wheelDelta(event)
+ * ```
+ *
+ * A function that returns { scaleX,scaleY } factors to scale the matrix by.
+ * Scale factors greater than 1 will increase (zoom in), less than 1 will decrease (zoom out).
+ */
+    wheelDelta?: (event: GenericWheelEvent) => Scale;
+    /**
+ * ```js
+ *  pinchDelta(state)
+ * ```
+ *
+ * A function that returns { scaleX, scaleY, point } factors to scale the matrix by.
+ * Scale factors greater than 1 will increase (zoom in), less than 1 will decrease (zoom out), the point is used to find where to zoom.
+ * The state parameter is from react-use-gestures onPinch handler
+ */
+    pinchDelta?: PinchDelta;
+    /** Minimum x scale value for transform. */
+    scaleXMin?: number;
+    /** Maximum x scale value for transform. */
+    scaleXMax?: number;
+    /** Minimum y scale value for transform. */
+    scaleYMin?: number;
+    /** Maximum y scale value for transform. */
+    scaleYMax?: number;
+    /**
+ * By default constrain() will only constrain scale values. To change
+ * constraints you can pass in your own constrain function as a prop.
+ *
+ * For example, if you wanted to constrain your view to within [[0, 0], [width, height]]:
+ *
+ * ```js
+ * function constrain(transformMatrix, prevTransformMatrix) {
+ *   const min = applyMatrixToPoint(transformMatrix, { x: 0, y: 0 });
+ *   const max = applyMatrixToPoint(transformMatrix, { x: width, y: height });
+ *   if (max.x < width || max.y < height) {
+ *     return prevTransformMatrix;
+ *   }
+ *   if (min.x > 0 || min.y > 0) {
+ *     return prevTransformMatrix;
+ *   }
+ *   return transformMatrix;
+ * }
+ * ```
+ */
+    constrain?: (transform: TransformMatrix, prevTransform: TransformMatrix) => TransformMatrix;
+    /** Initial transform matrix to apply. */
+    initialTransformMatrix?: TransformMatrix;
+    children: (zoom: ZoomType<ElementType>) => ReactElement;
+};
+declare function Zoom<ElementType extends Element>({ scaleXMin, scaleXMax, scaleYMin, scaleYMax, initialTransformMatrix, wheelDelta, pinchDelta, width, height, constrain, children, }: ZoomProps<ElementType>): ReactElement;
+export default Zoom;

package/src/zoom/index.ts

@@ -0,0 +1,16 @@
+// @octanejs/visx/zoom
+export { default as Zoom } from './Zoom.tsrx';
+export {
+	identityMatrix,
+	createMatrix,
+	inverseMatrix,
+	applyMatrixToPoint,
+	applyInverseMatrixToPoint,
+	scaleMatrix,
+	translateMatrix,
+	multiplyMatrices,
+	composeMatrices,
+} from './util/matrix';
+
+export type * from './types';
+export type { ZoomProps } from './Zoom.tsrx';

package/src/zoom/types.ts

@@ -0,0 +1,120 @@
+import type { Handler, UserHandlers, WebKitGestureEvent } from '@use-gesture/core/types';
+import type {
+	MouseEvent as ReactMouseEvent,
+	PointerEvent as ReactPointerEvent,
+	RefObject,
+	TouchEvent as ReactTouchEvent,
+	WheelEvent as ReactWheelEvent,
+} from 'react';
+
+export type GenericWheelEvent = ReactWheelEvent | WheelEvent;
+
+export type InteractionEvent =
+	| ReactMouseEvent
+	| ReactTouchEvent
+	| ReactPointerEvent
+	| MouseEvent
+	| TouchEvent
+	| PointerEvent;
+
+export interface TransformMatrix {
+	scaleX: number;
+	scaleY: number;
+	translateX: number;
+	translateY: number;
+	skewX: number;
+	skewY: number;
+}
+
+export interface Point {
+	x: number;
+	y: number;
+}
+
+export type Translate = Pick<TransformMatrix, 'translateX' | 'translateY'>;
+
+export type Scale = Pick<TransformMatrix, 'scaleX' | 'scaleY'>;
+
+export type PinchDelta = (
+	params: Parameters<
+		Handler<
+			'pinch',
+			| TouchEvent
+			| ReactTouchEvent
+			| PointerEvent
+			| ReactPointerEvent
+			| WheelEvent
+			| ReactWheelEvent
+			| WebKitGestureEvent
+		>
+	>[0],
+) => Scale;
+
+export interface ScaleSignature {
+	scaleX: TransformMatrix['scaleX'];
+	scaleY?: TransformMatrix['scaleY'];
+	point?: Point;
+}
+
+export interface ProvidedZoom<ElementType> {
+	/** Sets translateX/Y to the center defined by width and height. */
+	center: () => void;
+	/** Sets the transform matrix to the identity matrix. */
+	clear: () => void;
+	/** Applies the specified scaleX + optional scaleY transform relative to the specified point (or center of canvas if unspecified). */
+	scale: (scale: ScaleSignature) => void;
+	/** Multiplies the current transform matrix by the specified translation. */
+	translate: (translate: Translate) => void;
+	/** Translates to a specific x,y point. */
+	translateTo: (point: Point) => void;
+	/** Sets the translation of the current transform matrix to the specified translation. */
+	setTranslate: (translate: Translate) => void;
+	/**
+	 * Sets the transform matrix to the specified matrix, constraining the transform
+	 * scale by default (or applying props.constrain if provided).
+	 */
+	setTransformMatrix: (matrix: TransformMatrix) => void;
+	/** Resets the transform to the initial transform specified by props. */
+	reset: () => void;
+	/** Callback for a wheel event, updating scale based on props.wheelDelta, relative to the mouse position. */
+	handleWheel: (event: ReactWheelEvent | WheelEvent) => void;
+	/** Callback for a pinch event, updating scale based on props.pinchDelta relative to the pinch position. */
+	handlePinch: UserHandlers['onPinch'];
+	/** Callback for dragEnd, sets isDragging to false. */
+	dragEnd: () => void;
+	/** Callback for dragMove, results in a scale transform. */
+	dragMove: (event: InteractionEvent, options?: { offsetX?: number; offsetY?: number }) => void;
+	/** Callback for dragStart, sets isDragging to true.  */
+	dragStart: (event: InteractionEvent) => void;
+	/**
+	 * Returns a string representation of the matrix transform:
+	 * matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, ${translateX}, ${translateY})
+	 */
+	toString: () => string;
+	/** Returns the inverse of the current transform matrix. */
+	invert: () => TransformMatrix;
+	/**
+	 * Returns the string representation of the inverse of the current transform matrix:
+	 * matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, ${translateX}, ${translateY})
+	 */
+	toStringInvert: () => string;
+	/** Applies the current transform matrix to the specified point. */
+	applyToPoint: ({ x, y }: Point) => Point;
+	/** Applies the inverse of the current transform matrix to the specified point. */
+	applyInverseToPoint: ({ x, y }: Point) => Point;
+	/** Ref to stick on element to attach all handlers automatically. */
+	containerRef: RefObject<ElementType | null>;
+}
+
+/** Internal state properties exposed by the Zoom component. */
+export interface ZoomState {
+	/** The initial transform matrix specified by props. */
+	initialTransformMatrix: TransformMatrix;
+	/** The current transform matrix. */
+	transformMatrix: TransformMatrix;
+	/** Whether the user is currently dragging. */
+	isDragging: boolean;
+}
+
+/** Complete Zoom API including methods and state, passed to children render prop. */
+export type Zoom<ElementType> = ProvidedZoom<ElementType> & ZoomState;

package/src/zoom/util/matrix.ts

@@ -0,0 +1,104 @@
+import type { TransformMatrix, Point } from '../types';
+
+export function identityMatrix(): TransformMatrix {
+	return {
+		scaleX: 1,
+		scaleY: 1,
+		translateX: 0,
+		translateY: 0,
+		skewX: 0,
+		skewY: 0,
+	};
+}
+
+export function createMatrix({
+	scaleX = 1,
+	scaleY = 1,
+	translateX = 0,
+	translateY = 0,
+	skewX = 0,
+	skewY = 0,
+}: Partial<TransformMatrix>): TransformMatrix {
+	return {
+		scaleX,
+		scaleY,
+		translateX,
+		translateY,
+		skewX,
+		skewY,
+	};
+}
+
+export function inverseMatrix({
+	scaleX,
+	scaleY,
+	translateX,
+	translateY,
+	skewX,
+	skewY,
+}: TransformMatrix) {
+	const denominator = scaleX * scaleY - skewY * skewX;
+	return {
+		scaleX: scaleY / denominator,
+		scaleY: scaleX / denominator,
+		translateX: (scaleY * translateX - skewX * translateY) / -denominator,
+		translateY: (skewY * translateX - scaleX * translateY) / denominator,
+		skewX: skewX / -denominator,
+		skewY: skewY / -denominator,
+	};
+}
+
+export function applyMatrixToPoint(matrix: TransformMatrix, { x, y }: Point) {
+	return {
+		x: matrix.scaleX * x + matrix.skewX * y + matrix.translateX,
+		y: matrix.skewY * x + matrix.scaleY * y + matrix.translateY,
+	};
+}
+
+export function applyInverseMatrixToPoint(matrix: TransformMatrix, { x, y }: Point) {
+	return applyMatrixToPoint(inverseMatrix(matrix), { x, y });
+}
+
+export function scaleMatrix(
+	scaleX: TransformMatrix['scaleX'],
+	maybeScaleY: TransformMatrix['scaleY'] | undefined = undefined,
+) {
+	const scaleY = maybeScaleY || scaleX;
+	return createMatrix({ scaleX, scaleY });
+}
+
+export function translateMatrix(
+	translateX: TransformMatrix['translateX'],
+	translateY: TransformMatrix['translateY'],
+) {
+	return createMatrix({ translateX, translateY });
+}
+
+export function multiplyMatrices(matrix1: TransformMatrix, matrix2: TransformMatrix) {
+	return {
+		scaleX: matrix1.scaleX * matrix2.scaleX + matrix1.skewX * matrix2.skewY,
+		scaleY: matrix1.skewY * matrix2.skewX + matrix1.scaleY * matrix2.scaleY,
+		translateX:
+			matrix1.scaleX * matrix2.translateX + matrix1.skewX * matrix2.translateY + matrix1.translateX,
+		translateY:
+			matrix1.skewY * matrix2.translateX + matrix1.scaleY * matrix2.translateY + matrix1.translateY,
+		skewX: matrix1.scaleX * matrix2.skewX + matrix1.skewX * matrix2.scaleY,
+		skewY: matrix1.skewY * matrix2.scaleX + matrix1.scaleY * matrix2.skewY,
+	};
+}
+
+export function composeMatrices(...matrices: TransformMatrix[]): TransformMatrix {
+	switch (matrices.length) {
+		case 0:
+			throw new Error('composeMatrices() requires arguments: was called with no args');
+		case 1:
+			return matrices[0];
+		case 2:
+			return multiplyMatrices(matrices[0], matrices[1]);
+		default: {
+			const [matrix1, matrix2, ...restMatrices] = matrices;
+			const matrix = multiplyMatrices(matrix1, matrix2);
+			return composeMatrices(matrix, ...restMatrices);
+		}
+	}
+}