generic paper item hover highlight behaviour, + some tweaks
This commit is contained in:
parent
c0028a636b
commit
caced38845
@ -130,7 +130,7 @@ export default {
|
||||
},
|
||||
hover_elmt: {
|
||||
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) {
|
||||
this.is_hover = true;
|
||||
} else {
|
||||
@ -138,20 +138,7 @@ export default {
|
||||
}
|
||||
},
|
||||
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: {
|
||||
...mapActions(CommonStore,['setHoverElmt']),
|
||||
@ -528,12 +515,6 @@ export default {
|
||||
item_id: part.id,
|
||||
item_type: 'entite'
|
||||
}))
|
||||
|
||||
// if (part.id === this.opened_entite_id) {
|
||||
// this.ctx.fillStyle = "#01ffe2";
|
||||
// } else {
|
||||
// this.ctx.fillStyle = "#000";
|
||||
// }
|
||||
}
|
||||
}
|
||||
return g;
|
||||
@ -713,10 +694,10 @@ export default {
|
||||
let part = this.body.parts[i];
|
||||
g.addChild(new paper.Path.Circle({
|
||||
center: [part.position.x, part.position.y],
|
||||
radius: 0.5, //0.3
|
||||
radius: 0.3, //0.3
|
||||
fillColor: '#000',
|
||||
strokeColor: '#000',
|
||||
strokeWidth: 2,
|
||||
strokeWidth: 3,
|
||||
item_id: part.id,
|
||||
item_type: 'entite'
|
||||
}))
|
||||
@ -1323,9 +1304,6 @@ export default {
|
||||
//
|
||||
// l'enquete
|
||||
//
|
||||
let enquete = new paper.Group({
|
||||
name: 'enquete'
|
||||
});
|
||||
// camenbert
|
||||
let cam = new paper.Path({
|
||||
strokeColor: '#fff',
|
||||
@ -1339,7 +1317,6 @@ 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.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});
|
||||
enquete.addChild(cam)
|
||||
// texte
|
||||
// enquete.addChild(new paper.PointText({
|
||||
// point: {
|
||||
@ -1352,30 +1329,25 @@ export default {
|
||||
// justification: 'center',
|
||||
// locked: true
|
||||
// }));
|
||||
g.addChild(enquete);
|
||||
g.addChild(cam);
|
||||
|
||||
//
|
||||
// probleme_initial_resolu
|
||||
//
|
||||
let resolution = new paper.Group({
|
||||
name: 'resolution'
|
||||
});
|
||||
// camenbert
|
||||
let rescam = new paper.Path({
|
||||
name: 'resolution',
|
||||
item_type: 'doleance_step',
|
||||
item_id: 'probleme_initial_resolu',
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 2,
|
||||
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.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.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});
|
||||
resolution.addChild(rescam)
|
||||
// texte
|
||||
// resolution.addChild(new paper.PointText({
|
||||
// point: {
|
||||
@ -1387,9 +1359,7 @@ export default {
|
||||
// fillColor: '#fff',
|
||||
// justification: 'center'
|
||||
// }));
|
||||
g.addChild(resolution);
|
||||
|
||||
|
||||
g.addChild(rescam)
|
||||
|
||||
//
|
||||
// MULTIPLE FIELDS
|
||||
@ -1403,10 +1373,12 @@ export default {
|
||||
|
||||
multiple_fields.forEach((mf, j) => {
|
||||
for (let i = 0, l = doleance[mf.field_name].length, a = mf.arc/l; i < l; i++) {
|
||||
let gi = new paper.Group({
|
||||
item_type: mf.field_name,
|
||||
item_index: i
|
||||
});
|
||||
// let gi = new paper.Group({
|
||||
// item_type: 'doleance_step',
|
||||
// item_id: 'lenquete',
|
||||
// item_field: mf.field_name,
|
||||
// item_index: i
|
||||
// });
|
||||
//camenbert
|
||||
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;
|
||||
@ -1425,24 +1397,28 @@ export default {
|
||||
let p = new paper.Path({
|
||||
strokeColor: '#fff',
|
||||
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.lineTo([x2,y2]);
|
||||
p.arcTo([x3t,y3t], [x3,y3]);
|
||||
p.lineTo([x4,y4]);
|
||||
p.arcTo([x4t,y4t], [x1,y1]);
|
||||
gi.addChild(p);
|
||||
// text
|
||||
gi.addChild(new paper.PointText({
|
||||
point: {x:x5,y:y5},
|
||||
content: `${j}-${i}`,
|
||||
fontSize: fontsize,
|
||||
fillColor: '#fff',
|
||||
justification: 'center'
|
||||
}))
|
||||
g.addChild(p);
|
||||
// gi.addChild(p);
|
||||
// // text
|
||||
// gi.addChild(new paper.PointText({
|
||||
// point: {x:x5,y:y5},
|
||||
// content: `${j}-${i}`,
|
||||
// fontSize: fontsize,
|
||||
// fillColor: '#fff',
|
||||
// justification: 'center'
|
||||
// }))
|
||||
|
||||
g.addChild(gi)
|
||||
// g.addChild(gi)
|
||||
}
|
||||
});
|
||||
|
||||
@ -1474,44 +1450,41 @@ export default {
|
||||
if (this.is_opened) {
|
||||
|
||||
// lets define some options regarding the map_mode
|
||||
let paper_group_tohit, op;
|
||||
let paper_group_tohit;
|
||||
switch (this.map_mode) {
|
||||
case "terraindevie":
|
||||
paper_group_tohit = 'entites';
|
||||
op = {};
|
||||
break;
|
||||
case "action":
|
||||
paper_group_tohit = 'agissantes';
|
||||
op = {};
|
||||
break;
|
||||
case "puissancedagir":
|
||||
paper_group_tohit = 'puissanceagir_besoins';
|
||||
op = {};
|
||||
break;
|
||||
case "doleancer":
|
||||
paper_group_tohit = 'doleance_steps';
|
||||
op = {
|
||||
// class: paper.Path
|
||||
fill: true
|
||||
};
|
||||
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);
|
||||
if (result && result.item.item_id) {
|
||||
// console.log('move has result', result);
|
||||
let hover_elmt = {
|
||||
let new_hover_elmt = {
|
||||
paper_id: result.item.id,
|
||||
type: result.item.item_type,
|
||||
id: result.item.item_id
|
||||
};
|
||||
switch (result.item.item_type) {
|
||||
case "reponse":
|
||||
hover_elmt.bid = result.item.item_bid;
|
||||
hover_elmt.cid = result.item.item_cid;
|
||||
new_hover_elmt.bid = result.item.item_bid;
|
||||
new_hover_elmt.cid = result.item.item_cid;
|
||||
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";
|
||||
} else {
|
||||
// console.log('move no result');
|
||||
@ -1540,7 +1513,7 @@ export default {
|
||||
} else {
|
||||
// lets define some options regarding the map_mode
|
||||
// debugger;
|
||||
let op;
|
||||
let op = {pg: null};
|
||||
switch (this.map_mode) {
|
||||
case "terraindevie":
|
||||
op = {
|
||||
@ -1553,7 +1526,7 @@ export default {
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if (op.pg) {
|
||||
let result = this.paper_objects.children[op.pg].hitTest(event.point);
|
||||
// console.log('click result', result);
|
||||
if (result) {
|
||||
@ -1574,6 +1547,7 @@ export default {
|
||||
this.resetHoverElmt();
|
||||
}
|
||||
}
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
},
|
||||
@ -1812,21 +1786,21 @@ export default {
|
||||
&& this.map_mode !== 'doleancer'
|
||||
&& this.map_mode !== 'action' ) {
|
||||
this.paper_objects.children.entites.visible = true;
|
||||
if (this.opened_entite_id) {
|
||||
// console.log('this.paper_objects.children.entites', this.paper_objects.children.entites);
|
||||
this.paper_objects.children.entites.children.forEach((entite) => {
|
||||
// console.log('entite', entite);
|
||||
if (entite.item_id === this.opened_entite_id) {
|
||||
entite.style.fillColor = '#01ffe2';
|
||||
} else {
|
||||
entite.style.fillColor = '#000';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.paper_objects.children.entites.children.forEach((entite) => {
|
||||
entite.style.fillColor = '#000';
|
||||
})
|
||||
}
|
||||
// if (this.opened_entite_id) {
|
||||
// // console.log('this.paper_objects.children.entites', this.paper_objects.children.entites);
|
||||
// this.paper_objects.children.entites.children.forEach((entite) => {
|
||||
// // console.log('entite', entite);
|
||||
// if (entite.item_id === this.opened_entite_id) {
|
||||
// entite.style.fillColor = '#01ffe2';
|
||||
// } else {
|
||||
// entite.style.fillColor = '#000';
|
||||
// }
|
||||
// });
|
||||
// } else {
|
||||
// this.paper_objects.children.entites.children.forEach((entite) => {
|
||||
// entite.style.fillColor = '#000';
|
||||
// })
|
||||
// }
|
||||
} else {
|
||||
this.paper_objects.children.entites.visible = false;
|
||||
}
|
||||
|
||||
@ -94,6 +94,13 @@ export default {
|
||||
this.dom.style.top = `${e.clientY+2}px`;
|
||||
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) + " …";
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@ -123,10 +130,10 @@ export default {
|
||||
<div v-html="besoin.description"></div>
|
||||
</section>
|
||||
<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.quoi"><label>Quoi</label><p v-html="reponse.quoi"/></div>
|
||||
<div v-if="reponse.ou"><label>Où</label><p v-html="reponse.ou"/></div>
|
||||
<div v-if="reponse.avec"><label>Avec</label><p v-html="reponse.avec"/></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="truncate(reponse.quoi, 100, true)"/></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="truncate(reponse.avec, 100, true)"/></div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -105,6 +105,34 @@ export default {
|
||||
|
||||
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: {
|
||||
...mapActions(ConcernementsStore,['setMapMode']),
|
||||
...mapActions(ConcernementsStore,['openCloseConcernements']),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user