• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60

import { Container } from '@pixi/display';

import type { SVGGraphicsNode } from './SVGGraphicsNode';

/**
 * Container for rendering SVG <use /> elements.
 * 
 * @public
 */
export class SVGUseNode extends Container
{
    public isRefExternal = false;

    private _ref: SVGGraphicsNode;

    /**
     * Embeds the `SVGUseElement` into this node.
     *
     * @param element - The <use /> element to draw.
     */
    embedUse(element: SVGUseElement): void
    {
        element.x.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
        element.y.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
        element.width.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
        element.height.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);

        const x = element.x.baseVal.valueInSpecifiedUnits;
        const y = element.y.baseVal.valueInSpecifiedUnits;

        // TODO: width,height only have an efffect if the reference element is <svg> or <symbol>.
        // const width = element.width.baseVal.valueInSpecifiedUnits;
        // const height = element.height.baseVal.valueInSpecifiedUnits;

        this.position.set(x, y);
    }

    /**
     * The node that renders the element referenced by a &lt;element /&gt; element.
     */
    get ref(): SVGGraphicsNode
    {
        return this._ref;
    }
    set ref(value: SVGGraphicsNode)
    {
        if (this._ref)
        {
            if (this._ref === value)
            {
                return;
            }

            this.removeChild(this._ref);
        }

        this._ref = value;
        this.addChild(this._ref);
    }
}