maxGraph · tbouffard · Mar 12, 2025 · Mar 12, 2025 · Mar 12, 2025 · Mar 12, 2025
diff --git a/packages/core/src/editor/Editor.ts b/packages/core/src/editor/Editor.ts
@@ -391,20 +391,19 @@ import { TranslationsConfig } from '../i18n/config';
  * Fires when the escape key is pressed. The <code>event</code> property
  * contains the key event.
  *
- * ### Constructor: Editor
- *
- * Constructs a new editor. This function invokes the {@link onInit} callback
- * upon completion.
- *
- * ```javascript
- * var config = mxUtils.load('config/diagrameditor.xml').getDocumentElement();
- * var editor = new Editor(config);
- * ```
- *
- * @class Editor
- * @extends EventSource
+ * @category Editor
  */
 export class Editor extends EventSource {
+  /**
+   * Constructs a new editor. This function invokes the {@link onInit} callback upon completion.
+   *
+   * ```javascript
+   * const config = load('config/diagram-editor.xml').getDocumentElement();
+   * const editor = new Editor(config);
+   * ```
+   *
+   * @param config The configuration element that contains the editor configuration.
+   */
   constructor(config: Element) {
     super();
 

diff --git a/packages/core/src/editor/EditorKeyHandler.ts b/packages/core/src/editor/EditorKeyHandler.ts
@@ -22,21 +22,28 @@ import KeyHandler from '../view/handler/KeyHandler';
 import Editor from './Editor';
 
 /**
- * Binds keycodes to action names in an editor.  This aggregates an internal {@link handler} and extends the implementation of {@link KeyHandler.escape} to not only cancel the editing, but also hide the properties dialog and fire an <Editor.escape> event via {@link editor}.  An instance of this class is created by {@link Editor} and stored in {@link Editor.keyHandler}.
+ * Binds keycodes to action names in an editor.
  *
- * @Example
+ * This aggregates an internal {@link handler} and extends the implementation of {@link KeyHandler.escape} to not only cancel the editing,
+ * but also hide the properties dialog and fire an {@link InternalEvent.ESCAPE} event via {@link editor}.
+ *
+ * An instance of this class is created by {@link Editor} and stored in {@link Editor.keyHandler}.
+ *
+ * ### Example
  * Bind the delete key to the delete action in an existing editor.
  * ```javascript
- * var keyHandler = new EditorKeyHandler(editor);
+ * const keyHandler = new EditorKeyHandler(editor);
  * keyHandler.bindAction(46, 'delete');
  * ```
  *
- * @Codec
- * This class uses the {@link DefaultKeyHandlerCodec} to read configuration data into an existing instance.  See {@link DefaultKeyHandlerCodec} for a description of the configuration format.
+ * ### Codec
+ * This class uses the {@link EditorKeyHandlerCodec} to read configuration data into an existing instance.  See {@link EditorKeyHandlerCodec} for a description of the configuration format.
  *
- * @Keycodes
+ * ### Keycodes
  * See {@link KeyHandler}.
  * An {@link InternalEvent.ESCAPE} event is fired via the editor if the escape key is pressed.
+ *
+ * @category Editor
  */
 export class EditorKeyHandler {
   constructor(editor: Editor | null = null) {

diff --git a/packages/core/src/editor/EditorPopupMenu.ts b/packages/core/src/editor/EditorPopupMenu.ts
@@ -25,11 +25,18 @@ import Editor from './Editor';
 import { PopupMenuItem } from '../types';
 
 /**
- * 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.
- * This class does not create the DOM nodes required for the popup menu, it only parses an XML description to invoke the respective methods on an {@link mxPopupMenu} each time the menu is displayed.
+ * Creates popupmenus for mouse events.
  *
- * @Codec
- * This class uses the {@link DefaultPopupMenuCodec} to read configuration data into an existing instance, however, the actual parsing is done by this class during program execution, so the format is described below.
+ * 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.
+ *
+ * This class does not create the DOM nodes required for the popup menu, it only parses an XML description to invoke the respective methods on an {@link MaxPopupMenu} each time the menu is displayed.
+ *
+ * ### Codec
+ * This class uses the {@link EditorPopupMenuCodec} to read configuration data into an existing instance, however, the actual parsing is done by this class during program execution, so the format is described below.
+ *
+ * @category Editor
  */
 export class EditorPopupMenu {
   constructor(config: Element | null = null) {

diff --git a/packages/core/src/editor/EditorToolbar.ts b/packages/core/src/editor/EditorToolbar.ts
@@ -30,28 +30,31 @@ import EventObject from '../view/event/EventObject';
 import type { DropHandler } from '../view/other/DragSource';
 
 /**
- * Toolbar for the editor. This modifies the state of the graph
- * or inserts new cells upon mouse clicks.
+ * Toolbar for the editor.
  *
- * @Example:
+ * This modifies the state of the graph or inserts new cells upon mouse clicks.
+ *
+ * ### Example
  *
  * Create a toolbar with a button to copy the selection into the clipboard,
  * and a combo box with one action to paste the selection from the clipboard
  * into the graph.
  *
  * ```
- * var toolbar = new EditorToolbar(container, editor);
+ * const toolbar = new EditorToolbar(container, editor);
  * toolbar.addItem('Copy', null, 'copy');
  *
- * var combo = toolbar.addActionCombo('More actions...');
+ * const combo = toolbar.addActionCombo('More actions...');
  * toolbar.addActionOption(combo, 'Paste', 'paste');
  * ```
  *
- * @Codec:
+ * ### Codec
  *
  * This class uses the {@link DefaultToolbarCodec} to read configuration
  * data into an existing instance. See {@link DefaultToolbarCodec} for a
  * description of the configuration format.
+ *
+ * @category Editor
  */
 export class EditorToolbar {
   constructor(container: HTMLElement | null = null, editor: Editor | null = null) {
@@ -116,7 +119,7 @@ export class EditorToolbar {
         }
       );
 
-      // Resets the selected tool after a doubleclick or escape keystroke
+      // Resets the selected tool after a double click or escape keystroke
       this.resetHandler = () => {
         if (this.toolbar != null) {
           this.toolbar.resetMode(true);

diff --git a/packages/core/src/gui/MaxForm.ts b/packages/core/src/gui/MaxForm.ts
@@ -24,7 +24,7 @@ import Translations from '../i18n/Translations';
 /**
  * A simple class for creating HTML forms.
  *
- * @class MaxForm
+ * @category GUI
  */
 class MaxForm {
   constructor(className: string) {

diff --git a/packages/core/src/gui/MaxLog.ts b/packages/core/src/gui/MaxLog.ts
@@ -28,6 +28,9 @@ import { VERSION } from '../util/Constants';
 
 /**
  * A singleton class that implements a simple console.
+ *
+ * @category GUI
+ * @category Logging
  */
 class MaxLog {
   static textarea: HTMLTextAreaElement | null = null;

diff --git a/packages/core/src/gui/MaxLogAsLogger.ts b/packages/core/src/gui/MaxLogAsLogger.ts
@@ -24,6 +24,7 @@ import MaxLog from './MaxLog';
  *
  * @experimental subject to change or removal. The logging system may be modified in the future without prior notice.
  * @since 0.11.0
+ * @category GUI
  * @category Logging
  */
 export class MaxLogAsLogger implements Logger {

diff --git a/packages/core/src/gui/MaxPopupMenu.ts b/packages/core/src/gui/MaxPopupMenu.ts
@@ -47,6 +47,8 @@ import type { PopupMenuItem } from '../types';
  * ### `InternalEvent.SHOW`
  *
  * Fires after the menu has been shown in {@link popup}.
+ *
+ * @category GUI
  */
 class MaxPopupMenu extends EventSource {
   constructor(

diff --git a/packages/core/src/gui/MaxToolbar.ts b/packages/core/src/gui/MaxToolbar.ts
@@ -43,6 +43,7 @@ export interface HTMLImageElementWithProps extends HTMLImageElement {
  * Fires when an item was selected in the toolbar. The EventObject {@link InternalEvent.function}
  * property contains the function that was selected in {@link selectMode}.
  *
+ * @category GUI
  */
 class MaxToolbar extends EventSource {
   constructor(container: HTMLElement) {

diff --git a/packages/core/src/gui/MaxWindow.ts b/packages/core/src/gui/MaxWindow.ts
@@ -176,8 +176,7 @@ let activeWindow: MaxWindow | null = null;
  *
  * Fires before the window is destroyed. This event has no properties.
  *
- * @class MaxWindow
- * @extends EventSource
+ * @category GUI
  */
 class MaxWindow extends EventSource {
   constructor(

diff --git a/packages/core/src/i18n/Translations.ts b/packages/core/src/i18n/Translations.ts
@@ -72,6 +72,8 @@ import { TranslationsConfig } from './config';
  * ## Loading default resources
  *
  * Call {@link loadResources} to load the default resources file for both {@link Graph} and {@link Editor}.
+ *
+ * @category I18n
  */
 class Translations {
   /*

diff --git a/packages/core/src/i18n/config.ts b/packages/core/src/i18n/config.ts
@@ -37,12 +37,25 @@ const values: TranslationsConfigValuesType = {
 const originalValues: TranslationsConfigValuesType = {};
 shallowCopy(values, originalValues);
 
+/**
+ * Resets {@link TranslationsConfig} to default values.
+ *
+ * @experimental Subject to change or removal. maxGraph's global configuration may be modified in the future without prior notice.
+ * @since 0.16.0
+ * @category Configuration
+ * @category I18n
+ */
 export const resetTranslationsConfig = (): void => {
   shallowCopy(originalValues, values);
 };
 
 /**
  * Global configuration for {@link Translations}.
+ *
+ * @experimental subject to change or removal. maxGraph's global configuration may be modified in the future without prior notice.
+ * @since 0.16.0
+ * @category Configuration
+ * @category I18n
  */
 export const TranslationsConfig = {
   /**

diff --git a/packages/core/src/serialization/register-model-codecs.ts b/packages/core/src/serialization/register-model-codecs.ts
@@ -40,6 +40,7 @@ let isModelCodecsRegistered = false;
  *              if they have never been registered before.
  * @since 0.10.0
  * @category Configuration
+ * @category Serialization with Codecs
  */
 export const registerModelCodecs = (force = false) => {
   if (!isModelCodecsRegistered || force) {

diff --git a/packages/core/src/serialization/register-other-codecs.ts b/packages/core/src/serialization/register-other-codecs.ts
@@ -67,6 +67,7 @@ let isCoreCodecsRegistered = false;
  *              if they have never been registered before.
  * @since 0.6.0
  * @category Configuration
+ * @category Serialization with Codecs
  */
 export const registerCoreCodecs = (force = false) => {
   if (!isCoreCodecsRegistered || force) {
@@ -91,6 +92,7 @@ let isEditorCodecsRegistered = false;
  *              if they have never been registered before.
  * @since 0.6.0
  * @category Configuration
+ * @category Serialization with Codecs
  */
 export const registerEditorCodecs = (force = false) => {
   if (!isEditorCodecsRegistered || force) {
@@ -112,6 +114,7 @@ export const registerEditorCodecs = (force = false) => {
  *              if they have never been registered before.
  * @since 0.6.0
  * @category Configuration
+ * @category Serialization with Codecs
  */
 export const registerAllCodecs = (force = false) => {
   registerCoreCodecs(force);

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -35,10 +35,12 @@ export type UndoableChange = {
   redo?: () => void;
 };
 
+/** @category Style */
 export type StyleValue = string | number;
 
 export type Properties = Record<string, any>;
 
+/** @category Style */
 export type CellStyle = CellStateStyle & {
   /**
    * Names of styles used to fill properties before applying the specific properties defined in {@link CellStateStyle}.
@@ -66,6 +68,7 @@ export type CellStyle = CellStateStyle & {
   ignoreDefaultStyle?: boolean;
 };
 
+/** @category Style */
 export type CellStateStyle = {
   /**
    * This specifies if {@link arcSize} for rectangles is absolute or relative.
@@ -871,29 +874,41 @@ export type CellStateStyle = {
   whiteSpace?: WhiteSpaceValue;
 };
 
+/** @category Style */
 export type NumericCellStateStyleKeys = NonNullable<
   {
     [k in keyof CellStateStyle]: CellStateStyle[k] extends number | undefined ? k : never;
   }[keyof CellStateStyle]
 >;
 
+/** @category Style */
 export type ColorValue = string;
-/** Color values and special placeholders used to resolve colors (see {@link CellRenderer.resolveColor}) for style properties. */
+/**
+ * Color values and special placeholders used to resolve colors (see {@link CellRenderer.resolveColor}) for style properties.
+ * @category Style
+ */
 export type SpecialStyleColorValue =
   | 'indicated'
   | 'inherit'
   | 'none'
   | 'swimlane'
   | (string & {});
 
+/** @category Style */
 export type DirectionValue = 'north' | 'south' | 'east' | 'west';
+/** @category Style */
 export type TextDirectionValue = '' | 'ltr' | 'rtl' | 'auto';
+/** @category Style */
 export type AlignValue = 'left' | 'center' | 'right';
+/** @category Style */
 export type VAlignValue = 'top' | 'middle' | 'bottom';
+/** @category Style */
 export type OverflowValue = 'fill' | 'width' | 'auto' | 'hidden' | 'scroll' | 'visible';
+/** @category Style */
 export type WhiteSpaceValue = 'normal' | 'wrap' | 'nowrap' | 'pre';
 /**
  * Names used to register the edge markers provided out-of-the-box by maxGraph with {@link MarkerShape.addMarker}.
+ * @category Style
  */
 export type ArrowValue =
   | 'none'
@@ -909,11 +924,13 @@ export type ArrowValue =
 
 /**
  * {@link ArrowValue} with support for extensions.
+ * @category Style
  */
 export type StyleArrowValue = ArrowValue | (string & {});
 
 /**
  * Names used to register the shapes provided out-of-the-box by maxGraph with {@link CellRenderer.registerShape}.
+ * @category Style
  */
 export type ShapeValue =
   | 'rectangle'
@@ -935,6 +952,7 @@ export type ShapeValue =
 
 /**
  * {@link ShapeValue} with support for extensions.
+ * @category Style
  */
 export type StyleShapeValue = ShapeValue | (string & {});
 
@@ -1067,11 +1085,13 @@ export type VertexParameters = {
   y?: number;
 };
 
+/** @category Plugin */
 export interface GraphPluginConstructor {
-  new (graph: Graph): GraphPlugin;
   pluginId: string;
+  new (graph: Graph): GraphPlugin;
 }
 
+/** @category Plugin */
 export interface GraphPlugin {
   onDestroy: () => void;
 }
@@ -1179,6 +1199,9 @@ export type PerimeterValue =
  * @param target {@link CellState} that represents the target terminal.
  * @param points List of relative control points.
  * @param result Array of {@link Point} that represent the actual points of the edge.
+ *
+ * @since 0.8.0
+ * @category EdgeStyle
  */
 export type EdgeStyleFunction = (
   state: CellState,
@@ -1191,6 +1214,7 @@ export type EdgeStyleFunction = (
 /**
  * Names used to register the edge styles (a.k.a. connectors) provided out-of-the-box by maxGraph with {@link StyleRegistry.putValue}.
  * @since 0.14.0
+ * @category EdgeStyle
  */
 export type EdgeStyleValue =
   | 'elbowEdgeStyle'
@@ -1205,6 +1229,7 @@ export type EdgeStyleValue =
 /**
  * {@link EdgeStyleValue} with support for extensions and {@link EdgeStyleFunction}.
  * @since 0.14.0
+ * @category EdgeStyle
  */
 export type StyleEdgeStyleValue =
   | EdgeStyleFunction
@@ -1214,6 +1239,7 @@ export type StyleEdgeStyleValue =
 
 /**
  * @since 0.11.0
+ * @category Style
  */
 export type MarkerFactoryFunction = (
   canvas: AbstractCanvas2D,