Merge pull request #7 from LLK/scratch-text

Export and import SVGs with multiline text
This commit is contained in:
Paul Kaplan 2018-03-29 13:39:17 -04:00 committed by GitHub
commit c5745e1c83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 6 deletions

View file

@ -253,9 +253,20 @@ new function() {
}
function exportText(item) {
var node = SvgElement.create('text', getTransform(item._matrix, true),
// Scratch-specific: do not use x/y attributes for text elements
// because they break <tspan> mutliline formatting (below)
var node = SvgElement.create('text', getTransform(item._matrix, false),
formatter);
node.textContent = item._content;
for (var i = 0; i < item._lines.length; i++) {
// Scratch-specific: Use <tspan> for multiline text,
// right now only supports left justified (x=0)
var tspanNode = SvgElement.create('tspan', {
x: '0',
dy: i === 0 ? '0' : item._style.getLeading() + 'px'
}, formatter);
tspanNode.textContent = item._lines[i];
node.appendChild(tspanNode);
}
return node;
}

View file

@ -300,10 +300,27 @@ new function() {
// TODO: Support for these is missing in Paper.js right now
// rotate: character rotation
// lengthAdjust:
var text = new PointText(getPoint(node).add(
getPoint(node, 'dx', 'dy')));
text.setContent(node.textContent.trim() || '');
return text;
// Scratch-specific: Do not use x/y attributes because they break multiline usage.
if (node.childElementCount === 0) {
var text = new PointText();
text.setContent(node.textContent.trim() || '');
// Scratch-specific: Scratch2 SVGs are offset by 1 leading vertically.
// Scratch3 SVGs use <tspan> method for all text (below)
text.translate(0, text._style.getLeading());
return text;
} else {
// Scratch3 SVGs always use <tspan>'s for multiline string support.
// Does not support x/y attribute or tspan positioning beyond left justified.
var lines = [];
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
lines.push(child.textContent);
}
var text = new PointText();
text.setContent(lines.join('\n') || '');
return text;
}
}
};