feat(troika-three-text): add support for textIndent

protectwise · Jul 14, 2020 · b689c0c · b689c0c
1 parent 1b52fc9
commit b689c0c
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 2 deletions.
diff --git a/packages/troika-3d-text/src/facade/Text3DFacade.js b/packages/troika-3d-text/src/facade/Text3DFacade.js
@@ -14,6 +14,7 @@ const TEXT_MESH_PROPS = [
   'maxWidth',
   'overflowWrap',
   'textAlign',
+  'textIndent',
   'whiteSpace',
   'material',
   'color',

diff --git a/packages/troika-examples/text/TextExample.jsx b/packages/troika-examples/text/TextExample.jsx
@@ -95,6 +95,7 @@ class TextExample extends React.Component {
       letterSpacing: 0,
       maxWidth: 2, //2m
       textAlign: 'justify',
+      textIndent: 0,
       anchorX: 'center',
       anchorY: 'middle',
       color: 0xffffff,
@@ -179,6 +180,7 @@ class TextExample extends React.Component {
               fontSize: state.fontSize,
               maxWidth: state.maxWidth,
               textAlign: state.textAlign,
+              textIndent: state.textIndent,
               lineHeight: state.lineHeight,
               letterSpacing: state.letterSpacing,
               anchorX: state.anchorX,
@@ -271,6 +273,7 @@ class TextExample extends React.Component {
                 {type: 'boolean', path: "selectable", label: "Selectable (WIP)"},
                 {type: 'number', path: "fontSize", label: "fontSize", min: 0.01, max: 0.2, step: 0.01},
                 {type: 'number', path: "textScale", label: "scale", min: 0.1, max: 10, step: 0.1},
+                //{type: 'number', path: "textIndent", label: "indent", min: 0.1, max: 1, step: 0.01},
                 {type: 'number', path: "maxWidth", min: 1, max: 5, step: 0.01},
                 {type: 'number', path: "lineHeight", min: 1, max: 2, step: 0.01},
                 {type: 'number', path: "letterSpacing", min: -0.1, max: 0.5, step: 0.01},

diff --git a/packages/troika-three-text/README.md b/packages/troika-three-text/README.md
@@ -196,6 +196,12 @@ The horizontal alignment of each line of text within the overall text bounding b
 
 Default: `'left'`
 
+#### `textIndent`
+
+An indentation applied to the first character of each _hard_ newline. Behaves like CSS `text-indent`.
+
+Default: `0`
+
 #### `whiteSpace`
 
 Defines whether text should wrap when a line reaches the `maxWidth`. Can be either `'normal'`, to allow wrapping according to the `overflowWrap` property, or `'nowrap'` to prevent wrapping.

diff --git a/packages/troika-three-text/src/Text.js b/packages/troika-three-text/src/Text.js
@@ -42,6 +42,7 @@ const SYNCABLE_PROPS = [
   'overflowWrap',
   'text',
   'textAlign',
+  'textIndent',
   'whiteSpace',
   'anchorX',
   'anchorY',
@@ -157,6 +158,12 @@ class Text extends Mesh {
      */
     this.textAlign = 'left'
 
+    /**
+     * @member {number} textIndent
+     * Indentation for the first character of a line; see CSS `text-indent`.
+     */
+    this.textIndent = 0
+
     /**
      * @member {string} whiteSpace
      * Defines whether text should wrap when a line reaches the `maxWidth`. Can
@@ -272,6 +279,7 @@ class Text extends Mesh {
           lineHeight: this.lineHeight || 'normal',
           maxWidth: this.maxWidth,
           textAlign: this.textAlign,
+          textIndent: this.textIndent,
           whiteSpace: this.whiteSpace,
           overflowWrap: this.overflowWrap,
           anchorX: this.anchorX,

diff --git a/packages/troika-three-text/src/worker/FontProcessor.js b/packages/troika-three-text/src/worker/FontProcessor.js
@@ -174,6 +174,7 @@ export function createFontProcessor(fontParser, sdfGenerator, config) {
       lineHeight='normal',
       maxWidth=INF,
       textAlign='left',
+      textIndent=0,
       whiteSpace='normal',
       overflowWrap='normal',
       anchorX = 0,
@@ -199,6 +200,7 @@ export function createFontProcessor(fontParser, sdfGenerator, config) {
     letterSpacing = +letterSpacing
     maxWidth = +maxWidth
     lineHeight = lineHeight || 'normal'
+    textIndent = +textIndent
 
     getSdfAtlas(font, sdfGlyphSize, atlas => {
       const fontObj = atlas.fontObj
@@ -235,7 +237,7 @@ export function createFontProcessor(fontParser, sdfGenerator, config) {
       const caretBottomOffset = (ascender + descender) / 2 * fontSizeMult - caretHeight / 2
 
       // Distribute glyphs into lines based on wrapping
-      let lineXOffset = 0
+      let lineXOffset = textIndent
       let currentLine = new TextLine()
       const lines = [currentLine]
       fontObj.forEachGlyph(text, fontSize, letterSpacing, (glyphObj, glyphX, charIndex) => {
@@ -298,7 +300,7 @@ export function createFontProcessor(fontParser, sdfGenerator, config) {
         if (char === '\n') {
           currentLine = new TextLine()
           lines.push(currentLine)
-          lineXOffset = -(glyphX + glyphWidth + (letterSpacing * fontSize))
+          lineXOffset = -(glyphX + glyphWidth + (letterSpacing * fontSize)) + textIndent
         }
       })