source: js/human_3d_alignment/src/widgets/fitviewer.jsx @ 911

Last change on this file since 911 was 911, checked in by Maciej Komosinski, 4 years ago

Added the actual functionality of the app in place of previous draft
File size: 19.3 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.select = this.select.bind(this);
119    }
120
121    select(e) {
122        let item = null;
123        let index;
124
125        for (let i = 0; i < this.props.parts1; i++) {
126            let index2 = (i+1).toString();
127            let itemD = document.querySelector('#creature' + index2);
128            let itemP = document.querySelector('#p' + index2);
129            if (e.target === itemD || e.target === itemP) {
130                item = null;
131                index = index2;
132                item = document.querySelector('#creature' + index);
133            }
134        }
135
136        for (let i = 0; i < this.props.parts2; i++) {
137            let index2 = '';
138            if (i + 1 + 64 > 90) {
139                index2 = String.fromCharCode(i + 1 + 70);
140            } else {
141                index2 = String.fromCharCode(i + 1 + 64);
142            }     
143            let itemD = document.querySelector('#creature' + index2);
144            let itemP = document.querySelector('#p' + index2);
145            if (e.target === itemD || e.target === itemP) {
146                item = null;
147                index = index2;
148                item = document.querySelector('#creature' + index);
149            }
150        }
151
152        if (this.state.choosed != ' ') {
153            if (!item) {
154                if (!isNaN(this.state.choosed)) {
155                    for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
156                        let index2 = (i+1).toString();
157                        let itemD =  document.querySelector('#field1-' + index2);
158
159                       
160                        if (e.target === itemD) {
161                            let index3 = this.props.selected1.indexOf(this.state.choosed);
162
163                            if (index3 > -1) {
164                                this.props.handleChangeSelected(1, index3, ' ');
165                            }
166                            this.props.handleChangeSelected(1, i, this.state.choosed);
167                        }
168                    }
169                } else {
170                    for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
171                        let index2 = (i+1).toString();
172                        let itemD =  document.querySelector('#field2-' + index2);
173
174                       
175                        if (e.target === itemD) {
176
177                            let temp = this.state.choosed;
178                            if (this.state.choosed.charCodeAt(0) > 90) {
179                                temp = String.fromCharCode(temp.charCodeAt(0) - 6);
180                            }
181
182                            let index3 = this.props.selected2.indexOf(temp);
183
184                            if (index3 > -1) {
185                                this.props.handleChangeSelected(2, index3, ' ');
186                            }
187                            this.props.handleChangeSelected(2, i, this.state.choosed);
188                        }
189                    }
190                }
191                this.setState({ choosed: ' ' }, function() {
192                    console.log(this.state.choosed);
193                });
194
195            } else {
196                let item2 = document.querySelector('#creature' + this.state.choosed);
197                if ((item.parentNode.parentNode.parentNode.className == 'rowField' || item.parentNode.parentNode.parentNode.className == 'rowBench') &&
198                    (item2.parentNode.parentNode.parentNode.className == 'rowField' || item2.parentNode.parentNode.parentNode.className == 'rowBench')) {
199                    let nr = 0;
200                    let index1 = 0;
201                    let index2 = 0;
202                    let temp = this.state.choosed;
203                    if (this.state.choosed.charCodeAt(0) > 90) {
204                        temp = String.fromCharCode(temp.charCodeAt(0) - 6);
205                    }
206                    if (!isNaN(this.state.choosed)) {
207                        nr = 1;
208                        index1 = this.props.selected1.indexOf(this.state.choosed);
209                        index2 = this.props.selected1.indexOf(index);
210                    } else {
211                        nr = 2;
212                        let temp1 = this.state.choosed;
213                        let temp2 = index;
214                        if (this.state.choosed.charCodeAt(0) > 90) {
215                            temp1 = String.fromCharCode(temp1.charCodeAt(0) - 6);
216                        }
217                        if (index.charCodeAt(0) > 90) {
218                            temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
219                        }
220
221                        index1 = this.props.selected2.indexOf(temp);
222                        index2 = this.props.selected2.indexOf(temp2);
223                    }
224                    this.props.handleChangeSelected(nr, index1, index);
225                    this.props.handleChangeSelected(nr, index2, this.state.choosed);
226
227                    this.setState({ choosed: ' ' }, function() {
228                        console.log(this.state.choosed);
229                    });
230                } else {
231                    if (item.parentNode.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode ||
232                        item.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode.parentNode) {
233                        let nr = 0;
234                        let index1 = 0;
235                        let index2 = 0;
236                        if (!isNaN(this.state.choosed)) {
237                            nr = 1;
238                            index1 = this.props.selected1.indexOf(this.state.choosed);
239                            index2 = this.props.selected1.indexOf(index);
240                        } else {
241                            nr = 2;
242                            let temp = this.state.choosed;
243                            let temp2 = index;
244                            if (this.state.choosed.charCodeAt(0) > 90) {
245                                temp = String.fromCharCode(temp.charCodeAt(0) - 6);
246                            }
247                            if (index.charCodeAt(0) > 90) {
248                                temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
249                            }
250                            index1 = this.props.selected2.indexOf(temp);
251                            index2 = this.props.selected2.indexOf(temp2);
252                        }
253                        this.props.handleChangeSelected(nr, index1, index);
254                        this.props.handleChangeSelected(nr, index2, this.state.choosed);
255                        this.setState({ choosed: ' ' }, function() {
256                            console.log(this.state.choosed);
257                        });
258                    } else {
259                        this.setState({ choosed: index }, function() {
260                            console.log(this.state.choosed);
261                        });
262                    }
263                }
264            }
265        } else {
266            if (item != null) {
267                this.setState({ choosed: index }, function() {
268                    console.log(this.state.choosed);
269                });
270            }
271        }
272    }
273
274    createSecondRow() {
275        let row = []
276        let len = Math.min(this.props.parts1, this.props.parts2);
277        for (let i = 0; i < len; i++) {       
278            if (this.props.selected1[i] != ' ') {
279                if (this.props.selected1[i] && this.state.choosed == this.props.selected1[i]) {   
280                    row.push(
281                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
282                            <div id={'field1-'+(i+1).toString()}
283                                className='field'
284                                style={styles.middleField}>
285                                <div id={'creature' + this.props.selected1[i]}
286                                    className='creature1'
287                                    onMouseDown={this.select}
288                                    style={styles.creatureBench1}>
289                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
290                                        {this.props.selected1[i]}
291                                    </p>
292                                </div>
293                            </div>
294                        </div>
295                    );
296                } else {
297                    row.push(
298                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
299                            <div id={'field1-'+(i+1).toString()}
300                                className='field'
301                                style={styles.middleField}>
302                                <div id={'creature' + this.props.selected1[i]}
303                                    className='creature1'
304                                    onMouseDown={this.select}
305                                    style={styles.creatureBench}>
306                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
307                                        {this.props.selected1[i]}
308                                    </p>
309                                </div>
310                            </div>
311                        </div>
312                    );
313                }
314            } else {
315                row.push(
316                    <div id='cellnull' className='cell' style={styles.cell}>
317                        <div id={'field1-'+(i+1).toString()}
318                            onMouseDown = {this.select}
319                            className='field'
320                            style={styles.middleField}>
321                            &nbsp;
322                        </div>
323                    </div>
324                );
325            }   
326        }
327        if (row.length == 0) {
328            row.push(
329                <div style={styles.empty}>&nbsp;</div>
330            );
331        }
332        return row;
333    }
334
335    createThirdRow() {
336        let row = [];
337        let len = Math.min(this.props.parts1, this.props.parts2);
338        for (let i = 0; i < len; i++) { 
339            if (this.props.selected2[i] && this.props.selected2[i] != ' ') {
340                let value = this.props.selected2[i];
341                let char = value.charCodeAt(0);
342                if (char > 90) {
343                    char += 6;
344                    value = String.fromCharCode(char);
345                }
346                if (this.state.choosed == value) {   
347                    row.push(
348                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
349                            <div id={'field2-'+(i+1).toString()}
350                                className='field'
351                                style={styles.middleField}>
352                                <div id={'creature' + value}
353                                    className='creature2'
354                                    onMouseDown={this.select}
355                                    style={styles.creatureBench2}>
356                                    <p id={'p' + value} style={styles.creatureText}>
357                                        {value}
358                                    </p>
359                                </div>
360                            </div>
361                        </div>
362                    );
363                } else {
364                    row.push(
365                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
366                            <div id={'field2-'+(i+1).toString()}
367                                className='field'
368                                style={styles.middleField}>
369                                <div id={'creature' + value}
370                                    className='creature2'
371                                    onMouseDown={this.select}
372                                    style={styles.creatureBench}>
373                                    <p id={'p' + value} style={styles.creatureText}>
374                                        {value}
375                                    </p>
376                                </div>
377                            </div>
378                        </div>
379                    );
380                }
381            } else {
382                row.push(
383                    <div id='cellnull' className='cell' style={styles.cell}>
384                        <div id={'field2-'+(i+1).toString()}
385                            onMouseDown = {this.select}
386                            className='field'
387                            style={styles.middleField}>
388                        </div>
389                    </div>
390                );
391            }
392        }
393        if (row.length == 0) {
394            row.push(
395                <div style={styles.empty}>&nbsp;</div>
396            );
397        }
398        return row;
399    }
400
401    createFourthRow() {
402        let row = [];
403        for (let i = 0; i < this.props.parts2; i++) {
404            let idtext = '';
405            let idtext1 = String.fromCharCode(i + 1 + 64);
406            if (i + 1 + 64 >= 91) {
407                idtext = String.fromCharCode(i  + 1 + 70);
408            } else {
409                idtext = idtext1;
410            }
411
412            if (this.props.selected2.indexOf(idtext1) < 0) {
413                if (this.state.choosed == idtext) {
414                    row.push(
415                        <div id={'cell'+idtext} className='cell' style={styles.cell}>
416                            <div id={'creature' + idtext}
417                                className='creature2'
418                                onMouseDown={this.select}
419                                style={styles.creatureBench2}>
420                                <p id={'p' + idtext} style={styles.creatureText}>
421                                    {idtext}
422                                </p>
423                            </div>
424                        </div>
425                    );
426                } else {
427                    row.push(
428                        <div id={'cell'+idtext} className='cell' style={styles.cell}>
429                            <div id={'creature' + idtext}
430                                className='creature2'
431                                onMouseDown={this.select}
432                                style={styles.creatureBench}>
433                                <p id={'p' + idtext} style={styles.creatureText}>
434                                    {idtext}
435                                </p>
436                            </div>
437                        </div>
438                    );
439                }
440            }
441        }
442        if (row.length == 0) {
443            row.push(
444                <div id='cellnull' className='cell' style={styles.cell}>
445                    <div style={styles.empty}>&nbsp;</div>
446                </div>
447            );
448        }
449        return row;
450    }
451     
452    render() {     
453        let h = ((this.props.fitHeight * 150 - 16) + 8 * (this.props.fitHeight - 1)).toString() + 'px';
454        let w = ((this.props.fitWidth * 150 - 16) + 8 * (this.props.fitWidth - 1)).toString() + 'px';
455
456        return (
457            <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'}}>
458                <h2 className='title' style={styles.header}>
459                    DOPASOWANIE
460                </h2>
461
462                <div key='rowsFields' onMouseDown = {this.select} className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
463                    <div id='rowCreature1' onMouseDown = {this.select}>
464                        <div id='rowField1' className='rowField' onMouseDown = {this.select} style={styles.row}>
465                            {this.createSecondRow()}
466                        </div>
467                    </div>
468                    <div id='rowCreature2'>
469                        <div id='rowField2' className='rowField' onMouseDown = {this.select} style={styles.row}>
470                            {this.createThirdRow()}
471                        </div>
472                        <div id='rowBench2' className='rowBench' onMouseDown = {this.select} style={styles.row}>
473                            {this.createFourthRow()}
474                        </div>
475                    </div>
476                </div>
477            </div>
478        );
479    }
480}
481
482export default FitViewer;
Note: See TracBrowser for help on using the repository browser.