commit 015e6ebc29f403639db2829166b16f1e23ea0b1c
parent 1324a85dc06bd6c2bec42ee7837e0c2e7f698344
Author: gduperon <gduperon@5d9ba3ac-444b-4713-9fb3-0b58e79229a2>
Date: Tue, 11 May 2010 23:33:19 +0000
vue bloc, et plein de bonnes choses
git-svn-id: https://projetud.info-ufr.univ-montp2.fr/svn/flin607-2009-gduperon@40 5d9ba3ac-444b-4713-9fb3-0b58e79229a2
Diffstat:
7 files changed, 505 insertions(+), 71 deletions(-)
diff --git a/jside3/extensions-jQuery.js b/jside3/extensions-jQuery.js
@@ -22,6 +22,10 @@ String.prototype.appendTo = function() {
// Extensions de jQuery
jQuery.fn.extend({
+ addTo: function(collection) {
+ $.merge(collection, this);
+ return collection;
+ },
remap: function(fn) {
var a = $.makeArray(arguments);
a.shift();
diff --git a/jside3/index.html b/jside3/index.html
@@ -11,6 +11,7 @@
<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
<script type="text/javascript" src="jquery/jquery.jqote2.js"></script>
<script type="text/javascript" src="jquery/jquery.my.enumerable.js"></script>
+ <script type="text/javascript" src="jquery/jquery.tools.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" type="text/css" href="jquery/themes/custom-theme/jquery.ui.all.css" />
@@ -28,13 +29,65 @@
<!-- jQuery - mes extensions -->
<script type="text/javascript" src="extensions-jQuery.js"></script>
+
+ <!-- Modèle -->
+ <script type="text/javascript" src="modele.js"></script>
+
+ <!-- Vue -->
+ <script type="text/javascript" src="vue.js"></script>
<!-- Test -->
<script type="text/javascript" src="test.js"></script>
- <link rel="stylesheet" type="text/css" href="test.css" />
+
+ <!-- Apparence -->
+ <link rel="stylesheet" type="text/css" href="style.css" />
</head>
- <body style="position: absolute;">
- <!--<div id="drop" style="position: absolute; top:100px; left: 100px; height: 1em; width:1em; background-color: lightgray; text-align: center;">×</div>-->
- <div id="drag" style="position: absolute; top:300px; left: 700px; height: 20px; width:20px; background-color: lightblue;"></div>
+ <body style="position: absolute;" id="editeur">
+ <script type="text/x-jqote-template" id="vue-monde">
+ <![CDATA[
+ <div class="monde">
+ </div>
+ ]]>
+ </script>
+ <script type="text/x-jqote-template" id="vue-barre-outils">
+ <![CDATA[
+ <div class="barre-outils fenetre">
+ <h2 class="barre-outils titre">Barre d'outils</h2>
+ <input type="button" value="Nouveau bloc" class="barre-outils nouveau-bloc"/>
+ <input type="button" value="Coucou"/>
+ </div>
+ ]]>
+ </script>
+ <script type="text/x-jqote-template" id="vue-log">
+ <![CDATA[
+ <div class="log fenetre">
+ <h2 class="log titre">Log</h2>
+ <div class="log messages">
+ </div>
+ </div>
+ ]]>
+ </script>
+ <script type="text/x-jqote-template" id="vue-bloc">
+ <![CDATA[
+ <div class="bloc fenetre">
+ <h2 class="bloc titre"><%= this.bloc.nom %></h2>
+ <div class="bloc tabs titres">
+ <h3 class="définition titre">Définition A</h3>
+ <h3 class="définition titre">Définition B</h3>
+ <h3 class="définition titre">Définition C</h3>
+ <input type="button" class="nouvelle-définition" value="+" />
+ </div>
+ <div class="bloc définitions">
+ </div>
+ </div>
+ ]]>
+ </script>
+ <script type="text/x-jqote-template" id="vue-définition">
+ <![CDATA[
+ <div class="définition">
+
+ </div>
+ ]]>
+ </script>
</body>
</html>
diff --git a/jside3/modele.js b/jside3/modele.js
@@ -1,75 +1,234 @@
-function monde(nom) {
+Array.prototype.remove = function(i) {
+ if (typeof i != "number")
+ i = this.indexOf(i);
+ this.splice(i,1);
+ return i;
+}
+
+Array.prototype.insert = function(v, i) {
+ if (arguments.length == 1)
+ i = this.length;
+ this.splice(i,0,v);
+ return i;
+}
+
+singleton = (function() {
+ var s = { uid: 0 };
+ return {
+ uid: function () {
+ return s.uid++;
+ }
+ };
+})();
+
+function faireCallbacks(liste) {
+ var a = $.makeArray(arguments);
+ a.shift();
+ for (var i = 0; i < liste.length; i++) {
+ liste[i].apply(a[0], a);
+ }
+}
+
+function Monde(nom) {
$.extend(this, {
+ uid: singleton.uid(),
// Propriétés
nom: nom,
// vue
- vues: [],
+ vues: $(),
// Parents
// Enfants
- blocs: []
+ log: new Log(this),
+ barreOutils: new BarreOutils(this),
+ blocs: [],
+ scratch: null,
+ // Ajout
+ ajouterVue: function(v) {
+ v.modèle = this;
+ v.addTo(this.vues);
+ },
+ ajouterBloc: function(b) {
+ b.monde = this;
+ this.blocs.push(b);
+ },
+ // Suppression
+ supprimerBloc: function(b) {
+ this.blocs.remove(b);
+ }
+ });
+ /*this.scratch = new Bloc("Scratch");
+ this.ajouterBloc(this.scratch);
+ var iscratch = new InstanceBloc(this.scratch, {vues: this.vues}); // Attention, devrait utiliser une définition !!!
+ this.scratch.ajouterInstance(iscratch);*/
+ this.scratch = {vues: this.vues};
+}
+
+function BarreOutils(monde) {
+ $.extend(this, {
+ monde: monde,
+ vues: [],
+ ajouterVue: function(v) {
+ v.modèle = this;
+ this.vues.push(v);
+ },
});
}
-function bloc(nom, monde) {
+function Log(monde) {
$.extend(this, {
+ monde: monde,
+ vues: [],
+ messages: [],
+ cbMessage: [],
+ // Ajout
+ ajouterVue: function(v) {
+ v.modèle = this;
+ this.vues.push(v);
+ },
+ // ?
+ envoiMessage: function(msg) {
+ this.messages.push(msg);
+ faireCallbacks(this.cbMessage, msg);
+ },
+ // Évènements
+ onMessage: function(callback) {
+ this.cbMessage.push(callback);
+ }
+ });
+}
+
+function Bloc(nom) {
+ $.extend(this, {
+ uid: singleton.uid(),
// Propriétés
- nom: nom
- description: '',
+ nom: nom,
+ description: '', // Est une définition ?
// vue
vues: [],
- instances: [],
// Parents
- monde: mondeParent,
+ monde: null,
+ // Utilisation
+ instances: [],
// Enfants
- definitions: [],
+ définitions: [],
portsEntree: [],
- portsSortie: []
+ portsSortie: [],
+ // Ajout
+ ajouterVue: function(v) {
+ v.modèle = this;
+ v.addTo(this.vues);
+ },
+ ajouterInstance: function(ib) {
+ //ib.bloc = this;
+ this.instances.push(ib);
+ },
+ ajouterDéfinition: function(d) {
+ d.bloc = this;
+ this.définitions.push(d);
+ },
+ nouvelleDéfinition: function(nom) { définitions.push(new Définition(nom, this)); },
+ nouveauPortEntree: function() { portsEntree.push(new Port('entree', this)); },
+ nouveauPortSortie: function() { portsEntree.push(new Port('entree', this)); },
+ //nouvelleInstance: function(destination) { instances.push(new InstanceBloc(this, destination)); },
+ // Suppression
+ supprimerDéfinition: function(def) { définitions.remove(def); },
+ supprimerPortEntree: function(port) { portsEntree.remove(port); },
+ supprimerPortSortie: function(port) { portsSortie.remove(port); },
+ supprimerInstance: function(inst) { instances.remove(inst); },
+ // Modification
+ déplacerDéfinition: function(def, position) {
+ var pos = définitions.remove(def);
+ if (pos < position) position--;
+ définitions.insert(def,position);
+ },
+ déplacerPortEntree: function(port, position) {
+ var pos = portsEntree.remove(port);
+ if (pos < position) position--;
+ portsEntree.insert(port,position);
+ },
+ déplacerPortSortie: function(port, position) {
+ var pos = portsSortie.remove(port);
+ if (pos < position) position--;
+ portsSortie.insert(port,position);
+ },
+ cbAjoutInstanceBloc: [],
+ onAjoutInstanceBloc: function(callback) {
+ this.cbAjoutInstanceBloc.push(callback);
+ }
});
}
-function instanceBloc(bloc, instanceBlocParente) {
+function InstanceBloc(bloc, définitionParente) {
$.extend(this, {
+ uid: singleton.uid(),
// Propriétés
bloc: bloc,
// vue
vues: [],
// Parents
- instanceBloc: instanceBlocParente
+ définition: définitionParente,
// Enfants
- instancesPorts: []
+ //instancesPorts: [],
+ // Ajout
+ ajouterVue: function(v) {
+ v.modèle = this;
+ v.addTo(this.vues);
+ },
});
}
-function definition(nom, blocParent) {
+function Définition(nom, blocParent) {
$.extend(this, {
+ uid: singleton.uid(),
// Propriétés
nom: nom,
- description: '',
+ type: null,
+ //description: '',
// vue
vues: [],
// Parents
bloc: blocParent,
// Enfants
- liens: []
+ connexions: [],
+ instancesBlocs: [],
+ // Ajout
+ ajouterInstanceBloc: function(ib) {
+ ib.définition = this;
+ this.instancesBlocs.push(ib);
+ },
+ ajouterConnexion: function(c) {
+ c.définition = this;
+ this.connexion.push(c);
+ },
});
}
-function lien(de, vers, definitionParente) {
+function Connexions(de, vers, définitionParente) {
$.extend(this, {
+ uid: singleton.uid(),
// Propriétés
de: de,
vers: vers,
// vue
vues: [],
// Parents
- definition: definitionParente
+ définition: définitionParente,
// Enfants
+ // Modification
+ modifierDe: function(nouveauDe) {
+ this.de = nouveauDe;
+ },
+ modifierVers: function(nouveauVers) {
+ this.vers = nouveauVers;
+ }
});
}
-function port(blocParent) {
+function Port(sens, blocParent) {
$.extend(this, {
+ uid: singleton.uid(),
// Propriétés
+ sens: sens, /* entrée / sortie */
nom: '',
description: '',
// vue
@@ -78,19 +237,20 @@ function port(blocParent) {
// Parents
bloc: blocParent,
// Enfants
- liens: []
+ connexions: []
});
}
-function instancePort(port, instanceBlocParente) {
+/*function InstancePort(port, instanceBlocParente) {
$.extend(this, {
+ uid: singleton.uid(),
// Propriétés
port: port,
// vue
vues: [],
// Parents
- instanceBloc: instabceBlocParente,
+ instanceBloc: instanceBlocParente,
// Enfants
liens: []
});
-}
-\ No newline at end of file
+}*/
+\ No newline at end of file
diff --git a/jside3/style.css b/jside3/style.css
@@ -0,0 +1,112 @@
+/* Pour les redimensionnements trop petits */
+.ui-resizable {
+ overflow: hidden;
+}
+
+body {
+ position:absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+
+/* Monde */
+.monde {
+ position:absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+
+/* Barre d'outils */
+.barre-outils.fenetre {
+ position: absolute;
+ top: 100px;
+ left: 100px;
+
+ border: thin solid blue;
+ background-color: lightblue;
+}
+
+/* Log */
+.log.fenetre {
+ position: absolute;
+ bottom: 100px;
+ right: 100px;
+ width: 15em;
+ min-width: 4em;
+ min-height: 3em;
+ height: 8em;
+
+ border: thin solid blue;
+ background-color: lightblue;
+}
+
+.log.messages {
+ position: absolute;
+ top: 1.4em;
+ bottom: 0;
+ width: 100%;
+ overflow: auto;
+}
+
+/* Bloc */
+.bloc.fenetre {
+ position: absolute;
+ top: 250px;
+ left: 300px;
+ width: 25em;
+ min-width: 4em;
+ min-height: 3em;
+ height: 12em;
+
+ border: medium solid gray;
+ background-color: white;
+}
+
+.bloc.titre {
+ background-color: lightgray;
+ border: medium solid white;
+}
+
+.bloc.titre {
+ background-color: lightgray;
+ border: medium solid white;
+ border-bottom: none;
+}
+
+/* Tabs */
+.bloc.tabs.titres {
+ position: absolute;
+ top: 1.4em;
+ left: 0;
+ right: 0;
+ background: lightgray;
+ padding-bottom: .1em;
+
+ border: medium solid white;
+ border-style: none solid none solid;
+}
+
+.définition.titre {
+ background-color: white;
+ border: thin solid gray;
+ margin: 0.1em 0.1em 0 0;
+ float: left;
+}
+
+.nouvelle-définition {
+ float: right;
+}
+
+/* Fenêtres */
+.titre {
+ background-color: #eef;
+ border-bottom: thin solid blue;
+ padding: .1em;
+ margin: 0;
+ font-size: 100%;
+ text-align: center;
+}
diff --git a/jside3/test.css b/jside3/test.css
@@ -1,11 +0,0 @@
-.fermer-actif {
- background-color: pink!important;
-}
-
-.ui-selected {
- background: #F39814!important;
-}
-
-.a-detruire {
- background-color: pink!important;
-}
diff --git a/jside3/test.js b/jside3/test.js
@@ -1,32 +1,10 @@
-$(function(){
- window.setTimeout(test, 100);
-});
-
-function test() {
- $('#drag').draggable();
- //$('#drag').selectable();
-
- var b = $('body');
- for (var i = 0; i < 25; i++) {
- for (var j = 0; j < 15; j++) {
- b.prepend('<div class="drop" style="position: absolute; '
- + 'top:' + (50*j) + 'px;'
- + 'left: ' + (50*i) + 'px;'
- + 'height: 1em; width:1em; background-color: lightgray; text-align: center;">×</div>');
- }
+function testlog(m, count) {
+ m.log.envoiMessage('Coucou !');
+ var fdemo = function() {
+ m.log.envoiMessage('Pioute !');
+ if (--count > 0)
+ window.setTimeout(fdemo, 100);
}
-
- $('.drop').droppable({
- tolerance: 'touch',
- hoverClass: 'fermer-actif',
- over: function(event, ui) {
- ui.draggable.addClass('a-detruire');
- },
- out: function(event, ui) {
- ui.draggable.removeClass('a-detruire');
- },
- drop: function(event, ui) {
- ui.draggable.remove();
- }
- });
-}
-\ No newline at end of file
+ window.setTimeout(fdemo, 1000);
+}
+
diff --git a/jside3/vue.js b/jside3/vue.js
@@ -0,0 +1,139 @@
+function VMonde(m) {
+ this.modèle = m;
+ var elem = $.extend(this, (
+ $('#vue-monde')
+ .jqote(m)
+ .appendTo('#editeur')));
+
+ this.modèle.ajouterVue(this);
+
+ new VBarreOutils(m.barreOutils);
+ new VLog(m.log);
+}
+
+function VBarreOutils(b) {
+ this.modèle = b;
+ var elem = $.extend(this,(
+ $('#vue-barre-outils')
+ .jqote(b)
+ .appendTo(b.monde.vues)));
+
+ (elem)
+ .draggable()
+ .resizable()
+ .find('.nouveau-bloc')
+ .click(function() {
+ elem.modèle.monde.log.envoiMessage("Nouveau bloc.");
+
+ var b = new Bloc("Bloc 2");
+ elem.modèle.monde.ajouterBloc(b);
+
+ var ib = new InstanceBloc(b, elem.modèle.monde.scratch);
+ b.ajouterInstance(ib);
+ new VInstanceBloc(ib);
+ })
+ .end();
+
+ this.modèle.ajouterVue(this);
+}
+
+function VLog(l) {
+ this.modèle = l;
+ var elem = $.extend(this,(
+ $('#vue-log')
+ .jqote(this.modèle)
+ .appendTo(this.modèle.monde.vues)));
+
+ (elem)
+ .draggable()
+ .resizable()
+ .find('.log-pause')
+ .click(function() {
+ if (elem.modèle.pause) {
+ elem.modèle.pause = false;
+ elem.find('.messages')
+ .stop()
+ .scrollTo(elem.find('.messages :last'), 200);
+ elem.find('.log-pause').val("pause");
+ } else {
+ elem.modèle.pause = true;
+ elem.find('.messages').stop();
+ elem.find('.log-pause').val("play");
+ }
+ })
+ .end();
+
+ elem.modèle.onMessage(function(msg) {
+ var m = elem.find('.messages');
+ m.append($('<div/>').text(msg));
+ if (!elem.modèle.pause) {
+ elem.find('.messages')
+ .stop()
+ .scrollTo(elem.find('.messages :last-child'), 100);
+ }
+ });
+
+ elem.find('.messages')
+ .css('top', elem.find('.titre').outerHeight());
+
+ elem.modèle.ajouterVue(this);
+}
+
+function VInstanceBloc(ib) {
+ debug2 = ib;
+ this.modèle = ib;
+ var elem = $.extend(this,(
+ $('#vue-bloc')
+ .jqote(ib)
+ .appendTo(ib.définition.vues)));
+
+ elem.draggable()
+ .resizable()
+ .find('.bloc.tabs.titres')
+ .css('top', elem.find('.bloc.titre').outerHeight())
+ .end()
+ .find('.nouvelle-définition')
+ .click(function() {
+ elem.modèle.bloc.monde.log.envoiMessage("Nouvelle définition.");
+ var d = new Définition();
+ elem.modèle.bloc.ajouterDéfinition(d);
+ })
+ .end();
+
+ elem.modèle.bloc.onAjoutInstanceBloc(function(instanceBloc) {
+
+ });
+
+ elem.modèle.ajouterVue(this);
+}
+
+function VDéfinition(d, vueInstanceBloc) {
+ this.modèle = d;
+ this.vueInstanceBloc = vueInstanceBloc;
+ var elem = $.extend(this,(
+ $('#vue-définition')
+ .jqote(d)
+ .appendTo(vueInstanceBloc)));
+
+ //d.bloc.instances[0].vues.titres
+
+ this.modèle.ajouterVue(this);
+}
+
+function test() {
+ var m = new Monde("Le Monde");
+
+ new VMonde(m);
+
+ var b = new Bloc("Bloc 1");
+ m.ajouterBloc(b);
+
+ var ib = new InstanceBloc(b, m.scratch);
+ b.ajouterInstance(ib);
+
+ new VInstanceBloc(ib);
+
+ testlog(m, 6);
+}
+
+$(function(){ test(); });
