Implement #41 - Draggable nav overlay (#45)

* Working code for draggable nav. overlay

* update jsdocs

app/src/drawsteps.js

@@ -729,11 +729,12 @@ function drawResampled(sourceStage, destStage, originalImage, spotScale, sBeam)
  * @param {*} imageObj the original/full-size image to draw
  * @param {*} subregionImage the subregion image (to get the bounds from)
  * @param {number} maxSize (to be removed) the maximum size (width or height) of the stage to fit the image?
+ * @param {Function} updateCallback called when a change is made to the subregion
  * @returns an object with an update function to call for needed redraws and the subregion bounds.
  * @todo remove maxSize if possible?
  * @todo do we really need to return the subregioRect as well?
  */
-function drawGroundtruthImage(stage, imageObj, subregionImage, maxSize=G_BOX_SIZE){
+function drawGroundtruthImage(stage, imageObj, subregionImage, maxSize=G_BOX_SIZE, updateCallback = null){
 
 	var fit = Utils.fitImageProportions(imageObj.naturalWidth, imageObj.naturalHeight, maxSize);
 
@@ -759,10 +760,99 @@ function drawGroundtruthImage(stage, imageObj, subregionImage, maxSize=G_BOX_SIZ
 		fill: "rgba(0,255,255,0.4)",
 		stroke: "#00FFFF",
 		strokeWidth: 1,
-		listening: false,
+		// listening: false,
+		draggable: true,
 		strokeScaleEnabled: false,
 	});
 
+	// Draggable nav-rect
+	// https://github.com/joedf/ImgBeamer/issues/41
+	rect.on('dragmove', function(){
+		constrainRect();
+		applyChangesFromNavRect();
+	});
+	var constrainRect = function(){
+		var rw = rect.width() * rect.scaleX();
+		var rh = rect.height() * rect.scaleY();
+		var ss = stage.size();
+
+		// top left corner limit
+		if (rect.x() < 0) { rect.x(0); }
+		if (rect.y() < 0) { rect.y(0); }
+
+		// bottom right limit
+		if (rect.x() > ss.width - rw) { rect.x(ss.width - rw); }
+		if (rect.y() > ss.height - rh) { rect.y(ss.height - rh); }
+	};
+	stage.on('wheel', function(e) {
+		// code is based on Uitls.MakeZoomHandler()
+		e.evt.preventDefault(); // stop default scrolling
+
+		const scaleFactor = G_ZOOM_FACTOR_PER_TICK;
+		var scaleBy = scaleFactor;
+
+		// Do half rate scaling, if shift is pressed
+		if (e.evt.shiftKey) {
+			scaleBy = 1 +((scaleBy-1) / 2);
+		}
+
+		// calculate scale with direction
+		let direction = e.evt.deltaY > 0 ? -1 : 1;
+		var scale = direction > 0 ? 1.0 / scaleBy : 1.0 * scaleBy;
+
+		// calculate new size
+		var rs = rect.size();
+		var newWidth = rs.width * scale;
+		var newHeigth = rs.height * scale;
+
+		// constrain size
+		var limitW = Math.min(Math.max(newWidth, 1), stage.width());
+		var limitH = Math.min(Math.max(newHeigth, 1), stage.height());
+
+		// get rect center point delta
+		var dx = rect.width() - limitW;
+		var dy = rect.height() - limitH;
+
+		// apply new size
+		rect.size({ width: limitW, height: limitH });
+
+		// center rect based on new size
+		rect.position({
+			x: rect.x() + dx/2,
+			y: rect.y() + dy/2
+		});
+
+		constrainRect();
+		applyChangesFromNavRect();
+	});
+	var applyChangesFromNavRect = function(){
+		// update the subregion view to the new position and zoom based on changes
+		// to the nav-rect by the user
+		var si = subregionImage;
+
+		si.scale({
+			x: stage.width() / rect.width(),
+			y: stage.height() / rect.height(),
+		});
+
+		si.position({
+			x: (stage.x() - rect.x()) * si.scaleX(),
+			y: (stage.y() - rect.y()) * si.scaleY(),
+		});
+
+		// this propagates the changes to the subregion to the rest of the app
+		if (typeof updateCallback == 'function')
+			return updateCallback();
+	};
+	// Grab cursor for nav-rectangle overlay
+	// https://konvajs.org/docs/styling/Mouse_Cursor.html
+	layer.listening(true);
+	rect.on('mouseenter', function () {
+		stage.container().style.cursor = 'grab';
+	}).on('mouseleave', function () {
+		stage.container().style.cursor = 'default';
+	});
+
 	layer.add(image);
 	layer.add(rect);
 

app/src/main.js

@@ -299,7 +299,7 @@ function OnImageLoaded(eImg, stages){
 
 	// draw Sample Ground Truth
 	$(groundtruthMapStage.getContainer()).attr('box_label', 'Sample Ground Truth');
-	var groundtruthMap = drawGroundtruthImage(groundtruthMapStage, eImg, subregionImage, G_BOX_SIZE);
+	var groundtruthMap = drawGroundtruthImage(groundtruthMapStage, eImg, subregionImage, G_BOX_SIZE, doUpdate);
 	var updateGroundtruthMap = groundtruthMap.updateFunc;
 	G_Update_GroundTruth = updateGroundtruthMap;
 

jsdocs/G_MATH_TOFIXED.html

@@ -369,7 +369,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="G_MATH
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Wed Nov 15 2023 15:39:03 GMT-0500 (Eastern Standard Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Feb 01 2024 16:10:19 GMT-0500 (Eastern Standard Time)
 </footer>
 
 <a id="backtotop" href="#"><div>&uarr; Top</div></a>

jsdocs/NRMSE.html

@@ -752,7 +752,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="G_MATH
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Wed Nov 15 2023 15:39:03 GMT-0500 (Eastern Standard Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Feb 01 2024 16:10:19 GMT-0500 (Eastern Standard Time)
 </footer>
 
 <a id="backtotop" href="#"><div>&uarr; Top</div></a>

jsdocs/Utils.html

@@ -8635,7 +8635,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="G_MATH
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Wed Nov 15 2023 15:39:03 GMT-0500 (Eastern Standard Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Feb 01 2024 16:10:19 GMT-0500 (Eastern Standard Time)
 </footer>
 
 <a id="backtotop" href="#"><div>&uarr; Top</div></a>

jsdocs/drawsteps.js.html

@@ -803,11 +803,12 @@ <h1 class="page-title">Source: drawsteps.js</h1>
  * @param {*} imageObj the original/full-size image to draw
  * @param {*} subregionImage the subregion image (to get the bounds from)
  * @param {number} maxSize (to be removed) the maximum size (width or height) of the stage to fit the image?
+ * @param {Function} updateCallback called when a change is made to the subregion
  * @returns an object with an update function to call for needed redraws and the subregion bounds.
  * @todo remove maxSize if possible?
  * @todo do we really need to return the subregioRect as well?
  */
-function drawGroundtruthImage(stage, imageObj, subregionImage, maxSize=G_BOX_SIZE){
+function drawGroundtruthImage(stage, imageObj, subregionImage, maxSize=G_BOX_SIZE, updateCallback = null){
 
 	var fit = Utils.fitImageProportions(imageObj.naturalWidth, imageObj.naturalHeight, maxSize);
 
@@ -833,10 +834,99 @@ <h1 class="page-title">Source: drawsteps.js</h1>
 		fill: "rgba(0,255,255,0.4)",
 		stroke: "#00FFFF",
 		strokeWidth: 1,
-		listening: false,
+		// listening: false,
+		draggable: true,
 		strokeScaleEnabled: false,
 	});
 
+	// Draggable nav-rect
+	// https://github.com/joedf/ImgBeamer/issues/41
+	rect.on('dragmove', function(){
+		constrainRect();
+		applyChangesFromNavRect();
+	});
+	var constrainRect = function(){
+		var rw = rect.width() * rect.scaleX();
+		var rh = rect.height() * rect.scaleY();
+		var ss = stage.size();
+
+		// top left corner limit
+		if (rect.x() &lt; 0) { rect.x(0); }
+		if (rect.y() &lt; 0) { rect.y(0); }
+
+		// bottom right limit
+		if (rect.x() > ss.width - rw) { rect.x(ss.width - rw); }
+		if (rect.y() > ss.height - rh) { rect.y(ss.height - rh); }
+	};
+	stage.on('wheel', function(e) {
+		// code is based on Uitls.MakeZoomHandler()
+		e.evt.preventDefault(); // stop default scrolling
+
+		const scaleFactor = G_ZOOM_FACTOR_PER_TICK;
+		var scaleBy = scaleFactor;
+
+		// Do half rate scaling, if shift is pressed
+		if (e.evt.shiftKey) {
+			scaleBy = 1 +((scaleBy-1) / 2);
+		}
+
+		// calculate scale with direction
+		let direction = e.evt.deltaY > 0 ? -1 : 1;
+		var scale = direction > 0 ? 1.0 / scaleBy : 1.0 * scaleBy;
+
+		// calculate new size
+		var rs = rect.size();
+		var newWidth = rs.width * scale;
+		var newHeigth = rs.height * scale;
+
+		// constrain size
+		var limitW = Math.min(Math.max(newWidth, 1), stage.width());
+		var limitH = Math.min(Math.max(newHeigth, 1), stage.height());
+
+		// get rect center point delta
+		var dx = rect.width() - limitW;
+		var dy = rect.height() - limitH;
+
+		// apply new size
+		rect.size({ width: limitW, height: limitH });
+
+		// center rect based on new size
+		rect.position({
+			x: rect.x() + dx/2,
+			y: rect.y() + dy/2
+		});
+
+		constrainRect();
+		applyChangesFromNavRect();
+	});
+	var applyChangesFromNavRect = function(){
+		// update the subregion view to the new position and zoom based on changes
+		// to the nav-rect by the user
+		var si = subregionImage;
+
+		si.scale({
+			x: stage.width() / rect.width(),
+			y: stage.height() / rect.height(),
+		});
+
+		si.position({
+			x: (stage.x() - rect.x()) * si.scaleX(),
+			y: (stage.y() - rect.y()) * si.scaleY(),
+		});
+
+		// this propagates the changes to the subregion to the rest of the app
+		if (typeof updateCallback == 'function')
+			return updateCallback();
+	};
+	// Grab cursor for nav-rectangle overlay
+	// https://konvajs.org/docs/styling/Mouse_Cursor.html
+	layer.listening(true);
+	rect.on('mouseenter', function () {
+		stage.container().style.cursor = 'grab';
+	}).on('mouseleave', function () {
+		stage.container().style.cursor = 'default';
+	});
+
 	layer.add(image);
 	layer.add(rect);
 
@@ -1154,7 +1244,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="G_MATH
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Wed Nov 15 2023 15:39:03 GMT-0500 (Eastern Standard Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Feb 01 2024 16:10:19 GMT-0500 (Eastern Standard Time)
 </footer>
 
 <a id="backtotop" href="#"><div>&uarr; Top</div></a>

jsdocs/global.html

@@ -1856,7 +1856,7 @@ <h4 class="name" id="UpdateBaseImage"><span class="type-signature"></span>Update
 
 
 
-    <h4 class="name" id="drawGroundtruthImage"><span class="type-signature"></span>drawGroundtruthImage<span class="signature">(stage, imageObj, subregionImage, maxSize)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="drawGroundtruthImage"><span class="type-signature"></span>drawGroundtruthImage<span class="signature">(stage, imageObj, subregionImage, maxSize, updateCallback)</span><span class="type-signature"></span></h4>
 
 
 
@@ -1890,6 +1890,8 @@ <h5>Parameters:</h5>
 
 
 
+        <th>Default</th>
+
 
         <th class="last">Description</th>
     </tr>
@@ -1915,6 +1917,10 @@ <h5>Parameters:</h5>
 
 
 
+                <td class="default">
+
+                </td>
+
 
             <td class="description last">the stage to draw on.</td>
         </tr>
@@ -1938,6 +1944,10 @@ <h5>Parameters:</h5>
 
 
 
+                <td class="default">
+
+                </td>
+
 
             <td class="description last">the original/full-size image to draw</td>
         </tr>
@@ -1961,6 +1971,10 @@ <h5>Parameters:</h5>
 
 
 
+                <td class="default">
+
+                </td>
+
 
             <td class="description last">the subregion image (to get the bounds from)</td>
         </tr>
@@ -1984,11 +1998,44 @@ <h5>Parameters:</h5>
 
 
 
+                <td class="default">
+
+                </td>
+
 
             <td class="description last">(to be removed) the maximum size (width or height) of the stage to fit the image?</td>
         </tr>
 
 
+
+        <tr>
+
+                <td class="name"><code>updateCallback</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">function</span>
+
+
+
+            </td>
+
+
+
+
+                <td class="default">
+
+                    null
+
+                </td>
+
+
+            <td class="description last">called when a change is made to the subregion</td>
+        </tr>
+
+
     </tbody>
 </table>
 
@@ -2026,7 +2073,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="drawsteps.js.html">drawsteps.js</a>, <a href="drawsteps.js.html#line736">line 736</a>
+        <a href="drawsteps.js.html">drawsteps.js</a>, <a href="drawsteps.js.html#line737">line 737</a>
     </li></ul></dd>
 
 
@@ -3853,7 +3900,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="drawsteps.js.html">drawsteps.js</a>, <a href="drawsteps.js.html#line846">line 846</a>
+        <a href="drawsteps.js.html">drawsteps.js</a>, <a href="drawsteps.js.html#line936">line 936</a>
     </li></ul></dd>
 
 
@@ -3926,7 +3973,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="G_MATH
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Wed Nov 15 2023 15:39:03 GMT-0500 (Eastern Standard Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Feb 01 2024 16:10:19 GMT-0500 (Eastern Standard Time)
 </footer>
 
 <a id="backtotop" href="#"><div>&uarr; Top</div></a>