commit 86dbea6e85f296d42544172bb080036f5cf9291e
parent a4c7ddbda7047c17bff30208051a383cb395162c
Author: gduperon <gduperon@5d9ba3ac-444b-4713-9fb3-0b58e79229a2>
Date: Fri, 30 Apr 2010 00:55:30 +0000
liens entre blocs, partie graphique : presque ok
git-svn-id: https://projetud.info-ufr.univ-montp2.fr/svn/flin607-2009-gduperon@28 5d9ba3ac-444b-4713-9fb3-0b58e79229a2
Diffstat:
7 files changed, 124 insertions(+), 45 deletions(-)
diff --git a/jside/blocs.js b/jside/blocs.js
@@ -47,6 +47,9 @@ function nouveauBloc(nom) {
.toDom()
.attr('id', "edition-" + b.uid)
.hide()
+ .find('.port')
+ .mousedown(uiLierBlocs)
+ .end()
.appendTo('#edition-blocs');
return b;
@@ -87,16 +90,24 @@ function utiliser(uid, uidParent) {
.find('.port')
.mousedown(uiLierBlocs)
.end()
- .appendTo('#edition-' + uidParent);
+ .appendTo('#edition-' + uidParent + ' .contenu:first');
}
function uiReduireBloc () {
$(this)
- .toggleClass('icone-moins')
- .toggleClass('icone-plus')
+ /*.toggleClass('icone-moins')
+ .toggleClass('icone-plus')*/
.parents('.bloc')
- .find('.contenu')
+ .find('.tete')
+ .toggle()
+ .end()
+ .find('.contenu .description')
+ .toggle()
+ .end()
+ .find('.contenu .titre')
.toggle()
.end()
- .toggleResizable();
+ .toggleResizable()
+ // TODO : devrait envoyer 'reduire' un coup sur deux, et 'agrandir' sinon
+ .trigger('reduire');
}
diff --git a/jside/connexions.js b/jside/connexions.js
@@ -17,7 +17,6 @@ function uiActualiserLien(_de, _vers, segments) {
$(segment3)
.width((vers.centerX() - de.centerX()) / 2)
.position({my: 'right center', at: 'center', of: vers});
- $w.debug = [$(segment3), vers];
var neg = segment3.centerY() - segment1.centerY();
@@ -58,17 +57,42 @@ function uiLierBlocs() {
lienBlocsActif.elems.unbind('.creerLien');
segments.remove();
lienBlocsActif.actif = false;
- return true;
+ return false;
});
} else {
log("Connexion lien blocs");
- with (lienBlocsActif) {
- elems.unbind('.creerLien');
- actif = false;
- debug = this;
- uiActualiserLien(start, this, segments);
+
+ // Création du lien
+ var lien = {
+ start: $(lienBlocsActif.start),
+ end: $(this),
+ segments: $(lienBlocsActif.segments)
+ };
+
+ // Un lien a été créé, on est à l'écoute de nouveaux liens
+ // (et non plus à l'écoute de la fin d'une connexion)
+ lienBlocsActif.elems.unbind('.creerLien');
+ lienBlocsActif.actif = false;
+
+ debugg = lien;
+ if ((lien.start.parents('.bloc:last')[0] == lien.end.parents('.bloc:last')[0])
+ || (lien.start.hasClass('entree') && lien.end.hasClass('entree'))
+ || (lien.start.hasClass('sortie') && lien.end.hasClass('sortie'))) {
+ log("abc");
+ lien.segments.remove();
+ return;
}
- return true;
+
+ // Mise à jour des positions des segments lors des drag, etc.
+ $(lien.start).parents('.bloc:last')
+ .add($(lien.end).parents('.bloc:last'))
+ .bind('reduire dragstart drag dragstop resizestart resize resizestop', function (event) {
+ uiActualiserLien(lien.start, lien.end, lien.segments);
+ });
+
+ // Et on re-dessine le lien bien en place maintenant que la cible
+ // est un port et non plus la souris.
+ uiActualiserLien(lien.start, lien.end, lien.segments);
}
return false;
diff --git a/jside/extensions-jQuery.js b/jside/extensions-jQuery.js
@@ -73,7 +73,6 @@ jQuery.fn.extend({
return this.offY.apply(this, arguments);
},
centerX: function() {
- debug = this;
return this.offX() + (this.width() / 2);
},
centerY: function() {
diff --git a/jside/index.html b/jside/index.html
@@ -81,12 +81,42 @@
<script type="text/x-jqote-template" id="modele-edition-bloc">
<![CDATA[
<div class="editionBloc">
- <div class="tete">
- <!--<span class="reduire icone icone-moins"></span>-->
- <%= this.nom %>
- </div>
- <div class="contenu">
- </div>
+ <table class="agencement-bloc">
+ <tbody>
+ <tr style="height: 1em;" class="tete">
+ <td colspan="3">
+ <span class="reduire icone icone-moins"></span>
+ <%= this.nom %>
+ </td>
+ </tr>
+ <tr>
+ <td class="ports sortie">
+ <table class="ports sortie">
+ <tbody>
+ <% for (i = 0; i < this.entrees; i++) { %>
+ <tr>
+ <td class="port sortie"><div class="symbole"></td><!--●-->
+ </tr>
+ <% } %>
+ </tbody>
+ </table>
+ </td>
+ <td style="text-align:center;" class="contenu">
+ </td>
+ <td class="ports entree">
+ <table class="ports entree">
+ <tbody>
+ <% for (i = 0; i < this.sorties; i++) { %>
+ <tr>
+ <td class="port entree"><div class="symbole"></div></td>
+ </tr>
+ <% } %>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
]]>
</script>
@@ -95,8 +125,8 @@
<div class="bloc">
<table class="agencement-bloc">
<tbody>
- <tr style="height: 1em;">
- <td colspan="3" class="tete">
+ <tr style="height: 1em;" class="tete">
+ <td colspan="3">
<span class="reduire icone icone-moins"></span>
<%= this.nom %>
</td>
@@ -107,14 +137,21 @@
<tbody>
<% for (i = 0; i < this.entrees; i++) { %>
<tr>
- <td class="port entree"><div class="port symbole"></td><!--●-->
+ <td class="port entree"><div class="symbole"></td><!--●-->
</tr>
<% } %>
</tbody>
</table>
</td>
<td style="text-align:center;" class="contenu">
- <%= this.description %>
+ <div class="description">
+ <%= this.description %>
+ </div>
+ <div class="titre">
+ <span class="reduire">
+ <%= this.nom %>
+ </span>
+ </div>
</td>
<td class="ports sortie">
<table class="ports sortie">
diff --git a/jside/init.js b/jside/init.js
@@ -20,7 +20,10 @@ function init() {
$('#nouveau-bloc').blink();
rechercher('');
- // Demo
+ demo();
+}
+
+function demo() {
var a = nouveauBloc("abcd");
var b = nouveauBloc("bc");
var c = nouveauBloc("xyz");
diff --git a/jside/recherche.js b/jside/recherche.js
@@ -34,6 +34,7 @@ function rechercher(terme) {
.find('.editer')
.click(function() {
+ arreterRecherche();
uiEditer(elem.uid);
return false;
})
@@ -41,6 +42,7 @@ function rechercher(terme) {
.find('.utiliser')
.click(function() {
+ arreterRecherche();
uiUtiliser(elem.uid);
return false;
})
diff --git a/jside/style.css b/jside/style.css
@@ -150,6 +150,11 @@ body {
background-color: lightgray;
}
+.bloc .contenu .titre {
+ display: none;
+ text-align: center;
+}
+
.bloc .tete {
text-align: center;
}
@@ -162,37 +167,26 @@ body {
padding: 0.4em;
}
-.bloc .ports {
- width:100%;
+/* Ports */
+
+.ports {
height:100%;
width: 1em;
+ padding: 0;
+ border-collapse: collapse;
}
-.bloc .ports.sortie {
+.ports.sortie {
text-align: right;
}
-.bloc .ports.entree {
+.ports.entree {
text-align: left;
}
-.bloc .port.sortie:hover {
- color: green;
-}
-
-.bloc .port.entree:hover {
- color: green;
-}
-
-/* Liens */
-.lien {
- background-color: lightblue;
- position: absolute;
- height: 5px;
- width: 5px;
-}
-
.port .symbole {
+ position: relative;
+ z-index: 10;
width: 10px;
height: 10px;
background-color: lightblue;
@@ -205,6 +199,15 @@ body {
border-color: green;
}
+/* Liens */
+.lien {
+ background-color: lightblue;
+ position: absolute;
+ height: 5px;
+ width: 5px;
+}
+
+
/*.segment-1 {
background-color: lightgreen;
