kopia lustrzana https://github.com/inkstitch/inkstitch
save and restore zoom and pan
rodzic
b5968dc11f
commit
a5900865c7
|
@ -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() {
|
$(function() {
|
||||||
setTimeout(ping, 1000);
|
setTimeout(ping, 1000);
|
||||||
setPageNumbers();
|
setPageNumbers();
|
||||||
|
@ -78,10 +95,8 @@ $(function() {
|
||||||
// set modified scale
|
// set modified scale
|
||||||
transform[0] = scale;
|
transform[0] = scale;
|
||||||
transform[3] = scale;
|
transform[3] = scale;
|
||||||
svg.css({ transform: 'matrix(' + transform + ')' });
|
|
||||||
|
setSVGTransform($(this), 'matrix(' + transform + ')');
|
||||||
// set scale caption text
|
|
||||||
$(this).find(".scale").text(parseInt(scale*100));
|
|
||||||
|
|
||||||
//prevent page fom scrolling
|
//prevent page fom scrolling
|
||||||
return false;
|
return false;
|
||||||
|
@ -113,22 +128,25 @@ $(function() {
|
||||||
var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
|
var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
|
||||||
transform[4] = start_offset.x + (p1.x - p0.x);
|
transform[4] = start_offset.x + (p1.x - p0.x);
|
||||||
transform[5] = start_offset.y + (p1.y - p0.y);
|
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) {
|
}).on('mouseup', function(e) {
|
||||||
$(this).css({cursor: 'auto'});
|
$(this).css({cursor: 'auto'});
|
||||||
$(this).data('p0', null);
|
$(this).data('p0', null);
|
||||||
$(this).off('mousemove');
|
$(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 */
|
/* Apply transforms to All */
|
||||||
$('button.svg-apply').click(function() {
|
$('button.svg-apply').click(function() {
|
||||||
var transform = $(this).parent().siblings('svg').css('transform');
|
var transform = $(this).parent().siblings('svg').css('transform');
|
||||||
var scale = transform.match(/-?[\d\.]+/g)[0];
|
|
||||||
$('.inksimulation').each(function() {
|
$('.inksimulation').each(function() {
|
||||||
$(this).find('svg').css({ transform: transform });
|
setSVGTransform($(this), transform);
|
||||||
$(this).find(".scale").text(parseInt(scale*100));
|
|
||||||
|
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -165,6 +183,8 @@ $(function() {
|
||||||
item.attr('src', value);
|
item.attr('src', value);
|
||||||
} else if (item.is('select')) {
|
} else if (item.is('select')) {
|
||||||
item.val(value).trigger('change');
|
item.val(value).trigger('change');
|
||||||
|
} else if (item.is('figure.inksimulation')) {
|
||||||
|
setSVGTransform(item, value);
|
||||||
} else {
|
} else {
|
||||||
item.text(value);
|
item.text(value);
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<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 }}
|
{{ svg_overview|safe }}
|
||||||
<figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
|
<figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<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}}
|
{{color_block.svg_preview|safe}}
|
||||||
<figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
|
<figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main class="client-overview-main">
|
<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 }}
|
{{ svg_overview|safe }}
|
||||||
<figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
|
<figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
|
||||||
<div>
|
<div>
|
||||||
|
|
Ładowanie…
Reference in New Issue