Ignore:
Timestamp:
06/27/20 17:57:53 (4 years ago)
Author:
Maciej Komosinski
Message:

Improved layout, added one free-text question, properly counted the number of Parts in the Model instead of counting 'X' in the genotype

File:
1 edited

Legend:

Unmodified
Added
Removed

  • js/human_3d_alignment/src/widgets/fitviewer.jsx

    r912 r964  
    88    header: {
    99        textAlign: 'center',
     10        lineHeight: '0.1',
    1011        letterSpacing: '5px',
     12        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
     13        webkitUserSelect : 'none',
     14        mozUserSelect: 'none',
     15        msUserSelect: 'none',
     16        userSelect: 'none'
     17    },
     18        info: {
     19        textAlign: 'center',
     20        lineHeight: '0.1',
     21        fontSize: '10px',
    1122        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
    1223        webkitUserSelect : 'none',
    … …  
    116127        this.createThirdRow = this.createThirdRow.bind(this);
    117128        this.createFourthRow = this.createFourthRow.bind(this);
    118         this.selectLetter = this.selectLetter.bind(this);
    119         this.selectNumber = this.selectNumber.bind(this);
    120     }
    121 
    122     selectNumber(e) {
     129        this.select = this.select.bind(this);
     130    }
     131
     132    select(e) {
    123133        let item = null;
    124134        let index;
    125135
    126         let type = 0;
    127 
    128136        for (let i = 0; i < this.props.parts1; i++) {
    129137            let index2 = (i+1).toString();
    130             let itemRow1 =  document.querySelector('#rowField1');
    131138            let itemD = document.querySelector('#creature' + index2);
    132139            let itemP = document.querySelector('#p' + index2);
    133             if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow1) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow1)) {
    134                 type = 1;
     140            if (e.target === itemD || e.target === itemP) {
    135141                item = null;
    136142                index = index2;
    … …  
    138144            }
    139145        }
    140 
    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;
    179146
    180147        for (let i = 0; i < this.props.parts2; i++) {
    … …  
    184151            } else {
    185152                index2 = String.fromCharCode(i + 1 + 64);
    186             }
    187             let itemRow2 =  document.querySelector('#rowCreature2');
     153            }     
    188154            let itemD = document.querySelector('#creature' + index2);
    189155            let itemP = document.querySelector('#p' + index2);
    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;
     156            if (e.target === itemD || e.target === itemP) {
     157                item = null;
    194158                index = index2;
    195                 indexL = index2;
    196                 if (indexL.charCodeAt(0) > 90) {
    197                     indexL = String.fromCharCode(indexL.charCodeAt(0) - 6);
    198                 }
     159                item = document.querySelector('#creature' + index);
    199160            }
    200161        }
    201162
    202163        if (this.state.choosed != ' ') {
    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);
    207 
    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);
     164            if (!item) {
     165                if (!isNaN(this.state.choosed)) {
     166                    for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
     167                        let index2 = (i+1).toString();
     168                        let itemD =  document.querySelector('#field1-' + index2);
     169
     170                       
     171                        if (e.target === itemD) {
     172                            let index3 = this.props.selected1.indexOf(this.state.choosed);
     173
     174                            if (index3 > -1) {
     175                                this.props.handleChangeSelected(1, index3, ' ');
     176                            }
     177                            this.props.handleChangeSelected(1, i, this.state.choosed);
    212178                        }
    213 
    214                         let index3 = this.props.selected2.indexOf(temp);
    215 
    216                         if (index3 > -1) {
    217                             this.props.handleChangeSelected(2, index3, ' ');
     179                    }
     180                } else {
     181                    for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
     182                        let index2 = (i+1).toString();
     183                        let itemD =  document.querySelector('#field2-' + index2);
     184
     185                       
     186                        if (e.target === itemD) {
     187
     188                            let temp = this.state.choosed;
     189                            if (this.state.choosed.charCodeAt(0) > 90) {
     190                                temp = String.fromCharCode(temp.charCodeAt(0) - 6);
     191                            }
     192
     193                            let index3 = this.props.selected2.indexOf(temp);
     194
     195                            if (index3 > -1) {
     196                                this.props.handleChangeSelected(2, index3, ' ');
     197                            }
     198                            this.props.handleChangeSelected(2, i, this.state.choosed);
    218199                        }
    219                         this.props.handleChangeSelected(2, i, this.state.choosed);
    220200                    }
    221 
    222                 }
    223 
     201                }
    224202                this.setState({ choosed: ' ' }, function() {
    225203                    console.log(this.state.choosed);
    226204                });
     205
    227206            } else {
    228                 if (isNaN(this.state.choosed)) {
    229 
     207                let item2 = document.querySelector('#creature' + this.state.choosed);
     208                if ((item.parentNode.parentNode.parentNode.className == 'rowField' || item.parentNode.parentNode.parentNode.className == 'rowBench') &&
     209                    (item2.parentNode.parentNode.parentNode.className == 'rowField' || item2.parentNode.parentNode.parentNode.className == 'rowBench')) {
     210                    let nr = 0;
     211                    let index1 = 0;
     212                    let index2 = 0;
    230213                    let temp = this.state.choosed;
    231                     if (temp.charCodeAt(0) > 90) {
     214                    if (this.state.choosed.charCodeAt(0) > 90) {
    232215                        temp = String.fromCharCode(temp.charCodeAt(0) - 6);
    233216                    }
    234 
    235                     if (indexL == temp) {
     217                    if (!isNaN(this.state.choosed)) {
     218                        nr = 1;
     219                        index1 = this.props.selected1.indexOf(this.state.choosed);
     220                        index2 = this.props.selected1.indexOf(index);
     221                    } else {
     222                        nr = 2;
     223                        let temp1 = this.state.choosed;
     224                        let temp2 = index;
     225                        if (this.state.choosed.charCodeAt(0) > 90) {
     226                            temp1 = String.fromCharCode(temp1.charCodeAt(0) - 6);
     227                        }
     228                        if (index.charCodeAt(0) > 90) {
     229                            temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
     230                        }
     231
     232                        index1 = this.props.selected2.indexOf(temp);
     233                        index2 = this.props.selected2.indexOf(temp2);
     234                    }
     235                    this.props.handleChangeSelected(nr, index1, index);
     236                    this.props.handleChangeSelected(nr, index2, this.state.choosed);
     237
     238                    this.setState({ choosed: ' ' }, function() {
     239                        console.log(this.state.choosed);
     240                    });
     241                } else {
     242                    if (item.parentNode.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode ||
     243                        item.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode.parentNode) {
     244                        let nr = 0;
     245                        let index1 = 0;
     246                        let index2 = 0;
     247                        if (!isNaN(this.state.choosed)) {
     248                            nr = 1;
     249                            index1 = this.props.selected1.indexOf(this.state.choosed);
     250                            index2 = this.props.selected1.indexOf(index);
     251                        } else {
     252                            nr = 2;
     253                            let temp = this.state.choosed;
     254                            let temp2 = index;
     255                            if (this.state.choosed.charCodeAt(0) > 90) {
     256                                temp = String.fromCharCode(temp.charCodeAt(0) - 6);
     257                            }
     258                            if (index.charCodeAt(0) > 90) {
     259                                temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
     260                            }
     261                            index1 = this.props.selected2.indexOf(temp);
     262                            index2 = this.props.selected2.indexOf(temp2);
     263                        }
     264                        this.props.handleChangeSelected(nr, index1, index);
     265                        this.props.handleChangeSelected(nr, index2, this.state.choosed);
    236266                        this.setState({ choosed: ' ' }, function() {
    237267                            console.log(this.state.choosed);
    238268                        });
    239269                    } else {
    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                         }
     270                        this.setState({ choosed: index }, function() {
     271                            console.log(this.state.choosed);
     272                        });
    264273                    }
    265                 } else {
    266                     this.setState({ choosed: index }, function() {
    267                         console.log(this.state.choosed);
    268                     });
    269                 }
    270             }
    271            
     274                }
     275            }
    272276        } else {
    273             this.setState({ choosed: index }, function() {
    274                 console.log(this.state.choosed);
    275             });
     277            if (item != null) {
     278                this.setState({ choosed: index }, function() {
     279                    console.log(this.state.choosed);
     280                });
     281            }
    276282        }
    277283    }
    … …  
    290296                                <div id={'creature' + this.props.selected1[i]}
    291297                                    className='creature1'
    292                                     onMouseDown={this.selectNumber}
     298                                    onMouseDown={this.select}
    293299                                    style={styles.creatureBench1}>
    294300                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
    … …  
    307313                                <div id={'creature' + this.props.selected1[i]}
    308314                                    className='creature1'
    309                                     onMouseDown={this.selectNumber}
     315                                    onMouseDown={this.select}
    310316                                    style={styles.creatureBench}>
    311317                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
    … …  
    321327                    <div id='cellnull' className='cell' style={styles.cell}>
    322328                        <div id={'field1-'+(i+1).toString()}
    323                             onMouseDown = {this.selectNumber}
     329                            onMouseDown = {this.select}
    324330                            className='field'
    325331                            style={styles.middleField}>
    … …  
    357363                                <div id={'creature' + value}
    358364                                    className='creature2'
    359                                     onMouseDown={this.selectLetter}
     365                                    onMouseDown={this.select}
    360366                                    style={styles.creatureBench2}>
    361367                                    <p id={'p' + value} style={styles.creatureText}>
    … …  
    374380                                <div id={'creature' + value}
    375381                                    className='creature2'
    376                                     onMouseDown={this.selectLetter}
     382                                    onMouseDown={this.select}
    377383                                    style={styles.creatureBench}>
    378384                                    <p id={'p' + value} style={styles.creatureText}>
    … …  
    388394                    <div id='cellnull' className='cell' style={styles.cell}>
    389395                        <div id={'field2-'+(i+1).toString()}
    390                             onMouseDown = {this.selectLetter}
     396                            onMouseDown = {this.select}
    391397                            className='field'
    392398                            style={styles.middleField}>
    … …  
    421427                            <div id={'creature' + idtext}
    422428                                className='creature2'
    423                                 onMouseDown={this.selectLetter}
     429                                onMouseDown={this.select}
    424430                                style={styles.creatureBench2}>
    425431                                <p id={'p' + idtext} style={styles.creatureText}>
    … …  
    434440                            <div id={'creature' + idtext}
    435441                                className='creature2'
    436                                 onMouseDown={this.selectLetter}
     442                                onMouseDown={this.select}
    437443                                style={styles.creatureBench}>
    438444                                <p id={'p' + idtext} style={styles.creatureText}>
    … …  
    460466
    461467        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'}}>
     468            <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'}}>*/}
    463469                <h2 className='title' style={styles.header}>
    464470                    DOPASOWANIE
    465471                </h2>
    466 
    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}>
     472                <div key='rowsFields' onMouseDown = {this.select} className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
     473                    <div id='rowCreature1' onMouseDown = {this.select}>
     474                        <div id='rowField1' className='rowField' onMouseDown = {this.select} style={styles.row}>
    470475                            {this.createSecondRow()}
    471476                        </div>
    472477                    </div>
    473                     <div id='rowCreature2' onMouseDown = {this.selectLetter}>
    474                         <div id='rowField2' className='rowField' onMouseDown = {this.selectLetter} style={styles.row}>
     478                  <div className='text' style={styles.info}>
     479                    w najwyższy rząd cyferek nie klikamy
     480                  </div>
     481                    <div id='rowCreature2'>
     482                        <div id='rowField2' className='rowField' onMouseDown = {this.select} style={styles.row}>
    475483                            {this.createThirdRow()}
    476484                        </div>
    477                         <div id='rowBench2' className='rowBench' onMouseDown = {this.selectLetter} style={styles.row}>
     485                        <div id='rowBench2' className='rowBench' onMouseDown = {this.select} style={styles.row}>
    478486                            {this.createFourthRow()}
    479487                        </div>
Note: See TracChangeset for help on using the changeset viewer.