Added generic tools and examples

fixed a bug where rendering was not clipping to the rendering image and could show pixel data from other images

dist/cornerstone.js

@@ -30,7 +30,7 @@ var cornerstoneCore = (function (cornerstoneCore) {
         var imageData = renderCanvasContext.createImageData(image.columns, image.rows);
         cornerstoneCore.storedPixelDataToCanvasImageData(image, lut, imageData.data);
         renderCanvasContext.putImageData(imageData, 0, 0);
-        context.drawImage(renderCanvas, -image.columns / 2, -image.rows / 2);
+        context.drawImage(renderCanvas, 0,0, image.columns, image.rows, -image.columns / 2, -image.rows / 2, image.columns, image.rows);
         context.restore();
     };
 
@@ -434,4 +434,214 @@ var cornerstone = (function (cornerstone, csc) {
     // module/private exports
 
     return cornerstone;
-}(cornerstone, cornerstoneCore));
+}(cornerstone, cornerstoneCore));
+var cornerstoneTools = (function ($, cornerstone, cornerstoneTools) {
+
+    if(cornerstoneTools === undefined) {
+        cornerstoneTools = {};
+    }
+
+    function pan(element, whichMouseButton){
+        $(element).mousedown(function(e) {
+            var lastX = e.pageX;
+            var lastY = e.pageY;
+
+            var mouseButton = e.which;
+
+            if(mouseButton == whichMouseButton) {
+                $(document).mousemove(function(e) {
+                    var deltaX = e.pageX - lastX,
+                        deltaY = e.pageY - lastY ;
+                    lastX = e.pageX;
+                    lastY = e.pageY;
+
+                    var viewport = cornerstone.getViewport(element);
+                    viewport.centerX += (deltaX / viewport.scale);
+                    viewport.centerY += (deltaY / viewport.scale);
+                    cornerstone.setViewport(element, viewport);
+                });
+
+                $(document).mouseup(function(e) {
+                    $(document).unbind('mousemove');
+                    $(document).unbind('mouseup');
+                });
+            }
+        });
+    }
+
+
+    // module/private exports
+    cornerstoneTools.pan = pan;
+
+    return cornerstoneTools;
+}($, cornerstone, cornerstoneTools));
+var cornerstoneTools = (function ($, cornerstone, cornerstoneTools) {
+
+    if(cornerstoneTools === undefined) {
+        cornerstoneTools = {};
+    }
+
+    function scroll(element, imageIds, whichMouseButton){
+        var currentImageIdIndex = 0;
+        if(whichMouseButton == 0) {
+            $(element).on('mousewheel DOMMouseScroll', function(e) {
+                // Firefox e.originalEvent.detail > 0 scroll back, < 0 scroll forward
+                // chrome/safari e.originalEvent.wheelDelta < 0 scroll back, > 0 scroll forward
+                if(e.originalEvent.wheelDelta < 0 || e.originalEvent.detail > 0) {
+                    if(currentImageIdIndex < (imageIds.length - 1)) {
+                        currentImageIdIndex++;
+                        cornerstone.showImage(element, imageIds[currentImageIdIndex]);
+                    }
+                } else {
+                    if(currentImageIdIndex > 0) {
+                        currentImageIdIndex--;
+                        cornerstone.showImage(element, imageIds[currentImageIdIndex]);
+                    }
+                }
+                //prevent page fom scrolling
+                return false;
+            });
+        }
+        else {
+            $(element).mousedown(function(e) {
+                var lastX = e.pageX;
+                var lastY = e.pageY;
+
+                var mouseButton = e.which;
+
+                if(mouseButton == whichMouseButton) {
+                    $(document).mousemove(function(e) {
+                        var deltaX = e.pageX - lastX,
+                            deltaY = e.pageY - lastY ;
+                        lastX = e.pageX;
+                        lastY = e.pageY;
+
+                        if(deltaY < 0) {
+                            if(currentImageIdIndex < (imageIds.length - 1)) {
+                                currentImageIdIndex++;
+                                cornerstone.showImage(element, imageIds[currentImageIdIndex]);
+                            }
+                        } else if(deltaY > 0){
+                            if(currentImageIdIndex > 0) {
+                                currentImageIdIndex--;
+                                cornerstone.showImage(element, imageIds[currentImageIdIndex]);
+                            }
+                        }
+                    });
+
+                    $(document).mouseup(function(e) {
+                        $(document).unbind('mousemove');
+                        $(document).unbind('mouseup');
+                    });
+                }
+            });
+        }
+
+    }
+
+    // module/private exports
+    cornerstoneTools.scroll = scroll;
+
+    return cornerstoneTools;
+}($, cornerstone, cornerstoneTools));
+var cornerstoneTools = (function ($, cornerstone, cornerstoneTools) {
+
+    if(cornerstoneTools === undefined) {
+        cornerstoneTools = {};
+    }
+
+    function windowWidthWindowCenter(element, whichMouseButton){
+        $(element).mousedown(function(e) {
+            var lastX = e.pageX;
+            var lastY = e.pageY;
+
+            var mouseButton = e.which;
+
+            if(mouseButton == whichMouseButton) {
+                $(document).mousemove(function(e) {
+                    var deltaX = e.pageX - lastX,
+                        deltaY = e.pageY - lastY ;
+                    lastX = e.pageX;
+                    lastY = e.pageY;
+
+
+                    var viewport = cornerstone.getViewport(element);
+                    viewport.windowWidth += (deltaX / viewport.scale);
+                    viewport.windowCenter += (deltaY / viewport.scale);
+                    cornerstone.setViewport(element, viewport);
+                });
+
+                $(document).mouseup(function(e) {
+                    $(document).unbind('mousemove');
+                    $(document).unbind('mouseup');
+                });
+            }
+        });
+    }
+
+
+    // module/private exports
+    cornerstoneTools.windowWidthWindowCenter = windowWidthWindowCenter;
+
+    return cornerstoneTools;
+}($, cornerstone, cornerstoneTools));
+var cornerstoneTools = (function ($, cornerstone, cornerstoneTools) {
+
+    if(cornerstoneTools === undefined) {
+        cornerstoneTools = {};
+    }
+
+    function zoom(element, whichMouseButton){
+        if(whichMouseButton == 0) {
+            $(element).on('mousewheel DOMMouseScroll', function(e) {
+                // Firefox e.originalEvent.detail > 0 scroll back, < 0 scroll forward
+                // chrome/safari e.originalEvent.wheelDelta < 0 scroll back, > 0 scroll forward
+                if(e.originalEvent.wheelDelta < 0 || e.originalEvent.detail > 0)
+                {
+                    var viewport = cornerstone.getViewport(element);
+                    viewport.scale -= 0.25;
+                    cornerstone.setViewport(element, viewport);
+                } else {
+                    var viewport = cornerstone.getViewport(element);
+                    viewport.scale += 0.25;
+                    cornerstone.setViewport(element, viewport);
+                }
+                //prevent page fom scrolling
+                return false;
+            });
+        }
+        else {
+            $(element).mousedown(function(e) {
+                var lastX = e.pageX;
+                var lastY = e.pageY;
+
+                var mouseButton = e.which;
+
+                if(mouseButton == whichMouseButton) {
+                    $(document).mousemove(function(e) {
+                        var deltaX = e.pageX - lastX,
+                            deltaY = e.pageY - lastY ;
+                        lastX = e.pageX;
+                        lastY = e.pageY;
+
+                        var viewport = cornerstone.getViewport(element);
+                        viewport.scale += (deltaY / 100);
+                        cornerstone.setViewport(element, viewport);
+                    });
+
+                    $(document).mouseup(function(e) {
+                        $(document).unbind('mousemove');
+                        $(document).unbind('mouseup');
+                    });
+                }
+            });
+        }
+
+    }
+
+
+    // module/private exports
+    cornerstoneTools.zoom = zoom;
+
+    return cornerstoneTools;
+}($, cornerstone, cornerstoneTools));

example/index.html

@@ -24,6 +24,15 @@ <h1>
     </ul>
 
 
+    <h2>Tools</h2>
+    <ul>
+        <li><a href="tools/scroll/index.html">Scroll</a></li>
+        <li><a href="tools/pan/index.html">Pan</a></li>
+        <li><a href="tools/zoom/index.html">Zoom</a></li>
+        <li><a href="tools/windowWidthWindowCenter/index.html">Window Width/ Window Center</a></li>
+        <li><a href="tools/all/index.html">All Tools</a></li>
+    </ul>
+
     Note: This phase was only targeting Google Chrome running on Mac OS X Mavericks.  It also seems to work on these platforms:
 
     <ul>

example/tools/all/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
+    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+
+
+    <style>
+        /* prevents selection when left click dragging */
+        .disable-selection {
+            -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
+        }
+        /* prevents cursor from changing to the i bar on the overlays*/
+        .noIbar {
+            cursor:default;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+
+    <h1>
+        tools/all/index.html
+    </h1>
+
+    This is an example of using all of the cornerstone tools
+
+    <br>
+    <br>
+
+    <ul>
+        <li>Adjust window width / window center by dragging the left mouse button</li>
+        <li>Pan by dragging the middle mouse button</li>
+        <li>Zoom by dragging the right mouse button</li>
+        <li>Scroll by rolling the mouse wheel (MRI image only)</li>
+    </ul>
+
+    <br>
+    <br>
+
+    <div id="dicomImage" oncontextmenu="return false"
+         style="width:256px;height:256px;display:inline-block"
+         class='disable-selection'
+         unselectable='on'
+         onselectstart='return false;'
+         onmousedown='return false;'>
+    </div>
+    <div id="ctImage" oncontextmenu="return false"
+         style="width:256px;height:256px;display:inline-block" class='disable-selection'
+         unselectable='on'
+         onselectstart='return false;'
+         onmousedown='return false;'>
+    </div>
+</body>
+
+<!-- jquery - included to make things easier to demo, not needed or used by cornerstone -->
+<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
+
+<!-- include the cornerstone library -->
+<script src="../../../dist/cornerstone.js"></script>
+
+<!-- include special code for these examples which provides images -->
+<script src="../../exampleImageIdLoader.js"></script>
+
+<!-- include special code for these examples which provides images -->
+<script src="../../exampleImageIdLoaderCt.js"></script>
+
+
+<script>
+
+    var imageIds = [
+        'example://1',
+        'example://2'];
+
+    // image enable the dicomImage element
+    var element = $('#dicomImage').get(0);
+    cornerstone.enable(element, imageIds[0]);
+    cornerstoneTools.windowWidthWindowCenter(element, 1);
+    cornerstoneTools.pan(element, 2);
+    cornerstoneTools.zoom(element, 3);
+    cornerstoneTools.scroll(element, imageIds, 0);
+
+    var ctelement = $('#ctImage').get(0);
+    cornerstone.enable(ctelement, "ctexample://1");
+    cornerstoneTools.windowWidthWindowCenter(ctelement, 1);
+    cornerstoneTools.pan(ctelement, 2);
+    cornerstoneTools.zoom(ctelement, 3);
+
+
+</script>
+</html>

example/tools/pan/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
+    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+
+
+    <style>
+        /* prevents selection when left click dragging */
+        .disable-selection {
+            -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
+        }
+
+    </style>
+</head>
+<body>
+<div class="container">
+
+    <h1>
+        tools/pan/index.html
+    </h1>
+
+    This is an example of using the cornerstone pan tool
+
+    <br>
+    <br>
+
+    Pan by dragging the left mouse button
+    <br>
+    <br>
+
+    <div id="dicomImage" class ="disable-selection" style="width:512px;height:512px"
+         unselectable='on'
+         onselectstart='return false;'
+         onmousedown='return false;'>
+    </div>
+
+
+</div>
+</body>
+
+<!-- jquery - included to make things easier to demo, not needed or used by cornerstone -->
+<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
+
+<!-- include the cornerstone library -->
+<script src="../../../dist/cornerstone.js"></script>
+
+<!-- include special code for these examples which provides images -->
+<script src="../../exampleImageIdLoader.js"></script>
+
+
+<script>
+
+    // image enable the dicomImage element
+    var imageId = 'example://1';
+    var element = $('#dicomImage').get(0);
+    cornerstone.enable(element, imageId);
+    cornerstoneTools.pan(element, 1);
+
+</script>
+</html>