improved entity positioning accuracy

src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css

@@ -355,6 +355,7 @@ div.field--name-field-menace-maintien label{
   /* width:100%; */
   max-height: calc(100vh - 150px);
   position: relative;
+  padding: 8%;
 }
 #boussole-layout .boussole-wrapper .boussole .entity{
   position: absolute;

src/web/themes/custom/ouatminimal_theme/js/boussole.js

@@ -247,8 +247,8 @@
       this.values.mm.value = this.values.mm.$dom.value = a;
       
       // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
-      // from range 0 -> rayon_de_la_boussole to range 0 -> 100
-      let r_max = this.sceneSize.w/2; 
+      // from range 0 -> rayon_de_la_boussole moins 8% de padding |to| range 0 -> 100
+      let r_max = this.sceneSize.w/2 * 0.92; 
       let r_slope = (100 - 0) / (r_max - 0);
       this.values.p.value = this.values.p.$dom.value = 100 - parseFloat(0 + r_slope * (r - 0)).toFixed(2);
       // this.values.p.$dom.value = this.values.p.value;
@@ -290,8 +290,8 @@
       // from range 0 -> 100 to range 0 -> diagonale de la scene
       // let diagonale = Math.sqrt(Math.pow(this.sceneSize.w, 2) + Math.pow(this.sceneSize.h, 2))/2;
       // let r_max = diagonale;
-      // actualy we don't use diagonale, we stay on the circle
-      let r_max = this.sceneSize.w/2; 
+      // actualy we don't use diagonale, we stay on the circle less 8% padding to get 100 on the external circle
+      let r_max = this.sceneSize.w/2 * 0.92; 
       let r_slope = (r_max - 0) / (100 - 0)
       // we inverse p as the more p you have the closest you are from the center
       let r = parseInt(0 + r_slope * ((100 - this.values.p.value) - 0));