add apply to all button for svg transforms

embroider_print.py

@@ -295,7 +295,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,
         )
 

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
+// set preview svg scale to fit into its box if transform is not set
-function scaleAllSvg(element = "") {
+function scaleAllSvg() {
-
+    $('.page').each(function() {
-  if(element == "") {
+      if( $(this).css('display') != 'none' ) {
-    $('.inksimulation').each(function() {
+        if( $(this).find('.inksimulation svg').css('transform') == 'none') {
-      scaleSVG($(this));
+          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,6 +63,7 @@ $(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);
@@ -77,6 +87,7 @@ $(function() {
 
       //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);
+        }
     });
   });
   

print/resources/style.css

@@ -393,6 +393,8 @@ body {
     font-weight: bold;
     line-height: 12pt;
     margin: 2.5mm;
+    background: rgba(255, 255, 255, 0.73);
+    padding: 5px;
   }
   
   figure.inksimulation div {
@@ -400,6 +402,15 @@ body {
     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,12 +25,13 @@
             </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 data-field-name="svg-scale" contenteditable="true" data-placeholder="Enter scale...">{{ 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-fit">{{ _('Fit') }}</button>
                   <button class="svg-full">100%</button>
+                  <button class="svg-apply">{{ _('Apply to all') }}</button>
                 </div>
             </figure>
         </main>

print/templates/print_detail.html

@@ -15,12 +15,13 @@
             </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> 
             

print/templates/print_overview.html

@@ -25,12 +25,13 @@
             </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>