@zsnout/ithkuil/script/utilities/anchor.js

A set of tools which can generate and parse romanized Ithkuil text and which can generate Ithkuil script from text and JSON data.

import { jsx as _jsx } from "@zsnout/ithkuil-jsx/jsx-runtime";
import { getBBox } from "./get-bbox.js";
import { Translate } from "./translate.js";
/**
 * Anchors an element to any coordinates based on one of its corners or edges or
 * its center. For example, `<Anchor at="tl">...</Anchor>` anchors the top-left
 * corner of its content to (0, 0).
 *
 * @param props Properties modifying the anchor's placement.
 * @returns A translated element anchored to (x, y) at one of its corners or
 *   edges or its center.
 */
export function Anchor(props) {
    const children = props.children instanceof SVGGraphicsElement ?
        props.children
        : (_jsx("g", { children: props.children }));
    const box = getBBox(children);
    const y = props.at[0];
    const x = props.at[1];
    const finalX = (x == "l" ? -box.x
        : x == "r" ? -box.x - box.width
            : -box.x - box.width / 2) + (props.x ?? 0);
    const finalY = (y == "t" ? -box.y
        : y == "b" ? -box.y - box.height
            : -box.y - box.height / 2) + (props.y ?? 0);
    return (_jsx(Translate, { x: finalX, y: finalY, children: children }));
}
/**
 * Anchors an element's x-position to any coordinates based on one of its
 * corners or edges or its center while leaving its vertical position unchanged.
 * For example, `<AnchorX at="l">...</AnchorX>` anchors the left edge of its
 * content to x=0.
 *
 * @param props Properties modifying the anchor's placement.
 * @returns A translated element anchored to (x, y) at one of its corners or
 *   edges or its center.
 */
export function AnchorX(props) {
    const children = props.children instanceof SVGGraphicsElement ?
        props.children
        : (_jsx("g", { children: props.children }));
    const box = getBBox(children);
    const x = props.at;
    return (_jsx(Translate, { x: (x == "l" ? -box.x
            : x == "r" ? -box.x - box.width
                : -box.x - box.width / 2) + (props.x ?? 0), y: props.y ?? 0, children: children }));
}
/**
 * Anchors an element's y-position to any coordinates based on one of its
 * corners or edges or its center while leaving its horizontal position
 * unchanged. For example, `<AnchorY at="t">...</AnchorY>` anchors the top edge
 * of its content to y=0.
 *
 * @param props Properties modifying the anchor's placement.
 * @returns A translated element anchored to (x, y) at one of its corners or
 *   edges or its center.
 */
export function AnchorY(props) {
    const children = props.children instanceof SVGGraphicsElement ?
        props.children
        : (_jsx("g", { children: props.children }));
    const box = getBBox(children);
    const y = props.at;
    return (_jsx(Translate, { x: props.x ?? 0, y: (y == "t" ? -box.y
            : y == "b" ? -box.y - box.height
                : -box.y - box.height / 2) + (props.y ?? 0), children: children }));
}