diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue
index 9471300..527a669 100644
--- a/src/components/ConcernementMapItem.vue
+++ b/src/components/ConcernementMapItem.vue
@@ -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,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.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: {
- // 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
- // },
- // content: doleance['lenquete'],
- // fontSize: fontsize,
+ // point: {
+ // 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
+ // },
+ // content: doleance['lenquete'],
+ // fontSize: fontsize,
// fillColor: '#fff',
// 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: {
- // 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
- // },
- // content: doleance['probleme_initial_resolu'] ? doleance['oui_nouvelle_situation'] : doleance['non_adresse_doleance'],
- // fontSize: fontsize,
- // fillColor: '#fff',
- // justification: 'center'
- // }));
- g.addChild(resolution);
-
-
+ // point: {
+ // 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
+ // },
+ // content: doleance['probleme_initial_resolu'] ? doleance['oui_nouvelle_situation'] : doleance['non_adresse_doleance'],
+ // fontSize: fontsize,
+ // fillColor: '#fff',
+ // justification: 'center'
+ // }));
+ 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,25 +1526,26 @@ export default {
}
break;
}
-
- let result = this.paper_objects.children[op.pg].hitTest(event.point);
- // console.log('click result', result);
- if (result) {
- // we have clicked on an entite
- this.$router.push({
- name: 'concernement',
- hash: `#${this.map_mode}`,
- params: {id: this.opened.id, eid: result.item.item_id}
- });
- } else {
- // otherwise we close the entite and come back to the concernement
- this.$router.push({
- name: 'concernement',
- hash: `#${this.map_mode}`,
- params: {id: this.id}
- });
- // reset the mousehover
- this.resetHoverElmt();
+ if (op.pg) {
+ let result = this.paper_objects.children[op.pg].hitTest(event.point);
+ // console.log('click result', result);
+ if (result) {
+ // we have clicked on an entite
+ this.$router.push({
+ name: 'concernement',
+ hash: `#${this.map_mode}`,
+ params: {id: this.opened.id, eid: result.item.item_id}
+ });
+ } else {
+ // otherwise we close the entite and come back to the concernement
+ this.$router.push({
+ name: 'concernement',
+ hash: `#${this.map_mode}`,
+ params: {id: this.id}
+ });
+ // reset the mousehover
+ 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;
}
diff --git a/src/components/ConcernementMapPopup.vue b/src/components/ConcernementMapPopup.vue
index 9cde74f..5e65776 100644
--- a/src/components/ConcernementMapPopup.vue
+++ b/src/components/ConcernementMapPopup.vue
@@ -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 {
diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue
index 057d6ca..dcfd892 100644
--- a/src/components/MapConcernements.vue
+++ b/src/components/MapConcernements.vue
@@ -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']),