├── LICENSE
├── README.md
└── raphael.inline_text_editing.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2013 Emmanuel Quentin, marmelab
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Raphaël.InlineTextEditing
 2 | ====================
 3 | 
 4 | 
 5 | <table>
 6 |         <tr>
 7 |             <td><img width="20" src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/archive.svg" alt="archived" /></td>
 8 |             <td><strong>Archived Repository</strong><br />
 9 |             This code is no longer maintained. Feel free to fork it, but use it at your own risks.
10 |         </td>
11 |         </tr>
12 | </table>
13 | 
14 | Inline text editing tool for [Raphaël 2.0](http://raphaeljs.com/) & compatible with [Raphaël Free transform](https://github.com/ElbertF/Raphael.FreeTransform).
15 | Supports SVG text elements with any type of transformation (scale, rotate, translate, matrix).
16 | 
17 | [See demo](http://marmelab.github.io/Raphael.InlineTextEditing/)
18 | 
19 |  *Licensed under the [MIT license](LICENSE).*
20 | 
21 | Example
22 | -------
23 | 
24 | ```javascript
25 | var paper = Raphael(document.getElementById('container'), 740, 540);
26 | var text = paper.text(250, 250, 'Hello').attr({'text-anchor': 'start', 'font-size': '25px'}).transform(['T', 242, -174, 'R', 36.9973, 'S', 2.0631, 1]);
27 | 
28 | // Initialize text editing for the text element
29 | paper.inlineTextEditing(text);
30 | 
31 | // Start inline editing on click
32 | text.click(function(){
33 | 	// Retrieve created <input type=text> field
34 | 	var input = this.inlineTextEditing.startEditing();
35 | 
36 | 	input.addEventListener("blur", function(e){
37 | 		// Stop inline editing after blur on the text field
38 | 		text.inlineTextEditing.stopEditing();
39 | 	}, true);
40 | });
41 | ```
42 | 
43 | Functions
44 | ---------
45 | #### `startEditing()`
46 | Hide initialized text and add HTML input text at the same position.
47 | 
48 | Returns this text field.
49 | 
50 | #### `stopEditing()`
51 | Remove the text field added with startEditing() and apply text modifications.
52 | 
53 | 
54 | TODO
55 | ----
56 | * Fix long text positionning when scaled
57 | * Allow webfonts
58 | 


--------------------------------------------------------------------------------
/raphael.inline_text_editing.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Inline text editing tool for Raphaël 2.0 & compatible with Raphaël Free transform.
  3 |  * Source: https://github.com/marmelab/Raphael.InlineTextEditing
  4 |  * Licensed under the MIT license
  5 |  */
  6 | (function (root, factory) {
  7 | 	if (typeof define === "function" && define.amd) {
  8 | 		// AMD. Register as an anonymous module.
  9 | 		define(["raphael"], function(Raphael) {
 10 | 			// Use global variables if the locals are undefined.
 11 | 			return factory(Raphael || root.Raphael);
 12 | 		});
 13 | 	} else {
 14 | 		// RequireJS isn't being used. Assume Raphael is loaded in <script> tag
 15 | 		factory(Raphael);
 16 | 	}
 17 | }(this, function(Raphael) {
 18 | 
 19 | 	Raphael.fn.inlineTextEditing = function(subject, options, callback) {
 20 | 
 21 | 		// Store instance of the Raphael paper
 22 | 		var paper = this;
 23 | 
 24 | 		subject.inlineTextEditing = {
 25 | 			paper : paper,
 26 | 			input: null,
 27 | 
 28 | 			/**
 29 | 			 * Start text editing by hiding the current element and adding a text field at the same position
 30 | 			 * @return jQuery input element
 31 | 			 */
 32 | 			startEditing: function(){
 33 | 				// Store Raphael container above the svg
 34 | 				var container      = this.paper.canvas.parentNode;
 35 | 				var translateX	    = 0;
 36 | 				var translateY	    = 0;
 37 | 				var transformOrder  = {};
 38 | 
 39 | 				// Retrieve element transformation
 40 | 				var rotation        = subject._.deg;
 41 | 				var scaleX          = subject._.sx;
 42 | 				var scaleY          = subject._.sy;
 43 | 				var matrix          = subject.node.getAttribute('transform');
 44 | 
 45 | 				// Check if the element has translations & retrieve transformations order
 46 | 				for(var i = 0, length = subject._.transform.length; i < length; i++){
 47 | 					var matrixComponents = subject._.transform[i];
 48 | 					var transform = matrixComponents[0].toLowerCase();
 49 | 					transformOrder[transform] = transform;
 50 | 
 51 | 					if(transform == 't'){
 52 | 						translateX += matrixComponents[1];
 53 | 						translateY += matrixComponents[2];
 54 | 					}
 55 | 				}
 56 | 
 57 | 
 58 | 				// Check if there is implicit matrix
 59 | 				for(var i = 0, length = subject._.transform.length; i < length; i++){
 60 | 					if(subject._.transform[i][0].toLowerCase() == 'm'){
 61 | 						var matrixComponents = subject._.transform[i].slice(1);
 62 | 
 63 | 						// Perform transformation from matrix elements
 64 | 						rotation  += -1 * Math.asin(matrixComponents[2]) * 180 / Math.PI;
 65 | 						scaleX    *= matrixComponents[0] / Math.cos(rotation*Math.PI/180);
 66 | 						scaleY    *= matrixComponents[3] / Math.cos(rotation*Math.PI/180);
 67 | 
 68 | 						transformOrder = {r: 'r', s:'s'};
 69 | 					}
 70 | 				}
 71 | 
 72 | 				// Remove transformation on the current element to retrieve original dimension
 73 | 				subject.node.removeAttribute('transform');
 74 | 
 75 | 				var originalBbox  = subject._getBBox();
 76 | 				var width         = originalBbox.width;
 77 | 				var height        = originalBbox.height;
 78 | 				var x             = container.offsetLeft + subject.attrs.x + translateX;
 79 | 				var y             = container.offsetTop + subject.attrs.y - height / 2 + translateY;
 80 | 				var sTransform    = '';
 81 | 				var sOrigin       = 'center center';
 82 | 				var oTransform    = {
 83 | 					//	t : 'translate('+(translateX)+'px, '+(translateY)+'px)',
 84 | 					r : 'rotate('+rotation+'deg)',
 85 | 					s : 'scale('+scaleX+', '+scaleY+')'
 86 | 				};
 87 | 
 88 | 				// Build transform CSS property in the same order than the element
 89 | 				for(var transform in transformOrder){
 90 | 					if(oTransform[transform] != undefined){
 91 | 						sTransform += oTransform[transform] + ' ';
 92 | 					}
 93 | 				}
 94 | 
 95 | 				// Re-apply stored transformation to the element and hide it
 96 | 				subject.node.setAttribute("transform", matrix);
 97 | 				subject.hide();
 98 | 
 99 | 				// Prepare input styles
100 | 				var oStyles = {
101 | 					position: 'absolute',
102 | 					background: 'none',
103 | 					left: x+'px',
104 | 					top: y+'px',
105 | 					width: width+'px',
106 | 					height: height+'px',
107 | 					color: subject.attrs.fill,
108 | 
109 | 					'-moz-transform-origin': sOrigin,
110 | 					'-ms-transform-origin': sOrigin,
111 | 					'-o-transform-origin': sOrigin,
112 | 					'-webkit-transform-origin': sOrigin,
113 | 					'transform-origin': sOrigin,
114 | 
115 | 					'-moz-transform' : sTransform,
116 | 					'-ms-transform' : sTransform,
117 | 					'-o-transform' : sTransform,
118 | 					'-webkit-transform' : sTransform,
119 | 					'transform' : sTransform
120 | 				};
121 | 
122 | 				// Retrieve font styles
123 | 				var aFontAttributes = ['font', 'font-family', 'font-size', 'font-style', 'font-weight', 'font-variant'/*, 'line-height'*/];
124 | 
125 | 				for(var i = 0, length = aFontAttributes.length; i < length; i++){
126 | 					var attribute = aFontAttributes[i];
127 | 
128 | 					if(subject.attrs[attribute] != undefined){
129 | 						oStyles[attribute] = subject.attrs[attribute];
130 | 					}
131 | 
132 | 					if(subject.node.style[attribute] != undefined){
133 | 						oStyles[attribute] = subject.node.style[attribute];
134 | 					}
135 | 				}
136 | 
137 | 				var sStyles = '';
138 | 				for(var z in oStyles){
139 | 					sStyles += z + ':' + oStyles[z] + ';';
140 | 				}
141 | 
142 | 				// Create an input element with theses styles
143 | 				this.input = document.createElement("textarea");
144 | 				this.input.value = subject.attrs.text ? subject.attrs.text.replace(/\'/g,"\\\'") : '';
145 | 				this.input.setAttribute("style", sStyles);
146 | 
147 | 				this.input.addEventListener('keyup', this._handleKeyDown.bind(this));
148 | 
149 | 				// Add the input in the container and apply focus on it
150 | 				container.appendChild(this.input);
151 | 				this.input.focus();
152 | 
153 | 				return this.input;
154 | 			},
155 | 
156 | 			/**
157 | 			 * Apply text modification and remove associated input
158 | 			 */
159 | 			stopEditing: function(){
160 | 
161 | 				// Set the new the value
162 | 				subject.attr("text", this.input.value);
163 | 
164 | 				// Show the text element
165 | 				subject.show();
166 | 
167 | 				// Remove text input
168 | 				this.input.parentNode.removeChild(this.input);
169 | 			},
170 | 
171 | 			_handleKeyDown: function(e){
172 | 				var tmp               = document.createElement("span");
173 | 				var text              = this.input.value;
174 | 				tmp.setAttribute('style', this.input.style.cssText);
175 | 				tmp.style.height      = null;
176 | 				tmp.style.width       = null;
177 | 				tmp.style.visibility  = 'hidden';
178 | 				tmp.innerHTML         = text.split('\n').join('<br />');
179 | 
180 | 				this.input.parentNode.appendChild(tmp);
181 | 
182 | 				this.input.style.width = tmp.offsetWidth + "px";
183 | 				this.input.style.height = tmp.offsetHeight + "px";
184 | 
185 | 				tmp.parentNode.removeChild(tmp);
186 | 			}
187 | 		};
188 | 
189 | 		return subject.inlineTextEditing;
190 | 	}
191 | 
192 | }));
193 | 


--------------------------------------------------------------------------------