Text.d.ts 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. import { CSSGlobalKeywords, CSSRGB } from '../css';
  2. import type { DisplayObjectConfig } from '../dom/interfaces';
  3. import type { TextMetrics } from '../services';
  4. import type { BaseStyleProps, ParsedBaseStyleProps, TextDecorationStyle, TextOverflow, TextDecorationLine } from '../types';
  5. import { DisplayObject } from './DisplayObject';
  6. import type { Path } from './Path';
  7. export interface TextStyleProps extends BaseStyleProps {
  8. x?: number | string;
  9. y?: number | string;
  10. z?: number | string;
  11. /**
  12. * Always face the camera.
  13. */
  14. isBillboard?: boolean;
  15. /**
  16. * Whether the size of the sprite is attenuated by the camera depth. (Perspective camera only.)
  17. */
  18. sizeAttenuation?: boolean;
  19. text: number | string;
  20. /**
  21. * The text-align property sets the horizontal alignment of the inline-level content.
  22. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
  23. */
  24. textAlign?: CSSGlobalKeywords | 'start' | 'center' | 'middle' | 'end' | 'left' | 'right';
  25. /**
  26. * It specifies the current text baseline used when drawing text.
  27. * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline
  28. */
  29. textBaseline?: CSSGlobalKeywords | 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
  30. /**
  31. * The text-overflow property sets how hidden overflow content is signaled to users.
  32. * It can be clipped, display an ellipsis ('…'), or display a custom string.
  33. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#values
  34. */
  35. textOverflow?: TextOverflow | string;
  36. /**
  37. * Borrow from CanvasKit ParagraphStyle.
  38. */
  39. maxLines?: number;
  40. /**
  41. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
  42. */
  43. textPath?: Path;
  44. /**
  45. * The side attribute determines the side of a path the text is placed on (relative to the path direction).
  46. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/side
  47. */
  48. textPathSide?: 'left' | 'right';
  49. /**
  50. * The startOffset attribute defines an offset from the start of the path for the initial current text position along the path after converting the path to the \<textPath\> element's coordinate system.
  51. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/startOffset
  52. */
  53. textPathStartOffset?: number | string;
  54. /**
  55. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
  56. */
  57. textDecorationLine?: TextDecorationLine;
  58. /**
  59. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
  60. */
  61. textDecorationColor?: string;
  62. /**
  63. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style
  64. */
  65. textDecorationStyle?: TextDecorationStyle;
  66. /**
  67. * The font-style property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
  68. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
  69. */
  70. fontStyle?: CSSGlobalKeywords | 'normal' | 'italic' | 'oblique';
  71. /**
  72. * The font-size property sets the size of the font.
  73. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
  74. */
  75. fontSize?: number | string;
  76. /**
  77. * The font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  78. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
  79. */
  80. fontFamily?: string;
  81. /**
  82. * The font-weight property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.
  83. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
  84. */
  85. fontWeight?: CSSGlobalKeywords | 'normal' | 'bold' | 'bolder' | 'lighter' | number;
  86. /**
  87. * The font-variant shorthand property allows you to set all the font variants for a font.
  88. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
  89. */
  90. fontVariant?: CSSGlobalKeywords | 'normal' | 'small-caps' | string;
  91. /**
  92. * The line-height property sets the height of a line box.
  93. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
  94. */
  95. lineHeight?: number | string;
  96. /**
  97. * It specifies the spacing between letters when drawing text.
  98. * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing
  99. */
  100. letterSpacing?: number | string;
  101. /**
  102. * The white-space property sets how white space inside an element is handled.
  103. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
  104. */
  105. /**
  106. * There is no "CSS leading" property
  107. * @see https://css-tricks.com/how-to-tame-line-height-in-css/
  108. */
  109. leading?: number;
  110. /**
  111. * The overflow-wrap CSS property applies to inline elements,
  112. * setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
  113. *
  114. * The overflow-wrap property acts in the same way as the non-standard property word-wrap.
  115. * The word-wrap property is now treated by browsers as an alias of the standard property.
  116. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
  117. */
  118. wordWrap?: boolean;
  119. /**
  120. * Max width of overflowing box.
  121. */
  122. wordWrapWidth?: number;
  123. /**
  124. * The dx attribute indicates a shift along the x-axis on the position of an element or its content.
  125. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dx
  126. */
  127. dx?: number | string;
  128. /**
  129. * The dy attribute indicates a shift along the y-axis on the position of an element or its content.
  130. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dy
  131. */
  132. dy?: number | string;
  133. }
  134. export interface ParsedTextStyleProps extends ParsedBaseStyleProps {
  135. x: number;
  136. y: number;
  137. z?: number;
  138. isBillboard?: boolean;
  139. sizeAttenuation?: boolean;
  140. text: string;
  141. textAlign?: 'start' | 'center' | 'middle' | 'end' | 'left' | 'right';
  142. textBaseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
  143. fontStyle?: 'normal' | 'italic' | 'oblique';
  144. fontSize?: number;
  145. fontFamily?: string;
  146. fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
  147. fontVariant?: 'normal' | 'small-caps' | string;
  148. lineHeight?: number;
  149. letterSpacing?: number;
  150. leading?: number;
  151. wordWrap?: boolean;
  152. wordWrapWidth?: number;
  153. maxLines?: number;
  154. textOverflow?: TextOverflow | string;
  155. isOverflowing?: boolean;
  156. textPath?: Path;
  157. textDecorationLine?: TextDecorationLine;
  158. textDecorationColor?: CSSRGB;
  159. textDecorationStyle?: TextDecorationStyle | string;
  160. textPathSide?: 'left' | 'right';
  161. textPathStartOffset?: number;
  162. metrics?: TextMetrics;
  163. dx?: number;
  164. dy?: number;
  165. }
  166. /**
  167. * <text> @see https://developer.mozilla.org/en-US/docs/Web/API/SVGTextElement
  168. */
  169. export declare class Text extends DisplayObject<TextStyleProps, ParsedTextStyleProps> {
  170. /**
  171. * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement#constants
  172. */
  173. constructor({ style, ...rest }?: DisplayObjectConfig<TextStyleProps>);
  174. /**
  175. * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement
  176. */
  177. getComputedTextLength(): number;
  178. getLineBoundingRects(): import("..").Rectangle[];
  179. isOverflowing(): boolean;
  180. }
  181. //# sourceMappingURL=Text.d.ts.map