77 lines
1.7 KiB
JavaScript
77 lines
1.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { withTracker } from 'meteor/react-meteor-data';
|
|
import CursorService from './service';
|
|
import Cursor from './component';
|
|
|
|
|
|
class CursorContainer extends Component {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
labelBoxWidth: 0,
|
|
labelBoxHeight: 0,
|
|
};
|
|
this.setLabelBoxDimensions = this.setLabelBoxDimensions.bind(this);
|
|
}
|
|
|
|
setLabelBoxDimensions(labelBoxWidth, labelBoxHeight) {
|
|
this.setState({
|
|
labelBoxWidth,
|
|
labelBoxHeight,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { cursorX, cursorY } = this.props;
|
|
const { labelBoxWidth, labelBoxHeight } = this.state;
|
|
|
|
if (cursorX > 0 && cursorY > 0) {
|
|
return (
|
|
<Cursor
|
|
cursorX={cursorX}
|
|
cursorY={cursorY}
|
|
labelBoxWidth={labelBoxWidth}
|
|
labelBoxHeight={labelBoxHeight}
|
|
setLabelBoxDimensions={this.setLabelBoxDimensions}
|
|
{...this.props}
|
|
/>
|
|
);
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
|
|
|
|
export default withTracker((params) => {
|
|
const { cursorId } = params;
|
|
|
|
const cursor = CursorService.getCurrentCursor(cursorId);
|
|
|
|
if (cursor) {
|
|
const { xPercent: cursorX, yPercent: cursorY, userName } = cursor;
|
|
const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
|
|
return {
|
|
cursorX,
|
|
cursorY,
|
|
userName,
|
|
isRTL,
|
|
};
|
|
}
|
|
|
|
return {
|
|
cursorX: -1,
|
|
cursorY: -1,
|
|
userName: '',
|
|
};
|
|
})(CursorContainer);
|
|
|
|
|
|
CursorContainer.propTypes = {
|
|
// Defines the 'x' coordinate for the cursor, in percentages of the slide's width
|
|
cursorX: PropTypes.number.isRequired,
|
|
|
|
// Defines the 'y' coordinate for the cursor, in percentages of the slide's height
|
|
cursorY: PropTypes.number.isRequired,
|
|
};
|