maxGraph · tbouffard · Feb 10, 2025
diff --git a/packages/core/src/Client.ts b/packages/core/src/Client.ts
@@ -67,68 +67,6 @@ class Client {
     }
   };
 
-  /**
-   * Defines the language of the client, eg. `en` for english, `de` for german etc.
-   * The special value `none` will disable all built-in internationalization and
-   * resource loading. See {@link Translations.getSpecialBundle} for handling identifiers
-   * with and without a dash.
-   *
-   * If internationalization is disabled, then the following variables should be
-   * overridden to reflect the current language of the system. These variables are
-   * cleared when i18n is disabled.
-   * {@link Editor.askZoomResource}, {@link Editor.lastSavedResource},
-   * {@link Editor.currentFileResource}, {@link Editor.propertiesResource},
-   * {@link Editor.tasksResource}, {@link Editor.helpResource}, {@link Editor.outlineResource},
-   * {@link ElbowEdgeHandler#doubleClickOrientationResource}, {@link utils.errorResource},
-   * {@link utils.closeResource}, {@link GraphSelectionModel#doneResource},
-   * {@link GraphSelectionModel#updatingSelectionResource}, {@link GraphView#doneResource},
-   * {@link GraphView#updatingDocumentResource}, {@link CellRenderer#collapseExpandResource},
-   * {@link Graph#containsValidationErrorsResource} and
-   * {@link Graph#alreadyConnectedResource}.
-   */
-  static language = typeof window !== 'undefined' ? navigator.language : 'en';
-
-  static setLanguage = (value: string | undefined | null) => {
-    if (typeof value !== 'undefined' && value != null) {
-      Client.language = value;
-    } else {
-      Client.language = navigator.language;
-    }
-  };
-
-  /**
-   * Defines the default language which is used in the common resource files. Any
-   * resources for this language will only load the common resource file, but not
-   * the language-specific resource file.
-   * @default 'en'
-   */
-  static defaultLanguage = 'en';
-
-  static setDefaultLanguage = (value: string | undefined | null) => {
-    if (typeof value !== 'undefined' && value != null) {
-      Client.defaultLanguage = value;
-    } else {
-      Client.defaultLanguage = 'en';
-    }
-  };
-
-  /**
-   * Defines the optional array of all supported language extensions. The default
-   * language does not have to be part of this list. See
-   * {@link Translations#isLanguageSupported}.
-   *
-   * This is used to avoid unnecessary requests to language files, ie. if a 404
-   * will be returned.
-   * @default null
-   */
-  static languages: string[] | null = null;
-
-  static setLanguages = (value: string[] | null | undefined) => {
-    if (typeof value !== 'undefined' && value != null) {
-      Client.languages = value;
-    }
-  };
-
   /**
    * True if the current browser is Microsoft Edge.
    */

diff --git a/packages/core/src/editor/Editor.ts b/packages/core/src/editor/Editor.ts
@@ -20,7 +20,6 @@ import EditorPopupMenu from './EditorPopupMenu';
 import UndoManager from '../view/undoable_changes/UndoManager';
 import EditorKeyHandler from './EditorKeyHandler';
 import EventSource from '../view/event/EventSource';
-import Translations from '../util/Translations';
 import Client from '../Client';
 import CompactTreeLayout from '../view/layout/CompactTreeLayout';
 import { EditorToolbar } from './EditorToolbar';
@@ -56,9 +55,13 @@ import ConnectionHandler from '../view/handler/ConnectionHandler';
 import { show } from '../util/printUtils';
 import PanningHandler from '../view/handler/PanningHandler';
 import { cloneCell } from '../util/cellArrayUtils';
+import { GlobalConfig } from '../util/config';
 
 // TODO disabled side effects, so editor resources are not loaded by default
 // This should be done in a different way
+
+// This can be done on demand by calling Translations.loadResources
+// Taken from https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/editor/mxEditor.js#L394-L405
 /**
  * Installs the required language resources at class
  * loading time.
@@ -461,8 +464,7 @@ export class Editor extends EventSource {
    * key does not exist then the value is used as the error message. Default is 'askZoom'.
    * @default 'askZoom'
    */
-  // askZoomResource: 'askZoom' | '';
-  askZoomResource = Client.language !== 'none' ? 'askZoom' : '';
+  askZoomResource = GlobalConfig.i18n.isEnabled() ? 'askZoom' : '';
 
   /**
    * Group: Controls and Handlers
@@ -472,46 +474,46 @@ export class Editor extends EventSource {
    * this key does not exist then the value is used as the error message. Default is 'lastSaved'.
    * @default 'lastSaved'.
    */
-  lastSavedResource = Client.language !== 'none' ? 'lastSaved' : '';
+  lastSavedResource = GlobalConfig.i18n.isEnabled() ? 'lastSaved' : '';
 
   /**
    * Specifies the resource key for the current file info. If the resource for
    * this key does not exist then the value is used as the error message. Default is 'currentFile'.
    * @default 'currentFile'
    */
-  currentFileResource = Client.language !== 'none' ? 'currentFile' : '';
+  currentFileResource = GlobalConfig.i18n.isEnabled() ? 'currentFile' : '';
 
   /**
    * Specifies the resource key for the properties window title. If the
    * resource for this key does not exist then the value is used as the
    * error message. Default is 'properties'.
    * @default 'properties'
    */
-  propertiesResource = Client.language !== 'none' ? 'properties' : '';
+  propertiesResource = GlobalConfig.i18n.isEnabled() ? 'properties' : '';
 
   /**
    * Specifies the resource key for the tasks window title. If the
    * resource for this key does not exist then the value is used as the
    * error message. Default is 'tasks'.
    * @default 'tasks'
    */
-  tasksResource = Client.language !== 'none' ? 'tasks' : '';
+  tasksResource = GlobalConfig.i18n.isEnabled() ? 'tasks' : '';
 
   /**
    * Specifies the resource key for the help window title. If the
    * resource for this key does not exist then the value is used as the
    * error message. Default is 'help'.
    * @default 'help'
    */
-  helpResource = Client.language !== 'none' ? 'help' : '';
+  helpResource = GlobalConfig.i18n.isEnabled() ? 'help' : '';
 
   /**
    * Specifies the resource key for the outline window title. If the
    * resource for this key does not exist then the value is used as the
    * error message. Default is 'outline'.
    * @default 'outline'
    */
-  outlineResource = Client.language !== 'none' ? 'outline' : '';
+  outlineResource = GlobalConfig.i18n.isEnabled() ? 'outline' : '';
 
   /**
    * Reference to the {@link MaxWindow} that contains the outline. The {@link outline}
@@ -1249,7 +1251,7 @@ export class Editor extends EventSource {
     this.addAction('zoom', (editor: Editor) => {
       const current = editor.graph.getView().scale * 100;
       const preInput = prompt(
-        Translations.get(editor.askZoomResource) || editor.askZoomResource,
+        GlobalConfig.i18n.get(editor.askZoomResource) || editor.askZoomResource,
         String(current)
       );
 
@@ -1745,7 +1747,7 @@ export class Editor extends EventSource {
         const tstamp = new Date().toLocaleString();
         this.setStatus(
           `${
-            Translations.get(this.lastSavedResource) || this.lastSavedResource
+            GlobalConfig.i18n.get(this.lastSavedResource) || this.lastSavedResource
           }: ${tstamp}`
         );
       });
@@ -1754,7 +1756,7 @@ export class Editor extends EventSource {
       // when new files are opened
       this.addListener(InternalEvent.OPEN, () => {
         this.setStatus(
-          `${Translations.get(this.currentFileResource) || this.currentFileResource}: ${
+          `${GlobalConfig.i18n.get(this.currentFileResource) || this.currentFileResource}: ${
             this.filename
           }`
         );
@@ -2078,7 +2080,7 @@ export class Editor extends EventSource {
         // Displays the contents in a window and stores a reference to the
         // window for later hiding of the window
         this.properties = new MaxWindow(
-          Translations.get(this.propertiesResource) || this.propertiesResource,
+          GlobalConfig.i18n.get(this.propertiesResource) || this.propertiesResource,
           node,
           x,
           y,
@@ -2265,7 +2267,7 @@ export class Editor extends EventSource {
       div.style.paddingLeft = '20px';
       const w = document.body.clientWidth;
       const wnd = new MaxWindow(
-        Translations.get(this.tasksResource) || this.tasksResource,
+        GlobalConfig.i18n.get(this.tasksResource) || this.tasksResource,
         div,
         w - 220,
         this.tasksTop,
@@ -2334,7 +2336,10 @@ export class Editor extends EventSource {
   showHelp(tasks: any | null = null): void {
     if (this.help == null) {
       const frame = document.createElement('iframe');
-      frame.setAttribute('src', <string>(Translations.get('urlHelp') || this.urlHelp));
+      frame.setAttribute(
+        'src',
+        <string>(GlobalConfig.i18n.get('urlHelp') || this.urlHelp)
+      );
       frame.setAttribute('height', '100%');
       frame.setAttribute('width', '100%');
       frame.setAttribute('frameBorder', '0');
@@ -2344,7 +2349,7 @@ export class Editor extends EventSource {
       const h = document.body.clientHeight || document.documentElement.clientHeight;
 
       const wnd = new MaxWindow(
-        Translations.get(this.helpResource) || this.helpResource,
+        GlobalConfig.i18n.get(this.helpResource) || this.helpResource,
         frame,
         (w - this.helpWidth) / 2,
         (h - this.helpHeight) / 3,
@@ -2398,7 +2403,7 @@ export class Editor extends EventSource {
       div.style.cursor = 'move';
 
       const wnd = new MaxWindow(
-        Translations.get(this.outlineResource) || this.outlineResource,
+        GlobalConfig.i18n.get(this.outlineResource) || this.outlineResource,
         div,
         600,
         480,

diff --git a/packages/core/src/editor/EditorPopupMenu.ts b/packages/core/src/editor/EditorPopupMenu.ts
@@ -19,10 +19,9 @@ limitations under the License.
 import Cell from '../view/cell/Cell';
 import MaxPopupMenu from '../gui/MaxPopupMenu';
 import { getTextContent } from '../util/domUtils';
-import Translations from '../util/Translations';
 import Editor from './Editor';
-
 import { PopupMenuItem } from '../types';
+import { GlobalConfig } from '../util/config';
 
 /**
  * Creates popupmenus for mouse events.  This object holds an XML node which is a description of the popup menu to be created.  In {@link createMenu}, the configuration is applied to the context and the resulting menu items are added to the menu dynamically.  See {@link createMenu} for a description of the configuration format.
@@ -185,7 +184,7 @@ export class EditorPopupMenu {
 
         if (condition == null || conditions[condition]) {
           let as = <string>item.getAttribute('as');
-          as = Translations.get(as) || as;
+          as = GlobalConfig.i18n.get(as) || as;
           const funct = eval(getTextContent(<Text>(<unknown>item)));
           const action = item.getAttribute('action');
           let icon = item.getAttribute('icon');

diff --git a/packages/core/src/gui/MaxForm.ts b/packages/core/src/gui/MaxForm.ts
@@ -19,7 +19,7 @@ limitations under the License.
 import Client from '../Client';
 import InternalEvent from '../view/event/InternalEvent';
 import { write, writeln } from '../util/domUtils';
-import Translations from '../util/Translations';
+import { GlobalConfig } from '../util/config';
 
 /**
  * A simple class for creating HTML forms.
@@ -65,7 +65,7 @@ class MaxForm {
 
     // Adds the ok button
     let button = document.createElement('button');
-    write(button, Translations.get('ok') || 'OK');
+    write(button, GlobalConfig.i18n.get('ok') || 'OK');
     td.appendChild(button);
 
     InternalEvent.addListener(button, 'click', () => {
@@ -74,7 +74,7 @@ class MaxForm {
 
     // Adds the cancel button
     button = document.createElement('button');
-    write(button, Translations.get('cancel') || 'Cancel');
+    write(button, GlobalConfig.i18n.get('cancel') || 'Cancel');
     td.appendChild(button);
 
     InternalEvent.addListener(button, 'click', () => {

diff --git a/packages/core/src/gui/MaxWindow.ts b/packages/core/src/gui/MaxWindow.ts
@@ -24,7 +24,7 @@ import InternalEvent from '../view/event/InternalEvent';
 import Client from '../Client';
 import { NODETYPE } from '../util/Constants';
 import { br, write } from '../util/domUtils';
-import Translations from '../util/Translations';
+import { GlobalConfig } from '../util/config';
 import { getClientX, getClientY } from '../util/EventUtils';
 import { htmlEntities } from '../util/StringUtils';
 import { utils } from '../util/Utils';
@@ -1058,7 +1058,7 @@ export const error = (
   const w = document.body.clientWidth;
   const h = document.body.clientHeight || document.documentElement.clientHeight;
   const warn = new MaxWindow(
-    Translations.get(utils.errorResource) || utils.errorResource,
+    GlobalConfig.i18n.get(utils.errorResource) || utils.errorResource,
     div,
     (w - width) / 2,
     h / 4,
@@ -1080,7 +1080,7 @@ export const error = (
       warn.destroy();
     });
 
-    write(button, Translations.get(utils.closeResource) || utils.closeResource);
+    write(button, GlobalConfig.i18n.get(utils.closeResource) || utils.closeResource);
 
     tmp.appendChild(button);
     div.appendChild(tmp);