improved doleance transtions #2233

src/assets/main.scss

@@ -653,15 +653,23 @@ body{
 
     nav.doleance-switch{
       div{
+        $height:60vh;
         position: fixed;
-        top: calc(100vh * 0.49);
+        top: calc((100vh - $height) * 0.51);
         cursor: pointer;
-        
+        width:150px;
+        height: $height;
+        background-image: url(../assets/cercle_politique.png);
+        background-size: cover;
+        &:hover{
+          background-image: url(../assets/cercle_politique-hover.png);
+        }
         &.prev{
-          left: 1rem;
+          left: 0rem;
+          background-position: right;
         }
         &.next{
-          right:calc($cartouch_width + 2rem);
+          right:calc($cartouch_width + 0.5rem);
         }
       }
     }

src/components/ConcernementMapItem.vue

@@ -52,7 +52,9 @@ export default {
       constraint: null,
       //
       paper_main_object: {},
-      paper_groups: {}
+      paper_groups: {},
+      //
+      doleance_transition: false
     }
   },
   props: ['mapitem'],
@@ -209,6 +211,11 @@ export default {
           console.log(`concernementMapItem watch concernement o.active_revision:${o.active_revision}, n.active_revision:${n.active_revision}`);
           this.resetPaperActiveRevision();
         }
+        // // check for doleance change
+        // if (this.is_open && o && o.opened_doleance && n.opened_doleance && this.map_mode === "doleancer") {
+        //   // be aware that here o & n opened_doleance are already the same :( !?
+        //   console.log(`concernementMapItem watch concernement o.opened_doleance:${o.opened_doleance.id}, n.opened_doleance:${n.opened_doleance.id}`);
+        // }
       },
       deep: true
     }
@@ -1117,7 +1124,8 @@ export default {
       let g = new paper.Group({
         pivot: new paper.Point({x:0,y:0}),
         name: `doleance_${doleance.id}`,
-        doleance_id: doleance.id
+        doleance_id: doleance.id,
+        visible: false
       });
       // let doleance = this.concernement.doleances[0];
       let all_fields = [
@@ -1194,6 +1202,12 @@ export default {
       let o_d = Math.cos(22.5*(Math.PI/180)) * r/2; // x @ 22.5° for demi rayon
       let p_d = Math.sin(22.5*(Math.PI/180)) * r/2; // y @ 22.5° for demi rayon
 
+      let step_Style = {
+          strokeColor: '#fff',
+          strokeWidth: 2,
+          fillColor: "rgba(255, 255, 255, 0.3)"
+      }
+
       // let fontsize = 4;
       
       //
@@ -1203,15 +1217,13 @@ export default {
       //
       // camenbert
       if (doleance.lenquete) {
-        let cam = new paper.Path({
-          strokeColor: '#fff',
-          strokeWidth: 2,
-          fillColor: "rgba(255, 255, 255, 0.4)",
-          item_type: 'doleance_step',
-          item_id: `lenquete`,
-          did: doleance.id, 
-          field: 'lenquete',
-          field_index: null
+        let cam = new paper.Path({...step_Style, ...{
+            item_type: 'doleance_step',
+            item_id: `lenquete`,
+            did: doleance.id, 
+            field: 'lenquete',
+            field_index: null
+          }
         });
         cam.add({x: this.pos.x , y: this.pos.y + dr});
         cam.lineTo({x: this.pos.x, y: this.pos.y + r});
@@ -1239,16 +1251,14 @@ export default {
       //
       // camenbert
       if(doleance.probleme_initial_resolu === 0 || doleance.probleme_initial_resolu === 1){
-        let rescam = new paper.Path({
-          strokeColor: '#fff',
-          strokeWidth: 2,
-          fillColor: "rgba(255, 255, 255, 0.4)",
-          closed: true,
-          item_type: 'doleance_step',
-          item_id: `probleme_initial_resolu`,
-          did: doleance.id,
-          field: 'probleme_initial_resolu',
-          field_index: null
+        let rescam = new paper.Path({...step_Style, ...{
+            closed: true,
+            item_type: 'doleance_step',
+            item_id: `probleme_initial_resolu`,
+            did: doleance.id,
+            field: 'probleme_initial_resolu',
+            field_index: null
+          }
         });
         rescam.add({x: this.pos.x + n, y: this.pos.y + n});
         rescam.lineTo({x: this.pos.x + m , y: this.pos.y + m});
@@ -1303,15 +1313,13 @@ export default {
               y4t= this.pos.y + Math.cos((mf.decalage- a*(i+0.5))*(Math.PI/180)) * dr;
           let x5=  this.pos.x + Math.sin((mf.decalage- a*(i+0.5))*(Math.PI/180)) * r*0.75,
               y5=  this.pos.y + Math.cos((mf.decalage- a*(i+0.5))*(Math.PI/180)) * r*0.75;
-          let p = new paper.Path({
-            strokeColor: '#fff',
-            strokeWidth: 2,
-            fillColor: "rgba(255, 255, 255, 0.4)",
-            item_type: 'doleance_step',
-            item_id: `${mf.field_name}-${i}`,
-            did: doleance.id,
-            field: mf.field_name,
-            field_index: i
+          let p = new paper.Path({...step_Style, ...{
+              item_type: 'doleance_step',
+              item_id: `${mf.field_name}-${i}`,
+              did: doleance.id,
+              field: mf.field_name,
+              field_index: i
+            }
           });
           p.add([x1,y1]);
           p.lineTo([x2,y2]);
@@ -1335,17 +1343,17 @@ export default {
 
 
       // POINTS CARDINAUX
-      
+      let cardinal_Style = {
+          strokeColor: '#fff',
+          strokeWidth: 2,
+          fillColor: "rgba(255, 255, 255, 0.9)"
+      }
       // leprobleme
       if (doleance.leprobleme) {
         g.addChild(new paper.Path.Circle({
           center: [this.pos.x, this.pos.y + r],
           radius: 3 * this.scale,
-          style: {
-            strokeColor: '#fff',
-            strokeWidth: 2,
-            fillColor: "rgba(255, 255, 255, 0.9)",
-          },
+          style: cardinal_Style,
           item_type: 'doleance_step',
           item_id: `leprobleme`,
           did: doleance.id,
@@ -1359,11 +1367,7 @@ export default {
         g.addChild(new paper.Path.Circle({
           center: [this.pos.x - r, this.pos.y],
           radius: 3 * this.scale,
-          style: {
-            strokeColor: '#fff',
-            strokeWidth: 2,
-            fillColor: "rgba(255, 255, 255, 0.9)",
-          },
+          style: cardinal_Style,
           item_type: 'doleance_step',
           item_id: `adresse_de_la_doleance`,
           did: doleance.id,
@@ -1377,11 +1381,7 @@ export default {
         g.addChild(new paper.Path.Circle({
           center: [this.pos.x, this.pos.y - r],
           radius: 3 * this.scale,
-          style: {
-            strokeColor: '#fff',
-            strokeWidth: 2,
-            fillColor: "rgba(255, 255, 255, 0.9)",
-          },
+          style: cardinal_Style,
           item_type: 'doleance_step',
           item_id: `decision`,
           did: doleance.id,
@@ -1394,11 +1394,7 @@ export default {
         g.addChild(new paper.Path.Circle({
           center: [this.pos.x + r, this.pos.y],
           radius: 3 * this.scale,
-          style: {
-            strokeColor: '#fff',
-            strokeWidth: 2,
-            fillColor: "rgba(255, 255, 255, 0.9)",
-          },
+          style: cardinal_Style,
           item_type: 'doleance_step',
           item_id: `adresse_de_la_decision`,
           did: doleance.id,
@@ -1576,12 +1572,27 @@ export default {
           } else {
             // this.paper_main_object.children.doleance_icon.visible = false;
             // display the right (opened) doleance
+            let from = null
+            let to = this.concernement.opened_doleance.id;
+            
             this.concernement.doleances.forEach((d) => {
+              // this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id;
+              if (this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible) {
+                from = d.id
+              }
+            })
+            // console.log(`opened_doleance from:${from}, to:${to}`);
+            if (from && from !== to) {
+              this.initDoleanceTransition(from, to);
+            } else if(!this.doleance_transition) {
+              this.concernement.doleances.forEach((d) => {
                 this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id;
             })
+            }
           }
         } else {
           // this.paper_main_object.children.doleance_icon.visible = false;
+          
         }
       }
       
@@ -1602,6 +1613,39 @@ export default {
       }
       
 
+    },
+    initDoleanceTransition(from, to){
+      if (!this.doleance_transition) {
+        this.doleance_transition = true 
+        let u = 0;
+        // console.log(`initDoleanceTransition from:${from}, to:${to}`);
+        let from_pg = this.paper_main_object.children.doleances.children[`doleance_${from}`]
+        from_pg.visible = true;
+        from_pg.opacity = 1;
+        let to_pg = this.paper_main_object.children.doleances.children[`doleance_${to}`]
+        to_pg.visible = true;
+        to_pg.opacity = 0;
+  
+        let doDoleanceTransition = function(){
+          // console.log(`doDoleanceTransition u:${u} from:${from_pg}, to:${to_pg}`);
+          u++
+          if (u <= 20) {
+            if (u<=10) {
+              from_pg.opacity = 1-u/10
+            }else{
+              to_pg.opacity = (u-10)/10
+            }
+            window.requestAnimationFrame(doDoleanceTransition);
+          }else{
+            from_pg.visible = false;
+            from_pg.opacity = 1;
+            to_pg.opacity = 1;
+            this.doleance_transition = false
+          }
+        }.bind(this)
+  
+        doDoleanceTransition()
+      }
     },
     onIsHover(){
       // handle layer z-index
@@ -2147,6 +2191,10 @@ export default {
         : this.pos.x > pseudo_center_x // else
           ? 1   // to the right 
           : -1; // to the left
+      
+      if (this.map_mode === 'doleancer') {
+        dir = 1;
+      }
       // max and min item position
       let minp = 0;
       let maxp = dir < 0 

src/components/MapConcernements.vue

@@ -556,7 +556,7 @@ export default {
       let style = {strokeColor: '#fff', strokeWidth: 0.25}
       let felchesstyle = {strokeColor: '#fff', strokeWidth: 0.5}
       let legende_style = {strokeColor: '#000', strokeWidth: 0.25}
-      let fontsize = 4;
+      let fontsize = 3;
       let fontFamily = "public_sans";
 
       let children = [

src/components/contents/Doleancer.vue

@@ -80,9 +80,10 @@ export default {
     
     <template v-slot:main>
       <section
-        class="content-doleances">
-          
-          <main v-if="opened_concernement.opened_doleance.id === doleance.id">
+      class="content-doleances">
+      
+      <template v-if="opened_concernement.opened_doleance.id === doleance.id">
+            <h3 class="doleance-title">{{ doleance.title }}</h3>
             <section
               v-if="opened_concernement.opened_doleance.field === 'leprobleme' ||  !opened_concernement.opened_doleance.field">
               <span class="date">{{ doleance.date_leprobleme.start }}</span>
@@ -272,7 +273,7 @@ export default {
                 name="non_adresse_doleance"
                 v-html="doleance.non_adresse_doleance" />
             </section>
-          </main>
+          </template>
       </section>
     </template>
 
@@ -295,25 +296,25 @@ export default {
       v-if="doleance_index > 0"
       @click="prevDoleance"
       class="prev">
-       <svg class="prev-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
+       <!-- <svg class="prev-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
           <mask id="arrowMaskprev">
             <rect x="0" y="0" width="24" height="24" fill="white"/>
             <path :d="arrowleft_path" fill="black"/>
           </mask>
           <circle cx="12" cy="12" r="12" mask="url(#arrowMaskprev)" fill="white" />
-        </svg>  
-      </div>
+        </svg>   -->
+    </div>
     <div
       v-if="doleance_index < concernement.doleances.length-1"
       @click="nextDoleance"
       class="next">
-      <svg class="next-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
+        <!-- <svg class="next-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
           <mask id="arrowMasknext">
             <rect x="0" y="0" width="24" height="24" fill="white"/>
             <path :d="arrowright_path" fill="black"/>
           </mask>
           <circle cx="12" cy="12" r="12" mask="url(#arrowMasknext)" fill="white" />
-        </svg>  
+        </svg>   -->
     </div>
   </nav>
   

src/components/contents/TerrainDeVie.vue

@@ -161,7 +161,7 @@ export default {
         <!-- TODO update entite with revisions -->
         <span v-if="entite && concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span>
         <span v-if="entite && concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span>
-        <h3 v-if="entite">{{ entite.title }}</h3>
+        <h3 v-if="entite" class="entite-title">{{ entite.title }}</h3>
       </div>
     </template>
     

src/views/Concernement.vue

@@ -4,12 +4,12 @@ import { mapActions, mapState } from 'pinia'
 import { ConcernementsStore } from '@stores/concernements'
 import { CommonStore } from '@/stores/common'
 
-import { print } from 'graphql/language/printer'
-import gql from 'graphql-tag'
-import GQL from '@api/graphql-axios'
-import EntiteFields from '@api/gql/entite.fragment.gql'
+// import { print } from 'graphql/language/printer'
+// import gql from 'graphql-tag'
+// import GQL from '@api/graphql-axios'
+// import EntiteFields from '@api/gql/entite.fragment.gql'
 
-import SvgIcon from '@jamescoyle/vue-icon';
+// import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiArrowUp } from '@mdi/js';
 
 import TerrainDeVie from '@components/contents/TerrainDeVie.vue';