124 lines
3.8 KiB
JavaScript
Executable File
124 lines
3.8 KiB
JavaScript
Executable File
import React, { PropTypes } from 'react';
|
|
import WhiteboardShapeModel from './shape-factory/component.jsx';
|
|
import Cursor from './cursor/component.jsx';
|
|
import SlideControlsContainer from './slide-controls/container.jsx'; //I added
|
|
import { createContainer } from 'meteor/react-meteor-data';
|
|
import Slide from './slide/component.jsx';
|
|
import styles from './styles.scss';
|
|
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
|
import PollingContainer from '/imports/ui/components/polling/container';
|
|
|
|
export default class Whiteboard extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
renderWhiteboard() {
|
|
let slideObj = this.props.currentSlide;
|
|
|
|
if (this.props.currentSlide) {
|
|
slideObj = this.props.currentSlide.slide;
|
|
let x = -slideObj.x_offset * 2 * slideObj.width / 100;
|
|
let y = -slideObj.y_offset * 2 * slideObj.height / 100;
|
|
let viewBoxWidth = slideObj.width * slideObj.width_ratio / 100;
|
|
let viewBoxHeight = slideObj.height * slideObj.height_ratio / 100;
|
|
return (
|
|
<ReactCSSTransitionGroup
|
|
transitionName={ {
|
|
enter: styles.enter,
|
|
enterActive: styles.enterActive,
|
|
appear: styles.appear,
|
|
appearActive: styles.appearActive,
|
|
} }
|
|
transitionAppear={true}
|
|
transitionEnter={true}
|
|
transitionLeave={false}
|
|
transitionAppearTimeout={400}
|
|
transitionEnterTimeout={400}
|
|
transitionLeaveTimeout={400}
|
|
>
|
|
<svg
|
|
viewBox={`${x} ${y} ${viewBoxWidth} ${viewBoxHeight}`}
|
|
version="1.1"
|
|
|
|
//it's supposed to be here in theory
|
|
//but now it's ignored by all the browsers and it's not supported by React
|
|
//xmlNS="http://www.w3.org/2000/svg"
|
|
className={styles.svgStyles}
|
|
key={slideObj.id}
|
|
>
|
|
<defs>
|
|
<clipPath id="viewBox">
|
|
<rect x={x} y={y} width="100%" height="100%" fill="none"/>
|
|
</clipPath>
|
|
</defs>
|
|
<g clipPath="url(#viewBox)">
|
|
<Slide id="slideComponent" currentSlide={this.props.currentSlide}/>
|
|
{this.props.shapes ? this.props.shapes.map((shape) =>
|
|
<WhiteboardShapeModel
|
|
shape={shape.shape}
|
|
key={shape.shape.id}
|
|
slideWidth = {slideObj.width}
|
|
slideHeight = {slideObj.height}
|
|
widthRatio={slideObj.width_ratio}
|
|
heightRatio={slideObj.height_ratio}
|
|
/>
|
|
)
|
|
: null }
|
|
{this.props.cursor ?
|
|
<Cursor
|
|
viewBoxWidth={viewBoxWidth}
|
|
viewBoxHeight={viewBoxHeight}
|
|
viewBoxX={x}
|
|
viewBoxY={y}
|
|
widthRatio={slideObj.width_ratio}
|
|
cursorX={this.props.cursor.x}
|
|
cursorY={this.props.cursor.y}
|
|
/>
|
|
: null }
|
|
</g>
|
|
</svg>
|
|
</ReactCSSTransitionGroup>
|
|
);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
renderSlideControlsContainer() {
|
|
if (this.props.currentSlide) {
|
|
return (
|
|
<SlideControlsContainer
|
|
currentSlideNum={this.props.currentSlide.slide.num}
|
|
presentationId={this.props.currentSlide.presentationId}
|
|
/>
|
|
);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className={styles.whiteboardContainer}>
|
|
<div className={styles.whiteboardWrapper}>
|
|
<div className={styles.whiteboardPaper}>
|
|
{this.renderWhiteboard()}
|
|
</div>
|
|
</div>
|
|
<PollingContainer />
|
|
{this.renderSlideControlsContainer()}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Whiteboard.defaultProps = {
|
|
svgProps: {
|
|
|
|
},
|
|
svgStyle: {
|
|
|
|
},
|
|
};
|