save and restore zoom and pan

4 files changed, 32 insertions, 12 deletions

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);
             }
diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html
index 59b2e028..367d6d2b 100644
--- a/print/templates/operator_overview.html
+++ b/print/templates/operator_overview.html
@@ -25,7 +25,7 @@
             </div>
         </header>
         <main>
-            <figure class="inksimulation operator" style="height: 210mm;" title="{{ _('Ctrl + Scroll to Zoom') }}">
+            <figure class="inksimulation operator" data-field-name="operator-overview-transform" style="height: 210mm;" title="{{ _('Ctrl + Scroll to Zoom') }}">
                 {{ svg_overview|safe }}
                 <figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
                 <div>
diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html
index d3b064a5..714d33a2 100644
--- a/print/templates/print_detail.html
+++ b/print/templates/print_detail.html
@@ -15,7 +15,7 @@
             </div>
         </header>
         <main>
-            <figure class="inksimulation" title="{{ _('Ctrl + Scroll to Zoom') }}">
+            <figure class="inksimulation" data-field-name="client-detail-transform-block{{ loop.index0 }}" title="{{ _('Ctrl + Scroll to Zoom') }}">
                 {{color_block.svg_preview|safe}}
                 <figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
                 <div>
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html
index 62d2982c..efcf5b2e 100644
--- a/print/templates/print_overview.html
+++ b/print/templates/print_overview.html
@@ -25,7 +25,7 @@
             </div>
         </header>
         <main class="client-overview-main">
-            <figure class="inksimulation" title="{{ _('Ctrl + Scroll to Zoom') }}">
+            <figure class="inksimulation" data-field-name="client-overview-transform" title="{{ _('Ctrl + Scroll to Zoom') }}">
                 {{ svg_overview|safe }}
                 <figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
                 <div>