Replace EventEmitter with typed EventDispatcher

app/src/components/Sidebar/Sidebar.tsx

@@ -22,12 +22,8 @@ interface State {
 }
 
 class Sidebar extends React.Component<Props, State> {
-  private updateNode = (node: q.TreeNode) => {
+  private updateNode = () => {
-    if (!node) {
     this.setState(this.state)
-    } else {
-      this.setState({ node })
-    }
   }
 
   constructor(props: any) {
@@ -58,17 +54,13 @@ class Sidebar extends React.Component<Props, State> {
   }
 
   private registerUpdateListener(node: q.TreeNode) {
-    node.on(q.TreeNodeUpdateEvents.merge, this.updateNode)
+    node.onMerge.subscribe(this.updateNode)
-    node.on(q.TreeNodeUpdateEvents.message, this.updateNode)
+    node.onMessage.subscribe(this.updateNode)
   }
 
   private removeUpdateListener(node: q.TreeNode) {
-    node.removeListener(q.TreeNodeUpdateEvents.merge, this.updateNode)
+    node.onMerge.unsubscribe(this.updateNode)
-    node.removeListener(q.TreeNodeUpdateEvents.message, this.updateNode)
+    node.onMessage.unsubscribe(this.updateNode)
-  }
-
-  private open(): boolean {
-    return true
   }
 
   public render() {

app/src/components/Sidebar/ValueRenderer.tsx

@@ -13,23 +13,18 @@ interface State {
 }
 
 class ValueRenderer extends React.Component<Props, State> {
-  private updateNode: (node?: q.TreeNode | undefined) => void
+  private updateNode: () => void
   constructor(props: any) {
     super(props)
     this.state = {}
-    this.updateNode = (node) => {
+    this.updateNode = () => {
-      if (!node) {
       this.setState(this.state)
-      } else {
-        this.setState({ node })
-      }
     }
   }
 
   public componentWillReceiveProps(nextProps: Props) {
-    this.props.node && this.props.node.removeListener('update', this.updateNode)
+    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
-    nextProps.node && nextProps.node.on('update', this.updateNode)
+    nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
-    nextProps.node && this.updateNode(nextProps.node)
   }
 
   private style = (theme: Theme) => {

app/src/components/Tree/TreeNode.tsx

@@ -57,15 +57,17 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
   }
 
   public componentDidMount() {
-    this.props.treeNode.on(q.TreeNodeUpdateEvents.merge, this.subnodesDidchange)
+    const { treeNode } = this.props
-    this.props.treeNode.on(q.TreeNodeUpdateEvents.edges, this.edgesDidChange)
+    treeNode.onMerge.subscribe(this.subnodesDidchange)
-    this.props.treeNode.on(q.TreeNodeUpdateEvents.message, this.messageDidChange)
+    treeNode.onEdgesChange.subscribe(this.edgesDidChange)
+    treeNode.onMessage.subscribe(this.messageDidChange)
   }
 
   public componentWillUnmount() {
-    this.props.treeNode.removeListener(q.TreeNodeUpdateEvents.merge, this.subnodesDidchange)
+    const { treeNode } = this.props
-    this.props.treeNode.removeListener(q.TreeNodeUpdateEvents.edges, this.edgesDidChange)
+    treeNode.onMerge.unsubscribe(this.subnodesDidchange)
-    this.props.treeNode.removeListener(q.TreeNodeUpdateEvents.message, this.messageDidChange)
+    treeNode.onEdgesChange.unsubscribe(this.edgesDidChange)
+    treeNode.onMessage.unsubscribe(this.messageDidChange)
   }
 
   private getStyles() {

backend/src/Model/TreeNode.ts

@@ -1,22 +1,18 @@
 import { Edge, Message } from './'
-import { EventEmitter } from 'events'
+import { EventDispatcher } from '../../../events'
 
-export enum TreeNodeUpdateEvents {
+export class TreeNode {
-  edges = 'edges',
-  message = 'message',
-  merge = 'merge',
-}
-
-export class TreeNode extends EventEmitter {
   public sourceEdge?: Edge
   public message?: Message
   public edges: {[s: string]: Edge} = {}
   public collapsed = false
   public messages: number = 0
 
-  constructor(sourceEdge?: Edge, message?: Message) {
+  public onMerge = new EventDispatcher<void, TreeNode>(this)
-    super()
+  public onEdgesChange = new EventDispatcher<void, TreeNode>(this)
+  public onMessage = new EventDispatcher<Message, TreeNode>(this)
 
+  constructor(sourceEdge?: Edge, message?: Message) {
     if (sourceEdge) {
       this.sourceEdge = sourceEdge
       sourceEdge.target = this
@@ -25,10 +21,6 @@ export class TreeNode extends EventEmitter {
     this.setMessage(message)
   }
 
-  private propagateUpdate(event: TreeNodeUpdateEvents) {
-    this.emit(event)
-  }
-
   public setMessage(value: any) {
     this.message = value
     this.messages += 1
@@ -58,7 +50,7 @@ export class TreeNode extends EventEmitter {
     edge.source = this
 
     if (emitUpdate) {
-      this.propagateUpdate(TreeNodeUpdateEvents.edges)
+      this.onEdgesChange.dispatch()
     }
   }
 
@@ -74,11 +66,11 @@ export class TreeNode extends EventEmitter {
   public updateWithNode(node: TreeNode) {
     if (node.message) {
       this.setMessage(node.message)
-      this.propagateUpdate(TreeNodeUpdateEvents.message)
+      this.onMessage.dispatch(node.message)
     }
 
     this.mergeEdges(node)
-    this.propagateUpdate(TreeNodeUpdateEvents.merge)
+    this.onMerge.dispatch()
   }
 
   public leafes(): TreeNode[] {
@@ -106,7 +98,7 @@ export class TreeNode extends EventEmitter {
     }
 
     if (edgesDidUpdate) {
-      this.propagateUpdate(TreeNodeUpdateEvents.edges)
+      this.onEdgesChange.dispatch()
     }
   }
 }

backend/src/Model/index.ts

@@ -1,5 +1,5 @@
 export { Edge } from './Edge'
-export { TreeNode, TreeNodeUpdateEvents } from './TreeNode'
+export { TreeNode } from './TreeNode'
 export { Message } from './Message'
 export { TreeNodeFactory } from './TreeNodeFactory'
 export { Tree } from './Tree'