kopia lustrzana https://github.com/inkstitch/inkstitch
Merge branch 'print-pdf2' into lexelby-print-features
commit
5d0c713403
|
@ -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,
|
||||
)
|
||||
|
||||
|
|
11
messages.po
11
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 <EMAIL@ADDRESS>\n"
|
||||
"Language-Team: LANGUAGE <LL@li.org>\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 ""
|
||||
|
||||
|
|
|
@ -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});
|
||||
});
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -25,9 +25,14 @@
|
|||
</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>{{ 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>
|
||||
</main>
|
||||
{% include 'footer.html' %}
|
||||
|
|
|
@ -15,9 +15,14 @@
|
|||
</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>
|
||||
|
||||
<div class="color-palette detailed">
|
||||
|
|
|
@ -25,9 +25,14 @@
|
|||
</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>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
Ładowanie…
Reference in New Issue