many display fixes

2023-06-09 12:34:56 +02:00
parent e242d04df8
commit f47b2fd7e3
10 changed files with 510 additions and 265 deletions
--- a/src/components/ConcernementMapItem.vue
+++ b/src/components/ConcernementMapItem.vue
@@ -32,6 +32,13 @@ import { mapState, mapActions } from 'pinia'
 import { ConcernementsStore } from '@/stores/concernements'
 import { CommonStore } from '@/stores/common'

+import iconAction from "@/assets/icons/action.svg"
+import iconDoleancer from "@/assets/icons/doleancer.svg"
+import iconProximite from "@/assets/icons/proximite.svg"
+import iconPuissanceagir from "@/assets/icons/puissancedagir.svg"
+import iconSuperposition from "@/assets/icons/superposition.svg"
+import iconTerraindevie from "@/assets/icons/terraindevie.svg"
+
 export default {
  inject: ['canvasMap', 'matterEngine'],
  data() {
@@ -44,7 +51,7 @@ export default {
        x: 0,
        y: 0
      },
-      ray: 60,
+      ray: 100,
      time: 0,
      salientPoints: [],
      scale: 1,
@@ -79,7 +86,7 @@ export default {
    //     // console.log("we have an entity");
    //     this.opened_entite_id = parseInt(this.$route.params.eid);
    // }
-    
+
    this.parsePoints()
    this.getSalientPoints()

@@ -493,8 +500,8 @@ export default {
      return new paper.Path({
        name: 'contours',
        segments: segments,
-        strokeColor: '#000',
-        strokeWidth: 1,
+        // strokeColor: '#000',
+        // strokeWidth: 1,
        fillColor: 'rgba(255,255,255,0.8)',
        pivot: new paper.Point(this.pos),
        cid: this.id
@@ -577,49 +584,9 @@ export default {
    setPaperPuissanceagirICON(){
      let children = [];

-      var r = 20 * this.scale; // ray
-      var dr = r/2;            // demi ray
-      var d = r*2;              // diameter
-
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: r
-      }));
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: dr
-      }));
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: 2*this.scale
-      }));
-
-      // axes
-      // vertical
-      children.push(new paper.Path.Line({
-        from: [this.pos.x, this.pos.y - r],
-        to: [this.pos.x , this.pos.y + r],
-      }))      
-      // horizontal
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - r, this.pos.y],
-        to: [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)
-      var m = Math.sin(45*(Math.PI/180)) * r;
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + m, this.pos.y + m],
-        to: [this.pos.x - m, this.pos.y - m],
-      }))
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - m, this.pos.y + m],
-        to: [this.pos.x + m, this.pos.y - m],
-      }))
+      let svgIcon = paper.project.importSVG(iconPuissanceagir);
+      children.push(svgIcon);
+      svgIcon.position = this.pos;
      
      return new paper.Group({
        children: children,
@@ -628,7 +595,8 @@ export default {
        locked: true,
        style: {
          strokeColor: '#000',
-          strokeWidth: 1
+          strokeWidth: 1,
+          fillColor: null
        }
      });
    },
@@ -1109,71 +1077,10 @@ export default {
    setPaperDoleanceICON(){
      let children = [];

-      var r = 20 * this.scale; // ray
-      var dr = r/2;            // demi ray
-      var d = r*2;              // diameter
+      let svgIcon = paper.project.importSVG(iconDoleancer);
+      children.push(svgIcon);
+      svgIcon.position = this.pos;

-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: r
-      }));
-      
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: dr
-      }));
-      
-
-      // axes
-      // vertical
-      children.push(new paper.Path.Line({
-        from: [this.pos.x, this.pos.y - r],
-        to: [this.pos.x , this.pos.y - dr],
-      }));  
-      children.push(new paper.Path.Line({
-        from: [this.pos.x, this.pos.y + r],
-        to: [this.pos.x , this.pos.y + dr],
-      }));
-
-      // horizontal
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - r, this.pos.y],
-        to: [this.pos.x - dr, this.pos.y],
-      }));
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + r, this.pos.y],
-        to: [this.pos.x + dr, 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);
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + m, this.pos.y + m],
-        to: [this.pos.x + n, this.pos.y + n],
-      }));
-      //
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - m, this.pos.y + m],
-        to: [this.pos.x - n, this.pos.y + n],
-      }));
-      //
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + m, this.pos.y - m],
-        to: [this.pos.x + n, this.pos.y - n],
-      }));
-      //
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - m, this.pos.y - m],
-        to: [this.pos.x - n, this.pos.y - n],
-      }));
-      
      return new paper.Group({
        children: children,
        pivot: new paper.Point(this.pos),
@@ -1181,9 +1088,12 @@ export default {
        locked: true,
        style: {
          strokeColor: '#000',
-          strokeWidth: 1
+          strokeWidth: 1,
+          fillColor: null
        }
      });
+
+
    },
    setPaperDoleanceSteps(){
      let g = new paper.Group({
@@ -1568,7 +1478,7 @@ export default {
        // opening tweening
        this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0})
          .to({
-            s: 6,
+            s: 3,
            x: (this.canvas.width - 450) / 2,
            y: this.canvas.height / 2,
            o: 0.8
@@ -1731,8 +1641,10 @@ export default {
        this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.8)";
        if (this.is_hover) {
          this.paper_objects.children['contours'].strokeColor = "#01ffe2";
+          this.paper_objects.children['contours'].strokeWidth = 2;
        }else{
-          this.paper_objects.children['contours'].strokeColor = "#000";
+          this.paper_objects.children['contours'].strokeColor = null;
+          this.paper_objects.children['contours'].strokeWidth = 0;
        }
      }

--- a/src/components/MapConcernements.vue
+++ b/src/components/MapConcernements.vue
@@ -169,12 +169,12 @@ export default {
      <li>
        <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span>  terrain de vie</a>
      </li>
-      <!-- <li>
+      <li>
        <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span>  proximité</a>
      </li>
      <li>
        <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span>  superposition</a>
-      </li> -->
+      </li>
      <li>
        <a href="#puissancedagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span>  puissance d'agir</a>
      </li>