refactor(events): add EventArgs definition for custom events

fix #47

examples/x6-example-drawio/src/pages/graph/format.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Graph, Cell } from '@antv/x6'
+import { Cell } from '@antv/x6'
 import { FormatCell } from './format-cell'
 import { FormatDiagram } from './fromat-diagram'
 import { fetchEditor } from '../'
@@ -12,7 +12,7 @@ export class Format extends React.PureComponent<Format.Props, Format.State> {
 
   componentDidMount() {
     fetchEditor().then(editor => {
-      editor.graph.on(Graph.events.selectionChanged, () => {
+      editor.graph.on('selectionChanged', () => {
         this.setState({
           selectedCell: editor.graph.getSelectedCell(),
         })

examples/x6-example-drawio/src/pages/graph/toolbar.tsx

@@ -24,7 +24,7 @@ export class GraphToolbar extends React.PureComponent<
 
   componentDidMount() {
     fetchEditor().then(editor => {
-      editor.graph.on(Graph.events.selectionChanged, () => {
+      editor.graph.on('selectionChanged', () => {
         this.setState({ selectedCells: editor.graph.getSelectedCells() })
       })
 
@@ -35,8 +35,8 @@ export class GraphToolbar extends React.PureComponent<
         })
       }
 
-      editor.commands.undoManager.on(UndoManager.events.undo, updateUndoState)
-      editor.commands.undoManager.on(UndoManager.events.redo, updateUndoState)
+      editor.commands.undoManager.on('undo', updateUndoState)
+      editor.commands.undoManager.on('redo', updateUndoState)
 
       updateUndoState()
       this.setState({ editor })

examples/x6-example-features/src/pages/flowchart/setting.tsx

@@ -8,7 +8,7 @@ export class Setting extends React.Component<Setting.Props, Setting.State> {
     super(props)
     this.state = this.getNextState(props)
 
-    props.graph.on(Graph.events.selectionChanged, () => {
+    props.graph.on('selectionChanged', () => {
       this.setState(this.getNextState())
     })
   }

examples/x6-example-features/src/pages/flowchart/toolbar.tsx

@@ -114,12 +114,12 @@ export class GraphToolbar extends React.Component<
       }),
     )
 
-    this.graph.on(Graph.events.selectionChanged, this.updateState)
-    this.graph.view.on(View.events.scale, this.updateState)
-    this.graph.view.on(View.events.scaleAndTranslate, this.updateState)
-    this.graph.model.on(Model.events.change, this.updateState)
-    this.undoManager.on(UndoManager.events.undo, this.updateState)
-    this.undoManager.on(UndoManager.events.redo, this.updateState)
+    this.graph.on('selectionChanged', this.updateState)
+    this.graph.view.on('scale', this.updateState)
+    this.graph.view.on('scaleAndTranslate', this.updateState)
+    this.graph.model.on('change', this.updateState)
+    this.undoManager.on('undo', this.updateState)
+    this.undoManager.on('redo', this.updateState)
 
     this.state = this.getNextState()
   }

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

@@ -1,9 +1,8 @@
 import { IChange } from '../../change'
-import { Model } from '../../core/model'
 import { Graph } from '../../graph'
 import { Disablable, Disposable } from '../../common'
 
-export class AutoSave extends Disablable {
+export class AutoSave extends Disablable<AutoSave.EventArgs> {
   graph: Graph
 
   /**
@@ -32,7 +31,7 @@ export class AutoSave extends Disablable {
 
   setGraph(graph: Graph | null) {
     if (this.graph != null) {
-      this.graph.model.off(Model.events.change, this.onModelChanged, this)
+      this.graph.model.off('change', this.onModelChanged, this)
     }
 
     if (graph != null) {
@@ -42,7 +41,7 @@ export class AutoSave extends Disablable {
     }
 
     if (this.graph != null) {
-      this.graph.model.on(Model.events.change, this.onModelChanged, this)
+      this.graph.model.on('change', this.onModelChanged, this)
     }
   }
 
@@ -66,7 +65,7 @@ export class AutoSave extends Disablable {
   }
 
   private save() {
-    this.trigger(AutoSave.events.save)
+    this.trigger('save')
   }
 
   reset() {
@@ -81,7 +80,7 @@ export class AutoSave extends Disablable {
 }
 
 export namespace AutoSave {
-  export const events = {
-    save: 'save',
+  export interface EventArgs {
+    save?: null
   }
 }

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(Graph.events.fireMouseEvent, this.eventConsumer)
+    graph.on('fireMouseEvent', 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(Graph.events.fireMouseEvent, this.eventConsumer)
+    graph.off('fireMouseEvent', this.eventConsumer)
 
     this.removePreviewElement()
 

packages/x6/src/change/currentroot-change.ts

@@ -46,11 +46,11 @@ export class CurrentRootChange implements IChange {
       this.view.refresh()
     }
 
-    const name = this.isUp ? View.events.up : View.events.down
-    this.view.trigger(name, {
+    this.view.trigger(this.isUp ? 'up' : 'down', {
       previous: this.previous,
       currentRoot: this.view.currentRoot,
     })
+
     this.isUp = !this.isUp
   }
 }

packages/x6/src/change/selection-change.ts

@@ -1,5 +1,4 @@
 import { Cell } from '../core/cell'
-import { Graph } from '../graph/graph'
 import { Selection } from '../graph/selection'
 import { IChange } from './change'
 
@@ -31,7 +30,7 @@ export class SelectionChange implements IChange {
     this.added = this.removed
     this.removed = tmp
 
-    this.selection.graph.trigger(Graph.events.selectionChanged, {
+    this.selection.graph.trigger('selectionChanged', {
       added: this.added,
       removed: this.removed,
     })

packages/x6/src/change/undoableedit.ts

@@ -1,5 +1,4 @@
 import { Disposable, Events } from '../common'
-import { Model } from '../core/model'
 import { IChange } from './change'
 
 export class UndoableEdit extends Disposable {
@@ -50,7 +49,7 @@ export class UndoableEdit extends Disposable {
       return
     }
 
-    this.model.trigger(Model.events.startEdit)
+    this.model.trigger('startEdit')
     const count = this.changes.length
 
     for (let i = count - 1; i >= 0; i -= 1) {
@@ -59,12 +58,12 @@ export class UndoableEdit extends Disposable {
         change.execute()
       }
 
-      this.model.trigger(Model.events.executed, change)
+      this.model.trigger('executed', change)
     }
 
     this.undone = true
     this.redone = false
-    this.model.trigger(Model.events.endEdit)
+    this.model.trigger('endEdit')
 
     this.notify()
   }
@@ -77,17 +76,17 @@ export class UndoableEdit extends Disposable {
       return
     }
 
-    this.model.trigger(Model.events.startEdit)
+    this.model.trigger('startEdit')
     this.changes.forEach(change => {
       if (change.execute != null) {
         change.execute()
       }
 
-      this.model.trigger(Model.events.executed, change)
+      this.model.trigger('executed', change)
     })
     this.undone = false
     this.redone = true
-    this.model.trigger(Model.events.endEdit)
+    this.model.trigger('endEdit')
 
     this.notify()
   }

packages/x6/src/change/undomanager.ts

@@ -1,10 +1,8 @@
 import { Primer, Disposable } from '../common'
 import { Graph } from '../graph'
-import { View } from '../core/view'
-import { Model } from '../core/model'
 import { UndoableEdit } from './undoableedit'
 
-export class UndoManager extends Primer {
+export class UndoManager extends Primer<UndoManager.EventArgs> {
   private size: number
   private cursor: number
   private history: UndoableEdit[]
@@ -18,7 +16,7 @@ export class UndoManager extends Primer {
   clear() {
     this.cursor = 0
     this.history = []
-    this.trigger(UndoManager.events.clear)
+    this.trigger('clear')
   }
 
   isEmpty() {
@@ -40,7 +38,7 @@ export class UndoManager extends Primer {
       edit.undo()
 
       if (edit.isSignificant()) {
-        this.trigger(UndoManager.events.undo, edit)
+        this.trigger('undo', edit)
         break
       }
     }
@@ -53,7 +51,7 @@ export class UndoManager extends Primer {
       this.cursor += 1
       edit.redo()
       if (edit.isSignificant()) {
-        this.trigger(UndoManager.events.redo, edit)
+        this.trigger('redo', edit)
         break
       }
     }
@@ -68,7 +66,7 @@ export class UndoManager extends Primer {
 
     this.history.push(edit)
     this.cursor = this.history.length
-    this.trigger(UndoManager.events.add, edit)
+    this.trigger('add', edit)
   }
 
   trim() {
@@ -94,8 +92,7 @@ export namespace UndoManager {
     const undoListener = (edit: UndoableEdit) => {
       undoManager.add(edit)
     }
-    graph.view.on(View.events.undo, undoListener)
-    graph.model.on(Model.events.afterUndo, undoListener)
+    graph.model.on('afterUndo', undoListener)
 
     const undoHandler = (edit: UndoableEdit) => {
       const cells = graph.changeManager
@@ -105,16 +102,16 @@ export namespace UndoManager {
       graph.setSelectedCells(cells)
     }
 
-    undoManager.on(UndoManager.events.undo, undoHandler)
-    undoManager.on(UndoManager.events.redo, undoHandler)
+    undoManager.on('undo', undoHandler)
+    undoManager.on('redo', undoHandler)
 
     return undoManager
   }
 
-  export const events = {
-    add: 'add',
-    undo: 'undo',
-    redo: 'redo',
-    clear: 'clear',
+  export interface EventArgs {
+    add: UndoableEdit
+    undo: UndoableEdit
+    redo: UndoableEdit
+    clear?: null
   }
 }

packages/x6/src/common/dnd/dnd.ts

@@ -1,7 +1,7 @@
 import { Primer } from '../primer'
 import { addListeners, removeListeners } from './handler'
 
-export class Dnd extends Primer {
+export class Dnd extends Primer<Dnd.EventArgs> {
   public readonly options: Dnd.Options
   public disabled: boolean
 
@@ -26,15 +26,15 @@ export class Dnd extends Primer {
 
 export namespace Dnd {
   export const delay = 300
-  export const events = {
-    prepare: 'prepare',
-    dragStart: 'dragStart',
-    dragging: 'dragging',
-    dragEnter: 'dragEnter',
-    dragOver: 'dragOver',
-    dragLeave: 'dragLeave',
-    dragEnd: 'dragEnd',
-    drop: 'drop',
+  export interface EventArgs {
+    prepare: State
+    dragStart: State
+    dragging: State
+    dragEnter: State
+    dragOver: State
+    dragLeave: State
+    dragEnd: State
+    drop: State | null
   }
 
   export type HTMLElementOrFunc =

packages/x6/src/common/dnd/handler.ts

@@ -77,7 +77,7 @@ function process(e: MouseEvent) {
       onDrop()
     } else if (state.isPreparing) {
       state.isPreparing = false
-      state.instance.trigger(Dnd.events.dragEnd, state)
+      state.instance.trigger('dragEnd', state)
       clear()
     }
   }
@@ -133,7 +133,7 @@ function prepare(e: MouseEvent | TouchEvent) {
   updatePosition(e)
 
   // 将代理元素插入文档，设置样式等
-  data.instance.trigger(Dnd.events.prepare, data)
+  data.instance.trigger('prepare', data)
 
   const offset = getOffset(data.element)
   const width = outerWidth(data.element)
@@ -181,7 +181,7 @@ function onDragStart() {
   regionWidth = outerWidth(state.region)
   regionHeight = outerHeight(state.region)
 
-  state.instance.trigger(Dnd.events.dragStart, state)
+  state.instance.trigger('dragStart', state)
 }
 
 function onDragging() {
@@ -228,7 +228,7 @@ function onDragging() {
     style.top = `${getTop()}px`
   }
 
-  state.instance.trigger(Dnd.events.dragging, state)
+  state.instance.trigger('dragging', state)
 }
 
 function onDragEnterLeaveOver() {
@@ -242,25 +242,25 @@ function onDragEnterLeaveOver() {
 
   if (state.activeContainer) {
     if (!isContained(state.activeContainer, state.preview, fully)) {
-      state.instance.trigger(Dnd.events.dragLeave, state)
+      state.instance.trigger('dragLeave', state)
       state.activeContainer = null
     } else {
-      state.instance.trigger(Dnd.events.dragOver, state)
+      state.instance.trigger('dragOver', state)
     }
   } else {
     for (let i = 0, ii = containers.length; i < ii; i += 1) {
       const container = containers[i]
       if (isContained(container, state.preview, fully)) {
         state.activeContainer = container
-        state.instance.trigger(Dnd.events.dragEnter, state)
+        state.instance.trigger('dragEnter', state)
         break
       }
     }
   }
 }
 
 function onDrop() {
-  data!.instance.trigger(Dnd.events.drop, data)
+  data!.instance.trigger('drop', data)
   clear()
 }