troika-three-text TextComponent (#9341)

* new: TroikaText package and TextComponent+TextNodeEditor registered

* new: TextComponent+TextNodeEditor initial sketch

* chg: Better Font properties editor mapping (grouped)

* new,doc,fmt: FontFamily editor mapping and doc/fmt changes. See descr.

doc: Better TextMesh doc comments formatting
new: font family editor mapping
doc: Reformated all temp TextMesh properties comments for better organization
fmt: new "unlikely" temp section for TextMesh properties
new: FontDefault value, for initializing the default font URI

* doc: Grouped the properties into sections for wip work scheduling

* new: Text Indentation property mapped to the editor

* new: Letter Spacing property mapped to the editor

* new: Text Width property mapped to the editor

* new: Text Outline Width property mapped to the editor

* new: Text Fill Opacity property mapped to the editor

* new: Text Stroke Opacity property mapped to the editor

* new: Text Outline Opacity property mapped to the editor

* new: Text Stroke Width property mapped to the editor

* new: Text Outline Blur property mapped to the editor

* new: Text Outline Offset (x,y) properties mapped to the editor

* new: GPU Acceleration force-disable property mapped to the editor

* new: Text Anchor property mapped to the editor

* new: Text Curve property mapped to the editor

* new: Text Depth Offset property mapped to the editor

* new: Text Direction property mapped to the editor

* new: Text Alignment property mapped to the editor

* new: Text Wrapping properties mapped to the editor

* doc: Better FontDefault description

* new: Text Outline+Stroke Color properties mapped to the editor

* new: Advanced props hiding. Clipping+Glyph props mapped to the editor

* doc: Fixed misuse of @abstract, removed @option and added @summary

* doc: Updated the properties list for multilang and not-used props

* chg: Moved SelectOptions to @Local scope, so the object is not GC'ed

* fix: Correct MathUtils import for `npm run test`

* fix: Correct Color and Material referencing from Three.js

* new: Text LineHeight property mapped into the editor

* new: Text Orientation property mapped into the editor

* new,chg: Material property and new HoverInfo properties. See descr.

new: Font Material property mapped to the editor.
new: FontFamily, Clipping, GlyphResolution, GlyphDetail and GPUAccelerated hover info descriptions
chg: <br> Separation between each InputGroup section for readability.
chg: Default clipRectMin changed to a negative value, so it works as expected by default.

* chg: Set safe max value for glyphResolution

* doc: Small doc comments improvements

* chg: Added onRelease support for BooleanInput

* chg: Added onRelease behavior for the TextNodeEditor boolean inputs

* fmt: Final polishing before PR review

* chg: Applied PR review changes

* chg: Translation ids for TextComponent editor properties

* change mesh init

* fix type

* fix: Support for nullable TextMesh in text.troikaMesh

* doc: Better use of JSDoc comments. Removed misuse of @enum

---------

Co-authored-by: Daniel Belmes <3631206+DanielBelmes@users.noreply.github.com>

Author: heysokam

packages/client-core/i18n/en/editor.json

@@ -835,6 +835,44 @@
       "description": "An object with a pose to define interactable behaviors.",
       "lbl-type": "Type",
       "lbl-dismount": "Dismount point, offsets this transform"
+    },
+    "text": {
+      "textGroup": "Text",
+      "textOpacity": "opacity",
+      "textWidth": "width",
+      "textIndent": "indent",
+      "textAlign": "align",
+      "textWrap": "wrap",
+      "textAnchor": "anchor",
+      "textDepthOffset": "depthOffset",
+      "textCurveRadius": "curveRadius",
+      "letterSpacing": "letterSpacing",
+      "lineHeightGroup": "lineHeight",
+      "lineHeight": "height",
+      "textDirection": "direction",
+      "fontGroup": "Font",
+      "fontFamily": "family",
+      "fontSize": "size",
+      "fontColor": "color",
+      "fontMaterial": "material",
+      "outlineGroup": "Outline",
+      "outlineColor": "color",
+      "outlineOpacity": "opacity",
+      "outlineWidth": "width",
+      "outlineBlur": "blur",
+      "outlineOffset": "offset",
+      "strokeGroup": "Stroke",
+      "strokeColor": "color",
+      "strokeOpacity": "opacity",
+      "strokeWidth": "width",
+      "advancedActive": "Show Advanced",
+      "advancedGroup": "Advanced",
+      "clippingActive": "clip.active",
+      "clippingMin": "clip.min",
+      "clippingMax": "clip.max",
+      "glyphResolution": "glyph.resolution",
+      "glyphDetail": "glyph.detail",
+      "gpuAccelerated": "GPU Accelerated"
     }
   },
   "projects": {

packages/editor/src/components/element/ElementList.tsx

@@ -69,6 +69,7 @@ import { MountPointComponent } from '@etherealengine/engine/src/scene/components
 import { PostProcessingComponent } from '@etherealengine/engine/src/scene/components/PostProcessingComponent'
 import { SceneDynamicLoadTagComponent } from '@etherealengine/engine/src/scene/components/SceneDynamicLoadTagComponent'
 import { ShadowComponent } from '@etherealengine/engine/src/scene/components/ShadowComponent'
+import { TextComponent } from '@etherealengine/engine/src/scene/components/TextComponent'
 import { Vector3 } from 'three'
 import { PrimitiveGeometryComponent } from '../../../../engine/src/scene/components/PrimitiveGeometryComponent'
 import { ItemTypes } from '../../constants/AssetTypes'
@@ -114,7 +115,14 @@ export const ComponentShelfCategories: Record<string, Component[]> = {
   ],
   FX: [LoopAnimationComponent, ShadowComponent, ParticleSystemComponent, EnvmapComponent, PostProcessingComponent],
   Scripting: [SystemComponent, BehaveGraphComponent],
-  Misc: [EnvMapBakeComponent, ScenePreviewCameraComponent, SkyboxComponent, SplineTrackComponent, SplineComponent]
+  Misc: [
+    EnvMapBakeComponent,
+    ScenePreviewCameraComponent,
+    SkyboxComponent,
+    SplineTrackComponent,
+    SplineComponent,
+    TextComponent
+  ]
 }
 
 const SceneElementListItem = ({ item, onClick, onContextMenu }: SceneElementListItemType) => {

packages/editor/src/components/inputs/BooleanInput.tsx

@@ -36,6 +36,7 @@ let uniqueId = 0
 interface BooleanInputProp {
   value: boolean
   onChange: (value: boolean) => void
+  onRelease?: (value: boolean) => void
   disabled?: boolean
 }
 
@@ -46,6 +47,10 @@ export const BooleanInput = (props: BooleanInputProp) => {
     props.onChange(e.target.checked)
   }
 
+  const onBlur = (e) => {
+    if (props.onRelease) props.onRelease(props.value)
+  }
+
   const onKeyPress = (e: KeyboardEvent<HTMLLabelElement>) => {
     if (e.key === 'Enter' || e.key === ' ') props.onChange(!props.value)
   }
@@ -58,6 +63,7 @@ export const BooleanInput = (props: BooleanInputProp) => {
         type="checkbox"
         checked={props.value}
         onChange={onChange}
+        onBlur={onBlur}
         disabled={props.disabled}
       />
       <label htmlFor={checkboxId} className="Input BooleanInputLabel" tabIndex={0} onKeyPress={onKeyPress}>

packages/editor/src/components/inputs/SelectInput.tsx

@@ -37,6 +37,7 @@ interface SelectInputProp<T> {
   value: T | string
   options: Array<{ label: string; value: T; info?: string }>
   onChange?: (value: T | string) => void
+  onRelease?: (value: T | string) => void
   placeholder?: string
   disabled?: boolean
   creatable?: boolean
@@ -48,6 +49,7 @@ export function SelectInput<T extends string | ReadonlyArray<string> | number |
   value,
   options,
   onChange,
+  onRelease,
   placeholder = 'Select...',
   disabled,
   creatable,
@@ -59,6 +61,10 @@ export function SelectInput<T extends string | ReadonlyArray<string> | number |
     onChange?.(event.target.value)
   }
 
+  const handleBlur = () => {
+    if (onRelease) onRelease(value)
+  }
+
   const onValueChanged = (event, label, ...args) => {
     const value = options.find((el) => el.value === value)!.value
     onChange?.(value)
@@ -106,6 +112,7 @@ export function SelectInput<T extends string | ReadonlyArray<string> | number |
         id="select"
         value={value}
         onChange={handleChange}
+        onBlur={handleBlur}
         placeholder={placeholder}
         size="small"
         classes={{