commit 96560a7311f23676c26aad23023cdec57515528a
parent 86fe19b65b7811adc49cb7a1a6053fca4e682917
Author: gduperon <gduperon@5d9ba3ac-444b-4713-9fb3-0b58e79229a2>
Date: Mon, 17 May 2010 22:44:57 +0000
Ajout des ports (vue uniquement)
git-svn-id: https://projetud.info-ufr.univ-montp2.fr/svn/flin607-2009-gduperon@58 5d9ba3ac-444b-4713-9fb3-0b58e79229a2
Diffstat:
7 files changed, 187 insertions(+), 17 deletions(-)
diff --git a/jside3/index.html b/jside3/index.html
@@ -48,10 +48,11 @@
<script type="text/javascript" src="mvc/bloc.js"></script>
<script type="text/javascript" src="mvc/instance-bloc.js"></script>
<script type="text/javascript" src="mvc/definitions.js"></script>
+ <script type="text/javascript" src="mvc/ports.js"></script>
+ <script type="text/javascript" src="mvc/port.js"></script>
<script type="text/javascript" src="mvc/definition.js"></script>
<script type="text/javascript" src="mvc/connexion.js"></script>
- <script type="text/javascript" src="mvc/port.js"></script>
<!-- Test -->
<script type="text/javascript" src="test.js"></script>
@@ -141,16 +142,38 @@
<input type="button" class="définitions vNouvelle-définition" value="+"/>
<div class="clearfloat"></div>
</div>
- <div class="définitions vContenusTabs">
- <div class="définition vCorps vAucune-définition">
- Aucune définition.
- <br/>
- Cliquez sur le + ci-dessus pour en créer une.
+ <div class="définitions vContenus">
+ <div class="définitions vPorts-entrée"></div>
+ <div class="définitions vPorts-sortie"></div>
+ <div class="définitions vContenusTabs">
+ <div class="définition vCorps vAucune-définition">
+ Aucune définition.
+ <br/>
+ Cliquez sur le + ci-dessus pour en créer une.
+ </div>
</div>
</div>
</div>
]]>
</script>
+ <script type="text/x-jqote-template" id="vue-ports-entrée">
+ <![CDATA[
+ <div class="ports vPorts vEntrée">
+ </div>
+ ]]>
+ </script>
+ <script type="text/x-jqote-template" id="vue-ports-sortie">
+ <![CDATA[
+ <div class="ports vPorts vSortie">
+ </div>
+ ]]>
+ </script>
+ <script type="text/x-jqote-template" id="vue-port">
+ <![CDATA[
+ <span class="port vMain">
+ </span>
+ ]]>
+ </script>
<script type="text/x-jqote-template" id="vue-définition-titre">
<![CDATA[
<h3 class="définition vTitre">Nom de la définition</h3>
diff --git a/jside3/mvc/bloc.js b/jside3/mvc/bloc.js
@@ -11,7 +11,7 @@ function MBloc() {
// Enfants
définitions: [],
- portsEntree: [],
+ portsEntrée: [],
portsSortie: [],
// Instanciation
@@ -56,6 +56,28 @@ function MBloc() {
onAjoutDéfinition: function(callback) {
this.cbAjoutDéfinition.push(callback);
},
+ ajouterPortEntrée: function(p) {
+ p.bloc = this;
+ p.entrée = true;
+ this.portsEntrée.push(p);
+ faireCallbacks(this.cbAjoutPortEntrée, p);
+ faireCallbacks(this.cbModification, this);
+ },
+ cbAjoutPortEntrée: [],
+ onAjoutPortEntrée: function(callback) {
+ this.cbAjoutPortEntrée.push(callback);
+ },
+ ajouterPortSortie: function(p) {
+ p.bloc = this;
+ p.entrée = false;
+ this.portsSortie.push(p);
+ faireCallbacks(this.cbAjoutPortSortie, p);
+ faireCallbacks(this.cbModification, this);
+ },
+ cbAjoutPortSortie: [],
+ onAjoutPortSortie: function(callback) {
+ this.cbAjoutPortSortie.push(callback);
+ },
cbChangeNom: [],
onChangeNom: function(callback) {
this.cbChangeNom.push(callback);
diff --git a/jside3/mvc/definitions.js b/jside3/mvc/definitions.js
@@ -9,11 +9,24 @@ function VDéfinitions(vInstanceBlocParente) {
this.vTitresTabs = this.find('.définitions.vTitresTabs');
this.vBoutonNouvelleDéfinition = this.find('.définitions.vNouvelle-définition');
+
+ this.vBoutonNouvelleDéfinition.draggable({
+ connectToSortable: '#mydiv',
+ cancel: '',
+ revert: 'invalid',
+ helper: function() {
+ return new VPort('body');
+ }
+ }).css('z-index', '1000');
+ this.vContenus = this.find('.définitions.vContenus');
this.vContenusTabs = this.find('.définitions.vContenusTabs');
this.vTitreAucuneDéfinition = this.find('.définition.vTitre.vAucune-définition');
this.vCorpsAucuneDéfinition = this.find('.définition.vCorps.vAucune-définition');
+ this.vPortsEntrée = this.find('.définitions.vPorts-entrée');
+ this.vPortsSortie = this.find('.définitions.vPorts-sortie');
+
this.aucuneDéfinition = true;
var that = this;
@@ -39,9 +52,17 @@ function VDéfinitions(vInstanceBlocParente) {
titreTab.addClass("active");
contenuTab.show();
};
+
+ this.setVPortsEntrée = function(vPortsEntrée) {
+ this.vPortsEntrée.replaceWith(vPortsEntrée);
+ };
+
+ this.setVPortsSortie = function(vPortsSortie) {
+ this.vPortsSortie.replaceWith(vPortsSortie);
+ };
this.ajusterBarreTitres = function() {
- that.vContenusTabs.css('top', that.vTitresTabs.outerHeight());
+ that.vContenus.css('top', that.vTitresTabs.outerHeight());
}
this.ajusterBarreTitres();
@@ -63,4 +84,6 @@ function CDéfinitions(mInstanceBloc, vInstanceBlocParente) {
that.modèle.bloc.monde.log.envoiMessage("Ajout de définition", définition);
new CDéfinition(définition, that.vue);
});
+
+ new CPorts(this.modèle, this.vue);
}
diff --git a/jside3/mvc/instance-bloc.js b/jside3/mvc/instance-bloc.js
@@ -17,19 +17,23 @@ function VInstanceBloc(vDéfinitionParente) {
.jqote({})
.appendTo(vDéfinitionParente)));
+ var that = this;
+ this.click(function() {
+ that.appendTo(vDéfinitionParente);
+ });
+
this.vBarreTitre = this.find('.instance-bloc.vBarre-titre');
this.vTitre = this.find('.instance-bloc.vTitre');
this.vVueTitre = this.find('.instance-bloc.vVue-titre');
this.vÉditionTitre = this.find('.instance-bloc.vÉdition-titre');
this.vChampTitre = this.find('.instance-bloc.vChamp-titre');
this.vBoutonValiderTitre = this.find('.instance-bloc.vBoutonValiderTitre');
- this.vDéfinitions_ = this.find('.instance-bloc.vDéfinitions'); // quick hack because otherwise tabs titles disapear (???)
+ this.vDéfinitionsFille = null;
this.vDéfinitions = this.find('.instance-bloc.vDéfinitions');
- var that = this;
this.setVDéfinitions = function(vDéfinitions) {
- this.vDéfinitions_.append(vDéfinitions); // quick hack because otherwise tabs titles disapear (???)
- this.vDéfinitions = vDéfinitions;
+ this.vDéfinitions.append(vDéfinitions);
+ this.vDéfinitionsFille = vDéfinitions;
}
this.titre = function(val) {
@@ -54,6 +58,7 @@ function VInstanceBloc(vDéfinitionParente) {
}
this.ajusterBarreTitre = function() {
+ debug = that.vDéfinitions;
that.vDéfinitions.css('top', that.vBarreTitre.outerHeight());
}
@@ -61,7 +66,8 @@ function VInstanceBloc(vDéfinitionParente) {
this.resizable({
resize: function() {
that.ajusterBarreTitre();
- that.vDéfinitions.ajusterBarreTitres();
+ if (that.vDéfinitionsFille)
+ that.vDéfinitionsFille.ajusterBarreTitres();
}
});
this.vÉditionTitre.hide();
diff --git a/jside3/mvc/port.js b/jside3/mvc/port.js
@@ -2,7 +2,7 @@ function MPort(sens, blocParent) {
$.extend(this, {
uid: singleton.uid(),
// Propriétés
- sens: sens, /* entrée / sortie */
+ entrée: true, /* entrée / sortie */
nom: '',
description: '',
// ?
@@ -13,3 +13,17 @@ function MPort(sens, blocParent) {
connexions: []
});
}
+
+function VPort(vPortsParente) {
+ $.extend(this, (
+ $('#vue-port')
+ .jqote({})
+ .toDom()));
+
+ this.appendTo(vPortsParente);
+}
+
+function CPort(mPort, vPortsParente) {
+ this.modèle = mPort;
+ this.vue = new VPort(vPortsParente);
+}
diff --git a/jside3/mvc/ports.js b/jside3/mvc/ports.js
@@ -0,0 +1,39 @@
+/* Pas de modèle pour ports: c'est juste une partie de définitions */
+
+function VPorts(vDéfinitionsParente) {
+ this.vPortsEntrée = $('#vue-ports-entrée')
+ .jqote({})
+ .toDom();
+ this.vPortsSortie = $('#vue-ports-sortie')
+ .jqote({})
+ .toDom();
+
+ $.extend(this, this.vPortsEntrée.add(this.vPortsSortie));
+
+ this.vPortsSortie.sortable({
+ revert:true,
+ placeholder: 'port-placeholder'
+ });
+
+ vDéfinitionsParente.setVPortsEntrée(this.vPortsEntrée);
+ vDéfinitionsParente.setVPortsSortie(this.vPortsSortie);
+}
+
+function CPorts(mInstanceBloc, vDéfinitionsParente) {
+ this.modèle = mInstanceBloc;
+ this.vue = new VPorts(vDéfinitionsParente);
+
+ this.modèle.bloc.onAjoutPortEntrée(function(port) {
+ that.modèle.bloc.monde.log.envoiMessage("Ajout de port d'entrée", port);
+ });
+ this.modèle.bloc.onAjoutPortSortie(function(port) {
+ that.modèle.bloc.monde.log.envoiMessage("Ajout de port de sortie", port);
+ });
+
+ new CPort(null, this.vue.vPortsEntrée);
+ new CPort(null, this.vue.vPortsEntrée);
+ new CPort(null, this.vue.vPortsEntrée);
+
+ new CPort(null, this.vue.vPortsSortie);
+ new CPort(null, this.vue.vPortsSortie);
+}
diff --git a/jside3/style.css b/jside3/style.css
@@ -177,9 +177,9 @@ body {
float: right;
}
-.définitions.vContenusTabs {
+.définitions.vContenus {
position: absolute;
- top: 2.9em;
+ top: 1.5em;
left: 0;
right: 0;
bottom: 0;
@@ -187,6 +187,14 @@ body {
padding-bottom: .1em;
}
+.définitions.vContenusTabs {
+ position: absolute;
+ top: 0;
+ left: 20px;
+ right: 20px;
+ bottom: 0;
+}
+
/* Définition */
.définition.vTitre {
background-color: white;
@@ -196,7 +204,8 @@ body {
}
.définition.vTitre.active {
- background-color: #eee;
+ background-color: #eef;
+ border: thin solid darkslategray;
border-bottom: thin solid white;
}
@@ -209,6 +218,40 @@ body {
padding-top: 1em;
}
+/* Ports */
+.ports.vPorts {
+ position: absolute;
+ top: 0;
+ width: 20px;
+ bottom: 0;
+ text-align: center;
+}
+
+.ports.vPorts.vEntrée {
+ left: 0;
+}
+
+.ports.vPorts.vSortie {
+ right: 0;
+}
+
+/* Port */
+.port.vMain {
+ display: inline-block;
+ background-color: lightblue;
+ border: thin solid blue;
+ width: 10px;
+ height: 10px;
+}
+
+.port-placeholder {
+ display: inline-block;
+ background-color: lightgray;
+ border: thin solid gray;
+ width: 10px;
+ height: 10px;
+}
+
/* Zone */
.vZone {
position: absolute;
