started to draw doleance background boussole

src/components/ConcernementMapItem.vue

@@ -386,11 +386,6 @@ export default {
         }
       }
     },
-    // onBeforeEngineUpdate (event) {
-    //   if (this.opened) {
-    //     // Matter.Body.setPosition(this.body, this.pos);
-    //   }
-    // },
     openClose(open) {
       // console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
       if (this.tween) {
@@ -537,7 +532,7 @@ export default {
 
       // contours
       if (!this.opened 
-        || (this.opened && this.map_mode !== "puissancedagir")) {
+        || (this.opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
         this.drawContour();
       } 
 
@@ -560,7 +555,7 @@ export default {
         }
       }
 
-      if (this.map_mode !== 'puissancedagir') {
+      if (this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer') {
         this.drawEntites()
       }
       
@@ -763,7 +758,92 @@ export default {
       this.ctx.stroke();
     },
     drawDoleancerBG(){
+      var r = this.ray * this.scale; // ray
+      var dr = r/2;            // demi ray
+      var d = r*2;              // diameter
+      var pcr = 2*this.scale;   // petits cercle rayon
 
+      // cercle exterieur
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = `#FFF`;
+      this.ctx.arc(this.pos.x, this.pos.y, r, 0, 2 * Math.PI, false);
+      this.ctx.stroke();
+      
+      // cercle interieur
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = `#FFF`;
+      this.ctx.arc(this.pos.x, this.pos.y, dr, 0, 2 * Math.PI, false);
+      this.ctx.stroke();
+      
+      // petit cercles
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = `#FFF`;
+      this.ctx.arc(this.pos.x, this.pos.y - r, pcr, 0, 2 * Math.PI, false);
+      this.ctx.stroke();
+
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = `#FFF`;
+      this.ctx.arc(this.pos.x, this.pos.y + r, pcr, 0, 2 * Math.PI, false);
+      this.ctx.stroke();
+
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = `#FFF`;
+      this.ctx.arc(this.pos.x + r, this.pos.y, pcr, 0, 2 * Math.PI, false);
+      this.ctx.stroke();
+
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = `#FFF`;
+      this.ctx.arc(this.pos.x - r, this.pos.y, pcr, 0, 2 * Math.PI, false);
+      this.ctx.stroke();
+
+      // axes
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = `#FFF`;
+      // vertical
+      this.ctx.moveTo(this.pos.x, this.pos.y - r);
+      this.ctx.lineTo(this.pos.x , this.pos.y - dr);
+      this.ctx.moveTo(this.pos.x, this.pos.y + r);
+      this.ctx.lineTo(this.pos.x , this.pos.y + dr);
+      // this.ctx.moveTo(this.pos.x, this.pos.y - r);
+      // this.ctx.lineTo(this.pos.x , this.pos.y + r);
+      
+      // horizontal
+      this.ctx.moveTo(this.pos.x - r, this.pos.y);
+      this.ctx.lineTo(this.pos.x - dr, this.pos.y);
+      this.ctx.moveTo(this.pos.x + r, this.pos.y);
+      this.ctx.lineTo(this.pos.x + dr, this.pos.y);
+      // this.ctx.moveTo(this.pos.x - r, this.pos.y);
+      // this.ctx.lineTo(this.pos.x + r, this.pos.y);
+
+      // diagonale
+      // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
+      // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
+      // radians = degrees * (pi/180)
+      // degrees = radians * (180/pi)
+      let m,n;
+      m = Math.sin(45*(Math.PI/180)) * r;
+      n = Math.sin(45*(Math.PI/180)) * r/2;
+      // console.log('m', m);
+      this.ctx.moveTo(this.pos.x + m, this.pos.y + m);
+      this.ctx.lineTo(this.pos.x + n, this.pos.y + n);
+      //
+      this.ctx.moveTo(this.pos.x - m, this.pos.y + m);
+      this.ctx.lineTo(this.pos.x - n, this.pos.y + n);
+      //
+      this.ctx.moveTo(this.pos.x + m, this.pos.y - m);
+      this.ctx.lineTo(this.pos.x + n, this.pos.y - n);
+      //
+      this.ctx.moveTo(this.pos.x - m, this.pos.y - m);
+      this.ctx.lineTo(this.pos.x - n, this.pos.y - n);
+      
+      this.ctx.stroke();
     },
     drawDoleanceSteps(){