maxGraph · tbouffard · Apr 18, 2025 · Apr 18, 2025 · Apr 18, 2025 · Apr 18, 2025
diff --git a/packages/core/src/editor/Editor.ts b/packages/core/src/editor/Editor.ts
@@ -1626,7 +1626,7 @@ export class Editor extends EventSource {
    */
   installInsertHandler(graph: Graph): void {
     const insertHandler: MouseListenerSet = {
-      mouseDown: (_sender: any, me: InternalMouseEvent) => {
+      mouseDown: (_sender: EventSource, me: InternalMouseEvent) => {
         if (
           this.insertFunction &&
           !me.isPopupTrigger() &&
@@ -1641,13 +1641,13 @@ export class Editor extends EventSource {
         }
       },
 
-      mouseMove: (_sender: any, me: InternalMouseEvent) => {
+      mouseMove: (_sender: EventSource, me: InternalMouseEvent) => {
         if (this.isActive) {
           me.consume();
         }
       },
 
-      mouseUp: (_sender: any, me: InternalMouseEvent) => {
+      mouseUp: (_sender: EventSource, me: InternalMouseEvent) => {
         if (this.isActive) {
           this.isActive = false;
           me.consume();

diff --git a/packages/core/src/view/GraphView.ts b/packages/core/src/view/GraphView.ts
@@ -2166,12 +2166,12 @@ export class GraphView extends EventSource {
       return state;
     };
 
-    // Adds basic listeners for graph event dispatching outside of the
+    // Adds basic listeners for graph event dispatching outside the
     // container and finishing the handling of a single gesture
     // Implemented via graph event dispatch loop to avoid duplicate events
     // in Firefox and Chrome
     graph.addMouseListener({
-      mouseDown: (sender: any, me: InternalMouseEvent) => {
+      mouseDown: () => {
         const popupMenuHandler = graph.getPlugin<PopupMenuHandler>('PopupMenuHandler');
         popupMenuHandler?.hideMenu();
       },

diff --git a/packages/core/src/view/cell/CellTracker.ts b/packages/core/src/view/cell/CellTracker.ts
@@ -21,8 +21,7 @@ import InternalMouseEvent from '../event/InternalMouseEvent';
 import type { Graph } from '../Graph';
 import type Cell from './Cell';
 import EventSource from '../event/EventSource';
-
-import type { ColorValue } from '../../types';
+import type { ColorValue, MouseListenerSet } from '../../types';
 
 /**
  * Event handler that highlights cells
@@ -77,7 +76,7 @@ import type { ColorValue } from '../../types';
  * });
  * ```
  */
-class CellTracker extends CellMarker {
+class CellTracker extends CellMarker implements MouseListenerSet {
   constructor(
     graph: Graph,
     color: ColorValue,
@@ -97,14 +96,14 @@ class CellTracker extends CellMarker {
   /**
    * Ignores the event. The event is not consumed.
    */
-  mouseDown(sender: EventSource, me: InternalMouseEvent) {
+  mouseDown() {
     return;
   }
 
   /**
    * Handles the event by highlighting the cell under the mouse pointer if it is over the hotspot region of the cell.
    */
-  mouseMove(sender: EventSource, me: InternalMouseEvent) {
+  mouseMove(_sender: EventSource, me: InternalMouseEvent) {
     if (this.isEnabled()) {
       this.process(me);
     }
@@ -113,7 +112,7 @@ class CellTracker extends CellMarker {
   /**
    * Handles the event by resetting the highlight.
    */
-  mouseUp(sender: EventSource, me: InternalMouseEvent) {
+  mouseUp() {
     return;
   }
 

diff --git a/packages/core/src/view/handler/EdgeHandler.ts b/packages/core/src/view/handler/EdgeHandler.ts
@@ -56,7 +56,7 @@ import {
 import type { Graph } from '../Graph';
 import CellState from '../cell/CellState';
 import Shape from '../geometry/Shape';
-import { CellHandle, ColorValue, Listenable } from '../../types';
+import type { CellHandle, ColorValue, Listenable, MouseListenerSet } from '../../types';
 import InternalMouseEvent from '../event/InternalMouseEvent';
 import Cell from '../cell/Cell';
 import ImageBox from '../image/ImageBox';
@@ -74,7 +74,7 @@ import { EdgeHandlerConfig, HandleConfig } from './config';
  *
  * Some elements of this handler and its subclasses can be configured using {@link EdgeHandlerConfig}.
  */
-class EdgeHandler {
+class EdgeHandler implements MouseListenerSet {
   /**
    * Reference to the enclosing {@link Graph}.
    */
@@ -784,7 +784,7 @@ class EdgeHandler {
    * control point. The source and target points are used for reconnecting
    * the edge.
    */
-  mouseDown(sender: EventSource, me: InternalMouseEvent) {
+  mouseDown(_sender: EventSource, me: InternalMouseEvent) {
     const handle = this.getHandleForEvent(me);
 
     if (handle !== null && this.bends[handle]) {
@@ -1308,7 +1308,7 @@ class EdgeHandler {
   /**
    * Handles the event by updating the preview.
    */
-  mouseMove(sender: EventSource, me: InternalMouseEvent) {
+  mouseMove(_sender: EventSource, me: InternalMouseEvent) {
     if (this.index != null && this.marker != null) {
       this.currentPoint = this.getPointForEvent(me);
       this.error = null;
@@ -1416,7 +1416,7 @@ class EdgeHandler {
    * Handles the event to applying the previewed changes on the edge by
    * using {@link moveLabel}, {@link connect} or {@link changePoints}.
    */
-  mouseUp(sender: EventSource, me: InternalMouseEvent) {
+  mouseUp(_sender: EventSource, me: InternalMouseEvent) {
     // Workaround for wrong event source in Webkit
     if (this.index != null && this.marker != null) {
       if (this.shape != null && this.shape.node != null) {

diff --git a/packages/core/src/view/handler/VertexHandler.ts b/packages/core/src/view/handler/VertexHandler.ts
@@ -30,7 +30,7 @@ import type { Graph } from '../Graph';
 import CellState from '../cell/CellState';
 import Image from '../image/ImageBox';
 import type Cell from '../cell/Cell';
-import type { CellHandle, Listenable } from '../../types';
+import type { CellHandle, Listenable, MouseListenerSet } from '../../types';
 import Shape from '../geometry/Shape';
 import InternalMouseEvent from '../event/InternalMouseEvent';
 import EdgeHandler from './EdgeHandler';
@@ -42,11 +42,11 @@ import { HandleConfig, VertexHandlerConfig } from './config';
 /**
  * Event handler for resizing cells.
  *
- * This handler is automatically created in {@link Graph#createHandler}.
+ * This handler is automatically created in {@link Graph.createHandler}.
  *
  * Some elements of this handler and its subclasses can be configured using {@link EdgeHandlerConfig}.
  */
-class VertexHandler {
+class VertexHandler implements MouseListenerSet {
   escapeHandler: (sender: Listenable, evt: Event) => void;
   selectionBounds: Rectangle;
   bounds: Rectangle;
@@ -632,7 +632,7 @@ class VertexHandler {
    * event all subsequent events of the gesture are redirected to this
    * handler.
    */
-  mouseDown(sender: EventSource, me: InternalMouseEvent) {
+  mouseDown(_sender: EventSource, me: InternalMouseEvent) {
     if (!me.isConsumed() && this.graph.isEnabled()) {
       const handle = this.getHandleForEvent(me);
 
@@ -831,7 +831,7 @@ class VertexHandler {
   /**
    * Handles the event by updating the preview.
    */
-  mouseMove(sender: EventSource, me: InternalMouseEvent) {
+  mouseMove(_sender: EventSource, me: InternalMouseEvent) {
     if (!me.isConsumed() && this.index != null) {
       // Checks tolerance for ignoring single clicks
       this.checkTolerance(me);
@@ -1207,7 +1207,7 @@ class VertexHandler {
   /**
    * Handles the event by applying the changes to the geometry.
    */
-  mouseUp(sender: EventSource, me: InternalMouseEvent) {
+  mouseUp(_sender: EventSource, me: InternalMouseEvent) {
     if (this.index != null && this.state != null) {
       const point = new Point(me.getGraphX(), me.getGraphY());
       const { index } = this;

diff --git a/packages/core/src/view/other/DragSource.ts b/packages/core/src/view/other/DragSource.ts
@@ -53,14 +53,9 @@ export type DropHandler = (
 ) => void;
 
 /**
- * @class DragSource
- *
- * Wrapper to create a drag source from a DOM element so that the element can
- * be dragged over a graph and dropped into the graph as a new cell.
- *
- * Problem is that in the dropHandler the current preview location is not
- * available, so the preview and the dropHandler must match.
+ * Wrapper to create a drag source from a DOM element so that the element can be dragged over a graph and dropped into the graph as a new cell.
  *
+ * Problem is that in the dropHandler the current preview location is not available, so the preview and the dropHandler must match.
  */
 class DragSource {
   constructor(element: EventTarget, dropHandler: DropHandler) {
@@ -128,7 +123,7 @@ class DragSource {
   enabled = true;
 
   /**
-   * Reference to the {@link mxGraph} that is the current drop target.
+   * Reference to the {@link Graph} that is the current drop target.
    */
   currentGraph: Graph | null = null;
 
@@ -143,12 +138,12 @@ class DragSource {
   currentPoint: Point | null = null;
 
   /**
-   * Holds an {@link mxGuide} for the {@link currentGraph} if {@link dragPreview} is not null.
+   * Holds an {@link Guide} for the {@link currentGraph} if {@link dragPreview} is not null.
    */
   currentGuide: Guide | null = null;
 
   /**
-   * Holds an {@link mxGuide} for the {@link currentGraph} if {@link dragPreview} is not null.
+   * Holds an {@link Guide} for the {@link currentGraph} if {@link dragPreview} is not null.
    * @note wrong doc
    */
   currentHighlight: CellHighlight | null = null;
@@ -159,7 +154,7 @@ class DragSource {
   autoscroll = true;
 
   /**
-   * Specifies if {@link mxGuide} should be enabled. Default is true.
+   * Specifies if {@link Guide} should be enabled. Default is true.
    */
   guidesEnabled = true;
 
@@ -245,8 +240,8 @@ class DragSource {
   }
 
   /**
-   * Returns the drop target for the given graph and coordinates. This
-   * implementation uses {@link mxGraph.getCellAt}.
+   * Returns the drop target for the given graph and coordinates.
+   * This implementation uses {@link Graph.getCellAt}.
    */
   getDropTarget(graph: Graph, x: number, y: number, evt: MouseEvent) {
     return graph.getCellAt(x, y);
@@ -290,21 +285,17 @@ class DragSource {
   }
 
   /**
-   * Returns the drop target for the given graph and coordinates. This
-   * implementation uses {@link mxGraph.getCellAt}.
+   * Returns the drop target for the given graph and coordinates.
+   * This implementation uses {@link Graph.getCellAt}.
    *
-   * To ignore popup menu events for a drag source, this function can be
-   * overridden as follows.
+   * To ignore popup menu events for a drag source, this function can be overridden as follows.
    *
-   * @example
    * ```javascript
-   * var mouseDown = dragSource.mouseDown;
+   * const mouseDown = dragSource.mouseDown;
    *
-   * dragSource.mouseDown(evt)
-   * {
-   *   if (!mxEvent.isPopupTrigger(evt))
-   *   {
-   *     mouseDown.apply(this, arguments);
+   * dragSource.mouseDown(evt) {
+   *   if (!EventUtils.isPopupTrigger(evt)) {
+   *     mouseDown.apply(this, [evt]);
    *   }
    * };
    * ```
@@ -650,7 +641,7 @@ class DragSource {
 
   /**
    * Returns the drop target for the given graph and coordinates. This
-   * implementation uses {@link mxGraph.getCellAt}.
+   * implementation uses {@link Graph.getCellAt}.
    */
   drop(
     graph: Graph,

diff --git a/packages/core/src/view/other/Outline.ts b/packages/core/src/view/other/Outline.ts
@@ -35,7 +35,7 @@ import EventObject from '../event/EventObject';
 import { getSource, isMouseEvent } from '../../util/EventUtils';
 import EventSource from '../event/EventSource';
 import { hasScrollbars } from '../../util/styleUtils';
-import { Listenable } from '../../types';
+import type { Listenable, MouseListenerSet } from '../../types';
 import { getDefaultPlugins } from '../plugins';
 
 /**
@@ -78,11 +78,11 @@ import { getDefaultPlugins } from '../plugins';
  * }
  * ```
  */
-class Outline {
-  constructor(source: Graph, container: HTMLElement | null = null) {
+class Outline implements MouseListenerSet {
+  constructor(source: Graph, container?: HTMLElement | null) {
     this.source = source;
 
-    if (container != null) {
+    if (container) {
       this.init(container);
     }
   }
@@ -572,7 +572,7 @@ class Outline {
   /**
    * Handles the event by starting a translation or zoom.
    */
-  mouseDown(sender: EventSource, me: InternalMouseEvent): void {
+  mouseDown(_sender: EventSource, me: InternalMouseEvent): void {
     if (this.enabled && this.showViewport) {
       const tol = !isMouseEvent(me.getEvent()) ? this.source.tolerance : 0;
       const hit =
@@ -604,7 +604,7 @@ class Outline {
    * Handles the event by previewing the viewrect in {@link graph} and updating the
    * rectangle that represents the viewrect in the outline.
    */
-  mouseMove(sender: EventSource, me: InternalMouseEvent): void {
+  mouseMove(_sender: EventSource, me: InternalMouseEvent): void {
     if (this.active) {
       const myBounds = <Rectangle>this.bounds;
       const sizer = <RectangleShape>this.sizer;
@@ -699,7 +699,7 @@ class Outline {
   /**
    * Handles the event by applying the translation or zoom to {@link graph}.
    */
-  mouseUp(sender: EventSource, me: InternalMouseEvent): void {
+  mouseUp(_sender: EventSource, me: InternalMouseEvent): void {
     if (this.active) {
       const delta = this.getTranslateForEvent(me);
       let dx = delta.x;

diff --git a/packages/core/src/view/other/PanningManager.ts b/packages/core/src/view/other/PanningManager.ts
@@ -19,9 +19,7 @@ limitations under the License.
 import { MouseEventListener, MouseListenerSet } from '../../types';
 import { hasScrollbars } from '../../util/styleUtils';
 import EventObject from '../event/EventObject';
-import EventSource from '../event/EventSource';
 import InternalEvent from '../event/InternalEvent';
-import InternalMouseEvent from '../event/InternalMouseEvent';
 import type { Graph } from '../Graph';
 
 /**
@@ -42,13 +40,13 @@ class PanningManager {
     this.scrollTop = 0;
 
     this.mouseListener = {
-      mouseDown: (sender: EventSource, me: InternalMouseEvent) => {
+      mouseDown: () => {
         return;
       },
-      mouseMove: (sender: EventSource, me: InternalMouseEvent) => {
+      mouseMove: () => {
         return;
       },
-      mouseUp: (sender: EventSource, me: InternalMouseEvent) => {
+      mouseUp: () => {
         if (this.active) {
           this.stop();
         }