feat: support i18n

package.json

@@ -58,6 +58,7 @@
 		"update_engine_exports": "run-python3 tools/update_engine_exports.py"
 	},
 	"devDependencies": {
+		"@rollup/plugin-json": "6.1.0",
 		"@types/node": "^20.1.0",
 		"esbuild": "^0.19.0",
 		"eslint": "^8.29.0",
@@ -76,6 +77,7 @@
 		"@simonwep/pickr": "1.9.0",
 		"draco3d": "1.5.6",
 		"fflate": "0.8.1",
+		"i18next": "23.10.1",
 		"occt-import-js": "0.0.21",
 		"rhino3dm": "8.0.1",
 		"three": "0.158.0",

source/engine/import/importerbim.js

@@ -13,6 +13,8 @@ import { ColorToMaterialConverter } from './importerutils.js';
 import { Property, PropertyGroup, PropertyType } from '../model/property.js';
 import { Unit } from '../model/unit.js';
 
+import { t } from '../../website/i18next.js';
+
 export class ImporterBim extends ImporterBase
 {
     constructor ()
@@ -170,7 +172,7 @@ export class ImporterBim extends ImporterBase
         }
 
         let info = source.info;
-        let propertyGroup = new PropertyGroup ('Info');
+        let propertyGroup = new PropertyGroup (t('Info'));
         AddProperty (propertyGroup, 'Guid', source.guid);
         AddProperty (propertyGroup, 'Type', source.type);
         for (let propertyName in info) {

source/engine/import/importergltf.js

@@ -16,6 +16,8 @@ import { Property, PropertyGroup, PropertyType } from '../model/property.js';
 import { Triangle } from '../model/triangle.js';
 import { ImporterBase } from './importerbase.js';
 
+import { t } from '../../website/i18next.js';
+
 const GltfComponentType =
 {
     BYTE : 5120,
@@ -641,7 +643,7 @@ export class ImporterGltf extends ImporterBase
             }
         }
 
-        this.ImportProperties (this.model, gltf.asset, 'Asset properties');
+        this.ImportProperties (this.model, gltf.asset, t('Asset properties'));
         this.ImportScene (gltf);
     }
 
@@ -809,7 +811,7 @@ export class ImporterGltf extends ImporterBase
             this.ImportPrimitive (gltf, primitive, mesh);
         }
 
-        this.ImportProperties (mesh, gltfMesh.extras, 'Mesh properties');
+        this.ImportProperties (mesh, gltfMesh.extras, t('Mesh properties'));
     }
 
     ImportPrimitive (gltf, primitive, mesh)
@@ -1006,7 +1008,7 @@ export class ImporterGltf extends ImporterBase
             this.ImportNode (gltf, gltfNode, rootNode);
         }
 
-        this.ImportProperties (this.model, scene.extras, 'Scene properties');
+        this.ImportProperties (this.model, scene.extras, t('Scene properties'));
     }
 
     ImportNode (gltf, gltfNode, parentNode)
@@ -1058,7 +1060,7 @@ export class ImporterGltf extends ImporterBase
 
         if (gltfNode.mesh !== undefined) {
             let mesh = this.model.GetMesh (gltfNode.mesh);
-            this.ImportProperties (mesh, gltfNode.extras, 'Node properties');
+            this.ImportProperties (mesh, gltfNode.extras, t('Node properties'));
             node.AddMeshIndex (gltfNode.mesh);
         }
     }

source/website/dialogs.js

@@ -1,12 +1,14 @@
 import { AddDiv } from '../engine/viewer/domutils.js';
 import { ButtonDialog, ListPopup } from './dialog.js';
 
+import { t } from './i18next.js';
+
 export function ShowMessageDialog (title, message, subMessage)
 {
     let dialog = new ButtonDialog ();
     let contentDiv = dialog.Init (title, [
         {
-            name : 'OK',
+            name : t('OK'),
             onClick () {
                 dialog.Close ();
             }

source/website/exportdialog.js

@@ -12,6 +12,8 @@ import { DownloadArrayBufferAsFile } from './utils.js';
 import { CookieGetStringVal, CookieSetStringVal } from './cookiehandler.js';
 import { HandleEvent } from './eventhandler.js';
 
+import { t } from './i18next.js';
+
 import * as fflate from 'fflate';
 
 function AddSelectWithCookieSave (parentElement, cookieKey, options, defaultSelectedIndex, onChange)
@@ -53,8 +55,8 @@ class ModelExporterUI
             return AddSelectWithCookieSave (parameterValueDiv, cookieKey, values, defaultIndex);
         }
 
-        this.visibleOnlySelect = AddSelectItem (parametersDiv, 'Scope', 'ov_last_scope', ['Entire Model', 'Visible Only'], 1);
-        this.rotationSelect = AddSelectItem (parametersDiv, 'Rotation', 'ov_last_rotation', ['No Rotation', '-90 Degrees', '90 Degrees'], 0);
+        this.visibleOnlySelect = AddSelectItem (parametersDiv, t('Scope'), 'ov_last_scope', [t('Entire Model'), t('Visible Only')], 1);
+        this.rotationSelect = AddSelectItem (parametersDiv, t('Rotation'), 'ov_last_rotation', [t('No Rotation'), t('-90 Degrees'), t('90 Degrees')], 0);
     }
 
     ExportModel (model, callbacks)
@@ -77,15 +79,15 @@ class ModelExporterUI
         let exporterModel = new ExporterModel (model, settings);
         if (exporterModel.MeshInstanceCount () === 0) {
             ShowMessageDialog (
-                'Export Failed',
-                'The model doesn\'t contain any meshes.',
+                t('Export Failed'),
+                t('The model doesn\'t contain any meshes.'),
                 null
             );
             return;
         }
 
         let progressDialog = new ProgressDialog ();
-        progressDialog.Init ('Exporting Model');
+        progressDialog.Init (t('Exporting Model'));
         progressDialog.Open ();
 
         RunTaskAsync (() => {
@@ -142,24 +144,24 @@ class ExportDialog
     Open (model, viewer)
     {
         let mainDialog = new ButtonDialog ();
-        let contentDiv = mainDialog.Init ('Export', [
+        let contentDiv = mainDialog.Init (t('Export'), [
             {
-                name : 'Close',
+                name : t('Close'),
                 subClass : 'outline',
                 onClick () {
                     mainDialog.Close ();
                 }
             },
             {
-                name : 'Export',
+                name : t('Export'),
                 onClick : () => {
                     mainDialog.Close ();
                     this.ExportFormat (model, viewer);
                 }
             }
         ]);
 
-        let text = 'Select the format from the list below, and adjust the settings of the selected format.';
+        let text = t('Select the format from the list below, and adjust the settings of the selected format.');
         AddDiv (contentDiv, 'ov_dialog_section', text);
 
         let formatRow = AddDiv (contentDiv, 'ov_dialog_row');