Skip to content
This repository has been archived by the owner on Jun 28, 2021. It is now read-only.

Commit

Permalink
feat: Support PIXI v5 (#88)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: The support for Pixi v4 has been dropped

Co-authored-by: Romain <benzen@hotmail.fr>
  • Loading branch information
@exoego @motla @tleunen
2 people authored and tleunen committed Jan 24, 2020
1 parent 336bed0 commit eee5534
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 35 deletions.
2 changes: 1 addition & 1 deletion .happo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module.exports = {
bind: '0.0.0.0',
port: 4567,
sourceFiles: [
'node_modules/pixi.js/dist/pixi.js',
'node_modules/pixi.js-legacy/dist/pixi-legacy.js',
'dist/pixi-multistyle-text.umd.js',
'test/tests.js'
],
Expand Down
5 changes: 2 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,18 +35,17 @@
"license": "MIT",
"dependencies": {},
"devDependencies": {
"@types/pixi.js": "^4.8.2",
"argos-cli": "0.0.9",
"fs-extra": "^7.0.0",
"happo": "^5.0.0",
"happo-target-firefox": "^5.0.3",
"microbundle": "^0.7.0",
"pixi.js": "^4.8.2",
"pixi.js-legacy": "^5.2.0",
"standard-version": "^4.4.0",
"typescript": "^3.1.3"
},
"peerDependencies": {
"pixi.js": "^4.5.6"
"pixi.js": "^5.2.0"
},
"scripts": {
"demo": "npm run build && open demo/index.html",
Expand Down
100 changes: 69 additions & 31 deletions src/pixi-multistyle-text.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,39 @@

"use strict";

export interface ExtendedTextStyle extends PIXI.TextStyleOptions {
interface TextStyle {
align?: string;
breakWords?: boolean;
dropShadow?: boolean;
dropShadowAlpha?: number;
dropShadowAngle?: number;
dropShadowBlur?: number;
dropShadowColor?: string | number;
dropShadowDistance?: number;
fill?: string | string[] | number | number[] | CanvasGradient | CanvasPattern;
fillGradientType?: number;
fillGradientStops?: number[];
fontFamily?: string | string[];
fontSize?: number | string;
fontStyle?: string;
fontVariant?: string;
fontWeight?: string;
leading?: number;
letterSpacing?: number;
lineHeight?: number;
lineJoin?: string;
miterLimit?: number;
padding?: number;
stroke?: string | number;
strokeThickness?: number;
trim?: boolean;
textBaseline?: string;
whiteSpace?: string;
wordWrap?: boolean;
wordWrapWidth?: number;
}

export interface ExtendedTextStyle extends TextStyle {
valign?: "top" | "middle" | "bottom" | "baseline" | number;
debug?: boolean;
tagStyle?: "xml" | "bbcode";
Expand Down Expand Up @@ -102,6 +134,14 @@ const TAG = {
xml: ["<", ">"]
};

interface TextWithPrivateMembers extends PIXI.Text {
dirty: boolean;
_texture: PIXI.Texture;
_style: PIXI.TextStyle;
_onTextureUpdate(): void;
_generateFillStyle(style: object, lines: string[]): string | number | CanvasGradient;
}

export default class MultiStyleText extends PIXI.Text {
private static DEFAULT_TAG_STYLE: ExtendedTextStyle = {
align: "left",
Expand Down Expand Up @@ -197,8 +237,8 @@ export default class MultiStyleText extends PIXI.Text {
this.textStyles.align = this.assign({}, {align: ''});
}

this._style = new PIXI.TextStyle(this.textStyles["default"]);
this.dirty = true;
this.withPrivateMembers()._style = new PIXI.TextStyle(this.textStyles["default"]);
this.withPrivateMembers().dirty = true;
}

public setTagStyle(tag: string, style: ExtendedTextStyle): void {
Expand All @@ -208,8 +248,8 @@ export default class MultiStyleText extends PIXI.Text {
this.textStyles[tag] = this.assign({}, style);
}

this._style = new PIXI.TextStyle(this.textStyles["default"]);
this.dirty = true;
this.withPrivateMembers()._style = new PIXI.TextStyle(this.textStyles["default"]);
this.withPrivateMembers().dirty = true;
}

public deleteTagStyle(tag: string): void {
Expand All @@ -219,8 +259,8 @@ export default class MultiStyleText extends PIXI.Text {
delete this.textStyles[tag];
}

this._style = new PIXI.TextStyle(this.textStyles["default"]);
this.dirty = true;
this.withPrivateMembers()._style = new PIXI.TextStyle(this.textStyles["default"]);
this.withPrivateMembers().dirty = true;
}

private getTagRegex(captureName: boolean, captureMatch: boolean): RegExp {
Expand Down Expand Up @@ -340,7 +380,7 @@ export default class MultiStyleText extends PIXI.Text {
// don't display any incomplete tags at the end of text- good for scrolling text in games
const { tagStyle } = this.textStyles.default;
outputTextData[outputTextData.length-1].map( data => {
if (data.text.includes(TAG[tagStyle][0])) data.text = data.text.match(tagStyle === TAG_STYLE.bbcode ? /^(.*)\[/ : /^(.*)\</)[1]
if (data.text.includes(TAG[tagStyle][0])) data.text = data.text.match(tagStyle === TAG_STYLE.bbcode ? /^(.*)\[/ : /^(.*)\</)[1]
});

return outputTextData;
Expand Down Expand Up @@ -374,8 +414,12 @@ export default class MultiStyleText extends PIXI.Text {
return maxDistance + maxBlur;
}

public updateText(): void {
if (!this.dirty) {
private withPrivateMembers(): TextWithPrivateMembers {
return ((this as unknown) as TextWithPrivateMembers);
}

public updateText(): void {
if (!this.withPrivateMembers().dirty) {
return;
}

Expand All @@ -385,7 +429,7 @@ export default class MultiStyleText extends PIXI.Text {
let textStyles = this.textStyles;
let outputText = this.text;

if(this._style.wordWrap) {
if(this.withPrivateMembers()._style.wordWrap) {
outputText = this.wordWrap(this.text);
}

Expand Down Expand Up @@ -494,7 +538,7 @@ export default class MultiStyleText extends PIXI.Text {
let line = outputTextData[i];
let linePositionX: number;

switch (this._style.align) {
switch (this.withPrivateMembers()._style.align) {
case "left":
linePositionX = dropShadowPadding + maxStrokeThickness;
break;
Expand Down Expand Up @@ -645,15 +689,15 @@ export default class MultiStyleText extends PIXI.Text {
}
}
}
this.context.fillStyle = this._generateFillStyle(new PIXI.TextStyle(style), [text]) as string | CanvasGradient;
this.context.fillStyle = ((this as unknown) as TextWithPrivateMembers)._generateFillStyle(new PIXI.TextStyle(style), [text]) as string | CanvasGradient;
// Typecast required for proper typechecking

this.context.fillText(text, x, y);
});

// Fourth pass: collect the bounding boxes and draw the debug information
drawingData.forEach(({ style, text, x, y, width, ascent, descent, tag }) => {
let offset = -this._style.padding - this.getDropShadowPadding();
let offset = -this.withPrivateMembers()._style.padding - this.getDropShadowPadding();

this.hitboxes.push({
tag,
Expand Down Expand Up @@ -744,7 +788,7 @@ export default class MultiStyleText extends PIXI.Text {
let re = this.getTagRegex(true, true);

const lines = text.split("\n");
const wordWrapWidth = this._style.wordWrapWidth;
const wordWrapWidth = this.withPrivateMembers()._style.wordWrapWidth;
let styleStack = [this.assign({}, this.textStyles["default"])];
this.context.font = this.getFontString(this.textStyles["default"]);

Expand All @@ -771,7 +815,7 @@ export default class MultiStyleText extends PIXI.Text {
for (let k = 0; k < words.length; k++) {
const wordWidth = this.context.measureText(words[k]).width;

if (this._style.breakWords && wordWidth > spaceLeft) {
if (this.withPrivateMembers()._style.breakWords && wordWidth > spaceLeft) {
// Part should be split in the middle
const characters = words[k].split('');

Expand All @@ -791,7 +835,7 @@ export default class MultiStyleText extends PIXI.Text {
spaceLeft -= characterWidth;
}
}
} else if(this._style.breakWords) {
} else if(this.withPrivateMembers()._style.breakWords) {
result += words[k];
spaceLeft -= wordWidth;
} else {
Expand Down Expand Up @@ -831,32 +875,26 @@ export default class MultiStyleText extends PIXI.Text {
}

protected updateTexture() {
const texture = this._texture;
const texture = this.withPrivateMembers()._texture;

let dropShadowPadding = this.getDropShadowPadding();

texture.baseTexture.hasLoaded = true;
texture.baseTexture.resolution = this.resolution;

texture.baseTexture.realWidth = this.canvas.width;
texture.baseTexture.realHeight = this.canvas.height;
texture.baseTexture.width = this.canvas.width / this.resolution;
texture.baseTexture.height = this.canvas.height / this.resolution;
texture.baseTexture.setRealSize(this.canvas.width, this.canvas.height, this.resolution);
texture.trim.width = texture.frame.width = this.canvas.width / this.resolution;
texture.trim.height = texture.frame.height = this.canvas.height / this.resolution;

texture.trim.x = -this._style.padding - dropShadowPadding;
texture.trim.y = -this._style.padding - dropShadowPadding;
texture.trim.x = -this.withPrivateMembers()._style.padding - dropShadowPadding;
texture.trim.y = -this.withPrivateMembers()._style.padding - dropShadowPadding;

texture.orig.width = texture.frame.width - (this._style.padding + dropShadowPadding) * 2;
texture.orig.height = texture.frame.height - (this._style.padding + dropShadowPadding) * 2;
texture.orig.width = texture.frame.width - (this.withPrivateMembers()._style.padding + dropShadowPadding) * 2;
texture.orig.height = texture.frame.height - (this.withPrivateMembers()._style.padding + dropShadowPadding) * 2;

// call sprite onTextureUpdate to update scale if _width or _height were set
this._onTextureUpdate();
this.withPrivateMembers()._onTextureUpdate();

texture.baseTexture.emit('update', texture.baseTexture);

this.dirty = false;
this.withPrivateMembers().dirty = false;
}

// Lazy fill for Object.assign
Expand Down

0 comments on commit eee5534

Please sign in to comment.