history is working #2203

src/App.vue

@@ -60,6 +60,7 @@ export default {
           :key="index"
           :concernement="concernement"
           :is_opened="concernement.opened"
+          :active_revision="concernement.active_revision"
         />
       </template>
     </MapConcernements>

src/api/gql/concernement.fragment.gql

@@ -27,9 +27,6 @@ fragment ConcernementFields on Concernement {
     name
   }
   entites {
-    menacemaintien
-    prise
-    actuelfuture
     entite {
       title
       id
@@ -44,6 +41,18 @@ fragment ConcernementFields on Concernement {
       }
     }
   }
+  revisions {
+    revision_id
+    changed
+    entites {
+      menacemaintien
+      prise
+      actuelfuture
+      entite {
+        id
+      }
+    }
+  }
   besoins {
     author
     description

src/components/ConcernementMapItem.vue

@@ -62,7 +62,7 @@ export default {
       paper_groups: {}
     }
   },
-  props: ['concernement', 'is_opened'],
+  props: ['concernement', 'is_opened', 'active_revision'],
   computed: {
     ...mapState(ConcernementsStore,['map_mode',
                                     'concernementsByID',
@@ -76,8 +76,9 @@ export default {
   created () {
     // console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
     this.id = this.concernement.id
-    this.entites = this.concernement.entites
-    this.entites_byid = this.concernement.entites_byid
+    // this.entites = this.concernement.entites
+    this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
+    // this.entites_byid = this.concernement.entites_byid
     
     // disable concernement if less than 3 entite
     if(this.entites.length < 3){
@@ -89,9 +90,9 @@ export default {
       
       // define the ray regarding the width and height of screen
       this.ray = this.map_item_ray;
-      console.log(`this.ray: ${this.ray}`);
+      // console.log(`this.ray: ${this.ray}`);
       // 
-      this.parsePoints()
+      this.parseEntityPointsValues()
       // this.getSalientPoints()
       this.getJarvisEnvelopeConvexe()
 
@@ -166,6 +167,13 @@ export default {
         }
       },
       deep: true
+    },
+    active_revision: {
+      handler (n, o) {
+        console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
+        this.resetPaperActiveRevision();
+      },
+      deep: true
     }
   },
   methods: {
@@ -178,48 +186,50 @@ export default {
     // getResponsiveRay(){
     //   return Math.min(this.canvas.width, this.canvas.height) * 0.08;
     // },
-    parsePoints (){
+    parseEntityPointsValues (){
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
-      for (let i = 0; i < this.entites.length; i++) {
-        let entite = this.entites[i]
-        // console.log('entite', entite);
-        
-        this.entites[i].display = {
-          alpha: null,
-          ray: null
-        }
-        // RAYON
-        // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
-        // slope = (output_end - output_start) / (input_end - input_start)
-        // output = output_start + slope * (input - input_start)
-        // from range 0 -> 100 to range 0 -> this.ray
-        let init_max = 100
-        let slope = this.ray / init_max
-        this.entites[i].display.ray = slope * (init_max - entite.prise);
-        // if (this.concernement.id === 28) {
-        //   console.log(`entity prise: ${entite.prise} | ray: ${this.entites[i].display.ray}`);
-        // }
-        
+      for (let r = 0; r < this.concernement.revisions.length; r++) { // loop through all revisions
+        for (let i = 0; i < this.concernement.revisions[r].entites.length; i++) { // loop through all entite for each revision
+          let entite = this.concernement.revisions[r].entites[i]
+          // console.log('entite', entite);
+          
+          entite.display = {
+            alpha: null,
+            ray: null
+          }
+          // RAYON
+          // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
+          // slope = (output_end - output_start) / (input_end - input_start)
+          // output = output_start + slope * (input - input_start)
+          // from range 0 -> 100 to range 0 -> this.ray
+          let init_max = 100
+          let slope = this.ray / init_max
+          entite.display.ray = slope * (init_max - entite.prise);
+          // if (this.concernement.id === 28) {
+          //   console.log(`entity prise: ${entite.prise} | ray: ${entite.display.ray}`);
+          // }
+          
 
-        // ANGLE
-        // -90 <= mm <= 90
-        if (entite.actuelfuture) {
-          // future en haut : 180 <= a <= 360
-          // from -90 -> 90 to range 180 -> 360
-          this.entites[i].display.alpha = entite.menacemaintien + 270
-        } else {
-          // actuel: en bas : O <= a <= 180
-          // from -90 -> 90 to range 180 -> 0
-          this.entites[i].display.alpha = -1 * entite.menacemaintien + 90
-        }
+          // ANGLE
+          // -90 <= mm <= 90
+          if (entite.actuelfuture) {
+            // future en haut : 180 <= a <= 360
+            // from -90 -> 90 to range 180 -> 360
+            entite.display.alpha = entite.menacemaintien + 270
+          } else {
+            // actuel: en bas : O <= a <= 180
+            // from -90 -> 90 to range 180 -> 0
+            entite.display.alpha = -1 * entite.menacemaintien + 90
+          }
 
-        // POSITION X Y (par rapport au centre du concernement)
-        this.entites[i].display.pos = {
-          x: this.entites[i].display.ray * Math.cos(this.entites[i].display.alpha * (Math.PI/180)),
-          y: this.entites[i].display.ray * Math.sin(this.entites[i].display.alpha * (Math.PI/180))
-        }
-        if (entite.entite) {
-          this.entites_byid[entite.entite.id].display = this.entites[i].display;
+          // POSITION X Y (par rapport au centre du concernement)
+          entite.display.pos = {
+            x: entite.display.ray * Math.cos(entite.display.alpha * (Math.PI/180)),
+            y: entite.display.ray * Math.sin(entite.display.alpha * (Math.PI/180))
+          }
+          // if (entite.entite) {
+          //   this.entites_byid[entite.entite.id].display = entite.display;
+          // }
         }
       }
     },
@@ -258,12 +268,14 @@ export default {
       // console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
     },
     getJarvisEnvelopeConvexe(){
+      this.salientPoints = [];
+      let entites = this.concernement.revisions_byid[this.concernement.active_revision].entites;
       // console.log(`getJarvisEnvelopeConvexe ${this.id}`, this.entites.length);
       // https://www.geeksforgeeks.org/convex-hull-using-jarvis-algorithm-or-wrapping/
       // find the most left point
       let l, min_x = null;
-      for (let i = 0; i < this.entites.length; i++) {
-        let entite = this.entites[i];
+      for (let i = 0; i < entites.length; i++) {
+        let entite = entites[i];
         let x = entite.display.ray * Math.cos(entite.display.alpha * (Math.PI/180));
         if(!min_x || min_x > x){
           l = i;
@@ -277,7 +289,7 @@ export default {
       do {
         // console.log(`do while ${this.id}`, p);
         // Add current point to result
-        let entite = this.entites[p];
+        let entite = entites[p];
         let farest = {
           alpha: entite.display.alpha,
           ray: entite.display.ray,
@@ -295,14 +307,14 @@ export default {
         // track of last visited most clockwise
         // point in q. If any point 'i' is more 
         // clockwise than q, then update q.
-        q = (p + 1) % this.entites.length;
-        for (let i = 0; i < this.entites.length; i++) {
-          let p_x = (this.entites[p].display.ray) * Math.cos(this.entites[p].display.alpha * (Math.PI/180));
-          let p_y = (this.entites[p].display.ray) * Math.sin(this.entites[p].display.alpha * (Math.PI/180));
-          let i_x = (this.entites[i].display.ray) * Math.cos(this.entites[i].display.alpha * (Math.PI/180));
-          let i_y = (this.entites[i].display.ray) * Math.sin(this.entites[i].display.alpha * (Math.PI/180));
-          let q_x = (this.entites[q].display.ray) * Math.cos(this.entites[q].display.alpha * (Math.PI/180));
-          let q_y = (this.entites[q].display.ray) * Math.sin(this.entites[q].display.alpha * (Math.PI/180));
+        q = (p + 1) % entites.length;
+        for (let i = 0; i < entites.length; i++) {
+          let p_x = (entites[p].display.ray) * Math.cos(entites[p].display.alpha * (Math.PI/180));
+          let p_y = (entites[p].display.ray) * Math.sin(entites[p].display.alpha * (Math.PI/180));
+          let i_x = (entites[i].display.ray) * Math.cos(entites[i].display.alpha * (Math.PI/180));
+          let i_y = (entites[i].display.ray) * Math.sin(entites[i].display.alpha * (Math.PI/180));
+          let q_x = (entites[q].display.ray) * Math.cos(entites[q].display.alpha * (Math.PI/180));
+          let q_y = (entites[q].display.ray) * Math.sin(entites[q].display.alpha * (Math.PI/180));
           
           let val = (i_y - p_y) * (q_x - i_x) - (i_x - p_x) * (q_y - i_y);
           
@@ -483,6 +495,19 @@ export default {
           break;
       }
     },
+    resetPaperActiveRevision(){
+      this.getJarvisEnvelopeConvexe();
+      // remove contours if already exists
+      if (this.paper_main_object.children.contours) {
+        this.paper_main_object.children.contours.remove();
+      }
+      this.paper_main_object.addChild(this.setPaperContour());
+      // remove entites if already exists
+      if (this.paper_main_object.children.entites) {
+        this.paper_main_object.children.entites.remove();
+      }
+      this.paper_main_object.addChild(this.setPaperEntites());
+    },
     clearPaperContents(){
       let clearable_children = ['boussole_bg', 'entites', 
                                 'puissanceagir_bg','puissanceagir_besoins',
@@ -590,16 +615,18 @@ export default {
         pivot: new paper.Point(this.pos),
         name: 'entites'
       });
-      for (let i = 0; i < this.entites.length; i++) {
+      // for (let i = 0; i < this.entites.length; i++) {
+      for (let i = 0; i < this.concernement.revisions_byid[this.concernement.active_revision].entites.length; i++) {
+        let entite = this.concernement.revisions_byid[this.concernement.active_revision].entites[i];
         // use paper symbol
-        let symbol_name = this.entites[i].entite ? 'entite' : 'entite_hidden';
+        let symbol_name = entite.entite ? 'entite' : 'entite_hidden';
         let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
         instance.name = 'entite';
-        instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x * this.scale, this.pos.y + this.entites[i].display.pos.y * this.scale]);
+        instance.position = new paper.Point([this.pos.x + entite.display.pos.x * this.scale, this.pos.y + entite.display.pos.y * this.scale]);
         instance.scale(this.scale);
         instance.fillColor = '#000';
-        instance.item_id = this.entites[i].entite ? this.entites[i].entite.id : null;
-        instance.item_type = this.entites[i].entite ? 'entite' : 'hidden_entite';
+        instance.item_id = entite.entite ? entite.entite.id : null;
+        instance.item_type = entite.entite ? 'entite' : 'hidden_entite';
         instance.is_symbol_instance = true;
         g.addChild(instance)
       }
@@ -610,6 +637,7 @@ export default {
         pivot: new paper.Point(this.pos),
         name: 'agissantes'
       });
+      
       for (let i = 0; i < this.entites.length; i++) {
         if (this.entites[i].entite && this.entites[i].entite.agissante) {
           let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']);
@@ -1244,6 +1272,7 @@ export default {
         this.setHoverElmt(null);
       }, 100);
     },
+    // OPEN / CLOSE (with tween)
     openClose(open) {
       // console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
       if (this.tween) {
@@ -1320,6 +1349,8 @@ export default {
           Matter.Composite.remove(this.matterEngine.world, this.constraint);
         }
 
+        this.concernement.active_revision = this.concernement.revision_id;
+
         this.handlePaperVisibilityOnBeforeClose();
 
         this.tween = new Tween.Tween({s: this.scale, o: 1})

src/components/contents/TerrainDeVie.vue

@@ -43,35 +43,43 @@ export default {
     console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
 
     // revisions
-    if (!this.opened_concernement.revisons) {
-      this.loadConcernementsRevisions(this.id).then(()=>{
-        console.log('Terrain de vie revisions loaded', this.opened_concernement.revisions);
-        if (this.opened_concernement.revisions.length > 1) {
-          let data=[];
-          this.opened_concernement.revisions.forEach(rev => {
-            let d = new Date(rev.changed);
-            data.push({
-              'id': rev.revision_id,
-              'changed': d.toLocaleDateString("fr-FR")
-            })
-            this.history_value = Math.max(this.history_value, parseInt(rev.revision_id));
-          });
-          this.history_slider_ops = {
-            dotSize:10,
-            data: data,
-            'data-value': 'id',
-            'data-label': 'changed',
-            adsorb: true,
-            'hide-label': true
-          }
-        } else {
-          this.history_slider_ops = null;
-        }
-      });
+        
+    let data=[];
+    this.opened_concernement.revisions.forEach(rev => {
+      if (rev.entites.length > 3) {
+        let d = new Date(rev.changed);
+        data.push({
+          'id': rev.revision_id,
+          'changed': d.toLocaleDateString("fr-FR")
+        })
+        this.history_value = Math.max(this.history_value, parseInt(rev.revision_id));
+      }
+    });
+
+    if (data.length > 1) {
+      this.history_slider_ops = {
+        dotSize:10,
+        data: data,
+        'data-value': 'id',
+        'data-label': 'changed',
+        adsorb: true,
+        'hide-label': true
+      } 
+    } else {
+      this.history_slider_ops = null;
+    }
+  },
+  watch: {
+    history_value: {
+      handler (n, o) {
+        console.log(`TerrainDeVie watch history_value o:${o}, n:${n}`);
+        this.setActiveRevision(this.opened_concernement.id, n);
+      },
+      deep: true
     }
   },
   methods: {
-    ...mapActions(ConcernementsStore, ['loadConcernementsRevisions'])
+    ...mapActions(ConcernementsStore, ['setActiveRevision']) // 'loadConcernementsRevisions'
   },
   components: {
     CartoucheLayout,

src/stores/concernements.js

@@ -81,6 +81,13 @@ export const ConcernementsStore = defineStore({
                 }
               });
               
+              // revisions
+              concernement.active_revision = concernement.revision_id;
+              concernement.revisions_byid = {};
+              concernement.revisions.forEach(rev => {
+                concernement.revisions_byid[rev.revision_id] = rev;
+              });
+
               // puissance d'agir
               concernement.has_puissancedagir = concernement.besoins.length ? true : false;
               concernement.besoins.forEach(besoin => {
@@ -294,28 +301,9 @@ export const ConcernementsStore = defineStore({
       console.log('concernement store setRecitPlayer', player);
       this.recit_plyr_player = player;
     },
-    loadConcernementsRevisions (cid) {
-      console.log('concernements store loadConcernementsRevisions');
-      return new Promise((resolve, reject) => {
-        const ast = gql`{
-          concernementrevisions(id: ${cid}) {
-            ...ConcernementFields
-          }
-        }
-        ${ConcernementFields}
-        `
-        // console.log('ast', ast);
-        GQL.post('', { query: print(ast) })
-          .then(({ data : { data  : { concernementrevisions } } }) => {
-            console.log('concernementsrevisions all loaded', concernementrevisions);
-            this.concernementsByID[cid].revisions = concernementrevisions;
-            resolve()
-          })
-          .catch(error => {
-            console.warn('Issue with loadConcernements revisions', error)
-            reject(error)
-          })
-      })
+    setActiveRevision (cid, rid) {
+      this.concernementsByID[cid].active_revision = rid;
     }
+
   }
 })