display entites lable on détails zoom

src/api/gql/concernement.fragment.gql

@@ -51,6 +51,7 @@ fragment ConcernementFields on Concernement {
       actuelfuture
       entite {
         id
+        title
         agissante
         proximite {
           id

src/components/ConcernementMapItem.vue

@@ -716,11 +716,22 @@ export default {
       // then scale again to new size
       this.paper_main_object.scale(this.details_zoom_scale);
       // resize entites (dim them while we zoomin)
-      this.paper_main_object.children['entites'].children.forEach((entite) => {
-        // revert to the original size (by reverting the previous scale)
-        entite.scale(1 / prev_entite_s);
-        // then scale again to new size
-        entite.scale(1 / this.details_zoom_scale);
+      this.paper_main_object.children['entites'].children.forEach((child) => {
+        if(child.name === 'entite'){
+          // revert to the original size (by reverting the previous scale)
+          child.scale(1 / prev_entite_s);
+          // then scale again to new size
+          child.scale(1 / this.details_zoom_scale);
+        }else if(child.name === 'entites_labels'){
+          child.opacity = -2 + this.detailsZoomValue;
+          child.children.forEach((label) => {
+            // revert to the original size (by reverting the previous scale)
+            label.scale(1 / prev_entite_s);
+            // then scale again to new size
+            label.scale(1 / this.details_zoom_scale);
+            // label.children['label_txt'].fontSize = 4 / this.detailsZoomValue;
+          })
+        }
       });
 
       // allow to go through walls if zoomed in
@@ -912,6 +923,13 @@ export default {
         pivot: new paper.Point(this.pos),
         name: 'entites'
       });
+      let g_label = new paper.Group({
+        pivot: new paper.Point(this.pos),
+        name: 'entites_labels',
+        opacity: 0
+      });
+      g.addChild(g_label);
+      g_label.sendToBack();
       // 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];
@@ -937,13 +955,51 @@ export default {
 
         let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
         instance.name = 'entite';
-        instance.position = new paper.Point([this.pos.x + entite.display.pos.x * this.scale, this.pos.y + entite.display.pos.y * this.scale]);
+        let pos_point = new paper.Point([this.pos.x + entite.display.pos.x * this.scale, this.pos.y + entite.display.pos.y * this.scale]);
+        instance.position = pos_point;
         instance.scale(this.scale);
         instance.fillColor = '#000';
         instance.item_id = entite.entite ? entite.entite.id : null;
         instance.item_type = item_type;
         instance.is_symbol_instance = true;
-        g.addChild(instance)
+        g.addChild(instance);
+        // instance.bringToFront();
+
+        if (entite.entite && entite.entite.title) {
+          let pad = 2;
+          let label_pos = new paper.Point({
+            x: pos_point.x + pad,
+            y: pos_point.y - pad*2
+          });
+          let label = new paper.Group({
+            pivot: pos_point,
+            name: 'label',
+          });
+
+
+          let title = entite.entite.title;
+          title = (title.length > 25) ? title.slice(0, 25 - 1) + '…' : title;
+          let label_txt = new paper.PointText({
+            pivot: pos_point,
+            point: label_pos,
+            content: title,
+            fillColor: 'black',
+            fontFamily: 'public_sans',
+            fontSize: 4,
+            justification: 'left',
+            name: 'label_txt'
+          })
+          let b = label_txt.bounds;
+          let label_bg = new paper.Path.Rectangle(b.x - pad, b.y - pad, b.width + pad*2, b.height + pad*2);
+          label_bg.fillColor = '#fff';
+          label_bg.opacity = 0.9;
+          label_bg.name = 'label_bg';
+
+          label.addChild(label_bg);
+          label_txt.insertAbove(label_bg)
+          // label.sendToBack();
+          g_label.addChild(label);
+        }
       }
       return g;
     },
@@ -2017,6 +2073,10 @@ export default {
             } else {
               document.body.style.cursor = "auto";
             }
+
+            if (result && (result.item.name === 'label_txt' || result.item.name === 'label_bg')) {
+              result.item.parent.bringToFront();
+            }
           }
         }
       }.bind(this);

src/components/contents/TerrainDeVie.vue

@@ -265,7 +265,7 @@ export default {
           ></vue-slider>
         </section>
         <section class="details" v-if="details_slider_ops && map_mode === 'terraindevie'">
-          <label>Details</label>
+          <label>Détails</label>
           <!-- <h3>{{ details_value }}</h3> -->
           <vue-slider
             ref="details_slider"