aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/FaceRectangle.tsx
diff options
context:
space:
mode:
authorTyler Schicke <tyler_schicke@brown.edu>2019-07-23 21:54:53 -0400
committerTyler Schicke <tyler_schicke@brown.edu>2019-07-23 21:54:53 -0400
commit7f9e4de6e4b5d06535c5dfc93afa707a355a353d (patch)
tree6b0aca07562cf80aea0f7c66258ffeee1fccfc31 /src/client/views/nodes/FaceRectangle.tsx
parent35b1450709c751ae9782f60140d31718fed8146d (diff)
parent86971952237b8bd01a23b52db662740126bd8477 (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.tsx29
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