Index: /js/human_3d_alignment/src/widgets/fitviewer.jsx =================================================================== --- /js/human_3d_alignment/src/widgets/fitviewer.jsx (revision 911) +++ /js/human_3d_alignment/src/widgets/fitviewer.jsx (revision 912) @@ -116,16 +116,21 @@ this.createThirdRow = this.createThirdRow.bind(this); this.createFourthRow = this.createFourthRow.bind(this); - this.select = this.select.bind(this); - } - - select(e) { + this.selectLetter = this.selectLetter.bind(this); + this.selectNumber = this.selectNumber.bind(this); + } + + selectNumber(e) { let item = null; let index; + let type = 0; + for (let i = 0; i < this.props.parts1; i++) { let index2 = (i+1).toString(); + let itemRow1 = document.querySelector('#rowField1'); let itemD = document.querySelector('#creature' + index2); let itemP = document.querySelector('#p' + index2); - if (e.target === itemD || e.target === itemP) { + if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow1) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow1)) { + type = 1; item = null; index = index2; @@ -134,94 +139,16 @@ } - for (let i = 0; i < this.props.parts2; i++) { - let index2 = ''; - if (i + 1 + 64 > 90) { - index2 = String.fromCharCode(i + 1 + 70); - } else { - index2 = String.fromCharCode(i + 1 + 64); - } - let itemD = document.querySelector('#creature' + index2); - let itemP = document.querySelector('#p' + index2); - if (e.target === itemD || e.target === itemP) { - item = null; - index = index2; - item = document.querySelector('#creature' + index); - } - } - if (this.state.choosed != ' ') { - if (!item) { - if (!isNaN(this.state.choosed)) { - for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) { - let index2 = (i+1).toString(); - let itemD = document.querySelector('#field1-' + index2); - - - if (e.target === itemD) { - let index3 = this.props.selected1.indexOf(this.state.choosed); - - if (index3 > -1) { - this.props.handleChangeSelected(1, index3, ' '); - } - this.props.handleChangeSelected(1, i, this.state.choosed); - } - } - } else { - for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) { - let index2 = (i+1).toString(); - let itemD = document.querySelector('#field2-' + index2); - - - if (e.target === itemD) { - - let temp = this.state.choosed; - if (this.state.choosed.charCodeAt(0) > 90) { - temp = String.fromCharCode(temp.charCodeAt(0) - 6); - } - - let index3 = this.props.selected2.indexOf(temp); - - if (index3 > -1) { - this.props.handleChangeSelected(2, index3, ' '); - } - this.props.handleChangeSelected(2, i, this.state.choosed); - } - } - } + if (type == 0) { this.setState({ choosed: ' ' }, function() { console.log(this.state.choosed); }); - - } else { - let item2 = document.querySelector('#creature' + this.state.choosed); - if ((item.parentNode.parentNode.parentNode.className == 'rowField' || item.parentNode.parentNode.parentNode.className == 'rowBench') && - (item2.parentNode.parentNode.parentNode.className == 'rowField' || item2.parentNode.parentNode.parentNode.className == 'rowBench')) { - let nr = 0; - let index1 = 0; - let index2 = 0; - let temp = this.state.choosed; - if (this.state.choosed.charCodeAt(0) > 90) { - temp = String.fromCharCode(temp.charCodeAt(0) - 6); - } - if (!isNaN(this.state.choosed)) { - nr = 1; - index1 = this.props.selected1.indexOf(this.state.choosed); - index2 = this.props.selected1.indexOf(index); - } else { - nr = 2; - let temp1 = this.state.choosed; - let temp2 = index; - if (this.state.choosed.charCodeAt(0) > 90) { - temp1 = String.fromCharCode(temp1.charCodeAt(0) - 6); - } - if (index.charCodeAt(0) > 90) { - temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6); - } - - index1 = this.props.selected2.indexOf(temp); - index2 = this.props.selected2.indexOf(temp2); - } - this.props.handleChangeSelected(nr, index1, index); - this.props.handleChangeSelected(nr, index2, this.state.choosed); + } else { + if (!isNaN(this.state.choosed)) { + let index1 = this.props.selected1.indexOf(index.toString()); + let index2 = this.props.selected1.indexOf(this.state.choosed); + + this.props.handleChangeSelected(1, index1, this.state.choosed); + this.props.handleChangeSelected(1, index2, index.toString()); this.setState({ choosed: ' ' }, function() { @@ -229,37 +156,10 @@ }); } else { - if (item.parentNode.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode || - item.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode.parentNode) { - let nr = 0; - let index1 = 0; - let index2 = 0; - if (!isNaN(this.state.choosed)) { - nr = 1; - index1 = this.props.selected1.indexOf(this.state.choosed); - index2 = this.props.selected1.indexOf(index); - } else { - nr = 2; - let temp = this.state.choosed; - let temp2 = index; - if (this.state.choosed.charCodeAt(0) > 90) { - temp = String.fromCharCode(temp.charCodeAt(0) - 6); - } - if (index.charCodeAt(0) > 90) { - temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6); - } - index1 = this.props.selected2.indexOf(temp); - index2 = this.props.selected2.indexOf(temp2); - } - this.props.handleChangeSelected(nr, index1, index); - this.props.handleChangeSelected(nr, index2, this.state.choosed); - this.setState({ choosed: ' ' }, function() { - console.log(this.state.choosed); - }); - } else { - this.setState({ choosed: index }, function() { - console.log(this.state.choosed); - }); - } - } + this.setState({ choosed: index }, function() { + console.log(this.state.choosed); + }); + } + + } } else { @@ -269,4 +169,109 @@ }); } + } + } + + selectLetter(e) { + let index; + let indexL; + + let type = 0; + + for (let i = 0; i < this.props.parts2; i++) { + let index2 = ''; + if (i + 1 + 64 > 90) { + index2 = String.fromCharCode(i + 1 + 70); + } else { + index2 = String.fromCharCode(i + 1 + 64); + } + let itemRow2 = document.querySelector('#rowCreature2'); + let itemD = document.querySelector('#creature' + index2); + let itemP = document.querySelector('#p' + index2); + + if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow2) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow2) || + (e.target === itemD && e.target.parentNode.parentNode.parentNode.parentNode === itemRow2) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode.parentNode == itemRow2)) { + type = 1; + index = index2; + indexL = index2; + if (indexL.charCodeAt(0) > 90) { + indexL = String.fromCharCode(indexL.charCodeAt(0) - 6); + } + } + } + + if (this.state.choosed != ' ') { + if (type == 0) { + for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) { + let index2 = (i+1).toString(); + let itemD = document.querySelector('#field2-' + index2); + + if (e.target === itemD) { + let temp = this.state.choosed; + if (this.state.choosed.charCodeAt(0) > 90) { + temp = String.fromCharCode(temp.charCodeAt(0) - 6); + } + + let index3 = this.props.selected2.indexOf(temp); + + if (index3 > -1) { + this.props.handleChangeSelected(2, index3, ' '); + } + this.props.handleChangeSelected(2, i, this.state.choosed); + } + + } + + this.setState({ choosed: ' ' }, function() { + console.log(this.state.choosed); + }); + } else { + if (isNaN(this.state.choosed)) { + + let temp = this.state.choosed; + if (temp.charCodeAt(0) > 90) { + temp = String.fromCharCode(temp.charCodeAt(0) - 6); + } + + if (indexL == temp) { + this.setState({ choosed: ' ' }, function() { + console.log(this.state.choosed); + }); + } else { + let index1 = this.props.selected2.indexOf(indexL); + let index2 = this.props.selected2.indexOf(temp); + + if (index1 > -1 && index2 > -1) { + this.props.handleChangeSelected(2, index1, this.state.choosed); + this.props.handleChangeSelected(2, index2, index); + this.setState({ choosed: ' ' }, function() { + console.log(this.state.choosed); + }); + } else if (index1 > -1 && index2 <= -1) { + this.props.handleChangeSelected(2, index1, this.state.choosed); + this.setState({ choosed: ' ' }, function() { + console.log(this.state.choosed); + }); + } else if (index1 <= -1 && index2 > -1) { + this.props.handleChangeSelected(2, index2, indexL); + this.setState({ choosed: ' ' }, function() { + console.log(this.state.choosed); + }); + } else { + this.setState({ choosed: index }, function() { + console.log(this.state.choosed); + }); + } + } + } else { + this.setState({ choosed: index }, function() { + console.log(this.state.choosed); + }); + } + } + + } else { + this.setState({ choosed: index }, function() { + console.log(this.state.choosed); + }); } } @@ -285,5 +290,5 @@
@@ -302,5 +307,5 @@
@@ -316,5 +321,5 @@
@@ -369,5 +374,5 @@
@@ -383,5 +388,5 @@
@@ -429,5 +434,5 @@
@@ -460,15 +465,15 @@ -