@antv/t8/lib/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.

'use strict';

var tslib = require('tslib');
var jsxRuntime = require('preact/jsx-runtime');
var hooks = require('preact/hooks');
var getElementFontSize = require('./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 = hooks.useRef(null);
    // State to store calculated size
    var _a = hooks.useState(getElementFontSize.DEFAULT_FONT_SIZE), size = _a[0], setSize = _a[1];
    // Calculate size based on font size after component mounts
    hooks.useLayoutEffect(function () {
        if (ele.current) {
            setSize(getElementFontSize.getElementFontSize(ele.current, getElementFontSize.DEFAULT_FONT_SIZE));
        }
    }, []);
    /**
     * SVG wrapper component with consistent styling
     * Sets proper alignment within text content
     */
    var Svg = function (_a) {
        var children = _a.children, otherProps = tslib.__rest(_a, ["children"]);
        return (jsxRuntime.jsx("svg", tslib.__assign({ style: {
                margin: '0px 4px',
                transform: 'translate(0px, 0.125em)', // Adjust vertical alignment
            }, ref: ele }, otherProps, { children: children })));
    };
    return [Svg, size];
};

exports.useSvgWrapper = useSvgWrapper;
//# sourceMappingURL=useSvgWrapper.js.map