Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Check font faces markup for objects within groups #6195

Merged
merged 6 commits into from
Mar 4, 2020
Merged

Check font faces markup for objects within groups #6195

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b3f8aa2
Check font faces markup for objects within groups
yassilah Feb 28, 2020
978ddd8
Get nested objects
yassilah Feb 29, 2020
61a0ed3
Add test: toSVGWithFontsInGroups (eslint)
yassilah Mar 2, 2020
383c433
only use DOMParser
yassilah Mar 3, 2020
78b1693
original dist
yassilah Mar 3, 2020
0ea4e80
Update tests
yassilah Mar 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/static_canvas.class.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1399,7 +1399,14 @@
createSVGFontFacesMarkup: function() {
var markup = '', fontList = { }, obj, fontFamily,
style, row, rowIndex, _char, charIndex, i, len,
fontPaths = fabric.fontPaths, objects = this._objects;
fontPaths = fabric.fontPaths, objects = [];

this._objects.forEach(function add(object) {
objects.push(object);
if (object._objects) {
object._objects.forEach(add);
}
});

for (i = 0, len = objects.length; i < len; i++) {
obj = objects[i];
Expand Down
40 changes: 40 additions & 0 deletions test/unit/itext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -676,6 +676,46 @@
assert.equal(style, '\n\t\t@font-face {\n\t\t\tfont-family: \'Plaster\';\n\t\t\tsrc: url(\'path-to-plaster-font-file\');\n\t\t}\n\t\t@font-face {\n\t\t\tfont-family: \'Engagement\';\n\t\t\tsrc: url(\'path-to-engagement-font-file\');\n\t\t}\n');
});

QUnit.test('toSVGWithFontsInGroups', function(assert) {
var iText1 = new fabric.IText('test foo bar-baz\nqux', {
styles: {
0: {
0: { fill: '#112233' },
2: { stroke: '#223344', fontFamily: 'Engagement' },
3: { backgroundColor: '#00FF00' }
}
},
fontFamily: 'Plaster'
});
var iText2 = new fabric.IText('test foo bar-baz\nqux\n2', {
styles: {
0: {
0: { fill: '#112233', fontFamily: 'Plaster' },
2: { stroke: '#223344' },
3: { backgroundColor: '#00FF00' }
}
},
fontFamily: 'Engagement'
});
fabric.fontPaths = {
Engagement: 'path-to-engagement-font-file',
Plaster: 'path-to-plaster-font-file'
};
var subGroup = new fabric.Group([iText1]);
var group = new fabric.Group([subGroup, iText2]);
canvas.add(group);
assert.equal(typeof iText1.toSVG, 'function');
assert.equal(typeof iText2.toSVG, 'function');
var parser = new DOMParser();
var svgString = canvas.toSVG(),
doc = parser.parseFromString(svgString, 'image/svg+xml'),
style = doc.getElementsByTagName('style')[0].firstChild.data;
assert.equal(
style,
'\n\t\t@font-face {\n\t\t\tfont-family: \'Plaster\';\n\t\t\tsrc: url(\'path-to-plaster-font-file\');\n\t\t}\n\t\t@font-face {\n\t\t\tfont-family: \'Engagement\';\n\t\t\tsrc: url(\'path-to-engagement-font-file\');\n\t\t}\n'
);
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i would ask you if you could make up 2 additional font names. We have Plaster and Engagement, used in style and object props. If we had 4 names instead of 2, we could be sure that everyone is captured.


QUnit.test('space wrap attribute', function(assert) {
var iText = new fabric.IText('test foo bar-baz\nqux');
iText.enterEditing();
Expand Down