DrawingToolSvg.xml

2- svg application

Home

1- Python Application

2- svg application

3- models with Atom3

4- svg and python with ajax

5 - multiple popup windows with Class Diagram

06- Svg watch with python server

07 - Statecharts structure

Ajax Code

Python Server Code

Javascript Manipulating svg Code

Svg File

Manage

2- svg application

This is exactly the same application than the Drawing tool in python belove. This time, it's code in svg because it's nicer to see and use it. Of course, I need some javascript to listen the mouse event.

just clic here.

Code :

DrawingToolSvg.xml <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800">
<script><![CDATA[
var posx=-1;
var posy=-1;
var svgdoc;
var ins="true";
var mov="false";
var del="false";
var coordX = new Array();
var coordY = new Array();
var move = false;
var object;
var offsetX;
var offsetY;
var currentLine;

function clone_objet(evt)
{
if(ins == "true")
{

svgdoc=evt.target.ownerDocument;
var objet=svgdoc.getElementById("line");
var newnode = objet.cloneNode(false);
if (posx == -1)
{
posx = evt.clientX;
posy = evt.clientY;
coordX.push(posx);
coordY.push(posy);
}
else
{
newnode.setAttributeNS(null , "x1" , posx);
newnode.setAttributeNS(null , "y1" , posy);
newnode.setAttributeNS(null , "x2" , evt.clientX);
newnode.setAttributeNS(null , "y2" , evt.clientY);
newnode.setAttributeNS(null , "id" , coordX.length);
var contents = svgdoc.getElementById('affiche');
          contents.appendChild(newnode);
posx=-1;
posy=-1;
}
}
else
{
if (del == "true")
{
var i = closest(evt.clientX, evt.clientY);
coordX[i]=-100;
coordY[i]=-100;
i++;
elt=document.getElementById('affiche') ;
elt_inclus=document.getElementById(i) ;
elt_rejete=elt.removeChild(elt_inclus) ;
}
else
{
if(mov=="true")
{
move = true;
currentLine = closest(evt.clientX, evt.clientY);
currentLine++;
elt=document.getElementById('affiche') ;
object=document.getElementById(currentLine) ;
document.onmousemove = drag;
          document.onmouseup = stop_drag;
}
}
}
}

function drag(evt)
{
var oldx1=object.getAttribute("x1");
var oldy1=object.getAttribute("y1");
var oldx2=object.getAttribute("x2")-oldx1;
var oldy2=object.getAttribute("y2")-oldy1;
if(move)
{
        object.setAttribute('x1', evt.clientX);
        object.setAttribute('y1', evt.clientY);
object.setAttribute('x2', oldx2+evt.clientX);
object.setAttribute('y2', oldy2+evt.clientY);
     }
}

function stop_drag(evt)
{
coordX[currentLine-1]=evt.clientX;
coordY[currentLine-1]=evt.clientY;
    move = false;
}

function closest(x, y)
{
var i;
var j;
var dist=10000;
var tmp;

for (i=0;i<coordX.length;i++)
{
tmp = Math.sqrt((x-coordX[i])*(x-coordX[i])+(y-coordY[i])*(y-coordY[i]));
if(tmp<dist)
{
dist=tmp;
j=i;
}
}
return j;
}

function insert(evt)
{
var objet_insert=svgdoc.getElementById("insert");
var objet_move=svgdoc.getElementById("move");
var objet_delete=svgdoc.getElementById("delete");
objet_insert.setAttributeNS(null , "fill" , "red");
objet_move.setAttributeNS(null , "fill" , "white");
objet_delete.setAttributeNS(null , "fill" , "white");
var contents = svgdoc.getElementById('affiche');
    contents.appendChild (objet_insert);
    contents.appendChild (objet_move);
    contents.appendChild (objet_delete);
del="false";
ins="true";
mov="false";
}

function movef(evt)
{
var objet_insert=svgdoc.getElementById("insert");
var objet_move=svgdoc.getElementById("move");
var objet_delete=svgdoc.getElementById("delete");
objet_insert.setAttributeNS(null , "fill" , "white");
objet_move.setAttributeNS(null , "fill" , "red");
objet_delete.setAttributeNS(null , "fill" , "white");
var contents = svgdoc.getElementById('affiche');
    contents.appendChild (objet_insert);
    contents.appendChild (objet_move);
    contents.appendChild (objet_delete);
del="false";
ins="false";
mov="true";
}

function delet(evt)
{
var objet_insert=svgdoc.getElementById("insert");
var objet_move=svgdoc.getElementById("move");
var objet_delete=svgdoc.getElementById("delete");
objet_insert.setAttributeNS(null , "fill" , "white");
objet_move.setAttributeNS(null , "fill" , "white");
objet_delete.setAttributeNS(null , "fill" , "red");
var contents = svgdoc.getElementById('affiche');
    contents.appendChild (objet_insert);
    contents.appendChild (objet_move);
    contents.appendChild (objet_delete);
del="true";
ins="false";
mov="false";
}

]]></script>

<g id="affiche">
<text id="texte" x="150" y="40" text-anchor="middle" font-size="20" font-family="Arial" fill="red">Drawing Tool</text>
<rect id="rectangle" onmousedown="clone_objet(evt)" x="50" y="50" width="600" height="480" rx="5" ry="5" style="fill: #FFF; stroke: #000"/>
<rect id="rectangle_fond" x="50" y="450" width="600" height="80" fill="grey"/>
<text x="120" y="480" font-family="Verdana" font-size="11" fill="black">Insert</text>
<text x="320" y="480" font-family="Verdana" font-size="11" fill="black">move</text>
<text x="520" y="480" font-family="Verdana" font-size="11" fill="black">Delete</text>
<polygon id="insert" onmousedown="insert(evt)" fill="red" stroke="black" stroke-width="2" points="100,470 105,475 100,480 95,475"/>
<polygon id="move" onmousedown="movef(evt)" fill="white" stroke="black" stroke-width="2" points="300,470 305,475 300,480 295,475"/>
<polygon id="delete" onmousedown="delet(evt)" fill="white" stroke="black" stroke-width="2" points="500,470 505,475 500,480 495,475"/>
<line id="line" x1="-10" y1="-10" x2="-10" y2="-10" style="stroke: #000; stroke-width: 2px"/>
</g>
</svg>

Maintained by Julien Gardette .

Last Modified: 2008/09/10 00:03:05.