Starting.

wseidel · Mar 15, 2011 · cc1f3bc · cc1f3bc
commit cc1f3bc
Show file tree

Hide file tree

Showing 4 changed files with 283 additions and 0 deletions.
diff --git a/README b/README
@@ -0,0 +1,4 @@
+Plugins jQuery para o desenho de arvores de sintaxe baseado em um texto estruturado.
+
+Veja mais detalhes no arquivo ex01.html
+
diff --git a/ex01.html b/ex01.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" ></script>
+	<script src="js/jquery.parseSyntaxTree.js" type="text/javascript" ></script>
+	<script src="js/jquery.drawTree.js" type="text/javascript" ></script>
+	<script type="text/javascript">
+	//<![CDATA[
+	$(document).ready(function() {
+
+		$('#drawTree').each(function() {
+  		$(this).drawTree(  $(this).parseSyntaxTree()  );
+		});
+
+	});
+	// ]]>
+	</script>
+	<title>Exemplo.</title>
+  </head>
+  <body>
+  <h3>Exemplo de uso dos plugins: <strong>parserSyntaxTree</strong> e <strong>drawTree</strong>.</h3>
+  <div>
+    <ul>
+      <li>Passo 1: "Um texto a ser parseado."</li>
+      <li>Passo 2: ( o plugin <strong>parserSyntaxTree</strong> transforma o texto do formato abaixo em um objeto do tipo arvore, e o fornece ao <strong>drawTree</strong>.
+        <p id="drawTree">
+        [S [NP [DETERMINER Um] [NOUN texto] ] [PREPOSITION a] [VP [VERB ser] ] [NP [NOUN parseado] ] [PUNCTUATION_MARK .] ]
+        </p>   
+      </li>
+    </ul>
+  </div>
+</body>
+</html>
+
+
+
+
+
diff --git a/js/jquery.drawTree.js b/js/jquery.drawTree.js
@@ -0,0 +1,152 @@
+/*
+ * jQuery Draw Tree.
+ *
+ * Copyright (c) 2010-2011 Wesley Seidel Carvalho
+ *
+ * jquery.drawTree.js
+ * 
+ */
+;(function($) {
+
+  /*  Uma forma de fazer */
+  $.fn.drawTree = function(tree, options) {  
+
+  var defaults = {  
+	  nodeColor: '#FFFF',
+	  yStep : 24,
+	  widthMAX : 800,
+	  height : 480,
+    border : 'solid',
+
+	  RED : "#ffc0c0",
+	  BLUE : "#c0c0ff"
+  };  
+
+  var options = $.extend(defaults, options);
+
+  function createTreeNode(node) {
+    var val;
+    if(node.op) {
+      val = node.op;
+      color = defaults.BLUE;
+    } else if(node.value) {
+      val = node.value;
+      color = defaults.RED;
+    } else
+      val = "?";
+
+    var nodeElement = $('<div>');
+    nodeElement.css( 'position', "absolute");
+
+    nodeElement.css( 'fontSize', 10);
+
+    nodeElement.css( 'border', "solid");
+    nodeElement.css( 'borderWidth', 1);
+    nodeElement.css( 'backgroundColor', color);
+    nodeElement.append(val );
+    nodeElement.attr('title',node.hide);
+//    nodeElement.tooltip();
+
+    $container.append(nodeElement);
+
+    node.element = nodeElement;
+    return nodeElement;
+  }
+
+
+  function renderLink(x1, y1, x2, y2)
+  {
+    var left = Math.min(x1,x2);
+    var top = Math.min(y1,y2);
+
+    var width = 1+Math.abs(x2-x1);
+    var height = 1+Math.abs(y2-y1);
+
+    var svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("x", left);
+    svg.setAttribute("y",  top);
+    svg.setAttribute("width", width );
+    svg.setAttribute("height", height );
+
+    var line = document.createElementNS(svgNS,"line");
+
+    line.setAttribute("x1", (x1 - left) );
+    line.setAttribute("x2", (x2 - left) );
+    line.setAttribute("y1", (y1 - top) );
+    line.setAttribute("y2", (y2 - top) );
+    line.setAttribute("stroke-width",  "1");
+    line.setAttribute("stroke",  "black");
+    svg.appendChild(line);
+
+
+
+    var $div = $('<div>');
+    $div.width( width );
+    $div.height( height );
+    $div.css( 'position', "absolute");
+    var offset = $div.offset();
+    offset.left = left;
+    offset.top = top;
+    $div.offset(offset)
+
+    $div.append(svg);
+    $container.append($div);
+
+  }
+
+  function drawTree(y, node, height)
+  {
+    if(height < 1.5 * defaults.yStep)
+       height = 1.5 * defaults.yStep;
+
+    var newY = y + height;
+    var widthPadrao = 100;
+
+    var newNode = createTreeNode(node);
+
+    var offset = newNode.offset();
+    offset.top = y;
+    if(node.child) {
+
+      // Criando sub-arvores
+      for(var i = 0; i < node.child.length; i++){
+        var child = drawTree( newY, node.child[i], height/2);
+      }
+
+      // Posicionando nó corrente baseado no deslocamento criado pelos descendentes.
+      offset.left = ESQUERDA - (widthPadrao * node.child.length /2) - ((widthPadrao/2) + newNode.width()/2);
+
+      // Criando linhas, agora que já se tem o posicionamento dos pais e filhos
+      for(var i = 0; i < node.child.length; i++){
+        var child = node.child[i].element;
+        renderLink( offset.left + newNode.width()/2, y + newNode.height() , child.offset().left + child.width()/2, newY );
+      }
+
+    } else {
+
+      offset.left = ESQUERDA - newNode.width()/2;
+      ESQUERDA = ESQUERDA + widthPadrao;
+
+    }
+    newNode.offset(offset);
+
+    return newNode;
+  }
+
+
+  var svgNS = "http://www.w3.org/2000/svg";
+  var $this = $(this);
+
+  $container = $('<div>');
+
+  $container.width( defaults.widthMAX);
+  $container.height( defaults.height);
+  $container.css('border', defaults.border);
+  $this.append($container);
+
+  var ESQUERDA = $container.offset().left + 50;
+  drawTree( $container.offset().top + 10 , tree, 4* defaults.yStep );
+
+  };
+
+})(jQuery);
diff --git a/js/jquery.parseSyntaxTree.js b/js/jquery.parseSyntaxTree.js
@@ -0,0 +1,89 @@
+/*
+ * jQuery Parse Tree plugin.
+ *
+ * Copyright (c) 2010-2011 Wesley Seidel Carvalho
+ *
+ * jquery.parseSyntaxTree.js
+ * 
+ */
+;(function($) {
+
+  $.fn.parseSyntaxTree = function(str) {  
+
+	  function parseSyntaxTree(str) {
+      var c;
+      var pos=0;
+      var pilha = new Array();
+      var word = '';
+      var node;
+      var tag ='';
+	    while(pos < str.length){
+	      c = str.charAt(pos);
+
+	      switch(c) {
+
+	        case '[':
+
+		  var tag = str.substr(pos+1,str.length-pos);
+		  var shift = tag.indexOf(" ");
+		  if(shift < 0){
+		    shift = tag.indexOf("]");
+		  } 
+		  tag = tag.substr(0,shift);
+		  pos = pos + shift;
+
+		  var node = {};
+		  node.op = tag;
+		  node.child = new Array();
+		  if( pilha.length != 0 ){
+		    pilha[pilha.length-1].child.push(node);
+		    node.pai = pilha[pilha.length-1];
+		  }
+		  pilha.push(node);
+
+	        break;
+
+	        case ']':
+		  if(word.length != 0 ){
+		    var nodeValue = {};
+		    nodeValue.value = word;
+		    pilha[pilha.length-1].child.push(nodeValue);
+		    nodeValue.pai = pilha[pilha.length-1];
+            nodeValue.hide = tag ;
+		    word = '';
+		  }
+		  var node = pilha.pop();
+
+		  if(pilha.length == 0 ) {
+		    return node;
+		  }
+	        break;
+
+	        case '{':
+		  var tag = str.substr(pos+1,str.length-pos);
+		  var shift = tag.indexOf("}");
+		  tag = tag.substr(0,shift);
+		  pos = pos + shift+1;
+		  //node.hide = tag ;
+
+	        break;
+
+	        default:
+		  word = word + str.substr(pos,1);
+	      }
+	      pos++;
+	    }
+	    //  alert("saindo return");
+	    return node;
+	  }
+
+  var syntax = $(this).html();
+  syntax = syntax.replace(/ \]/g, ']');
+  syntax = syntax.replace(/\] \[/g, '][');
+  syntax = syntax.replace(/\} \]/g, '}]');
+  return parseSyntaxTree( syntax );
+
+
+  }; 
+
+})(jQuery);