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

generic paper item hover highlight behaviour, + some tweaks

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-06-07 22:30:39 +02:00
parent c0028a636b
commit caced38845
3 changed files with 130 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
src/components/ConcernementMapItem.vue
View File

@ -130,7 +130,7 @@ export default {
}, },
hover_elmt: { hover_elmt: {
handler (n, o) { handler (n, o) {
// console.log('watch hover_elmt', o, n); // console.log(`watch hover_elmt ${this.id}`, o, n);
if (n && n.type === 'concernement' && n.id === this.id) { if (n && n.type === 'concernement' && n.id === this.id) {
this.is_hover = true; this.is_hover = true;
} else { } else {
@ -138,20 +138,7 @@ export default {
} }
}, },
deep: true deep: true
}, }
// '$route':{
// handler (to, from) {
// console.log('watch $route', from, to);
// if (to.name === concernement
// && (this.map_mode === "terraindevie" || this.map_mode === "action")
// && to.param.id === this.id
// && to.param.eid) {
// this.opened_entite_id = to.param.eid;
// }
// },
// deep: true,
// immediate: true
// }
}, },
methods: { methods: {
...mapActions(CommonStore,['setHoverElmt']), ...mapActions(CommonStore,['setHoverElmt']),
@ -528,12 +515,6 @@ export default {
item_id: part.id, item_id: part.id,
item_type: 'entite' item_type: 'entite'
})) }))
// if (part.id === this.opened_entite_id) {
// this.ctx.fillStyle = "#01ffe2";
// } else {
// this.ctx.fillStyle = "#000";
// }
} }
} }
return g; return g;
@ -713,10 +694,10 @@ export default {
let part = this.body.parts[i]; let part = this.body.parts[i];
g.addChild(new paper.Path.Circle({ g.addChild(new paper.Path.Circle({
center: [part.position.x, part.position.y], center: [part.position.x, part.position.y],
radius: 0.5, //0.3 radius: 0.3, //0.3
fillColor: '#000', fillColor: '#000',
strokeColor: '#000', strokeColor: '#000',
strokeWidth: 2, strokeWidth: 3,
item_id: part.id, item_id: part.id,
item_type: 'entite' item_type: 'entite'
})) }))
@ -1323,9 +1304,6 @@ export default {
// //
// l'enquete // l'enquete
// //
let enquete = new paper.Group({
name: 'enquete'
});
// camenbert // camenbert
let cam = new paper.Path({ let cam = new paper.Path({
strokeColor: '#fff', strokeColor: '#fff',
@ -1339,57 +1317,49 @@ export default {
cam.arcTo({x: this.pos.x - p, y: this.pos.y + o}, {x: this.pos.x - m, y: this.pos.y + m}); cam.arcTo({x: this.pos.x - p, y: this.pos.y + o}, {x: this.pos.x - m, y: this.pos.y + m});
cam.lineTo({x: this.pos.x - n, y: this.pos.y + n}); cam.lineTo({x: this.pos.x - n, y: this.pos.y + n});
cam.arcTo({x: this.pos.x - p_d, y: this.pos.y + o_d}, {x: this.pos.x , y: this.pos.y + dr}); cam.arcTo({x: this.pos.x - p_d, y: this.pos.y + o_d}, {x: this.pos.x , y: this.pos.y + dr});
enquete.addChild(cam)
// texte // texte
// enquete.addChild(new paper.PointText({ // enquete.addChild(new paper.PointText({
// point: { // point: {
// x:this.pos.x + Math.sin(22.5*(Math.PI/180)) * r*0.75, // x:this.pos.x + Math.sin(22.5*(Math.PI/180)) * r*0.75,
// y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75 // y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
// }, // },
// content: doleance['lenquete'], // content: doleance['lenquete'],
// fontSize: fontsize, // fontSize: fontsize,
// fillColor: '#fff', // fillColor: '#fff',
// justification: 'center', // justification: 'center',
// locked: true // locked: true
// })); // }));
g.addChild(enquete); g.addChild(cam);
// //
// probleme_initial_resolu // probleme_initial_resolu
// //
let resolution = new paper.Group({
name: 'resolution'
});
// camenbert // camenbert
let rescam = new paper.Path({ let rescam = new paper.Path({
name: 'resolution',
item_type: 'doleance_step',
item_id: 'probleme_initial_resolu',
strokeColor: '#fff', strokeColor: '#fff',
strokeWidth: 2, strokeWidth: 2,
fillColor: "rgba(255, 255, 255, 0.4)", fillColor: "rgba(255, 255, 255, 0.4)",
closed: true,
item_type: 'doleance_step',
item_id: 'probleme_initial_resolu',
}); });
rescam.add({x: this.pos.x + n, y: this.pos.y + n}); rescam.add({x: this.pos.x + n, y: this.pos.y + n});
rescam.lineTo({x: this.pos.x + m , y: this.pos.y + m}); rescam.lineTo({x: this.pos.x + m , y: this.pos.y + m});
rescam.arcTo({x: this.pos.x + p, y: this.pos.y + o}, {x: this.pos.x, y: this.pos.y + r}); rescam.arcTo({x: this.pos.x + p, y: this.pos.y + o}, {x: this.pos.x, y: this.pos.y + r});
rescam.lineTo({x: this.pos.x, y: this.pos.y + dr}); rescam.lineTo({x: this.pos.x, y: this.pos.y + dr});
rescam.arcTo({x: this.pos.x + p_d, y: this.pos.y + o_d}, {x: this.pos.x + n, y: this.pos.y + n}); rescam.arcTo({x: this.pos.x + p_d, y: this.pos.y + o_d}, {x: this.pos.x + n, y: this.pos.y + n});
resolution.addChild(rescam)
// texte // texte
// resolution.addChild(new paper.PointText({ // resolution.addChild(new paper.PointText({
// point: { // point: {
// x:this.pos.x - Math.sin(22.5*(Math.PI/180)) * r*0.75, // x:this.pos.x - Math.sin(22.5*(Math.PI/180)) * r*0.75,
// y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75 // y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
// }, // },
// content: doleance['probleme_initial_resolu'] ? doleance['oui_nouvelle_situation'] : doleance['non_adresse_doleance'], // content: doleance['probleme_initial_resolu'] ? doleance['oui_nouvelle_situation'] : doleance['non_adresse_doleance'],
// fontSize: fontsize, // fontSize: fontsize,
// fillColor: '#fff', // fillColor: '#fff',
// justification: 'center' // justification: 'center'
// })); // }));
g.addChild(resolution); g.addChild(rescam)
// //
// MULTIPLE FIELDS // MULTIPLE FIELDS
@ -1403,10 +1373,12 @@ export default {
multiple_fields.forEach((mf, j) => { multiple_fields.forEach((mf, j) => {
for (let i = 0, l = doleance[mf.field_name].length, a = mf.arc/l; i < l; i++) { for (let i = 0, l = doleance[mf.field_name].length, a = mf.arc/l; i < l; i++) {
let gi = new paper.Group({ // let gi = new paper.Group({
item_type: mf.field_name, // item_type: 'doleance_step',
item_index: i // item_id: 'lenquete',
}); // item_field: mf.field_name,
// item_index: i
// });
//camenbert //camenbert
let x1= this.pos.x + Math.sin((mf.decalage- a*i)*(Math.PI/180)) * dr, let x1= this.pos.x + Math.sin((mf.decalage- a*i)*(Math.PI/180)) * dr,
y1= this.pos.y + Math.cos((mf.decalage- a*i)*(Math.PI/180)) * dr; y1= this.pos.y + Math.cos((mf.decalage- a*i)*(Math.PI/180)) * dr;
@ -1425,24 +1397,28 @@ export default {
let p = new paper.Path({ let p = new paper.Path({
strokeColor: '#fff', strokeColor: '#fff',
strokeWidth: 2, strokeWidth: 2,
fillColor: "rgba(255, 255, 255, 0.4)" fillColor: "rgba(255, 255, 255, 0.4)",
item_type: 'doleance_step',
item_id: `${mf.field_name}-${i}`,
item_field: mf.field_name
}); });
p.add([x1,y1]); p.add([x1,y1]);
p.lineTo([x2,y2]); p.lineTo([x2,y2]);
p.arcTo([x3t,y3t], [x3,y3]); p.arcTo([x3t,y3t], [x3,y3]);
p.lineTo([x4,y4]); p.lineTo([x4,y4]);
p.arcTo([x4t,y4t], [x1,y1]); p.arcTo([x4t,y4t], [x1,y1]);
gi.addChild(p); g.addChild(p);
// text // gi.addChild(p);
gi.addChild(new paper.PointText({ // // text
point: {x:x5,y:y5}, // gi.addChild(new paper.PointText({
content: `${j}-${i}`, // point: {x:x5,y:y5},
fontSize: fontsize, // content: `${j}-${i}`,
fillColor: '#fff', // fontSize: fontsize,
justification: 'center' // fillColor: '#fff',
})) // justification: 'center'
// }))
g.addChild(gi) // g.addChild(gi)
} }
}); });
@ -1474,44 +1450,41 @@ export default {
if (this.is_opened) { if (this.is_opened) {
// lets define some options regarding the map_mode // lets define some options regarding the map_mode
let paper_group_tohit, op; let paper_group_tohit;
switch (this.map_mode) { switch (this.map_mode) {
case "terraindevie": case "terraindevie":
paper_group_tohit = 'entites'; paper_group_tohit = 'entites';
op = {};
break; break;
case "action": case "action":
paper_group_tohit = 'agissantes'; paper_group_tohit = 'agissantes';
op = {};
break; break;
case "puissancedagir": case "puissancedagir":
paper_group_tohit = 'puissanceagir_besoins'; paper_group_tohit = 'puissanceagir_besoins';
op = {};
break; break;
case "doleancer": case "doleancer":
paper_group_tohit = 'doleance_steps'; paper_group_tohit = 'doleance_steps';
op = {
// class: paper.Path
fill: true
};
break; break;
} }
let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point, op); let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point);
// console.log('move result', result); // console.log('move result', result);
if (result && result.item.item_id) { if (result && result.item.item_id) {
// console.log('move has result', result); // console.log('move has result', result);
let hover_elmt = { let new_hover_elmt = {
paper_id: result.item.id,
type: result.item.item_type, type: result.item.item_type,
id: result.item.item_id id: result.item.item_id
}; };
switch (result.item.item_type) { switch (result.item.item_type) {
case "reponse": case "reponse":
hover_elmt.bid = result.item.item_bid; new_hover_elmt.bid = result.item.item_bid;
hover_elmt.cid = result.item.item_cid; new_hover_elmt.cid = result.item.item_cid;
break; break;
} }
this.setHoverElmt(hover_elmt); if (!this.hover_elmt || new_hover_elmt.paper_id !== this.hover_elmt.paper_id) {
// console.log(`before setHoverElmt ${this.id}`);
this.setHoverElmt(new_hover_elmt);
}
document.body.style.cursor = "pointer"; document.body.style.cursor = "pointer";
} else { } else {
// console.log('move no result'); // console.log('move no result');
@ -1540,7 +1513,7 @@ export default {
} else { } else {
// lets define some options regarding the map_mode // lets define some options regarding the map_mode
// debugger; // debugger;
let op; let op = {pg: null};
switch (this.map_mode) { switch (this.map_mode) {
case "terraindevie": case "terraindevie":
op = { op = {
@ -1553,25 +1526,26 @@ export default {
} }
break; break;
} }
if (op.pg) {
let result = this.paper_objects.children[op.pg].hitTest(event.point); let result = this.paper_objects.children[op.pg].hitTest(event.point);
// console.log('click result', result); // console.log('click result', result);
if (result) { if (result) {
// we have clicked on an entite // we have clicked on an entite
this.$router.push({ this.$router.push({
name: 'concernement', name: 'concernement',
hash: `#${this.map_mode}`, hash: `#${this.map_mode}`,
params: {id: this.opened.id, eid: result.item.item_id} params: {id: this.opened.id, eid: result.item.item_id}
}); });
} else { } else {
// otherwise we close the entite and come back to the concernement // otherwise we close the entite and come back to the concernement
this.$router.push({ this.$router.push({
name: 'concernement', name: 'concernement',
hash: `#${this.map_mode}`, hash: `#${this.map_mode}`,
params: {id: this.id} params: {id: this.id}
}); });
// reset the mousehover // reset the mousehover
this.resetHoverElmt(); this.resetHoverElmt();
}
} }
} }
}.bind(this); }.bind(this);
@ -1812,21 +1786,21 @@ export default {
&& this.map_mode !== 'doleancer' && this.map_mode !== 'doleancer'
&& this.map_mode !== 'action' ) { && this.map_mode !== 'action' ) {
this.paper_objects.children.entites.visible = true; this.paper_objects.children.entites.visible = true;
if (this.opened_entite_id) { // if (this.opened_entite_id) {
// console.log('this.paper_objects.children.entites', this.paper_objects.children.entites); // // console.log('this.paper_objects.children.entites', this.paper_objects.children.entites);
this.paper_objects.children.entites.children.forEach((entite) => { // this.paper_objects.children.entites.children.forEach((entite) => {
// console.log('entite', entite); // // console.log('entite', entite);
if (entite.item_id === this.opened_entite_id) { // if (entite.item_id === this.opened_entite_id) {
entite.style.fillColor = '#01ffe2'; // entite.style.fillColor = '#01ffe2';
} else { // } else {
entite.style.fillColor = '#000'; // entite.style.fillColor = '#000';
} // }
}); // });
} else { // } else {
this.paper_objects.children.entites.children.forEach((entite) => { // this.paper_objects.children.entites.children.forEach((entite) => {
entite.style.fillColor = '#000'; // entite.style.fillColor = '#000';
}) // })
} // }
} else { } else {
this.paper_objects.children.entites.visible = false; this.paper_objects.children.entites.visible = false;
} }

15
src/components/ConcernementMapPopup.vue
View File

@ -94,6 +94,13 @@ export default {
this.dom.style.top = `${e.clientY+2}px`; this.dom.style.top = `${e.clientY+2}px`;
break; break;
} }
},
truncate( str, n, useWordBoundary ){
if (str.length <= n) { return str; }
const subString = str.slice(0, n-1); // the original check
return (useWordBoundary
? subString.slice(0, subString.lastIndexOf(" "))
: subString) + " &hellip;";
} }
}, },
components: { components: {
@ -123,10 +130,10 @@ export default {
<div v-html="besoin.description"></div> <div v-html="besoin.description"></div>
</section> </section>
<section v-if="infos.type === 'reponse'" class="reponse-map-popup"> <section v-if="infos.type === 'reponse'" class="reponse-map-popup">
<div v-if="reponse.qui"><label>Qui</label><p v-html="reponse.qui"/></div> <div v-if="reponse.qui"><label>Qui</label><p v-html="truncate(reponse.qui, 100, true)"/></div>
<div v-if="reponse.quoi"><label>Quoi</label><p v-html="reponse.quoi"/></div> <div v-if="reponse.quoi"><label>Quoi</label><p v-html="truncate(reponse.quoi, 100, true)"/></div>
<div v-if="reponse.ou"><label>Où</label><p v-html="reponse.ou"/></div> <div v-if="reponse.ou"><label>Où</label><p v-html="truncate(reponse.ou, 100, true)"/></div>
<div v-if="reponse.avec"><label>Avec</label><p v-html="reponse.avec"/></div> <div v-if="reponse.avec"><label>Avec</label><p v-html="truncate(reponse.avec, 100, true)"/></div>
</section> </section>
</div> </div>
</div> </div>

28
src/components/MapConcernements.vue
View File

@ -105,6 +105,34 @@ export default {
this.animate() this.animate()
}, },
watch: {
hover_elmt: {
handler (n, o) {
// console.log(`watch hover_elmt map`, o, n);
// over highlight effect on paper items
if (n && n.paper_id) {
let nitem = paper.project.getItem({id: n.paper_id});
nitem.bringToFront();
if (nitem.strokeColor) {
nitem.data.prevStrokeColor = nitem.strokeColor.toCSS(true);
nitem.strokeColor = "#01ffe2";
} else {
nitem.data.prevFillColor = nitem.fillColor.toCSS(true);
nitem.fillColor = "#01ffe2";
}
}
if (o && o.paper_id) {
let oitem = paper.project.getItem({id: o.paper_id})
if (oitem.data.prevStrokeColor) {
oitem.strokeColor = oitem.data.prevStrokeColor;
} else {
oitem.fillColor = oitem.data.prevFillColor;
}
}
},
deep: true
}
},
methods: { methods: {
...mapActions(ConcernementsStore,['setMapMode']), ...mapActions(ConcernementsStore,['setMapMode']),
...mapActions(ConcernementsStore,['openCloseConcernements']), ...mapActions(ConcernementsStore,['openCloseConcernements']),