82 lines
1.6 KiB
JavaScript
Executable File
82 lines
1.6 KiB
JavaScript
Executable File
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const propTypes = {
|
|
// Width of the view box
|
|
viewBoxWidth: PropTypes.number.isRequired,
|
|
|
|
// Height of the view box
|
|
viewBoxHeight: PropTypes.number.isRequired,
|
|
|
|
// x Position of the view box
|
|
viewBoxX: PropTypes.number.isRequired,
|
|
|
|
// y Position of the view box
|
|
viewBoxY: PropTypes.number.isRequired,
|
|
|
|
// Slide to view box width ratio
|
|
widthRatio: PropTypes.number.isRequired,
|
|
|
|
// Defines the cursor x position
|
|
cursorX: PropTypes.number.isRequired,
|
|
|
|
// Defines the cursor y position
|
|
cursorY: PropTypes.number.isRequired,
|
|
|
|
/**
|
|
* Defines the cursor fill colour
|
|
* @defaultValue 'red'
|
|
*/
|
|
fill: PropTypes.string,
|
|
|
|
/**
|
|
* Defines the cursor radius
|
|
* @defaultValue 5
|
|
*/
|
|
radius: PropTypes.number,
|
|
};
|
|
|
|
const defaultProps = {
|
|
fill: 'red',
|
|
radius: 5,
|
|
};
|
|
|
|
export default class Cursor extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
viewBoxWidth,
|
|
viewBoxHeight,
|
|
viewBoxX,
|
|
viewBoxY,
|
|
widthRatio,
|
|
cursorX,
|
|
cursorY,
|
|
fill,
|
|
radius,
|
|
} = this.props;
|
|
|
|
// Adjust the x,y cursor position according to zoom
|
|
const cx = (cursorX * viewBoxWidth) + viewBoxX;
|
|
const cy = (cursorY * viewBoxHeight) + viewBoxY;
|
|
|
|
// Adjust the radius of the cursor according to zoom
|
|
const finalRadius = radius * widthRatio / 100;
|
|
|
|
return (
|
|
<circle
|
|
cx={cx}
|
|
cy={cy}
|
|
r={finalRadius}
|
|
fill={fill}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
Cursor.propTypes = propTypes;
|
|
Cursor.defaultProps = defaultProps;
|