Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-03-16 22:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed params for setSuperScript, setSubScript (#4780)

Browse source 
* changed params
* fixed toSVG export
This commit is contained in:
Andrea Bogazzi 2018-03-06 12:36:52 +01:00 committed by GitHub
parent 38f2d5cd99
commit abbeb91763
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 100 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -44,7 +44,7 @@
"build:fast": "node build.js modules=ALL requirejs fast exclude=gestures,accessors",
"build:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm run build_export",
"build_with_gestures": "node build.js modules=ALL exclude=json",
"build_export": "npm run build && npm run export_dist_to_site",
"build_export": "npm run build:fast && npm run export_dist_to_site",
"test": "node test.js",
"lint": "eslint --config .eslintrc.json src",
"lint_tests": "eslint test/unit --config .eslintrc_tests",

7
src/mixins/itext.svg_export.js
View file

@ -88,11 +88,14 @@
_createTextCharSpan: function(_char, styleDecl, left, top) {
var styleProps = this.getSvgSpanStyles(styleDecl, _char !== _char.trim()),
fillStyles = styleProps ? 'style="' + styleProps + '"' : '',
dy = styleDecl.deltaY, dySpan = '',
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
if (dy) {
dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" ';
}
return [
'<tspan x="', toFixed(left, NUM_FRACTION_DIGITS), '" y="',
toFixed(top, NUM_FRACTION_DIGITS), '" ',
toFixed(top, NUM_FRACTION_DIGITS), '" ', dySpan,
fillStyles, '>',
fabric.util.string.escapeXml(_char),
'</tspan>'

48
src/shapes/text.class.js
View file

@ -963,40 +963,41 @@
/**
* Turns the character into a 'superior figure' (i.e. 'superscript')
* @param {Number} line the line number
* @param {Number} char the character number
* @param {Number} start selection start
* @param {Number} end selection end
* @returns {fabric.Text} thisArg
* @chainable
*/
setSuperscript: function(line, char) {
return this._setScript(line, char, this.superscript);
setSuperscript: function(start, end) {
return this._setScript(start, end, this.superscript);
},
/**
* Turns the character into an 'inferior figure' (i.e. 'subscript')
* @param {Number} line the line number
* @param {Number} char the character number
* @param {Number} start selection start
* @param {Number} end selection end
* @returns {fabric.Text} thisArg
* @chainable
*/
setSubscript: function(line, char) {
return this._setScript(line, char, this.subscript);
setSubscript: function(start, end) {
return this._setScript(start, end, this.subscript);
},
/**
* Applies 'schema' at given position
* @private
* @param {Number} line the line number
* @param {Number} char the character number
* @param {Number} key one of {'this.superscript', 'this.subscript'}
* @param {Number} start selection start
* @param {Number} end selection end
* @param {Number} schema
* @returns {fabric.Text} thisArg
* @chainable
*/
_setScript: function(line, char, schema) {
var fontSize = this.getValueOfPropertyAt(line, char, 'fontSize'),
dy = this.getValueOfPropertyAt(line, char, 'deltaY');
this.setPropertyAt(line, char, 'fontSize', fontSize * schema.size);
this.setPropertyAt(line, char, 'deltaY', dy + fontSize * schema.baseline);
_setScript: function(start, end, schema) {
var loc = this.get2DCursorLocation(start, true),
fontSize = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'fontSize'),
dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'),
style = { fontSize: fontSize * schema.size, deltaY: dy + fontSize * schema.baseline };
this.setSelectionStyles(style, start, end);
return this;
},
@ -1119,21 +1120,6 @@
return this[property];
},
/**
* Assigns 'value' to the property 'key' at given character position
* @param {Number} line the line number
* @param {Number} char the character number
* @param {String} key the property name
* @param {Any} value the value
* @returns {Object} this
*/
setPropertyAt: function(line, char, key, value) {
var decl = this._getStyleDeclaration(line, char) || {};
decl[key] = value;
this._setStyleDeclaration(line, char, decl);
return this;
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on

73
test.js
View file

@ -12,42 +12,43 @@ testrunner.run({
deps: './test/fixtures/test_script.js',
code: './dist/fabric.js',
tests: [
'./test/unit/activeselection.js',
'./test/unit/animation.js',
'./test/unit/rect.js',
'./test/unit/ellipse.js',
'./test/unit/color.js',
'./test/unit/circle.js',
'./test/unit/line.js',
'./test/unit/polyline.js',
'./test/unit/polygon.js',
'./test/unit/path.js',
'./test/unit/observable.js',
'./test/unit/object.js',
'./test/unit/text.js',
'./test/unit/util.js',
'./test/unit/brushes.js',
'./test/unit/image.js',
'./test/unit/image_filters.js',
'./test/unit/group.js',
'./test/unit/parser.js',
'./test/unit/canvas.js',
'./test/unit/canvas_static.js',
'./test/unit/gradient.js',
'./test/unit/pattern.js',
'./test/unit/shadow.js',
'./test/unit/object_interactivity.js',
'./test/unit/object_geometry.js',
'./test/unit/object_origin.js',
'./test/unit/itext.js',
'./test/unit/itext_click_behaviour.js',
'./test/unit/itext_key_behaviour.js',
'./test/unit/collection.js',
'./test/unit/point.js',
'./test/unit/intersection.js',
'./test/unit/stateful.js',
'./test/unit/textbox.js',
'./test/unit/canvas_events.js',
// './test/unit/activeselection.js',
// './test/unit/animation.js',
// './test/unit/rect.js',
// './test/unit/ellipse.js',
// './test/unit/color.js',
// './test/unit/circle.js',
// './test/unit/line.js',
// './test/unit/polyline.js',
// './test/unit/polygon.js',
// './test/unit/path.js',
// './test/unit/observable.js',
// './test/unit/object.js',
// './test/unit/text.js',
// './test/unit/util.js',
// './test/unit/brushes.js',
// './test/unit/image.js',
// './test/unit/image_filters.js',
// './test/unit/group.js',
// './test/unit/parser.js',
// './test/unit/canvas.js',
// './test/unit/canvas_static.js',
// './test/unit/gradient.js',
// './test/unit/pattern.js',
// './test/unit/shadow.js',
// './test/unit/object_interactivity.js',
// './test/unit/object_geometry.js',
// './test/unit/object_origin.js',
// './test/unit/itext.js',
// './test/unit/itext_click_behaviour.js',
// './test/unit/itext_key_behaviour.js',
// './test/unit/collection.js',
// './test/unit/point.js',
// './test/unit/intersection.js',
// './test/unit/stateful.js',
// './test/unit/textbox.js',
// './test/unit/canvas_events.js',
'./test/unit/text_to_svg.js',
],
// tests: ['./test/unit/pattern.js'],
}, function(err, report) {

34
test/unit/text.js
View file

@ -6,10 +6,6 @@
return new fabric.Text(text || 'x');
}
function removeTranslate(str) {
return str.replace(/translate\(.*?\)/, '');
}
var CHAR_WIDTH = 20;
var REFERENCE_TEXT_OBJECT = {
@ -59,9 +55,6 @@
'styles': {}
};
var TEXT_SVG = '\t<g transform="translate(10.5 26.72)">\n\t\t<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-10" y="12.57" >x</tspan></text>\n\t</g>\n';
var TEXT_SVG_JUSTIFIED = '\t<g transform="translate(50.5 26.72)">\n\t\t<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-60" y="-13.65" >xxxxxx</tspan><tspan x="-60" y="38.78" style="white-space: pre; ">x </tspan><tspan x=\"40\" y=\"38.78\" >y</tspan></text>\n\t</g>\n';
QUnit.test('constructor', function(assert) {
assert.ok(fabric.Text);
var text = createTextObject();
@ -292,28 +285,6 @@
assert.equal(text.get('fontFamily'), '"Arial Black", Arial');
});
QUnit.test('toSVG', function(assert) {
var text = new fabric.Text('x');
// temp workaround for text objects not obtaining width under node
text.width = CHAR_WIDTH;
assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG));
text.set('fontFamily', '"Arial Black", Arial');
// temp workaround for text objects not obtaining width under node
text.width = CHAR_WIDTH;
assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG.replace('font-family="Times New Roman"', 'font-family="\'Arial Black\', Arial"')));
});
QUnit.test('toSVG justified', function(assert) {
var text = new fabric.Text('xxxxxx\nx y', {
textAlign: 'justify',
});
assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG_JUSTIFIED));
});
QUnit.test('text styleHas', function(assert) {
var text = new fabric.Text('xxxxxx\nx y');
text.styles = { };
@ -690,6 +661,7 @@
var expected = 'overline underline line-through ';
assert.equal(styleString, expected, 'style is as expected with overline underline');
});
QUnit.test('getSvgTextDecoration with overline underline true produces correct output', function(assert){
var iText = new fabric.IText('test foo bar-baz');
var styleObject = {
@ -712,7 +684,7 @@
var schema = text.superscript;
var styleFontSize = text.styles[0][2].fontSize;
var styleDeltaY = text.styles[0][2].deltaY;
text.setSuperscript(0, 1).setSuperscript(0, 2);
text.setSuperscript(1, 2).setSuperscript(2, 3);
assert.equal(text.styles[0][0].fontSize, undefined, 'character 0: fontSize is not set');
assert.equal(text.styles[0][0].deltaY, undefined, 'character 0: deltaY is not set');
@ -734,7 +706,7 @@
var schema = text.subscript;
var styleFontSize = text.styles[0][2].fontSize;
var styleDeltaY = text.styles[0][2].deltaY;
text.setSubscript(0, 1).setSubscript(0, 2);
text.setSubscript(1,2).setSubscript(2,3);
assert.equal(text.styles[0][0].fontSize, undefined, 'character 0: fontSize is not set');
assert.equal(text.styles[0][0].deltaY, undefined, 'character 0: deltaY is not set');

37
test/unit/text_to_svg.js Normal file
View file

@ -0,0 +1,37 @@
(function() {
function removeTranslate(str) {
return str.replace(/translate\(.*?\)/, '');
}
QUnit.module('fabric.Text');
QUnit.test('toSVG', function(assert) {
var TEXT_SVG = '\t<g transform="translate(10.5 26.72)">\n\t\t<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-10" y="12.57" >x</tspan></text>\n\t</g>\n';
var text = new fabric.Text('x');
assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG));
text.set('fontFamily', 'Arial');
assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG.replace('font-family="Times New Roman"', 'font-family="Arial"')));
});
QUnit.test('toSVG justified', function(assert) {
var TEXT_SVG_JUSTIFIED = '\t<g transform="translate(50.5 26.72)">\n\t\t<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-60" y="-13.65" >xxxxxx</tspan><tspan x="-60" y="38.78" style="white-space: pre; ">x </tspan><tspan x=\"40\" y=\"38.78\" >y</tspan></text>\n\t</g>\n';
var text = new fabric.Text('xxxxxx\nx y', {
textAlign: 'justify',
});
assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG_JUSTIFIED));
});
QUnit.test('toSVG with deltaY', function(assert) {
fabric.Object.NUM_FRACTION_DIGITS = 0;
var TEXT_SVG = '\t<g transform="translate(10.5 26.7)">\n\t\t<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-16" y="13" >x</tspan><tspan x="4" y="13" dy="-14" style="font-size: 24px; baseline-shift: 14; ">x</tspan></text>\n\t</g>\n';
var text = new fabric.Text('xx', {
styles: {
0: {
1: {
deltaY: -14,
fontSize: 24,
}
}
}
});
assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG));
fabric.Object.NUM_FRACTION_DIGITS = 2;
});
})();