Merge pull request #74 from ruofeidu/main

Fixed fontColor for textButton and bump to 0.5.1

Author: ruofeidu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xrblocks",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "XR Blocks SDK",
   "main": "build/xrblocks.js",
   "types": "build/xrblocks.d.ts",

samples/ui/index.html

@@ -435,13 +435,24 @@
 
           const canvasTexture = new THREE.CanvasTexture(canvas);
           canvasTexture.needsUpdate = true;
-
-          const chartArea = chartGrid.addRow({weight: 0.85});
+          const chartCol = chartGrid.addCol();
+          chartCol.addRow({weight: 0.15});
+          const chartArea = chartCol.addRow({weight: 0.85});
           const chartMesh = new THREE.Mesh(
             new THREE.PlaneGeometry(1, 1),
             new THREE.MeshBasicMaterial({map: canvasTexture})
           );
           chartArea.add(chartMesh);
+
+          const tmpRow = chartGrid.addCol();
+          tmpRow.addRow({weight: 0.3});
+          const okButton = tmpRow.addRow().addTextButton({
+            text: 'OK',
+            backgroundColor: '#22aa33',
+            opacity: 0.5,
+            fontColor: '#66ccff',
+            fontSizeDp: 50,
+          });
         }
 
         init() {

src/ui/components/TextButton.ts

@@ -15,6 +15,8 @@ export type TextButtonOptions = TextViewOptions & {
   maxWidth?: number;
   radius?: number;
   boxSize?: number;
+  hoverColor?: string | number;
+  selectedFontColor?: string | number;
 };
 
 export class TextButton extends TextView {
@@ -60,7 +62,7 @@ export class TextButton extends TextView {
   constructor(options: TextButtonOptions = {}) {
     const geometry = new THREE.PlaneGeometry(1, 1);
     const colorVec4 = getVec4ByColorString(
-      options.backgroundColor ?? '#00000000'
+      options.backgroundColor ?? '#000000'
     );
 
     const {
@@ -93,6 +95,9 @@ export class TextButton extends TextView {
     // Applies our own overrides to the default values.
     this.fontSize = options.fontSize ?? this.fontSize;
     this.fontColor = options.fontColor ?? this.fontColor;
+    this.hoverColor = options.hoverColor ?? this.hoverColor;
+    this.selectedFontColor =
+      options.selectedFontColor ?? this.selectedFontColor;
     this.width = options.width ?? this.width;
     this.height = options.height ?? this.height;
   }
@@ -119,18 +124,18 @@ export class TextButton extends TextView {
     if (!this.textObj) {
       return;
     }
-    if (this.textObj) {
-      this.textObj.renderOrder = this.renderOrder + 1;
-    }
+    // Update render order to ensure text appears on top of the button mesh
+    this.textObj.renderOrder = this.renderOrder + 1;
+
     const ux = this.ux;
     if (ux.isHovered()) {
       if (ux.isSelected()) {
-        this.setTextColor(0x666666);
+        this.setTextColor(this.selectedFontColor);
       } else {
-        this.setTextColor(0xaaaaaa);
+        this.setTextColor(this.hoverColor);
       }
     } else {
-      this.setTextColor(0xffffff);
+      this.setTextColor(this.fontColor);
       this.uniforms.uOpacity.value = this.defaultOpacity * this.opacity;
     }
   }

src/ui/components/TextView.ts

@@ -394,9 +394,9 @@ export class TextView extends View<TextViewEventMap> {
     }
   }
 
-  protected setTextColor(color: number) {
+  protected setTextColor(color: number | string) {
     if (Text && this.textObj instanceof Text) {
-      this.textObj.color = color;
+      this.textObj.color = getColorHex(color);
     }
   }