summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README8
-rw-r--r--demo.html3
-rw-r--r--derivation-editor.js8
-rw-r--r--raphael.inline_text_editing.js193
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;
+ }
+
+}));