@antv/t8/es/charts/hooks/useSvgWrapper.js

T8 is a text visualization solution for unstructured data within the AntV technology stack, and it is a declarative JSON Schema syntax that can be used to describe the content of data interpretation reports.

import { __rest, __assign } from 'tslib';
import { jsx } from 'preact/jsx-runtime';
import { useRef, useState, useLayoutEffect } from 'preact/hooks';
import { DEFAULT_FONT_SIZE, getElementFontSize } from './getElementFontSize.js';

/**
 * Custom hook that provides an SVG wrapper component and its calculated size
 *
 * This hook creates an SVG container that automatically sizes itself based on
 * the font size of its parent element. This allows charts to scale properly
 * within text content.
 *
 * @returns [Svg, size] - A tuple containing:
 *   - Svg: A component to wrap SVG content
 *   - size: The calculated size based on parent font size
 */
var useSvgWrapper = function () {
    // Reference to the SVG element to measure font size
    var ele = useRef(null);
    // State to store calculated size
    var _a = useState(DEFAULT_FONT_SIZE), size = _a[0], setSize = _a[1];
    // Calculate size based on font size after component mounts
    useLayoutEffect(function () {
        if (ele.current) {
            setSize(getElementFontSize(ele.current, DEFAULT_FONT_SIZE));
        }
    }, []);
    /**
     * SVG wrapper component with consistent styling
     * Sets proper alignment within text content
     */
    var Svg = function (_a) {
        var children = _a.children, otherProps = __rest(_a, ["children"]);
        return (jsx("svg", __assign({ style: {
                margin: '0px 4px',
                transform: 'translate(0px, 0.125em)', // Adjust vertical alignment
            }, ref: ele }, otherProps, { children: children })));
    };
    return [Svg, size];
};

export { useSvgWrapper };
//# sourceMappingURL=useSvgWrapper.js.map