Projekt

Obecné

Profil

« Předchozí | Další » 

Revize a6602c4c

Přidáno uživatelem Pavel Fidranský před více než 6 roky(ů)

dropped expanded Group view

Zobrazit rozdíly:

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