diff options
author | Tyler Schicke <tyler_schicke@brown.edu> | 2019-07-23 21:54:53 -0400 |
---|---|---|
committer | Tyler Schicke <tyler_schicke@brown.edu> | 2019-07-23 21:54:53 -0400 |
commit | 7f9e4de6e4b5d06535c5dfc93afa707a355a353d (patch) | |
tree | 6b0aca07562cf80aea0f7c66258ffeee1fccfc31 /src/client/views/nodes/FaceRectangle.tsx | |
parent | 35b1450709c751ae9782f60140d31718fed8146d (diff) | |
parent | 86971952237b8bd01a23b52db662740126bd8477 (diff) |
Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web
Diffstat (limited to 'src/client/views/nodes/FaceRectangle.tsx')
-rw-r--r-- | src/client/views/nodes/FaceRectangle.tsx | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/src/client/views/nodes/FaceRectangle.tsx b/src/client/views/nodes/FaceRectangle.tsx new file mode 100644 index 000000000..887efc0d5 --- /dev/null +++ b/src/client/views/nodes/FaceRectangle.tsx @@ -0,0 +1,29 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import { observable, runInAction } from "mobx"; +import { RectangleTemplate } from "./FaceRectangles"; + +@observer +export default class FaceRectangle extends React.Component<{ rectangle: RectangleTemplate }> { + @observable private opacity = 0; + + componentDidMount() { + setTimeout(() => runInAction(() => this.opacity = 1), 500); + } + + render() { + let rectangle = this.props.rectangle; + return ( + <div + style={{ + ...rectangle.style, + opacity: this.opacity, + transition: "1s ease opacity", + position: "absolute", + borderRadius: 5 + }} + /> + ); + } + +}
\ No newline at end of file |