2017-03-15 01:07:58 +00:00
|
|
|
var Class = require('../../utils/Class');
|
2017-04-26 15:03:14 +00:00
|
|
|
var GetValue = require('../../utils/object/GetValue');
|
2017-04-25 17:07:15 +00:00
|
|
|
var GetAdvancedValue = require('../../utils/object/GetAdvancedValue');
|
2017-03-20 16:09:01 +00:00
|
|
|
var MeasureText = require('./MeasureText');
|
2017-03-15 01:07:58 +00:00
|
|
|
|
2017-03-16 17:15:58 +00:00
|
|
|
// Key: [ Object Key, Default Value ]
|
|
|
|
|
|
|
|
var propertyMap = {
|
2017-11-30 17:17:06 +00:00
|
|
|
fontFamily: [ 'fontFamily', 'Courier' ],
|
|
|
|
fontSize: [ 'fontSize', '16px' ],
|
|
|
|
fontStyle: [ 'fontStyle', '' ],
|
2017-03-16 17:15:58 +00:00
|
|
|
backgroundColor: [ 'backgroundColor', null ],
|
2017-11-30 17:17:06 +00:00
|
|
|
color: [ 'color', '#fff' ],
|
2017-03-16 17:15:58 +00:00
|
|
|
stroke: [ 'stroke', '#fff' ],
|
|
|
|
strokeThickness: [ 'strokeThickness', 0 ],
|
|
|
|
shadowOffsetX: [ 'shadow.offsetX', 0 ],
|
|
|
|
shadowOffsetY: [ 'shadow.offsetY', 0 ],
|
|
|
|
shadowColor: [ 'shadow.color', '#000' ],
|
|
|
|
shadowBlur: [ 'shadow.blur', 0 ],
|
|
|
|
shadowStroke: [ 'shadow.stroke', false ],
|
|
|
|
shadowFill: [ 'shadow.fill', false ],
|
|
|
|
align: [ 'align', 'left' ],
|
2017-03-20 16:09:01 +00:00
|
|
|
maxLines: [ 'maxLines', 0 ],
|
|
|
|
fixedWidth: [ 'fixedWidth', false ],
|
2017-03-21 20:25:15 +00:00
|
|
|
fixedHeight: [ 'fixedHeight', false ],
|
2017-11-30 17:17:06 +00:00
|
|
|
rtl: [ 'rtl', false ],
|
|
|
|
testString: [ 'testString', '|MÉqgy' ]
|
2017-03-16 17:15:58 +00:00
|
|
|
};
|
|
|
|
|
2017-03-15 01:07:58 +00:00
|
|
|
var TextStyle = new Class({
|
|
|
|
|
|
|
|
initialize:
|
|
|
|
|
|
|
|
function TextStyle (text, style)
|
|
|
|
{
|
2017-03-16 21:59:50 +00:00
|
|
|
this.parent = text;
|
2017-03-15 01:07:58 +00:00
|
|
|
|
2017-11-30 17:17:06 +00:00
|
|
|
this.fontFamily;
|
|
|
|
this.fontSize;
|
|
|
|
this.fontStyle;
|
2017-03-21 20:25:15 +00:00
|
|
|
this.backgroundColor;
|
2017-11-30 17:17:06 +00:00
|
|
|
this.color;
|
2017-03-21 20:25:15 +00:00
|
|
|
this.stroke;
|
|
|
|
this.strokeThickness;
|
|
|
|
this.shadowOffsetX;
|
|
|
|
this.shadowOffsetY;
|
|
|
|
this.shadowColor;
|
|
|
|
this.shadowBlur;
|
|
|
|
this.shadowStroke;
|
|
|
|
this.shadowFill;
|
|
|
|
this.align;
|
|
|
|
this.maxLines;
|
|
|
|
this.fixedWidth;
|
|
|
|
this.fixedHeight;
|
|
|
|
this.rtl;
|
2017-11-30 17:17:06 +00:00
|
|
|
this.testString;
|
2017-03-21 20:25:15 +00:00
|
|
|
|
2017-11-30 17:17:06 +00:00
|
|
|
this._font;
|
2017-03-16 17:15:58 +00:00
|
|
|
|
2017-11-30 17:17:06 +00:00
|
|
|
// Set to defaults + user style
|
|
|
|
this.setStyle(style, false);
|
2017-03-20 16:09:01 +00:00
|
|
|
|
2017-04-26 15:03:14 +00:00
|
|
|
var metrics = GetValue(style, 'metrics', false);
|
2017-04-26 14:54:23 +00:00
|
|
|
|
|
|
|
// Provide optional TextMetrics in the style object to avoid the canvas look-up / scanning
|
2017-11-30 17:17:06 +00:00
|
|
|
// Doing this is reset if you then change the font of this TextStyle after creation
|
2017-04-26 14:54:23 +00:00
|
|
|
if (metrics)
|
|
|
|
{
|
|
|
|
this.metrics = {
|
2017-04-26 15:03:14 +00:00
|
|
|
ascent: GetValue(metrics, 'ascent', 0),
|
|
|
|
descent: GetValue(metrics, 'descent', 0),
|
|
|
|
fontSize: GetValue(metrics, 'fontSize', 0)
|
2017-04-26 14:54:23 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
this.metrics = MeasureText(this);
|
|
|
|
}
|
2017-03-16 17:15:58 +00:00
|
|
|
},
|
2017-03-15 01:07:58 +00:00
|
|
|
|
2017-11-30 17:17:06 +00:00
|
|
|
setStyle: function (style, updateText)
|
2017-03-21 20:25:15 +00:00
|
|
|
{
|
2017-11-30 17:17:06 +00:00
|
|
|
if (updateText === undefined) { updateText = true; }
|
|
|
|
|
|
|
|
// Avoid type mutation
|
|
|
|
if (style && style.hasOwnProperty('fontSize') && typeof style.fontSize === 'number')
|
|
|
|
{
|
|
|
|
style.fontSize = style.fontSize.toString() + 'px';
|
|
|
|
}
|
|
|
|
|
2017-03-21 20:25:15 +00:00
|
|
|
for (var key in propertyMap)
|
|
|
|
{
|
2017-11-30 17:17:06 +00:00
|
|
|
this[key] = GetAdvancedValue(style, propertyMap[key][0], propertyMap[key][1]);
|
|
|
|
}
|
|
|
|
|
2017-12-01 03:11:57 +00:00
|
|
|
// Allow for 'font' override
|
|
|
|
var font = GetValue(style, 'font', null);
|
|
|
|
|
|
|
|
if (font === null)
|
|
|
|
{
|
|
|
|
this._font = [ this.fontStyle, this.fontSize, this.fontFamily ].join(' ');
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
this._font = font;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Allow for 'fill' to be used in place of 'color'
|
|
|
|
var fill = GetValue(style, 'fill', null);
|
|
|
|
|
|
|
|
if (fill !== null)
|
|
|
|
{
|
|
|
|
this.color = fill;
|
|
|
|
}
|
2017-11-30 17:17:06 +00:00
|
|
|
|
|
|
|
if (updateText)
|
|
|
|
{
|
|
|
|
this.update(true);
|
2017-03-21 20:25:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2017-03-16 21:59:50 +00:00
|
|
|
syncFont: function (canvas, context)
|
|
|
|
{
|
2017-11-30 17:17:06 +00:00
|
|
|
context.font = this._font;
|
2017-03-16 21:59:50 +00:00
|
|
|
context.textBaseline = 'alphabetic';
|
|
|
|
|
2017-11-30 17:17:06 +00:00
|
|
|
context.fillStyle = this.color;
|
2017-03-16 21:59:50 +00:00
|
|
|
context.strokeStyle = this.stroke;
|
|
|
|
|
|
|
|
context.lineWidth = this.strokeThickness;
|
|
|
|
context.lineCap = 'round';
|
|
|
|
context.lineJoin = 'round';
|
|
|
|
},
|
|
|
|
|
2017-03-20 16:48:04 +00:00
|
|
|
syncShadow: function (context, enabled)
|
2017-03-16 21:59:50 +00:00
|
|
|
{
|
2017-03-20 16:48:04 +00:00
|
|
|
if (enabled)
|
2017-03-16 21:59:50 +00:00
|
|
|
{
|
2017-03-21 20:25:15 +00:00
|
|
|
context.shadowOffsetX = this.shadowOffsetX;
|
|
|
|
context.shadowOffsetY = this.shadowOffsetY;
|
|
|
|
context.shadowColor = this.shadowColor;
|
|
|
|
context.shadowBlur = this.shadowBlur;
|
2017-03-16 21:59:50 +00:00
|
|
|
}
|
2017-03-20 16:48:04 +00:00
|
|
|
else
|
|
|
|
{
|
|
|
|
context.shadowOffsetX = 0;
|
|
|
|
context.shadowOffsetY = 0;
|
|
|
|
context.shadowColor = 0;
|
|
|
|
context.shadowBlur = 0;
|
|
|
|
}
|
2017-03-20 16:09:01 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
update: function (recalculateMetrics)
|
|
|
|
{
|
|
|
|
if (recalculateMetrics)
|
2017-03-16 21:59:50 +00:00
|
|
|
{
|
2017-11-30 17:17:06 +00:00
|
|
|
this._font = [ this.fontStyle, this.fontSize, this.fontFamily ].join(' ');
|
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
this.metrics = MeasureText(this);
|
2017-03-16 21:59:50 +00:00
|
|
|
}
|
2017-03-20 16:09:01 +00:00
|
|
|
|
2017-03-20 16:28:09 +00:00
|
|
|
return this.parent.updateText();
|
2017-03-16 21:59:50 +00:00
|
|
|
},
|
|
|
|
|
2017-11-30 17:17:06 +00:00
|
|
|
// Allows you to set them all in a single object
|
|
|
|
setFont: function (font)
|
2017-03-16 17:15:58 +00:00
|
|
|
{
|
2017-12-01 03:11:57 +00:00
|
|
|
if (typeof font === 'string')
|
|
|
|
{
|
|
|
|
this.fontFamily = font;
|
|
|
|
this.fontSize = '';
|
|
|
|
this.fontStyle = '';
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
this.fontFamily = GetValue(font, 'fontFamily', 'Courier');
|
|
|
|
this.fontSize = GetValue(font, 'fontSize', '16px');
|
|
|
|
this.fontStyle = GetValue(font, 'fontStyle', '');
|
|
|
|
}
|
2017-11-30 17:17:06 +00:00
|
|
|
|
|
|
|
return this.update(true);
|
|
|
|
},
|
|
|
|
|
|
|
|
setFontFamily: function (family)
|
|
|
|
{
|
|
|
|
this.fontFamily = family;
|
|
|
|
|
|
|
|
return this.update(true);
|
|
|
|
},
|
|
|
|
|
|
|
|
setFontStyle: function (style)
|
|
|
|
{
|
|
|
|
this.fontStyle = style;
|
|
|
|
|
|
|
|
return this.update(true);
|
|
|
|
},
|
|
|
|
|
|
|
|
setFontSize: function (size)
|
|
|
|
{
|
|
|
|
if (typeof size === 'number')
|
2017-03-16 17:15:58 +00:00
|
|
|
{
|
2017-11-30 17:17:06 +00:00
|
|
|
size = size.toString() + 'px';
|
2017-03-16 17:15:58 +00:00
|
|
|
}
|
2017-03-15 01:07:58 +00:00
|
|
|
|
2017-11-30 17:17:06 +00:00
|
|
|
this.fontSize = size;
|
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
return this.update(true);
|
2017-03-14 16:37:32 +00:00
|
|
|
},
|
2017-03-15 01:07:58 +00:00
|
|
|
|
2017-11-30 17:17:06 +00:00
|
|
|
setTestString: function (string)
|
2017-03-15 01:07:58 +00:00
|
|
|
{
|
2017-11-30 17:17:06 +00:00
|
|
|
this.testString = string;
|
2017-03-15 01:07:58 +00:00
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
return this.update(true);
|
|
|
|
},
|
|
|
|
|
|
|
|
setFixedSize: function (width, height)
|
|
|
|
{
|
|
|
|
this.fixedWidth = width;
|
|
|
|
this.fixedHeight = height;
|
|
|
|
|
|
|
|
if (width)
|
|
|
|
{
|
|
|
|
this.text.width = width;
|
|
|
|
}
|
2017-03-16 21:59:50 +00:00
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
if (height)
|
|
|
|
{
|
|
|
|
this.text.height = height;
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.update(false);
|
2017-03-16 17:15:58 +00:00
|
|
|
},
|
|
|
|
|
2017-03-16 21:59:50 +00:00
|
|
|
setBackgroundColor: function (color)
|
2017-03-16 17:15:58 +00:00
|
|
|
{
|
2017-03-16 21:59:50 +00:00
|
|
|
this.backgroundColor = color;
|
2017-03-16 17:15:58 +00:00
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
return this.update(false);
|
2017-03-16 17:15:58 +00:00
|
|
|
},
|
2017-03-15 01:07:58 +00:00
|
|
|
|
2017-12-01 03:11:57 +00:00
|
|
|
setFill: function (color)
|
|
|
|
{
|
|
|
|
this.color = color;
|
|
|
|
|
|
|
|
return this.update(false);
|
|
|
|
},
|
|
|
|
|
2017-11-30 17:17:06 +00:00
|
|
|
setColor: function (color)
|
2017-03-16 21:59:50 +00:00
|
|
|
{
|
2017-11-30 17:17:06 +00:00
|
|
|
this.color = color;
|
2017-03-16 21:59:50 +00:00
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
return this.update(false);
|
2017-03-16 21:59:50 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
setStroke: function (color, thickness)
|
|
|
|
{
|
|
|
|
if (color === undefined)
|
|
|
|
{
|
|
|
|
// Reset the stroke to zero (disabling it)
|
|
|
|
this.strokeThickness = 0;
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
if (thickness === undefined) { thickness = this.strokeThickness; }
|
|
|
|
|
|
|
|
this.stroke = color;
|
|
|
|
this.strokeThickness = thickness;
|
|
|
|
}
|
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
return this.update(true);
|
2017-03-16 21:59:50 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
setShadow: function (x, y, color, blur, shadowStroke, shadowFill)
|
|
|
|
{
|
2017-03-20 16:48:04 +00:00
|
|
|
if (x === undefined) { x = 0; }
|
2017-03-16 21:59:50 +00:00
|
|
|
if (y === undefined) { y = 0; }
|
|
|
|
if (color === undefined) { color = '#000'; }
|
|
|
|
if (blur === undefined) { blur = 0; }
|
|
|
|
if (shadowStroke === undefined) { shadowStroke = false; }
|
2017-08-11 15:59:29 +00:00
|
|
|
if (shadowFill === undefined) { shadowFill = true; }
|
2017-03-16 21:59:50 +00:00
|
|
|
|
|
|
|
this.shadowOffsetX = x;
|
|
|
|
this.shadowOffsetY = y;
|
|
|
|
this.shadowColor = color;
|
|
|
|
this.shadowBlur = blur;
|
|
|
|
this.shadowStroke = shadowStroke;
|
|
|
|
this.shadowFill = shadowFill;
|
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
return this.update(false);
|
|
|
|
},
|
|
|
|
|
|
|
|
setShadowOffset: function (x, y)
|
|
|
|
{
|
|
|
|
if (x === undefined) { x = 0; }
|
|
|
|
if (y === undefined) { y = x; }
|
|
|
|
|
|
|
|
this.shadowOffsetX = x;
|
|
|
|
this.shadowOffsetY = y;
|
2017-03-16 21:59:50 +00:00
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
return this.update(false);
|
|
|
|
},
|
|
|
|
|
|
|
|
setShadowColor: function (color)
|
|
|
|
{
|
|
|
|
if (color === undefined) { color = '#000'; }
|
|
|
|
|
|
|
|
this.shadowColor = color;
|
|
|
|
|
|
|
|
return this.update(false);
|
|
|
|
},
|
|
|
|
|
|
|
|
setShadowBlur: function (blur)
|
|
|
|
{
|
|
|
|
if (blur === undefined) { blur = 0; }
|
|
|
|
|
|
|
|
this.shadowBlur = blur;
|
|
|
|
|
|
|
|
return this.update(false);
|
|
|
|
},
|
|
|
|
|
|
|
|
setShadowStroke: function (enabled)
|
|
|
|
{
|
|
|
|
this.shadowStroke = enabled;
|
|
|
|
|
|
|
|
return this.update(false);
|
|
|
|
},
|
|
|
|
|
|
|
|
setShadowFill: function (enabled)
|
|
|
|
{
|
|
|
|
this.shadowFill = enabled;
|
|
|
|
|
|
|
|
return this.update(false);
|
2017-03-16 21:59:50 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
setAlign: function (align)
|
|
|
|
{
|
|
|
|
if (align === undefined) { align = 'left'; }
|
|
|
|
|
|
|
|
this.align = align;
|
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
return this.update(false);
|
2017-03-16 21:59:50 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
setMaxLines: function (max)
|
|
|
|
{
|
|
|
|
if (max === undefined) { max = 0; }
|
|
|
|
|
|
|
|
this.maxLines = max;
|
|
|
|
|
2017-03-20 16:09:01 +00:00
|
|
|
return this.update(false);
|
2017-03-16 21:59:50 +00:00
|
|
|
},
|
|
|
|
|
2017-04-26 14:54:23 +00:00
|
|
|
getTextMetrics: function ()
|
|
|
|
{
|
|
|
|
var metrics = this.metrics;
|
|
|
|
|
|
|
|
return {
|
|
|
|
ascent: metrics.ascent,
|
|
|
|
descent: metrics.descent,
|
|
|
|
fontSize: metrics.fontSize
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2017-04-25 17:24:37 +00:00
|
|
|
toJSON: function ()
|
|
|
|
{
|
|
|
|
var output = {};
|
|
|
|
|
|
|
|
for (var key in propertyMap)
|
|
|
|
{
|
|
|
|
output[key] = this[key];
|
|
|
|
}
|
|
|
|
|
2017-04-26 14:54:23 +00:00
|
|
|
output.metrics = this.getTextMetrics();
|
|
|
|
|
2017-04-25 17:24:37 +00:00
|
|
|
return output;
|
|
|
|
},
|
|
|
|
|
2017-03-16 21:59:50 +00:00
|
|
|
destroy: function ()
|
|
|
|
{
|
|
|
|
this.parent = undefined;
|
|
|
|
}
|
|
|
|
|
2017-03-15 01:07:58 +00:00
|
|
|
});
|
2017-03-13 23:38:48 +00:00
|
|
|
|
|
|
|
module.exports = TextStyle;
|