- 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;
}
}