Merge branch 'print-pdf2' into lexelby-print-features

embroider_print.py

@@ -343,7 +343,7 @@ class Print(InkstitchExtension):
                     'estimated_thread': '', # TODO
                   },
             svg_overview = overview_svg,
-            svg_scale = '100%',
+            svg_transform = '', # Format: matrix(0.2, 0, 0, 0.2, 0, 0)
             color_blocks = stitch_plan.color_blocks,
         )
 

messages.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2018-04-16 20:17-0400\n"
+"POT-Creation-Date: 2018-04-16 21:03-0400\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -363,9 +363,18 @@ msgstr ""
 msgid "Job estimated time"
 msgstr ""
 
+msgid "Ctrl + Scroll to Zoom"
+msgstr ""
+
 msgid "Scale"
 msgstr ""
 
+msgid "Fit"
+msgstr ""
+
+msgid "Apply to all"
+msgstr ""
+
 msgid "COLOR"
 msgstr ""
 

print/resources/inkstitch.js

@@ -22,43 +22,144 @@ 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 if transform is not set
-      transform += " scale(" + scale + ")";
+function scaleAllSvg() {
-      label = parseInt(scale*100) + '%';
+    $('.page').each(function() {
-    } else {
+      if( $(this).css('display') != 'none' ) {
-      label = "100%";
+        if( $(this).find('.inksimulation svg').css('transform') == 'none') {
-    }
+          if( $(this).find('.inksimulation span').text() == '') {
-
+            scaleSVG($(this).find('.inksimulation'));
-    $(this).find('svg').css({ transform: transform });
+          } 
-    $(this).find('figcaption span').text(label);
+          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);
+    if(field_name == 'svg-scale') {
-    $.postJSON('/settings/' + field_name, {value: content});
+      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});
   });

print/resources/style.css

@@ -69,6 +69,10 @@
         page-break-after: always;
         margin: 0 !important;
     }
+    
+    figure.inksimulation div {
+      display: none;
+    }
 
     .ui {
       display: none;
@@ -412,6 +416,24 @@ body {
     font-weight: bold;
     line-height: 12pt;
     margin: 2.5mm;
+    background: rgba(255, 255, 255, 0.73);
+    padding: 5px;
+  }
+  
+  figure.inksimulation div {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: fit-content;
+  }
+  
+  figure.inksimulation button {
+    border: none;
+    background: grey;
+    color: white;
   }
 
 /* Color Swatches */

print/templates/operator_overview.html

@@ -25,9 +25,14 @@
             </div>
         </header>
         <main>
-          <figure class="inksimulation operator" style="height: 210mm;">
+            <figure class="inksimulation operator" style="height: 210mm;" title="{{ _('Ctrl + Scroll to Zoom') }}">
                 {{ 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_transform }}</span>%</figcaption>
+                <div>
+                  <button class="svg-fit">{{ _('Fit') }}</button>
+                  <button class="svg-full">100%</button>
+                  <button class="svg-apply">{{ _('Apply to all') }}</button>
+                </div>
             </figure>
         </main>
         {% include 'footer.html' %}

print/templates/print_detail.html

@@ -15,9 +15,14 @@
             </div>
         </header>
         <main>
-            <figure class="inksimulation">
+            <figure class="inksimulation" title="{{ _('Ctrl + Scroll to Zoom') }}">
                 {{color_block.svg_preview|safe}}
-                <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span></figcaption>
+                <figcaption>{{ _('Scale') }} <span data-field-name="svg-scale" contenteditable="true" data-placeholder="Enter scale...">{{ svg_transform }}</span>%</figcaption>
+                <div>
+                  <button class="svg-fit">Fit</button>
+                  <button class="svg-full">100%</button>
+                  <button class="svg-apply">Apply to all</button>
+                </div>
             </figure> 
             
             <div class="color-palette detailed">

print/templates/print_overview.html

@@ -25,9 +25,14 @@
             </div>
         </header>
         <main class="client-overview-main">
-            <figure class="inksimulation">
+            <figure class="inksimulation" title="{{ _('Ctrl + Scroll to Zoom') }}">
                 {{ 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_transform }}</span>%</figcaption>
+                <div>
+                  <button class="svg-fit">Fit</button>
+                  <button class="svg-full">100%</button>
+                  <button class="svg-apply">Apply to all</button>
+                </div>
             </figure> 
             
             <div class="color-palette">