nojhan/stripit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Quelques avancées sur la gestion des bulles, début des travaux pour les rendre éditables, mais 2 bugs inexpliquables:

Browse source 
foreignObject devient foreignobjet et n'est pas reconnu
this.node ne veut pas marcher sur la texte area. (faire des essais avec des parentNode pour remonter jusqu'à un noeud plus important.)
This commit is contained in:
MCMic 2010-02-04 15:17:30 +00:00
commit f29607938f
1 changed files with 53 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

74
striped/StripEd.svg
View file

@ -302,8 +302,33 @@
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.createElement("foreignObject");// why this make a "foreignobject" instead of "foreignObject" ??
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 = document.createElement("form");
body.appendChild(form);
var area = document.createElement("textarea");
area.setAttribute("style","background:none;border:1px dashed gray;width:"+(this.w-20)+"px;");
area.setAttribute("name","area");
area.setAttribute("onblur","javascript:alert('this');this.node.submitForm();");
area.node = this;// pourquoi ça ne permet pas de faire this.node dans le onblur?
form.appendChild(area);
this.actuPath = function() {
this.path = new Curve([
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)),
@ -313,7 +338,7 @@
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);
], true) );
}
this.alert = function() {
alert("Position: " + this.x + ", " + this.y + " Texte: " + this.texte);
@ -321,18 +346,25 @@
/*this.delier = function() {
this.perso = null;
}*/
this.getNoeud = function() {
noeud_bulle = document.createElementNS(svgNS, "g");
noeud_texte = this.getNoeudTexte();
noeud_path = document.createElementNS(svgNS, "path");
this.editForm = function() {
this.graphic_node.setAttribute("onclick","");
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.submitForm = function() {
alert('submit');
this.texte = this.edit_node.childNodes[0].area.value;
this.refreshNoeud();
}
this.refreshNoeud = function() {
//this.noeud.appendChild(this.getNoeudTexte());
this.noeud.childNodes[1] = this.getNoeudTexte();
this.actuPath();
noeud_path.setAttribute("d", this.path.toString());
noeud_path.setAttribute("style", "fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 3;");
noeud_bulle.appendChild(noeud_path);
noeud_bulle.appendChild(noeud_texte);
noeud_bulle.setAttribute("onmouseover","javascript:this.childNodes[0].setAttribute(\"style\",\"fill: rgb(255, 255, 255); stroke: red; stroke-width: 3;\");");
noeud_bulle.setAttribute("onmouseout","javascript:this.childNodes[0].setAttribute(\"style\",\"fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 3;\");");
return noeud_bulle;
return this.noeud;
}
this.getNoeud = function() {
return this.noeud;
}
this.getNoeudTexte = function() {
const espace_ligne = 20;
@ -387,7 +419,8 @@
this.h = espace_ligne * (num_ligne);
return noeud_texte;
}
this.actuPath();
this.noeud.appendChild(this.getNoeudTexte());
this.refreshNoeud();
/*this.getXml = function() { //renvoi un objet XML contenant la bulle
noeud_bulle =
}*/
@ -448,16 +481,19 @@
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;
@ -479,6 +515,7 @@
}
this.redraw = function() {
this.clear();
alert('redrawing');
this.draw();
}
this.genXML = function() {
@ -559,6 +596,7 @@
//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
@ -569,16 +607,10 @@
//flip du perso si demandé => fait mais à améliorer
//perso composé => postponed
//pouvoir modifier un élément du strip et actualiser l'affichage => replaceChild
//faire des fonctions générant un fichier xml
//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
//faire l'éditeur :
//ajouter du cliquer glisser
//ajouter/éditer bulles et perso
]]>
</script>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Before After
Before After