refactoring: replaced global var opened by opened_concernement

src/components/ConcernementMapItem.vue

@@ -70,7 +70,7 @@ export default {
   computed: {
     ...mapState(ConcernementsStore,['map_mode']),
     ...mapState(ConcernementsStore,['concernementsByID']),
-    ...mapState(ConcernementsStore,['opened']),
+    ...mapState(ConcernementsStore,['opened_concernement']),
     ...mapState(ConcernementsStore,['opened_entite_id']),
     ...mapState(CommonStore,['hover_elmt'])
   },
@@ -136,7 +136,7 @@ export default {
     map_mode: {
       handler (n, o) {
         console.log('watch map_mode', o, n);
-        if (n === 'terraindevie' && !this.opened) {
+        if (n === 'terraindevie' && !this.opened_concernement) {
           this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie
         }
       },
@@ -1545,7 +1545,7 @@ export default {
     initPaperEvents(){
 
       this.paper_objects.onMouseEnter = function(event){
-        if (!this.opened && this.isFocused()) { // only if no concernement is opened and is this focused
+        if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused
           this.setHoverElmt({
             type: 'concernement',
             id: this.id
@@ -1555,7 +1555,7 @@ export default {
       }.bind(this);
       
       this.paper_objects.onMouseLeave = function(event){
-        if (!this.opened && this.isFocused()) { // only if no concernement is opened
+        if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened
           this.resetHoverElmt();
           document.body.style.cursor = "auto";
         }
@@ -1614,7 +1614,7 @@ export default {
       this.paper_objects.onClick = function(event){
         console.log('paper concernement onClick');
         if (!this.is_opened) {
-          if (!this.opened) {
+          if (!this.opened_concernement) {
             console.log(`Open me ${this.id}`);
             // open/close all concernements
             this.openCloseConcernements(this.id)
@@ -1651,7 +1651,7 @@ export default {
               this.$router.push({
                 name: 'concernement',
                 hash: `#${this.map_mode}`,
-                params: {id: this.opened.id, eid: result.item.item_id}
+                params: {id: this.opened_concernement.id, eid: result.item.item_id}
               });
             } else {
               // otherwise we close the entite and come back to the concernement
@@ -1760,8 +1760,8 @@ export default {
         this.tween.update();
       }
 
-      if (this.opened) {
+      if (this.opened_concernement) {
-        if (this.opened.id !== this.id) {
+        if (this.opened_concernement.id !== this.id) {
           this.pushAside()
         }
       } else {
@@ -1786,13 +1786,19 @@ export default {
       }
     },
     pushAside(){
+      
+      // INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249 
+      
       // apply a force in direction of one side or an other depending of the start position
       // the force is exponentialy proportional to the distance from the side
       let dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side
-      let dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side
+      // let minp = 0;
-      let ori_pos = {x:this.canvas.width/2, y:this.body.position.y};
+      // let maxp = this.canvas.width / 2;
+
+      // let dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side
       let x_force = Math.pow(dist/700,100) * dir;
       
+      let ori_pos = {x:this.canvas.width/2, y:this.body.position.y};
 
       Matter.Body.applyForce(
         this.body, 

src/components/MapConcernements.vue

@@ -48,7 +48,7 @@ export default {
     ...mapState(ConcernementsStore,['map_mode']),
     ...mapState(ConcernementsStore,['concernements']),
     ...mapState(ConcernementsStore,['concernementsByID']),
-    ...mapState(ConcernementsStore,['opened']),
+    // ...mapState(ConcernementsStore,['opened_concernement']),
     ...mapState(CommonStore,['hover_elmt'])
   },
   created() {

src/main.js

@@ -11,7 +11,6 @@ import './assets/main.scss'
 // var decomp = require('poly-decomp');
 // window.decomp = decomp;       
 
-
 const app = createApp(App)
 // https://vuejs.org/guide/components/provide-inject.html#provide
 app.config.unwrapInjectedRef = true;

src/stores/concernements.js

@@ -21,7 +21,7 @@ export const ConcernementsStore = defineStore({
     concernementsByID: {},
     allEntitesById: {},
     allBesoinsById: {},
-    opened: false,
+    opened_concernement: false,
     opened_entite_id: null,
     ct_concernement: {},
     ct_entite: {},
@@ -220,12 +220,12 @@ export const ConcernementsStore = defineStore({
         state = id === c.id;
         this.concernements[i].opened = this.concernementsByID[c.id].opened = state;
         if (state) {
-          this.opened = c;
+          this.opened_concernement = c;
         }
       });
     },
     resetConcernementOpened () {
-      this.opened = null;
+      this.opened_concernement = null;
       this.openCloseConcernements();
     },
     setOpenedEntityId(id){

src/views/Concernement.vue

@@ -22,7 +22,7 @@ export default {
   computed: {
     ...mapState(UserStore,['isloggedin']),
     ...mapState(ConcernementsStore,['map_mode']),
-    ...mapState(ConcernementsStore,['opened']),
+    ...mapState(ConcernementsStore,['opened_concernement']),
     // ...mapState(ConcernementsStore,['opened_entity_id']),
     ...mapState(ConcernementsStore,['concernements_loaded']),
     ...mapState(ConcernementsStore,['ct_concernement']),
@@ -35,7 +35,7 @@ export default {
     ...mapState(CommonStore,['hover_elmt'])
   },
   created () {
-    console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened:${this.opened}`);
+    console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
     
     // when we arrived directly to the url, load the entite
     // this.eid provided by route params
@@ -46,9 +46,9 @@ export default {
   watch: {
     concernements_loaded: {
       handler (n, o){
-        console.log(`watch concernements_loaded n: ${n}, opened:${this.opened}, id:${this.id}`);
+        console.log(`watch concernements_loaded n: ${n}, opened_concernement:${this.opened_concernement}, id:${this.id}`);
         // when we arrived directly to the url then all concernement are loaded: do open the concernement
-        if (!this.opened) {
+        if (!this.opened_concernement) {
           this.openCloseConcernements(this.id)
         }
    
@@ -107,7 +107,7 @@ export default {
 </script>
 
 <template>
-  <section v-if="opened" class="concernement">
+  <section v-if="opened_concernement" class="concernement">
     <header v-if="concernements_loaded">
       <label 
         v-if="ct_concernement && !entite && map_mode !== 'puissancedagir'&& map_mode !== 'doleancer'"
@@ -115,9 +115,9 @@ export default {
           {{ ct_concernement.title.description }}
         </label>
       <h3 v-if="entite">{{ entite.title }}</h3>
-      <span v-if="entite && opened.entites_byid[eid].menacemaintien < 0">menace</span>
+      <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0">menace</span>
-      <span v-if="entite && opened.entites_byid[eid].menacemaintien > 0">maintient</span>
+      <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0">maintient</span>
-      <h2>{{ opened.title }}</h2>
+      <h2>{{ opened_concernement.title }}</h2>
     </header>
     <!-- concernement -->
     <section
@@ -125,11 +125,11 @@ export default {
       class="content-concernement">
       <section class="description">
           <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
-          <div v-html="opened.description"/>
+          <div v-html="opened_concernement.description"/>
       </section>
       <section class="caillou">
           <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
-          <div v-html="opened.caillou "/>
+          <div v-html="opened_concernement.caillou "/>
       </section>
     </section>
     <!-- entite -->
@@ -151,7 +151,7 @@ export default {
       class="content-besoins">
         <ul class="besoins">
           <li
-            v-for="besoin in opened.besoins"
+            v-for="besoin in opened_concernement.besoins"
             :key="besoin.id"
             class="besoin"
             :id="besoin.id"
@@ -213,7 +213,7 @@ export default {
       v-if="map_mode === 'doleancer'"
       class="content-doleances">
         <section
-          v-for="doleance in opened.doleances"
+          v-for="doleance in opened_concernement.doleances"
           class="doleance">
             <header>
               <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>