diff --git a/embroider_print.py b/embroider_print.py index fa144d1d7..bc96b2cd0 100644 --- a/embroider_print.py +++ b/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, ) diff --git a/messages.po b/messages.po index c6ff2fde2..92b6aa61d 100644 --- a/messages.po +++ b/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 \n" "Language-Team: LANGUAGE \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 "" diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index ab0b587da..253e92430 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -22,43 +22,144 @@ function setPageNumbers() { }); } -// set preview svg scale to fit into its box -function scaleInksimulation() { - $('.inksimulation').each(function() { +// Scale SVG (fit || full size) +function scaleSVG(element, scale = 'fit') { + + // always center svg + transform = "translate(-50%, -50%)"; + + if(scale == 'fit') { var scale = Math.min( - $(this).width() / $(this).find('svg').width(), - $(this).height() / $(this).find('svg').height() + element.width() / element.find('svg').width(), + 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 - transform = "translate(-50%, -50%)"; + element.find('svg').css({ transform: transform }); + element.find('figcaption span').text(label); +} - if(scale <= 1) { - transform += " scale(" + scale + ")"; - label = parseInt(scale*100) + '%'; - } else { - label = "100%"; - } - - $(this).find('svg').css({ transform: transform }); - $(this).find('figcaption span').text(label); - }); +// 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() { 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); - $.postJSON('/settings/' + field_name, {value: content}); + 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 + ')' }); + } 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}); }); diff --git a/print/resources/style.css b/print/resources/style.css index 8be2370d4..013f567c0 100644 --- a/print/resources/style.css +++ b/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 */ diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html index 25048ab76..38da77466 100644 --- a/print/templates/operator_overview.html +++ b/print/templates/operator_overview.html @@ -25,9 +25,14 @@
-
+
{{ svg_overview|safe }} -
{{ _('Scale') }} {{ svg_scale }}
+
{{ _('Scale') }} {{ svg_transform }}%
+
+ + + +
{% include 'footer.html' %} diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html index 18a70bbaf..eddcf36fa 100644 --- a/print/templates/print_detail.html +++ b/print/templates/print_detail.html @@ -15,9 +15,14 @@
-
+
{{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 f5632cebc..7a396b4a4 100644 --- a/print/templates/print_overview.html +++ b/print/templates/print_overview.html @@ -25,9 +25,14 @@
-
+
{{ svg_overview|safe }} -
{{ _('Scale') }} {{ svg_scale }}
+
{{ _('Scale') }} {{ svg_transform }}%
+
+ + + +