<commit_before>require('normalize.css/normalize.css');
require('styles/App.scss');

import React from 'react';
import ReactDOM from 'react-dom'

// 获取照片数据，并进行url预处理
let imageDatas = require('json!../data/imageDatas.json');
imageDatas = (function(imageDatasArr){
	for(var i = 0, len = imageDatasArr.length; i < len; i++) {
		var singleImageData = imageDatasArr[i];
		singleImageData.imageURL = require('../images/' + singleImageData.fileName);
		imageDatasArr[i] = singleImageData;
	}

	return imageDatasArr;
})(imageDatas);

// 获取区间随机值
function getRandomNum(min, max) {
	return Math.floor(Math.random() * (max - min) + min);
}

// 获取0-30°的正负旋转值
function get30RandomDeg() {
	return (Math.random() > 0.5 ? '' : '-') + Math.floor(Math.random() * 30);
}

// 照片组件
class ImgFigure extends React.Component {
	constructor(props) {
	    super(props);
	    this.handleClick = this.handleClick.bind(this);
	}

	//点击处理函数
	handleClick(e) {
		if(this.props.arrange.isCenter) {
			this.props.inverse();
		} else {
			this.props.center();
		}

		e.stopPropagation();
		e.preventDefault();
	}

	render() {
		var styleObj = {};

		if(this.props.arrange.pos) {
			styleObj = this.props.arrange.pos;
		}

		if(this.props.arrange.rotate) {
			(['WebkitTransform', 'MozTransform', 'msTransform', 'OTransform', 'transform']).forEach(function(value) {
				styleObj[value] = 'rotate(' + this.props.arrange.rotate + 'deg)';
			}.bind(this));
		}

		if(this.props.arrange.isCenter) {
			styleObj['zIndex'] = 11;
		}

		var imgFigureClassName = 'img-figure';
		imgFigureClassName += this.props.arrange.isInverse ? ' is-inverse' : '';

		return (
			<figure className={imgFigureClassName} style={styleObj} onClick={this.handleClick}>
				<img src={this.props.data.imageURL} alt={this.props.data.fileName}/>
				<figcaption>
					<h2 className="img-title">{this.props.data.title}</h2>
				</figcaption>
				<div className="img-back" onClick={this.handleClick}>
					<p>{this.props.data.desc}</p>
				</div>
			</figure>
		);
	}
}

// 控制条组件
class ControllerUnit extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return (
			<span className="controller-unit"></span>
		);
	}
}

class AppComponent extends React.Component {
  constructor(props) {
    super(props);

    // 画廊舞台分区位置初始化
    this.Constant = {
	  	centerPos: {  //中心图片位置点
	  		left: 0,
	  		top: 0
	  	},
	  	hPosRange: {  // 水平方向左右分区取值范围
	  		leftSecX: [0, 0],  // 左分区
	  		rightSecX: [0, 0],  // 右分区
	  		y: [0, 0]
	  	},
	  	vPosRange: {  // 垂直方向上分区的取值范围
	  		x: [0, 0],
	  		topY: [0, 0]
	  	}
    };

    this.state = {
    	imgsArrangeArr: [
    		// {
    		// 	pos: {
    		// 		left: '0',
    		// 		top: '0'
    		// 	},
    		// 	rotate: 0,
    		// 	isInverse: false,
    		// 	isCenter: false
    		// }
    	]
    }
  }

  /**
   * 居中图片
   * @param {num} index 需居中的图片
   * @return {Function}
   */
  center(index) {
  	return function() {
  		this.rearrange(index);
  	}.bind(this);
  }

  /**
   * 翻转图片
   * @param index, 需执行翻转的图片index
   * @return {Function}
   */
  inverse(index) {
  	return function() {
  		var imgsArrangeArr = this.state.imgsArrangeArr;
  		imgsArrangeArr[index].isInverse = !imgsArrangeArr[index].isInverse;

  		this.setState({
  			imgsArrangeArr: imgsArrangeArr
  		});

  	}.bind(this);
  }

  // 重新布局所有图片
  rearrange(centerIndex) {
  	var imgsArrangeArr = this.state.imgsArrangeArr,
  		Constant = this.Constant,
  		centerPos = Constant.centerPos,
  		hPosRange = Constant.hPosRange,
  		vPosRange = Constant.vPosRange,
  		hPosRangeLeftSecX = hPosRange.leftSecX,
  		hPosRangeRightSecX = hPosRange.rightSecX,
  		hPosRangeY = hPosRange.y,
  		vPosRangeTopY = vPosRange.topY,
  		vPosRangeX = vPosRange.x;

  	// 上分区图片, 0或1个
  	var imgsArrangeTopArr = [],
  		topImgNum = Math.floor(Math.random() * 2),
  		topImgSpliceIndex = 0;

  	// 居中图片的处理
  	var	imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex, 1);
  	imgsArrangeCenterArr[0] = {
  		pos: centerPos,
  		rotate: 0,
  		isCenter: true
  	}

  	//上分区图片的处理
  	topImgSpliceIndex = Math.floor(Math.random() * (imgsArrangeArr.length - topImgNum));
  	imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum);

  	imgsArrangeTopArr.forEach(function(value, index) {
  		imgsArrangeTopArr[index] = {
  			pos: {
	  			left: getRandomNum(vPosRangeX[0], vPosRangeX[1]),
	  			top: getRandomNum(vPosRangeTopY[0], vPosRangeTopY[1])
	  		},
	  		rotate: get30RandomDeg(),
	  		isCenter: false
  		}
  	});

  	//左右分区图片的处理
  	for(var i = 0, len = imgsArrangeArr.length, mid = len / 2; i < len; i ++) {
  		var hPosRangeLORX = null;

  		if(i < mid) {
  			hPosRangeLORX = hPosRangeLeftSecX;
  		} else {
  			hPosRangeLORX = hPosRangeRightSecX;
  		}

  		imgsArrangeArr[i] = {
  			pos: {
	  			left: getRandomNum(hPosRangeLORX[0], hPosRangeLORX[1]),
	  			top: getRandomNum(hPosRangeY[0], hPosRangeY[1])
	  		},
	  		rotate: get30RandomDeg(),
	  		isCenter: false
  		}
  	}
  	

  	// 将之前取出的图片信息插回原序列
  	if(imgsArrangeTopArr && imgsArrangeTopArr[0]) {
  		imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]);
  	}
	imgsArrangeArr.splice(centerIndex, 0, imgsArrangeCenterArr[0]);

  	this.setState({
  		imgsArrangeArr : imgsArrangeArr
  	});
  }

  // 组件加载完成后，为每张图片计算相应位置
  componentDidMount() {
  	//获取舞台大小
  	var stageDOM = ReactDOM.findDOMNode(this.refs.stage),
  	  	stageW = stageDOM.scrollWidth,
  	  	stageH = stageDOM.scrollHeight,
  	  	halfStageW = Math.floor(stageW / 2),
  	  	halfStageH = Math.floor(stageH / 2);

    //获取imgFigure大小
    var imgFigureDOM = ReactDOM.findDOMNode(this.refs.imgFgure0),
    	imgW = imgFigureDOM.scrollWidth,
    	imgH = imgFigureDOM.scrollHeight,
    	halfImgW = Math.floor(imgW / 2),
    	halfImgH = Math.floor(imgH / 2);

    //计算中心图片位置
    this.Constant.centerPos.left = halfStageW - halfImgW;
    this.Constant.centerPos.top = halfStageH - halfImgH;

    //计算左右分区位置范围
    this.Constant.hPosRange.leftSecX[0] = -halfImgW;
    this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3;
    this.Constant.hPosRange.rightSecX[0] = halfStageW + halfImgW;
    this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW;
    this.Constant.hPosRange.y[0] = -halfImgH;
    this.Constant.hPosRange.y[1] = stageH - halfImgH;
    
    //计算上分区位置范围
    this.Constant.vPosRange.x[0] = halfStageW - imgW;
    this.Constant.vPosRange.x[1] = halfStageW;
    this.Constant.vPosRange.topY[0] = -halfImgH;
    this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3;

    this.rearrange(0);
  }

  render() {

  	var imgFigures =[],
  		controllerUnits = [];

  	imageDatas.forEach(function(value, index) {
  		if(! this.state.imgsArrangeArr[index]) {
  			// 为每个图片初始化位置到左上角
  			this.state.imgsArrangeArr[index] = {
  				pos: {
  					left: 0,
  					top: 0
  				},
  				rotate: 0,
  				isInverse: false,
  				isCenter: false
  			};
  		}

  		imgFigures.push(<ImgFigure data={value} ref={'imgFgure' + index} arrange={this.state.imgsArrangeArr[index]} inverse={this.inverse(index)} center={this.center(index)}/>);
  		controllerUnits.push(<ControllerUnit />)
  	}.bind(this));

    return (
      <section className="stage" ref="stage">
      	<section className="img-sec">
      		{imgFigures}
      	</section>
      	<nav className="controller-nav">
      		{controllerUnits}
      	</nav><commit_msg>add figure control<commit_after>require('normalize.css/normalize.css');
require('styles/App.scss');

import React from 'react';
import ReactDOM from 'react-dom'

// 获取照片数据，并进行url预处理
let imageDatas = require('json!../data/imageDatas.json');
imageDatas = (function(imageDatasArr){
	for(var i = 0, len = imageDatasArr.length; i < len; i++) {
		var singleImageData = imageDatasArr[i];
		singleImageData.imageURL = require('../images/' + singleImageData.fileName);
		imageDatasArr[i] = singleImageData;
	}

	return imageDatasArr;
})(imageDatas);

// 获取区间随机值
function getRandomNum(min, max) {
	return Math.floor(Math.random() * (max - min) + min);
}

// 获取0-30°的正负旋转值
function get30RandomDeg() {
	return (Math.random() > 0.5 ? '' : '-') + Math.floor(Math.random() * 30);
}

// 照片组件
class ImgFigure extends React.Component {
	constructor(props) {
	    super(props);
	    this.handleClick = this.handleClick.bind(this);
	}

	//点击处理函数
	handleClick(e) {
		if(this.props.arrange.isCenter) {
			this.props.inverse();
		} else {
			this.props.center();
		}

		e.stopPropagation();
		e.preventDefault();
	}

	render() {
		var styleObj = {};

		if(this.props.arrange.pos) {
			styleObj = this.props.arrange.pos;
		}

		if(this.props.arrange.rotate) {
			(['WebkitTransform', 'MozTransform', 'msTransform', 'OTransform', 'transform']).forEach(function(value) {
				styleObj[value] = 'rotate(' + this.props.arrange.rotate + 'deg)';
			}.bind(this));
		}

		if(this.props.arrange.isCenter) {
			styleObj['zIndex'] = 11;
		}

		var imgFigureClassName = 'img-figure';
		imgFigureClassName += this.props.arrange.isInverse ? ' is-inverse' : '';

		return (
			<figure className={imgFigureClassName} style={styleObj} onClick={this.handleClick}>
				<img src={this.props.data.imageURL} alt={this.props.data.fileName}/>
				<figcaption>
					<h2 className="img-title">{this.props.data.title}</h2>
				</figcaption>
				<div className="img-back" onClick={this.handleClick}>
					<p>{this.props.data.desc}</p>
				</div>
			</figure>
		);
	}
}

// 控制条组件
class ControllerUnit extends React.Component {
	constructor(props) {
		super(props);
		this.handleClick = this.handleClick.bind(this);
	}

	handleClick(e) {
		if(this.props.arrange.isCenter) {
			this.props.inverse();
		} else {
			this.props.center();
		}

		e.stopPropagation();
		e.preventDefault();
	}

	render() {
		var controllerUnitClassName = 'controller-unit';

		if(this.props.arrange.isCenter) {
			controllerUnitClassName += ' is-center';

			if(this.props.arrange.isInverse) {
				controllerUnitClassName += ' is-inverse';
			}
		}

		return (
			<span className={controllerUnitClassName} onClick={this.handleClick}></span>
		);
	}
}

class AppComponent extends React.Component {
  constructor(props) {
    super(props);

    // 画廊舞台分区位置初始化
    this.Constant = {
	  	centerPos: {  //中心图片位置点
	  		left: 0,
	  		top: 0
	  	},
	  	hPosRange: {  // 水平方向左右分区取值范围
	  		leftSecX: [0, 0],  // 左分区
	  		rightSecX: [0, 0],  // 右分区
	  		y: [0, 0]
	  	},
	  	vPosRange: {  // 垂直方向上分区的取值范围
	  		x: [0, 0],
	  		topY: [0, 0]
	  	}
    };

    this.state = {
    	imgsArrangeArr: [
    		// {
    		// 	pos: {
    		// 		left: '0',
    		// 		top: '0'
    		// 	},
    		// 	rotate: 0,
    		// 	isInverse: false,
    		// 	isCenter: false
    		// }
    	]
    }
  }

  /**
   * 居中图片
   * @param {num} index 需居中的图片
   * @return {Function}
   */
  center(index) {
  	return function() {
  		this.rearrange(index);
  	}.bind(this);
  }

  /**
   * 翻转图片
   * @param index, 需执行翻转的图片index
   * @return {Function}
   */
  inverse(index) {
  	return function() {
  		var imgsArrangeArr = this.state.imgsArrangeArr;
  		imgsArrangeArr[index].isInverse = !imgsArrangeArr[index].isInverse;

  		this.setState({
  			imgsArrangeArr: imgsArrangeArr
  		});

  	}.bind(this);
  }

  // 重新布局所有图片
  rearrange(centerIndex) {
  	var imgsArrangeArr = this.state.imgsArrangeArr,
  		Constant = this.Constant,
  		centerPos = Constant.centerPos,
  		hPosRange = Constant.hPosRange,
  		vPosRange = Constant.vPosRange,
  		hPosRangeLeftSecX = hPosRange.leftSecX,
  		hPosRangeRightSecX = hPosRange.rightSecX,
  		hPosRangeY = hPosRange.y,
  		vPosRangeTopY = vPosRange.topY,
  		vPosRangeX = vPosRange.x;

  	// 上分区图片, 0或1个
  	var imgsArrangeTopArr = [],
  		topImgNum = Math.floor(Math.random() * 2),
  		topImgSpliceIndex = 0;

  	// 居中图片的处理
  	var	imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex, 1);
  	imgsArrangeCenterArr[0] = {
  		pos: centerPos,
  		rotate: 0,
  		isCenter: true
  	}

  	//上分区图片的处理
  	topImgSpliceIndex = Math.floor(Math.random() * (imgsArrangeArr.length - topImgNum));
  	imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum);

  	imgsArrangeTopArr.forEach(function(value, index) {
  		imgsArrangeTopArr[index] = {
  			pos: {
	  			left: getRandomNum(vPosRangeX[0], vPosRangeX[1]),
	  			top: getRandomNum(vPosRangeTopY[0], vPosRangeTopY[1])
	  		},
	  		rotate: get30RandomDeg(),
	  		isCenter: false
  		}
  	});

  	//左右分区图片的处理
  	for(var i = 0, len = imgsArrangeArr.length, mid = len / 2; i < len; i ++) {
  		var hPosRangeLORX = null;

  		if(i < mid) {
  			hPosRangeLORX = hPosRangeLeftSecX;
  		} else {
  			hPosRangeLORX = hPosRangeRightSecX;
  		}

  		imgsArrangeArr[i] = {
  			pos: {
	  			left: getRandomNum(hPosRangeLORX[0], hPosRangeLORX[1]),
	  			top: getRandomNum(hPosRangeY[0], hPosRangeY[1])
	  		},
	  		rotate: get30RandomDeg(),
	  		isCenter: false
  		}
  	}
  	

  	// 将之前取出的图片信息插回原序列
  	if(imgsArrangeTopArr && imgsArrangeTopArr[0]) {
  		imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]);
  	}
	imgsArrangeArr.splice(centerIndex, 0, imgsArrangeCenterArr[0]);

  	this.setState({
  		imgsArrangeArr : imgsArrangeArr
  	});
  }

  // 组件加载完成后，为每张图片计算相应位置
  componentDidMount() {
  	//获取舞台大小
  	var stageDOM = ReactDOM.findDOMNode(this.refs.stage),
  	  	stageW = stageDOM.scrollWidth,
  	  	stageH = stageDOM.scrollHeight,
  	  	halfStageW = Math.floor(stageW / 2),
  	  	halfStageH = Math.floor(stageH / 2);

    //获取imgFigure大小
    var imgFigureDOM = ReactDOM.findDOMNode(this.refs.imgFgure0),
    	imgW = imgFigureDOM.scrollWidth,
    	imgH = imgFigureDOM.scrollHeight,
    	halfImgW = Math.floor(imgW / 2),
    	halfImgH = Math.floor(imgH / 2);

    //计算中心图片位置
    this.Constant.centerPos.left = halfStageW - halfImgW;
    this.Constant.centerPos.top = halfStageH - halfImgH;

    //计算左右分区位置范围
    this.Constant.hPosRange.leftSecX[0] = -halfImgW;
    this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3;
    this.Constant.hPosRange.rightSecX[0] = halfStageW + halfImgW;
    this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW;
    this.Constant.hPosRange.y[0] = -halfImgH;
    this.Constant.hPosRange.y[1] = stageH - halfImgH;
    
    //计算上分区位置范围
    this.Constant.vPosRange.x[0] = halfStageW - imgW;
    this.Constant.vPosRange.x[1] = halfStageW;
    this.Constant.vPosRange.topY[0] = -halfImgH;
    this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3;

    this.rearrange(0);
  }

  render() {

  	var imgFigures =[],
  		controllerUnits = [];

  	imageDatas.forEach(function(value, index) {
  		if(! this.state.imgsArrangeArr[index]) {
  			// 为每个图片初始化位置到左上角
  			this.state.imgsArrangeArr[index] = {
  				pos: {
  					left: 0,
  					top: 0
  				},
  				rotate: 0,
  				isInverse: false,
  				isCenter: false
  			};
  		}

  		imgFigures.push(<ImgFigure key={index} data={value} ref={'imgFgure' + index} arrange={this.state.imgsArrangeArr[index]} inverse={this.inverse(index)} center={this.center(index)}/>);
  		controllerUnits.push(<ControllerUnit key={index} arrange={this.state.imgsArrangeArr[index]} inverse={this.inverse(index)} center={this.center(index)}/>)
  	}.bind(this));

    return (
      <section className="stage" ref="stage">
      	<section className="img-sec">
      		{imgFigures}
      	</section>
      	<nav className="controller-nav">
      		{controllerUnits}
      	</nav>
{'fraction_non_alphanumeric': 0.1491785036329122, 'fraction_numerical': 0.009949597434051188, 'mean_word_length': 2.957005957005957, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7184087', 'n_tokens_mistral': 6733, 'n_tokens_neox': 6508, 'n_words': 873}