color source phrases

1 files changed, 115 insertions, 26 deletions

diff --git a/derivation-editor.js b/derivation-editor.js
index c9e11ec..9681c92 100644
--- a/derivation-editor.js
+++ b/derivation-editor.js
@@ -25,7 +25,7 @@ var DE_paper,
 ///////////////////////////////////////////////////////////////////////////////
     DE_ui_stroke_width    = 1,
     DE_ui_stroke_width_hi = 3,
-    DE_ui_align_stroke    = "#eee",
+    DE_ui_align_stroke    = "#aaa",
     DE_ui_align_stroke_hi = "#000",
     DE_ui_text_att  = { "text-anchor": "start", "font-size": DE_ui_font_size,
                         "font-family": "Times New Roman" },
@@ -52,10 +52,12 @@ var DE_paper,
     DE_kbd_select_mode    = false,
     // done
     DE_target_done = [],
+    DE_source_done = [],
     // data
-    DE_data_source = null,
-    DE_data_target = null,
-    DE_data_align  = null,
+    DE_data_source     = null,
+    DE_data_source_raw = null,
+    DE_data_target     = null,
+    DE_data_align      = null,
     // lock
     DE_locked = false;
 
@@ -75,6 +77,8 @@ var ch_style = function (item, shape_att, text_att, anim=false, anim_dur=50)
     item.animate(shape_att, anim_dur);
     item.pair.animate(text_att, anim_dur);
   }
+
+  DE_color_source_phrases();
 }
 
 var DE_ui_style_normal = function (item, type=null)
@@ -84,13 +88,14 @@ var DE_ui_style_normal = function (item, type=null)
     type = item["type_"];
   var to_delete = false;
   var color = "#fff";
-  var stroke_color = "#eee";
-  var text_color = "#eee";
+  var stroke_color = "#aaa";
+  var text_color = "#aaa";
   if (DE_rm_mult.indexOf(item)>-1)
     color = stroke_color = "#f00";
   if (DE_target_done.indexOf(item)>-1) {
-    color = "#fff";
-    text_color = stroke_color= "#000";
+    color = "#aaa";
+    text_color = "#000";
+    stroke_color= "#000";
   }
   var shape_att;
   var text_att;
@@ -137,9 +142,10 @@ var DE_ui_style_highlight = function (item, type=null)
   if (DE_rm_mult.indexOf(item)>-1)
     color = stroke_color = "#f00";
   if (DE_target_done.indexOf(item)>-1) {
-    color = "#fff";
-    text_color = stroke_color = "#000";
-    stroke_width = 5;
+    color = "#aaa";
+    text_color = "#000";
+    stroke_color = "#000";
+    stroke_width = 3;
   }
   var shape_att;
   var text_att;
@@ -198,7 +204,7 @@ var DE_ui_style_mark = function (item, type=null)
       "fill":         "#000",
       "fill-opacity": 1.0,
       "stroke":       "#000000",
-      "stroke-width": 9
+      "stroke-width": 3
     };
     text_att  = {
       "fill":         "#fff",
@@ -535,8 +541,12 @@ DE_item_mouseover = function (item)
   var not_reset = [];
   for (c in DE_connections) {
     if (DE_shapes_by_id[parseInt(c.split("-")[1])] != DE_kbd_focused_phrase ||
-        c.split("-")[1] != DE_kbd_focused_phrase["id_"])
+        c.split("-")[1] != DE_kbd_focused_phrase["id_"]) {
       DE_connections[c].line.attr({"stroke-width":DE_ui_stroke_width});
+      var x = DE_shapes_by_id[parseInt(c.split("-")[1])];
+      if (DE_target_done.indexOf(x)==-1)
+        DE_connections[c].line.attr({"stroke":"#aaa"});
+    }
     if (c.split("-")[1] == DE_kbd_focused_phrase["id_"])
       not_reset.push(c.split("-")[0]);
   }
@@ -604,14 +614,15 @@ DE_item_mouseout = function (item)
             break;
           }
         }
+        cc = c; // FIXME WTF
         if (!x) {
           if (!(DE_connect_mode_shape && obj["id_"]==DE_connect_mode_shape["id_"]))
             DE_ui_style_normal(obj);
         }
         if (align_done) {
-          DE_connections[c].line.attr({"stroke-width":DE_ui_stroke_width, "stroke":DE_ui_align_stroke_hi});
+          DE_connections[cc].line.attr({"stroke-width":DE_ui_stroke_width, "stroke":DE_ui_align_stroke_hi});
         } else {
-          DE_connections[c].line.attr({"stroke-width":DE_ui_stroke_width, "stroke":DE_ui_align_stroke});
+          DE_connections[cc].line.attr({"stroke-width":DE_ui_stroke_width, "stroke":DE_ui_align_stroke});
         }
       } else {
         aligned_with_focused = true;
@@ -629,6 +640,7 @@ DE_item_mouseout = function (item)
 var DE_item_click_target = function (e, item)
 {
   if (DE_locked) return;
+  if (DE_target_done.indexOf(item)>-1) return;
   if (DE_connect_mode) {
     if (DE_connections[DE_conn_str(DE_connect_mode_shape,item)]) {
       DE_undo_stack.push(["rm_conn", DE_connect_mode_shape["id_"], item["id_"]]);
@@ -636,10 +648,26 @@ var DE_item_click_target = function (e, item)
       DE_ui_style_normal(DE_connect_mode_shape);
     } else {
       DE_ui_style_highlight(DE_connect_mode_shape);
+      DE_connect_mode_shape.attr({"fill":"#fff","fill-opacity":1});
       DE_undo_stack.push(["add_conn", DE_connect_mode_shape["id_"], item["id_"]]);
       DE_make_conn(DE_connect_mode_shape, item);
     }
     DE_connect_mode = false;
+    var b = false;
+    if (DE_kbd_focused_phrase) {
+    var focused_id = DE_kbd_focused_phrase["id_"];
+    var src_id = DE_connect_mode_shape["id_"];
+    for (c in DE_connections) {
+      var a = c.split("-");
+      if (a[0] == src_id && a[1]==focused_id) {
+        b = true;
+      }
+      break;
+    }
+    }
+    DE_connect_mode_shape.attr({"fill":"#fff"});
+    if (b)
+      DE_connect_mode_shape.attr({"stroke-width":3});
     DE_connect_mode_shape = null;
   } else { // delete
     if (e.altKey) {
@@ -691,11 +719,13 @@ var DE_item_click_source = function (e, item)
     if (item != DE_kbd_focused_phrase)
       DE_ui_style_highlight(item);
     DE_connect_mode = false;
+    DE_color_source_phrases();
     DE_connect_mode_shape = null;
   } else {
     DE_ui_style_mark(item);
     DE_connect_mode = true;
     DE_connect_mode_shape = item;
+    DE_connect_mode_shape.attr({"fill":"#f00"});
   }
 }
 
@@ -911,6 +941,7 @@ var DE_enter_edit_mode = function (sh, kbd=false)
       setTimeout(function(){DE_snap_to_grid(true);},125);
     } else if (e.keyCode == 13) { // return
       e.preventDefault();
+      e.stopPropagation();
       DE_cur_ed.inlineTextEditing.stopEditing();
       //DE_cur_ed_shape.toFront();
       //DE_cur_ed.toBack();
@@ -954,6 +985,7 @@ var DE_extract_data = function ()
   el = document.getElementById("data");
   d = {};
   d["source"] = [];
+  d["source_raw"] = [];
   d["target"] = [];
   d["align"]  = [];
   // target
@@ -979,6 +1011,18 @@ var DE_extract_data = function ()
       break;
     }
   }
+  // source_raw
+  if (DE_data_source_raw) {
+  for (var i=0; i<DE_data_source_raw.length; i++) {
+    d["source_raw"].push(encodeURIComponent(DE_data_source_raw[i]));
+  }
+  }
+
+  // image
+  d["svg"] = "";
+  if (DE_paper)
+    d["svg"] = btoa(DE_paper.canvas.innerHTML);
+
   // output
   s = JSON.stringify(d);
   el.innerHTML = s;
@@ -1041,9 +1085,10 @@ var DE_init = function ()
   if (!data) return;
   DE_reset();
 
-  DE_data_source = data["source_groups"];
-  DE_data_target = data["target_groups"];
-  DE_data_align  = data["phrase_alignment"];
+  DE_data_source     = data["source_groups"];
+  DE_data_source_raw = data["source_groups_raw"];
+  DE_data_target     = data["target_groups"];
+  DE_data_align      = data["phrase_alignment"];
 
   // canvas
   DE_paper = Raphael("holder", 0, 0);
@@ -1089,27 +1134,32 @@ document.onkeypress = function (e) {
   var char_code = e.which || e.keyCode;
   var char_str = String.fromCharCode(char_code);
 
-  if (char_str == "X"
+  if (e.keyCode==13 && DE_kbd_move_mode) {
+    e.preventDefault();
+    e.stopPropagation();
+    DE_kbd_move_mode = false;
+    DE_kbd_select_mode = true;
+    DE_snap_to_grid();
+    return;
+  }
+
+  if (e.keyCode == 13
       && !DE_edit_mode
       && DE_kbd_focused_phrase
       && DE_rm_mult.indexOf(DE_kbd_focused_phrase)==-1) {
+    e.preventDefault();
     if (DE_target_done.indexOf(DE_kbd_focused_phrase)>-1) {
       DE_target_done.splice(DE_target_done.indexOf(DE_kbd_focused_phrase),1);
+      DE_color_source_phrases();
     } else {
       DE_target_done.push(DE_kbd_focused_phrase);
+      DE_kbd_select_phrase("right", DE_kbd_focused_phrase);
       DE_kbd_move_mode = false;
       DE_kbd_select_mode = true;
     }
     DE_ui_style_highlight(DE_kbd_focused_phrase);
   }
 
-  if (e.keyCode==13 && DE_kbd_move_mode) {
-    e.preventDefault();
-    DE_kbd_move_mode = false;
-    DE_kbd_select_mode = true;
-    DE_snap_to_grid();
-  }
-
   if (char_str == "A") { // add
     if (DE_target_shapes.length > 0) {
       var x = DE_kbd_focused_phrase.attr("x")+DE_kbd_focused_phrase.attr("width")
@@ -1416,3 +1466,42 @@ var DE_undo_rm = function (grid_pos, id, text, source_phrases)
     DE_kbd_focus_shape(obj);
 }
 
+var DE_color_source_phrases = function ()
+{
+  var have = {};
+  var done = {};
+  for (shid in DE_shapes_by_id) {
+    if (DE_shapes_by_id[shid]["type_"] == "source") {
+      for (c in DE_connections) {
+        var a = c.split("-");
+        if (shid == parseInt(a[0])) {
+          if (have[shid]) {
+            have[shid] += 1;
+          } else {
+            have[shid] = 1;
+            done[shid] = 0;
+          }
+          if (DE_target_done.indexOf(DE_shapes_by_id[a[1]])>-1) {
+            done[shid] += 1;
+          }
+        }
+      }
+    }
+  }
+
+  for (shid in have) {
+    var b = false;
+    if (DE_connect_mode && DE_shapes_by_id[shid] == DE_connect_mode_shape) {
+      DE_shapes_by_id[shid].attr({"fill":"#f00"});
+      b = true;
+    }
+    if (have[shid] == done[shid]) {
+      if (!b)
+        DE_shapes_by_id[shid].attr({"fill":"#aaa"});
+    } else {
+      if (!b)
+        DE_shapes_by_id[shid].attr({"fill":"#fff"});
+    }
+  }
+}
+