src/client/views/nodes/FaceRectangles.tsx


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 { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, DocListCast } from '../../../fields/Doc';
import { Id } from '../../../fields/FieldSymbols';
import { Cast, NumCast } from '../../../fields/Types';
import FaceRectangle from './FaceRectangle';

interface FaceRectanglesProps {
    document: Doc;
    color: string;
    backgroundColor: string;
}

export interface RectangleTemplate {
    id: string;
    style: Partial<React.CSSProperties>;
}

@observer
export 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>
        );
    }
}