pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 9.63 kB

Source Map (JSON)

View Raw

{"version":3,"file":"SplitBitmapText.mjs","sources":["../../../src/scene/text-split/SplitBitmapText.ts"],"sourcesContent":["import { warn } from '../../utils/logging/warn';\nimport { type ContainerOptions } from '../container/Container';\nimport { TextStyle } from '../text/TextStyle';\nimport { type BitmapText } from '../text-bitmap/BitmapText';\nimport { bitmapTextSplit } from '../text-bitmap/utils/bitmapTextSplit';\nimport {\n type AbstractSplitOptions,\n AbstractSplitText\n} from './AbstractSplitText';\nimport { type TextSplitOutput } from './types';\n\n/**\n * Configuration options for BitmapText splitting.\n * @category text\n * @standard\n * @interface\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface SplitBitmapOptions extends AbstractSplitOptions {}\n\n/**\n * Configuration options for SplitBitmapText, combining container properties with text splitting settings.\n * @example Basic Usage\n * ```ts\n * const options: SplitBitmapTextOptions = {\n * text: 'Hello World',\n * style: { fontSize: 32, fill: 0xffffff },\n * // Transform origins\n * lineAnchor: 0.5, // Center each line\n * wordAnchor: { x: 0, y: 0.5 }, // Left-center each word\n * charAnchor: { x: 0.5, y: 1 }, // Bottom-center each char\n * };\n * ```\n * @example Advanced Configuration\n * ```ts\n * const options: SplitBitmapTextOptions = {\n * // Text content and style\n * text: 'Multi\\nLine Text',\n * style: new TextStyle({\n * fontSize: 24,\n * fill: 'white',\n * strokeThickness: 2,\n * }),\n *\n * // Container properties\n * x: 100,\n * y: 100,\n * alpha: 0.8,\n *\n * // Splitting settings\n * autoSplit: true,\n *\n * // Transform origins (normalized 0-1)\n * lineAnchor: { x: 1, y: 0 }, // Top-right\n * wordAnchor: 0.5, // Center\n * charAnchor: { x: 0, y: 1 }, // Bottom-left\n * };\n * ```\n *\n * Properties:\n * - Container options from {@link ContainerOptions}\n * - Text splitting options from {@link SplitBitmapOptions}\n * - Additional PixiJS-specific options from PixiMixins.SplitBitmapText\n * @see {@link SplitBitmapText} For the main implementation\n * @see {@link ContainerOptions} For base container properties\n * @see {@link SplitBitmapOptions} For text splitting options\n * @category text\n * @standard\n */\nexport interface SplitBitmapTextOptions\n extends PixiMixins.SplitBitmapText,\n ContainerOptions,\n SplitBitmapOptions {}\n\n/**\n * @experimental\n * A container that splits text into individually manipulatable segments (lines, words, and characters)\n * for advanced text effects and animations.\n * Converts each segment into a separate BitmapText object.\n * @example Basic Usage\n * ```ts\n * const text = new SplitBitmapText({\n * text: \"Hello World\",\n * style: { fontSize: 24 },\n * // Origin points for transformations (0-1 range)\n * lineAnchor: 0.5, // Center of each line\n * wordAnchor: { x: 0, y: 0.5 }, // Left-center of each word\n * charAnchor: { x: 0.5, y: 1 }, // Bottom-center of each character\n * autoSplit: true // Auto-update segments on text/style changes\n * });\n * ```\n *\n * Features:\n * - Hierarchical text segmentation (lines → words → characters)\n * - Independent transformation origins for each segment level\n * - Automatic or manual segment updates\n * @example Animation Example\n * ```ts\n * // Character fade-in sequence\n * text.chars.forEach((char, i) => {\n * gsap.from(char, {\n * alpha: 0,\n * delay: i * 0.1\n * });\n * });\n *\n * // Word scale animation\n * text.words.forEach((word, i) => {\n * gsap.to(word.scale, {\n * x: 1.2, y: 1.2,\n * yoyo: true,\n * repeat: -1,\n * delay: i * 0.2\n * });\n * });\n *\n * // Line slide-in effect\n * text.lines.forEach((line, i) => {\n * gsap.from(line, {\n * x: -200,\n * delay: i * 0.3\n * });\n * });\n * ```\n *\n * Configuration Options:\n * - `text`: The string to render and segment\n * - `style`: TextStyle instance or configuration object\n * - `autoSplit`: Automatically update segments on changes (default: true)\n * - `lineAnchor`: Transform origin for lines (default: 0)\n * - `wordAnchor`: Transform origin for words (default: 0)\n * - `charAnchor`: Transform origin for characters (default: 0)\n *\n * > [!NOTE] Anchor points are normalized (0-1):\n * > - 0,0: Top-left\n * > - 0.5,0.5: Center\n * > - 1,1: Bottom-right\n *\n * > [!WARNING] Limitations\n * > - Character spacing may differ slightly from standard text due to browser\n * > kerning being lost when characters are separated\n * @category text\n * @standard\n */\nexport class SplitBitmapText extends AbstractSplitText<BitmapText>\n{\n /**\n * Default configuration options for SplitBitmapText instances.\n * @example\n * ```ts\n * // Override defaults globally\n * SplitBitmapText.defaultOptions = {\n * autoSplit: false,\n * lineAnchor: 0.5, // Center alignment\n * wordAnchor: { x: 0, y: 0.5 }, // Left-center\n * charAnchor: { x: 0.5, y: 1 } // Bottom-center\n * };\n * ```\n */\n public static defaultOptions: Partial<SplitBitmapTextOptions> = {\n autoSplit: true, // Auto-update on text/style changes\n lineAnchor: 0, // Top-left alignment\n wordAnchor: 0, // Top-left alignment\n charAnchor: 0, // Top-left alignment\n } as Partial<SplitBitmapTextOptions>;\n\n constructor(config: SplitBitmapTextOptions)\n {\n const completeOptions: SplitBitmapTextOptions = {\n ...SplitBitmapText.defaultOptions,\n ...config,\n };\n\n completeOptions.style ??= {};\n completeOptions.style.fill ??= 0xffffff;\n\n super(completeOptions);\n }\n\n /**\n * Creates a SplitBitmapText instance from an existing text object.\n * Useful for converting standard Text or BitmapText objects into segmented versions.\n * @param text - The source text object to convert\n * @param options - Additional splitting options\n * @returns A new SplitBitmapText instance\n * @example\n * ```ts\n * const bitmapText = new BitmapText({\n * text: 'Bitmap Text',\n * style: { fontFamily: 'Arial' }\n * });\n *\n * const segmented = SplitBitmapText.from(bitmapText);\n *\n * // with additional options\n * const segmentedWithOptions = SplitBitmapText.from(bitmapText, {\n * autoSplit: false,\n * lineAnchor: 0.5,\n * wordAnchor: { x: 0, y: 0.5 },\n * })\n * ```\n */\n public static from(\n text: BitmapText,\n options?: Omit<SplitBitmapTextOptions, 'text' | 'style'>,\n ): SplitBitmapText\n {\n const completeOptions: SplitBitmapTextOptions = {\n ...SplitBitmapText.defaultOptions,\n ...options,\n text: text.text,\n style: new TextStyle(text.style),\n };\n\n // warn if tag styles are used\n if (text.style.tagStyles)\n {\n // #if _DEBUG\n warn('[SplitBitmapText] Tag styles are not supported for SplitBitmapText. They will be ignored.');\n // #endif\n text.style._tagStyles = undefined;\n }\n\n const splitText = new SplitBitmapText({\n ...completeOptions,\n });\n\n // Transfer anchor behavior using pivot\n const anchor = text.anchor;\n\n if (anchor.x !== 0 || anchor.y !== 0)\n {\n splitText.pivot.set(\n splitText.width * anchor.x,\n splitText.height * anchor.y\n );\n }\n\n return splitText;\n }\n\n protected splitFn(): TextSplitOutput<BitmapText>\n {\n return bitmapTextSplit({\n text: this._originalText,\n style: this._style,\n chars: this._canReuseChars ? this.chars : [],\n });\n }\n}\n"],"names":[],"mappings":";;;;;;AAgJO,MAAM,gBAAA,GAAN,MAAM,gBAAA,SAAwB,iBAAA,CACrC;AAAA,EAqBI,YAAY,MAAA,EACZ;AAvKJ,IAAA,IAAA,EAAA;AAwKQ,IAAA,MAAM,eAAA,GAA0C;AAAA,MAC5C,GAAG,gBAAA,CAAgB,cAAA;AAAA,MACnB,GAAG;AAAA,KACP;AAEA,IAAA,eAAA,CAAgB,KAAA,KAAhB,eAAA,CAAgB,KAAA,GAAU,EAAC,CAAA;AAC3B,IAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,KAAA,EAAM,IAAA,KAAtB,EAAA,CAAsB,IAAA,GAAS,QAAA,CAAA;AAE/B,IAAA,KAAA,CAAM,eAAe,CAAA;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBA,OAAc,IAAA,CACV,IAAA,EACA,OAAA,EAEJ;AACI,IAAA,MAAM,eAAA,GAA0C;AAAA,MAC5C,GAAG,gBAAA,CAAgB,cAAA;AAAA,MACnB,GAAG,OAAA;AAAA,MACH,MAAM,IAAA,CAAK,IAAA;AAAA,MACX,KAAA,EAAO,IAAI,SAAA,CAAU,IAAA,CAAK,KAAK;AAAA,KACnC;AAGA,IAAA,IAAI,IAAA,CAAK,MAAM,SAAA,EACf;AAEI,MAAA,IAAA,CAAK,2FAA2F,CAAA;AAEhG,MAAA,IAAA,CAAK,MAAM,UAAA,GAAa,KAAA,CAAA;AAAA,IAC5B;AAEA,IAAA,MAAM,SAAA,GAAY,IAAI,gBAAA,CAAgB;AAAA,MAClC,GAAG;AAAA,KACN,CAAA;AAGD,IAAA,MAAM,SAAS,IAAA,CAAK,MAAA;AAEpB,IAAA,IAAI,MAAA,CAAO,CAAA,KAAM,CAAA,IAAK,MAAA,CAAO,MAAM,CAAA,EACnC;AACI,MAAA,SAAA,CAAU,KAAA,CAAM,GAAA;AAAA,QACZ,SAAA,CAAU,QAAQ,MAAA,CAAO,CAAA;AAAA,QACzB,SAAA,CAAU,SAAS,MAAA,CAAO;AAAA,OAC9B;AAAA,IACJ;AAEA,IAAA,OAAO,SAAA;AAAA,EACX;AAAA,EAEU,OAAA,GACV;AACI,IAAA,OAAO,eAAA,CAAgB;AAAA,MACnB,MAAM,IAAA,CAAK,aAAA;AAAA,MACX,OAAO,IAAA,CAAK,MAAA;AAAA,MACZ,KAAA,EAAO,IAAA,CAAK,cAAA,GAAiB,IAAA,CAAK,QAAQ;AAAC,KAC9C,CAAA;AAAA,EACL;AACJ,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAzGa,gBAAA,CAeK,cAAA,GAAkD;AAAA,EAC5D,SAAA,EAAW,IAAA;AAAA;AAAA,EACX,UAAA,EAAY,CAAA;AAAA;AAAA,EACZ,UAAA,EAAY,CAAA;AAAA;AAAA,EACZ,UAAA,EAAY;AAAA;AAChB,CAAA;AApBG,IAAM,eAAA,GAAN;;;;"}