zoom дерева задач, в самом простом виде #84

templates/repo/issue/tree.tmpl

@@ -70,12 +70,38 @@
 		];
 		</script>
 		
-		<div class="chart Treant loaded" id="TaskTreeChart"></div>
-    
+		<script src="https://unpkg.com/@panzoom/panzoom@4.5.0/dist/panzoom.min.js"></script>
+		
+		<div className="buttons">
+			<input type="button" class="ui green basic button" value="Приблизить" onclick="zoomIn();" />
+			<input type="button" class="ui green basic button" value="Отдалить" onclick="zoomOut();" />
+			<input type="button" class="ui green basic button" value="Исходный размер" onclick="zoomReset();" />
+		</div>
+
+		<div id="panzoomParent">
+			<div id="panZoom" class="pt-40 pb-40">
+				<div class="chart Treant loaded" id="TaskTreeChart"></div>
+			</div>
+		</div>
+
 		{{template "repo/issue/treant_config" .}}
 		
 		<script>
-        new Treant( tree_structure );
+			new Treant( tree_structure );
+
+			let ele = document.getElementById("panZoom")
+			let panzoom = Panzoom(ele)
+			ele.addEventListener('wheel', this.panzoom.zoomWithWheel)
+			
+			function zoomIn() {
+				panzoom.zoomIn();
+			}
+			function zoomOut() {
+				panzoom.zoomOut();
+			}
+			function zoomReset() {
+				panzoom.reset();
+			}
 		</script>