bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved doleance transtions #2233

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-11-17 16:24:34 +01:00
parent 3680dc6cf7
commit 5331252f61
10 changed files with 841 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/components/ConcernementMapItem.vue
View File

@@ -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

2
src/components/MapConcernements.vue
View File

@@ -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 = [

19
src/components/contents/Doleancer.vue
View File

@@ -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>

2
src/components/contents/TerrainDeVie.vue
View File

@@ -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>