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

more paperjs refactoring

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-06-05 14:33:03 +02:00
parent 3a473ea932
commit f314ff11f2
3 changed files with 63 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/ConcernementMapItem.vue
View File

@@ -260,43 +260,6 @@ export default {
})
];
// // Create parts of the body : contours
// if (this.salientPoints.length > 2) {
// var decomp = require('poly-decomp');
// // window.decomp = decomp;
// // debugger;
// Matter.Common.setDecomp(decomp);
// // Matter.Common.setDecomp(require('poly-decomp'));
// // let contourpoints = [];
// // for (let j = 0; j < this.salientPoints.length; j++) {
// // contourpoints.push(this.salientPoints[j].pos);
// // }
// let contourpoints = this.salientPoints.map(function(point) {
// return point.pos; //[point.pos.x, point.pos.y]
// });
// // console.log('contourpoints', contourpoints);
// // let contourpoints = Matter.Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7');
// // let ccw_contourpoints = decomp.makeCCW(contourpoints);
// // console.log('ccw_contourpoints', ccw_contourpoints);
// let vertices_contour = Matter.Vertices.create(contourpoints);
// // console.log('vertices_contour', vertices_contour);
// // let vertices_contour_bounds = Matter.Bounds.create(vertices_contour);
// // console.log('vertices_contour_bounds', vertices_contour_bounds);
// // debugger;
// let body_contour = Matter.Bodies.fromVertices(0, 0, vertices_contour, {
// mass: 0,
// item_type: 'concernement-contours',
// id: this.concernement.id,
// }, false, 0, 0, 0);
// // debugger;
// // console.log('body_contour.bounds', body_contour.bounds);
// // // https://github.com/liabru/matter-js/issues/186
// // Matter.Body.translate(body_contour, Matter.Vector.sub(vertices_contour_bounds.min, body_contour.bounds.min))
// this.body_parts.push(body_contour);
// }
// Create parts of the body : entities
for (let i = 0; i < this.entites.length; i++) {
// parts.push(Matter.Bodies.circle(this.pos.x+this.entites[i].display.pos.x, this.pos.y+this.entites[i].display.pos.y, 15, {
@@ -338,11 +301,7 @@ export default {
Matter.Body.setPosition(this.body, this.pos);
// add init velocity
let delta = 10;
Matter.Body.setVelocity(this.body, {
x: -delta + Math.random()*delta*2,
y: -delta + Math.random()*delta*2
});
this.setInitBodyVelocity()
// console.log('concernementItem mass', this.body.mass);
Matter.Composite.add(this.matterEngine.world, this.body);
// console.log('concernement body', this.body);
@@ -355,11 +314,19 @@ export default {
Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
}
},
setInitBodyVelocity(){
let delta = 10;
Matter.Body.setVelocity(this.body, {
x: -delta + Math.random()*delta*2,
y: -delta + Math.random()*delta*2
});
},
createBesoinsBodyParts(){
let res_fields = ['qui','quoi','ou','avec'];
let arc = (360 / 16); // unit arc
let r = (this.ray * this.scale)/5; // unit ray
let br = r - r/3; // besoin ray
for (let i = 0; i < this.concernement.besoins.length; i++) {
let start_a = arc * i; // angle depart (for reponses)
let center_a = start_a + arc/2; // angle central
@@ -376,15 +343,17 @@ export default {
let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
let res_a = start_a + res_arc * (j+1); // angle for response line
for (let f = 0; f < res_fields.length; f++) {
if(this.concernement.besoins[i].reponses[j][res_fields[f]]){
for (let f = 0; f < res_fields.length; f++) { // loop through all 4 fields, keep only the last one filled
if( this.concernement.besoins[i].reponses[j][res_fields[f]] // if field filled
&& (f === res_fields.length -1 || !this.concernement.besoins[i].reponses[j][res_fields[f+1]]) // and is last field or last field filled
){
let rr = this.ray * this.scale - r*f - r/2; // reponse field ray
let rx = Math.cos(res_a*(Math.PI/180)) * rr;
let ry = Math.sin(res_a*(Math.PI/180)) * rr;
this.body_parts.push(Matter.Bodies.circle(rx, ry, 0.8, {
item_type: 'reponse',
field: res_fields[f],
// field: res_fields[f],
id: this.concernement.besoins[i].reponses[j].id,
bid: this.concernement.besoins[i].id,
cid: this.concernement.id,
@@ -536,8 +505,8 @@ export default {
center: [part.position.x, part.position.y],
radius: 0.5, //0.3
fillColor: '#000',
eid: part.id
// type: 'entite'
item_id: part.id,
item_type: 'entite'
}))
// if (part.id === this.opened_entite_id) {
@@ -676,7 +645,9 @@ export default {
new paper.Path({
segments: this.getDiamondSegments(part.position.x, part.position.y, 1),
fillColor: '#000',
pivot: new paper.Point(this.pos)
pivot: new paper.Point(this.pos),
item_id: part.id,
item_type: 'besoin'
})
)
break;
@@ -687,7 +658,11 @@ export default {
fillColor: '#eee',
strokeColor: "#000",
strokeWidth: 1,
pivot: new paper.Point(this.pos)
pivot: new paper.Point(this.pos),
item_id: part.id,
item_bid: part.bid,
item_cid: part.cid,
item_type: 'reponse'
})
)
break;
@@ -744,34 +719,41 @@ export default {
if (this.is_opened) {
// lets define some options regarding the map_mode
let op;
let paper_group_tohit;
switch (this.map_mode) {
case "terraindevie":
op = {
pg: 'entites', // paper group to hittest
type: 'entite', // type for hover element
id: 'eid' // id prop on paper item
}
paper_group_tohit = 'entites';
break;
case "action":
op = {
pg: 'agissantes', // paper group to hittest
type: 'entite', // type for hover element
id: 'eid' // id prop on paper item
}
paper_group_tohit = 'agissantes';
break;
case "puissancedagir":
paper_group_tohit = 'puissanceagir_besoins';
break;
}
let result = this.paper_objects.children[op.pg].hitTest(event.point);
// console.log('move result', result);
let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point);
if (result) {
this.setHoverElmt({
type: op.type,
id: result.item[op.id]
});
console.log('move result', result);
let hover_elmt = {
type: result.item.item_type,
id: result.item.item_id
};
switch (this.map_mode) {
// case "terraindevie":
// break;
// case "action":
// break;
case "puissancedagir":
hover_elmt.bid = result.item.item_bid;
hover_elmt.cid = result.item.item_cid;
break;
}
this.setHoverElmt(hover_elmt);
document.body.style.cursor = "pointer";
} else {
this.setHoverElmt(null);
this.resetHoverElmt();
document.body.style.cursor = "auto";
}
}
@@ -779,7 +761,7 @@ export default {
this.paper_objects.onMouseLeave = function(event){
if (!this.is_opened) {
this.setHoverElmt(null);
this.resetHoverElmt();
document.body.style.cursor = "auto";
}
}.bind(this);
@@ -804,13 +786,13 @@ export default {
case "terraindevie":
op = {
pg: 'entites', // paper group to hittest
id: 'eid' // id prop on paper item
// id: 'eid' // id prop on paper item
}
break;
case "action":
op = {
pg: 'agissantes', // paper group to hittest
id: 'eid' // id prop on paper item
// id: 'eid' // id prop on paper item
}
break;
}
@@ -822,7 +804,7 @@ export default {
this.$router.push({
name: 'concernement',
hash: `#${this.map_mode}`,
params: {id: this.opened.id, eid: result.item[op.id]}
params: {id: this.opened.id, eid: result.item.item_id}
});
} else {
// otherwise we close the entite and come back to the concernement
@@ -975,6 +957,7 @@ export default {
|| this.pos.y > this.canvas.height){
this.pos = this.getRandomPos()
Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
this.setInitBodyVelocity();
}
this.paper_objects.position = this.pos = this.body.position;
@@ -1006,6 +989,12 @@ export default {
// backgrounds
if (this.is_opened) {
// hide all bgs
this.paper_objects.children.boussole_bg.visible = false;
if (this.concernement.has_puissancedagir) {
this.paper_objects.children.puissanceagir_bg.visible = false;
}
// choose wich one to show, if one
switch (this.map_mode) {
case 'terraindevie':
this.paper_objects.children.boussole_bg.visible = true;
@@ -1013,7 +1002,7 @@ export default {
case 'puissancedagir':
if (this.concernement.has_puissancedagir) {
this.paper_objects.children.puissanceagir_bg.visible = true;
}
}
break;
case 'doleancer':
// this.drawDoleancerBG();