hogeika · February 24, 2012 07:38
diff --git a/test.html b/test.html
 <html>
 <head>
 <style type="text/css">
 .selectedTarget { background-color: red}
 </style>
 </head>
 <body onload="onload()">
 test.
 <script language="javascript">
 function assertEq(exp, act) {
   if(exp != act) 
      alert("not equal [" + exp + "] and [" + act + "]");
 }
 function assertNeq(exp, act) {
   if(exp == act) 
      alert("not equal [" + exp + "] and [" + act + "]");
 }
 function $(id) {
  return document.getElementById(id);
 }

 var g_id = 1;
 function IdGen() {
  return g_id++;
 }

 function MnOrMi(term) {
 	if(term instanceof Number){
 		return "<mn id=\"" + term.objId + "\">" + term + "</mn>";
 	}
 	if(term instanceof String){
 		return "<mi id=\"" + term.objId + "\">" + term + "</mi>";
 	}
 	throw "Unknow terminal";
 }

 function EvalTerm(builder, term){
    if(term instanceof Array){
 		builder.push("<mfenced id=\"");
 		builder.push(term.objId);
 		builder.push("\"><mrow>");
        builder.push(JsonToMathML(term));
        builder.push("</mrow></mfenced>");
    }else{
        builder.push(MnOrMi(term));
    }
 }

 function JsonToMathML(json) {
  var tag = json[0];
  if(tag == "+" || tag == "*")
  {
    var builder = [];
    var len = json.length;
 	EvalTerm(builder, json[1]);
    for(var i = 2; i < len; i++) {
        builder.push("<mo>");
        builder.push(tag);
        builder.push("</mo>");
 		EvalTerm(builder,json[i]);
    }
    return builder.join("");
  }
   throw "unknown tag";
 }

 function dp(st) {
 var con = $("console");
 con.value += st + "\n";
 }
 function showMath(str) {
 var header ="<math id=\"mathcanvas\" display=\"block\" xmlns=\"http://www.w3.org/1998/Math/MathML\">" 
 var footer ="</math>"
 var math = $("mathcanvas");
 math.innerHTML = header + str + footer;
 }
 function onClear() {
 var con = $("console");
 con.value = '';
 }

 var g_hash = {};

 function JsonParser(str) {
  var sexp = eval(str);
  var res = [];
  res.objId = IdGen();
  g_hash[res.objId] = res;
  for(var i = 0; i < sexp.length; i++) {
     var obj;
     if(typeof(sexp[i]) == "number")
        obj = new Number(sexp[i]);
     else if(typeof(sexp[i]) == "string")
        obj = new String(sexp[i]);
     else if(sexp[i] instanceof Array)
     	obj = JsonParser(sexp[i]);
     else
        obj = sexp[i];
     obj.objId = IdGen();
     g_hash[obj.objId] = obj;
     res.push(obj);

 	obj.parent = res;
  }
 assertNeq(res, sexp);
  return res;
 }

 var g_sexp;
 function clicked() {
 var inp = $("input");
 g_sexp = JsonParser(inp.value);
 var result = JsonToMathML(g_sexp);
 dp(result);
 showMath(result);
 // alert(inp.value);
 }

 function Update(sexp) {
 var result = JsonToMathML(sexp);
 dp(result);
 showMath(result);
 if(g_selected) {
    var elem = $(g_selected.obj.objId);
    elem.setAttribute("class", "selectedTarget");
    g_selected.elem = elem;
 }
 }
 function FindIndex(arr, obj) {
  for(var i = 0; i < arr.length; i++) {
     if(arr[i] == obj)
        return i;
  }
  return -1;
 }
 function MoveLeftTerm(sel) {
   var parent = sel.obj.parent;
   var i = FindIndex(parent, sel.obj);
   if(i == 1)
     return;
 assertEq(parent[i], sel.obj);
   var prev = parent[i-1];
   parent[i] = prev;
   parent[i-1] = sel.obj;
 }
 function MoveRightTerm(sel) {
   var parent = sel.obj.parent;
   var i = FindIndex(parent, sel.obj);
   if(i == parent.length -1 )
     return;
 assertEq(parent[i], sel.obj);
   var next = parent[i+1];
   parent[i] = next;
   parent[i+1] = sel.obj;
 }

 var g_selected = undefined;
 function onload() {
   var canv = $("mathcanvas");
   canv.addEventListener("click", function(evt) {
      var id = evt.target.getAttribute("id");
      g_selected = {obj: g_hash[id], elem: evt.target};
      g_selected.elem.setAttribute("class", "selectedTarget");
      // alert(g_selected.elem);
   });
 var KEY_LEFT = 37;
 var KEY_RIGHT = 39;
   document.body.addEventListener("keypress", function(evt) {
      if(evt.keyCode == KEY_LEFT) {
          MoveLeftTerm(g_selected);
          Update(g_sexp);
      } else if (evt.keyCode == KEY_RIGHT) {
          MoveRightTerm(g_selected);
          Update(g_sexp);
      }
      // alert(evt.keyCode);
   });
 // alert(document.getElementById("hoge"));
 //document.getElementById("hoge").addEventListener("click", function() { 
 //   alert("clicked!"); } );
 /*
 document.getElementById("x").addEventListener("click", function() { 
   alert("x!"); } );
 document.getElementById("d").addEventListener("click", function() { 
   alert("d!"); } );
 */
 }
 </script>
 <br>
 <textarea id="input" rows="10" cols="100" ></textarea><br>
 <textarea id="console" rows="10" cols="100" ></textarea><br>
 <input value="OK" type="button" onclick="clicked();">
 <input value="Clear" type="button" onclick="onClear();">
 <br>
 <!--
 <math id="mathcanvas" display="block" xmlns="http://www.w3.org/1998/Math/MathML">
 </math>
 -->
 <div id="mathcanvas"></div>
 以下は適当な例。<br>
 <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
 <mn> 3 </mn>
    <mo> + </mo>
    <mn> 4 </mn>
 </math>
 <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow id="hoge">
    <munderover>
      <mo>&int;</mo>
      <mn>0</mn>
      <mn>1</mn>
    </munderover>
    <mrow>
      <msup>

        <mi>e</mi>

        <mi id="x">x</mi>
      </msup>
      <mi id="d">d</mi>
      <mi>x</mi>
    </mrow>
  </mrow>
 </math>

 <math xmlns="http://www.w3.org/1998/Math/MathML">
 <mfenced>
  <mrow>
    <mi> a </mi>
    <mo> + </mo>
    <mi> b </mi>
  </mrow>
 </mfenced>
 </math>

 以下はダメ
 <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
 <mrow>
 <cn type="complex-cartesian"> 12.3 <sep/> 5 </cn>
 <bind id="outer"><csymbol cd="fns1">lambda</csymbol>
  <bvar><ci>x</ci></bvar>
  <apply><ci>f</ci>
    <bind id="inner"><csymbol cd="fns1">lambda</csymbol>
      <bvar><ci>x</ci></bvar>
      <share id="copy" href="#orig"/>
    </bind>
    <apply id="orig"><ci>g</ci><ci>x</ci></apply>
  </apply>
 </bind>
 </mrow>
 </math>

 </body>
	<html>
	<head>
	<style type="text/css">
	.selectedTarget { background-color: red}
	</style>
	</head>
	<body onload="onload()">
	test.
	<script language="javascript">
	function assertEq(exp, act) {
	if(exp != act)
	alert("not equal [" + exp + "] and [" + act + "]");
	}
	function assertNeq(exp, act) {
	if(exp == act)
	alert("not equal [" + exp + "] and [" + act + "]");
	}
	function $(id) {
	return document.getElementById(id);
	}

	var g_id = 1;
	function IdGen() {
	return g_id++;
	}

	function MnOrMi(term) {
	if(term instanceof Number){
	return "<mn id=\"" + term.objId + "\">" + term + "</mn>";
	}
	if(term instanceof String){
	return "<mi id=\"" + term.objId + "\">" + term + "</mi>";
	}
	throw "Unknow terminal";
	}

	function EvalTerm(builder, term){
	if(term instanceof Array){
	builder.push("<mfenced id=\"");
	builder.push(term.objId);
	builder.push("\"><mrow>");
	builder.push(JsonToMathML(term));
	builder.push("</mrow></mfenced>");
	}else{
	builder.push(MnOrMi(term));
	}
	}

	function JsonToMathML(json) {
	var tag = json[0];
	if(tag == "+" \|\| tag == "*")
	{
	var builder = [];
	var len = json.length;
	EvalTerm(builder, json[1]);
	for(var i = 2; i < len; i++) {
	builder.push("<mo>");
	builder.push(tag);
	builder.push("</mo>");
	EvalTerm(builder,json[i]);
	}
	return builder.join("");
	}
	throw "unknown tag";
	}

	function dp(st) {
	var con = $("console");
	con.value += st + "\n";
	}
	function showMath(str) {
	var header ="<math id=\"mathcanvas\" display=\"block\" xmlns=\"http://www.w3.org/1998/Math/MathML\">"
	var footer ="</math>"
	var math = $("mathcanvas");
	math.innerHTML = header + str + footer;
	}
	function onClear() {
	var con = $("console");
	con.value = '';
	}

	var g_hash = {};

	function JsonParser(str) {
	var sexp = eval(str);
	var res = [];
	res.objId = IdGen();
	g_hash[res.objId] = res;
	for(var i = 0; i < sexp.length; i++) {
	var obj;
	if(typeof(sexp[i]) == "number")
	obj = new Number(sexp[i]);
	else if(typeof(sexp[i]) == "string")
	obj = new String(sexp[i]);
	else if(sexp[i] instanceof Array)
	obj = JsonParser(sexp[i]);
	else
	obj = sexp[i];
	obj.objId = IdGen();
	g_hash[obj.objId] = obj;
	res.push(obj);

	obj.parent = res;
	}
	assertNeq(res, sexp);
	return res;
	}

	var g_sexp;
	function clicked() {
	var inp = $("input");
	g_sexp = JsonParser(inp.value);
	var result = JsonToMathML(g_sexp);
	dp(result);
	showMath(result);
	// alert(inp.value);
	}

	function Update(sexp) {
	var result = JsonToMathML(sexp);
	dp(result);
	showMath(result);
	if(g_selected) {
	var elem = $(g_selected.obj.objId);
	elem.setAttribute("class", "selectedTarget");
	g_selected.elem = elem;
	}
	}
	function FindIndex(arr, obj) {
	for(var i = 0; i < arr.length; i++) {
	if(arr[i] == obj)
	return i;
	}
	return -1;
	}
	function MoveLeftTerm(sel) {
	var parent = sel.obj.parent;
	var i = FindIndex(parent, sel.obj);
	if(i == 1)
	return;
	assertEq(parent[i], sel.obj);
	var prev = parent[i-1];
	parent[i] = prev;
	parent[i-1] = sel.obj;
	}
	function MoveRightTerm(sel) {
	var parent = sel.obj.parent;
	var i = FindIndex(parent, sel.obj);
	if(i == parent.length -1 )
	return;
	assertEq(parent[i], sel.obj);
	var next = parent[i+1];
	parent[i] = next;
	parent[i+1] = sel.obj;
	}

	var g_selected = undefined;
	function onload() {
	var canv = $("mathcanvas");
	canv.addEventListener("click", function(evt) {
	var id = evt.target.getAttribute("id");
	g_selected = {obj: g_hash[id], elem: evt.target};
	g_selected.elem.setAttribute("class", "selectedTarget");
	// alert(g_selected.elem);
	});
	var KEY_LEFT = 37;
	var KEY_RIGHT = 39;
	document.body.addEventListener("keypress", function(evt) {
	if(evt.keyCode == KEY_LEFT) {
	MoveLeftTerm(g_selected);
	Update(g_sexp);
	} else if (evt.keyCode == KEY_RIGHT) {
	MoveRightTerm(g_selected);
	Update(g_sexp);
	}
	// alert(evt.keyCode);
	});
	// alert(document.getElementById("hoge"));
	//document.getElementById("hoge").addEventListener("click", function() {
	// alert("clicked!"); } );
	/*
	document.getElementById("x").addEventListener("click", function() {
	alert("x!"); } );
	document.getElementById("d").addEventListener("click", function() {
	alert("d!"); } );
	*/
	}
	</script>
	<br>
	<textarea id="input" rows="10" cols="100" ></textarea><br>
	<textarea id="console" rows="10" cols="100" ></textarea><br>
	<input value="OK" type="button" onclick="clicked();">
	<input value="Clear" type="button" onclick="onClear();">
	<br>
	<!--
	<math id="mathcanvas" display="block" xmlns="http://www.w3.org/1998/Math/MathML">
	</math>
	-->
	<div id="mathcanvas"></div>
	以下は適当な例。<br>
	<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
	<mn> 3 </mn>
	<mo> + </mo>
	<mn> 4 </mn>
	</math>
	<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow id="hoge">
	<munderover>
	<mo>∫</mo>
	<mn>0</mn>
	<mn>1</mn>
	</munderover>
	<mrow>
	<msup>

	<mi>e</mi>

	<mi id="x">x</mi>
	</msup>
	<mi id="d">d</mi>
	<mi>x</mi>
	</mrow>
	</mrow>
	</math>

	<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mfenced>
	<mrow>
	<mi> a </mi>
	<mo> + </mo>
	<mi> b </mi>
	</mrow>
	</mfenced>
	</math>

	以下はダメ
	<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<cn type="complex-cartesian"> 12.3 <sep/> 5 </cn>
	<bind id="outer"><csymbol cd="fns1">lambda</csymbol>
	<bvar><ci>x</ci></bvar>
	<apply><ci>f</ci>
	<bind id="inner"><csymbol cd="fns1">lambda</csymbol>
	<bvar><ci>x</ci></bvar>
	<share id="copy" href="#orig"/>
	</bind>
	<apply id="orig"><ci>g</ci><ci>x</ci></apply>
	</apply>
	</bind>
	</mrow>
	</math>

	</body>