text: var React = require('react');var ReactDOM = require('react-dom');var ImageMapper = require('../../src/ImageMapper'); import { Router, browserHistory } from 'react-router';var MAP ={	name: 'my-map',	areas:[		{'name':'BJ-1000004-C2' , href:'#BJ-1000004-C2', shape: 'rect', coords: [17,53,64,89], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-C1' , href:'#BJ-1000004-C1', shape: 'rect', coords: [97,52,140,88], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-A2' , href:'#BJ-1000004-A2', shape: 'rect', coords: [266,346,300,379], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-C4' , href:'#BJ-1000004-C4', shape: 'rect', coords: [97,107,144,145], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-VIP2' , href:'#BJ-1000004-VIP2', shape: 'rect', coords: [42,182,96,240], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-A1' , href:'#BJ-1000004-A1', shape: 'rect', coords: [219,346,254,375], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-C3' , href:'#BJ-1000004-C3', shape: 'rect', coords: [15,106,63,145], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-A8' , href:'#BJ-1000004-A8', shape: 'rect', coords: [268,274,306,303], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-A7' , href:'#BJ-1000004-A7', shape: 'rect', coords: [316,275,351,302], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-A9' , href:'#BJ-1000004-A9', shape: 'rect', coords: [222,276,258,304], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-A4' , href:'#BJ-1000004-A4', shape: 'rect', coords: [353,346,393,376], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-A3' , href:'#BJ-1000004-A3', shape: 'rect', coords: [309,346,347,375], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-A6' , href:'#BJ-1000004-A6', shape: 'rect', coords: [359,275,394,304], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , {'name':'BJ-1000004-A5' , href:'#BJ-1000004-A5', shape: 'rect', coords: [409,234,467,260], alwaysOn:true , preFillColor: 'rgba(0,255,0, .2)'} , 			]};var URL = 'http://199.180.133.121/imagemap/layoutimage/1000004.png'; var App = React.createClass({	getInitialState() {		return { hoveredArea: null, msg: null, moveMsg: null };	},	load() {		this.setState({ msg: 'Interact with image !' }); 	},		clicked(area) {		this.setState({ msg: `You clicked on ${area.href} at coords ${JSON.stringify(area.coords)} !`});			},	clickedOutside(evt) {		const coords = {x: evt.nativeEvent.layerX, y: evt.nativeEvent.layerY };		this.setState({ msg: `You clicked on the image at coords ${JSON.stringify(coords)} !` });	},	moveOnImage(evt) {		const coords = {x: evt.nativeEvent.layerX, y: evt.nativeEvent.layerY };		this.setState({ moveMsg: `You moved on the image at coords ${JSON.stringify(coords)} !` });	},	enterArea(area) {		this.setState({ hoveredArea: area, msg: `You entered ${area.shape} ${area.name} at coords ${JSON.stringify(area.coords)} !` });	},	leaveArea(area) {		this.setState({ hoveredArea: null, msg: `You leaved ${area.shape} ${area.name} at coords ${JSON.stringify(area.coords)} !` });	},	moveOnArea(area, evt) {		const coords = {x: evt.nativeEvent.layerX, y: evt.nativeEvent.layerY };		this.setState({ moveMsg: `You moved on ${area.shape} ${area.name} at coords ${JSON.stringify(coords)} !` });	},	getTipPosition(area) {		return { top: `${area.center[1]}px`, left: `${area.center[0]}px` };	},	render () {		return (						<div className='grid'>			<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>				<div className="presenter">					<div style={{ position: 'relative' }}>						<ImageMapper src={URL} map={MAP} 							onLoad={() => this.load()}							onClick={area => this.clicked(area)}							onMouseEnter={area => this.enterArea(area)}							onMouseLeave={area => this.leaveArea(area)}							onMouseMove={(area, _, evt) => this.moveOnArea(area, evt)}							onImageClick={evt => this.clickedOutside(evt)}							onImageMouseMove={evt => this.moveOnImage(evt)}						/>										</div> 									</div>						</div>		);	}});ReactDOM.render(<App />, document.getElementById('app'));