Reflect the review comments

src/bit-systems/text.ts

@@ -17,15 +17,17 @@ export function textSystem(world: HubsWorld) {
     // sync() checks whether to invoke costly processing
     // inside.
     //
-    // sync() call can happen one frame after that text
-    // properties are updated by some other systems unless
-    // this system is guaranteed that it runs after all
-    // other systems in the frame. But it may not be
-    // a big deal because what sync() invokes is async
-    // processing.
+    // Ideally this system should run after any other systems
+    // that can update text properties and we need to be careful
+    // for the systems execution order. Otherwise sync() call
+    // can happen one frame after. (But probably it may not be
+    // a big deal even if it happens because what sync() invokes
+    // is async processing, texture properties update will be
+    // reflected some frames after in any case.)
     //
-    // Question: Is it safe even if text object is
-    // disposed before the async processing is done?
+    // Assumes it is safe even if text object is
+    // disposed before the async processing is done
+    // because TroikaText properly handles
     text.sync();
   });
 }

src/inflators/text.ts

@@ -35,7 +35,7 @@ export type TextParams = {
   strokeColor?: string;
   strokeOpacity?: number;
   strokeWidth?: number | `${number}%`;
-  textAlign?: 'left' | 'right' | 'center' | 'justify';
+  textAlign?: "left" | "right" | "center" | "justify";
   textIndent?: number;
   whiteSpace?: "normal" | "nowrap";
 };
@@ -46,9 +46,7 @@ const THREE_SIDES = {
   double: DoubleSide
 };
 
-// Defaults values must be set for all the optional properties
-// to safely use foo! operator in the inflator.
-const DEFAULTS: TextParams = {
+const DEFAULTS: Required<TextParams> = {
   anchorX: "center",
   anchorY: "middle",
   clipRect: null,
@@ -84,44 +82,44 @@ const DEFAULTS: TextParams = {
 };
 
 export function inflateText(world: HubsWorld, eid: number, params: TextParams) {
-  params = Object.assign({}, DEFAULTS, params);
+  const requiredParams = Object.assign({}, DEFAULTS, params) as Required<TextParams>;
   const text = new TroikaText();
   text.material!.toneMapped = false;
 
-  text.text = params.value;
-  text.material!.side = THREE_SIDES[params.side!];
-  text.material!.opacity = params.opacity!;
-  text.font = params.fontUrl!;
+  text.text = requiredParams.value;
+  text.material!.side = THREE_SIDES[requiredParams.side];
+  text.material!.opacity = requiredParams.opacity;
+  text.font = requiredParams.fontUrl;
+
+  text.anchorX = requiredParams.anchorX;
+  text.anchorY = requiredParams.anchorY;
+  text.clipRect = requiredParams.clipRect;
+  text.color = requiredParams.color;
+  text.curveRadius = requiredParams.curveRadius;
+  text.depthOffset = requiredParams.depthOffset;
+  text.direction = requiredParams.direction;
+  text.fillOpacity = requiredParams.fillOpacity;
+  text.fontSize = requiredParams.fontSize;
+  text.glyphGeometryDetail = requiredParams.glyphGeometryDetail;
+  text.gpuAccelerateSDF = requiredParams.gpuAccelerateSDF;
+  text.letterSpacing = requiredParams.letterSpacing;
+  text.lineHeight = requiredParams.lineHeight;
+  text.maxWidth = requiredParams.maxWidth;
+  text.outlineBlur = requiredParams.outlineBlur;
+  text.outlineColor = requiredParams.outlineColor;
+  text.outlineOffsetX = requiredParams.outlineOffsetX;
+  text.outlineOffsetY = requiredParams.outlineOffsetY;
+  text.outlineOpacity = requiredParams.outlineOpacity;
+  text.outlineWidth = requiredParams.outlineWidth;
+  text.overflowWrap = requiredParams.overflowWrap;
+  text.sdfGlyphSize = requiredParams.sdfGlyphSize;
+  text.strokeColor = requiredParams.strokeColor;
+  text.strokeOpacity = requiredParams.strokeOpacity;
+  text.strokeWidth = requiredParams.strokeWidth;
+  text.textAlign = requiredParams.textAlign;
+  text.textIndent = requiredParams.textIndent;
+  text.whiteSpace = requiredParams.whiteSpace;
 
-  text.anchorX = params.anchorX!;
-  text.anchorY = params.anchorY!;
-  text.clipRect = params.clipRect!;
-  text.color = params.color!;
-  text.curveRadius = params.curveRadius!;
-  text.depthOffset = params.depthOffset!;
-  text.direction = params.direction!;
-  text.fillOpacity = params.fillOpacity!;
-  text.fontSize = params.fontSize!;
-  text.glyphGeometryDetail = params.glyphGeometryDetail!;
-  text.gpuAccelerateSDF = params.gpuAccelerateSDF!;
-  text.letterSpacing = params.letterSpacing!;
-  text.lineHeight = params.lineHeight!;
-  text.maxWidth = params.maxWidth!;
-  text.outlineBlur = params.outlineBlur!;
-  text.outlineColor = params.outlineColor!;
-  text.outlineOffsetX = params.outlineOffsetX!;
-  text.outlineOffsetY = params.outlineOffsetY!;
-  text.outlineOpacity = params.outlineOpacity!;
-  text.outlineWidth = params.outlineWidth!;
-  text.overflowWrap = params.overflowWrap!;
-  text.sdfGlyphSize = params.sdfGlyphSize!;
-  text.strokeColor = params.strokeColor!;
-  text.strokeOpacity = params.strokeOpacity!;
-  text.strokeWidth = params.strokeWidth!;
-  text.textAlign = params.textAlign!;
-  text.textIndent = params.textIndent!;
-  text.whiteSpace = params.whiteSpace!;
-
   text.sync();
 
   addComponent(world, TextTag, eid);

src/systems/hubs-systems.ts

@@ -251,8 +251,10 @@ export function mainTick(xrFrame: XRFrame, renderer: WebGLRenderer, scene: Scene
   hubsSystems.gainSystem.tick();
   hubsSystems.nameTagSystem.tick();
   simpleWaterSystem(world);
+
+  // All systems that update text properties should run before this
   textSystem(world);
-  
+
   videoTextureSystem(world);
   audioDebugSystem(world);