fix(troika-3d-ui): fix inheritable props on text nodes, and add textI…

…ndent
protectwise · Jul 17, 2020 · 0650c59 · 0650c59
1 parent c0f9b92
commit 0650c59
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/packages/troika-3d-ui/src/facade/UIBlock3DFacade.js b/packages/troika-3d-ui/src/facade/UIBlock3DFacade.js
@@ -3,7 +3,7 @@ import { Group3DFacade } from 'troika-3d'
 import UITextNode3DFacade from './UITextNode3DFacade.js'
 import UIBlockLayer3DFacade from './UIBlockLayer3DFacade.js'
 import { extendAsFlexNode } from '../flex-layout/FlexNode.js'
-import { getComputedFontSize, getInheritable } from '../uiUtils.js'
+import { getComputedFontSize, getInheritable, INHERITABLES } from '../uiUtils.js'
 import { utils } from 'troika-core'
 import ScrollbarsFacade from './ScrollbarsFacade.js'
 
@@ -198,6 +198,7 @@ class UIBlock3DFacade extends Group3DFacade {
         textChild.font = getInheritable(this, 'font')
         textChild.fontSize = this.getComputedFontSize()
         textChild.textAlign = getInheritable(this, 'textAlign')
+        textChild.textIndent = getInheritable(this, 'textIndent')
         textChild.lineHeight = getInheritable(this, 'lineHeight', DEFAULT_LINE_HEIGHT)
         textChild.letterSpacing = getInheritable(this, 'letterSpacing', 0)
         textChild.whiteSpace = getInheritable(this, 'whiteSpace')
@@ -366,14 +367,8 @@ class UIBlock3DFacade extends Group3DFacade {
 // Extend as FlexNode
 const UIBlock3DFacade$FlexNode = UIBlock3DFacade = extendAsFlexNode(UIBlock3DFacade)
 
-utils.assign(UIBlock3DFacade.prototype, {
-  font: 'inherit',
-  fontSize: 'inherit',
-  lineHeight: 'inherit',
-  letterSpacing: 'inherit',
-  whiteSpace: 'inherit',
-  overflowWrap: 'inherit',
-  color: 'inherit'
+INHERITABLES.forEach(prop => {
+  UIBlock3DFacade.prototype[prop] = 'inherit'
 })
 
 

diff --git a/packages/troika-3d-ui/src/facade/UITextNode3DFacade.js b/packages/troika-3d-ui/src/facade/UITextNode3DFacade.js
@@ -1,8 +1,9 @@
 import { extendAsFlexNode } from '../flex-layout/FlexNode.js'
 import { Text3DFacade } from 'troika-3d-text'
-import { getInheritable } from '../uiUtils.js'
+import { getInheritable, INHERITABLES } from '../uiUtils.js'
+import UIBlock3DFacade from './UIBlock3DFacade.js'
 
-const flexLayoutTextProps = ['text', 'font', 'fontSize', 'lineHeight', 'letterSpacing', 'whiteSpace', 'overflowWrap']
+const flexLayoutTextProps = ['text', 'textIndent', 'font', 'fontSize', 'lineHeight', 'letterSpacing', 'whiteSpace', 'overflowWrap']
 const noop = () => {}
 
 /**
@@ -74,6 +75,10 @@ class UITextNode3DFacade extends Text3DFacade {
 // Extend as FlexNode
 UITextNode3DFacade = extendAsFlexNode(UITextNode3DFacade)
 
+INHERITABLES.forEach(prop => {
+  UITextNode3DFacade.prototype[prop] = 'inherit'
+})
+
 // Redefine the maxWidth property so it's not treated as a setter that affects flexbox layout
 Object.defineProperty(UITextNode3DFacade.prototype, 'maxWidth', {
   value: Infinity,

diff --git a/packages/troika-3d-ui/src/uiUtils.js b/packages/troika-3d-ui/src/uiUtils.js
@@ -1,6 +1,19 @@
 
 const UNDEF = undefined
 
+// List of UI flex node properties that should be inherited by default:
+export const INHERITABLES = [
+  'font',
+  'fontSize',
+  'textAlign',
+  'textIndent',
+  'lineHeight',
+  'letterSpacing',
+  'whiteSpace',
+  'overflowWrap',
+  'color'
+]
+
 export function getInheritable(owner, prop, defaultValue) {
   let val
   while (owner && (val = owner[prop]) === 'inherit') {