Permalink
Browse files

Starting.

  • Loading branch information...
0 parents commit cc1f3bc67592b4856e269160a64b8a04bc6db40c @wseidel committed Mar 15, 2011
Showing with 283 additions and 0 deletions.
  1. +4 −0 README
  2. +38 −0 ex01.html
  3. +152 −0 js/jquery.drawTree.js
  4. +89 −0 js/jquery.parseSyntaxTree.js
4 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
+
@@ -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>
+
+
+
+
+
@@ -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);
@@ -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);

0 comments on commit cc1f3bc

Please sign in to comment.