Table of Contents

Numeric Input/Output Utilities

Handle special numeric values (Infinity, -Infinity, NaN) in web forms to prevent JSON serialization issues between JavaScript frontend and C# backend.

Implementation Requirements

Your numeric-utils.js module should:

  • Convert special values for display: Infinity → “INF”, -Infinity → “-INF”, NaN → “NaN”
  • Parse display strings back to numeric values
  • Format regular numbers with 4 significant digits (for standard display mode)
  • Provide full precision output without information loss (for text mode editing)
  • Provide Vue mixin for component integration

Required Exports

  • numericToDisplay(value) - Converts numeric to display string (4 significant digits)
  • numericToFullPrecision(value) - Converts numeric to full precision string (no information loss, for text mode)
  • displayToNumeric(displayValue, defaultValue) - Parses display to numeric
  • NumericInputMixin - Vue mixin with formatNumericDisplay, toFullPrecision, and parseNumericDisplay methods

Usage Guidelines

  • Use numericToDisplay() for standard input fields where formatted display is preferred
  • Use numericToFullPrecision() for text mode inputs (e.g., array-like number editors) where users need to see/edit exact values without precision loss

Avoiding Precision Loss

When a component has multiple numeric inputs (e.g., Vec3d with X, Y, Z or Mat4d with 16 elements), parsing display values back to numeric on unchanged fields will cause precision loss due to the 4-digit formatting.

Problem: If user only edits X, but displayToNumeric() is called on all fields (X, Y, Z), the unchanged Y and Z values lose precision.

Solution: Update only the edited field by:

  1. Each input field should have its own @change handler (e.g., onXChanged, onYChanged, onZChanged)
  2. Backend should provide single-element update API (e.g., UpdateAt(key, index, value))
  3. Only parse and send the edited value to backend

Example (Vec3d):

  • Frontend: @change="onXChanged" calls /api/Vec3d/UpdateAt?index=0&value=...
  • Backend: vec3d.At(index) = value;

Example (Mat4d):

  • Frontend: @change="onCellChanged(row, col)" calls /api/Mat4d/UpdateAt?index=...&value=...
  • Backend: mat4d.m[index] = value;

Source Code Path

See this page for git repository.

Web Page Application Source Code Path

  • wwwroot/common/numeric-utils.js