source: js/human_3d_alignment/src/widgets/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
Line 
1/*global Module*/
2"use strict";
3
4import React from 'react';
5
6
7const 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 */
99class 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);
118        this.selectLetter = this.selectLetter.bind(this);
119        this.selectNumber = this.selectNumber.bind(this);
120    }
121
122    selectNumber(e) {
123        let item = null;
124        let index;
125
126        let type = 0;
127
128        for (let i = 0; i < this.props.parts1; i++) {
129            let index2 = (i+1).toString();
130            let itemRow1 =  document.querySelector('#rowField1');
131            let itemD = document.querySelector('#creature' + index2);
132            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;
135                item = null;
136                index = index2;
137                item = document.querySelector('#creature' + index);
138            }
139        }
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;
179
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);
186            }
187            let itemRow2 =  document.querySelector('#rowCreature2');
188            let itemD = document.querySelector('#creature' + index2);
189            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;
194                index = index2;
195                indexL = index2;
196                if (indexL.charCodeAt(0) > 90) {
197                    indexL = String.fromCharCode(indexL.charCodeAt(0) - 6);
198                }
199            }
200        }
201
202        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);
212                        }
213
214                        let index3 = this.props.selected2.indexOf(temp);
215
216                        if (index3 > -1) {
217                            this.props.handleChangeSelected(2, index3, ' ');
218                        }
219                        this.props.handleChangeSelected(2, i, this.state.choosed);
220                    }
221
222                }
223
224                this.setState({ choosed: ' ' }, function() {
225                    console.log(this.state.choosed);
226                });
227            } else {
228                if (isNaN(this.state.choosed)) {
229
230                    let temp = this.state.choosed;
231                    if (temp.charCodeAt(0) > 90) {
232                        temp = String.fromCharCode(temp.charCodeAt(0) - 6);
233                    }
234
235                    if (indexL == temp) {
236                        this.setState({ choosed: ' ' }, function() {
237                            console.log(this.state.choosed);
238                        });
239                    } 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                        }
264                    }
265                } else {
266                    this.setState({ choosed: index }, function() {
267                        console.log(this.state.choosed);
268                    });
269                }
270            }
271           
272        } else {
273            this.setState({ choosed: index }, function() {
274                console.log(this.state.choosed);
275            });
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'
292                                    onMouseDown={this.selectNumber}
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'
309                                    onMouseDown={this.selectNumber}
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()}
323                            onMouseDown = {this.selectNumber}
324                            className='field'
325                            style={styles.middleField}>
326                            &nbsp;
327                        </div>
328                    </div>
329                );
330            }   
331        }
332        if (row.length == 0) {
333            row.push(
334                <div style={styles.empty}>&nbsp;</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'
359                                    onMouseDown={this.selectLetter}
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'
376                                    onMouseDown={this.selectLetter}
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()}
390                            onMouseDown = {this.selectLetter}
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}>&nbsp;</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'
423                                onMouseDown={this.selectLetter}
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'
436                                onMouseDown={this.selectLetter}
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}>&nbsp;</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
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}>
470                            {this.createSecondRow()}
471                        </div>
472                    </div>
473                    <div id='rowCreature2' onMouseDown = {this.selectLetter}>
474                        <div id='rowField2' className='rowField' onMouseDown = {this.selectLetter} style={styles.row}>
475                            {this.createThirdRow()}
476                        </div>
477                        <div id='rowBench2' className='rowBench' onMouseDown = {this.selectLetter} style={styles.row}>
478                            {this.createFourthRow()}
479                        </div>
480                    </div>
481                </div>
482            </div>
483        );
484    }
485}
486
487export default FitViewer;
Note: See TracBrowser for help on using the repository browser.