- 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
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
- 710
- 711
- 712
- 713
- 714
- 715
- 716
- 717
- 718
- 719
- 720
- 721
- 722
- 723
- 724
- 725
- 726
- 727
- 728
- 729
- 730
- 731
- 732
- 733
- 734
- 735
- 736
- 737
- 738
- 739
- 740
- 741
- 742
- 743
- 744
- 745
- 746
- 747
- 748
- 749
- 750
- 751
- 752
- 753
- 754
- 755
- 756
- 757
- 758
- 759
- 760
- 761
- 762
- 763
- 764
- 765
- 766
- 767
- 768
- 769
- 770
- 771
- 772
- 773
- 774
- 775
- 776
- 777
- 778
- 779
- 780
- 781
- 782
- 783
- 784
- 785
- 786
- 787
- 788
- 789
- 790
- 791
- 792
- 793
- 794
- 795
- 796
- 797
- 798
- 799
- 800
- 801
- 802
- 803
- 804
- 805
- 806
- 807
- 808
- 809
- 810
- 811
- 812
- 813
- 814
- 815
- 816
- 817
- 818
- 819
- 820
- 821
- 822
- 823
- 824
- 825
- 826
- 827
- 828
- 829
// disabling eslint for now, going to rewrite this in v5
/* eslint-disable */
import { TEXT_GRADIENT } from './const';
import { hex2string } from '@pixi/utils';
export type TextStyleAlign = 'left'|'center'|'right'|'justify';
export type TextStyleFill = string|string[]|number|number[]|CanvasGradient|CanvasPattern;
export type TextStyleFontStyle = 'normal'|'italic'|'oblique';
export type TextStyleFontVariant = 'normal'|'small-caps';
export type TextStyleFontWeight = 'normal'|'bold'|'bolder'|'lighter'|'100'|'200'|'300'|'400'|'500'|'600'|'700'|'800'|'900';
export type TextStyleLineJoin = 'miter'|'round'|'bevel';
export type TextStyleTextBaseline = 'alphabetic'|'top'|'hanging'|'middle'|'ideographic'|'bottom';
export type TextStyleWhiteSpace = 'normal'|'pre'|'pre-line';
export interface ITextStyle {
align: TextStyleAlign;
breakWords: boolean;
dropShadow: boolean;
dropShadowAlpha: number;
dropShadowAngle: number;
dropShadowBlur: number;
dropShadowColor: string|number;
dropShadowDistance: number;
fill: TextStyleFill;
fillGradientType: TEXT_GRADIENT;
fillGradientStops: number[];
fontFamily: string | string[];
fontSize: number | string;
fontStyle: TextStyleFontStyle;
fontVariant: TextStyleFontVariant;
fontWeight: TextStyleFontWeight;
letterSpacing: number;
lineHeight: number;
lineJoin: TextStyleLineJoin;
miterLimit: number;
padding: number;
stroke: string|number;
strokeThickness: number;
textBaseline: TextStyleTextBaseline;
trim: boolean;
whiteSpace: TextStyleWhiteSpace;
wordWrap: boolean;
wordWrapWidth: number;
leading: number;
}
const defaultStyle: ITextStyle = {
align: 'left',
breakWords: false,
dropShadow: false,
dropShadowAlpha: 1,
dropShadowAngle: Math.PI / 6,
dropShadowBlur: 0,
dropShadowColor: 'black',
dropShadowDistance: 5,
fill: 'black',
fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL,
fillGradientStops: [],
fontFamily: 'Arial',
fontSize: 26,
fontStyle: 'normal',
fontVariant: 'normal',
fontWeight: 'normal',
letterSpacing: 0,
lineHeight: 0,
lineJoin: 'miter',
miterLimit: 10,
padding: 0,
stroke: 'black',
strokeThickness: 0,
textBaseline: 'alphabetic',
trim: false,
whiteSpace: 'pre',
wordWrap: false,
wordWrapWidth: 100,
leading: 0,
};
const genericFontFamilies = [
'serif',
'sans-serif',
'monospace',
'cursive',
'fantasy',
'system-ui',
];
/**
* A TextStyle Object contains information to decorate a Text objects.
*
* An instance can be shared between multiple Text objects; then changing the style will update all text objects using it.
*
* A tool can be used to generate a text style [here](https://pixijs.io/pixi-text-style).
*
* @memberof PIXI
*/
export class TextStyle implements ITextStyle
{
public styleID: number;
protected _align: TextStyleAlign;
protected _breakWords: boolean;
protected _dropShadow: boolean;
protected _dropShadowAlpha: number;
protected _dropShadowAngle: number;
protected _dropShadowBlur: number;
protected _dropShadowColor: string|number;
protected _dropShadowDistance: number;
protected _fill: TextStyleFill;
protected _fillGradientType: TEXT_GRADIENT;
protected _fillGradientStops: number[];
protected _fontFamily: string|string[];
protected _fontSize: number|string;
protected _fontStyle: TextStyleFontStyle;
protected _fontVariant: TextStyleFontVariant;
protected _fontWeight: TextStyleFontWeight;
protected _letterSpacing: number;
protected _lineHeight: number;
protected _lineJoin: TextStyleLineJoin;
protected _miterLimit: number;
protected _padding: number;
protected _stroke: string|number;
protected _strokeThickness: number;
protected _textBaseline: TextStyleTextBaseline;
protected _trim: boolean;
protected _whiteSpace: TextStyleWhiteSpace;
protected _wordWrap: boolean;
protected _wordWrapWidth: number;
protected _leading: number;
/**
* @param {object} [style] - The style parameters
* @param {string} [style.align='left'] - Alignment for multiline text ('left', 'center' or 'right'),
* does not affect single line text
* @param {boolean} [style.breakWords=false] - Indicates if lines can be wrapped within words, it
* needs wordWrap to be set to true
* @param {boolean} [style.dropShadow=false] - Set a drop shadow for the text
* @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow
* @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow
* @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius
* @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00'
* @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow
* @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas
* fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient
* eg ['#000000','#FFFFFF']
* {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN}
* @param {number} [style.fillGradientType=PIXI.TEXT_GRADIENT.LINEAR_VERTICAL] - If fill is an array of colours
* to create a gradient, this can change the type/direction of the gradient. See {@link PIXI.TEXT_GRADIENT}
* @param {number[]} [style.fillGradientStops] - If fill is an array of colours to create a gradient, this array can set
* the stop points (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them.
* @param {string|string[]} [style.fontFamily='Arial'] - The font family
* @param {number|string} [style.fontSize=26] - The font size (as a number it converts to px, but as a string,
* equivalents are '26px','20pt','160%' or '1.6em')
* @param {string} [style.fontStyle='normal'] - The font style ('normal', 'italic' or 'oblique')
* @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps')
* @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100',
* '200', '300', '400', '500', '600', '700', '800' or '900')
* @param {number} [style.leading=0] - The space between lines
* @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0
* @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses
* @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve
* spiked text issues. Possible values "miter" (creates a sharp corner), "round" (creates a round corner) or "bevel"
* (creates a squared corner).
* @param {number} [style.miterLimit=10] - The miter limit to use when using the 'miter' lineJoin mode. This can reduce
* or increase the spikiness of rendered text.
* @param {number} [style.padding=0] - Occasionally some fonts are cropped. Adding some padding will prevent this from
* happening by adding padding to all sides of the text.
* @param {string|number} [style.stroke='black'] - A canvas fillstyle that will be used on the text stroke
* e.g 'blue', '#FCFF00'
* @param {number} [style.strokeThickness=0] - A number that represents the thickness of the stroke.
* Default is 0 (no stroke)
* @param {boolean} [style.trim=false] - Trim transparent borders
* @param {string} [style.textBaseline='alphabetic'] - The baseline of the text that is rendered.
* @param {string} [style.whiteSpace='pre'] - Determines whether newlines & spaces are collapsed or preserved "normal"
* (collapse, collapse), "pre" (preserve, preserve) | "pre-line" (preserve, collapse). It needs wordWrap to be set to true
* @param {boolean} [style.wordWrap=false] - Indicates if word wrap should be used
* @param {number} [style.wordWrapWidth=100] - The width at which text will wrap, it needs wordWrap to be set to true
*/
constructor(style?: Partial<ITextStyle>)
{
this.styleID = 0;
this.reset();
deepCopyProperties(this, style, style);
}
/**
* Creates a new TextStyle object with the same values as this one.
* Note that the only the properties of the object are cloned.
*
* @return New cloned TextStyle object
*/
public clone(): TextStyle
{
const clonedProperties: Partial<ITextStyle> = {};
deepCopyProperties(clonedProperties, this, defaultStyle);
return new TextStyle(clonedProperties);
}
/** Resets all properties to the defaults specified in TextStyle.prototype._default */
public reset(): void
{
deepCopyProperties(this, defaultStyle, defaultStyle);
}
/**
* Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
*
* @member {string}
*/
get align(): TextStyleAlign
{
return this._align;
}
set align(align: TextStyleAlign)
{
if (this._align !== align)
{
this._align = align;
this.styleID++;
}
}
/** Indicates if lines can be wrapped within words, it needs wordWrap to be set to true. */
get breakWords(): boolean
{
return this._breakWords;
}
set breakWords(breakWords: boolean)
{
if (this._breakWords !== breakWords)
{
this._breakWords = breakWords;
this.styleID++;
}
}
/** Set a drop shadow for the text. */
get dropShadow(): boolean
{
return this._dropShadow;
}
set dropShadow(dropShadow: boolean)
{
if (this._dropShadow !== dropShadow)
{
this._dropShadow = dropShadow;
this.styleID++;
}
}
/** Set alpha for the drop shadow. */
get dropShadowAlpha(): number
{
return this._dropShadowAlpha;
}
set dropShadowAlpha(dropShadowAlpha: number)
{
if (this._dropShadowAlpha !== dropShadowAlpha)
{
this._dropShadowAlpha = dropShadowAlpha;
this.styleID++;
}
}
/** Set a angle of the drop shadow. */
get dropShadowAngle(): number
{
return this._dropShadowAngle;
}
set dropShadowAngle(dropShadowAngle: number)
{
if (this._dropShadowAngle !== dropShadowAngle)
{
this._dropShadowAngle = dropShadowAngle;
this.styleID++;
}
}
/** Set a shadow blur radius. */
get dropShadowBlur(): number
{
return this._dropShadowBlur;
}
set dropShadowBlur(dropShadowBlur: number)
{
if (this._dropShadowBlur !== dropShadowBlur)
{
this._dropShadowBlur = dropShadowBlur;
this.styleID++;
}
}
/** A fill style to be used on the dropshadow e.g 'red', '#00FF00'. */
get dropShadowColor(): number | string
{
return this._dropShadowColor;
}
set dropShadowColor(dropShadowColor: number | string)
{
const outputColor = getColor(dropShadowColor);
if (this._dropShadowColor !== outputColor)
{
this._dropShadowColor = outputColor;
this.styleID++;
}
}
/** Set a distance of the drop shadow. */
get dropShadowDistance(): number
{
return this._dropShadowDistance;
}
set dropShadowDistance(dropShadowDistance: number)
{
if (this._dropShadowDistance !== dropShadowDistance)
{
this._dropShadowDistance = dropShadowDistance;
this.styleID++;
}
}
/**
* A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'.
*
* Can be an array to create a gradient eg ['#000000','#FFFFFF']
* {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN}
*
* @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern}
*/
get fill(): TextStyleFill
{
return this._fill;
}
set fill(fill: TextStyleFill)
{
// TODO: Can't have different types for getter and setter. The getter shouldn't have the number type as
// the setter converts to string. See this thread for more details:
// https://github.com/microsoft/TypeScript/issues/2521
// TODO: Not sure if getColor works properly with CanvasGradient and/or CanvasPattern, can't pass in
// without casting here.
const outputColor = getColor(fill as any);
if (this._fill !== outputColor)
{
this._fill = outputColor;
this.styleID++;
}
}
/**
* If fill is an array of colours to create a gradient, this can change the type/direction of the gradient.
*
* @see PIXI.TEXT_GRADIENT
*/
get fillGradientType(): TEXT_GRADIENT
{
return this._fillGradientType;
}
set fillGradientType(fillGradientType: TEXT_GRADIENT)
{
if (this._fillGradientType !== fillGradientType)
{
this._fillGradientType = fillGradientType;
this.styleID++;
}
}
/**
* If fill is an array of colours to create a gradient, this array can set the stop points
* (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them.
*/
get fillGradientStops(): number[]
{
return this._fillGradientStops;
}
set fillGradientStops(fillGradientStops: number[])
{
if (!areArraysEqual(this._fillGradientStops,fillGradientStops))
{
this._fillGradientStops = fillGradientStops;
this.styleID++;
}
}
/** The font family. */
get fontFamily(): string | string[]
{
return this._fontFamily;
}
set fontFamily(fontFamily: string | string[])
{
if (this.fontFamily !== fontFamily)
{
this._fontFamily = fontFamily;
this.styleID++;
}
}
/**
* The font size
* (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')
*/
get fontSize(): number | string
{
return this._fontSize;
}
set fontSize(fontSize: number | string)
{
if (this._fontSize !== fontSize)
{
this._fontSize = fontSize;
this.styleID++;
}
}
/**
* The font style
* ('normal', 'italic' or 'oblique')
*
* @member {string}
*/
get fontStyle(): TextStyleFontStyle
{
return this._fontStyle;
}
set fontStyle(fontStyle: TextStyleFontStyle)
{
if (this._fontStyle !== fontStyle)
{
this._fontStyle = fontStyle;
this.styleID++;
}
}
/**
* The font variant
* ('normal' or 'small-caps')
*
* @member {string}
*/
get fontVariant(): TextStyleFontVariant
{
return this._fontVariant;
}
set fontVariant(fontVariant: TextStyleFontVariant)
{
if (this._fontVariant !== fontVariant)
{
this._fontVariant = fontVariant;
this.styleID++;
}
}
/**
* The font weight
* ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900')
*
* @member {string}
*/
get fontWeight(): TextStyleFontWeight
{
return this._fontWeight;
}
set fontWeight(fontWeight: TextStyleFontWeight)
{
if (this._fontWeight !== fontWeight)
{
this._fontWeight = fontWeight;
this.styleID++;
}
}
/** The amount of spacing between letters, default is 0. */
get letterSpacing(): number
{
return this._letterSpacing;
}
set letterSpacing(letterSpacing: number)
{
if (this._letterSpacing !== letterSpacing)
{
this._letterSpacing = letterSpacing;
this.styleID++;
}
}
/** The line height, a number that represents the vertical space that a letter uses. */
get lineHeight(): number
{
return this._lineHeight;
}
set lineHeight(lineHeight: number)
{
if (this._lineHeight !== lineHeight)
{
this._lineHeight = lineHeight;
this.styleID++;
}
}
/** The space between lines. */
get leading(): number
{
return this._leading;
}
set leading(leading: number)
{
if (this._leading !== leading)
{
this._leading = leading;
this.styleID++;
}
}
/**
* The lineJoin property sets the type of corner created, it can resolve spiked text issues.
* Default is 'miter' (creates a sharp corner).
*
* @member {string}
*/
get lineJoin(): TextStyleLineJoin
{
return this._lineJoin;
}
set lineJoin(lineJoin: TextStyleLineJoin)
{
if (this._lineJoin !== lineJoin)
{
this._lineJoin = lineJoin;
this.styleID++;
}
}
/**
* The miter limit to use when using the 'miter' lineJoin mode.
*
* This can reduce or increase the spikiness of rendered text.
*/
get miterLimit(): number
{
return this._miterLimit;
}
set miterLimit(miterLimit: number)
{
if (this._miterLimit !== miterLimit)
{
this._miterLimit = miterLimit;
this.styleID++;
}
}
/**
* Occasionally some fonts are cropped. Adding some padding will prevent this from happening
* by adding padding to all sides of the text.
*/
get padding(): number
{
return this._padding;
}
set padding(padding: number)
{
if (this._padding !== padding)
{
this._padding = padding;
this.styleID++;
}
}
/**
* A canvas fillstyle that will be used on the text stroke
* e.g 'blue', '#FCFF00'
*/
get stroke(): string | number
{
return this._stroke;
}
set stroke(stroke: string | number)
{
// TODO: Can't have different types for getter and setter. The getter shouldn't have the number type as
// the setter converts to string. See this thread for more details:
// https://github.com/microsoft/TypeScript/issues/2521
const outputColor = getColor(stroke);
if (this._stroke !== outputColor)
{
this._stroke = outputColor;
this.styleID++;
}
}
/**
* A number that represents the thickness of the stroke.
*
* @default 0
*/
get strokeThickness(): number
{
return this._strokeThickness;
}
set strokeThickness(strokeThickness: number)
{
if (this._strokeThickness !== strokeThickness)
{
this._strokeThickness = strokeThickness;
this.styleID++;
}
}
/**
* The baseline of the text that is rendered.
*
* @member {string}
*/
get textBaseline(): TextStyleTextBaseline
{
return this._textBaseline;
}
set textBaseline(textBaseline: TextStyleTextBaseline)
{
if (this._textBaseline !== textBaseline)
{
this._textBaseline = textBaseline;
this.styleID++;
}
}
/** Trim transparent borders. */
get trim(): boolean
{
return this._trim;
}
set trim(trim: boolean)
{
if (this._trim !== trim)
{
this._trim = trim;
this.styleID++;
}
}
/**
* How newlines and spaces should be handled.
* Default is 'pre' (preserve, preserve).
*
* value | New lines | Spaces
* --- | --- | ---
* 'normal' | Collapse | Collapse
* 'pre' | Preserve | Preserve
* 'pre-line' | Preserve | Collapse
*
* @member {string}
*/
get whiteSpace(): TextStyleWhiteSpace
{
return this._whiteSpace;
}
set whiteSpace(whiteSpace: TextStyleWhiteSpace)
{
if (this._whiteSpace !== whiteSpace)
{
this._whiteSpace = whiteSpace;
this.styleID++;
}
}
/** Indicates if word wrap should be used. */
get wordWrap(): boolean
{
return this._wordWrap;
}
set wordWrap(wordWrap: boolean)
{
if (this._wordWrap !== wordWrap)
{
this._wordWrap = wordWrap;
this.styleID++;
}
}
/** The width at which text will wrap, it needs wordWrap to be set to true. */
get wordWrapWidth(): number
{
return this._wordWrapWidth;
}
set wordWrapWidth(wordWrapWidth: number)
{
if (this._wordWrapWidth !== wordWrapWidth)
{
this._wordWrapWidth = wordWrapWidth;
this.styleID++;
}
}
/**
* Generates a font style string to use for `TextMetrics.measureFont()`.
*
* @return Font style string, for passing to `TextMetrics.measureFont()`
*/
public toFontString(): string
{
// build canvas api font setting from individual components. Convert a numeric this.fontSize to px
const fontSizeString = (typeof this.fontSize === 'number') ? `${this.fontSize}px` : this.fontSize;
// Clean-up fontFamily property by quoting each font name
// this will support font names with spaces
let fontFamilies: string|string[] = this.fontFamily;
if (!Array.isArray(this.fontFamily))
{
fontFamilies = this.fontFamily.split(',');
}
for (let i = fontFamilies.length - 1; i >= 0; i--)
{
// Trim any extra white-space
let fontFamily = fontFamilies[i].trim();
// Check if font already contains strings
if (!(/([\"\'])[^\'\"]+\1/).test(fontFamily) && genericFontFamilies.indexOf(fontFamily) < 0)
{
fontFamily = `"${fontFamily}"`;
}
(fontFamilies as string[])[i] = fontFamily;
}
return `${this.fontStyle} ${this.fontVariant} ${this.fontWeight} ${fontSizeString} ${(fontFamilies as string[]).join(',')}`;
}
}
/**
* Utility function to convert hexadecimal colors to strings, and simply return the color if it's a string.
* @private
* @param color
* @return The color as a string.
*/
function getSingleColor(color: string|number): string
{
if (typeof color === 'number')
{
return hex2string(color);
}
else if (typeof color === 'string')
{
if ( color.indexOf('0x') === 0 )
{
color = color.replace('0x', '#');
}
}
return color;
}
/**
* Utility function to convert hexadecimal colors to strings, and simply return the color if it's a string.
* This version can also convert array of colors
* @private
* @param color
* @return The color as a string.
*/
function getColor(color: (string|number)[]): string[];
function getColor(color: string|number): string;
function getColor(color: string|number|(string|number)[]): string|string[]
{
if (!Array.isArray(color))
{
return getSingleColor(color);
}
else
{
for (let i = 0; i < color.length; ++i)
{
color[i] = getSingleColor(color[i]);
}
return color as string[];
}
}
/**
* Utility function to convert hexadecimal colors to strings, and simply return the color if it's a string.
* This version can also convert array of colors
* @private
* @param array1 - First array to compare
* @param array2 - Second array to compare
* @return Do the arrays contain the same values in the same order
*/
function areArraysEqual<T>(array1: T[], array2: T[]): boolean
{
if (!Array.isArray(array1) || !Array.isArray(array2))
{
return false;
}
if (array1.length !== array2.length)
{
return false;
}
for (let i = 0; i < array1.length; ++i)
{
if (array1[i] !== array2[i])
{
return false;
}
}
return true;
}
/**
* Utility function to ensure that object properties are copied by value, and not by reference
* @private
* @param target - Target object to copy properties into
* @param source - Source object for the properties to copy
* @param propertyObj - Object containing properties names we want to loop over
*/
function deepCopyProperties(target: Record<string, any>, source: Record<string, any>, propertyObj: Record<string, any>): void {
for (const prop in propertyObj) {
if (Array.isArray(source[prop])) {
target[prop] = source[prop].slice();
} else {
target[prop] = source[prop];
}
}
}