blob: 3c7f1f206f482f286d81d9337aa08995c720645c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
import React = require("react");
import { Doc, DocListCast } from "../../../new_fields/Doc";
import { Cast, NumCast } from "../../../new_fields/Types";
import { observer } from "mobx-react";
import { Id } from "../../../new_fields/FieldSymbols";
import FaceRectangle from "./FaceRectangle";
interface FaceRectanglesProps {
document: Doc;
color: string;
backgroundColor: string;
}
export interface RectangleTemplate {
id: string;
style: Partial<React.CSSProperties>;
}
@observer
export default class FaceRectangles extends React.Component<FaceRectanglesProps> {
render() {
const faces = DocListCast(this.props.document.faces);
const templates: RectangleTemplate[] = faces.map(faceDoc => {
const rectangle = Cast(faceDoc.faceRectangle, Doc) as Doc;
const style = {
top: NumCast(rectangle.top),
left: NumCast(rectangle.left),
width: NumCast(rectangle.width),
height: NumCast(rectangle.height),
backgroundColor: `${this.props.backgroundColor}33`,
border: `solid 2px ${this.props.color}`,
} as React.CSSProperties;
return {
id: rectangle[Id],
style: style
};
});
return (
<div>
{templates.map(rectangle => <FaceRectangle key={rectangle.id} rectangle={rectangle} />)}
</div>
);
}
}
|
