fixed edit mode

4 files changed, 205 insertions, 7 deletions

diff --git a/README b/README
index cd066f1..c193e38 100644
--- a/README
+++ b/README
@@ -1,7 +1,9 @@
 Visualize and edit machine translation derivations using raphaeljs.
+Took raphael.inline_text_editing.js from [1].
+Partially adapted from [3] and [2].
 
 Resources:
- * http://grokbase.com/p/gg/raphaeljs/135twn41fq/how-to-move-text-and-rect-together-using-raphaeljs
- * https://github.com/marmelab/Raphael.InlineTextEditing
- * http://raphaeljs.com/graffle.html
+ [1] https://github.com/marmelab/Raphael.InlineTextEditing
+ [2] http://grokbase.com/p/gg/raphaeljs/135twn41fq/how-to-move-text-and-rect-together-using-raphaeljs
+ [3] http://raphaeljs.com/graffle.html
 
diff --git a/demo.html b/demo.html
index 9033d55..8a19348 100644
--- a/demo.html
+++ b/demo.html
@@ -6,7 +6,8 @@
   <title>derivation editor</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" charset="utf-8"></script>
   <script src="https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/v2.1.2/raphael-min.js" type="text/javascript" charset="utf-8"></script>
-  <script src="https://raw.githubusercontent.com/marmelab/Raphael.InlineTextEditing/fd578f0eddd4172e6d9b3fde4cb67576cf546dc1/raphael.inline_text_editing.js" charset="utf-8"></script>
+  <!--<script src="https://raw.githubusercontent.com/marmelab/Raphael.InlineTextEditing/fd578f0eddd4172e6d9b3fde4cb67576cf546dc1/raphael.inline_text_editing.js" charset="utf-8"></script>-->
+  <script src="raphael.inline_text_editing.js" charset="utf-8"></script>
   <script src="dummy.js" type="text/javascript" charset="utf-8"></script>
   <script src="derivation-editor.js" type="text/javascript" charset="utf-8"></script>
 </head>
diff --git a/derivation-editor.js b/derivation-editor.js
index 08b97fc..641a478 100644
--- a/derivation-editor.js
+++ b/derivation-editor.js
@@ -369,7 +369,7 @@ var DE_make_obj = function (x, text, type)
         } else if(e.ctrlKey) { // add
           var x = DE_shapes_by_id[this["id_"]].attr("x")+DE_shapes_by_id[this["id_"]].attr("width")
                   +2*DE_ui_padding;
-          var new_obj = DE_make_obj(x, "test", "target");
+          var new_obj = DE_make_obj(x, "", "target");
           var new_grid = this["grid_"]+1;
           new_obj["grid_"] = new_grid;
           new_obj.pair["grid_"] = new_grid;
@@ -391,6 +391,8 @@ var DE_make_obj = function (x, text, type)
       if (DE_edit_mode) return;
       DE_edit_mode = true;
       this.pair.toFront();
+      this.toBack();
+      //this.animate({"opacity":0}, 250);
       DE_cur_ed = this.pair;
       DE_cur_ed_shape = this;
       var input = DE_cur_ed.inlineTextEditing.startEditing();
@@ -505,10 +507,10 @@ var DE_add_object = function()
     }
   }
   if (!DE_shapes[max_idx]) {
-    DE_make_obj(DE_ui_xbegin+DE_ui_padding, "X", "target");
+    DE_make_obj(DE_ui_xbegin+DE_ui_padding, "", "target");
   } else {
     DE_make_obj(DE_shapes[max_idx].getBBox().x2+(DE_ui_margin-DE_ui_padding),
-             "X",
+             "",
              "target");
   }
   DE_paper.setSize(DE_paper.width+DE_target_shapes[DE_target_shapes.length-1].getBBox().width+DE_ui_margin, DE_paper.height);
diff --git a/raphael.inline_text_editing.js b/raphael.inline_text_editing.js
new file mode 100644
index 0000000..ccc37ed
--- /dev/null
+++ b/raphael.inline_text_editing.js
@@ -0,0 +1,193 @@
+/*
+ * Inline text editing tool for Raphaël 2.0 & compatible with Raphaël Free transform.
+ * Source: https://github.com/marmelab/Raphael.InlineTextEditing
+ * Licensed under the MIT license
+ */
+(function (root, factory) {
+	if (typeof define === "function" && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(["raphael"], function(Raphael) {
+			// Use global variables if the locals are undefined.
+			return factory(Raphael || root.Raphael);
+		});
+	} else {
+		// RequireJS isn't being used. Assume Raphael is loaded in <script> tag
+		factory(Raphael);
+	}
+}(this, function(Raphael) {
+
+	Raphael.fn.inlineTextEditing = function(subject, options, callback) {
+
+		// Store instance of the Raphael paper
+		var paper = this;
+
+		subject.inlineTextEditing = {
+			paper : paper,
+			input: null,
+
+			/**
+			 * Start text editing by hiding the current element and adding a text field at the same position
+			 * @return jQuery input element
+			 */
+			startEditing: function(){
+				// Store Raphael container above the svg
+				var container      = this.paper.canvas.parentNode;
+				var translateX	    = 0;
+				var translateY	    = 0;
+				var transformOrder  = {};
+
+				// Retrieve element transformation
+				var rotation        = subject._.deg;
+				var scaleX          = subject._.sx;
+				var scaleY          = subject._.sy;
+				var matrix          = subject.node.getAttribute('transform');
+
+				// Check if the element has translations & retrieve transformations order
+				for(var i = 0, length = subject._.transform.length; i < length; i++){
+					var matrixComponents = subject._.transform[i];
+					var transform = matrixComponents[0].toLowerCase();
+					transformOrder[transform] = transform;
+
+					if(transform == 't'){
+						translateX += matrixComponents[1];
+						translateY += matrixComponents[2];
+					}
+				}
+
+
+				// Check if there is implicit matrix
+				for(var i = 0, length = subject._.transform.length; i < length; i++){
+					if(subject._.transform[i][0].toLowerCase() == 'm'){
+						var matrixComponents = subject._.transform[i].slice(1);
+
+						// Perform transformation from matrix elements
+						rotation  += -1 * Math.asin(matrixComponents[2]) * 180 / Math.PI;
+						scaleX    *= matrixComponents[0] / Math.cos(rotation*Math.PI/180);
+						scaleY    *= matrixComponents[3] / Math.cos(rotation*Math.PI/180);
+
+						transformOrder = {r: 'r', s:'s'};
+					}
+				}
+
+				// Remove transformation on the current element to retrieve original dimension
+				subject.node.removeAttribute('transform');
+
+				var originalBbox  = subject._getBBox();
+				var width         = originalBbox.width;
+				var height        = originalBbox.height;
+				var x             = container.offsetLeft + subject.attrs.x + translateX;
+				var y             = container.offsetTop + subject.attrs.y - height / 2 + translateY;
+				var sTransform    = '';
+				var sOrigin       = 'center center';
+				var oTransform    = {
+					//	t : 'translate('+(translateX)+'px, '+(translateY)+'px)',
+					r : 'rotate('+rotation+'deg)',
+					s : 'scale('+scaleX+', '+scaleY+')'
+				};
+
+				// Build transform CSS property in the same order than the element
+				for(var transform in transformOrder){
+					if(oTransform[transform] != undefined){
+						sTransform += oTransform[transform] + ' ';
+					}
+				}
+
+				// Re-apply stored transformation to the element and hide it
+				subject.node.setAttribute("transform", matrix);
+				subject.hide();
+
+				// Prepare input styles
+				var oStyles = {
+					position: 'absolute',
+					background: 'red',
+					left: x-3+'px',
+					top: y-3+'px',
+					width: width+10+'px',
+          "background-color": "rgba(1, f, f, 0.2)",
+					height: height+5+'px',
+					color: subject.attrs.fill,
+
+					'-moz-transform-origin': sOrigin,
+					'-ms-transform-origin': sOrigin,
+					'-o-transform-origin': sOrigin,
+					'-webkit-transform-origin': sOrigin,
+					'transform-origin': sOrigin,
+
+					'-moz-transform' : sTransform,
+					'-ms-transform' : sTransform,
+					'-o-transform' : sTransform,
+					'-webkit-transform' : sTransform,
+					'transform' : sTransform
+				};
+
+				// Retrieve font styles
+				var aFontAttributes = ['font', 'font-family', 'font-size', 'font-style', 'font-weight', 'font-variant'/*, 'line-height'*/];
+
+				for(var i = 0, length = aFontAttributes.length; i < length; i++){
+					var attribute = aFontAttributes[i];
+
+					if(subject.attrs[attribute] != undefined){
+						oStyles[attribute] = subject.attrs[attribute];
+					}
+
+					if(subject.node.style[attribute] != undefined){
+						oStyles[attribute] = subject.node.style[attribute];
+					}
+				}
+
+				var sStyles = '';
+				for(var z in oStyles){
+					sStyles += z + ':' + oStyles[z] + ';';
+				}
+
+				// Create an input element with theses styles
+				this.input = document.createElement("textarea");
+				this.input.value = subject.attrs.text ? subject.attrs.text.replace(/\'/g,"\\\'") : '';
+				this.input.setAttribute("style", sStyles);
+
+				this.input.addEventListener('keyup', this._handleKeyDown.bind(this));
+
+				// Add the input in the container and apply focus on it
+				container.appendChild(this.input);
+				this.input.focus();
+
+				return this.input;
+			},
+
+			/**
+			 * Apply text modification and remove associated input
+			 */
+			stopEditing: function(){
+
+				// Set the new the value
+				subject.attr("text", this.input.value);
+
+				// Show the text element
+				subject.show();
+
+				// Remove text input
+				this.input.parentNode.removeChild(this.input);
+			},
+
+			_handleKeyDown: function(e){
+				var tmp               = document.createElement("span");
+				var text              = this.input.value;
+				tmp.setAttribute('style', this.input.style.cssText);
+				tmp.style.height      = null;
+				tmp.style.width       = null;
+				tmp.style.visibility  = 'hidden';
+				tmp.innerHTML         = text.split('\n').join('<br />');
+
+				this.input.parentNode.appendChild(tmp);
+
+				this.input.style.width = tmp.offsetWidth+50 + "px";
+				this.input.style.height = tmp.offsetHeight+5 + "px";
+
+				tmp.parentNode.removeChild(tmp);
+			}
+		};
+
+		return subject.inlineTextEditing;
+	}
+
+}));