luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use less subscribers for TreeNode updates

Browse Source
This commit is contained in:
Thomas Nordquist
2019-04-09 01:38:48 +02:00
parent 4598977b61
commit 9a65e79fc4
1 changed files with 2 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/src/components/Tree/TreeNode.tsx
View File

@@ -71,9 +71,6 @@ interface State {
} }
class TreeNode extends React.Component<Props, State> { class TreeNode extends React.Component<Props, State> {
private dirtySubnodes: boolean = true
private dirtyEdges: boolean = true
private dirtyMessage: boolean = true
private animationDirty: boolean = false private animationDirty: boolean = false
private cssAnimationWasSetAt?: number private cssAnimationWasSetAt?: number
@@ -95,24 +92,9 @@ class TreeNode extends React.Component<Props, State> {
} }
} }
private subnodesDidchange = () => {
this.dirtySubnodes = true
}
private messageDidChange = () => {
this.dirtyMessage = true
}
private edgesDidChange = () => {
this.dirtyMessage = true
}
private addSubscriber(treeNode: q.TreeNode<TopicViewModel>) { private addSubscriber(treeNode: q.TreeNode<TopicViewModel>) {
treeNode.viewModel = new TopicViewModel() treeNode.viewModel = new TopicViewModel()
treeNode.viewModel.change.subscribe(this.viewStateHasChanged) treeNode.viewModel.change.subscribe(this.viewStateHasChanged)
treeNode.onMerge.subscribe(this.subnodesDidchange)
treeNode.onEdgesChange.subscribe(this.edgesDidChange)
treeNode.onMessage.subscribe(this.messageDidChange)
} }
private viewStateHasChanged = (msg: void, viewModel: TopicViewModel) => { private viewStateHasChanged = (msg: void, viewModel: TopicViewModel) => {
@@ -122,9 +104,6 @@ class TreeNode extends React.Component<Props, State> {
private removeSubscriber(treeNode: q.TreeNode<TopicViewModel>) { private removeSubscriber(treeNode: q.TreeNode<TopicViewModel>) {
treeNode.viewModel && treeNode.viewModel.change.unsubscribe(this.viewStateHasChanged) treeNode.viewModel && treeNode.viewModel.change.unsubscribe(this.viewStateHasChanged)
treeNode.viewModel = undefined treeNode.viewModel = undefined
treeNode.onMerge.unsubscribe(this.subnodesDidchange)
treeNode.onEdgesChange.unsubscribe(this.edgesDidChange)
treeNode.onMessage.unsubscribe(this.messageDidChange)
} }
private stateHasChanged(newState: State) { private stateHasChanged(newState: State) {
@@ -211,7 +190,7 @@ class TreeNode extends React.Component<Props, State> {
const shouldRenderToRemoveCssAnimation = this.cssAnimationWasSetAt !== undefined const shouldRenderToRemoveCssAnimation = this.cssAnimationWasSetAt !== undefined
return this.stateHasChanged(nextState) return this.stateHasChanged(nextState)
|| this.props.settings !== nextProps.settings || this.props.settings !== nextProps.settings
|| (this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes) || (this.props.lastUpdate !== nextProps.lastUpdate)
|| this.animationDirty || this.animationDirty
|| shouldRenderToRemoveCssAnimation || shouldRenderToRemoveCssAnimation
} }
@@ -231,10 +210,8 @@ class TreeNode extends React.Component<Props, State> {
public render() { public render() {
const { classes } = this.props const { classes } = this.props
const isDirty = this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes
this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot && this.props.settings.get('highlightTopicUpdates') const shouldStartAnimation = (!this.animationDirty) && !this.props.isRoot && this.props.settings.get('highlightTopicUpdates')
const animationName = this.props.theme.palette.type === 'light' ? 'updateLight' : 'updateDark' const animationName = this.props.theme.palette.type === 'light' ? 'updateLight' : 'updateDark'
const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: `${animationName} 0.5s` } : {} const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: `${animationName} 0.5s` } : {}
this.animationDirty = shouldStartAnimation this.animationDirty = shouldStartAnimation