aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/FaceRectangle.tsx
diff options
context:
space:
mode:
authorEleanor Eng <eleanor_eng@brown.edu>2019-08-06 10:54:33 -0400
committerEleanor Eng <eleanor_eng@brown.edu>2019-08-06 10:54:33 -0400
commitb7194d88ba9733413063c7f371dedefd3a97e35f (patch)
tree418203fe1ee1f4aa0771c555ab672541cc775473 /src/client/views/nodes/FaceRectangle.tsx
parent2c4440be2807b3b1da691ea04b061c35e50ecb72 (diff)
parent298d1c9b29d6ce2171fd9ac8274b64583b73f6f5 (diff)
merge with master
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