First pass at a Hanging Protocol implementation and editor (LT-131)

Packages/viewerbase/client/components/viewer/gridLayout/gridLayout.html

@@ -0,0 +1,11 @@
+<template name="gridLayout">
+    <div id='imageViewerViewports'>
+        {{ #each viewports }}
+        <div class="viewportContainer" style="height:{{height}}%;width:{{width}}%;">
+            <div class="removable">
+                {{ >imageViewerViewport}}
+            </div>
+        </div>
+        {{ /each }}
+    </div>
+</template>

Packages/viewerbase/client/components/viewer/gridLayout/gridLayout.js

@@ -0,0 +1,38 @@
+Template.gridLayout.helpers({
+    height: function() {
+        var rows = this.rows || 1;
+        return 100 / rows;
+    },
+    width: function() {
+        var columns = this.columns || 1;
+        return 100 / columns;
+    },
+    viewports: function() {
+        var numViewports = this.rows * this.columns;
+        var viewportData = this.viewportData;
+        var numViewportsWithData = this.viewportData.length;
+
+        if (numViewportsWithData < numViewports) {
+            var difference = numViewports - numViewportsWithData;
+            for (var i = 0; i < difference; i++) {
+                viewportData.push({
+                    viewportIndex: numViewportsWithData + i + 1,
+                    rows: this.rows,
+                    columns: this.columns
+                });
+            }
+        } else if (numViewportsWithData > numViewports) {
+            return viewportData.slice(0, numViewports);
+        }
+
+        return viewportData;
+    }
+});
+
+Template.gridLayout.onRendered(function() {
+    OHIF.viewer.updateImageSynchronizer = new cornerstoneTools.Synchronizer('CornerstoneNewImage', cornerstoneTools.updateImageSynchronizer);
+});
+
+Template.gridLayout.onDestroyed(function() {
+    OHIF.viewer.updateImageSynchronizer.destroy();
+});

Packages/viewerbase/client/components/viewer/gridLayout/gridLayout.styl

@@ -0,0 +1,18 @@
+#imageViewerViewports
+  height: 100%
+  width: 100%
+
+  .viewportContainer
+    float: left
+    border: 2px solid #777
+    
+    &.active, &:hover.active
+      border: 2px solid #9A6617
+      
+    &:hover
+      border: 2px solid white
+    
+    .removable
+      width: 100%
+      height: 100%
+      position: relative // Necessary so that the viewportOverlay is on top of the viewports