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

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

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

File size: 19.9 KB
Line 
1/*global Module*/
2"use strict";
3
4import React from 'react';
5
6
7const styles = {
8    header: {
9        textAlign: 'center',
10        lineHeight: '0.1',
11        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',
22        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
23        webkitUserSelect : 'none',
24        mozUserSelect: 'none',
25        msUserSelect: 'none',
26        userSelect: 'none'
27    },
28    creatureText: {
29        margin: '0',
30        position: 'absolute',
31        top: '50%',
32        left: '50%',
33        marginRight: '-50%',
34        transform: 'translate(-50%, -50%)',
35        webkitUserSelect : 'none',
36        mozUserSelect: 'none',
37        msUserSelect: 'none',
38        userSelect: 'none',
39        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"
40    },
41    creatureBench: {
42        position: 'relative',
43        border: '2px solid black',
44        color: 'white',
45        backgroundColor: 'gray',
46        width: '50px',
47        height: '50px',
48        fontSize: '30px',
49        pointerEvent: 'none',
50        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
51    },
52    creatureBench1: {
53        position: 'relative',
54        border: '2px solid black',
55        color: 'white',
56        backgroundColor: 'red',
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    creatureBench2: {
64        position: 'relative',
65        border: '2px solid black',
66        color: 'white',
67        backgroundColor: 'blue',
68        width: '50px',
69        height: '50px',
70        fontSize: '30px',
71        pointerEvents: 'none',
72        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
73    },
74    middleField:{
75        position: 'relative',
76        color: 'gray',
77        backgroundColor: 'gray',
78        width: '54px',
79        height: '54px',
80        webkitUserSelect: 'none',
81        mozUserSelect: 'none',
82        msUserSelect: 'none',
83        userSelect: 'none'
84    },
85    emptyField: {
86        display: 'table',
87        width: '100%',
88        height: '20px'
89    },
90    field: {
91        display: 'flex'
92    },
93    empty: {
94        webkitUserSelect : 'none',
95        mozUserSelect: 'none',
96        msUserSelect: 'none',
97        userSelect: 'none'
98    },
99    cell: {
100        display: 'table-cell'
101    },
102    row: {
103        display: 'table-row',
104    }
105};
106
107/**
108 * Component for assesing genotypes matching.
109 */
110class FitViewer extends React.Component {
111    /**
112     * Basic constructor.
113     * @param {any} props properties of Component
114     */
115    constructor(props) {
116        super(props);
117        this.props = props;
118
119        this.state = {
120            height: 2,
121            choosed: ' ',
122            initialX: 0,
123            initialY: 0
124        }
125       
126        this.createSecondRow = this.createSecondRow.bind(this);
127        this.createThirdRow = this.createThirdRow.bind(this);
128        this.createFourthRow = this.createFourthRow.bind(this);
129        this.select = this.select.bind(this);
130    }
131
132    select(e) {
133        let item = null;
134        let index;
135
136        for (let i = 0; i < this.props.parts1; i++) {
137            let index2 = (i+1).toString();
138            let itemD = document.querySelector('#creature' + index2);
139            let itemP = document.querySelector('#p' + index2);
140            if (e.target === itemD || e.target === itemP) {
141                item = null;
142                index = index2;
143                item = document.querySelector('#creature' + index);
144            }
145        }
146
147        for (let i = 0; i < this.props.parts2; i++) {
148            let index2 = '';
149            if (i + 1 + 64 > 90) {
150                index2 = String.fromCharCode(i + 1 + 70);
151            } else {
152                index2 = String.fromCharCode(i + 1 + 64);
153            }     
154            let itemD = document.querySelector('#creature' + index2);
155            let itemP = document.querySelector('#p' + index2);
156            if (e.target === itemD || e.target === itemP) {
157                item = null;
158                index = index2;
159                item = document.querySelector('#creature' + index);
160            }
161        }
162
163        if (this.state.choosed != ' ') {
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);
178                        }
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);
199                        }
200                    }
201                }
202                this.setState({ choosed: ' ' }, function() {
203                    console.log(this.state.choosed);
204                });
205
206            } else {
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;
213                    let temp = this.state.choosed;
214                    if (this.state.choosed.charCodeAt(0) > 90) {
215                        temp = String.fromCharCode(temp.charCodeAt(0) - 6);
216                    }
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);
266                        this.setState({ choosed: ' ' }, function() {
267                            console.log(this.state.choosed);
268                        });
269                    } else {
270                        this.setState({ choosed: index }, function() {
271                            console.log(this.state.choosed);
272                        });
273                    }
274                }
275            }
276        } else {
277            if (item != null) {
278                this.setState({ choosed: index }, function() {
279                    console.log(this.state.choosed);
280                });
281            }
282        }
283    }
284
285    createSecondRow() {
286        let row = []
287        let len = Math.min(this.props.parts1, this.props.parts2);
288        for (let i = 0; i < len; i++) {       
289            if (this.props.selected1[i] != ' ') {
290                if (this.props.selected1[i] && this.state.choosed == this.props.selected1[i]) {   
291                    row.push(
292                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
293                            <div id={'field1-'+(i+1).toString()}
294                                className='field'
295                                style={styles.middleField}>
296                                <div id={'creature' + this.props.selected1[i]}
297                                    className='creature1'
298                                    onMouseDown={this.select}
299                                    style={styles.creatureBench1}>
300                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
301                                        {this.props.selected1[i]}
302                                    </p>
303                                </div>
304                            </div>
305                        </div>
306                    );
307                } else {
308                    row.push(
309                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
310                            <div id={'field1-'+(i+1).toString()}
311                                className='field'
312                                style={styles.middleField}>
313                                <div id={'creature' + this.props.selected1[i]}
314                                    className='creature1'
315                                    onMouseDown={this.select}
316                                    style={styles.creatureBench}>
317                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
318                                        {this.props.selected1[i]}
319                                    </p>
320                                </div>
321                            </div>
322                        </div>
323                    );
324                }
325            } else {
326                row.push(
327                    <div id='cellnull' className='cell' style={styles.cell}>
328                        <div id={'field1-'+(i+1).toString()}
329                            onMouseDown = {this.select}
330                            className='field'
331                            style={styles.middleField}>
332                            &nbsp;
333                        </div>
334                    </div>
335                );
336            }   
337        }
338        if (row.length == 0) {
339            row.push(
340                <div style={styles.empty}>&nbsp;</div>
341            );
342        }
343        return row;
344    }
345
346    createThirdRow() {
347        let row = [];
348        let len = Math.min(this.props.parts1, this.props.parts2);
349        for (let i = 0; i < len; i++) { 
350            if (this.props.selected2[i] && this.props.selected2[i] != ' ') {
351                let value = this.props.selected2[i];
352                let char = value.charCodeAt(0);
353                if (char > 90) {
354                    char += 6;
355                    value = String.fromCharCode(char);
356                }
357                if (this.state.choosed == value) {   
358                    row.push(
359                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
360                            <div id={'field2-'+(i+1).toString()}
361                                className='field'
362                                style={styles.middleField}>
363                                <div id={'creature' + value}
364                                    className='creature2'
365                                    onMouseDown={this.select}
366                                    style={styles.creatureBench2}>
367                                    <p id={'p' + value} style={styles.creatureText}>
368                                        {value}
369                                    </p>
370                                </div>
371                            </div>
372                        </div>
373                    );
374                } else {
375                    row.push(
376                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
377                            <div id={'field2-'+(i+1).toString()}
378                                className='field'
379                                style={styles.middleField}>
380                                <div id={'creature' + value}
381                                    className='creature2'
382                                    onMouseDown={this.select}
383                                    style={styles.creatureBench}>
384                                    <p id={'p' + value} style={styles.creatureText}>
385                                        {value}
386                                    </p>
387                                </div>
388                            </div>
389                        </div>
390                    );
391                }
392            } else {
393                row.push(
394                    <div id='cellnull' className='cell' style={styles.cell}>
395                        <div id={'field2-'+(i+1).toString()}
396                            onMouseDown = {this.select}
397                            className='field'
398                            style={styles.middleField}>
399                        </div>
400                    </div>
401                );
402            }
403        }
404        if (row.length == 0) {
405            row.push(
406                <div style={styles.empty}>&nbsp;</div>
407            );
408        }
409        return row;
410    }
411
412    createFourthRow() {
413        let row = [];
414        for (let i = 0; i < this.props.parts2; i++) {
415            let idtext = '';
416            let idtext1 = String.fromCharCode(i + 1 + 64);
417            if (i + 1 + 64 >= 91) {
418                idtext = String.fromCharCode(i  + 1 + 70);
419            } else {
420                idtext = idtext1;
421            }
422
423            if (this.props.selected2.indexOf(idtext1) < 0) {
424                if (this.state.choosed == idtext) {
425                    row.push(
426                        <div id={'cell'+idtext} className='cell' style={styles.cell}>
427                            <div id={'creature' + idtext}
428                                className='creature2'
429                                onMouseDown={this.select}
430                                style={styles.creatureBench2}>
431                                <p id={'p' + idtext} style={styles.creatureText}>
432                                    {idtext}
433                                </p>
434                            </div>
435                        </div>
436                    );
437                } else {
438                    row.push(
439                        <div id={'cell'+idtext} className='cell' style={styles.cell}>
440                            <div id={'creature' + idtext}
441                                className='creature2'
442                                onMouseDown={this.select}
443                                style={styles.creatureBench}>
444                                <p id={'p' + idtext} style={styles.creatureText}>
445                                    {idtext}
446                                </p>
447                            </div>
448                        </div>
449                    );
450                }
451            }
452        }
453        if (row.length == 0) {
454            row.push(
455                <div id='cellnull' className='cell' style={styles.cell}>
456                    <div style={styles.empty}>&nbsp;</div>
457                </div>
458            );
459        }
460        return row;
461    }
462     
463    render() {     
464        let h = ((this.props.fitHeight * 150 - 16) + 8 * (this.props.fitHeight - 1)).toString() + 'px';
465        let w = ((this.props.fitWidth * 150 - 16) + 8 * (this.props.fitWidth - 1)).toString() + 'px';
466
467        return (
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'}}>*/}
469                <h2 className='title' style={styles.header}>
470                    DOPASOWANIE
471                </h2>
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}>
475                            {this.createSecondRow()}
476                        </div>
477                    </div>
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}>
483                            {this.createThirdRow()}
484                        </div>
485                        <div id='rowBench2' className='rowBench' onMouseDown = {this.select} style={styles.row}>
486                            {this.createFourthRow()}
487                        </div>
488                    </div>
489                </div>
490            </div>
491        );
492    }
493}
494
495export default FitViewer;
Note: See TracBrowser for help on using the repository browser.