Conversation
These resources were available in mxGraph but were missing in maxGraph. The Storybook demo shows how to load the i18n resources and the npm package includes them. The documentation now provides a dedicated page explaining how to use i18n. In addition, the following stories were improved: - Control: display overlay image which lets delete the related cell - Permissions: add missing config to ensure that the connector image is always displayed
WalkthroughNew localization files have been added for both the core and HTML packages supporting editor and graph interfaces in English, German, and Chinese. The package configuration now exports the i18n directory. Documentation has been updated with a new i18n usage guide and modifications to the API description. Additionally, Storybook configurations and related stories have been updated with image path adjustments, new configuration invocations, and enhanced logging for i18n resource loading. Minor documentation comment improvements were also made in the core view components. Changes
Sequence Diagram(s)sequenceDiagram
participant SP as Storybook Preview
participant C as Client
participant T as Translations
participant L as Logger
SP ->> C: Retrieve basePath for i18n
SP ->> T: Call Translations.add(`${C.basePath}/i18n/*`, callback)
T -->> L: Log "i18n resources loaded" upon callback execution
Possibly related PRs
Suggested labels
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (7)
packages/core/i18n/editor_de.txt (1)
1-5:Details
❓ Verification inconclusive
Consider enhancing German translations.
The translations are functionally correct but could be improved:
- "Uebersicht" could be "Übersicht" if UTF-8 encoding is supported
- Consider adding a comment header to specify the encoding used
Let's verify the encoding support and consistency across language files:
🏁 Script executed:
#!/bin/bash # Check encoding of i18n files and look for similar patterns file packages/core/i18n/*.txt packages/html/public/i18n/*.txtLength of output: 521
Enhance German Translations & Verify Encoding in i18n Files
- Update the translation for "outline" in
packages/core/i18n/editor_de.txtfrom "Uebersicht" to "Übersicht" if your environment supports UTF-8.- The initial encoding check failed because the
filecommand was not found; please manually verify that all i18n text files (e.g. inpackages/core/i18n/andpackages/html/public/i18n/) are encoded in UTF-8.- Consider adding an encoding comment header (e.g.,
# -*- coding: utf-8 -*-) at the top of these files for greater clarity.🧰 Tools
🪛 LanguageTool
[uncategorized] ~1-~1: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: askZoom=Zoom eingeben (%) properties=Eigenschaften outline=Uebersi...(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~2-~2: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...om eingeben (%) properties=Eigenschaften outline=Uebersicht tasks=Aufgaben help=H...(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~3-~3: Hier scheint es einen Fehler zu geben.
Context: ...en (%) properties=Eigenschaften outline=Uebersicht tasks=Aufgaben help=Hilfe(AI_DE_MERGED_MATCH)
[uncategorized] ~4-~4: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...haften outline=Uebersicht tasks=Aufgaben help=Hilfe(AI_DE_GGEC_UNNECESSARY_SPACE)
packages/html/public/i18n/editor_de.txt (1)
1-5:Details
❓ Verification inconclusive
Verify if file duplication is necessary.
This file is identical to
packages/core/i18n/editor_de.txt. Consider:
- Using a build step to copy files if needed
- Creating a shared i18n package
- Using symlinks
Let's check if other language files follow the same pattern:
🏁 Script executed:
#!/bin/bash # Compare i18n files between core and html packages diff -r packages/core/i18n/ packages/html/public/i18n/Length of output: 56
Action: Revisit your i18n file reuse strategy.
The German translation file in the html package (packages/html/public/i18n/editor_de.txt) appears to be identical to the one in the core package (packages/core/i18n/editor_de.txt). Please manually verify that this duplication is intentional. If it is acceptable, consider simplifying maintenance by:
- Implementing a build step to copy/sync the file
- Creating a shared i18n package accessible by both modules
- Using symlinks
Document the decision or update the strategy accordingly.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~1-~1: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: askZoom=Zoom eingeben (%) properties=Eigenschaften outline=Uebersi...(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~2-~2: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...om eingeben (%) properties=Eigenschaften outline=Uebersicht tasks=Aufgaben help=H...(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~3-~3: Hier scheint es einen Fehler zu geben.
Context: ...en (%) properties=Eigenschaften outline=Uebersicht tasks=Aufgaben help=Hilfe(AI_DE_MERGED_MATCH)
[uncategorized] ~4-~4: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...haften outline=Uebersicht tasks=Aufgaben help=Hilfe(AI_DE_GGEC_UNNECESSARY_SPACE)
packages/html/stories/Permissions.stories.js (1)
216-229: Consider enhancing the Permission class implementation.The Permission class could be improved:
- Add TypeScript for better type safety
- Use private fields for better encapsulation
- Consider using a builder pattern for complex permission combinations
Example enhancement:
class Permission { #locked: boolean; #createEdges: boolean; #editEdges: boolean; #editVertices: boolean; #cloneCells: boolean; constructor({ locked = false, createEdges = true, editEdges = true, editVertices = true, cloneCells = true } = {}) { this.#locked = locked; this.#createEdges = createEdges; this.#editEdges = editEdges; this.#editVertices = editVertices; this.#cloneCells = cloneCells; } apply(graph: Graph): void { graph.setConnectable(this.#createEdges); graph.setCellsLocked(this.#locked); } }packages/html/.storybook/preview.ts (1)
23-26: Add error handling for i18n resource loading.While the implementation works, it could be more robust with proper error handling.
defaultLogger.info('[sb-config] Loading i18n resources for Graph...'); -Translations.add(`${Client.basePath}/i18n/graph`, null, (): void => { +Translations.add(`${Client.basePath}/i18n/graph`, null, + (): void => { defaultLogger.info('[sb-config] i18n resources loaded for Graph'); + }, + (error): void => { + defaultLogger.error('[sb-config] Failed to load i18n resources:', error); });packages/core/i18n/graph_de.txt (1)
7-7: Update to modern German spelling.The word "Schliessen" should use the modern German spelling with "ß".
-close=Schliessen +close=Schließen🧰 Tools
🪛 LanguageTool
[uncategorized] ~7-~7: Hier scheint es einen Fehler zu geben.
Context: ...klicken um Orientierung zu ändern close=Schliessen error=Fehler done=Fertig cancel=Abbreche...(AI_DE_MERGED_MATCH)
packages/website/docs/development/high-level-api-description.md (2)
7-10: Emphasizing the Need for Rework
Changing from a simple note to a warning here effectively signals that this content is both adapted and in need of an update. Ensure that a follow-up is scheduled to rework this section so it fully reflects maxGraph’s current state.
121-132: Link Update and Image Section Note
The added link to the i18n documentation is a useful pointer for users looking for detailed internationalization guidance. In the Images section, the note indicates that the content (sourced from mxGraph) still requires updating. Consider rephrasing or updating this note once the image resources and related documentation reflect maxGraph's current implementation to avoid any confusion.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
packages/core/i18n/editor.txt(1 hunks)packages/core/i18n/editor_de.txt(1 hunks)packages/core/i18n/editor_zh.txt(1 hunks)packages/core/i18n/graph.txt(1 hunks)packages/core/i18n/graph_de.txt(1 hunks)packages/core/i18n/graph_zh.txt(1 hunks)packages/core/package.json(1 hunks)packages/core/src/view/GraphSelectionModel.ts(1 hunks)packages/core/src/view/GraphView.ts(1 hunks)packages/html/.storybook/preview.ts(3 hunks)packages/html/public/i18n/editor.txt(1 hunks)packages/html/public/i18n/editor_de.txt(1 hunks)packages/html/public/i18n/editor_zh.txt(1 hunks)packages/html/public/i18n/graph.txt(1 hunks)packages/html/public/i18n/graph_de.txt(1 hunks)packages/html/public/i18n/graph_zh.txt(1 hunks)packages/html/stories/Control.stories.js(1 hunks)packages/html/stories/Permissions.stories.js(2 hunks)packages/html/stories/SwimLanes.stories.ts(1 hunks)packages/website/docs/development/high-level-api-description.md(2 hunks)packages/website/docs/usage/i18n.md(1 hunks)
✅ Files skipped from review due to trivial changes (11)
- packages/core/i18n/editor.txt
- packages/html/public/i18n/editor_zh.txt
- packages/core/i18n/graph_zh.txt
- packages/html/stories/Control.stories.js
- packages/html/public/i18n/editor.txt
- packages/html/stories/SwimLanes.stories.ts
- packages/core/i18n/editor_zh.txt
- packages/core/src/view/GraphSelectionModel.ts
- packages/html/public/i18n/graph.txt
- packages/core/i18n/graph.txt
- packages/core/src/view/GraphView.ts
🧰 Additional context used
🪛 LanguageTool
packages/core/i18n/editor_de.txt
[uncategorized] ~1-~1: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: askZoom=Zoom eingeben (%) properties=Eigenschaften outline=Uebersi...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~2-~2: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...om eingeben (%) properties=Eigenschaften outline=Uebersicht tasks=Aufgaben help=H...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~3-~3: Hier scheint es einen Fehler zu geben.
Context: ...en (%) properties=Eigenschaften outline=Uebersicht tasks=Aufgaben help=Hilfe
(AI_DE_MERGED_MATCH)
[uncategorized] ~4-~4: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...haften outline=Uebersicht tasks=Aufgaben help=Hilfe
(AI_DE_GGEC_UNNECESSARY_SPACE)
packages/core/i18n/graph_de.txt
[uncategorized] ~1-~1: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: alreadyConnected=Knoten schon verbunden containsValidationErrors=Enthält Validie...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~2-~2: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...idationErrors=Enthält Validierungsfehler updatingDocument=Aktualisiere Dokument. ...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~3-~3: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...t=Aktualisiere Dokument. Bitte warten... updatingSelection=Aktualisiere Markierun...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~4-~4: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...Aktualisiere Markierung. Bitte warten... collapse-expand=Einklappen/Ausklappen do...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~5-~5: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ..... collapse-expand=Einklappen/Ausklappen doubleClickOrientation=Doppelklicken um ...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~6-~6: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...=Doppelklicken um Orientierung zu ändern close=Schliessen error=Fehler done=Ferti...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~7-~7: Hier scheint es einen Fehler zu geben.
Context: ...klicken um Orientierung zu ändern close=Schliessen error=Fehler done=Fertig cancel=Abbreche...
(AI_DE_MERGED_MATCH)
[uncategorized] ~8-~8: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ... zu ändern close=Schliessen error=Fehler done=Fertig cancel=Abbrechen ok=OK
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~9-~9: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...lose=Schliessen error=Fehler done=Fertig cancel=Abbrechen ok=OK
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~10-~10: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...rror=Fehler done=Fertig cancel=Abbrechen ok=OK
(AI_DE_GGEC_UNNECESSARY_SPACE)
packages/html/public/i18n/editor_de.txt
[uncategorized] ~1-~1: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: askZoom=Zoom eingeben (%) properties=Eigenschaften outline=Uebersi...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~2-~2: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...om eingeben (%) properties=Eigenschaften outline=Uebersicht tasks=Aufgaben help=H...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~3-~3: Hier scheint es einen Fehler zu geben.
Context: ...en (%) properties=Eigenschaften outline=Uebersicht tasks=Aufgaben help=Hilfe
(AI_DE_MERGED_MATCH)
[uncategorized] ~4-~4: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...haften outline=Uebersicht tasks=Aufgaben help=Hilfe
(AI_DE_GGEC_UNNECESSARY_SPACE)
packages/html/public/i18n/graph_de.txt
[uncategorized] ~1-~1: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: alreadyConnected=Knoten schon verbunden containsValidationErrors=Enthält Validie...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~2-~2: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...idationErrors=Enthält Validierungsfehler updatingDocument=Aktualisiere Dokument. ...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~4-~4: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...Aktualisiere Markierung. Bitte warten... collapse-expand=Einklappen/Ausklappen do...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~5-~5: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ..... collapse-expand=Einklappen/Ausklappen doubleClickOrientation=Doppelklicken um ...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~6-~6: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...=Doppelklicken um Orientierung zu ändern close=Schliessen error=Fehler done=Ferti...
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~7-~7: Hier scheint es einen Fehler zu geben.
Context: ...klicken um Orientierung zu ändern close=Schliessen error=Fehler done=Fertig cancel=Abbreche...
(AI_DE_MERGED_MATCH)
[uncategorized] ~8-~8: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ... zu ändern close=Schliessen error=Fehler done=Fertig cancel=Abbrechen ok=OK
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~9-~9: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...lose=Schliessen error=Fehler done=Fertig cancel=Abbrechen ok=OK
(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~10-~10: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...rror=Fehler done=Fertig cancel=Abbrechen ok=OK
(AI_DE_GGEC_UNNECESSARY_SPACE)
🔇 Additional comments (6)
packages/core/package.json (1)
29-29: LGTM! Proper configuration for i18n resources.The i18n directory is correctly added to both exports and files sections, making the localization resources available to package consumers.
Also applies to: 37-37
packages/html/stories/Permissions.stories.js (1)
32-32: LGTM! Proper configuration of image base path.The configureImagesBasePath function is correctly imported and called before creating the graph container, ensuring the connector image works properly.
Also applies to: 48-49
packages/html/public/i18n/graph_zh.txt (1)
1-11: LGTM! Chinese translations are well-structured and complete.The translations cover all essential UI strings and maintain consistent formatting throughout the file.
packages/html/public/i18n/graph_de.txt (1)
1-11: Maintain consistency with core translations.This file should mirror any updates made to
packages/core/i18n/graph_de.txt, including the spelling correction of "Schliessen" to "Schließen".🧰 Tools
🪛 LanguageTool
[uncategorized] ~1-~1: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: alreadyConnected=Knoten schon verbunden containsValidationErrors=Enthält Validie...(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~2-~2: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...idationErrors=Enthält Validierungsfehler updatingDocument=Aktualisiere Dokument. ...(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~4-~4: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...Aktualisiere Markierung. Bitte warten... collapse-expand=Einklappen/Ausklappen do...(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~5-~5: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ..... collapse-expand=Einklappen/Ausklappen doubleClickOrientation=Doppelklicken um ...(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~6-~6: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...=Doppelklicken um Orientierung zu ändern close=Schliessen error=Fehler done=Ferti...(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~7-~7: Hier scheint es einen Fehler zu geben.
Context: ...klicken um Orientierung zu ändern close=Schliessen error=Fehler done=Fertig cancel=Abbreche...(AI_DE_MERGED_MATCH)
[uncategorized] ~8-~8: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ... zu ändern close=Schliessen error=Fehler done=Fertig cancel=Abbrechen ok=OK(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~9-~9: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...lose=Schliessen error=Fehler done=Fertig cancel=Abbrechen ok=OK(AI_DE_GGEC_UNNECESSARY_SPACE)
[uncategorized] ~10-~10: Das sieht falsch platziert oder unnötig aus. Überlegen Sie, es zu löschen.
Context: ...rror=Fehler done=Fertig cancel=Abbrechen ok=OK(AI_DE_GGEC_UNNECESSARY_SPACE)
packages/website/docs/usage/i18n.md (2)
1-4: Solid Front Matter Metadata
The front-matter metadata (lines 1–4) is clear and properly sets the context for the i18n documentation page. This well-structured header will help in correct sidebar positioning and page description.
6-44: Overall Clarity and Completeness
This new i18n documentation file thoroughly explains how to configure and leverage maxGraph’s internationalization features. The examples provided, along with the clear step-by-step instructions for loading resources, greatly enhance developer usability.
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/core/src/util/Translations.ts (1)
69-71: Consider enhancing the default resources documentation.While the simplified instruction is clear, consider adding:
- A brief description of what the default resources contain
- The expected location of these resources
- The supported languages (as mentioned in the PR: English, German, and Chinese)
* ## Loading default resources * -* Call {@link loadResources} to load the default resources file for both {@link Graph} and {@link Editor}. +* Call {@link loadResources} to load the default resources file for both {@link Graph} and {@link Editor}. +* The default resources include translations for UI elements in English, German (de), and Chinese (zh). +* These resources are located in the `i18n` directory and follow the naming pattern: +* - editor.txt, editor_de.txt, editor_zh.txt +* - graph.txt, graph_de.txt, graph_zh.txt
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/core/src/util/Translations.ts(2 hunks)packages/website/docs/usage/i18n.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/website/docs/usage/i18n.md
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build (windows-2022)
- GitHub Check: build (ubuntu-22.04)
🔇 Additional comments (2)
packages/core/src/util/Translations.ts (2)
41-45: LGTM! Documentation format improvement.The change from JavaScript to XML format in the code block better reflects the actual format used in the editor configuration file.
73-377: LGTM! Robust i18n implementation.The
Translationsclass provides a comprehensive and well-designed internationalization solution with:
- Flexible resource loading (sync/async)
- Proper language detection and fallback
- Robust error handling
- Extensible design
🧰 Tools
🪛 Biome (1.9.4)
[error] 72-377: Avoid classes that contain only static members.
Prefer using simple functions instead of classes with only static members.
(lint/complexity/noStaticOnlyClass)
[error] 187-187: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
[error] 372-372: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)



These resources were available in mxGraph but were missing in maxGraph.
The Storybook demo shows how to load the i18n resources and the npm package includes them.
The documentation now provides a dedicated page explaining how to use i18n.
In addition, the following stories were improved:
Notes
Covers #688
Summary by CodeRabbit
New Features
Documentation
maxGraphAPI and its translation mechanisms.