From e4c4eec55f34215c188325eb669c6cb524503007 Mon Sep 17 00:00:00 2001
From: Kaalleen <36401965+kaalleen@users.noreply.github.com>
Date: Sun, 8 Apr 2018 17:34:35 +0200
Subject: Update inkstitch.js

A first start: zooming and dragging the SVG
---
 print/resources/inkstitch.js | 45 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 2 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 454c9ae2..e804e325 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -26,9 +26,9 @@ function scaleInksimulation() {
 
     if(scale <= 1) {
       transform += " scale(" + scale + ")";
-      label = parseInt(scale*100) + '%';
+      label = parseInt(scale*100);
     } else {
-      label = "100%";
+      label = "100";
     }
 
     $(this).find('svg').css({ transform: transform });
@@ -41,6 +41,47 @@ $(function() {
   setPageNumbers();
   scaleInksimulation();
   
+    /* Mousewheel scaling */
+  $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function ( event ) {
+    var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
+    var scale = parseFloat(transform[0]);
+    if( scale > 0.01 && (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0)) {
+      // scroll down
+      scale -= 0.01;
+    } else {
+      //scroll up
+      scale += 0.01;
+    }
+    // set modified scale
+    transform[0] = scale;
+    transform[3] = scale;
+    $(this).find('svg').css({ transform: 'matrix(' + transform + ')' });
+    
+    // set scale caption text
+    $(this).find("span").text(parseInt(scale*100));
+
+    //prevent page fom scrolling
+    return false;
+  });
+  
+  /* 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) {
+      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 + ')' });
+        $(this).css({cursor: 'auto'});
+      }
+  })  
+  
   /* Contendeditable Fields */
   
   // When we focus out from a contenteditable field, we want to
-- 
cgit v1.2.3


From 15222ed4c39bab5e19b622e9179f7abc88c5b1da Mon Sep 17 00:00:00 2001
From: kalleen <reni@allenka.de>
Date: Mon, 9 Apr 2018 19:20:02 +0200
Subject: add buttons to quickly adjust svg size

---
 print/resources/inkstitch.js | 90 +++++++++++++++++++++++++++++++-------------
 1 file changed, 64 insertions(+), 26 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index e804e325..26e88f38 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -13,49 +13,64 @@ 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%)";
+  element.find('svg').css({ transform: transform });
+  element.find('figcaption span').text(label);
+}
 
-    if(scale <= 1) {
-      transform += " scale(" + scale + ")";
-      label = parseInt(scale*100);
-    } else {
-      label = "100";
-    }
+// set preview svg scale to fit into its box
+function scaleAllSvg(element = "") {
 
-    $(this).find('svg').css({ transform: transform });
-    $(this).find('figcaption span').text(label);
-  });
+  if(element == "") {
+    $('.inksimulation').each(function() {
+      scaleSVG($(this));
+    });
+  }
 }
 
 $(function() {
   setTimeout(ping, 1000);
   setPageNumbers();
-  scaleInksimulation();
+  scaleAllSvg();
   
-    /* Mousewheel scaling */
-  $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function ( event ) {
-    var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
-    var scale = parseFloat(transform[0]);
-    if( scale > 0.01 && (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0)) {
+  /* SCALING AND MOVING SVG  */
+  
+  /* Mousewheel scaling */
+  $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) {
+    
+    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;
-    $(this).find('svg').css({ transform: 'matrix(' + transform + ')' });
+    svg.css({ transform: 'matrix(' + transform + ')' });
     
     // set scale caption text
     $(this).find("span").text(parseInt(scale*100));
@@ -64,6 +79,18 @@ $(function() {
     return false;
   });
   
+  /* Fit SVG */
+  $('button.svg-fit').click(function() {
+    var svgfigure = $(this).closest('figure');
+    scaleSVG(svgfigure, 'fit');
+  });
+  
+  /* Fit 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 });
@@ -88,9 +115,21 @@ $(function() {
   // set the same content to all fields with the same classname
   document.querySelectorAll('[contenteditable="true"]').forEach(function(elem) {
     elem.addEventListener('focusout', function() {
-        var content = $(this).html();
+        var content    = $(this).html();
         var field_name = $(this).attr('data-field-name');
         $('[data-field-name="' + field_name + '"]').html(content);
+        
+        /* change svg scale */
+        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 + ')' });
+        }
+        
     });
   });
   
@@ -98,7 +137,6 @@ $(function() {
       if (e.which == 13) {
           // pressing enter defocuses the element
           this.blur();
-
           // also suppress the enter keystroke to avoid adding a new line
           return false;
       } else {
@@ -145,7 +183,7 @@ $(function() {
   $(':checkbox').change(function() {
     $('.' + this.id).toggle();
     setPageNumbers();
-    scaleInksimulation();
+    scaleAllSvg();
   });
   
 });
-- 
cgit v1.2.3


From 75aa656c2cfb7ee4189c31a6c7a0d23d83b4d03a Mon Sep 17 00:00:00 2001
From: kalleen <reni@allenka.de>
Date: Wed, 11 Apr 2018 18:57:55 +0200
Subject: add apply to all button for svg transforms

---
 print/resources/inkstitch.js | 96 +++++++++++++++++++++++++++-----------------
 1 file changed, 59 insertions(+), 37 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 26e88f38..c6e88e52 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -35,14 +35,23 @@ function scaleSVG(element, scale = 'fit') {
   element.find('figcaption span').text(label);
 }
 
-// set preview svg scale to fit into its box
-function scaleAllSvg(element = "") {
-
-  if(element == "") {
-    $('.inksimulation').each(function() {
-      scaleSVG($(this));
+// 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() {
@@ -54,29 +63,31 @@ $(function() {
   
   /* 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));
+      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;
+      //prevent page fom scrolling
+      return false;
+    }
   });
   
   /* Fit SVG */
@@ -85,7 +96,7 @@ $(function() {
     scaleSVG(svgfigure, 'fit');
   });
   
-  /* Fit SVG */
+  /* Full Size SVG */
   $('button.svg-full').click(function() {
     var svgfigure = $(this).closest('figure');
     scaleSVG(svgfigure, '1');
@@ -96,6 +107,7 @@ $(function() {
       $(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));
@@ -105,21 +117,27 @@ $(function() {
         transform[5] = parseFloat(transform[5]) + parseFloat(p1.y-p0.y);
         // set modified translate
         $(this).find('svg').css({ transform: 'matrix(' + transform + ')' });
-        $(this).css({cursor: 'auto'});
       }
-  })  
+  })
+  
+  /* 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
   document.querySelectorAll('[contenteditable="true"]').forEach(function(elem) {
     elem.addEventListener('focusout', function() {
+        /* change svg scale */
         var content    = $(this).html();
         var field_name = $(this).attr('data-field-name');
-        $('[data-field-name="' + field_name + '"]').html(content);
-        
-        /* change svg scale */
         if(field_name == 'svg-scale') {
           var scale     = parseInt(content);
           var svg       = $(this).parent().siblings('svg');
@@ -129,7 +147,11 @@ $(function() {
           transform[3] = scale / 100;
           svg.css({ transform: 'matrix(' + transform + ')' });
         }
-        
+        /* When we focus out from a contenteditable field, we want to
+           set the same content to all fields with the same classname */
+        else {
+          $('[data-field-name="' + field_name + '"]').html(content);
+        }
     });
   });
   
-- 
cgit v1.2.3


From 85a8b6b1cfe008eed49c678bc0af9e2bea931f3c Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Fri, 13 Apr 2018 21:23:00 -0400
Subject: inkstitch metadata framework

---
 print/resources/inkstitch.js | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 454c9ae2..ed26d367 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -40,19 +40,18 @@ $(function() {
   setTimeout(ping, 1000);
   setPageNumbers();
   scaleInksimulation();
-  
+
   /* Contendeditable Fields */
-  
+
   // When we focus out from a contenteditable field, we want to
   // set the same content to all fields with the same classname
-  document.querySelectorAll('[contenteditable="true"]').forEach(function(elem) {
-    elem.addEventListener('focusout', function() {
-        var content = $(this).html();
-        var field_name = $(this).attr('data-field-name');
-        $('[data-field-name="' + field_name + '"]').html(content);
-    });
+  $('[contenteditable="true"]').on('focusout', function() {
+    var content = $(this).html();
+    var field_name = $(this).attr('data-field-name');
+    $('[data-field-name="' + field_name + '"]').html(content);
+    $.post('/metadata/' + field_name + '/set', {value: content});
   });
-  
+
   $('[contenteditable="true"]').keypress(function(e) {
       if (e.which == 13) {
           // pressing enter defocuses the element
@@ -64,10 +63,10 @@ $(function() {
           return true;
       }
     });
-  
-  
+
+
   /* Settings Bar */
-  
+
   $('button.close').click(function() {
     $.post('/shutdown', {})
      .done(function(data) {
@@ -92,20 +91,20 @@ $(function() {
   $('#close-settings').click(function(){
       $('#settings-ui').hide();
   });
-  
+
   /* Settings */
-  
+
   // Paper Size
   $('select#printing-size').change(function(){
     $('.page').toggleClass('a4');
   });
-  
+
   //Checkbox
   $(':checkbox').change(function() {
     $('.' + this.id).toggle();
     setPageNumbers();
     scaleInksimulation();
   });
-  
+
 });
 
-- 
cgit v1.2.3


From 78532e8efec1b39d8f7b9286508cc10e5050fe69 Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Fri, 13 Apr 2018 23:39:49 -0400
Subject: populate fields on load

---
 print/resources/inkstitch.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index ed26d367..15cf494a 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -48,10 +48,17 @@ $(function() {
   $('[contenteditable="true"]').on('focusout', function() {
     var content = $(this).html();
     var field_name = $(this).attr('data-field-name');
-    $('[data-field-name="' + field_name + '"]').html(content);
+    $('[data-field-name="' + field_name + '"]').text(content);
     $.post('/metadata/' + field_name + '/set', {value: content});
   });
 
+  // load up initial metadata values
+  $.getJSON('/metadata', function(metadata) {
+      $.each(metadata, function(field_name, value) {
+          $('[data-field-name="' + field_name + '"]').text(value);
+      });
+  });
+
   $('[contenteditable="true"]').keypress(function(e) {
       if (e.which == 13) {
           // pressing enter defocuses the element
-- 
cgit v1.2.3


From f9b90d31b7730103e296b0c2509885b07000eac4 Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Sat, 14 Apr 2018 20:39:59 -0400
Subject: round-trip editable fields and checkboxes

---
 print/resources/inkstitch.js | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 15cf494a..8123a31f 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -1,3 +1,12 @@
+$.postJSON = function(url, data, success=null) {
+    return $.ajax(url, {
+                        type: 'POST',
+                        data: JSON.stringify(data),
+                        contentType: 'application/json',
+                        success: success
+                       });
+};
+
 function ping() {
   $.get("/ping")
    .done(function() { setTimeout(ping, 1000) })
@@ -49,13 +58,22 @@ $(function() {
     var content = $(this).html();
     var field_name = $(this).attr('data-field-name');
     $('[data-field-name="' + field_name + '"]').text(content);
-    $.post('/metadata/' + field_name + '/set', {value: content});
+    $.postJSON('/metadata/' + field_name + '/set', {value: content});
   });
 
   // load up initial metadata values
   $.getJSON('/metadata', function(metadata) {
       $.each(metadata, function(field_name, value) {
-          $('[data-field-name="' + field_name + '"]').text(value);
+          $('[data-field-name="' + field_name + '"]').each(function(i, item) {
+              console.log(item);
+              if ($(item).is(':checkbox')) {
+                  console.log("is a checkbox");
+                  $(item).prop('checked', value).trigger('change');
+              } else {
+                  console.log("is not a checkbox");
+                  $(item).text(value);
+              }
+          });
       });
   });
 
@@ -108,9 +126,14 @@ $(function() {
 
   //Checkbox
   $(':checkbox').change(function() {
-    $('.' + this.id).toggle();
+    var checked = $(this).prop('checked');
+    var field_name = $(this).attr('data-field-name');
+
+    $('.' + field_name).toggle(checked);
     setPageNumbers();
     scaleInksimulation();
+
+    $.postJSON('/metadata/' + field_name + '/set', {value: checked});
   });
 
 });
-- 
cgit v1.2.3


From 7b0804562e4ce3b440e67de6cb001ac021326990 Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Mon, 16 Apr 2018 20:17:07 -0400
Subject: add 'save as defaults' button

---
 print/resources/inkstitch.js | 54 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 43 insertions(+), 11 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 8123a31f..ab0b587d 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -58,20 +58,22 @@ $(function() {
     var content = $(this).html();
     var field_name = $(this).attr('data-field-name');
     $('[data-field-name="' + field_name + '"]').text(content);
-    $.postJSON('/metadata/' + field_name + '/set', {value: content});
+    $.postJSON('/settings/' + field_name, {value: content});
   });
 
   // load up initial metadata values
-  $.getJSON('/metadata', function(metadata) {
-      $.each(metadata, function(field_name, value) {
+  $.getJSON('/settings', function(settings) {
+      $.each(settings, function(field_name, value) {
           $('[data-field-name="' + field_name + '"]').each(function(i, item) {
-              console.log(item);
-              if ($(item).is(':checkbox')) {
-                  console.log("is a checkbox");
-                  $(item).prop('checked', value).trigger('change');
+              var item = $(item);
+              if (item.is(':checkbox')) {
+                  item.prop('checked', value).trigger('change');
+              } else if (item.is('img')) {
+                  item.attr('src', value);
+              } else if (item.is('select')) {
+                  item.val(value).trigger('change');
               } else {
-                  console.log("is not a checkbox");
-                  $(item).text(value);
+                  item.text(value);
               }
           });
       });
@@ -121,7 +123,9 @@ $(function() {
 
   // Paper Size
   $('select#printing-size').change(function(){
-    $('.page').toggleClass('a4');
+    var size = $(this).find(':selected').val();
+    $('.page').toggleClass('a4', size == 'a4');
+    $.postJSON('/settings/paper-size', {value: size});
   });
 
   //Checkbox
@@ -133,8 +137,36 @@ $(function() {
     setPageNumbers();
     scaleInksimulation();
 
-    $.postJSON('/metadata/' + field_name + '/set', {value: checked});
+    $.postJSON('/settings/' + field_name, {value: checked});
   });
 
+  // Logo
+  $('#logo-picker').change(function(e) {
+      var file = e.originalEvent.srcElement.files[0];
+      var reader = new FileReader();
+      reader.onloadend = function() {
+          var data = reader.result;
+          $('figure.brandlogo img').attr('src', data);
+          $.postJSON('/settings/logo', {value: data});
+      };
+      reader.readAsDataURL(file);
+  });
+
+  // "save as defaults" button
+  $('#save-settings').click(function(e) {
+      var settings = {};
+      settings["client-overview"] = $("[data-field-name='client-overview']").is(':checked');
+      settings["client-detailedview"] = $("[data-field-name='client-detailedview']").is(':checked');
+      settings["operator-overview"] = $("[data-field-name='operator-overview']").is(':checked');
+      settings["operator-detailedview"] = $("[data-field-name='operator-detailedview']").is(':checked');
+      settings["paper-size"] = $('select#printing-size').find(':selected').val();
+
+      var logo = $("figure.brandlogo img").attr('src');
+      if (logo.startsWith("data:")) {
+          settings["logo"] = logo;
+      }
+
+      $.postJSON('/defaults', {'value': settings});
+  });
 });
 
-- 
cgit v1.2.3


From 51c7febb4ab845f609c2613d3180f8456f38b285 Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Mon, 16 Apr 2018 21:15:39 -0400
Subject: scale proportionally rather than an absolute amount

---
 print/resources/inkstitch.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 253e9243..2323ec7a 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -78,12 +78,14 @@ $(function() {
       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;
+      if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
+        // scroll down = zoom out
+        scale *= 0.97;
+        if (scale < 0.01)
+            scale = 0.01;
       } else {
         //scroll up
-        scale += 0.01;
+        scale *= 1.03;
       }
       
       // set modified scale
-- 
cgit v1.2.3


From 32af3d4f89d7f3bcc26e231223ce64bcd7d22122 Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Tue, 17 Apr 2018 15:01:38 -0400
Subject: tidy up drag code and update continuously

---
 print/resources/inkstitch.js | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 2323ec7a..497b87d4 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -115,21 +115,24 @@ $(function() {
   
   /* Drag SVG */
   $('figure.inksimulation').on('mousedown', function(e) {
-      $(this).data('p0', { x: e.pageX, y: e.pageY });
-      $(this).css({cursor: 'move'});
+    var p0 = { x: e.pageX, y: e.pageY };
+    var start_transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
+    var start_offset = { x: parseFloat(start_transform[4]), y: parseFloat(start_transform[5]) };
+
+    $(this).css({cursor: 'move'});
+    $(this).on('mousemove', function(e) {
+          var p1 = { x: e.pageX, y: e.pageY };
+          // set modified translate
+          var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
+          transform[4] = start_offset.x + (p1.x - p0.x);
+          transform[5] = start_offset.y + (p1.y - p0.y);
+          $(this).find('svg').css({ transform: 'matrix(' + transform + ')' });
+      });
   }).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 + ')' });
-      }
-  })
+    $(this).css({cursor: 'auto'});
+    $(this).data('p0', null);
+    $(this).off('mousemove');
+  });
   
   /* Apply transforms to All */
   $('button.svg-apply').click(function() {
-- 
cgit v1.2.3


From cb1b3756d8d029c7f92e1748e9eb42a78d89b5a2 Mon Sep 17 00:00:00 2001
From: Kaalleen <36401965+kaalleen@users.noreply.github.com>
Date: Wed, 18 Apr 2018 19:20:33 +0200
Subject: Update inkstitch.js

fixed scrolling function event variable
---
 print/resources/inkstitch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 497b87d4..0571f432 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -72,7 +72,7 @@ $(function() {
   
   /* Mousewheel scaling */
   $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) {
-    if(event.ctrlKey == true) {
+    if(e.ctrlKey == true) {
     
       var svg       = $(this).find('svg');
       var transform = svg.css('transform').match(/-?[\d\.]+/g);
-- 
cgit v1.2.3


From 540bf2062a87da5629c7ed98300b39caeffe397f Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Tue, 17 Apr 2018 15:16:50 -0400
Subject: fit scales up svg if necessary

---
 print/resources/inkstitch.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 0571f432..8c5e8fa6 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -33,8 +33,6 @@ function scaleSVG(element, scale = 'fit') {
       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 + ")";
-- 
cgit v1.2.3


From 51741745b0bb691a55b642a2ea938ac74324da2d Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Tue, 17 Apr 2018 15:48:38 -0400
Subject: don't get transform from html

---
 print/resources/inkstitch.js | 53 ++++++++++++++++++--------------------------
 1 file changed, 22 insertions(+), 31 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 8c5e8fa6..825130c8 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -39,24 +39,14 @@ function scaleSVG(element, scale = 'fit') {
   var label = parseInt(scale*100);
 
   element.find('svg').css({ transform: transform });
-  element.find('figcaption span').text(label);
+  element.find('.scale').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));
-          }
-        }
+      if( $(this).find('.inksimulation svg').css('transform') == 'none') {
+        scaleSVG($(this).find('.inksimulation'), 'fit');
       }
     });
 }
@@ -64,7 +54,6 @@ function scaleAllSvg() {
 $(function() {
   setTimeout(ping, 1000);
   setPageNumbers();
-  scaleAllSvg();
   
   /* SCALING AND MOVING SVG  */
   
@@ -92,7 +81,7 @@ $(function() {
       svg.css({ transform: 'matrix(' + transform + ')' });
       
       // set scale caption text
-      $(this).find("span").text(parseInt(scale*100));
+      $(this).find(".scale").text(parseInt(scale*100));
 
       //prevent page fom scrolling
       return false;
@@ -138,7 +127,7 @@ $(function() {
     var scale = transform.match(/-?[\d\.]+/g)[0];
     $('.inksimulation').each(function() {
       $(this).find('svg').css({ transform: transform });
-      $(this).find("span").text(parseInt(scale*100));
+      $(this).find(".scale").text(parseInt(scale*100));
       
     })
   });
@@ -167,20 +156,22 @@ $(function() {
 
   // load up initial metadata values
   $.getJSON('/settings', function(settings) {
-      $.each(settings, function(field_name, value) {
-          $('[data-field-name="' + field_name + '"]').each(function(i, item) {
-              var item = $(item);
-              if (item.is(':checkbox')) {
-                  item.prop('checked', value).trigger('change');
-              } else if (item.is('img')) {
-                  item.attr('src', value);
-              } else if (item.is('select')) {
-                  item.val(value).trigger('change');
-              } else {
-                  item.text(value);
-              }
-          });
-      });
+    $.each(settings, function(field_name, value) {
+        $('[data-field-name="' + field_name + '"]').each(function(i, item) {
+            var item = $(item);
+            if (item.is(':checkbox')) {
+                item.prop('checked', value).trigger('change');
+            } else if (item.is('img')) {
+                item.attr('src', value);
+            } else if (item.is('select')) {
+                item.val(value).trigger('change');
+            } else {
+                item.text(value);
+            }
+        });
+    });
+    // wait until page size is set (if they've specified one) and then scale SVGs to fit
+    setTimeout(function() { scaleAllSvg() }, 500);
   });
 
   $('[contenteditable="true"]').keypress(function(e) {
@@ -229,6 +220,7 @@ $(function() {
   $('select#printing-size').change(function(){
     var size = $(this).find(':selected').val();
     $('.page').toggleClass('a4', size == 'a4');
+    console.log("" + Date.now() + "paper size changed");
     $.postJSON('/settings/paper-size', {value: size});
   });
 
@@ -239,7 +231,6 @@ $(function() {
 
     $('.' + field_name).toggle(checked);
     setPageNumbers();
-    scaleAllSvg();
 
     $.postJSON('/settings/' + field_name, {value: checked});
   });
-- 
cgit v1.2.3


From a5900865c76b4b65c712ef6d39fda9eaae2c5007 Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Wed, 18 Apr 2018 16:09:43 -0400
Subject: save and restore zoom and pan

---
 print/resources/inkstitch.js | 38 +++++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 825130c8..25a5354e 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -51,6 +51,23 @@ function scaleAllSvg() {
     });
 }
 
+var saveTimerHandles = {};
+
+function setSVGTransform(figure, transform) {
+    var field_name = $(figure).data('field-name');
+    var scale = transform.match(/-?[\d\.]+/g)[0];
+    figure.find('svg').css({ transform: transform });
+    figure.find(".scale").text(parseInt(scale*100));
+
+    // avoid spamming updates
+    if (saveTimerHandles[field_name] != null)
+        clearTimeout(saveTimerHandles[field_name]);
+
+    saveTimerHandles[field_name] = setTimeout(function() {
+        $.postJSON('/settings/' + field_name, {value: transform});
+    }, 250);
+}
+
 $(function() {
   setTimeout(ping, 1000);
   setPageNumbers();
@@ -78,10 +95,8 @@ $(function() {
       // set modified scale
       transform[0] = scale;
       transform[3] = scale;
-      svg.css({ transform: 'matrix(' + transform + ')' });
-      
-      // set scale caption text
-      $(this).find(".scale").text(parseInt(scale*100));
+
+      setSVGTransform($(this), 'matrix(' + transform + ')');
 
       //prevent page fom scrolling
       return false;
@@ -113,22 +128,25 @@ $(function() {
           var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
           transform[4] = start_offset.x + (p1.x - p0.x);
           transform[5] = start_offset.y + (p1.y - p0.y);
-          $(this).find('svg').css({ transform: 'matrix(' + transform + ')' });
+
+          // I'd ike to use setSVGTransform() here but this code runs many
+          // times per second and it's just too CPU-intensive.
+          $(this).find('svg').css({transform: 'matrix(' + transform + ')'});
       });
   }).on('mouseup', function(e) {
     $(this).css({cursor: 'auto'});
     $(this).data('p0', null);
     $(this).off('mousemove');
+
+    // set it using setSVGTransform() to ensure that it's saved to the server
+    setSVGTransform($(this), $(this).find('svg').css('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(".scale").text(parseInt(scale*100));
-      
+      setSVGTransform($(this), transform);
     })
   });
 
@@ -165,6 +183,8 @@ $(function() {
                 item.attr('src', value);
             } else if (item.is('select')) {
                 item.val(value).trigger('change');
+            } else if (item.is('figure.inksimulation')) {
+                setSVGTransform(item, value);
             } else {
                 item.text(value);
             }
-- 
cgit v1.2.3


From dc547108e1d85c2dd241d329e0858dced90bf92c Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Wed, 18 Apr 2018 22:30:26 -0400
Subject: handle firefox's window.close() permission denied

---
 print/resources/inkstitch.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

(limited to 'print/resources/inkstitch.js')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 25a5354e..498b1211 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -213,6 +213,18 @@ $(function() {
     $.post('/shutdown', {})
      .done(function(data) {
        window.close();
+
+       /* Chrome and Firefox both have a rule: scripts can only close windows
+        * that they opened.  Chrome seems to have an exception for windows that
+        * were opened by an outside program, so the above works fine.  Firefox
+        * steadfastly refuses to allow us to close the window, so we'll tell
+        * the user (in their language) that they can close it.
+        */
+       setTimeout(function() {
+           document.open();
+           document.write("<html><body>" + data + "</body></html>");
+           document.close();
+       }, 1000);
     });
   });
 
@@ -240,7 +252,6 @@ $(function() {
   $('select#printing-size').change(function(){
     var size = $(this).find(':selected').val();
     $('.page').toggleClass('a4', size == 'a4');
-    console.log("" + Date.now() + "paper size changed");
     $.postJSON('/settings/paper-size', {value: size});
   });
 
-- 
cgit v1.2.3