fix for zone overlay scaling issues in montage (#2643)

* remove extra px in svg tag

* add js method to track liveStream img size for zones

* switch to using SVG scaling to deal with zone polygons

* update jsdoc for eslint

* fix blank lines eslint issue

web/skins/classic/views/js/montage.js

@@ -204,7 +204,13 @@ function Monitor(monitorData) {
   }
 } // end function Monitor
 
+/**
+ * called when the layoutControl select element is changed, or the page
+ * is rendered
+ * @param {*} element - the event data passed by onchange callback
+ */
 function selectLayout(element) {
+  console.dir(element);
   layout = $j(element).val();
 
   if ( layout_id = parseInt(layout) ) {
@@ -266,14 +272,13 @@ function selectLayout(element) {
         }
         streamImg.style.width = '100%';
       }
-      var zonesSVG = $('zones'+monitor.id);
-      if ( zonesSVG ) {
-        zonesSVG.style.width = '';
-      }
     } // end foreach monitor
   }
 } // end function selectLayout(element)
 
+/**
+ * called when the widthControl|heightControl select elements are changed
+ */
 function changeSize() {
   var width = $('width').get('value');
   var height = $('height').get('value');
@@ -309,11 +314,6 @@ function changeSize() {
       streamImg.style.height = height ? height : null;
       //streamImg.style.height = '';
     }
-    var zonesSVG = $('zones'+monitor.id);
-    if ( zonesSVG ) {
-      zonesSVG.style.width = width ? width : '100%';
-      zonesSVG.style.height = height;
-    }
   }
   $('scale').set('value', '');
   Cookie.write('zmMontageScale', '', {duration: 10*365});
@@ -322,6 +322,9 @@ function changeSize() {
   selectLayout('#zmMontageLayout');
 } // end function changeSize()
 
+/**
+ * called when the scaleControl select element is changed
+ */
 function changeScale() {
   var scale = $('scale').get('value');
   $('width').set('value', 'auto');
@@ -367,11 +370,6 @@ function changeScale() {
       streamImg.style.width = newWidth + "px";
       streamImg.style.height = newHeight + "px";
     }
-    var zonesSVG = $('zones'+monitor.id);
-    if ( zonesSVG ) {
-      zonesSVG.style.width = newWidth + "px";
-      zonesSVG.style.height = newHeight + "px";
-    }
   }
 }
 

web/skins/classic/views/montage.php

@@ -43,6 +43,7 @@ $widths = array(
 $heights = array( 
   'auto'  => 'auto',
   '240px' => '240px',
+  '320px' => '320px',
   '480px' => '480px',
   '720px' => '720px',
   '1080px' => '1080px',
@@ -256,7 +257,6 @@ foreach ( $monitors as $monitor ) {
 
       if ( $scale ) {
         limitPoints($row['Points'], 0, 0, $monitor->Width(), $monitor->Height());
-        scalePoints($row['Points'], $scale);
       } else {
         limitPoints($row['Points'], 0, 0, 
             ( $width ? $width-1 : $monitor->Width()-1 ),
@@ -269,7 +269,7 @@ foreach ( $monitors as $monitor ) {
     } // end foreach Zone
 ?>
 
-<svg class="zones" id="zones<?php echo $monitor->Id() ?>" style="position:absolute; top: 0; left: 0; background: none; width: <?php echo $width ?>px; height: <?php echo $height ?>px;">
+<svg class="zones" id="zones<?php echo $monitor->Id() ?>" style="position:absolute; top: 0; left: 0; background: none; width: 100%; height: 100%;" viewBox="0 0 <?php echo  $monitor->Width() ?> <?php echo  $monitor->Height() ?>" preserveAspectRatio="none">
 <?php
 foreach( array_reverse($zones) as $zone ) {
   echo '<polygon points="'. $zone['AreaCoords'] .'" class="'. $zone['Type'].'" />';