diff options
| -rw-r--r-- | print/resources/inkstitch.js | 38 | ||||
| -rw-r--r-- | print/templates/operator_overview.html | 2 | ||||
| -rw-r--r-- | print/templates/print_detail.html | 2 | ||||
| -rw-r--r-- | print/templates/print_overview.html | 2 |
4 files changed, 32 insertions, 12 deletions
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 825130c8..25a5354e 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -51,6 +51,23 @@ function scaleAllSvg() { }); } +var saveTimerHandles = {}; + +function setSVGTransform(figure, transform) { + var field_name = $(figure).data('field-name'); + var scale = transform.match(/-?[\d\.]+/g)[0]; + figure.find('svg').css({ transform: transform }); + figure.find(".scale").text(parseInt(scale*100)); + + // avoid spamming updates + if (saveTimerHandles[field_name] != null) + clearTimeout(saveTimerHandles[field_name]); + + saveTimerHandles[field_name] = setTimeout(function() { + $.postJSON('/settings/' + field_name, {value: transform}); + }, 250); +} + $(function() { setTimeout(ping, 1000); setPageNumbers(); @@ -78,10 +95,8 @@ $(function() { // set modified scale transform[0] = scale; transform[3] = scale; - svg.css({ transform: 'matrix(' + transform + ')' }); - - // set scale caption text - $(this).find(".scale").text(parseInt(scale*100)); + + setSVGTransform($(this), 'matrix(' + transform + ')'); //prevent page fom scrolling return false; @@ -113,22 +128,25 @@ $(function() { var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g); transform[4] = start_offset.x + (p1.x - p0.x); transform[5] = start_offset.y + (p1.y - p0.y); - $(this).find('svg').css({ transform: 'matrix(' + transform + ')' }); + + // I'd ike to use setSVGTransform() here but this code runs many + // times per second and it's just too CPU-intensive. + $(this).find('svg').css({transform: 'matrix(' + transform + ')'}); }); }).on('mouseup', function(e) { $(this).css({cursor: 'auto'}); $(this).data('p0', null); $(this).off('mousemove'); + + // set it using setSVGTransform() to ensure that it's saved to the server + setSVGTransform($(this), $(this).find('svg').css('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(".scale").text(parseInt(scale*100)); - + setSVGTransform($(this), transform); }) }); @@ -165,6 +183,8 @@ $(function() { item.attr('src', value); } else if (item.is('select')) { item.val(value).trigger('change'); + } else if (item.is('figure.inksimulation')) { + setSVGTransform(item, value); } else { item.text(value); } diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html index 59b2e028..367d6d2b 100644 --- a/print/templates/operator_overview.html +++ b/print/templates/operator_overview.html @@ -25,7 +25,7 @@ </div> </header> <main> - <figure class="inksimulation operator" style="height: 210mm;" title="{{ _('Ctrl + Scroll to Zoom') }}"> + <figure class="inksimulation operator" data-field-name="operator-overview-transform" style="height: 210mm;" title="{{ _('Ctrl + Scroll to Zoom') }}"> {{ svg_overview|safe }} <figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption> <div> diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html index d3b064a5..714d33a2 100644 --- a/print/templates/print_detail.html +++ b/print/templates/print_detail.html @@ -15,7 +15,7 @@ </div> </header> <main> - <figure class="inksimulation" title="{{ _('Ctrl + Scroll to Zoom') }}"> + <figure class="inksimulation" data-field-name="client-detail-transform-block{{ loop.index0 }}" title="{{ _('Ctrl + Scroll to Zoom') }}"> {{color_block.svg_preview|safe}} <figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption> <div> diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html index 62d2982c..efcf5b2e 100644 --- a/print/templates/print_overview.html +++ b/print/templates/print_overview.html @@ -25,7 +25,7 @@ </div> </header> <main class="client-overview-main"> - <figure class="inksimulation" title="{{ _('Ctrl + Scroll to Zoom') }}"> + <figure class="inksimulation" data-field-name="client-overview-transform" title="{{ _('Ctrl + Scroll to Zoom') }}"> {{ svg_overview|safe }} <figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption> <div> |