Context Navigation

fitviewer.jsx @ 945

Last change on this file since 945 was 912, checked in by Maciej Komosinski, 5 years ago
Attempt to fix upper-row tiles so they cannot be moved below
File size: 18.9 KB

Rev	Line
[911]	1	/global Module/
	2	"use strict";
	3
	4	import React from 'react';
	5
	6
	7	const styles = {
	8	header: {
	9	textAlign: 'center',
	10	letterSpacing: '5px',
	11	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
	12	webkitUserSelect : 'none',
	13	mozUserSelect: 'none',
	14	msUserSelect: 'none',
	15	userSelect: 'none'
	16	},
	17	creatureText: {
	18	margin: '0',
	19	position: 'absolute',
	20	top: '50%',
	21	left: '50%',
	22	marginRight: '-50%',
	23	transform: 'translate(-50%, -50%)',
	24	webkitUserSelect : 'none',
	25	mozUserSelect: 'none',
	26	msUserSelect: 'none',
	27	userSelect: 'none',
	28	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"
	29	},
	30	creatureBench: {
	31	position: 'relative',
	32	border: '2px solid black',
	33	color: 'white',
	34	backgroundColor: 'gray',
	35	width: '50px',
	36	height: '50px',
	37	fontSize: '30px',
	38	pointerEvent: 'none',
	39	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
	40	},
	41	creatureBench1: {
	42	position: 'relative',
	43	border: '2px solid black',
	44	color: 'white',
	45	backgroundColor: 'red',
	46	width: '50px',
	47	height: '50px',
	48	fontSize: '30px',
	49	pointerEvents: 'none',
	50	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
	51	},
	52	creatureBench2: {
	53	position: 'relative',
	54	border: '2px solid black',
	55	color: 'white',
	56	backgroundColor: 'blue',
	57	width: '50px',
	58	height: '50px',
	59	fontSize: '30px',
	60	pointerEvents: 'none',
	61	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
	62	},
	63	middleField:{
	64	position: 'relative',
	65	color: 'gray',
	66	backgroundColor: 'gray',
	67	width: '54px',
	68	height: '54px',
	69	webkitUserSelect: 'none',
	70	mozUserSelect: 'none',
	71	msUserSelect: 'none',
	72	userSelect: 'none'
	73	},
	74	emptyField: {
	75	display: 'table',
	76	width: '100%',
	77	height: '20px'
	78	},
	79	field: {
	80	display: 'flex'
	81	},
	82	empty: {
	83	webkitUserSelect : 'none',
	84	mozUserSelect: 'none',
	85	msUserSelect: 'none',
	86	userSelect: 'none'
	87	},
	88	cell: {
	89	display: 'table-cell'
	90	},
	91	row: {
	92	display: 'table-row',
	93	}
	94	};
	95
	96	/**
	97	* Component for assesing genotypes matching.
	98	*/
	99	class FitViewer extends React.Component {
	100	/**
	101	* Basic constructor.
	102	* @param {any} props properties of Component
	103	*/
	104	constructor(props) {
	105	super(props);
	106	this.props = props;
	107
	108	this.state = {
	109	height: 2,
	110	choosed: ' ',
	111	initialX: 0,
	112	initialY: 0
	113	}
	114
	115	this.createSecondRow = this.createSecondRow.bind(this);
	116	this.createThirdRow = this.createThirdRow.bind(this);
	117	this.createFourthRow = this.createFourthRow.bind(this);
[912]	118	this.selectLetter = this.selectLetter.bind(this);
	119	this.selectNumber = this.selectNumber.bind(this);
[911]	120	}
	121
[912]	122	selectNumber(e) {
[911]	123	let item = null;
	124	let index;
	125
[912]	126	let type = 0;
	127
[911]	128	for (let i = 0; i < this.props.parts1; i++) {
	129	let index2 = (i+1).toString();
[912]	130	let itemRow1 = document.querySelector('#rowField1');
[911]	131	let itemD = document.querySelector('#creature' + index2);
	132	let itemP = document.querySelector('#p' + index2);
[912]	133	if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow1) \|\| (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow1)) {
	134	type = 1;
[911]	135	item = null;
	136	index = index2;
	137	item = document.querySelector('#creature' + index);
	138	}
	139	}
	140
[912]	141	if (this.state.choosed != ' ') {
	142	if (type == 0) {
	143	this.setState({ choosed: ' ' }, function() {
	144	console.log(this.state.choosed);
	145	});
	146	} else {
	147	if (!isNaN(this.state.choosed)) {
	148	let index1 = this.props.selected1.indexOf(index.toString());
	149	let index2 = this.props.selected1.indexOf(this.state.choosed);
	150
	151	this.props.handleChangeSelected(1, index1, this.state.choosed);
	152	this.props.handleChangeSelected(1, index2, index.toString());
	153
	154	this.setState({ choosed: ' ' }, function() {
	155	console.log(this.state.choosed);
	156	});
	157	} else {
	158	this.setState({ choosed: index }, function() {
	159	console.log(this.state.choosed);
	160	});
	161	}
	162
	163
	164	}
	165	} else {
	166	if (item != null) {
	167	this.setState({ choosed: index }, function() {
	168	console.log(this.state.choosed);
	169	});
	170	}
	171	}
	172	}
	173
	174	selectLetter(e) {
	175	let index;
	176	let indexL;
	177
	178	let type = 0;
	179
[911]	180	for (let i = 0; i < this.props.parts2; i++) {
	181	let index2 = '';
	182	if (i + 1 + 64 > 90) {
	183	index2 = String.fromCharCode(i + 1 + 70);
	184	} else {
	185	index2 = String.fromCharCode(i + 1 + 64);
[912]	186	}
	187	let itemRow2 = document.querySelector('#rowCreature2');
[911]	188	let itemD = document.querySelector('#creature' + index2);
	189	let itemP = document.querySelector('#p' + index2);
[912]	190
	191	if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow2) \|\| (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow2) \|\|
	192	(e.target === itemD && e.target.parentNode.parentNode.parentNode.parentNode === itemRow2) \|\| (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode.parentNode == itemRow2)) {
	193	type = 1;
[911]	194	index = index2;
[912]	195	indexL = index2;
	196	if (indexL.charCodeAt(0) > 90) {
	197	indexL = String.fromCharCode(indexL.charCodeAt(0) - 6);
	198	}
[911]	199	}
	200	}
	201
	202	if (this.state.choosed != ' ') {
[912]	203	if (type == 0) {
	204	for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
	205	let index2 = (i+1).toString();
	206	let itemD = document.querySelector('#field2-' + index2);
[911]	207
[912]	208	if (e.target === itemD) {
	209	let temp = this.state.choosed;
	210	if (this.state.choosed.charCodeAt(0) > 90) {
	211	temp = String.fromCharCode(temp.charCodeAt(0) - 6);
[911]	212	}
	213
[912]	214	let index3 = this.props.selected2.indexOf(temp);
[911]	215
[912]	216	if (index3 > -1) {
	217	this.props.handleChangeSelected(2, index3, ' ');
[911]	218	}
[912]	219	this.props.handleChangeSelected(2, i, this.state.choosed);
[911]	220	}
[912]	221
[911]	222	}
[912]	223
[911]	224	this.setState({ choosed: ' ' }, function() {
	225	console.log(this.state.choosed);
	226	});
[912]	227	} else {
	228	if (isNaN(this.state.choosed)) {
[911]	229
	230	let temp = this.state.choosed;
[912]	231	if (temp.charCodeAt(0) > 90) {
[911]	232	temp = String.fromCharCode(temp.charCodeAt(0) - 6);
	233	}
	234
[912]	235	if (indexL == temp) {
[911]	236	this.setState({ choosed: ' ' }, function() {
	237	console.log(this.state.choosed);
	238	});
	239	} else {
[912]	240	let index1 = this.props.selected2.indexOf(indexL);
	241	let index2 = this.props.selected2.indexOf(temp);
	242
	243	if (index1 > -1 && index2 > -1) {
	244	this.props.handleChangeSelected(2, index1, this.state.choosed);
	245	this.props.handleChangeSelected(2, index2, index);
	246	this.setState({ choosed: ' ' }, function() {
	247	console.log(this.state.choosed);
	248	});
	249	} else if (index1 > -1 && index2 <= -1) {
	250	this.props.handleChangeSelected(2, index1, this.state.choosed);
	251	this.setState({ choosed: ' ' }, function() {
	252	console.log(this.state.choosed);
	253	});
	254	} else if (index1 <= -1 && index2 > -1) {
	255	this.props.handleChangeSelected(2, index2, indexL);
	256	this.setState({ choosed: ' ' }, function() {
	257	console.log(this.state.choosed);
	258	});
	259	} else {
	260	this.setState({ choosed: index }, function() {
	261	console.log(this.state.choosed);
	262	});
	263	}
[911]	264	}
[912]	265	} else {
	266	this.setState({ choosed: index }, function() {
	267	console.log(this.state.choosed);
	268	});
[911]	269	}
	270	}
[912]	271
[911]	272	} else {
[912]	273	this.setState({ choosed: index }, function() {
	274	console.log(this.state.choosed);
	275	});
[911]	276	}
	277	}
	278
	279	createSecondRow() {
	280	let row = []
	281	let len = Math.min(this.props.parts1, this.props.parts2);
	282	for (let i = 0; i < len; i++) {
	283	if (this.props.selected1[i] != ' ') {
	284	if (this.props.selected1[i] && this.state.choosed == this.props.selected1[i]) {
	285	row.push(
	286	<div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
	287	<div id={'field1-'+(i+1).toString()}
	288	className='field'
	289	style={styles.middleField}>
	290	<div id={'creature' + this.props.selected1[i]}
	291	className='creature1'
[912]	292	onMouseDown={this.selectNumber}
[911]	293	style={styles.creatureBench1}>
	294	<p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
	295	{this.props.selected1[i]}
	296	</p>
	297	</div>
	298	</div>
	299	</div>
	300	);
	301	} else {
	302	row.push(
	303	<div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
	304	<div id={'field1-'+(i+1).toString()}
	305	className='field'
	306	style={styles.middleField}>
	307	<div id={'creature' + this.props.selected1[i]}
	308	className='creature1'
[912]	309	onMouseDown={this.selectNumber}
[911]	310	style={styles.creatureBench}>
	311	<p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
	312	{this.props.selected1[i]}
	313	</p>
	314	</div>
	315	</div>
	316	</div>
	317	);
	318	}
	319	} else {
	320	row.push(
	321	<div id='cellnull' className='cell' style={styles.cell}>
	322	<div id={'field1-'+(i+1).toString()}
[912]	323	onMouseDown = {this.selectNumber}
[911]	324	className='field'
	325	style={styles.middleField}>
	326
	327	</div>
	328	</div>
	329	);
	330	}
	331	}
	332	if (row.length == 0) {
	333	row.push(
	334	<div style={styles.empty}> </div>
	335	);
	336	}
	337	return row;
	338	}
	339
	340	createThirdRow() {
	341	let row = [];
	342	let len = Math.min(this.props.parts1, this.props.parts2);
	343	for (let i = 0; i < len; i++) {
	344	if (this.props.selected2[i] && this.props.selected2[i] != ' ') {
	345	let value = this.props.selected2[i];
	346	let char = value.charCodeAt(0);
	347	if (char > 90) {
	348	char += 6;
	349	value = String.fromCharCode(char);
	350	}
	351	if (this.state.choosed == value) {
	352	row.push(
	353	<div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
	354	<div id={'field2-'+(i+1).toString()}
	355	className='field'
	356	style={styles.middleField}>
	357	<div id={'creature' + value}
	358	className='creature2'
[912]	359	onMouseDown={this.selectLetter}
[911]	360	style={styles.creatureBench2}>
	361	<p id={'p' + value} style={styles.creatureText}>
	362	{value}
	363	</p>
	364	</div>
	365	</div>
	366	</div>
	367	);
	368	} else {
	369	row.push(
	370	<div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
	371	<div id={'field2-'+(i+1).toString()}
	372	className='field'
	373	style={styles.middleField}>
	374	<div id={'creature' + value}
	375	className='creature2'
[912]	376	onMouseDown={this.selectLetter}
[911]	377	style={styles.creatureBench}>
	378	<p id={'p' + value} style={styles.creatureText}>
	379	{value}
	380	</p>
	381	</div>
	382	</div>
	383	</div>
	384	);
	385	}
	386	} else {
	387	row.push(
	388	<div id='cellnull' className='cell' style={styles.cell}>
	389	<div id={'field2-'+(i+1).toString()}
[912]	390	onMouseDown = {this.selectLetter}
[911]	391	className='field'
	392	style={styles.middleField}>
	393	</div>
	394	</div>
	395	);
	396	}
	397	}
	398	if (row.length == 0) {
	399	row.push(
	400	<div style={styles.empty}> </div>
	401	);
	402	}
	403	return row;
	404	}
	405
	406	createFourthRow() {
	407	let row = [];
	408	for (let i = 0; i < this.props.parts2; i++) {
	409	let idtext = '';
	410	let idtext1 = String.fromCharCode(i + 1 + 64);
	411	if (i + 1 + 64 >= 91) {
	412	idtext = String.fromCharCode(i + 1 + 70);
	413	} else {
	414	idtext = idtext1;
	415	}
	416
	417	if (this.props.selected2.indexOf(idtext1) < 0) {
	418	if (this.state.choosed == idtext) {
	419	row.push(
	420	<div id={'cell'+idtext} className='cell' style={styles.cell}>
	421	<div id={'creature' + idtext}
	422	className='creature2'
[912]	423	onMouseDown={this.selectLetter}
[911]	424	style={styles.creatureBench2}>
	425	<p id={'p' + idtext} style={styles.creatureText}>
	426	{idtext}
	427	</p>
	428	</div>
	429	</div>
	430	);
	431	} else {
	432	row.push(
	433	<div id={'cell'+idtext} className='cell' style={styles.cell}>
	434	<div id={'creature' + idtext}
	435	className='creature2'
[912]	436	onMouseDown={this.selectLetter}
[911]	437	style={styles.creatureBench}>
	438	<p id={'p' + idtext} style={styles.creatureText}>
	439	{idtext}
	440	</p>
	441	</div>
	442	</div>
	443	);
	444	}
	445	}
	446	}
	447	if (row.length == 0) {
	448	row.push(
	449	<div id='cellnull' className='cell' style={styles.cell}>
	450	<div style={styles.empty}> </div>
	451	</div>
	452	);
	453	}
	454	return row;
	455	}
	456
	457	render() {
	458	let h = ((this.props.fitHeight * 150 - 16) + 8 * (this.props.fitHeight - 1)).toString() + 'px';
	459	let w = ((this.props.fitWidth * 150 - 16) + 8 * (this.props.fitWidth - 1)).toString() + 'px';
	460
	461	return (
	462	<div id='fit' className='fit' onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}} style={{position: 'relative', width: w, height: h, whiteSpace: 'no-wrap', overflow: 'auto'}}>
	463	<h2 className='title' style={styles.header}>
	464	DOPASOWANIE
	465	</h2>
	466
[912]	467	<div key='rowsFields' className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
	468	<div id='rowCreature1' onMouseDown = {this.selectNumber}>
	469	<div id='rowField1' className='rowField' onMouseDown = {this.selectNumber} style={styles.row}>
[911]	470	{this.createSecondRow()}
	471	</div>
	472	</div>
[912]	473	<div id='rowCreature2' onMouseDown = {this.selectLetter}>
	474	<div id='rowField2' className='rowField' onMouseDown = {this.selectLetter} style={styles.row}>
[911]	475	{this.createThirdRow()}
	476	</div>
[912]	477	<div id='rowBench2' className='rowBench' onMouseDown = {this.selectLetter} style={styles.row}>
[911]	478	{this.createFourthRow()}
	479	</div>
	480	</div>
	481	</div>
	482	</div>
	483	);
	484	}
	485	}
	486
	487	export default FitViewer;

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format