getSvgAnchorPointIn function

Finds an anchor of an element as seen on screen, in the coordinates of another element, whatever groups lie between: the center of a hub for the setRotate of a needle drawn in another group.

import { getSvgAnchorPointIn } from 'utils';

Signature

export function getSvgAnchorPointIn(element: SVGGraphicsElement, anchor: Anchor, target: SVGGraphicsElement): DOMPoint

Parameters

Name	Description
element	The element giving the point.
anchor	The point of its visible box, such as 'center'.
target	The element whose coordinates are wanted.

Returns

The point, in the coordinates of target, after its whole transform list.

Errors

• Throws TypeError: When an element is not rendered.

Example

const hub = getSvgAnchorPointIn(hubElement, 'center', needle);

Tests

Line coverage: 100 %.

• ✅ gives the point in the coordinates of an element of another group
• ✅ throws a TypeError for an element that is not rendered

Source

src/svg-transform/get-svg-anchor-point-in.ts (on GitHub)

Uses

• Anchor: One of the 9 points of a box: its corners, the middles of its sides, its center.
• getSvgAnchorPoint: Finds an anchor of the box an SVG element takes on screen: a corner, the middle of a side or the center.

Used by

• createSvgArcPath: Creates the d of an arc around the center of an element, in any group: the track of a gauge around its hub.
• createSvgArcTicksPath: Creates the d of evenly spaced graduations along an arc, around the center of an element in any group: count intervals give count + 1 ticks.
• createSvgPiePath: Creates the d of a pie slice joined to the center of an element, in any group: a radar sector, a remaining-time disk, to fill.
• getSvgArcPoint: Finds a point along an arc, in the coordinates of an element of any group: where to put the label of a graduation or a marker.

Files it needs

src/svg-transform/get-svg-anchor-point-in.ts imports, directly or not:

• src/svg-transform/anchor.ts
• src/svg-transform/get-svg-anchor-point.ts
• src/svg-transform/internal/get-anchor-point.ts
• src/svg-transform/internal/get-screen-matrix.ts

Source code

import type { Anchor } from './anchor';
import { getSvgAnchorPoint } from './get-svg-anchor-point';
import { getScreenMatrix } from './internal';

/**
 * Finds an anchor of an element as seen on screen, in the coordinates of another element, whatever groups
 * lie between: the center of a hub for the `setRotate` of a needle drawn in another group.
 *
 * @param element - The element giving the point.
 * @param anchor - The point of its visible box, such as `'center'`.
 * @param target - The element whose coordinates are wanted.
 * @returns The point, in the coordinates of `target`, after its whole `transform` list.
 * @throws {TypeError} When an element is not rendered.
 * @example
 * const hub = getSvgAnchorPointIn(hubElement, 'center', needle);
 */
export function getSvgAnchorPointIn(element: SVGGraphicsElement, anchor: Anchor, target: SVGGraphicsElement): DOMPoint {
  return getSvgAnchorPoint(element, anchor).matrixTransform(getScreenMatrix(target).inverse());
}

Test file

import { getSvgAnchorPointIn } from './get-svg-anchor-point-in';
import { renderSvg } from './testing';

describe(getSvgAnchorPointIn, () => {
  it('gives the point in the coordinates of an element of another group', () => {
    const byId = renderSvg(`
      <g transform="translate(100 100)"><circle id="hub" r="5" /></g>
      <g transform="scale(2)"><path id="path" /></g>
    `);
    expect(getSvgAnchorPointIn(byId('hub'), 'center', byId('path'))).toMatchObject({ x: 50, y: 50 });
  });

  it('throws a TypeError for an element that is not rendered', () => {
    const byId = renderSvg('<circle id="hub" r="5" />');
    const notRendered = { getScreenCTM: (): null => null } as unknown as SVGGraphicsElement;
    expect(() => getSvgAnchorPointIn(byId('hub'), 'center', notRendered)).toThrow(TypeError);
  });
});

Keywords: get, svg, anchor, point, in, svg transforms, function