highlighting opened entite on canvas

src/components/ConcernementMapItem.vue

@@ -34,7 +34,7 @@ export default {
     return {
       id: null,
       entities: null,
-      opened_entite_id: null,
+      // opened_entite_id: null,
       canvas: null,
       ctx: null,
       pos : {
@@ -53,7 +53,8 @@ export default {
   },
   props: ['concernement', 'opened'],
   computed: {
-    ...mapState(ConcernementsStore,['concernementsByID'])
+    ...mapState(ConcernementsStore,['concernementsByID']),
+    ...mapState(ConcernementsStore,['opened_entite_id'])
   },
   created () {
     // console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
@@ -61,13 +62,13 @@ export default {
     this.entites = this.concernement.entites
     this.entites_byid = this.concernement.entites_byid
 
-    console.log(`ConcernementsMapItem ${this.concernement.id} $route`, this.id, this.$route);
-    if (this.$route.name === 'concernement'
-      && parseInt(this.$route.params.id) === this.id
-      && typeof this.$route.params.eid !== "undefined") {
-        console.log("we have an entity");
-        this.opened_entite_id = parseInt(this.$route.params.eid);
-    }
+    // console.log(`ConcernementsMapItem ${this.concernement.id} $route`, this.id, this.$route);
+    // if (this.$route.name === 'concernement'
+    //   && parseInt(this.$route.params.id) === this.id
+    //   && typeof this.$route.params.eid !== "undefined") {
+    //     // console.log("we have an entity");
+    //     this.opened_entite_id = parseInt(this.$route.params.eid);
+    // }
     
     this.parsePoints()
     this.getSalientPoints()

src/stores/concernements.js

@@ -20,6 +20,7 @@ export const ConcernementsStore = defineStore({
     concernementsByID: {},
     allEntitesById: {},
     opened: false,
+    opened_entite_id: null,
     ct_concernement: {},
     concernements_loaded: false
   }),
@@ -101,6 +102,9 @@ export const ConcernementsStore = defineStore({
     resetConcernementOpened () {
       this.opened = null;
       this.openCloseConcernements();
+    },
+    setOpenedEntityId(id){
+      this.opened_entite_id = id;
     }
   }
 })

src/views/Concernement.vue

@@ -17,15 +17,17 @@ export default {
   },
   computed: {
     ...mapState(ConcernementsStore,['opened']),
+    // ...mapState(ConcernementsStore,['opened_entity_id']),
     ...mapState(ConcernementsStore,['concernements_loaded']),
     ...mapState(ConcernementsStore,['ct_concernement'])
   },
   created () {
     console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened:${this.opened}`);
     
-    // when we arrived directly to the entite, load the entite
+    // when we arrived directly to the url, load the entite
+    // this.eid provided by route params
     if (!this.entity && this.eid) {
-      this.loadEntite();
+      this.openEntity();
     }
   },
   watch: {
@@ -43,9 +45,10 @@ export default {
     eid: {
       handler (n, o){
         if(n){
-          this.loadEntite()
+          this.openEntity()
         }else{
           this.entite = false;
+          this.setOpenedEntityId(null);
         }
       },
       deep: true
@@ -53,6 +56,11 @@ export default {
   },
   methods: {
     ...mapActions(ConcernementsStore,['openCloseConcernements']),
+    ...mapActions(ConcernementsStore,['setOpenedEntityId']),
+    openEntity(){
+      this.setOpenedEntityId(parseInt(this.eid))
+      this.loadEntite()
+    },
     loadEntite(){
       const ast = gql`{
         entite (id: ${this.eid}) {