paper.js/src/text/TextItem.js

174 lines
4.6 KiB
JavaScript
Raw Normal View History

/*
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey
2014-01-03 19:47:16 -05:00
* http://scratchdisk.com/ & http://jonathanpuckey.com/
*
2011-07-01 06:17:45 -04:00
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
/**
* @name TextItem
*
* @class The TextItem type allows you to create typography. Its functionality
* is inherited by different text item types such as {@link PointText}, and
* {@link AreaText} (coming soon). They each add a layer of functionality
* that is unique to their type, but share the underlying properties and
* functions that they inherit from TextItem.
*
* @extends Item
*/
var TextItem = Item.extend(/** @lends TextItem# */{
2014-08-16 13:24:54 -04:00
_class: 'TextItem',
_boundsSelected: true,
_applyMatrix: false,
_canApplyMatrix: false,
_serializeFields: {
content: null
},
// TextItem doesn't make the distinction between the different bounds,
// so use the same name for all of them
_boundsGetter: 'getBounds',
2014-08-16 13:24:54 -04:00
initialize: function TextItem(arg) {
this._content = '';
this._lines = [];
// Support two forms of item initialization: Passing one object literal
// describing all the different properties to be set, or a point where
// it should be placed (arg).
// See if a point is passed, and if so, pass it on to _initialize().
// If not, it might be a properties object literal.
var hasProps = arg && Base.isPlainObject(arg)
&& arg.x === undefined && arg.y === undefined;
this._initialize(hasProps && arg, !hasProps && Point.read(arguments));
},
2014-08-16 13:24:54 -04:00
_equals: function(item) {
return this._content === item._content;
},
copyContent: function(source) {
this.setContent(source._content);
2014-08-16 13:24:54 -04:00
},
2014-08-16 13:24:54 -04:00
/**
* The text contents of the text item.
*
* @type String
* @bean
*
* @example {@paperscript}
* // Setting the content of a PointText item:
*
* // Create a point-text item at {x: 30, y: 30}:
* var text = new PointText(new Point(30, 30));
* text.fillColor = 'black';
*
* // Set the content of the text item:
* text.content = 'Hello world';
*
* @example {@paperscript}
* // Interactive example, move your mouse over the view below:
*
* // Create a point-text item at {x: 30, y: 30}:
* var text = new PointText(new Point(30, 30));
* text.fillColor = 'black';
*
* text.content = 'Move your mouse over the view, to see its position';
*
* function onMouseMove(event) {
* // Each time the mouse is moved, set the content of
* // the point text to describe the position of the mouse:
* text.content = 'Your position is: ' + event.point.toString();
* }
*/
getContent: function() {
return this._content;
},
2014-08-16 13:24:54 -04:00
setContent: function(content) {
this._content = '' + content;
this._lines = this._content.split(/\r\n|\n|\r/mg);
this._changed(/*#=*/Change.CONTENT);
},
2014-08-16 13:24:54 -04:00
isEmpty: function() {
return !this._content;
},
2014-08-16 13:24:54 -04:00
/**
* {@grouptitle Character Style}
*
* The font-family to be used in text content.
*
* @name TextItem#fontFamily
* @default 'sans-serif'
* @type String
*/
2014-08-16 13:24:54 -04:00
/**
*
* The font-weight to be used in text content.
*
* @name TextItem#fontWeight
* @default 'normal'
* @type String|Number
*/
2014-08-16 13:24:54 -04:00
/**
* The font size of text content, as a number in pixels, or as a string with
* optional units `'px'`, `'pt'` and `'em'`.
2014-08-16 13:24:54 -04:00
*
* @name TextItem#fontSize
* @default 10
* @type Number|String
*/
2014-08-16 13:24:54 -04:00
/**
*
2015-09-06 11:20:01 -04:00
* The font-family to be used in text content, as one string.
2014-08-16 13:24:54 -04:00
* @deprecated use {@link #fontFamily} instead.
*
* @name TextItem#font
* @default 'sans-serif'
* @type String
*/
2014-08-16 13:24:54 -04:00
/**
* The text leading of text content.
*
* @name TextItem#leading
* @default fontSize * 1.2
* @type Number|String
*/
2014-08-16 13:24:54 -04:00
/**
* {@grouptitle Paragraph Style}
*
* The justification of text paragraphs.
*
* @name TextItem#justification
* @default 'left'
* @type String('left', 'right', 'center')
*/
2014-08-16 13:24:54 -04:00
/**
* @private
* @bean
2015-09-06 11:20:01 -04:00
* @deprecated use {@link #style} instead.
2014-08-16 13:24:54 -04:00
*/
getCharacterStyle: '#getStyle',
setCharacterStyle: '#setStyle',
2014-08-16 13:24:54 -04:00
/**
* @private
* @bean
2015-09-06 11:20:01 -04:00
* @deprecated use {@link #style} instead.
2014-08-16 13:24:54 -04:00
*/
getParagraphStyle: '#getStyle',
setParagraphStyle: '#setStyle'
});