[Qsos-commits] qsos/apps/xuleditor/chrome/content editor.js

[Raphaël Semeteys]

CVSROOT:        /sources/qsos
Module name:    qsos
Branch:         
Changes by:     Raphaël Semeteys <address@hidden>      06/05/18 22:18:01

Modified files:
        apps/xuleditor/chrome/content: editor.js 

Log message:
        SVG Chart functions

CVSWeb URLs:
http://cvs.savannah.gnu.org/viewcvs/qsos/qsos/apps/xuleditor/chrome/content/editor.js.diff?tr1=1.4&tr2=1.5&r1=text&r2=text

Patches:
Index: qsos/apps/xuleditor/chrome/content/editor.js
diff -u qsos/apps/xuleditor/chrome/content/editor.js:1.4 
qsos/apps/xuleditor/chrome/content/editor.js:1.5
--- qsos/apps/xuleditor/chrome/content/editor.js:1.4    Wed May 17 16:36:43 2006
+++ qsos/apps/xuleditor/chrome/content/editor.js        Thu May 18 22:18:01 2006
@@ -1,7 +1,7 @@
 /*
 **  Copyright (C) 2006 Atos Origin 
 **
-**  Author: Raphaël Semeteys <address@hidden>
+**  Author: Rapha� Semeteys <address@hidden>
 **
 **  This program is free software; you can redistribute it and/or modify
 ** it under the terms of the GNU General Public License as published by
@@ -102,6 +102,9 @@
        //Menu management
         document.getElementById("file-close").setAttribute("disabled", 
"false");
        document.getElementById("file-saveas").setAttribute("disabled", 
"false");
+
+       //Draw top-level SVG chart
+       drawChart();
     }
 }
 
@@ -440,3 +443,132 @@
        myDoc.setkeyscore(id, score);
        document.getElementById("file-save").setAttribute("disabled", "false");
 }
+
+////////////////////////////////////////////////////////////////////
+// SVG Chart functions
+////////////////////////////////////////////////////////////////////
+
+const SCALE = 100;
+const FONT_SIZE = SCALE/10;
+
+//Draw the SVG chart of a criterion
+//criterion: if not specified, the top-level chart of sections is displayed
+function drawChart(criterion) {
+       var myChart = document.getElementById("chart");
+       //Delete pre-existing chart
+       while (myChart.firstChild) {
+               myChart.removeChild(myChart.firstChild);
+       }
+
+       //Collect charting data
+       var myScores = 
(criterion)?myDoc.getSubChartData(criterion):myDoc.getChartData();
+       
+       //draw chart's axis
+       drawAxis(myScores.length);
+       
+       //draw path between points on each axis
+       var myPath = document.createElementNS("http://www.w3.org/2000/svg";, 
"path");
+       var myD = "";
+       var angle;
+       for (i=0; i < myScores.length; i++) {
+               myD += (i==0)?"M":"L";
+               angle = (i+1)*2*Math.PI/(myScores.length);
+               myD += " " + (myScores[i].score)*SCALE*Math.cos(angle) + " " + 
(myScores[i].score)*SCALE*Math.sin(angle) + " ";
+               //2.1 = 2 + 0.1 of padding before actual text display
+               drawText(2.1*SCALE*Math.cos(angle), 2.1*SCALE*Math.sin(angle), 
myScores[i]);
+       }
+       myD += "z";
+       
+       myPath.setAttribute("d", myD);
+       myPath.setAttribute("fill", "none");
+       myPath.setAttribute("stroke", "red");
+       myPath.setAttribute("stroke-width", "2");
+       
+       myChart.appendChild(myPath);
+}
+
+//draw "n" equidistant axis
+function drawAxis(n) {
+       drawCircle(0.5*SCALE);
+       drawCircle(SCALE);
+       drawCircle(1.5*SCALE);
+       drawCircle(2*SCALE);
+       
+       for (i=1; i < n+1; i++) {
+               drawSingleAxis(2*i*Math.PI/n);
+       }
+}
+
+//draw a single axis at "angle" (in radians) from angle 0      
+function drawSingleAxis(angle) {
+       x2 = 2*SCALE*Math.cos(angle);
+       y2 = 2*SCALE*Math.sin(angle);
+       drawLine(0, 0, x2, y2);
+}
+
+//draw a circle of "r" radius
+function drawCircle(r) {
+       var myChart = document.getElementById("chart");
+       
+       var myCircle = document.createElementNS("http://www.w3.org/2000/svg";, 
"circle");
+       myCircle.setAttribute("cx", 0);
+       myCircle.setAttribute("cy", 0);
+       myCircle.setAttribute("r", r);
+       myCircle.setAttribute("fill", "none");
+       myCircle.setAttribute("stroke", "blue");
+       myCircle.setAttribute("stroke-width", "1");
+       
+       myChart.appendChild(myCircle);
+}
+
+//draw a line between two points
+function drawLine(x1, y1, x2, y2) {
+       var myChart = document.getElementById("chart");
+       
+       var myLine = document.createElementNS("http://www.w3.org/2000/svg";, 
"line");
+       myLine.setAttribute("x1", x1);
+       myLine.setAttribute("y1", y1);
+       myLine.setAttribute("x2", x2);
+       myLine.setAttribute("y2", y2);
+       myLine.setAttribute("stroke", "green");
+       myLine.setAttribute("stroke-width", "1");
+       
+       myChart.appendChild(myLine);
+}
+
+//draw an axis legend
+//x, y: coordinates
+//myScore: object chartData (cf. Document.js)
+function drawText(x, y, myScore) {
+       var myChart = document.getElementById("chart");
+       
+       var myText = document.createElementNS("http://www.w3.org/2000/svg";, 
"text");
+       myText.setAttribute("x", x);
+       myText.setAttribute("y", y);
+       myText.setAttribute("font-family", "Verdana");
+       myText.setAttribute("font-size", FONT_SIZE);
+
+       if (myScore.score) {
+               myText.setAttribute("fill", "green");
+       }
+       else {
+               myText.setAttribute("fill", "red");
+               myText.setAttribute("text-decoration", "line-through");
+       }
+       
+       if (myScore.children) {
+               myText.setAttribute("onclick", "drawChart(\"" + myScore.name + 
"\")");
+               myText.setAttribute("text-decoration", "underline");
+       }       
+
+       myText.appendChild(document.createTextNode(myScore.title));
+
+       myChart.appendChild(myText);
+       
+       //text position is ajusted to be outside the circle shape
+       myTextLength = myText.getComputedTextLength();
+       myX = (Math.abs(x)==x)?x:x-myTextLength;
+       myY = (Math.abs(y)==y)?y+FONT_SIZE:y;
+       myText.setAttribute("x", myX);
+       myText.setAttribute("y", myY)
+}
\ No newline at end of file