feat(events): more readable event names

1.  protect some api
2. fireMouseEvent => mouseEvent
3. addMouseListener => addHandler
4. removeMouseListener => removeHandler

ref #54

packages/x6/src/addon/dnd/index.ts

@@ -350,7 +350,7 @@ export class Dnd<T> extends Disablable<Dnd.EventArgMap<T>> {
     }
 
     // Consume all events in the current graph before they are fired
-    graph.on('fireMouseEvent', this.eventConsumer)
+    graph.on('mouseEvent', this.eventConsumer)
 
     this.trigger('dragEnter', {
       graph,
@@ -364,7 +364,7 @@ export class Dnd<T> extends Disablable<Dnd.EventArgMap<T>> {
     this.currentDropTarget = null
 
     graph.eventloopManager.isMouseDown = false
-    graph.off('fireMouseEvent', this.eventConsumer)
+    graph.off('mouseEvent', this.eventConsumer)
 
     this.removePreviewElement()
 

packages/x6/src/addon/minimap/index.ts

@@ -91,7 +91,7 @@ export class MiniMap extends Disablable implements IMouseHandler {
     DomEvent.addListener(this.source.container, 'scroll', this.updateHandler)
 
     this.outline.disable()
-    this.outline.addMouseListener(this)
+    this.outline.addHandler(this)
 
     this.bounds = new Rectangle(0, 0, 0, 0)
     this.viewport = this.createViewport()
@@ -100,17 +100,17 @@ export class MiniMap extends Disablable implements IMouseHandler {
     const handle = (e: MouseEvent) => {
       const target = DomEvent.getSource(e) as HTMLElement
       const move = (e: MouseEvent) => {
-        this.outline.fireMouseEvent('mouseMove', new MouseEventEx(e))
+        this.outline.dispatchMouseEvent('mouseMove', new MouseEventEx(e))
       }
       const up = (e: MouseEvent) => {
         DomEvent.removeMouseListeners(target, null, move, up)
         DomEvent.removeMouseListeners(document, null, move, up)
-        this.outline.fireMouseEvent('mouseUp', new MouseEventEx(e))
+        this.outline.dispatchMouseEvent('mouseUp', new MouseEventEx(e))
       }
 
       DomEvent.addMouseListeners(target, null, move, up)
       DomEvent.addMouseListeners(document, null, move, up)
-      this.outline.fireMouseEvent('mouseDown', new MouseEventEx(e))
+      this.outline.dispatchMouseEvent('mouseDown', new MouseEventEx(e))
     }
 
     DomEvent.addMouseListeners(this.sizer.elem!, handle)
@@ -541,7 +541,7 @@ export class MiniMap extends Disablable implements IMouseHandler {
     }
 
     if (this.outline != null) {
-      this.outline.removeMouseListener(this)
+      this.outline.removeHandler(this)
       this.outline.dispose()
       delete this.outline
     }

packages/x6/src/common/dom-event/mouse.ts

@@ -129,7 +129,7 @@ export namespace MouseEventEx {
         if (onMouseDown) {
           onMouseDown(e)
         } else if (!DomEvent.isConsumed(e)) {
-          graph.fireMouseEvent(
+          graph.dispatchMouseEvent(
             DomEvent.MOUSE_DOWN,
             new MouseEventEx(e, getState(e)),
           )
@@ -139,7 +139,7 @@ export namespace MouseEventEx {
         if (onMouseMove) {
           onMouseMove(e)
         } else if (!DomEvent.isConsumed(e)) {
-          graph.fireMouseEvent(
+          graph.dispatchMouseEvent(
             DomEvent.MOUSE_MOVE,
             new MouseEventEx(e, getState(e)),
           )
@@ -149,7 +149,7 @@ export namespace MouseEventEx {
         if (onMouseUp) {
           onMouseUp(e)
         } else if (!DomEvent.isConsumed(e)) {
-          graph.fireMouseEvent(
+          graph.dispatchMouseEvent(
             DomEvent.MOUSE_UP,
             new MouseEventEx(e, getState(e)),
           )

packages/x6/src/core/renderer.ts

@@ -349,7 +349,10 @@ export class Renderer {
         DomEvent.consume(e)
       },
       (e: MouseEvent) => {
-        graph.fireMouseEvent(DomEvent.MOUSE_MOVE, new MouseEventEx(e, state))
+        graph.dispatchMouseEvent(
+          DomEvent.MOUSE_MOVE,
+          new MouseEventEx(e, state),
+        )
       },
     )
 
@@ -391,20 +394,23 @@ export class Renderer {
       elem,
       (e: MouseEvent) => {
         if (this.isShapeEvent(state, e)) {
-          graph.fireMouseEvent(DomEvent.MOUSE_DOWN, new MouseEventEx(e, state))
+          graph.dispatchMouseEvent(
+            DomEvent.MOUSE_DOWN,
+            new MouseEventEx(e, state),
+          )
         }
       },
       (e: MouseEvent) => {
         if (this.isShapeEvent(state, e)) {
-          graph.fireMouseEvent(
+          graph.dispatchMouseEvent(
             DomEvent.MOUSE_MOVE,
             new MouseEventEx(e, getState(e)),
           )
         }
       },
       (e: MouseEvent) => {
         if (this.isShapeEvent(state, e)) {
-          graph.fireMouseEvent(
+          graph.dispatchMouseEvent(
             DomEvent.MOUSE_UP,
             new MouseEventEx(e, getState(e)),
           )
@@ -500,14 +506,23 @@ export class Renderer {
         elem,
         (e: MouseEvent) => {
           first = new Point(DomEvent.getClientX(e), DomEvent.getClientY(e))
-          graph.fireMouseEvent(DomEvent.MOUSE_DOWN, new MouseEventEx(e, state))
+          graph.dispatchMouseEvent(
+            DomEvent.MOUSE_DOWN,
+            new MouseEventEx(e, state),
+          )
           DomEvent.consume(e)
         },
         (e: MouseEvent) => {
-          graph.fireMouseEvent(DomEvent.MOUSE_MOVE, new MouseEventEx(e, state))
+          graph.dispatchMouseEvent(
+            DomEvent.MOUSE_MOVE,
+            new MouseEventEx(e, state),
+          )
         },
         (e: MouseEvent) => {
-          graph.fireMouseEvent(DomEvent.MOUSE_UP, new MouseEventEx(e, state))
+          graph.dispatchMouseEvent(
+            DomEvent.MOUSE_UP,
+            new MouseEventEx(e, state),
+          )
           DomEvent.consume(e)
         },
       )
@@ -703,7 +718,7 @@ export class Renderer {
         state.text.elem!,
         (e: MouseEvent) => {
           if (this.isLabelEvent(state, e)) {
-            graph.fireMouseEvent(
+            graph.dispatchMouseEvent(
               DomEvent.MOUSE_DOWN,
               new MouseEventEx(e, state),
             )
@@ -714,15 +729,15 @@ export class Renderer {
         },
         (e: MouseEvent) => {
           if (this.isLabelEvent(state, e)) {
-            graph.fireMouseEvent(
+            graph.dispatchMouseEvent(
               DomEvent.MOUSE_MOVE,
               new MouseEventEx(e, getState(e)),
             )
           }
         },
         (e: MouseEvent) => {
           if (this.isLabelEvent(state, e)) {
-            graph.fireMouseEvent(
+            graph.dispatchMouseEvent(
               DomEvent.MOUSE_UP,
               new MouseEventEx(e, getState(e)),
             )

packages/x6/src/core/view.ts

@@ -1556,7 +1556,10 @@ export class View extends Primer<View.EventArgs> {
       DomEvent.addMouseListeners(
         this.backgroundPageShape.elem!,
         (e: MouseEvent) => {
-          this.graph.fireMouseEvent(DomEvent.MOUSE_DOWN, new MouseEventEx(e))
+          this.graph.dispatchMouseEvent(
+            DomEvent.MOUSE_DOWN,
+            new MouseEventEx(e),
+          )
         },
         (e: MouseEvent) => {
           // Hides the tooltip if mouse is outside container
@@ -1571,11 +1574,14 @@ export class View extends Primer<View.EventArgs> {
             this.graph.eventloopManager.isMouseDown &&
             !DomEvent.isConsumed(e)
           ) {
-            this.graph.fireMouseEvent(DomEvent.MOUSE_MOVE, new MouseEventEx(e))
+            this.graph.dispatchMouseEvent(
+              DomEvent.MOUSE_MOVE,
+              new MouseEventEx(e),
+            )
           }
         },
         (e: MouseEvent) => {
-          this.graph.fireMouseEvent(DomEvent.MOUSE_UP, new MouseEventEx(e))
+          this.graph.dispatchMouseEvent(DomEvent.MOUSE_UP, new MouseEventEx(e))
         },
       )
     }
@@ -1854,17 +1860,17 @@ export class View extends Primer<View.EventArgs> {
     // Support for touch device gestures (eg. pinch to zoom)
     if (detector.SUPPORT_TOUCH) {
       DomEvent.addListener(container, 'gesturestart', (e: MouseEvent) => {
-        graph.fireGestureEvent(e)
+        graph.eventloopManager.gesture(e)
         DomEvent.consume(e)
       })
 
       DomEvent.addListener(container, 'gesturechange', (e: MouseEvent) => {
-        graph.fireGestureEvent(e)
+        graph.eventloopManager.gesture(e)
         DomEvent.consume(e)
       })
 
       DomEvent.addListener(container, 'gestureend', (e: MouseEvent) => {
-        graph.fireGestureEvent(e)
+        graph.eventloopManager.gesture(e)
         DomEvent.consume(e)
       })
     }
@@ -1883,17 +1889,17 @@ export class View extends Primer<View.EventArgs> {
             !detector.IS_SAFARI) ||
             !this.isScrollEvent(e))
         ) {
-          graph.fireMouseEvent(DomEvent.MOUSE_DOWN, new MouseEventEx(e))
+          graph.dispatchMouseEvent(DomEvent.MOUSE_DOWN, new MouseEventEx(e))
         }
       },
       (e: MouseEvent) => {
         if (this.isContainerEvent(e)) {
-          graph.fireMouseEvent(DomEvent.MOUSE_MOVE, new MouseEventEx(e))
+          graph.dispatchMouseEvent(DomEvent.MOUSE_MOVE, new MouseEventEx(e))
         }
       },
       (e: MouseEvent) => {
         if (this.isContainerEvent(e)) {
-          graph.fireMouseEvent(DomEvent.MOUSE_UP, new MouseEventEx(e))
+          graph.dispatchMouseEvent(DomEvent.MOUSE_UP, new MouseEventEx(e))
         }
       },
     )
@@ -1902,7 +1908,7 @@ export class View extends Primer<View.EventArgs> {
     // 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({
+    graph.addHandler({
       mouseDown() {
         graph.hideContextMenu()
       },
@@ -1953,7 +1959,7 @@ export class View extends Primer<View.EventArgs> {
       }
 
       if (this.shouldHandleDocumentEvent(e) && !DomEvent.isConsumed(e)) {
-        this.graph.fireMouseEvent(
+        this.graph.dispatchMouseEvent(
           DomEvent.MOUSE_MOVE,
           new MouseEventEx(e, getState(e)),
         )
@@ -1962,7 +1968,7 @@ export class View extends Primer<View.EventArgs> {
 
     this.mouseUpHandler = (e: MouseEvent) => {
       if (this.shouldHandleDocumentEvent(e)) {
-        this.graph.fireMouseEvent(DomEvent.MOUSE_UP, new MouseEventEx(e))
+        this.graph.dispatchMouseEvent(DomEvent.MOUSE_UP, new MouseEventEx(e))
       }
     }
 

packages/x6/src/graph/eventloop-accessor.ts

@@ -1,42 +1,32 @@
-import { Cell } from '../core/cell'
+import { hook } from './decorator'
 import { IMouseHandler } from '../handler'
 import { DomEvent, MouseEventEx, detector } from '../common'
-import { hook } from './decorator'
 import { BaseGraph } from './base-graph'
 
 export class EventLoopAccessor extends BaseGraph {
   /**
    * Adds a listener to the graph event dispatch loop. The listener
    * must implement the mouseDown, mouseMove and mouseUp
    */
-  addMouseListener(handler: IMouseHandler) {
-    this.eventloopManager.addMouseListener(handler)
+  addHandler(handler: IMouseHandler) {
+    this.eventloopManager.addHandler(handler)
     return this
   }
 
-  removeMouseListener(handler: IMouseHandler) {
-    this.eventloopManager.removeMouseListener(handler)
+  removeHandler(handler: IMouseHandler) {
+    this.eventloopManager.removeHandler(handler)
     return this
   }
 
-  getPointForEvent(e: MouseEvent, addOffset: boolean = true) {
-    return this.eventloopManager.getPointForEvent(e, addOffset)
-  }
-
   /**
    * Dispatches the given event to the graph event dispatch loop.
    */
-  fireMouseEvent(
+  dispatchMouseEvent(
     eventName: 'mouseDown' | 'mouseMove' | 'mouseUp',
     e: MouseEventEx,
     sender: any = this,
   ) {
-    this.eventloopManager.fireMouseEvent(eventName, e, sender)
-    return this
-  }
-
-  fireGestureEvent(e: MouseEvent, cell?: Cell) {
-    this.eventloopManager.fireGestureEvent(e, cell)
+    this.eventloopManager.dispatchMouseEvent(eventName, e, sender)
     return this
   }
 

packages/x6/src/graph/eventloop-manager.ts

@@ -37,13 +37,13 @@ export class EventLoopManager extends BaseManager {
   protected initialTouchX: number = 0
   protected initialTouchY: number = 0
 
-  addMouseListener(handler: IMouseHandler) {
+  addHandler(handler: IMouseHandler) {
     if (!this.mouseListeners.includes(handler)) {
       this.mouseListeners.push(handler)
     }
   }
 
-  removeMouseListener(handler: IMouseHandler) {
+  removeHandler(handler: IMouseHandler) {
     if (this.mouseListeners != null) {
       for (let i = 0, ii = this.mouseListeners.length; i < ii; i += 1) {
         if (this.mouseListeners[i] === handler) {
@@ -145,14 +145,14 @@ export class EventLoopManager extends BaseManager {
     ) {
       this.eventSource = eventSource
       this.mouseMoveRedirect = (e: MouseEvent) => {
-        this.fireMouseEvent(
+        this.dispatchMouseEvent(
           DomEvent.MOUSE_MOVE,
           new MouseEventEx(e, this.getStateForTouchEvent(e as any)),
           sender,
         )
       }
       this.mouseUpRedirect = (e: MouseEvent) => {
-        this.fireMouseEvent(
+        this.dispatchMouseEvent(
           DomEvent.MOUSE_UP,
           new MouseEventEx(e, this.getStateForTouchEvent(e as any)),
           sender,
@@ -273,7 +273,7 @@ export class EventLoopManager extends BaseManager {
     }
   }
 
-  fireMouseEvent(
+  dispatchMouseEvent(
     eventName: 'mouseDown' | 'mouseMove' | 'mouseUp',
     e: MouseEventEx,
     sender: any,
@@ -367,7 +367,7 @@ export class EventLoopManager extends BaseManager {
     // Updates the event state via getEventState
     e.state = this.getEventState(e.getState())
 
-    this.graph.trigger('fireMouseEvent', { eventName, e, sender })
+    this.graph.trigger('mouseEvent', { eventName, e, sender })
 
     if (
       detector.IS_OPERA ||
@@ -466,7 +466,7 @@ export class EventLoopManager extends BaseManager {
     this.consumeMouseEvent(eventName, e)
   }
 
-  fireGestureEvent(e: MouseEvent, cell?: Cell) {
+  gesture(e: MouseEvent, cell?: Cell) {
     // Resets double tap event handling when gestures take place
     this.lastTouchTime = 0
     this.graph.trigger('gesture', { e, cell })