pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 7.99 kB

Source Map (JSON)

View Raw

{"version":3,"file":"SplitText.mjs","sources":["../../../src/scene/text-split/SplitText.ts"],"sourcesContent":["import { type ContainerOptions } from '../container/Container';\nimport { type Text } from '../text/Text';\nimport { TextStyle } from '../text/TextStyle';\nimport { canvasTextSplit } from '../text/utils/canvasTextSplit';\nimport { type AbstractSplitOptions, AbstractSplitText } from './AbstractSplitText';\nimport { type TextSplitOutput } from './types';\n\n/**\n * Configuration options for Text splitting.\n * @category text\n * @standard\n * @interface\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface SplitOptions extends AbstractSplitOptions {}\n\n/**\n * Configuration options for SplitText, combining container properties with text splitting settings.\n * @example Basic Usage\n * ```ts\n * const options: SplitTextOptions = {\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: SplitTextOptions = {\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 SplitOptions}\n * - Additional PixiJS-specific options from PixiMixins.SplitText\n * @see {@link SplitText} For the main implementation\n * @see {@link ContainerOptions} For base container properties\n * @see {@link SplitOptions} For text splitting options\n * @category text\n * @standard\n */\nexport interface SplitTextOptions extends PixiMixins.SplitText, ContainerOptions, SplitOptions {}\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 Text object.\n * @example Basic Usage\n * ```ts\n * const text = new SplitText({\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 SplitText extends AbstractSplitText<Text>\n{\n /**\n * Default configuration options for SplitText instances.\n * @example\n * ```ts\n * // Override defaults globally\n * SplitText.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<SplitTextOptions> = {\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<SplitTextOptions>;\n\n constructor(config: SplitTextOptions)\n {\n const completeOptions: SplitTextOptions = {\n ...SplitText.defaultOptions,\n ...config,\n };\n\n super(completeOptions);\n }\n\n /**\n * Creates a SplitText instance from an existing text object.\n * Useful for converting standard Text or Text objects into segmented versions.\n * @param text - The source text object to convert\n * @param options - Additional splitting options\n * @returns A new SplitText instance\n * @example\n * ```ts\n * const text = new Text({\n * text: 'Bitmap Text',\n * style: { fontFamily: 'Arial' }\n * });\n *\n * const segmented = SplitText.from(text);\n *\n * // with additional options\n * const segmentedWithOptions = SplitText.from(text, {\n * autoSplit: false,\n * lineAnchor: 0.5,\n * wordAnchor: { x: 0, y: 0.5 },\n * })\n * ```\n */\n public static from(text: Text, options?: Omit<SplitTextOptions, 'text' | 'style'>): SplitText\n {\n const completeOptions: SplitTextOptions = {\n ...SplitText.defaultOptions,\n ...options,\n text: text.text,\n style: new TextStyle(text.style),\n };\n\n return new SplitText({\n ...completeOptions,\n });\n }\n\n protected splitFn(): TextSplitOutput<Text>\n {\n return canvasTextSplit({\n text: this._originalText,\n style: this._style,\n chars: this._canReuseChars ? this.chars : [],\n });\n }\n}\n"],"names":[],"mappings":";;;;;AAyIO,MAAM,UAAA,GAAN,MAAM,UAAA,SAAkB,iBAC/B,CAAA;AAAA,EAqBI,YAAY,MACZ,EAAA;AACI,IAAA,MAAM,eAAoC,GAAA;AAAA,MACtC,GAAG,UAAU,CAAA,cAAA;AAAA,MACb,GAAG,MAAA;AAAA,KACP,CAAA;AAEA,IAAA,KAAA,CAAM,eAAe,CAAA,CAAA;AAAA,GACzB;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,IAAK,CAAA,IAAA,EAAY,OAC/B,EAAA;AACI,IAAA,MAAM,eAAoC,GAAA;AAAA,MACtC,GAAG,UAAU,CAAA,cAAA;AAAA,MACb,GAAG,OAAA;AAAA,MACH,MAAM,IAAK,CAAA,IAAA;AAAA,MACX,KAAO,EAAA,IAAI,SAAU,CAAA,IAAA,CAAK,KAAK,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,OAAO,IAAI,UAAU,CAAA;AAAA,MACjB,GAAG,eAAA;AAAA,KACN,CAAA,CAAA;AAAA,GACL;AAAA,EAEU,OACV,GAAA;AACI,IAAA,OAAO,eAAgB,CAAA;AAAA,MACnB,MAAM,IAAK,CAAA,aAAA;AAAA,MACX,OAAO,IAAK,CAAA,MAAA;AAAA,MACZ,KAAO,EAAA,IAAA,CAAK,cAAiB,GAAA,IAAA,CAAK,QAAQ,EAAC;AAAA,KAC9C,CAAA,CAAA;AAAA,GACL;AACJ,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA7Ea,UAAA,CAeK,cAA4C,GAAA;AAAA,EACtD,SAAW,EAAA,IAAA;AAAA;AAAA,EACX,UAAY,EAAA,CAAA;AAAA;AAAA,EACZ,UAAY,EAAA,CAAA;AAAA;AAAA,EACZ,UAAY,EAAA,CAAA;AAAA;AAChB,CAAA,CAAA;AApBG,IAAM,SAAN,GAAA;;;;"}