Coordinate2DWidget

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';

import equals from 'mout/src/object/equals';

import style from 'PVWStyle/ReactWidgets/Coordinate2DWidget.mcss';

import MouseHandler from '../../../Interaction/Core/MouseHandler';

/*
CoordinateControl class
renders a canvas with a static and stationary crosshair
with two number inputs next to it
*/

function limitValue(val) {
return Math.max(-1.0, Math.min(val, 1.0));
}

export default class Coordinate2DWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
x: props.x,
y: props.y,
};

// Bind callback
this.updateCoordinates = this.updateCoordinates.bind(this);
this.updateX = this.updateX.bind(this);
this.updateY = this.updateY.bind(this);
this.pointerAction = this.pointerAction.bind(this);
this.drawControl = this.drawControl.bind(this);
this.drawControl = this.drawControl.bind(this);
this.drawPlus = this.drawPlus.bind(this);
}

componentDidMount() {
this.drawControl();
this.mouseHandler = new MouseHandler(this.canvas);
this.mouseHandler.attach({
click: this.pointerAction,
mousedown: this.pointerAction,
mouseup: this.pointerAction,
drag: this.pointerAction,
});
}

componentDidUpdate(nextProps, nextState) {
this.drawControl();
}

componentWillUnmount() {
this.mouseHandler.destroy();
}

coordinates() {
return { x: this.state.x, y: this.state.y };
}

updateCoordinates(coords) {
const newCoords = {};
let newVals = false;

['x', 'y'].forEach((el) => {
if ({}.hasOwnProperty.call(coords, el)) {
newCoords[el] = limitValue(parseFloat(coords[el]));
newVals = true;
}
});

if (newVals) {
this.setState(newCoords);
}
}

// no need to limit the values, for updateX/Y, the input already does that.
updateX(e) {
const newVal = parseFloat(e.target.value);
this.setState({ x: newVal });
}

updateY(e) {
const newVal = parseFloat(e.target.value);
this.setState({ y: newVal });
}

// covers clicks, mouseup/down, and drag.
pointerAction(e) {
const rect = this.canvas.getBoundingClientRect();
const x = e.pointers[0].clientX - rect.left - this.props.width / 2;
const y = -(e.pointers[0].clientY - rect.top - this.props.height / 2);
this.setState({
x: limitValue(x / (this.props.width / 2)),
y: limitValue(y / (this.props.height / 2)),
});
}

drawControl() {
const ctx = this.canvas.getContext('2d');
const height = ctx.canvas.height;
const width = ctx.canvas.width;

// clear
ctx.clearRect(0, 0, width, height);

// draw a lightgrey center plus
this.drawPlus('lightgrey');

// draw a plus at {this.state.x, this.state.y},

// convert the values to canvas coords before hand.
this.drawPlus('black', {
x: this.state.x * (this.props.width / 2),
y: -this.state.y * (this.props.height / 2),
});

if (this.props.onChange) {
const currentState = {
x: this.state.x,
y: this.state.y,
};
if (!equals(currentState, this.lastSharedState)) {
this.lastSharedState = currentState;
this.props.onChange(this.lastSharedState);
}
}
}

drawPlus(color, location_) {
const ctx = this.canvas.getContext('2d');
const height = ctx.canvas.height;
const width = ctx.canvas.width;
const lineLen = 5;
let location = location_;

if (location === undefined) {
location = {
x: width / 2,
y: height / 2,
};
} else {
location.x += this.props.width / 2;
location.y += this.props.height / 2;
}

// style
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = color;

// vert
ctx.moveTo(location.x, location.y - lineLen);
ctx.lineTo(location.x, location.y + lineLen);
ctx.stroke();

// horiz
ctx.moveTo(location.x - lineLen, location.y);
ctx.lineTo(location.x + lineLen, location.y);
ctx.stroke();
}

render() {
return (
<section className={style.container}>
<canvas
ref={(c) => {
this.canvas = c;
}}
className={style.canvas}
width={this.props.width}
height={this.props.height}
/>
<section
className={this.props.hideXY ? style.hidden : style.inputContainer}
>
<label className={style.inputLabel}> x: </label>
<input
className={style.input}
type="number"
onChange={this.updateX}
min="-1.0"
max="1.0"
step="0.01"
value={this.state.x}
/>
<br />
<label className={style.inputLabel}> y: </label>
<input
className={style.input}
type="number"
onChange={this.updateY}
min="-1.0"
max="1.0"
step="0.01"
value={this.state.y}
/>
</section>
</section>
);
}
}

Coordinate2DWidget.propTypes = {
height: PropTypes.number,
hideXY: PropTypes.bool,
onChange: PropTypes.func,
width: PropTypes.number,
x: PropTypes.number,
y: PropTypes.number,
};

Coordinate2DWidget.defaultProps = {
hideXY: false,
onChange: undefined,
width: 50,
height: 50,
x: 0,
y: 0,
};
test.js
import CoordinateControl from './index';
import expect from 'expect';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react/lib/ReactTestUtils';

class Mock extends React.Component {
constructor(props) {
super(props);
this.state = { x: 0, y: 0 };
this.updateCoords = this.updateCoords.bind(this);
}

updateCoords(newVals) {
this.setState({ x: newVals.x, y: newVals.y });
}

render() {
return <CoordinateControl onChange={this.updateCoords} />;
}
}

describe('CoordinateControl', function() {
afterEach(function(done) {
ReactDOM.unmountComponentAtNode(document.body);
document.body.innerHTML = '';
setTimeout(done);
});

function convertToCoord(val, size) {
return ((val * 2) / (size * 2) - 0.5) * 2;
}

it('has two inputs and a canvas', function() {
var el = TestUtils.renderIntoDocument(<CoordinateControl hideXY={false} />),
canvas = TestUtils.scryRenderedDOMComponentsWithTag(el, 'canvas'),
inputs = TestUtils.scryRenderedDOMComponentsWithTag(el, 'input');
expect(canvas.length).toBe(1);
expect(inputs.length).toBe(2);
expect(inputs[0].value).toBe(inputs[1].value);
});
it('can hide XY inputs', function() {
var el = TestUtils.renderIntoDocument(<CoordinateControl hideXY={true} />),
inputsContainer = TestUtils.findRenderedDOMComponentWithClass(
el,
'inputs'
);
expect(inputsContainer.classList.contains('is-hidden')).toBe(true);
});
it('keeps coordinate state and XY inputs in sync', function() {
var el = TestUtils.renderIntoDocument(<CoordinateControl />),
inputs = TestUtils.scryRenderedDOMComponentsWithTag(el, 'input'),
newXVal = 0.6,
newYVal = -0.45;
TestUtils.Simulate.change(inputs[0], { target: { value: newXVal } });
TestUtils.Simulate.change(inputs[1], { target: { value: newYVal } });

expect(el.coordinates()).toEqual({ x: newXVal, y: newYVal });
});
it('can update coordinates externally', function() {
var el = TestUtils.renderIntoDocument(
<CoordinateControl x={0.25} y={0.45} />
),
newXVal = -0.25,
newYVal = -0.45;

el.updateCoordinates({ x: newXVal, y: newYVal });
expect(el.coordinates()).toEqual({ x: newXVal, y: newYVal });
});
it('updates values when dragged', function() {
var size = 400,
el = TestUtils.renderIntoDocument(
<CoordinateControl x={0.25} y={0.45} width={size} height={size} />
),
canvas = TestUtils.findRenderedDOMComponentWithTag(el, 'canvas'),
newXVal = 100,
newYVal = 200;

el.mouseHandler.emit('drag', {
pointers: [{ clientX: newXVal, clientY: newYVal }],
});
expect(el.coordinates()).toEqual({
x: convertToCoord(newXVal, size),
y: -convertToCoord(newYVal, size),
});
});
it('triggers a given onChange function', function() {
var el = TestUtils.renderIntoDocument(<Mock />),
input = TestUtils.scryRenderedDOMComponentsWithTag(el, 'input')[0],
newXVal = 0.88;

TestUtils.Simulate.change(input, { target: { value: newXVal } });
expect(el.state.x).toEqual(newXVal);
});
it('takes a click on the canvas and updates it to state', function() {
var size = 400,
el = TestUtils.renderIntoDocument(
<CoordinateControl width={size} height={size} />
),
canvas = TestUtils.findRenderedDOMComponentWithTag(el, 'canvas'),
newXVal = 100,
newYVal = 200;
expect(canvas.width).toBe(size);
expect(canvas.height).toBe(size);

el.mouseHandler.emit('click', {
pointers: [{ clientX: newXVal, clientY: newYVal }],
});
expect(el.state.x).toBe(convertToCoord(newXVal, size));
expect(el.state.y).toBe(-convertToCoord(newYVal, size));

newXVal = 350;
newYVal = 120;
el.mouseHandler.emit('click', {
pointers: [{ clientX: newXVal, clientY: newYVal }],
});
expect(el.state.x).toBe(convertToCoord(newXVal, size));
expect(el.state.y).toBe(-convertToCoord(newYVal, size));
});
it('destroys listeners when removed', function() {
var el = TestUtils.renderIntoDocument(<CoordinateControl />);
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(el).parentNode);
expect(el.mouseHandler.hammer.element).toNotExist();
});
});