299 lines
8.8 KiB
JavaScript
299 lines
8.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
export default class Cursor extends Component {
|
|
|
|
static scale(attribute, widthRatio, physicalWidthRatio) {
|
|
return ((attribute * widthRatio) / 100) / physicalWidthRatio;
|
|
}
|
|
|
|
static invertScale(attribute, widthRatio, physicalWidthRatio) {
|
|
return ((attribute * physicalWidthRatio) * 100) / widthRatio;
|
|
}
|
|
|
|
static getCursorCoordinates(cursorX, cursorY, slideWidth, slideHeight) {
|
|
// main cursor x and y coordinates
|
|
const x = (cursorX / 100) * slideWidth;
|
|
const y = (cursorY / 100) * slideHeight;
|
|
|
|
return {
|
|
x,
|
|
y,
|
|
};
|
|
}
|
|
|
|
static getFillAndLabel(presenter, isMultiUser) {
|
|
const obj = {
|
|
fill: 'green',
|
|
displayLabel: false,
|
|
};
|
|
|
|
if (presenter) {
|
|
obj.fill = 'red';
|
|
}
|
|
|
|
if (isMultiUser) {
|
|
obj.displayLabel = true;
|
|
}
|
|
|
|
return obj;
|
|
}
|
|
|
|
static getScaledSizes(props) {
|
|
const scaleFactor = props.widthRatio / 100 / props.physicalWidthRatio;
|
|
|
|
return {
|
|
// Adjust the radius of the cursor according to zoom
|
|
// and divide it by the physicalWidth ratio, so that svg scaling wasn't applied to the cursor
|
|
finalRadius: props.radius * scaleFactor,
|
|
// scaling the properties for cursorLabel and the border (rect) around it
|
|
cursorLabelText: {
|
|
textDY: props.cursorLabelText.textDY * scaleFactor,
|
|
textDX: props.cursorLabelText.textDX * scaleFactor,
|
|
fontSize: props.cursorLabelText.fontSize * scaleFactor,
|
|
},
|
|
cursorLabelBox: {
|
|
xOffset: props.cursorLabelBox.xOffset * scaleFactor,
|
|
yOffset: props.cursorLabelBox.yOffset * scaleFactor,
|
|
// making width and height a little bit larger than the size of the text
|
|
// received from BBox, so that the text didn't touch the border
|
|
width: (props.labelBoxWidth + 3) * scaleFactor,
|
|
height: (props.labelBoxHeight + 3) * scaleFactor,
|
|
strokeWidth: props.cursorLabelBox.labelBoxStrokeWidth * scaleFactor,
|
|
},
|
|
};
|
|
}
|
|
|
|
componentWillMount() {
|
|
const { cursorX, cursorY, slideWidth, slideHeight, presenter, isMultiUser } = this.props;
|
|
|
|
// setting the initial cursor info
|
|
this.scaledSizes = Cursor.getScaledSizes(this.props);
|
|
this.cursorCoordinate = Cursor.getCursorCoordinates(
|
|
cursorX,
|
|
cursorY,
|
|
slideWidth,
|
|
slideHeight,
|
|
);
|
|
|
|
const { fill, displayLabel } = Cursor.getFillAndLabel(presenter, isMultiUser);
|
|
this.fill = fill;
|
|
this.displayLabel = displayLabel;
|
|
}
|
|
|
|
componentDidMount() {
|
|
// we need to find the BBox of the text, so that we could set a proper border box arount it
|
|
this.calculateCursorLabelBoxDimensions();
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
const {
|
|
presenter,
|
|
isMultiUser,
|
|
widthRatio,
|
|
physicalWidthRatio,
|
|
labelBoxWidth,
|
|
labelBoxHeight,
|
|
cursorX,
|
|
cursorY,
|
|
} = this.props;
|
|
|
|
if (presenter !== nextProps.presenter || isMultiUser !== nextProps.isMultiUser) {
|
|
const { fill, displayLabel } = Cursor.getFillAndLabel(
|
|
nextProps.presenter,
|
|
nextProps.isMultiUser,
|
|
);
|
|
this.displayLabel = displayLabel;
|
|
this.fill = fill;
|
|
}
|
|
|
|
if ((widthRatio !== nextProps.widthRatio ||
|
|
physicalWidthRatio !== nextProps.physicalWidthRatio)
|
|
||
|
|
(labelBoxWidth !== nextProps.labelBoxWidth ||
|
|
labelBoxHeight !== nextProps.labelBoxHeight)) {
|
|
this.scaledSizes = Cursor.getScaledSizes(nextProps);
|
|
}
|
|
|
|
if (cursorX !== nextProps.cursorX || cursorY !== nextProps.cursorY) {
|
|
const cursorCoordinate = Cursor.getCursorCoordinates(
|
|
nextProps.cursorX,
|
|
nextProps.cursorY,
|
|
nextProps.slideWidth,
|
|
nextProps.slideHeight,
|
|
);
|
|
this.cursorCoordinate = cursorCoordinate;
|
|
}
|
|
}
|
|
|
|
// this function retrieves the text node, measures its BBox and sets the size for the outer box
|
|
calculateCursorLabelBoxDimensions() {
|
|
let labelBoxWidth = 0;
|
|
let labelBoxHeight = 0;
|
|
|
|
if (this.cursorLabelRef) {
|
|
const { width, height } = this.cursorLabelRef.getBBox();
|
|
const { widthRatio, physicalWidthRatio } = this.props;
|
|
|
|
labelBoxWidth = Cursor.invertScale(width, widthRatio, physicalWidthRatio);
|
|
labelBoxHeight = Cursor.invertScale(height, widthRatio, physicalWidthRatio);
|
|
|
|
// if the width of the text node is bigger than the maxSize - set the width to maxWidth
|
|
if (labelBoxWidth > this.props.cursorLabelBox.maxWidth) {
|
|
labelBoxWidth = this.props.cursorLabelBox.maxWidth;
|
|
}
|
|
}
|
|
|
|
// updating labelBoxWidth and labelBoxHeight in the container, which then passes it down here
|
|
this.props.setLabelBoxDimensions(labelBoxWidth, labelBoxHeight);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
cursorCoordinate,
|
|
fill,
|
|
} = this;
|
|
|
|
const { cursorLabelBox, cursorLabelText, finalRadius } = this.scaledSizes;
|
|
|
|
const x = cursorCoordinate.x;
|
|
const y = cursorCoordinate.y;
|
|
const boxX = x + cursorLabelBox.xOffset;
|
|
const boxY = y + cursorLabelBox.yOffset;
|
|
|
|
return (
|
|
<g
|
|
x={x}
|
|
y={y}
|
|
>
|
|
<circle
|
|
cx={x}
|
|
cy={y}
|
|
r={finalRadius}
|
|
fill={fill}
|
|
fillOpacity="0.6"
|
|
/>
|
|
{this.displayLabel ?
|
|
<g>
|
|
<rect
|
|
fill="white"
|
|
fillOpacity="0.8"
|
|
x={boxX}
|
|
y={boxY}
|
|
width={cursorLabelBox.width}
|
|
height={cursorLabelBox.height}
|
|
strokeWidth={cursorLabelBox.strokeWidth}
|
|
stroke={fill}
|
|
strokeOpacity="0.8"
|
|
/>
|
|
<text
|
|
ref={(ref) => { this.cursorLabelRef = ref; }}
|
|
x={x}
|
|
y={y}
|
|
dy={cursorLabelText.textDY}
|
|
dx={cursorLabelText.textDX}
|
|
fontFamily="Arial"
|
|
fontWeight="600"
|
|
fill={fill}
|
|
fillOpacity="0.8"
|
|
fontSize={cursorLabelText.fontSize}
|
|
clipPath={`url(#${this.props.cursorId})`}
|
|
>
|
|
{this.props.userName}
|
|
</text>
|
|
<clipPath id={this.props.cursorId}>
|
|
<rect
|
|
x={boxX}
|
|
y={boxY}
|
|
width={cursorLabelBox.width}
|
|
height={cursorLabelBox.height}
|
|
/>
|
|
</clipPath>
|
|
</g>
|
|
: null }
|
|
</g>
|
|
);
|
|
}
|
|
}
|
|
|
|
Cursor.propTypes = {
|
|
// ESLint can't detect where all these propTypes are used, and they are not planning to fix it
|
|
// so the next line disables eslint's no-unused-prop-types rule for this file.
|
|
/* eslint-disable react/no-unused-prop-types */
|
|
|
|
// Current presenter status
|
|
presenter: PropTypes.bool.isRequired,
|
|
// Current multi-user status
|
|
isMultiUser: PropTypes.bool.isRequired,
|
|
|
|
// Defines the id of the current cursor
|
|
cursorId: PropTypes.string.isRequired,
|
|
|
|
// Defines the user name for the cursor label
|
|
userName: PropTypes.string.isRequired,
|
|
|
|
// Defines the cursor x position
|
|
cursorX: PropTypes.number.isRequired,
|
|
|
|
// Defines the cursor y position
|
|
cursorY: PropTypes.number.isRequired,
|
|
|
|
// Slide to view box width ratio
|
|
widthRatio: PropTypes.number.isRequired,
|
|
|
|
// Slide physical size to original size ratio
|
|
physicalWidthRatio: PropTypes.number.isRequired,
|
|
|
|
/**
|
|
* Defines the cursor radius (not scaled)
|
|
* @defaultValue 5
|
|
*/
|
|
radius: PropTypes.number.isRequired,
|
|
|
|
cursorLabelBox: PropTypes.shape({
|
|
labelBoxStrokeWidth: PropTypes.number.isRequired,
|
|
xOffset: PropTypes.number.isRequired,
|
|
yOffset: PropTypes.number.isRequired,
|
|
maxWidth: PropTypes.number.isRequired,
|
|
}),
|
|
cursorLabelText: PropTypes.shape({
|
|
textDY: PropTypes.number.isRequired,
|
|
textDX: PropTypes.number.isRequired,
|
|
fontSize: PropTypes.number.isRequired,
|
|
}),
|
|
|
|
// Defines the width of the label box
|
|
labelBoxWidth: PropTypes.number.isRequired,
|
|
// Defines the height of the label box
|
|
labelBoxHeight: PropTypes.number.isRequired,
|
|
|
|
// Defines the function, which sets the state for the label box and passes it back down
|
|
// we need it, since we need to render the text first -> measure its dimensions ->
|
|
// set proper width and height of the border box -> pass it down ->
|
|
// catch in the 'componentWillReceiveProps' -> apply new values
|
|
setLabelBoxDimensions: PropTypes.func.isRequired,
|
|
};
|
|
|
|
Cursor.defaultProps = {
|
|
radius: 5,
|
|
|
|
cursorLabelText: {
|
|
// text Y shift (10 points down)
|
|
textDY: 10,
|
|
// text X shift (10 points to the right)
|
|
textDX: 10,
|
|
// Initial label's font-size
|
|
fontSize: 12,
|
|
},
|
|
cursorLabelBox: {
|
|
// The thickness of the label box's border
|
|
labelBoxStrokeWidth: 1,
|
|
// X offset of the label box (8 points to the right)
|
|
xOffset: 8,
|
|
// Y offset of the label box (-2 points up)
|
|
yOffset: -2,
|
|
// Maximum width of the box, for the case when the user's name is too long
|
|
maxWidth: 65,
|
|
},
|
|
};
|