From 269061bdc853c17397fc6bbafcca23675a16927b Mon Sep 17 00:00:00 2001 From: Thomas Nordquist Date: Tue, 8 Jan 2019 23:58:24 +0100 Subject: [PATCH] Work in progress --- app/src/components/Settings.tsx | 4 +- app/src/components/Tree/Tree.tsx | 18 ++++--- app/src/components/Tree/TreeNode.tsx | 52 +++++++++++--------- app/src/components/Tree/TreeNodeSubnodes.tsx | 2 + backend/src/Model/TreeNode.ts | 8 +++ 5 files changed, 53 insertions(+), 31 deletions(-) diff --git a/app/src/components/Settings.tsx b/app/src/components/Settings.tsx index f5847d9..639c32b 100644 --- a/app/src/components/Settings.tsx +++ b/app/src/components/Settings.tsx @@ -118,9 +118,7 @@ class Settings extends React.Component { } displayEmpty={true} diff --git a/app/src/components/Tree/Tree.tsx b/app/src/components/Tree/Tree.tsx index 4cb4c58..dd36f2c 100644 --- a/app/src/components/Tree/Tree.tsx +++ b/app/src/components/Tree/Tree.tsx @@ -54,7 +54,6 @@ class Tree extends React.Component { this.updateTimer = setTimeout(() => { window.requestAnimationFrame(() => { - console.log('doRender') this.lastUpdate = performance.now() this.updateTimer && clearTimeout(this.updateTimer) this.updateTimer = undefined @@ -97,12 +96,19 @@ class Tree extends React.Component { } public render() { + console.log('render called') + const style: React.CSSProperties = { lineHeight: '1.1', cursor: 'default', } - return + const performanceCallback = (ms: number) => { + average.push(Date.now(), ms) + } + + return ( + { name="/" collapsed={false} key="rootNode" - performanceCallback={(ms: number) => { - average.push(Date.now(), ms) - }} + lastUpdate={0} + performanceCallback={this.performanceCallback} /> - + + ) } } diff --git a/app/src/components/Tree/TreeNode.tsx b/app/src/components/Tree/TreeNode.tsx index b061052..a4474c1 100644 --- a/app/src/components/Tree/TreeNode.tsx +++ b/app/src/components/Tree/TreeNode.tsx @@ -29,6 +29,7 @@ const styles = (theme: Theme) => { } interface Props { + lastUpdate: number animateChages: boolean isRoot?: boolean treeNode: q.TreeNode @@ -48,6 +49,7 @@ class TreeNode extends React.Component { private dirtySubnodes: boolean = true private dirtyEdges: boolean = true private dirtyMessage: boolean = true + private animationDirty: boolean = false private cssAnimationWasSetAt?: number @@ -103,6 +105,7 @@ class TreeNode extends React.Component { || this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes + || this.animationDirty || shouldRenderToRemoveCssAnimation } @@ -111,6 +114,12 @@ class TreeNode extends React.Component { const renderTime = performance.now() - this.willUpdateTime this.props.performanceCallback(renderTime) } + // setTimeout(() => { + // this.setState(this.state) + // }, 500) + // this.addCssAnimation() + // setTimeout(this.removeCssAnimation, 500) + } public componentWillUpdate() { @@ -131,18 +140,36 @@ class TreeNode extends React.Component { return this.props.treeNode.edgeCount() > this.props.autoExpandLimit } + // private addCssAnimation = () => { + // const element = this.titleRef.current + // if ((this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes) && element && isElementInViewport(element)) { + // element.style.animation = 'example 0.5s' + // } + // } + // + // private removeCssAnimation = () => { + // const element = this.titleRef.current + // if (element && element.style.animation) { + // element.style.animation = '' + // } + // } + public render() { - const animationStyle = this.indicatingChangeAnimationStyle() 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 + const animation = shouldStartAnimation ? { animation: 'example 0.5s' } : {} + this.animationDirty = shouldStartAnimation + return (
- + { autoExpandLimit={this.props.autoExpandLimit} didSelectNode={this.props.didSelectNode} treeNode={this.props.treeNode} + lastUpdate={this.props.treeNode.lastUpdate} /> ) } - - private indicatingChangeAnimationStyle(): React.CSSProperties { - if (this.props.isRoot) { - return {} - } - if (this.cssAnimationWasSetAt && (performance.now() - this.cssAnimationWasSetAt) > 500) { - this.cssAnimationWasSetAt = undefined - return {} - } - const isInViewPort = this.titleRef.current && isElementInViewport(this.titleRef.current) - const isDirty = this.dirtyMessage || this.dirtyEdges - if (this.props.animateChages && isDirty && isInViewPort) { - if (!this.cssAnimationWasSetAt) { - this.cssAnimationWasSetAt = performance.now() - } - return { animation: 'example 0.5s' } - } - - return {} - } } export default withStyles(styles)(TreeNode) diff --git a/app/src/components/Tree/TreeNodeSubnodes.tsx b/app/src/components/Tree/TreeNodeSubnodes.tsx index 3f3cad5..6c9a1e0 100644 --- a/app/src/components/Tree/TreeNodeSubnodes.tsx +++ b/app/src/components/Tree/TreeNodeSubnodes.tsx @@ -7,6 +7,7 @@ import { AppState, NodeOrder } from '../../reducers' import TreeNode from './TreeNode' export interface Props { + lastUpdate: number nodeOrder?: NodeOrder animateChanges: boolean treeNode: q.TreeNode @@ -54,6 +55,7 @@ class TreeNodeSubnodes extends React.Component { treeNode={node} didSelectNode={this.props.didSelectNode} autoExpandLimit={this.props.autoExpandLimit} + lastUpdate={node.lastUpdate} />
)) diff --git a/backend/src/Model/TreeNode.ts b/backend/src/Model/TreeNode.ts index 36a48df..d167e8b 100644 --- a/backend/src/Model/TreeNode.ts +++ b/backend/src/Model/TreeNode.ts @@ -7,6 +7,7 @@ export class TreeNode { public edges: {[s: string]: Edge} = {} public collapsed = false public messages: number = 0 + public lastUpdate: number = Date.now() public onMerge = new EventDispatcher(this) public onEdgesChange = new EventDispatcher(this) @@ -24,6 +25,13 @@ export class TreeNode { this.onMerge.subscribe(() => { this.cachedLeafes = undefined this.cachedLeafMessageCount = undefined + this.lastUpdate = Date.now() + }) + this.onEdgesChange.subscribe(() => { + this.lastUpdate = Date.now() + }) + this.onMessage.subscribe(() => { + this.lastUpdate = Date.now() }) }