From 727fee002fb0a60d1f28a45a9f2419c3047d499f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=96=E5=B4=96=E5=B4=96?= Date: Tue, 17 Dec 2019 00:53:20 +0800 Subject: [PATCH] refactor(events): add EventArgs definition for custom events fix #47 --- .../src/pages/graph/format.tsx | 4 +- .../src/pages/graph/toolbar.tsx | 6 +- .../src/pages/flowchart/setting.tsx | 2 +- .../src/pages/flowchart/toolbar.tsx | 12 +- packages/x6/src/addon/autosave/index.ts | 13 +- packages/x6/src/addon/dnd/index.ts | 4 +- packages/x6/src/change/currentroot-change.ts | 4 +- packages/x6/src/change/selection-change.ts | 3 +- packages/x6/src/change/undoableedit.ts | 13 +- packages/x6/src/change/undomanager.ts | 29 ++- packages/x6/src/common/dnd/dnd.ts | 20 +- packages/x6/src/common/dnd/handler.ts | 16 +- packages/x6/src/core/model.ts | 40 ++-- packages/x6/src/core/view.ts | 34 +++- packages/x6/src/graph/change-manager.ts | 6 +- packages/x6/src/graph/collapse-manager.ts | 17 +- packages/x6/src/graph/connection-manager.ts | 5 +- packages/x6/src/graph/creation-manager.ts | 13 +- packages/x6/src/graph/editing-accessor.ts | 7 +- packages/x6/src/graph/eventloop-manager.ts | 19 +- packages/x6/src/graph/events.ts | 181 +++++++++++++++++- packages/x6/src/graph/group-manager.ts | 7 +- packages/x6/src/graph/moving-manager.ts | 11 +- packages/x6/src/graph/overlay-manager.ts | 7 +- packages/x6/src/graph/size-manager.ts | 7 +- packages/x6/src/graph/style-manager.ts | 5 +- packages/x6/src/graph/viewport-accessor.ts | 3 +- packages/x6/src/graph/viewport-manager.ts | 3 +- packages/x6/src/handler/anchor/handler.ts | 12 +- packages/x6/src/handler/cell-editor.ts | 8 +- packages/x6/src/handler/cell-highlight.ts | 14 +- packages/x6/src/handler/connection/handler.ts | 42 ++-- .../x6/src/handler/contextmenu/handler.ts | 4 +- packages/x6/src/handler/edge/handler.ts | 4 +- packages/x6/src/handler/moving/handler.ts | 9 +- packages/x6/src/handler/node/handler.ts | 4 +- packages/x6/src/handler/panning/handler.ts | 8 +- packages/x6/src/handler/rubberband/handler.ts | 8 +- packages/x6/src/handler/selection/handler.ts | 16 +- 39 files changed, 390 insertions(+), 230 deletions(-) diff --git a/examples/x6-example-drawio/src/pages/graph/format.tsx b/examples/x6-example-drawio/src/pages/graph/format.tsx index 5c60c0e1a14..cda07935278 100644 --- a/examples/x6-example-drawio/src/pages/graph/format.tsx +++ b/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 { componentDidMount() { fetchEditor().then(editor => { - editor.graph.on(Graph.events.selectionChanged, () => { + editor.graph.on('selectionChanged', () => { this.setState({ selectedCell: editor.graph.getSelectedCell(), }) diff --git a/examples/x6-example-drawio/src/pages/graph/toolbar.tsx b/examples/x6-example-drawio/src/pages/graph/toolbar.tsx index d36f9668525..ba723b992ac 100644 --- a/examples/x6-example-drawio/src/pages/graph/toolbar.tsx +++ b/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 }) diff --git a/examples/x6-example-features/src/pages/flowchart/setting.tsx b/examples/x6-example-features/src/pages/flowchart/setting.tsx index 03cea768a8d..79c3f553aa0 100644 --- a/examples/x6-example-features/src/pages/flowchart/setting.tsx +++ b/examples/x6-example-features/src/pages/flowchart/setting.tsx @@ -8,7 +8,7 @@ export class Setting extends React.Component { super(props) this.state = this.getNextState(props) - props.graph.on(Graph.events.selectionChanged, () => { + props.graph.on('selectionChanged', () => { this.setState(this.getNextState()) }) } diff --git a/examples/x6-example-features/src/pages/flowchart/toolbar.tsx b/examples/x6-example-features/src/pages/flowchart/toolbar.tsx index ffdaeb48d34..2edaffb826c 100644 --- a/examples/x6-example-features/src/pages/flowchart/toolbar.tsx +++ b/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() } diff --git a/packages/x6/src/addon/autosave/index.ts b/packages/x6/src/addon/autosave/index.ts index 06e068f7dc4..f7522a36858 100644 --- a/packages/x6/src/addon/autosave/index.ts +++ b/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 { 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 } } diff --git a/packages/x6/src/addon/dnd/index.ts b/packages/x6/src/addon/dnd/index.ts index 7539d5be4ce..f5e9f4f8770 100644 --- a/packages/x6/src/addon/dnd/index.ts +++ b/packages/x6/src/addon/dnd/index.ts @@ -350,7 +350,7 @@ export class Dnd extends Disablable> { } // 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 extends Disablable> { this.currentDropTarget = null graph.eventloopManager.isMouseDown = false - graph.off(Graph.events.fireMouseEvent, this.eventConsumer) + graph.off('fireMouseEvent', this.eventConsumer) this.removePreviewElement() diff --git a/packages/x6/src/change/currentroot-change.ts b/packages/x6/src/change/currentroot-change.ts index 78cb4211ccc..8ecdcc085e7 100644 --- a/packages/x6/src/change/currentroot-change.ts +++ b/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 } } diff --git a/packages/x6/src/change/selection-change.ts b/packages/x6/src/change/selection-change.ts index 1cca70a084e..cffcccc002d 100644 --- a/packages/x6/src/change/selection-change.ts +++ b/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, }) diff --git a/packages/x6/src/change/undoableedit.ts b/packages/x6/src/change/undoableedit.ts index e5901161768..3416fa4c74c 100644 --- a/packages/x6/src/change/undoableedit.ts +++ b/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() } diff --git a/packages/x6/src/change/undomanager.ts b/packages/x6/src/change/undomanager.ts index 507b095673f..5080c97d11f 100644 --- a/packages/x6/src/change/undomanager.ts +++ b/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 { 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 } } diff --git a/packages/x6/src/common/dnd/dnd.ts b/packages/x6/src/common/dnd/dnd.ts index 62c4899c15e..b231a4e2b8d 100644 --- a/packages/x6/src/common/dnd/dnd.ts +++ b/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 { 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 = diff --git a/packages/x6/src/common/dnd/handler.ts b/packages/x6/src/common/dnd/handler.ts index b9ad429a8b5..f3acce6a40d 100644 --- a/packages/x6/src/common/dnd/handler.ts +++ b/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,17 +242,17 @@ 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 } } @@ -260,7 +260,7 @@ function onDragEnterLeaveOver() { } function onDrop() { - data!.instance.trigger(Dnd.events.drop, data) + data!.instance.trigger('drop', data) clear() } diff --git a/packages/x6/src/core/model.ts b/packages/x6/src/core/model.ts index b2bae092c1f..8629fceac9a 100644 --- a/packages/x6/src/core/model.ts +++ b/packages/x6/src/core/model.ts @@ -17,7 +17,7 @@ import { UndoableEdit, } from '../change' -export class Model extends Events { +export class Model extends Events { private root: Cell private cells: { [id: string]: Cell } private currentEdit: UndoableEdit @@ -752,9 +752,9 @@ export class Model extends Events { private endingUpdate: boolean = false execute(change: IChange) { - this.trigger(Model.events.execute, change) + this.trigger('execute', change) change.execute() - this.trigger(Model.events.executed, change) + this.trigger('executed', change) this.beginUpdate() this.currentEdit.add(change) @@ -763,29 +763,29 @@ export class Model extends Events { beginUpdate() { this.updateLevel += 1 - this.trigger(Model.events.beginUpdate) + this.trigger('beginUpdate') if (this.updateLevel === 1) { - this.trigger(Model.events.startEdit) + this.trigger('startEdit') } } endUpdate() { this.updateLevel -= 1 if (this.updateLevel === 0) { - this.trigger(Model.events.endEdit) + this.trigger('endEdit') } if (!this.endingUpdate) { this.endingUpdate = this.updateLevel === 0 const edit = this.currentEdit - this.trigger(Model.events.endUpdate, edit) + this.trigger('endUpdate', edit) try { if (this.endingUpdate && !edit.isEmpty()) { - this.trigger(Model.events.beforeUndo, edit) + this.trigger('beforeUndo', edit) this.currentEdit = this.createUndoableEdit() edit.notify() - this.trigger(Model.events.afterUndo, edit) + this.trigger('afterUndo', edit) } } finally { this.endingUpdate = false @@ -806,7 +806,7 @@ export class Model extends Events { return new UndoableEdit(this, { significant, onChange: (edit: UndoableEdit) => { - this.trigger(Model.events.change, edit.changes) + this.trigger('change', edit.changes) }, }) } @@ -964,15 +964,15 @@ export class Model extends Events { } export namespace Model { - export const events = { - change: 'change', - execute: 'execute', - executed: 'executed', - beginUpdate: 'beginUpdate', - endUpdate: 'endUpdate', - startEdit: 'startEdit', - endEdit: 'endEdit', - beforeUndo: 'beforeUndo', - afterUndo: 'afterUndo', + export interface EventArgs { + change: [IChange[]] + execute: IChange + executed: IChange + beginUpdate?: null + endUpdate: UndoableEdit + startEdit?: null + endEdit?: null + beforeUndo: UndoableEdit + afterUndo: UndoableEdit } } diff --git a/packages/x6/src/core/view.ts b/packages/x6/src/core/view.ts index a72b4c662ab..0732dee9dc0 100644 --- a/packages/x6/src/core/view.ts +++ b/packages/x6/src/core/view.ts @@ -10,7 +10,7 @@ import { UndoableEdit, CurrentRootChange } from '../change' import { Point, Rectangle, Anchor, NodeType } from '../struct' import { detector, DomEvent, MouseEventEx, Primer, Disposable } from '../common' -export class View extends Primer { +export class View extends Primer { graph: Graph scale: number translate: Point @@ -2176,7 +2176,7 @@ export class View extends Primer { change.execute() const edit = new UndoableEdit(this.graph.getModel()) edit.add(change) - this.trigger(View.events.undo, edit) + this.model.trigger('afterUndo', edit) this.graph.sizeDidChange() } @@ -2220,12 +2220,28 @@ export class View extends Primer { } export namespace View { - export const events = { - up: 'up', - down: 'down', - undo: 'undo', - scale: 'scale', - translate: 'translate', - scaleAndTranslate: 'scaleAndTranslate', + export interface EventArgs { + up: { + previous: Cell | null + currentRoot: Cell | null + } + down: { + previous: Cell | null + currentRoot: Cell | null + } + scale: { + scale: number + previousScale: number + } + translate: { + translate: Point + previousTranslate: Point + } + scaleAndTranslate: { + scale: number + previousScale: number + translate: Point + previousTranslate: Point + } } } diff --git a/packages/x6/src/graph/change-manager.ts b/packages/x6/src/graph/change-manager.ts index a9c772e2982..5bc4ee58476 100644 --- a/packages/x6/src/graph/change-manager.ts +++ b/packages/x6/src/graph/change-manager.ts @@ -1,5 +1,4 @@ import { Cell } from '../core/cell' -import { Model } from '../core/model' import { Graph } from '../graph' import { Disposable } from '../common' import { BaseManager } from './base-manager' @@ -16,7 +15,7 @@ import { export class ChangeManager extends BaseManager { constructor(graph: Graph) { super(graph) - this.model.on(Model.events.change, this.onModelChanged, this) + this.model.on('change', this.onModelChanged, this) } protected onModelChanged(changes: IChange[]) { @@ -38,6 +37,7 @@ export class ChangeManager extends BaseManager { this.view.translate.x = 0 this.view.translate.y = 0 } + this.graph.trigger('root') } else if (change instanceof ChildChange) { const newParent = this.model.getParent(change.child)! this.view.invalidate(change.child, true, true) @@ -156,6 +156,6 @@ export class ChangeManager extends BaseManager { @Disposable.aop() dispose() { - this.model.off(Model.events.change, this.onModelChanged) + this.model.off('change', this.onModelChanged) } } diff --git a/packages/x6/src/graph/collapse-manager.ts b/packages/x6/src/graph/collapse-manager.ts index 2c4a8125dac..477caa7c938 100644 --- a/packages/x6/src/graph/collapse-manager.ts +++ b/packages/x6/src/graph/collapse-manager.ts @@ -3,7 +3,6 @@ import { Cell } from '../core/cell' import { State } from '../core/state' import { Geometry } from '../core/geometry' import { Rectangle } from '../struct' -import { Graph } from './graph' import { BaseManager } from './base-manager' export class CollapseManager extends BaseManager { @@ -30,7 +29,7 @@ export class CollapseManager extends BaseManager { ) { this.graph.stopEditing(false) this.model.batchUpdate(() => { - this.graph.trigger(Graph.events.foldCells, { + this.graph.trigger('collapseCells', { collapsed, recurse, cells, @@ -42,7 +41,7 @@ export class CollapseManager extends BaseManager { cellsCollapsed( cells: Cell[], - collapse: boolean, + collapsed: boolean, recurse: boolean, checkFoldable: boolean = false, ) { @@ -50,11 +49,11 @@ export class CollapseManager extends BaseManager { this.model.batchUpdate(() => { cells.forEach(cell => { if ( - (!checkFoldable || this.graph.isCellCollapsable(cell, collapse)) && - collapse !== this.graph.isCellCollapsed(cell) + (!checkFoldable || this.graph.isCellCollapsable(cell, collapsed)) && + collapsed !== this.graph.isCellCollapsed(cell) ) { - this.model.setCollapsed(cell, collapse) - this.swapBounds(cell, collapse) + this.model.setCollapsed(cell, collapsed) + this.swapBounds(cell, collapsed) if (this.graph.isExtendParent(cell)) { this.graph.sizeManager.extendParent(cell) @@ -62,14 +61,14 @@ export class CollapseManager extends BaseManager { if (recurse) { const children = this.model.getChildren(cell) - this.cellsCollapsed(children, collapse, recurse) + this.cellsCollapsed(children, collapsed, recurse) } this.graph.sizeManager.constrainChild(cell) } }) }) - this.graph.trigger(Graph.events.cellsFolded, { cells, collapse, recurse }) + this.graph.trigger('cellsCollapsed', { cells, collapsed, recurse }) } } diff --git a/packages/x6/src/graph/connection-manager.ts b/packages/x6/src/graph/connection-manager.ts index 602b92be7a3..d160b8d1e11 100644 --- a/packages/x6/src/graph/connection-manager.ts +++ b/packages/x6/src/graph/connection-manager.ts @@ -2,7 +2,6 @@ import { Cell } from '../core/cell' import { State } from '../core/state' import { Route } from '../route' import { Point, Anchor } from '../struct' -import { Graph } from './graph' import { BaseManager } from './base-manager' export class ConnectionManager extends BaseManager { @@ -14,7 +13,7 @@ export class ConnectionManager extends BaseManager { ) { this.model.batchUpdate(() => { const previous = this.model.getTerminal(edge, isSource) - this.graph.trigger(Graph.events.connectCell, { + this.graph.trigger('connectCell', { edge, terminal, isSource, @@ -64,7 +63,7 @@ export class ConnectionManager extends BaseManager { this.graph.resetEdge(edge) } - this.graph.trigger(Graph.events.cellConnected, { + this.graph.trigger('cellConnected', { edge, terminal, isSource, diff --git a/packages/x6/src/graph/creation-manager.ts b/packages/x6/src/graph/creation-manager.ts index ff9046ec89e..db81bafd76e 100644 --- a/packages/x6/src/graph/creation-manager.ts +++ b/packages/x6/src/graph/creation-manager.ts @@ -1,7 +1,6 @@ import * as util from '../util' import { Cell } from '../core/cell' import { Point } from '../struct' -import { Graph } from './graph' import { BaseManager } from './base-manager' export class CreationManager extends BaseManager { @@ -13,7 +12,7 @@ export class CreationManager extends BaseManager { targetNode?: Cell, ) { this.model.batchUpdate(() => { - this.graph.trigger(Graph.events.addCells, { + this.graph.trigger('addCells', { cells, parent, index, @@ -124,13 +123,13 @@ export class CreationManager extends BaseManager { } } - this.graph.trigger(Graph.events.cellsAdded, { + this.graph.trigger('cellsAdded', { cells, parent, index, sourceNode, targetNode, - absolute, + absolute: absolute === true, }) }) } @@ -219,7 +218,7 @@ export class CreationManager extends BaseManager { } this.model.batchUpdate(() => { - this.graph.trigger(Graph.events.removeCells, { + this.graph.trigger('removeCells', { includeEdges, cells: removing, }) @@ -269,7 +268,7 @@ export class CreationManager extends BaseManager { this.model.remove(cell) }) - this.graph.trigger(Graph.events.cellsRemoved, { cells }) + this.graph.trigger('cellsRemoved', { cells }) }) } } @@ -377,7 +376,7 @@ export class CreationManager extends BaseManager { this.cellsAdded([newEdge], parent!, index, source, cells[0], false) this.graph.connectionManager.cellConnected(edge, cells[0], true) - this.graph.trigger(Graph.events.splitEdge, { + this.graph.trigger('splitEdge', { edge, cells, newEdge, diff --git a/packages/x6/src/graph/editing-accessor.ts b/packages/x6/src/graph/editing-accessor.ts index 5772d90b1c5..bd23787f25f 100644 --- a/packages/x6/src/graph/editing-accessor.ts +++ b/packages/x6/src/graph/editing-accessor.ts @@ -1,7 +1,6 @@ import { Cell } from '../core/cell' import { DomEvent } from '../common' import { hook } from './decorator' -import { events } from './events' import { BaseGraph } from './base-graph' export class EditingAccessor extends BaseGraph { @@ -35,7 +34,7 @@ export class EditingAccessor extends BaseGraph { stopEditing(cancel: boolean = false) { this.cellEditor.stopEditing(cancel) - this.trigger(events.editingStopped, { cancel }) + this.trigger('editingStopped', { cancel }) return this } @@ -45,9 +44,9 @@ export class EditingAccessor extends BaseGraph { ) { if (e == null || !DomEvent.isMultiTouchEvent(e)) { if (cell != null && this.isCellEditable(cell)) { - this.trigger(events.startEditing, { cell, e }) + this.trigger('startEditing', { cell, e }) this.cellEditor.startEditing(cell, e) - this.trigger(events.editingStarted, { cell, e }) + this.trigger('editingStarted', { cell, e }) } } return this diff --git a/packages/x6/src/graph/eventloop-manager.ts b/packages/x6/src/graph/eventloop-manager.ts index d1dab67ae56..11d08fa5ee4 100644 --- a/packages/x6/src/graph/eventloop-manager.ts +++ b/packages/x6/src/graph/eventloop-manager.ts @@ -4,8 +4,7 @@ import { State } from '../core/state' import { Point } from '../struct' import { RectangleShape } from '../shape' import { detector, DomEvent, MouseEventEx } from '../common' -import { IMouseHandler, ConnectionHandler } from '../handler' -import { events } from './events' +import { IMouseHandler } from '../handler' import { BaseManager } from './base-manager' export class EventLoopManager extends BaseManager { @@ -364,7 +363,7 @@ export class EventLoopManager extends BaseManager { // Updates the event state via getEventState e.state = this.getEventState(e.getState()) - this.graph.trigger(events.fireMouseEvent, { eventName, e, sender }) + this.graph.trigger('fireMouseEvent', { eventName, e, sender }) if ( detector.IS_OPERA || @@ -466,11 +465,11 @@ export class EventLoopManager extends BaseManager { fireGestureEvent(e: MouseEvent, cell?: Cell) { // Resets double tap event handling when gestures take place this.lastTouchTime = 0 - this.graph.trigger(events.gesture, { e, cell }) + this.graph.trigger('gesture', { e, cell }) } escape(e: KeyboardEvent) { - this.graph.trigger(events.escape, { e }) + this.graph.trigger('escape', { e }) } click(e: MouseEventEx) { @@ -478,7 +477,7 @@ export class EventLoopManager extends BaseManager { const consumed = e.isConsumed() let cell = e.getCell() - this.graph.trigger(events.click, { cell, e: evt }) + this.graph.trigger('click', { cell, e: evt }) // Handles the event if it has not been consumed if (this.graph.isEnabled() && !DomEvent.isConsumed(evt) && !consumed) { @@ -526,7 +525,7 @@ export class EventLoopManager extends BaseManager { } dblClick(e: MouseEvent, cell?: Cell | null) { - this.graph.trigger(events.dblclick, { e, cell }) + this.graph.trigger('dblclick', { e, cell }) // Handles the event if it has not been consumed if ( @@ -543,7 +542,7 @@ export class EventLoopManager extends BaseManager { tapAndHold(e: MouseEventEx) { const evt = e.getEvent() - this.graph.trigger(events.tapAndHold, { e }) + this.graph.trigger('tapAndHold', { e: evt }) if (DomEvent.isConsumed(evt)) { // Resets the state of the panning handler @@ -570,8 +569,8 @@ export class EventLoopManager extends BaseManager { ) connHandler.preview.edgeState = connHandler.preview.createEdgeState(e) connHandler.preview.sourceState = state - connHandler.trigger(ConnectionHandler.events.start, { - previous: connHandler.preview.sourceState, + connHandler.trigger('start', { + state: connHandler.preview.sourceState, }) } } diff --git a/packages/x6/src/graph/events.ts b/packages/x6/src/graph/events.ts index 1c6fc7090ce..8e0cefe9617 100644 --- a/packages/x6/src/graph/events.ts +++ b/packages/x6/src/graph/events.ts @@ -1,9 +1,13 @@ +import { Cell } from '../core/cell' +import { Rectangle, Overlay, Anchor } from '../struct' +import { MouseEventEx } from '../common' +import { Align, VAlign } from '../types' + export const events = { refresh: 'refresh', root: 'root', addCells: 'addCells', - cellsAdded: 'cellsAdded', removeCells: 'removeCells', cellsRemoved: 'cellsRemoved', removeCellsFromParent: 'removeCellsFromParent', @@ -28,11 +32,6 @@ export const events = { moveCells: 'moveCells', cellsMoved: 'cellsMoved', - startEditing: 'startEditing', - editingStarted: 'editingStarted', - editingStopped: 'editingStopped', - size: 'size', - click: 'click', dblclick: 'dblclick', tapAndHold: 'tapAndHold', @@ -40,14 +39,180 @@ export const events = { gesture: 'gesture', fireMouseEvent: 'fireMouseEvent', - selectionChanged: 'selectionChanged', } export interface EventArgs { + refresh?: null + root?: null + size: Rectangle + selectionChanged: { + added?: Cell[] | null + removed?: Cell[] | null + } + + addCells: { + cells: Cell[] + parent: Cell + index: number + sourceNode?: Cell | null + targetNode?: Cell | null + } + cellsAdded: { + cells: Cell[] + parent: Cell + index: number + sourceNode?: Cell | null + targetNode?: Cell | null + absolute: boolean + } + removeCells: { + cells: Cell[] + includeEdges: boolean + } + cellsRemoved: { + cells: Cell[] + } + connectCell: { + edge: Cell + terminal?: Cell | null + isSource: boolean + previous?: Cell | null + anchor?: Anchor | null + } + cellConnected: { + edge: Cell + terminal?: Cell | null + isSource: boolean + previous?: Cell | null + anchor?: Anchor | null + } + collapseCells: { + cells: Cell[] + collapsed: boolean + recurse: boolean + } + cellsCollapsed: { + cells: Cell[] + collapsed: boolean + recurse: boolean + } + splitEdge: { + edge: Cell + newEdge: Cell + cells: Cell[] + dx: number + dy: number + } + flipEdge: { edge: Cell } + toggleCells: { + show: boolean + includeEdges: boolean + cells: Cell[] + } + resizeCells: { + cells: Cell[] + bounds: Rectangle[] + } + cellsResized: { + cells: Cell[] + bounds: Rectangle[] + } + updateCellSize: { + cell: Cell + ignoreChildren: boolean + } + addOverlay: { + cell: Cell + overlay: Overlay + } + removeOverlay: { + cell: Cell + overlay: Overlay + } + removeOverlays: { + cell: Cell + overlays: Overlay[] + } + moveCells: { + cells: Cell[] + dx: number + dy: number + clone: boolean + target?: Cell | null + e?: MouseEvent | null + } + cellsMoved: { + cells: Cell[] + dx: number + dy: number + disconnect: boolean + } + alignCells: { + cells: Cell[] + align: Align | VAlign + } + orderCells: { + cells: Cell[] + toBack: boolean + } + cellsOrdered: { + cells: Cell[] + toBack: boolean + } + groupCells: { + cells: Cell[] + group: Cell + border: number + } + ungroupCells: { + cells: Cell[] + } + removeCellsFromParent: { + cells: Cell[] + } + startEditing: { + cell: Cell + e?: MouseEvent | null + } + editingStarted: { + cell: Cell + e?: MouseEvent | null + } + editingStopped: { + cancel: boolean + } + pan: { panX: number panY: number } - [key: string]: any + fireMouseEvent: { + eventName: string + e: MouseEventEx + sender: any + } + + gesture: { + e: MouseEvent + cell?: Cell | null + } + + escape: { + e: KeyboardEvent + } + + click: { + e: MouseEvent + cell?: Cell | null + } + + dblclick: { + e: MouseEvent + cell?: Cell | null + } + + tapAndHold: { + e: MouseEvent + } } diff --git a/packages/x6/src/graph/group-manager.ts b/packages/x6/src/graph/group-manager.ts index aec68410e62..542b560cf63 100644 --- a/packages/x6/src/graph/group-manager.ts +++ b/packages/x6/src/graph/group-manager.ts @@ -1,6 +1,5 @@ import { Cell } from '../core/cell' import { Geometry } from '../core/geometry' -import { events } from './events' import { BaseManager } from './base-manager' export class GroupManager extends BaseManager { @@ -64,7 +63,7 @@ export class GroupManager extends BaseManager { // Resize the group this.graph.sizeManager.cellsResized([group], [bounds], false) - this.graph.trigger(events.groupCells, { group, cells, border }) + this.graph.trigger('groupCells', { group, cells, border }) }) } } @@ -148,7 +147,7 @@ export class GroupManager extends BaseManager { }) this.removeGroupsAfterUngroup(cells!) - this.graph.trigger(events.ungroupCells, { cells }) + this.graph.trigger('ungroupCells', { cells: cells! }) }) } @@ -276,7 +275,7 @@ export class GroupManager extends BaseManager { true, ) - this.graph.trigger(events.removeCellsFromParent, { cells }) + this.graph.trigger('removeCellsFromParent', { cells }) }) return cells diff --git a/packages/x6/src/graph/moving-manager.ts b/packages/x6/src/graph/moving-manager.ts index c1bb2cc4216..116fdea93fb 100644 --- a/packages/x6/src/graph/moving-manager.ts +++ b/packages/x6/src/graph/moving-manager.ts @@ -1,7 +1,6 @@ import * as util from '../util' import { Cell } from '../core/cell' import { Point } from '../struct' -import { events } from './events' import { BaseManager } from './base-manager' import { Align, VAlign } from '../types' @@ -77,7 +76,7 @@ export class MovingManager extends BaseManager { this.graph.setNegativeCoordinatesAllowed(true) } - this.graph.trigger(events.moveCells, { + this.graph.trigger('moveCells', { cells, dx, dy, @@ -143,7 +142,7 @@ export class MovingManager extends BaseManager { this.resetOtherEdges(cells) } - this.graph.trigger(events.cellsMoved, { + this.graph.trigger('cellsMoved', { cells, dx, dy, @@ -302,7 +301,7 @@ export class MovingManager extends BaseManager { }) }) - this.graph.trigger(events.alignCells, { align, cells }) + this.graph.trigger('alignCells', { align, cells }) } return cells @@ -310,7 +309,7 @@ export class MovingManager extends BaseManager { orderCells(toBack: boolean, cells: Cell[]) { this.model.batchUpdate(() => { - this.graph.trigger(events.orderCells, { cells, toBack }) + this.graph.trigger('orderCells', { cells, toBack }) this.cellsOrdered(cells, toBack) }) return cells @@ -329,7 +328,7 @@ export class MovingManager extends BaseManager { } }) - this.graph.trigger(events.cellsOrdered, { cells, toBack }) + this.graph.trigger('cellsOrdered', { cells, toBack }) }) } } diff --git a/packages/x6/src/graph/overlay-manager.ts b/packages/x6/src/graph/overlay-manager.ts index 0bd5cee64ed..7233303a906 100644 --- a/packages/x6/src/graph/overlay-manager.ts +++ b/packages/x6/src/graph/overlay-manager.ts @@ -1,6 +1,5 @@ import { Cell } from '../core/cell' import { Overlay, Image } from '../struct' -import { events } from './events' import { BaseManager } from './base-manager' export class OverlayManager extends BaseManager { @@ -17,7 +16,7 @@ export class OverlayManager extends BaseManager { this.renderer.redraw(state) } - this.graph.trigger(events.addOverlay, { cell, overlay }) + this.graph.trigger('addOverlay', { cell, overlay }) return overlay } @@ -39,7 +38,7 @@ export class OverlayManager extends BaseManager { this.renderer.redraw(state) } - this.graph.trigger(events.removeOverlay, { cell, overlay }) + this.graph.trigger('removeOverlay', { cell, overlay }) return overlay } @@ -56,7 +55,7 @@ export class OverlayManager extends BaseManager { this.renderer.redraw(state) } - this.graph.trigger(events.removeOverlays, { cell, overlays }) + this.graph.trigger('removeOverlays', { cell, overlays }) } return overlays diff --git a/packages/x6/src/graph/size-manager.ts b/packages/x6/src/graph/size-manager.ts index 7f0d8e064c7..8fc17d36934 100644 --- a/packages/x6/src/graph/size-manager.ts +++ b/packages/x6/src/graph/size-manager.ts @@ -1,7 +1,6 @@ import * as util from '../util' import { Cell } from '../core/cell' import { Point, Rectangle } from '../struct' -import { events } from './events' import { BaseManager } from './base-manager' export class SizeManager extends BaseManager { @@ -19,7 +18,7 @@ export class SizeManager extends BaseManager { updateCellSize(cell: Cell, ignoreChildren: boolean = false) { this.model.batchUpdate(() => { - this.graph.trigger(events.updateCellSize, { cell, ignoreChildren }) + this.graph.trigger('updateCellSize', { cell, ignoreChildren }) this.cellSizeUpdated(cell, ignoreChildren) }) @@ -159,7 +158,7 @@ export class SizeManager extends BaseManager { resizeCells(cells: Cell[], bounds: Rectangle[], recurse: boolean) { this.model.batchUpdate(() => { - this.graph.trigger(events.resizeCells, { cells, bounds }) + this.graph.trigger('resizeCells', { cells, bounds }) this.cellsResized(cells, bounds, recurse) }) @@ -184,7 +183,7 @@ export class SizeManager extends BaseManager { } }) - this.graph.trigger(events.cellsResized, { cells, bounds }) + this.graph.trigger('cellsResized', { cells, bounds }) } } diff --git a/packages/x6/src/graph/style-manager.ts b/packages/x6/src/graph/style-manager.ts index b6a76533fcf..0e0a796ed81 100644 --- a/packages/x6/src/graph/style-manager.ts +++ b/packages/x6/src/graph/style-manager.ts @@ -1,7 +1,6 @@ import { Cell } from '../core/cell' import { Style } from '../types' import { BaseManager } from './base-manager' -import { events } from './events' export class StyleManager extends BaseManager { getCellStyle(cell: Cell | null): Style { @@ -128,7 +127,7 @@ export class StyleManager extends BaseManager { // Removes all control points this.graph.resetEdge(edge) - this.graph.trigger(events.flipEdge, { edge }) + this.graph.trigger('flipEdge', { edge }) }) } @@ -141,7 +140,7 @@ export class StyleManager extends BaseManager { : cells this.model.batchUpdate(() => { - this.graph.trigger(events.toggleCells, { + this.graph.trigger('toggleCells', { show, includeEdges, cells: arr, diff --git a/packages/x6/src/graph/viewport-accessor.ts b/packages/x6/src/graph/viewport-accessor.ts index 494a267c29d..ffaa9014f0a 100644 --- a/packages/x6/src/graph/viewport-accessor.ts +++ b/packages/x6/src/graph/viewport-accessor.ts @@ -1,6 +1,5 @@ import { Cell } from '../core/cell' import { Rectangle } from '../struct' -import { events } from './events' import { BaseGraph } from './base-graph' export class ViewportAccessor extends BaseGraph { @@ -12,7 +11,7 @@ export class ViewportAccessor extends BaseGraph { this.view.clear(cell, cell == null) this.view.validate() this.sizeDidChange() - this.trigger(events.refresh) + this.trigger('refresh') return this } diff --git a/packages/x6/src/graph/viewport-manager.ts b/packages/x6/src/graph/viewport-manager.ts index 1694f3a3140..3121617b7b5 100644 --- a/packages/x6/src/graph/viewport-manager.ts +++ b/packages/x6/src/graph/viewport-manager.ts @@ -4,7 +4,6 @@ import { Cell } from '../core/cell' import { Size } from '../types' import { Rectangle, Point } from '../struct' import { detector, Disposable, DomEvent } from '../common' -import { events } from './events' import { BaseManager } from './base-manager' export class ViewportManager extends BaseManager { @@ -320,7 +319,7 @@ export class ViewportManager extends BaseManager { ) } - this.graph.trigger(events.size, bounds) + this.graph.trigger('size', bounds) return this } diff --git a/packages/x6/src/handler/anchor/handler.ts b/packages/x6/src/handler/anchor/handler.ts index 224009d90cc..237d265145e 100644 --- a/packages/x6/src/handler/anchor/handler.ts +++ b/packages/x6/src/handler/anchor/handler.ts @@ -1,7 +1,5 @@ import * as util from '../../util' import { Graph } from '../../graph' -import { View } from '../../core/view' -import { Model } from '../../core/model' import { State } from '../../core/state' import { Shape } from '../../shape' import { BaseHandler } from '../handler-base' @@ -43,11 +41,11 @@ export class AnchorHandler extends BaseHandler { } } - this.graph.on(Graph.events.root, this.resetHandler) - this.graph.model.on(Model.events.change, this.resetHandler) - this.graph.view.on(View.events.scale, this.resetHandler) - this.graph.view.on(View.events.translate, this.resetHandler) - this.graph.view.on(View.events.scaleAndTranslate, this.resetHandler) + this.graph.on('root', this.resetHandler) + this.graph.model.on('change', this.resetHandler) + this.graph.view.on('scale', this.resetHandler) + this.graph.view.on('translate', this.resetHandler) + this.graph.view.on('scaleAndTranslate', this.resetHandler) } reset() { diff --git a/packages/x6/src/handler/cell-editor.ts b/packages/x6/src/handler/cell-editor.ts index 047865f565f..9dfc55fe8d1 100644 --- a/packages/x6/src/handler/cell-editor.ts +++ b/packages/x6/src/handler/cell-editor.ts @@ -1,9 +1,7 @@ import * as util from '../util' import { Graph } from '../graph' import { Cell } from '../core/cell' -import { View } from '../core/view' import { State } from '../core/state' -import { Model } from '../core/model' import { Align } from '../types' import { globals } from '../option' import { detector, DomEvent, Disposable } from '../common' @@ -30,8 +28,8 @@ export class CellEditor extends Disposable { } } - this.graph.view.on(View.events.scale, this.zoomHandler) - this.graph.view.on(View.events.scaleAndTranslate, this.zoomHandler) + this.graph.view.on('scale', this.zoomHandler) + this.graph.view.on('scaleAndTranslate', this.zoomHandler) // Adds handling of deleted cells while editing this.changeHandler = () => { @@ -43,7 +41,7 @@ export class CellEditor extends Disposable { } } - this.graph.model.on(Model.events.change, this.changeHandler) + this.graph.model.on('change', this.changeHandler) } /** diff --git a/packages/x6/src/handler/cell-highlight.ts b/packages/x6/src/handler/cell-highlight.ts index f63970f22bd..a1b43bd093f 100644 --- a/packages/x6/src/handler/cell-highlight.ts +++ b/packages/x6/src/handler/cell-highlight.ts @@ -1,7 +1,5 @@ import * as util from '../util' import { globals } from '../option/global' -import { View } from '../core/view' -import { Model } from '../core/model' import { State } from '../core/state' import { Graph } from '../graph' import { Shape } from '../shape' @@ -50,15 +48,15 @@ export class CellHighlight extends BaseHandler { } } - this.graph.view.on(View.events.scale, this.repaintHandler) - this.graph.view.on(View.events.translate, this.repaintHandler) - this.graph.view.on(View.events.scaleAndTranslate, this.repaintHandler) - this.graph.model.on(Model.events.change, this.repaintHandler) + this.graph.view.on('scale', this.repaintHandler) + this.graph.view.on('translate', this.repaintHandler) + this.graph.view.on('scaleAndTranslate', this.repaintHandler) + this.graph.model.on('change', this.repaintHandler) // Hides the marker if the current root changes this.resetHandler = () => this.hide() - this.graph.view.on(View.events.up, this.resetHandler) - this.graph.view.on(View.events.down, this.resetHandler) + this.graph.view.on('up', this.resetHandler) + this.graph.view.on('down', this.resetHandler) } setHighlightColor(color: string | null) { diff --git a/packages/x6/src/handler/connection/handler.ts b/packages/x6/src/handler/connection/handler.ts index bb677880b14..db85bba083a 100644 --- a/packages/x6/src/handler/connection/handler.ts +++ b/packages/x6/src/handler/connection/handler.ts @@ -2,16 +2,16 @@ import { Point } from '../../struct' import { Style } from '../../types' import { Graph } from '../../graph' import { Cell } from '../../core/cell' -import { View } from '../../core/view' import { State } from '../../core/state' -import { Model } from '../../core/model' import { Geometry } from '../../core/geometry' import { MouseHandler } from '../handler-mouse' import { MouseEventEx, Disposable } from '../../common' import { Knobs } from './knobs' import { Preview } from './preview' -export class ConnectionHandler extends MouseHandler { +export class ConnectionHandler extends MouseHandler< + ConnectionHandler.EventArgs +> { knobs: Knobs preview: Preview @@ -105,17 +105,17 @@ export class ConnectionHandler extends MouseHandler { } } - this.graph.view.on(View.events.scale, this.changeHandler) - this.graph.view.on(View.events.translate, this.changeHandler) - this.graph.view.on(View.events.scaleAndTranslate, this.changeHandler) - this.graph.model.on(Model.events.change, this.changeHandler) + this.graph.view.on('scale', this.changeHandler) + this.graph.view.on('translate', this.changeHandler) + this.graph.view.on('scaleAndTranslate', this.changeHandler) + this.graph.model.on('change', this.changeHandler) // Removes the icon if we step into/up or start editing this.resetHandler = () => this.reset() - this.graph.on(Graph.events.escape, this.resetHandler) - this.graph.on(Graph.events.startEditing, this.resetHandler) - this.graph.view.on(View.events.down, this.resetHandler) - this.graph.view.on(View.events.up, this.resetHandler) + this.graph.on('escape', this.resetHandler) + this.graph.on('startEditing', this.resetHandler) + this.graph.view.on('up', this.resetHandler) + this.graph.view.on('down', this.resetHandler) } isCreateTarget(e: MouseEvent) { @@ -167,8 +167,8 @@ export class ConnectionHandler extends MouseHandler { this.mouseDownCounter = 1 this.preview.start(e) this.setGlobalCursor(this.cursor) - this.trigger(ConnectionHandler.events.start, { - state: this.preview.sourceState, + this.trigger('start', { + state: this.preview.sourceState!, }) e.consume() } @@ -370,12 +370,12 @@ export class ConnectionHandler extends MouseHandler { geo.setTerminalPoint(p, false) } - this.trigger(ConnectionHandler.events.connect, { + this.trigger('connect', { terminalInserted, edge, terminal: target, target: dropTarget, - event: evt, + e: evt, }) } }) @@ -500,8 +500,14 @@ export class ConnectionHandler extends MouseHandler { } export namespace ConnectionHandler { - export const events = { - start: 'start', - connect: 'connect', + export interface EventArgs { + start: { state: State } + connect: { + edge: Cell + terminal?: Cell | null + target?: Cell | null + e: MouseEvent + terminalInserted: boolean + } } } diff --git a/packages/x6/src/handler/contextmenu/handler.ts b/packages/x6/src/handler/contextmenu/handler.ts index ed6a48af839..59d9af92a6c 100644 --- a/packages/x6/src/handler/contextmenu/handler.ts +++ b/packages/x6/src/handler/contextmenu/handler.ts @@ -42,7 +42,7 @@ export class ContextMenuHandler extends MouseHandler { this.gestureHandler = () => { this.inTolerance = false } - this.graph.on(Graph.events.gesture, this.gestureHandler) + this.graph.on('gesture', this.gestureHandler) } protected config() { @@ -137,6 +137,6 @@ export class ContextMenuHandler extends MouseHandler { @Disposable.aop() dispose() { this.graph.removeMouseListener(this) - this.graph.off(Graph.events.gesture, this.gestureHandler) + this.graph.off('gesture', this.gestureHandler) } } diff --git a/packages/x6/src/handler/edge/handler.ts b/packages/x6/src/handler/edge/handler.ts index b76b5f8671c..966f367f383 100644 --- a/packages/x6/src/handler/edge/handler.ts +++ b/packages/x6/src/handler/edge/handler.ts @@ -165,7 +165,7 @@ export class EdgeHandler extends MouseHandler { } } - this.state.view.graph.on(Graph.events.escape, this.escapeHandler) + this.state.view.graph.on('escape', this.escapeHandler) } config() { @@ -1678,7 +1678,7 @@ export class EdgeHandler extends MouseHandler { @Disposable.aop() dispose() { - this.state.view.graph.off(Graph.events.escape, this.escapeHandler) + this.state.view.graph.off('escape', this.escapeHandler) this.escapeHandler = null this.marker.dispose() diff --git a/packages/x6/src/handler/moving/handler.ts b/packages/x6/src/handler/moving/handler.ts index b7101308015..9987b06c2aa 100644 --- a/packages/x6/src/handler/moving/handler.ts +++ b/packages/x6/src/handler/moving/handler.ts @@ -1,7 +1,6 @@ import * as util from '../../util' import * as movment from './util' import { Cell } from '../../core/cell' -import { Model } from '../../core/model' import { Graph } from '../../graph' import { Preview } from './preview' import { MouseHandler } from '../handler-mouse' @@ -21,10 +20,10 @@ export class MovingHandler extends MouseHandler { this.graph.on('pan', this.onPan) this.onEscape = () => this.reset() - this.graph.on(Graph.events.escape, this.onEscape) + this.graph.on('escape', this.onEscape) this.onRefresh = () => this.preview.refresh() - this.graph.model.on(Model.events.change, this.onRefresh) + this.graph.model.on('change', this.onRefresh) } mouseDown(e: MouseEventEx) { @@ -236,10 +235,10 @@ export class MovingHandler extends MouseHandler { this.graph.off('pan', this.onPan) this.onPan = null - this.graph.off(Graph.events.escape, this.onEscape) + this.graph.off('escape', this.onEscape) this.onEscape = null - this.graph.model.off(Model.events.change, this.onRefresh) + this.graph.model.off('change', this.onRefresh) this.onRefresh = null this.preview.dispose() diff --git a/packages/x6/src/handler/node/handler.ts b/packages/x6/src/handler/node/handler.ts index bb3bbaa7ad6..f06ce4693ea 100644 --- a/packages/x6/src/handler/node/handler.ts +++ b/packages/x6/src/handler/node/handler.ts @@ -42,7 +42,7 @@ export class NodeHandler extends MouseHandler { this.reset() } - this.state.view.graph.on(Graph.events.escape, this.escapeHandler) + this.state.view.graph.on('escape', this.escapeHandler) } isConstrained(e: MouseEventEx) { @@ -239,7 +239,7 @@ export class NodeHandler extends MouseHandler { @Disposable.aop() dispose() { if (this.escapeHandler != null) { - this.state.view.graph.off(Graph.events.escape, this.escapeHandler) + this.state.view.graph.off('escape', this.escapeHandler) this.escapeHandler = null } diff --git a/packages/x6/src/handler/panning/handler.ts b/packages/x6/src/handler/panning/handler.ts index 70f12d88840..eb228980d03 100644 --- a/packages/x6/src/handler/panning/handler.ts +++ b/packages/x6/src/handler/panning/handler.ts @@ -91,7 +91,7 @@ export class PanningHandler extends MouseHandler { } } - this.graph.on(Graph.events.fireMouseEvent, this.forcePanningHandler) + this.graph.on('fireMouseEvent', this.forcePanningHandler) // Handles pinch gestures this.gestureHandler = ({ e }) => { @@ -128,7 +128,7 @@ export class PanningHandler extends MouseHandler { } } - this.graph.on(Graph.events.gesture, this.gestureHandler) + this.graph.on('gesture', this.gestureHandler) this.mouseUpListener = () => { if (this.active) { @@ -277,8 +277,8 @@ export class PanningHandler extends MouseHandler { @Disposable.aop() dispose() { this.graph.removeMouseListener(this) - this.graph.off(Graph.events.fireMouseEvent, this.forcePanningHandler) - this.graph.off(Graph.events.gesture, this.gestureHandler) + this.graph.off('fireMouseEvent', this.forcePanningHandler) + this.graph.off('gesture', this.gestureHandler) DomEvent.removeListener(document, 'mouseup', this.mouseUpListener) } } diff --git a/packages/x6/src/handler/rubberband/handler.ts b/packages/x6/src/handler/rubberband/handler.ts index b0581606a8c..09bf5b5ebd2 100644 --- a/packages/x6/src/handler/rubberband/handler.ts +++ b/packages/x6/src/handler/rubberband/handler.ts @@ -42,7 +42,7 @@ export class RubberbandHandler extends MouseHandler { } } - this.graph.on(Graph.events.fireMouseEvent, this.onMouseEvent) + this.graph.on('fireMouseEvent', this.onMouseEvent) this.onPan = () => this.repaint() this.graph.on('pan', this.onPan) @@ -52,7 +52,7 @@ export class RubberbandHandler extends MouseHandler { this.reset() } } - this.graph.on(Graph.events.gesture, this.onGesture) + this.graph.on('gesture', this.onGesture) } config() { @@ -274,8 +274,8 @@ export class RubberbandHandler extends MouseHandler { dispose() { this.graph.removeMouseListener(this) this.graph.off('pan', this.onPan) - this.graph.off(Graph.events.gesture, this.onGesture) - this.graph.off(Graph.events.fireMouseEvent, this.onMouseEvent) + this.graph.off('gesture', this.onGesture) + this.graph.off('fireMouseEvent', this.onMouseEvent) this.reset() diff --git a/packages/x6/src/handler/selection/handler.ts b/packages/x6/src/handler/selection/handler.ts index 98efd63e4c9..76021f61502 100644 --- a/packages/x6/src/handler/selection/handler.ts +++ b/packages/x6/src/handler/selection/handler.ts @@ -1,7 +1,5 @@ import { Cell } from '../../core/cell' -import { View } from '../../core/view' import { State } from '../../core/state' -import { Model } from '../../core/model' import { Graph } from '../../graph' import { NodeHandler } from '../node/handler' import { EdgeHandler } from '../edge/handler' @@ -24,13 +22,13 @@ export class SelectionHandler extends MouseHandler { } } - this.graph.on(Graph.events.selectionChanged, this.refreshHandler) - this.graph.view.on(View.events.scale, this.refreshHandler) - this.graph.view.on(View.events.translate, this.refreshHandler) - this.graph.view.on(View.events.scaleAndTranslate, this.refreshHandler) - this.graph.view.on(View.events.down, this.refreshHandler) - this.graph.view.on(View.events.up, this.refreshHandler) - this.graph.model.on(Model.events.change, this.refreshHandler) + this.graph.on('selectionChanged', this.refreshHandler) + this.graph.view.on('scale', this.refreshHandler) + this.graph.view.on('translate', this.refreshHandler) + this.graph.view.on('scaleAndTranslate', this.refreshHandler) + this.graph.view.on('up', this.refreshHandler) + this.graph.view.on('down', this.refreshHandler) + this.graph.model.on('change', this.refreshHandler) } refresh() {