add buttons to quickly adjust svg size

print/resources/inkstitch.js

@@ -13,49 +13,64 @@ function setPageNumbers() {
   });
 }
 
-// set preview svg scale to fit into its box
+// Scale SVG (fit || full size)
-function scaleInksimulation() {
+function scaleSVG(element, scale = 'fit') {
-  $('.inksimulation').each(function() {
+  
+  // always center svg
+  transform = "translate(-50%, -50%)";
+  
+  if(scale == 'fit') {
     var scale = Math.min(
-      $(this).width() / $(this).find('svg').width(),    
+      element.width() / element.find('svg').width(),    
-      $(this).height() / $(this).find('svg').height()
+      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
+  element.find('svg').css({ transform: transform });
-    transform = "translate(-50%, -50%)";
+  element.find('figcaption span').text(label);
+}
 
-    if(scale <= 1) {
+// set preview svg scale to fit into its box
-      transform += " scale(" + scale + ")";
+function scaleAllSvg(element = "") {
-      label = parseInt(scale*100);
-    } else {
-      label = "100";
-    }
 
-    $(this).find('svg').css({ transform: transform });
+  if(element == "") {
-    $(this).find('figcaption span').text(label);
+    $('.inksimulation').each(function() {
-  });
+      scaleSVG($(this));
+    });
+  }
 }
 
 $(function() {
   setTimeout(ping, 1000);
   setPageNumbers();
-  scaleInksimulation();
+  scaleAllSvg();
   
-    /* Mousewheel scaling */
+  /* SCALING AND MOVING SVG  */
-  $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function ( event ) {
+  
-    var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
+  /* Mousewheel scaling */
-    var scale = parseFloat(transform[0]);
+  $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) {
-    if( scale > 0.01 && (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0)) {
+    
+    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();
   });
   
 });

print/resources/style.css

@@ -69,6 +69,10 @@
         page-break-after: always;
         margin: 0 !important;
     }
+    
+    figure.inksimulation div {
+      display: none;
+    }
 
     .ui {
       display: none;
@@ -390,6 +394,13 @@ body {
     line-height: 12pt;
     margin: 2.5mm;
   }
+  
+  figure.inksimulation div {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
 
 /* Color Swatches */
 

print/templates/operator_overview.html

@@ -25,9 +25,13 @@
             </div>
         </header>
         <main>
-          <figure class="inksimulation operator" style="height: 210mm;">
+            <figure class="inksimulation operator" style="height: 210mm;">
                 {{ svg_overview|safe }}
-                <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span>%</figcaption>
+                <figcaption>{{ _('Scale') }} <span data-field-name="svg-scale" contenteditable="true" data-placeholder="Enter scale...">{{ svg_scale }}</span>%</figcaption>
+                <div>
+                  <button class="svg-fit">Fit</button>
+                  <button class="svg-full">100%</button>
+                </div>
             </figure>
         </main>
         {% include 'footer.html' %}

print/templates/print_detail.html

@@ -18,6 +18,10 @@
             <figure class="inksimulation">
                 {{color_block.svg_preview|safe}}
                 <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span>%</figcaption>
+                <div>
+                  <button class="svg-fit">Fit</button>
+                  <button class="svg-full">100%</button>
+                </div>
             </figure> 
             
             <div class="color-palette detailed">

print/templates/print_overview.html

@@ -28,6 +28,10 @@
             <figure class="inksimulation">
                 {{ svg_overview|safe }}
                 <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span>%</figcaption>
+                <div>
+                  <button class="svg-fit">Fit</button>
+                  <button class="svg-full">100%</button>
+                </div>
             </figure> 
             
             <div class="color-palette">