• 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
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100

import { LINE_CAP, LINE_JOIN } from '@pixi/graphics';
import color from 'tinycolor2';

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

/**
 * Provides the `Paint` for an `SVGElement`. It will also respond to changes in the attributes of the element
 * (not implemented).
 * 
 * @public
 */
export class PaintProvider implements Paint
{
    public element: SVGElement;

    public fill: number | string;
    public opacity: number;
    public stroke: number | string;
    public strokeDashArray: number[];
    public strokeDashOffset: number;
    public strokeLineCap: LINE_CAP;
    public strokeLineJoin: LINE_JOIN;
    public strokeMiterLimit: number;
    public strokeWidth: number;

    public dirtyId = 0;

    /**
     * @param element - The element whose paint is to be provided.
     */
    constructor(element: SVGElement)
    {
        this.element = element;

        const fill = element.getAttribute('fill');
        const opacity = element.getAttribute('opacity');
        const stroke = element.getAttribute('stroke');
        const strokeDashArray = element.getAttribute('stroke-dasharray');
        const strokeDashOffset = element.getAttribute('stroke-dashoffset');
        const strokeLineCap = element.getAttribute('stroke-linecap');
        const strokeLineJoin = element.getAttribute('stroke-linejoin');
        const strokeMiterLimit = element.getAttribute('stroke-miterlimit');
        const strokeWidth = element.getAttribute('stroke-width');

        /* eslint-disable-next-line no-nested-ternary */
        this.fill = fill !== null ? (fill === 'none' ? 'none' : PaintProvider.parseColor(fill)) : null;
        this.opacity = opacity && parseFloat(opacity);
        this.stroke = stroke && PaintProvider.parseColor(element.getAttribute('stroke'));
        this.strokeDashArray = strokeDashArray
            && strokeDashArray
                ?.split(/[, ]+/g)
                .map((num) => parseFloat(num.trim()));
        this.strokeDashOffset = strokeDashOffset && parseFloat(strokeDashOffset);
        this.strokeLineCap = strokeLineCap as unknown as LINE_CAP;
        this.strokeLineJoin = strokeLineJoin as unknown as LINE_JOIN;
        this.strokeMiterLimit = strokeMiterLimit && parseFloat(strokeMiterLimit);
        this.strokeWidth = strokeWidth && parseFloat(strokeWidth);
    }

    /**
     * Parses the color attribute into an RGBA hexadecimal equivalent, if encoded. If the `colorString` is `none` or
     * is a `url(#id)` reference, it is returned as is.
     *
     * @param colorString
     * @see https://github.com/bigtimebuddy/pixi-svg/blob/89e4ab834fa4ef05b64741596516c732eae34daa/src/SVG.js#L106
     */
    public static parseColor(colorString: string): number | string
    {
        /* Modifications have been made. */
        /* Copyright (C) Matt Karl. */

        if (!colorString)
        {
            return 0;
        }
        if (colorString === 'none' || colorString.startsWith('url'))
        {
            return colorString;
        }

        if (colorString[0] === '#')
        {
            // Remove the hash
            colorString = colorString.substr(1);

            // Convert shortcolors fc9 to ffcc99
            if (colorString.length === 3)
            {
                colorString = colorString.replace(/([a-f0-9])/ig, '$1$1');
            }

            return parseInt(colorString, 16);
        }

        const { r, g, b } = color(colorString).toRgb();

        return (r << 16) + (g << 8) + b;
    }
}