1 files changed, 124 insertions, 23 deletions

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index ab0b587d..253e9243 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -22,43 +22,144 @@ function setPageNumbers() {
   });
 }
 
-// set preview svg scale to fit into its box
-function scaleInksimulation() {
-  $('.inksimulation').each(function() {
+// Scale SVG (fit || full size)
+function scaleSVG(element, scale = 'fit') {
+  
+  // always center svg
+  transform = "translate(-50%, -50%)";
+  
+  if(scale == 'fit') {
     var scale = Math.min(
-      $(this).width() / $(this).find('svg').width(),    
-      $(this).height() / $(this).find('svg').height()
+      element.width() / element.find('svg').width(),    
+      element.height() / element.find('svg').height()
     );
+    // Do not scale to more than 100%
+    scale = (scale <= 1) ? scale : 1;
+  }
+  
+  transform += " scale(" + scale + ")";
+  var label = parseInt(scale*100);
 
-    // center the SVG
-    transform = "translate(-50%, -50%)";
-
-    if(scale <= 1) {
-      transform += " scale(" + scale + ")";
-      label = parseInt(scale*100) + '%';
-    } else {
-      label = "100%";
-    }
+  element.find('svg').css({ transform: transform });
+  element.find('figcaption span').text(label);
+}
 
-    $(this).find('svg').css({ transform: transform });
-    $(this).find('figcaption span').text(label);
-  });
+// set preview svg scale to fit into its box if transform is not set
+function scaleAllSvg() {
+    $('.page').each(function() {
+      if( $(this).css('display') != 'none' ) {
+        if( $(this).find('.inksimulation svg').css('transform') == 'none') {
+          if( $(this).find('.inksimulation span').text() == '') {
+            scaleSVG($(this).find('.inksimulation'));
+          } 
+          else {
+            var transform = $(this).find('.inksimulation span').text();
+            var scale = transform.match(/-?[\d\.]+/g)[0];
+            $(this).find('.inksimulation svg').css({ transform: transform });
+            $(this).find('.inksimulation span').text(parseInt(scale*100));
+          }
+        }
+      }
+    });
 }
 
 $(function() {
   setTimeout(ping, 1000);
   setPageNumbers();
-  scaleInksimulation();
+  scaleAllSvg();
+  
+  /* SCALING AND MOVING SVG  */
+  
+  /* Mousewheel scaling */
+  $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) {
+    if(event.ctrlKey == true) {
+    
+      var svg       = $(this).find('svg');
+      var transform = svg.css('transform').match(/-?[\d\.]+/g);
+      var scale     = parseFloat(transform[0]);
+      
+      if( scale > 0.01 && (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0)) {
+        // scroll down
+        scale -= 0.01;
+      } else {
+        //scroll up
+        scale += 0.01;
+      }
+      
+      // set modified scale
+      transform[0] = scale;
+      transform[3] = scale;
+      svg.css({ transform: 'matrix(' + transform + ')' });
+      
+      // set scale caption text
+      $(this).find("span").text(parseInt(scale*100));
+
+      //prevent page fom scrolling
+      return false;
+    }
+  });
+  
+  /* Fit SVG */
+  $('button.svg-fit').click(function() {
+    var svgfigure = $(this).closest('figure');
+    scaleSVG(svgfigure, 'fit');
+  });
+  
+  /* Full Size SVG */
+  $('button.svg-full').click(function() {
+    var svgfigure = $(this).closest('figure');
+    scaleSVG(svgfigure, '1');
+  });
+  
+  /* Drag SVG */
+  $('figure.inksimulation').on('mousedown', function(e) {
+      $(this).data('p0', { x: e.pageX, y: e.pageY });
+      $(this).css({cursor: 'move'});
+  }).on('mouseup', function(e) {
+      $(this).css({cursor: 'auto'});
+      var p0 = $(this).data('p0'),
+        p1 = { x: e.pageX, y: e.pageY },
+        d = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));
+      if (d > 4) {
+        var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
+        transform[4] = parseFloat(transform[4]) + parseFloat(p1.x-p0.x);
+        transform[5] = parseFloat(transform[5]) + parseFloat(p1.y-p0.y);
+        // set modified translate
+        $(this).find('svg').css({ transform: 'matrix(' + transform + ')' });
+      }
+  })
+  
+  /* Apply transforms to All */
+  $('button.svg-apply').click(function() {
+    var transform = $(this).parent().siblings('svg').css('transform');
+    var scale = transform.match(/-?[\d\.]+/g)[0];
+    $('.inksimulation').each(function() {
+      $(this).find('svg').css({ transform: transform });
+      $(this).find("span").text(parseInt(scale*100));
+      
+    })
+  });
 
   /* Contendeditable Fields */
 
-  // When we focus out from a contenteditable field, we want to
-  // set the same content to all fields with the same classname
   $('[contenteditable="true"]').on('focusout', function() {
+        /* change svg scale */
     var content = $(this).html();
     var field_name = $(this).attr('data-field-name');
-    $('[data-field-name="' + field_name + '"]').text(content);
-    $.postJSON('/settings/' + field_name, {value: content});
+    if(field_name == 'svg-scale') {
+      var scale     = parseInt(content);
+      var svg       = $(this).parent().siblings('svg');
+      var transform = svg.css('transform').match(/-?[\d\.]+/g);
+
+      transform[0] = scale / 100;
+      transform[3] = scale / 100;
+      svg.css({ transform: 'matrix(' + transform + ')' });
+    } else {
+      /* When we focus out from a contenteditable field, we want to
+       * set the same content to all fields with the same classname */
+      $('[data-field-name="' + field_name + '"]').html(content);
+      $.postJSON('/settings/' + field_name, {value: content});
+    }
   });
 
   // load up initial metadata values
@@ -135,7 +236,7 @@ $(function() {
 
     $('.' + field_name).toggle(checked);
     setPageNumbers();
-    scaleInksimulation();
+    scaleAllSvg();
 
     $.postJSON('/settings/' + field_name, {value: checked});
   });