paper.js/src/text/TextItem.js

/*
 * Paper.js
 *
 * This file is part of Paper.js, a JavaScript Vector Graphics Library,
 * based on Scriptographer.org and designed to be largely API compatible.
 * http://paperjs.org/
 * http://scriptographer.org/
 *
 * Distributed under the MIT license. See LICENSE file for details.
 *
 * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
 * http://lehni.org/ & http://jonathanpuckey.com/
 *
 * All rights reserved.
 */

var TextItem = this.TextItem = Item.extend({
	/** @lends TextItem# */

	/**
	 * @constructs 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
	 */
	initialize: function() {
		this.base();
		this._content = '';
		this._characterStyle = CharacterStyle.create(this);
		this.setCharacterStyle(this._project.getCurrentStyle());
		this._paragraphStyle = ParagraphStyle.create(this);
		this.setParagraphStyle();
	},

	/**
	 * The text contents of the text item.
	 * 
	 * @name TextItem#content
	 * @type String
	 * 
	 * @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));
	 * 
	 * // 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.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();
	 * }
	 */

	_clone: function(copy) {
		copy._content = this._content;
		copy.setCharacterStyle(this._characterStyle);
		copy.setParagraphStyle(this._paragraphStyle);
		return this.base(copy);
	},

	getContent: function() {
		return this._content;
	},

	setContent: function(content) {
		this._changed(Change.CONTENT);
		this._content = content;
	},

	/**
	 * The character style of the text item.
	 * 
	 * @type CharacterStyle
	 * @bean
	 */
	getCharacterStyle: function() {
		return this._characterStyle;
	},

	setCharacterStyle: function(style) {
		this._characterStyle.initialize(style);
	},

	/**
	 * The paragraph style of the text item.
	 * 
	 * @type ParagraphStyle
	 * @bean
	 */
	getParagraphStyle: function() {
		return this._paragraphStyle;
	},

	setParagraphStyle: function(style) {
		this._paragraphStyle.initialize(style);
	}

	/**
	 * {@grouptitle Style Properties}
	 * The font of the text item.
	 * 
	 * @example {@paperscript height=150}
	 * var textItem = new PointText(new Point(20, 80));
	 * textItem.content = 'Hello world.';
	 * textItem.fontSize = 30;
	 * textItem.font = 'times';
	 * 
	 * @name TextItem#font
	 * @default 'sans-serif'
	 * @type String
	 */

	/**
	 * The font size in points of the text item.
	 * 
	 * @name TextItem#fontSize
	 * @default 10
	 * @type Number
	 * 
	 * @example {@paperscript height=150}
	 * var textItem = new PointText(new Point(20, 80));
	 * textItem.content = 'Hello world.';
	 * textItem.fontSize = 30;
	 */

	/**
	 * The justification of the text item.
	 * 
	 * @example {@paperscript height=150 split=false}
	 * // Examples of the different justifications:
	 * 
	 * // Create a vertical line that runs from the top center
	 * // of the view to the bottom center of the view:
	 * var bounds = view.bounds;
	 * var path = new Path(bounds.topCenter, bounds.bottomCenter);
	 * path.strokeColor = 'pink';
	 * 
	 * var textItem = new PointText(view.center - [0, 30]);
	 * textItem.content = 'left justified';
	 * 
	 * var textItem2 = new PointText(view.center);
	 * textItem2.content = 'center justified';
	 * textItem2.justification = 'center';
	 * 
	 * var textItem3 = new PointText(view.center + [0, 30]);
	 * textItem3.content = 'right justified';
	 * textItem3.justification = 'right';
	 * 
	 * @name TextItem#justification
	 * @default 'left'
	 * @type String('left', 'right', 'center')
	 */
});