bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/whiteboard/annotation-group/component.jsx
Oleksandr Zhurbenko d5f07a574c Fixed publishShape message for 4 common shapes
Line, Rectangle, Triangle, Ellipse
2017-08-18 19:47:31 -07:00

75 lines
1.9 KiB
JavaScript
Executable File

import React from 'react';
import PropTypes from 'prop-types';
import Ellipse from '../annotations/ellipse/component';
import Line from '../annotations/line/component';
import Poll from '../annotations/poll/component';
import Rectangle from '../annotations/rectangle/component';
import Text from '../annotations/text/container';
import Triangle from '../annotations/triangle/component';
import Pencil from '../annotations/pencil/component';
export default class AnnotationGroup extends React.Component {
constructor(props) {
super(props);
this.renderAnnotation = this.renderAnnotation.bind(this);
}
renderAnnotation(annotation, width, height) {
const Component = this.props.annotationSelector[annotation.annotationType];
if (Component != null) {
return (
<Component
key={annotation.id}
version={annotation.version}
annotation={annotation.annotationInfo}
slideWidth={width}
slideHeight={height}
/>
);
}
return null;
}
render() {
const {
annotations,
width,
height,
} = this.props;
return (
<g>
{annotations ?
annotations.map(annotation => this.renderAnnotation(annotation, width, height))
: null }
</g>
);
}
}
AnnotationGroup.propTypes = {
// initial width and height of the slide are required
// to calculate the coordinates for each annotation
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
// array of annotations, optional
annotations: PropTypes.arrayOf(PropTypes.object),
annotationSelector: PropTypes.objectOf(PropTypes.instanceOf(Function)).isRequired,
};
AnnotationGroup.defaultProps = {
annotationSelector: {
ellipse: Ellipse,
line: Line,
poll_result: Poll,
rectangle: Rectangle,
text: Text,
triangle: Triangle,
pencil: Pencil,
},
};