All files / svg-transform svg-translate-by.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
import { createMatrix, createOrder, inOwnAxes } from './internal';
import type { SvgTransformOrder } from './svg-transform-order';
 
/**
 * An order of `applySvgTransforms` that moves the element along its own axes, in its own units: turned by
 * 90°, "to the right" goes down on screen. After `svgRotateTo(0)` and `svgFlipTo(false)`, its axes are those of
 * the screen.
 *
 * @param dx - The distance along its width.
 * @param dy - The distance along its height.
 * @returns The order, to change with `set(dx, dy)`.
 * @example
 * const position = svgTranslateBy(0, 0);
 * applySvgTransforms(train, [position]);
 * position.set(10, 0); // 10 units forward, where the train points
 */
export function svgTranslateBy(dx: number, dy: number): SvgTransformOrder<[dx: number, dy: number]> {
  return createOrder([dx, dy], (element, screen, x, y) => inOwnAxes(screen, createMatrix(element).translate(x, y)));
}