diff --git a/embroider_print.py b/embroider_print.py index 96c3255d2..c0b49bf2c 100644 --- a/embroider_print.py +++ b/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, ) diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 26e88f38a..c6e88e522 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); + } }); }); diff --git a/print/resources/style.css b/print/resources/style.css index 146cfacc5..333af7aa8 100644 --- a/print/resources/style.css +++ b/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 */ diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html index ce28ae8e5..38da77466 100644 --- a/print/templates/operator_overview.html +++ b/print/templates/operator_overview.html @@ -25,12 +25,13 @@
-
+
{{ svg_overview|safe }} -
{{ _('Scale') }} {{ svg_scale }}%
+
{{ _('Scale') }} {{ svg_transform }}%
- + +
diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html index b8b748b36..eddcf36fa 100644 --- a/print/templates/print_detail.html +++ b/print/templates/print_detail.html @@ -15,12 +15,13 @@
-
+
{{color_block.svg_preview|safe}} -
{{ _('Scale') }} {{ svg_scale }}%
+
{{ _('Scale') }} {{ svg_transform }}%
+
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html index d32cf1e99..7a396b4a4 100644 --- a/print/templates/print_overview.html +++ b/print/templates/print_overview.html @@ -25,12 +25,13 @@
-
+
{{ svg_overview|safe }} -
{{ _('Scale') }} {{ svg_scale }}%
+
{{ _('Scale') }} {{ svg_transform }}%
+