[html-report] Add panning and wheel zoom for diagram

* add Ctrl + wheel zoom in for diagram only instead of whole page * add panning by mouse left click over the diagram
archimatetool · Nov 10, 2022 · b8c4163 · b8c4163 · evlibra · Jan 7, 2023
1 parent 35b406f
commit b8c4163
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 0 deletions.
diff --git a/com.archimatetool.reports/templates/html/js/frame.js b/com.archimatetool.reports/templates/html/js/frame.js
@@ -210,5 +210,14 @@ $(document).ready(function() {
 			slider.value = ((parseInt(slider.value)) + step);
 			setZoom();
 		}
+		// Register events wheel on root-panel-body
+		document.getElementsByClassName("root-panel-body")[0].addEventListener("wheel", (e) => {
+			// Zooming happens here
+			if (e.ctrlKey) {
+				e.preventDefault()
+				slider.value = ((parseInt(slider.value)) - e.deltaY/10)
+				setZoom()
+			}
+		})
 	}
 });
diff --git a/com.archimatetool.reports/templates/html/js/panelBodyScroller.js b/com.archimatetool.reports/templates/html/js/panelBodyScroller.js
@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const ele = document.getElementsByClassName('root-panel-body')[0];
+  ele.style.cursor = 'grab';
+
+  let pos = { top: 0, left: 0, x: 0, y: 0 };
+  let isBlockLink = false;
+
+  [...ele.getElementsByTagName('area')].forEach((e)=> {
+    e.addEventListener('click', (e)=>{
+      if(isBlockLink) e.preventDefault();
+    });
+  })
+
+  const mouseDownHandler = function (e) {
+    e.preventDefault();
+    ele.style.cursor = 'grabbing';
+    ele.style.userSelect = 'none';
+
+    pos = {
+      left: ele.scrollLeft,
+      top: ele.scrollTop,
+      // Get the current mouse position
+      x: e.clientX,
+      y: e.clientY,
+    };
+
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+  };
+
+  const mouseMoveHandler = function (e) {
+    isBlockLink = true;
+    // How far the mouse has been moved
+    const dx = e.clientX - pos.x;
+    const dy = e.clientY - pos.y;
+
+    // Scroll the element
+    ele.scrollTop = pos.top - dy;
+    ele.scrollLeft = pos.left - dx;
+  };
+
+  const mouseUpHandler = function () {
+    ele.style.cursor = 'grab';
+    ele.style.removeProperty('user-select');
+
+    document.removeEventListener('mousemove', mouseMoveHandler);
+    document.removeEventListener('mouseup', mouseUpHandler);
+
+    setTimeout(() => {
+      isBlockLink = false;
+    }, 100)
+  };
+
+  // Attach the handler
+  ele.addEventListener('mousedown', mouseDownHandler);
+});
diff --git a/com.archimatetool.reports/templates/st/frame.stg b/com.archimatetool.reports/templates/st/frame.stg
@@ -150,6 +150,7 @@ frame(element, map) ::= <<
 	<link type="text/css" rel="stylesheet" href="../../css/i18n.css">
 	<script type="text/javascript" src="../../js/frame.js"></script>
 	<script type="text/javascript" src="../../js/imageMapResizer.min.js"></script>
+	<script type="text/javascript" src="../../js/panelBodyScroller.js"></script>
 </head>
 
 <body>