diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx index 5a014ae..97a6140 100644 --- a/app/src/components/Sidebar/Sidebar.tsx +++ b/app/src/components/Sidebar/Sidebar.tsx @@ -22,12 +22,8 @@ interface State { } class Sidebar extends React.Component { - private updateNode = (node: q.TreeNode) => { - if (!node) { - this.setState(this.state) - } else { - this.setState({ node }) - } + private updateNode = () => { + this.setState(this.state) } constructor(props: any) { @@ -58,17 +54,13 @@ class Sidebar extends React.Component { } private registerUpdateListener(node: q.TreeNode) { - node.on(q.TreeNodeUpdateEvents.merge, this.updateNode) - node.on(q.TreeNodeUpdateEvents.message, this.updateNode) + node.onMerge.subscribe(this.updateNode) + node.onMessage.subscribe(this.updateNode) } private removeUpdateListener(node: q.TreeNode) { - node.removeListener(q.TreeNodeUpdateEvents.merge, this.updateNode) - node.removeListener(q.TreeNodeUpdateEvents.message, this.updateNode) - } - - private open(): boolean { - return true + node.onMerge.unsubscribe(this.updateNode) + node.onMessage.unsubscribe(this.updateNode) } public render() { diff --git a/app/src/components/Sidebar/ValueRenderer.tsx b/app/src/components/Sidebar/ValueRenderer.tsx index 425a9ca..6af089e 100644 --- a/app/src/components/Sidebar/ValueRenderer.tsx +++ b/app/src/components/Sidebar/ValueRenderer.tsx @@ -13,23 +13,18 @@ interface State { } class ValueRenderer extends React.Component { - private updateNode: (node?: q.TreeNode | undefined) => void + private updateNode: () => void constructor(props: any) { super(props) this.state = {} - this.updateNode = (node) => { - if (!node) { - this.setState(this.state) - } else { - this.setState({ node }) - } + this.updateNode = () => { + this.setState(this.state) } } public componentWillReceiveProps(nextProps: Props) { - this.props.node && this.props.node.removeListener('update', this.updateNode) - nextProps.node && nextProps.node.on('update', this.updateNode) - nextProps.node && this.updateNode(nextProps.node) + this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode) + nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode) } private style = (theme: Theme) => { diff --git a/app/src/components/Tree/TreeNode.tsx b/app/src/components/Tree/TreeNode.tsx index 5673639..7c1edda 100644 --- a/app/src/components/Tree/TreeNode.tsx +++ b/app/src/components/Tree/TreeNode.tsx @@ -57,15 +57,17 @@ class TreeNode extends React.Component { } public componentDidMount() { - this.props.treeNode.on(q.TreeNodeUpdateEvents.merge, this.subnodesDidchange) - this.props.treeNode.on(q.TreeNodeUpdateEvents.edges, this.edgesDidChange) - this.props.treeNode.on(q.TreeNodeUpdateEvents.message, this.messageDidChange) + const { treeNode } = this.props + treeNode.onMerge.subscribe(this.subnodesDidchange) + treeNode.onEdgesChange.subscribe(this.edgesDidChange) + treeNode.onMessage.subscribe(this.messageDidChange) } public componentWillUnmount() { - this.props.treeNode.removeListener(q.TreeNodeUpdateEvents.merge, this.subnodesDidchange) - this.props.treeNode.removeListener(q.TreeNodeUpdateEvents.edges, this.edgesDidChange) - this.props.treeNode.removeListener(q.TreeNodeUpdateEvents.message, this.messageDidChange) + const { treeNode } = this.props + treeNode.onMerge.unsubscribe(this.subnodesDidchange) + treeNode.onEdgesChange.unsubscribe(this.edgesDidChange) + treeNode.onMessage.unsubscribe(this.messageDidChange) } private getStyles() { diff --git a/backend/src/Model/TreeNode.ts b/backend/src/Model/TreeNode.ts index 29d7872..ec2a458 100644 --- a/backend/src/Model/TreeNode.ts +++ b/backend/src/Model/TreeNode.ts @@ -1,22 +1,18 @@ import { Edge, Message } from './' -import { EventEmitter } from 'events' +import { EventDispatcher } from '../../../events' -export enum TreeNodeUpdateEvents { - edges = 'edges', - message = 'message', - merge = 'merge', -} - -export class TreeNode extends EventEmitter { +export class TreeNode { public sourceEdge?: Edge public message?: Message public edges: {[s: string]: Edge} = {} public collapsed = false public messages: number = 0 - constructor(sourceEdge?: Edge, message?: Message) { - super() + public onMerge = new EventDispatcher(this) + public onEdgesChange = new EventDispatcher(this) + public onMessage = new EventDispatcher(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() } } } diff --git a/backend/src/Model/index.ts b/backend/src/Model/index.ts index 049c5e6..14977e0 100644 --- a/backend/src/Model/index.ts +++ b/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'