696 lines
27 KiB
XML
696 lines
27 KiB
XML
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
|
|
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
<svg
|
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
xmlns:cc="http://creativecommons.org/ns#"
|
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
xmlns:svg="http://www.w3.org/2000/svg"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
id="svg">
|
|
<title>Geekscottes maker ALPHA</title>
|
|
<defs id="defs">
|
|
<style type="text/css">
|
|
<![CDATA[
|
|
.strip .fond {
|
|
fill:rgb(202,225,232);
|
|
stroke-width:10;
|
|
stroke:rgb(151,176,183);
|
|
visibility:hidden;
|
|
}
|
|
.strip:hover .fond {
|
|
visibility:visible;
|
|
}
|
|
.strip .outils {
|
|
visibility:hidden;
|
|
}
|
|
.strip:hover .outils {
|
|
visibility:visible;
|
|
}
|
|
]]>
|
|
</style>
|
|
|
|
<!--
|
|
TODO
|
|
defs :
|
|
Définir ici tous les icônes : croix, actualiser, plus, etc, etc
|
|
-->
|
|
<path id="croix" d="M 10 10 L 15 15 L 20 10 L 15 15 L 10 20 L 15 15 L 20 20" style="stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"/>
|
|
<g id="actualiser">
|
|
<circle cx="5" cy="5" r="5" stroke="black" stroke-width="3" fill-opacity="0"/>
|
|
<path d="M 9 9 L 5 5" stroke="black" stroke-width="3" fill="none"/>
|
|
</g>
|
|
<g id="sauver">
|
|
<rect width="10" height="10" fill-opacity="0" stroke="black" stroke-width="3"/>
|
|
<circle cx="5" cy="5" r="5" stroke="black" stroke-width="3" fill-opacity="0"/>
|
|
</g>
|
|
</defs>
|
|
<g id="strip" >
|
|
</g>
|
|
<!--<g id="case_1" transform="translate(0,100)">
|
|
<g id="contenu" transform="translate(0,145)scale(0.7)">
|
|
<use id="personnage_g" xlink:href="#oldtux" display="inline"/>
|
|
<use id="personnage_d" xlink:href="#oldtux" display="inline" transform="scale(-1,1)translate(-880)"/>
|
|
<g id="bulle_1" transform="translate(280)">
|
|
<path style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
d="M 34.345187,41.199484 C 37.435469,13.765525 119.75324,16.680839 188.89853,17.460899 C 243.33906,18.075068 320.82456,6.6953948 328.29958,46.755323 C 338.7968,107.48398 250.19808,95.647905 205.56604,96.757874 C 160.9437,97.867602 128.80494,93.348698 81.317279,92.717264 C 70.761213,92.571352 34.728914,118.66279 11.616754,120.49646 C 26.610412,112.20373 39.510738,101.1199 46.467017,82.110663 C 45.764437,67.360926 31.254905,68.633443 34.345187,41.199484 z"
|
|
id="pathBulle_1" />
|
|
<text id="textebulle_1"></text>
|
|
</g>
|
|
<g id="bulle_2" transform="translate(280,250)">
|
|
<path style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
d="M 54,21 L 154,21 Q 174,21 174,41 L 174,101 Q 174,121 154,121 L 54,121 Q 34,121 34,101 L 34,41 Q 34,21 54,21 z"
|
|
id="pathBulle_2" />
|
|
<text id="textebulle_2"></text>
|
|
</g>
|
|
</g>
|
|
<rect
|
|
style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:3.91113186;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1"
|
|
id="cadre"
|
|
width="600"
|
|
height="480"
|
|
x="10" y="0" ry="0" />
|
|
</g>-->
|
|
<g id="formulaire" transform="translate(0,300)">
|
|
<switch>
|
|
<foreignObject width="1000" height="1000">
|
|
<body xmlns="http://www.w3.org/1999/xhtml">
|
|
<div>
|
|
<form method="post" action="javascript:chargerURL(document.getElementById('url').value)">
|
|
<fieldset style="" id="upload">
|
|
<legend>Charger un strip depuis une URL</legend>
|
|
<label for="url">Adresse du fichier : </label><input type="text" id="url" name="url" value="geekscottes_133.xml" size="50"/>
|
|
<input type="submit" value="Charger" id="xml_url_validation"/>
|
|
</fieldset>
|
|
</form>
|
|
<form method="post" action="javascript:chargerXML(document.getElementById('xml_area').value)">
|
|
<fieldset>
|
|
<legend>Charger un strip depuis du code XML</legend>
|
|
<label for="xml_area">nom</label>
|
|
<textarea id="xml_area" name="xml_area" rows="15" cols="130">code</textarea>
|
|
<input type="submit" value="Charger" id="xml_area_validation"/>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</foreignObject>
|
|
<text x="50" y="50">Votre navigateur ne supporte pas la balise ForeignObject, vous ne pourrez pas utiliser cet outil.</text>
|
|
</switch>
|
|
</g>
|
|
<script type="text/javascript">
|
|
<![CDATA[
|
|
const svgNS = "http://www.w3.org/2000/svg";
|
|
const xlinkns = "http://www.w3.org/1999/xlink";
|
|
const xhtmlns = "http://www.w3.org/1999/xhtml";
|
|
var root = document.documentElement;
|
|
|
|
|
|
/* Extends Element functionality to add insertElement method */
|
|
Element.prototype.constructElementNS = function( namespace, elementName, attributeObj ) {
|
|
var el = document.createElementNS( namespace, elementName );
|
|
for ( var attr in attributeObj )
|
|
{
|
|
var attrValue = attributeObj[ attr ];
|
|
if ("object" == typeof attrValue) {
|
|
el.setAttributeNS( attrValue[0], attr, attrValue[1] );
|
|
}
|
|
else {
|
|
el.setAttribute( attr, attrValue );
|
|
}
|
|
}
|
|
|
|
return el;
|
|
}
|
|
|
|
Element.prototype.constructElement = function( elementName, attributeObj ) {
|
|
var el = this.constructElementNS( this.namespaceURI, elementName, attributeObj );
|
|
return el;
|
|
}
|
|
|
|
Element.prototype.insertElementNS = function( namespace, elementName, attributeObj, index ) {
|
|
var el = this.constructElementNS( namespace, elementName, attributeObj );
|
|
|
|
// insert child at requested index, or as last child if index is too high or no index is specified
|
|
if ( null == index ) {
|
|
this.appendChild( el );
|
|
}
|
|
else {
|
|
var targetIndex = index + 1;
|
|
if ( 0 == index ) {
|
|
targetIndex = 0;
|
|
}
|
|
|
|
var targetEl = this.childNodes[ targetIndex ];
|
|
if ( targetEl ) {
|
|
this.insertBefore( el, targetEl );
|
|
}
|
|
else {
|
|
this.appendChild( el );
|
|
}
|
|
}
|
|
|
|
return el;
|
|
}
|
|
|
|
Element.prototype.insertElement = function( elementName, attributeObj, index ) {
|
|
var el = this.insertElementNS( this.namespaceURI, elementName, attributeObj, index );
|
|
return el;
|
|
}
|
|
|
|
idstrip = 0;
|
|
|
|
// Point
|
|
function Point(x, y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
|
|
// CurvePoint
|
|
function CurvePoint(type, pointList) {
|
|
this.type = type;
|
|
this.pointList = pointList;
|
|
this.setOffset = function(start, end, off_x, off_y) {
|
|
for(var i = start ; i < end ; i++) {
|
|
this.pointList[i].x += off_x;
|
|
this.pointList[i].y += off_y;
|
|
}
|
|
}
|
|
this.toString = function() {
|
|
var str = this.type + " ";
|
|
|
|
for(var i = 0 ; i < this.pointList.length ; i++) {
|
|
str += this.pointList[i].x + "," + this.pointList[i].y + " ";
|
|
}
|
|
|
|
return str;
|
|
}
|
|
}
|
|
|
|
function PM(x, y) {
|
|
return new CurvePoint("M", [new Point(x, y)]);
|
|
}
|
|
|
|
function PL(x, y) {
|
|
return new CurvePoint("L", [new Point(x, y)]);
|
|
}
|
|
|
|
function PQ(x1, y1, x2, y2) {
|
|
return new CurvePoint("Q", [new Point(x1, y1), new Point(x2, y2)]);
|
|
}
|
|
|
|
/*function PC(x1, y1, x2, y2, x3, y3) {
|
|
return new CurvePoint("C", [new Point(x1, y1), new Point(x2, y2), new Point(x3, y3)]);
|
|
}*/
|
|
|
|
// Curve
|
|
function Curve(points, closed) {
|
|
this.points = points;
|
|
this.setOffset = function(start,startP, end,endP, off_x, off_y) {
|
|
this.points[start].setOffset(startP,this.points[start].pointList.length, off_x, off_y);
|
|
for(var i = start+1 ; i < end ; i++) {
|
|
this.points[i].setOffset(0,this.points[i].pointList.length,off_x, off_y);
|
|
}
|
|
this.points[end].setOffset(0,endP, off_x, off_y);
|
|
}
|
|
this.toString = function() {
|
|
var str = "";
|
|
for(var i = 0 ; i < this.points.length ; i++) {
|
|
str += this.points[i].toString();
|
|
}
|
|
|
|
if(this.closed) {
|
|
str += "z"
|
|
}
|
|
|
|
return str;
|
|
}
|
|
this.closed = closed;
|
|
}
|
|
|
|
//Objet Case
|
|
function Case(num, width, fond) {
|
|
this.num = parseInt(num);
|
|
this.width = parseInt(width);
|
|
this.fond = fond;
|
|
this.persos = new Array();
|
|
this.bulles = new Array();
|
|
//var this.strip;
|
|
this.alert = function() {
|
|
alert("Taille: " + this.width + " Num: " + this.num);
|
|
}
|
|
this.ajouterPerso = function(perso) {
|
|
this.persos.push(perso);
|
|
perso.case = this;
|
|
}
|
|
this.ajouterBulle = function(bulle) {
|
|
this.bulles.push(bulle);
|
|
bulle.case = this;
|
|
}
|
|
this.getNoeud = function(height, left) {
|
|
var noeud_fond = document.createElementNS(svgNS, "use");
|
|
noeud_fond.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", this.fond);
|
|
var noeud_croix = document.createElementNS(svgNS, "use");
|
|
noeud_croix.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", "#croix");
|
|
noeud_croix.style.visibility = 'hidden';
|
|
noeud_croix.strip = this.strip;
|
|
noeud_croix.case = this;
|
|
noeud_croix.setAttribute("onclick","javascript:this.strip.supprimerCase(this.case.num);");
|
|
var noeud_case = document.createElementNS(svgNS, "g");
|
|
//noeud_case.strip = this.strip;
|
|
noeud_case.appendChild(noeud_fond);
|
|
noeud_case.setAttribute("id", "strip-"+this.strip.id+"-case-"+this.num);
|
|
noeud_case.setAttribute("class", "case");
|
|
noeud_case.setAttribute("transform", "translate("+left+")");
|
|
noeud_case.croix = noeud_croix;
|
|
noeud_case.setAttribute("onmouseover","javascript:this.croix.style.visibility = 'visible'");
|
|
noeud_case.setAttribute("onmouseout","javascript:this.croix.style.visibility = 'hidden'");
|
|
var noeud_cadre = document.createElementNS(svgNS, "rect");
|
|
noeud_cadre.setAttribute("style","fill: none; stroke: rgb(0, 0, 0); stroke-width: 4;");
|
|
noeud_cadre.setAttribute("width",this.width);
|
|
noeud_cadre.setAttribute("height",height);
|
|
noeud_cadre.setAttribute("x",0);
|
|
noeud_cadre.setAttribute("y",0);
|
|
|
|
// AJOUTER LES PERSOS
|
|
for(this.i=0;(this.i < this.persos.length);this.i++) {
|
|
noeud_case.appendChild(this.persos[this.i].getNoeud());
|
|
// AJOUTER LES BULLES DES PERSOS
|
|
for(this.j=0;(this.j < this.persos[this.i].bulles.length);this.j++) {
|
|
noeud_case.appendChild(this.persos[this.i].bulles[this.j].getNoeud());
|
|
}
|
|
}
|
|
|
|
// AJOUTER LES BULLES
|
|
for(this.i=0;(this.i < this.bulles.length);this.i++) {
|
|
noeud_case.appendChild(this.bulles[this.i].getNoeud());
|
|
}
|
|
|
|
noeud_case.appendChild(noeud_cadre); // le cadre est par dessus le reste
|
|
noeud_case.appendChild(noeud_croix);
|
|
|
|
return noeud_case;
|
|
}
|
|
this.getXML = function(tab) {
|
|
this.xml = tab+"<case fond=\""+this.fond+"\" width=\""+this.width+"\">\n"
|
|
|
|
// AJOUTER LES PERSOS
|
|
for(this.i=0;(this.i < this.persos.length);this.i++) {
|
|
this.xml += this.persos[this.i].getXML(tab+"\t");
|
|
}
|
|
|
|
// AJOUTER LES BULLES
|
|
for(this.i=0;(this.i < this.bulles.length);this.i++) {
|
|
this.xml += this.bulles[this.i].getXML(tab+"\t");
|
|
}
|
|
|
|
this.xml += tab+"</case>\n";
|
|
return this.xml;
|
|
}
|
|
}
|
|
|
|
//Objet Perso
|
|
function Perso(lien, x, y, pos) {
|
|
this.url = lien;
|
|
this.x = parseInt(x);
|
|
this.y = parseInt(y);
|
|
this.pos = pos;
|
|
this.bulles = new Array();
|
|
this.alert = function() {
|
|
alert("Position: " + this.x + ", " + this.y + " Url: " + this.url);
|
|
}
|
|
this.draw = function() {
|
|
document.getElementById("personnage_"+this.pos).setAttribute("xlink:href", this.url);
|
|
}
|
|
this.ajouterBulle = function(bulle) {
|
|
this.bulles.push(bulle);
|
|
bulle.perso = this;
|
|
}
|
|
this.getNoeud = function() {
|
|
noeud_perso = document.createElementNS(svgNS, "use");
|
|
noeud_perso.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", this.url);
|
|
if(this.pos == "gauche") transform = "translate("+this.x+","+this.y+")";
|
|
if(this.pos == "droite") transform = "translate("+(this.x+250)+","+this.y+") scale(-1,1)"
|
|
noeud_perso.setAttribute("transform", transform);
|
|
return noeud_perso;
|
|
}
|
|
this.getXML = function(tab) {
|
|
this.xml = tab+"<personnage url=\""+this.url+"\" x=\""+this.x+"\" y=\""+this.y+"\" pos=\""+this.pos+"\">\n";
|
|
for(this.i=0;this.i < this.bulles.length;this.i++) {
|
|
this.xml += this.bulles[this.i].getXML(tab+"\t");
|
|
}
|
|
this.xml += tab+"</personnage>\n";
|
|
return this.xml;
|
|
}
|
|
}
|
|
|
|
function ajouteTSpan(parent, texte, x, y) {
|
|
noeud_span = document.createElementNS(svgNS, "tspan");
|
|
noeud_span.setAttribute("x", x);
|
|
noeud_span.setAttribute("y", y);
|
|
noeud_span.textContent = texte;
|
|
parent.appendChild(noeud_span);
|
|
}
|
|
|
|
// Objet Bulle
|
|
function Bulle(x, y, texte, w, size) {
|
|
this.x = parseInt(x);
|
|
this.y = parseInt(y);
|
|
this.w = parseInt(w);
|
|
this.size = parseInt(size);
|
|
this.h = 100;
|
|
this.texte = texte;
|
|
this.graphic_node = document.createElementNS(svgNS, "g");
|
|
this.noeud = this.graphic_node;
|
|
this.path = document.createElementNS(svgNS, "path");
|
|
this.graphic_node.appendChild(this.path);
|
|
this.graphic_node.setAttribute("onmouseover","javascript:this.childNodes[0].setAttribute(\"style\",\"fill: rgb(255, 255, 255); stroke: red; stroke-width: 3;\");");
|
|
this.graphic_node.setAttribute("onmouseout","javascript:this.childNodes[0].setAttribute(\"style\",\"fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 3;\");");
|
|
this.graphic_node.setAttribute("onclick","javascript:this.bulle.editForm();");
|
|
this.graphic_node.bulle = this;
|
|
this.path.setAttribute("style", "fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 3;");
|
|
this.edit_node = document.createElementNS(svgNS, "switch");
|
|
//var foreign = document.createElementNS(svgNS,"foreignObject");// why this make a "foreignobject" instead of "foreignObject" ??
|
|
var foreign = this.edit_node.insertElement( "foreignObject", { x:8, width:this.w, height:this.h } );
|
|
//var p = fo.insertElementNS( xhtmlns, "p" );
|
|
|
|
//foreign.setAttribute('width',this.w);
|
|
//foreign.setAttribute('height',this.h);
|
|
//this.edit_node.appendChild(foreign);
|
|
//var body = document.createElement("body");
|
|
//body.setAttribute('xmlns',"http://www.w3.org/1999/xhtml");
|
|
//foreign.appendChild(body);
|
|
var form = foreign.insertElementNS( xhtmlns, "form" );
|
|
//var form = document.createElement("form");
|
|
//body.appendChild(form);
|
|
var area = form.insertElement("textarea");
|
|
area.setAttribute("style","background:none;border:1px dashed gray;width:"+(this.w-20)+"px;");
|
|
area.setAttribute("name","area");
|
|
area.setAttribute("onblur","javascript:this.node.submitForm();");
|
|
area.node = this;
|
|
//form.appendChild(area);
|
|
this.actuPath = function() {
|
|
this.path.setAttribute("d", new Curve([
|
|
PM((this.x+20),this.y),
|
|
PL((this.x+this.w-20),this.y), //haut de la bulle
|
|
PQ((this.x+this.w),this.y,(this.x+this.w),(this.y+20)),
|
|
PL((this.x+this.w),(this.y+this.h-20)), //droite de la bulle
|
|
PQ((this.x+this.w),(this.y+this.h),(this.x+this.w-20),(this.y+this.h)),
|
|
PL((this.x+20),(this.y+this.h)), //bas de la bulle
|
|
PQ(this.x,(this.y+this.h),this.x,(this.y+this.h-20)),
|
|
PL(this.x,(this.y+20)), //gauche de la bulle
|
|
PQ(this.x,this.y,(this.x+20),this.y)
|
|
], true) );
|
|
}
|
|
this.alert = function() {
|
|
alert("Position: " + this.x + ", " + this.y + " Texte: " + this.texte);
|
|
}
|
|
/*this.delier = function() {
|
|
this.perso = null;
|
|
}*/
|
|
this.editForm = function() {
|
|
this.graphic_node.setAttribute("onclick","");
|
|
this.edit_node.firstElementChild.firstElementChild.firstElementChild.textContent=this.texte;
|
|
this.edit_node.firstElementChild.firstElementChild.firstElementChild.style.height=this.h+"px";
|
|
this.edit_node.setAttribute('transform','translate('+this.x+','+this.y+')');
|
|
this.edit_node.childNodes[0].setAttribute('height',this.h);
|
|
this.noeud.replaceChild(this.edit_node,this.noeud.childNodes[1]);
|
|
this.edit_node.firstElementChild.firstElementChild.firstElementChild.focus();
|
|
}
|
|
this.submitForm = function() {
|
|
//alert('submit');
|
|
this.texte = this.edit_node.childNodes[0].firstElementChild.firstElementChild.value;
|
|
this.noeud.replaceChild(this.getNoeudTexte(),this.edit_node);
|
|
this.actuPath();
|
|
this.graphic_node.setAttribute("onclick","javascript:this.bulle.editForm();");
|
|
//this.refreshNoeud();
|
|
}
|
|
this.refreshNoeud = function() {
|
|
//this.noeud.appendChild(this.getNoeudTexte());
|
|
this.noeud.childNodes[1] = this.getNoeudTexte();
|
|
this.actuPath();
|
|
return this.noeud;
|
|
}
|
|
this.getNoeud = function() {
|
|
return this.noeud;
|
|
}
|
|
this.getNoeudTexte = function() {
|
|
const espace_ligne = 20;
|
|
|
|
var noeud_texte = document.createElementNS(svgNS, "text");
|
|
if(!isNaN(this.size)) noeud_texte.setAttributeNS(null,"font-size", this.size);
|
|
const b_parent = document.getElementById("strip");
|
|
|
|
var mots = this.texte.split(" ");
|
|
var mot_act = 0;
|
|
var nb_mots = mots.length;
|
|
var num_ligne = 1;
|
|
|
|
// On crée un noeud <text> temporaire, pour les calculs de longueur
|
|
noeud_temp = document.createElementNS(svgNS, "text");
|
|
if(!isNaN(this.size)) noeud_temp.setAttributeNS(null,"font-size", this.size);
|
|
noeud_temp.textContent = "";
|
|
b_parent.appendChild(noeud_temp);
|
|
|
|
while (mot_act < nb_mots) {
|
|
// On sauvegarde la ligne actuelle
|
|
var texte_act = noeud_temp.textContent;
|
|
var taille_act = noeud_temp.getComputedTextLength();
|
|
// On tente l'insertion du mot suivant
|
|
if (noeud_temp.textContent != "")
|
|
noeud_temp.textContent += " ";
|
|
noeud_temp.textContent+= mots[mot_act];
|
|
|
|
var longueur = noeud_temp.getComputedTextLength();
|
|
|
|
if (longueur > this.w && texte_act != "") {
|
|
// Trop long (et il y avait déjà des mots sur la ligne)
|
|
x = this.x+(this.w-taille_act)/2;
|
|
y = this.y + num_ligne * espace_ligne + 5;
|
|
ajouteTSpan(noeud_texte, texte_act, x, y);
|
|
noeud_temp.textContent = "";
|
|
num_ligne++;
|
|
} else {
|
|
mot_act++;
|
|
}
|
|
}
|
|
|
|
if (noeud_temp.textContent != "") {
|
|
x = this.x+(this.w-noeud_temp.getComputedTextLength())/2;
|
|
y = this.y + num_ligne * espace_ligne + 5;
|
|
ajouteTSpan(noeud_texte, noeud_temp.textContent, x, y);
|
|
num_ligne++;
|
|
}
|
|
|
|
b_parent.removeChild(noeud_temp);
|
|
|
|
this.h = espace_ligne * (num_ligne);
|
|
return noeud_texte;
|
|
}
|
|
this.noeud.appendChild(this.getNoeudTexte());
|
|
this.refreshNoeud();
|
|
/*this.getXml = function() { //renvoi un objet XML contenant la bulle
|
|
noeud_bulle =
|
|
}*/
|
|
this.getXML = function(tab) {
|
|
return tab+"<bulle x=\""+this.x+"\" y=\""+this.y+"\" width=\""+this.w+"\" contour=\""+this.contour+"\">"+this.texte+"</bulle>\n";
|
|
}
|
|
}
|
|
|
|
//Objet Strip
|
|
function Strip(id, x, y, height, editable) {
|
|
this.noeud = document.getElementById(id);
|
|
this.id = idstrip++;
|
|
this.x = parseInt(x);
|
|
this.y = parseInt(y);
|
|
this.height = parseInt(height);
|
|
this.cases = new Array();
|
|
this.noeud.setAttribute("transform", "translate("+this.x+","+this.y+")");
|
|
this.editable = editable;
|
|
this.ajouterCase = function(c) {
|
|
this.cases.push(c);
|
|
c.strip = this;
|
|
}
|
|
this.supprimerCase = function(i) {
|
|
this.noeud.removeChild(document.getElementById("strip-"+this.id+"-case-"+i)); // suppression du nœud SVG de la case
|
|
for(var num=i+1;num<this.cases.length;num++) { // décalage des nœuds SVG des autres cases
|
|
document.getElementById("strip-"+this.id+"-case-"+num).setAttribute("transform", document.getElementById("strip-"+this.id+"-case-"+num).getAttribute("transform")+"translate(-"+(20+this.cases[i].width)+")");
|
|
}
|
|
this.fond.setAttribute("width",this.fond.getAttribute("width")-(20+this.cases[i].width)); // diminuer la taille du fond
|
|
this.cases.splice(i,1); // suppression de la case du tableau
|
|
for(var num=i;num<this.cases.length;num++) { // décalage des autres cases
|
|
document.getElementById("strip-"+this.id+"-case-"+this.cases[num].num).setAttribute("id","strip-"+this.id+"-case-"+num);
|
|
this.cases[num].num--;
|
|
}
|
|
if(this.cases.length <= 0) this.clear(); // s'il n'y a plus de cases, on supprime le strip.
|
|
}
|
|
this.draw = function() {
|
|
var x = 0;
|
|
this.noeud.setAttribute("transform", "translate("+this.x+","+this.y+")");
|
|
|
|
var noeud_fond = document.createElementNS(svgNS, "rect");
|
|
noeud_fond.setAttribute("height",this.height+40);
|
|
this.noeud.appendChild(noeud_fond);
|
|
this.fond = noeud_fond;
|
|
//noeud_fond.setAttribute("style","fill:rgb(202,225,232);stroke-width:10;stroke:rgb(151,176,183)");
|
|
noeud_fond.setAttribute("x",-10);
|
|
noeud_fond.setAttribute("y",-10);
|
|
//noeud_fond.setAttribute("opacity",0);
|
|
|
|
for(this.i=0;this.i < this.cases.length;this.i++) {
|
|
this.noeud.appendChild(this.cases[this.i].getNoeud(this.height,x));
|
|
x += 20 + this.cases[this.i].width;
|
|
}
|
|
|
|
noeud_fond.setAttribute("width",x);
|
|
|
|
var noeud_outils = document.createElementNS(svgNS, "g");
|
|
noeud_outils.setAttribute("transform","translate(0,"+(this.height+10)+")");
|
|
var noeud_clear = document.createElementNS(svgNS, "use");
|
|
noeud_clear.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", "#croix");
|
|
noeud_clear.setAttribute("onclick","javascript:this.strip.clear();");
|
|
noeud_clear.setAttribute("title","supprimer");
|
|
noeud_clear.setAttribute("transform","translate(-10,-10)");
|
|
noeud_clear.strip = this;
|
|
var noeud_actualiser = document.createElementNS(svgNS, "use");
|
|
noeud_actualiser.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", "#actualiser");
|
|
noeud_actualiser.setAttribute("onclick","javascript:this.strip.redraw();");
|
|
noeud_actualiser.setAttribute("title","actualiser");
|
|
noeud_actualiser.setAttribute("transform","translate(15)");
|
|
noeud_actualiser.strip = this;
|
|
var noeud_sauver = document.createElementNS(svgNS, "use");
|
|
noeud_sauver.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", "#sauver");
|
|
noeud_sauver.setAttribute("onclick","javascript:document.getElementById('xml_area').value = this.strip.getXML();");
|
|
noeud_sauver.setAttribute("title","sauver");
|
|
noeud_sauver.setAttribute("transform","translate(30)");
|
|
noeud_sauver.strip = this;
|
|
|
|
noeud_outils.appendChild(noeud_clear);
|
|
noeud_outils.appendChild(noeud_actualiser);
|
|
noeud_outils.appendChild(noeud_sauver);
|
|
|
|
this.noeud.appendChild(noeud_outils);
|
|
//this.noeud.setAttribute("onmouseover","javascript:if(this.in!='in') { this.noeud_outils.style.visibility = 'visible';this.noeud_fond.setAttribute('opacity',100);this.in='in'}");
|
|
//this.noeud.setAttribute("onmouseout","javascript:this.noeud_outils.style.visibility = 'hidden';this.noeud_fond.setAttribute('opacity',0);this.in='out'");
|
|
this.noeud.noeud_outils = noeud_outils;
|
|
this.noeud.noeud_fond = noeud_fond;
|
|
this.noeud.setAttribute("class","strip");
|
|
noeud_fond.setAttribute("class","fond");
|
|
noeud_outils.setAttribute("class","outils");
|
|
}
|
|
this.clear = function() {
|
|
while (this.noeud.firstChild) this.noeud.removeChild(this.noeud.firstChild);
|
|
}
|
|
this.redraw = function() {
|
|
this.clear();
|
|
alert('redrawing');
|
|
this.draw();
|
|
}
|
|
this.genXML = function() {
|
|
document.implementation.createDocument("", "strip", null);
|
|
}
|
|
this.getXML = function() {
|
|
var xml = "<strip x=\""+this.x+"\" y=\""+this.y+"\" height=\""+this.height+"\">\n";
|
|
for(var i=0;i < this.cases.length;i++) {
|
|
xml += this.cases[i].getXML("\t");
|
|
}
|
|
xml += "</strip>\n";
|
|
return xml;
|
|
}
|
|
}
|
|
|
|
function chargerURL(url) {
|
|
alert("c'est parti...");
|
|
xml = getXmlFromURL(url);
|
|
strip = parseStrip(xml);
|
|
strip.draw();
|
|
alert("voilà");
|
|
}
|
|
function chargerXML(txt) {
|
|
alert("c'est parti (xml) ...");
|
|
xml = getXmlFromText(txt);
|
|
strip = parseStrip(xml);
|
|
strip.draw();
|
|
alert("voilà");
|
|
}
|
|
|
|
/*var strip = new Strip("strip",10,100,480,true);
|
|
case1 = new Case(0,600,"");
|
|
perso = new Perso("gnu.svg#layer1",0,103,"gauche");
|
|
bulle = new Bulle(150,10,"coucou les amis",100,20);
|
|
perso.ajouterBulle(bulle);
|
|
case1.ajouterPerso(perso);
|
|
case2 = new Case(1,600,"");
|
|
strip.ajouterCase(case1);
|
|
strip.ajouterCase(case2);
|
|
strip.draw();
|
|
alert(strip.getXML());
|
|
strip.supprimerCase(0);
|
|
strip.clear();
|
|
strip.draw();*/
|
|
function getXmlFromURL(url) {
|
|
var xmlDoc;
|
|
xmlDoc=new window.XMLHttpRequest();
|
|
xmlDoc.open("GET",url,false);
|
|
xmlDoc.send("");
|
|
return xmlDoc.responseXML;
|
|
}
|
|
function getXmlFromText(txt) {
|
|
var xmlDoc = new DOMParser().parseFromString(txt,"text/xml");
|
|
return xmlDoc;
|
|
}
|
|
function parseStrip(xmlFile) {
|
|
for(i=0;xmlFile.childNodes[i].nodeType != 1;i++);
|
|
strip_node = xmlFile.childNodes[i];
|
|
//alert(strip_node.textContent);
|
|
|
|
strip = new Strip("strip",strip_node.getAttribute("x"),strip_node.getAttribute("y"),strip_node.getAttribute("height"),true);
|
|
strip.clear();
|
|
num = 0;
|
|
for(i=0;case_node = strip_node.childNodes[i];i++) {
|
|
if(case_node.nodeName == "case") {
|
|
kase = new Case(num,case_node.getAttribute("width"),case_node.getAttribute("fond")); //on peut pas utiliser "case" donc j'utilise "kase"
|
|
num++;
|
|
for(j=0;perso_node = case_node.childNodes[j];j++) {
|
|
if(perso_node.nodeName == "personnage") {
|
|
perso = new Perso(perso_node.getAttribute("url"),perso_node.getAttribute("x"),perso_node.getAttribute("y"),perso_node.getAttribute("pos"));
|
|
for(k=0;bulle_node = perso_node.childNodes[k];k++) {
|
|
if(bulle_node.nodeName == "bulle") {
|
|
bulle = new Bulle(bulle_node.getAttribute("x"),bulle_node.getAttribute("y"),bulle_node.textContent,bulle_node.getAttribute("width"),bulle_node.getAttribute("size"));
|
|
perso.ajouterBulle(bulle);
|
|
}
|
|
}
|
|
kase.ajouterPerso(perso);
|
|
} else if(perso_node.nodeName == "bulle") {
|
|
bulle = new Bulle(perso_node.getAttribute("x"),perso_node.getAttribute("y"),perso_node.textContent,perso_node.getAttribute("width"),perso_node.getAttribute("size"));
|
|
kase.ajouterBulle(bulle);
|
|
}
|
|
}
|
|
strip.ajouterCase(kase);
|
|
}
|
|
}
|
|
alert(new XMLSerializer().serializeToString(xmlFile));
|
|
return strip;
|
|
}
|
|
|
|
//TODO
|
|
//ajouter des appels de fonctions permettant de modifier le strip actif (texte des bulles, positions, ...)
|
|
//pouvoir modifier un élément du strip et actualiser l'affichage => replaceChild
|
|
//ajouter l'interface graphique pour agir sur ces fonctions
|
|
//penser à ajouter du drag and drop
|
|
|
|
//normaliser les id des objets : strip-iddustrip-case-idcase-bulle-idbulle, ... => DONE je crois
|
|
//tout faire pour pouvoir gérer plusieurs strip éditables ou non
|
|
|
|
|
|
|
|
//flip du perso si demandé => fait mais à améliorer
|
|
//perso composé => postponed
|
|
//faire des fonctions générant un fichier xml => DONE
|
|
//avoir des valeurs par défaut pour certains arguments (coté xml => à tester => NE MARCHE PAS) + coté javascript, placement des bulles et des persos
|
|
//faire un DTD pour le xml => DONE
|
|
|
|
]]>
|
|
</script>
|
|
</svg>
|
