Revize a6602c4c
Přidáno uživatelem Pavel Fidranský před více než 6 roky(ů)
sources/src/main/webapp/css/main.css | ||
---|---|---|
457 | 457 |
stroke: #000; |
458 | 458 |
} |
459 | 459 | |
460 |
.viewport .group .expand-button > line { |
|
461 |
stroke: #000; |
|
462 |
stroke-width: 2; |
|
463 |
} |
|
464 | ||
465 |
.viewport .group .compress-button > line { |
|
466 |
stroke: #000; |
|
467 |
stroke-width: 2; |
|
468 |
} |
|
469 | ||
470 | 460 |
.viewport .group .dissolve-button > line { |
471 | 461 |
stroke: #ca0000; |
472 | 462 |
stroke-width: 2; |
473 | 463 |
} |
474 | 464 | |
475 |
.viewport .group:not(.group--expanded) .compress-button { |
|
476 |
display: none; |
|
477 |
} |
|
478 | ||
479 |
.viewport .group:not(.group--expanded) .group-vertex-list { |
|
480 |
display: none; |
|
481 |
} |
|
482 | ||
483 |
.viewport .group:not(.group--expanded) .group-viewport { |
|
484 |
display: none; |
|
485 |
} |
|
486 | ||
487 |
.viewport .group--expanded .expand-button { |
|
488 |
display: none; |
|
489 |
} |
|
490 | ||
491 |
.viewport .group--expanded .compress-button { |
|
492 |
display: block; |
|
493 |
} |
|
494 | ||
495 |
.viewport .group--expanded > rect { |
|
496 |
width: 220px; |
|
497 |
} |
|
498 | ||
499 | 465 |
/** |
500 | 466 |
* SIDEBAR |
501 | 467 |
*/ |
sources/src/main/webapp/js/components/group.js | ||
---|---|---|
12 | 12 |
this.symbol = app.markSymbol.getMarkSymbol(); |
13 | 13 | |
14 | 14 |
var rootElement; |
15 |
var vertexListComponent; |
|
16 | 15 | |
17 | 16 |
var position = new Coordinates(0, 0); |
18 | 17 |
var size = { |
... | ... | |
83 | 82 | |
84 | 83 |
app.viewportComponent.removeVertex(vertex); |
85 | 84 | |
86 |
if (rootElement) { |
|
87 |
vertexListComponent.appendChild(vertex); |
|
88 |
} |
|
89 | ||
90 | 85 |
vertexList.push(vertex); |
91 | 86 |
if(isIconShown) showIconClick.bind(this)(null); |
92 | 87 |
}; |
... | ... | |
117 | 112 | |
118 | 113 |
app.viewportComponent.addVertex(vertex); |
119 | 114 | |
120 |
if (rootElement) { |
|
121 |
vertexListComponent.removeChild(vertex); |
|
122 |
} |
|
123 | ||
124 | 115 |
vertexList.splice(vertexList.indexOf(vertex), 1); |
125 | 116 |
}; |
126 | 117 |
|
... | ... | |
521 | 512 |
// name |
522 | 513 |
var nameText = app.utils.createSvgElement('text', { |
523 | 514 |
'class': 'group-name', |
524 |
'x': 20,
|
|
515 |
'x': 5,
|
|
525 | 516 |
'y': 15, |
526 | 517 |
}); |
527 | 518 |
nameText.appendChild(document.createTextNode(this.name)); |
... | ... | |
537 | 528 |
symbolText.appendChild(document.createTextNode(this.symbol[0])); |
538 | 529 |
rootElement.appendChild(symbolText); |
539 | 530 | |
540 |
// expand button |
|
541 |
var expandButton = app.utils.createSvgElement('g', { |
|
542 |
'class': 'button expand-button', |
|
543 |
}); |
|
544 |
expandButton.appendChild(app.utils.createSvgElement('rect', { |
|
545 |
'rx': 4, |
|
546 |
'ry': 4, |
|
547 |
'x': 4, |
|
548 |
'y': 4, |
|
549 |
'height': 14, |
|
550 |
'width': 14, |
|
551 |
})); |
|
552 |
expandButton.appendChild(app.utils.createSvgElement('line', { |
|
553 |
'x1': 11, |
|
554 |
'y1': 6, |
|
555 |
'x2': 11, |
|
556 |
'y2': 16, |
|
557 |
})); |
|
558 |
expandButton.appendChild(app.utils.createSvgElement('line', { |
|
559 |
'x1': 6, |
|
560 |
'y1': 11, |
|
561 |
'x2': 16, |
|
562 |
'y2': 11, |
|
563 |
})); |
|
564 |
expandButton.addEventListener('click', expandClick.bind(this)); |
|
565 |
rootElement.appendChild(expandButton); |
|
566 | ||
567 |
// compress button |
|
568 |
var compressButton = app.utils.createSvgElement('g', { |
|
569 |
'class': 'button compress-button', |
|
570 |
}); |
|
571 |
compressButton.appendChild(app.utils.createSvgElement('rect', { |
|
572 |
'rx': 4, |
|
573 |
'ry': 4, |
|
574 |
'x': 4, |
|
575 |
'y': 4, |
|
576 |
'height': 14, |
|
577 |
'width': 14, |
|
578 |
})); |
|
579 |
compressButton.appendChild(app.utils.createSvgElement('line', { |
|
580 |
'x1': 6, |
|
581 |
'y1': 11, |
|
582 |
'x2': 16, |
|
583 |
'y2': 11, |
|
584 |
})); |
|
585 |
compressButton.addEventListener('click', compressClick.bind(this)); |
|
586 |
rootElement.appendChild(compressButton); |
|
587 | ||
588 | 531 |
// dissolve button |
589 | 532 |
var dissolveButton = app.utils.createSvgElement('g', { |
590 | 533 |
'class': 'button dissolve-button', |
... | ... | |
612 | 555 |
dissolveButton.addEventListener('click', dissolveClick.bind(this)); |
613 | 556 |
rootElement.appendChild(dissolveButton); |
614 | 557 | |
615 |
// vertex list |
|
616 |
vertexListComponent = new GroupVertexList(this); |
|
617 |
rootElement.appendChild(vertexListComponent.render()); |
|
618 | ||
619 |
vertexList.forEach(function(vertex) { |
|
620 |
vertexListComponent.appendChild(vertex); |
|
621 |
}, this); |
|
622 | ||
623 | 558 |
return rootElement; |
624 | 559 |
} |
625 | 560 | |
... | ... | |
697 | 632 |
nameText.addEventListener('click', nameClick.bind(this)); |
698 | 633 |
rootElement.appendChild(nameText); |
699 | 634 | |
700 |
// vertex list |
|
701 |
vertexListComponent = new GroupVertexList(this); |
|
702 |
rootElement.appendChild(vertexListComponent.render()); |
|
703 | ||
704 |
vertexList.forEach(function(vertex) { |
|
705 |
vertexListComponent.appendChild(vertex); |
|
706 |
}, this); |
|
707 | ||
708 | 635 |
// buttons |
709 | 636 |
var buttonGroup = app.utils.createHtmlElement('div', { |
710 | 637 |
'class': 'button-group', |
... | ... | |
849 | 776 |
this.include.call(this); |
850 | 777 |
} |
851 | 778 | |
852 |
/** |
|
853 |
* Sets the group as expanded so that its vertices are listed too. |
|
854 |
* @param {Event} e Click event. |
|
855 |
*/ |
|
856 |
function expandClick(e) { |
|
857 |
e.stopPropagation(); |
|
858 | ||
859 |
rootElement.classList.add('group--expanded'); |
|
860 |
} |
|
861 | ||
862 |
/** |
|
863 |
* Sets the group as compress so that its vertices are not explicitly listed. |
|
864 |
* @param {Event} e Click event. |
|
865 |
*/ |
|
866 |
function compressClick(e) { |
|
867 |
e.stopPropagation(); |
|
868 | ||
869 |
rootElement.classList.remove('group--expanded'); |
|
870 |
} |
|
871 | ||
872 | 779 |
/** |
873 | 780 |
* Dissolves the group so that its vertices are displayed separately again. The group itself is destroyed. |
874 | 781 |
* @param {Event} e Click event. |
sources/src/main/webapp/js/components/groupVertexList.js | ||
---|---|---|
1 |
/** |
|
2 |
* Class representing a list of vertices added to a group. |
|
3 |
* @see Group |
|
4 |
* @constructor |
|
5 |
* @param {Group} parentalGroup Group this vertex list is bound to. |
|
6 |
*/ |
|
7 |
function GroupVertexList(parentalGroup) { |
|
8 |
const lineHeight = 18; |
|
9 | ||
10 |
var rootElement; |
|
11 |
var listItemCounter = 0; |
|
12 | ||
13 |
/** |
|
14 |
* Adds a new vertex to the list. Binds user interactions to local handler functions. |
|
15 |
* @param {vertex} vertex Vertex to be added to this list. |
|
16 |
*/ |
|
17 |
this.appendChild = function(vertex) { |
|
18 |
var listItemElement; |
|
19 |
if (parentalGroup.isExcluded()) { |
|
20 |
listItemElement = app.utils.createHtmlElement('li', {}); |
|
21 |
} else { |
|
22 |
listItemElement = app.utils.createSvgElement('text', { |
|
23 |
'y': listItemCounter * lineHeight, |
|
24 |
}); |
|
25 |
} |
|
26 | ||
27 |
listItemElement.setAttribute('data-id', vertex.id); |
|
28 |
listItemElement.appendChild(document.createTextNode(vertex.name)); |
|
29 |
listItemElement.addEventListener('click', listItemClick.bind(vertex)); |
|
30 | ||
31 |
rootElement.appendChild(listItemElement); |
|
32 | ||
33 |
listItemCounter++; |
|
34 |
}; |
|
35 | ||
36 |
/** |
|
37 |
* Removes a vertex from the list. |
|
38 |
* @param {Vertex} vertex Vertex to be removed from this list. |
|
39 |
*/ |
|
40 |
this.removeChild = function(vertex) { |
|
41 |
var listItemElement = rootElement.querySelector('[data-id="' + vertex.id + '"]'); |
|
42 | ||
43 |
listItemElement.remove(); |
|
44 |
}; |
|
45 | ||
46 |
/** |
|
47 |
* Creates a new DOM element representing the list in memory. |
|
48 |
* @returns {Element} HTML or SVG DOM element depending on whether the group is excluded. |
|
49 |
*/ |
|
50 |
this.render = function() { |
|
51 |
if (parentalGroup.isExcluded()) { |
|
52 |
rootElement = app.utils.createHtmlElement('ul', {}); |
|
53 |
} else { |
|
54 |
rootElement = app.utils.createSvgElement('g', { |
|
55 |
'transform': 'translate(70, 30)', |
|
56 |
}); |
|
57 |
} |
|
58 | ||
59 |
rootElement.setAttribute('class', 'group-vertex-list'); |
|
60 | ||
61 |
return rootElement; |
|
62 |
}; |
|
63 | ||
64 |
/** |
|
65 |
* Vertex list item click interaction. |
|
66 |
* @param {Event} e Click event. |
|
67 |
*/ |
|
68 |
function listItemClick(e) { |
|
69 |
e.stopPropagation(); |
|
70 | ||
71 |
console.log('TODO: highlight vertex on click'); |
|
72 |
} |
|
73 |
} |
sources/src/main/webapp/showGraph.jsp | ||
---|---|---|
26 | 26 |
<script src="js/components/edgePopover.js"></script> |
27 | 27 |
<script src="js/components/floatingPoint.js"></script> |
28 | 28 |
<script src="js/components/group.js"></script> |
29 |
<script src="js/components/groupVertexList.js"></script> |
|
30 | 29 |
<script src="js/components/minimap.js"></script> |
31 | 30 |
<script src="js/components/modalWindow.js"></script> |
32 | 31 |
<script src="js/components/sidebar.js"></script> |
Také k dispozici: Unified diff
dropped expanded Group view