diff --git a/package.json b/package.json index 663738b..c9852e4 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,10 @@ "postbuild:types": "api-extractor run --local", "demo": "run-p watch serve", "lint": "eslint src test", + "lint:fix": "npm run lint -- --fix", "types": "tsc -noEmit", "test": "run-s lint types unit-test build", - "unit-test": "jest --silent", + "unit-test": "jest", "publish:patch": "npm version patch && run-s publish:skip", "publish:minor": "npm version minor && run-s publish:skip", "publish:major": "npm version major && run-s publish:skip", diff --git a/src/HTMLText.ts b/src/HTMLText.ts index d41a64f..42fb56f 100644 --- a/src/HTMLText.ts +++ b/src/HTMLText.ts @@ -16,6 +16,13 @@ import type { IDestroyOptions } from '@pixi/display'; */ export class HTMLText extends Sprite { + /** Default opens when destroying */ + public static defaultDestroyOptions: IDestroyOptions = { + texture: true, + children: false, + baseTexture: true, + }; + /** Default maxWidth, set at construction */ public static defaultMaxWidth = 2024; @@ -47,6 +54,7 @@ export class HTMLText extends Sprite private _autoResolution = true; private _loading = false; private _shadow: HTMLElement; + private _shadowRoot: ShadowRoot; private localStyleID = -1; private dirty = false; @@ -97,11 +105,9 @@ export class HTMLText extends Sprite this._foreignObject.appendChild(domElement); this._image = new Image(); this._autoResolution = HTMLText.defaultAutoResolution; - - const shadowRoot = shadow.attachShadow({ mode: 'open' }); - - shadowRoot.appendChild(svgRoot); - shadow.dataset.pixiId = '@pixi/text-html'; + this._shadowRoot = shadow.attachShadow({ mode: 'open' }); + this._shadowRoot.appendChild(svgRoot); + shadow.setAttribute('data-pixi-html-text', '1'); Object.assign(shadow.style, { position: 'absolute', top: '0', @@ -299,6 +305,13 @@ export class HTMLText extends Sprite */ destroy(options?: boolean | IDestroyOptions | undefined) { + if (typeof options === 'boolean') + { + options = { children: options }; + } + + options = Object.assign({}, HTMLText.defaultDestroyOptions, options); + super.destroy(options); const forceClear: any = null; @@ -317,14 +330,20 @@ export class HTMLText extends Sprite } this.canvas = forceClear; this._style = forceClear; + this._svgRoot?.remove(); this._svgRoot = forceClear; + this._domElement?.remove(); this._domElement = forceClear; + this._foreignObject?.remove(); this._foreignObject = forceClear; + this._styleElement?.remove(); this._styleElement = forceClear; + this._shadow?.remove(); + this._shadow = forceClear; + this._shadowRoot = forceClear; this._image.onload = null; this._image.src = ''; this._image = forceClear; - this._shadow = forceClear; } /** diff --git a/test/HTMLText.test.ts b/test/HTMLText.test.ts new file mode 100644 index 0000000..cb3b3b8 --- /dev/null +++ b/test/HTMLText.test.ts @@ -0,0 +1,46 @@ +import { HTMLText } from '../src/HTMLText'; + +describe('HTMLText', () => +{ + it('should create an HTMLText element', () => + { + const text = new HTMLText('Hello World'); + + expect(text).toBeTruthy(); + expect(text.text).toBe('Hello World'); + + text.destroy(); + }); + + it('should clean up the shadow element', () => + { + const query = '[data-pixi-html-text]'; + + expect(document.querySelector(query)).toBeFalsy(); + + const text = new HTMLText('Hello world!'); + + expect(document.querySelector(query)).toBeTruthy(); + + text.destroy(); + + expect(document.querySelector(query)).toBeFalsy(); + }); + + it('should clean up the shadow element multiples', () => + { + const query = '[data-pixi-html-text]'; + + expect(document.querySelector(query)).toBeFalsy(); + + const text = new HTMLText('Hello world!'); + const text2 = new HTMLText('Hello world2!'); + + expect(document.querySelector(query)).toBeTruthy(); + + text.destroy(); + text2.destroy(); + + expect(document.querySelector(query)).toBeFalsy(); + }); +});