https://terrancelaw.github.io/cow_event/js/visualizationPaneControls.js

1const VisualizationPaneControls = {
2	scaleDelta: 1.4,
3
4	init: function() {
5		const self = this;
6
7		self.initClickZoomInButtonBehaviour();
8		self.initClickZoomOutButtonBehaviour();
9		self.initHoverZoomButtonsBehaviour();
10	},
11	initClickZoomInButtonBehaviour: function() {
12		const self = this;
13
14		$('#vis-pane > .controls > .fa-search-plus')
15			.on('click', onClickZoomInButton);
16
17		function onClickZoomInButton() {
18			var oldPosX = VisualizationPaneSVG.posX;
19			var oldPosY = VisualizationPaneSVG.posY
20			var oldScale = VisualizationPaneSVG.scale;
21			var minScale = VisualizationPaneSVG.minScale;
22			var maxScale = VisualizationPaneSVG.maxScale;
23			var scaleDelta = self.scaleDelta;
24
25			var centreX = $('#vis-pane').width() / 2;
26			var centreY = $('#vis-pane').height() / 2;
27			var oldCentreTranslateX = VisualizationPaneSVG.getCentreTranslateX(oldScale);
28			var oldCentreTranslateY = VisualizationPaneSVG.getCentreTranslateY(oldScale);
29			var targetX = (centreX - oldPosX - oldCentreTranslateX) / oldScale;
30	    	var targetY = (centreY - oldPosY - oldCentreTranslateY) / oldScale;
31	    	var newScale = (oldScale * scaleDelta < minScale) ? minScale : 
32	    				   (oldScale * scaleDelta > maxScale ? maxScale : 
33	    				  	oldScale * scaleDelta);
34	    	var newCentreTranslateX = VisualizationPaneSVG.getCentreTranslateX(newScale);
35	    	var newCentreTranslateY = VisualizationPaneSVG.getCentreTranslateY(newScale);
36	    	var newPosX = centreX - (targetX * newScale + newCentreTranslateX);
37	    	var newPosY = centreY - (targetY * newScale + newCentreTranslateY);
38
39	    	VisualizationPaneSVG.setScale(newScale);
40			VisualizationPaneSVG.setPosX(newPosX);

41			VisualizationPaneSVG.setPosY(newPosY);
42			VisualizationPaneSVG.transform();
43		}
44	},
45	initClickZoomOutButtonBehaviour: function() {
46		const self = this;
47		
48		$('#vis-pane > .controls > .fa-search-minus')
49			.on('click', onClickZoomOutButton);
50
51		function onClickZoomOutButton() {
52			var oldPosX = VisualizationPaneSVG.posX;
53			var oldPosY = VisualizationPaneSVG.posY
54			var oldScale = VisualizationPaneSVG.scale;
55			var minScale = VisualizationPaneSVG.minScale;
56			var maxScale = VisualizationPaneSVG.maxScale;
57			var scaleDelta = self.scaleDelta;
58
59			var centreX = $('#vis-pane').width() / 2;
60			var centreY = $('#vis-pane').height() / 2;
61			var oldCentreTranslateX = VisualizationPaneSVG.getCentreTranslateX(oldScale);
62			var oldCentreTranslateY = VisualizationPaneSVG.getCentreTranslateY(oldScale);
63			var targetX = (centreX - oldPosX - oldCentreTranslateX) / oldScale;
64	    	var targetY = (centreY - oldPosY - oldCentreTranslateY) / oldScale;
65	    	var newScale = (oldScale / scaleDelta < minScale) ? minScale : 
66	    				   (oldScale / scaleDelta > maxScale ? maxScale : 
67	    				  	oldScale / scaleDelta);
68	    	var newCentreTranslateX = VisualizationPaneSVG.getCentreTranslateX(newScale);
69	    	var newCentreTranslateY = VisualizationPaneSVG.getCentreTranslateY(newScale);
70	    	var newPosX = centreX - (targetX * newScale + newCentreTranslateX);
71	    	var newPosY = centreY - (targetY * newScale + newCentreTranslateY);
72
73	    	VisualizationPaneSVG.setScale(newScale);
74			VisualizationPaneSVG.setPosX(newPosX);

75			VisualizationPaneSVG.setPosY(newPosY);
76			VisualizationPaneSVG.transform();
77		}
78	},
79	initHoverZoomButtonsBehaviour: function() {
80		$('#vis-pane > .controls > .fa')
81			.on('mouseenter', onMouseenterZoomButton)
82			.on('mouseleave', onMouseleaveZoomButton);
83
84		function onMouseenterZoomButton() {
85			var offset = $(this).offset();
86			var height = $(this).height();
87			var tooltipText = $(this).attr('tooltip');
88			
89			$('#tooltip')
90				.removeClass()
91				.removeAttr('style')
92				.empty()
93				.addClass('zoom')
94				.css('left', offset.left)
95				.css('top', offset.top + height)
96				.html(tooltipText);
97		}
98
99		function onMouseleaveZoomButton() {
100			$('#tooltip')
101				.removeClass()
102				.removeAttr('style')
103				.empty();
104		}
105	}
106}