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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
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;

146
src/components/MapConcernements.vue
View File

@ -110,8 +110,6 @@ export default {
// add mouse control
// https://github.com/liabru/matter-js/issues/491#issuecomment-331329404
this.mouse = Matter.Mouse.create(this.canvasMap.canvas);
// this.canvasMap.canvas.addEventListener('mousemove', this.onMouseMove)
// this.canvasMap.canvas.addEventListener('click', this.onClick)
this.animate()
},
@ -121,10 +119,7 @@ export default {
...mapActions(ConcernementsStore,['resetConcernementOpened']),
...mapActions(CommonStore,['setHoverElmt']),
animate () {
// this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
// this.canvasMap.canvas.dispatchEvent(this.animateEvent)
Matter.Engine.update(this.engine, 1);
// this.checkMouseHover();
window.requestAnimationFrame(this.animate);
},
onCanvasClick(event){
@ -137,148 +132,7 @@ export default {
hash: `#${this.map_mode}`
});
}
},
// onMouseMove_OLD (e) {
// // this.checkMouseHover();
// },
checkMouseHover_OLD(){
// check item mouse over
// let query;
// if (this.opened) {
// // if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
// const bodies = Matter.Composite.allBodies(this.world);
// for (let body of bodies) {
// if (body.item_type === "concernement" && body.id === this.opened.id) {
// query = Matter.Query.point(body.parts, this.mouse.position);
// break;
// }
// }
// } else {
// // if no concernement opened we query concernements
// query = Matter.Query.point(this.world.bodies, this.mouse.position)
// }
let hover_elmt = null;
if (query && query.length) {
// if we have a results
for (let body of query) {
console.log('mouse hover body.item_type', body.item_type);
// if (!this.opened // if no concernement is opened
// && body.item_type === "concernement" // if it is a concernement
// && typeof this.concernementsByID[body.id] !== "undefined" // if the id exists
// && !this.concernementsByID[body.id].opened) { // if the concernement is not opened
// hover_elmt = {
// type: 'concernement',
// id: body.id
// };
// }
// if (body.item_type === "entite" // if it is an entite
// && this.opened // if a concernement is opened
// && typeof this.opened.entites_byid[body.id] !== "undefined") { // if the entity exists
// hover_elmt = {
// type: 'entite',
// id: body.id
// };
// }
if (body.item_type === "besoin" // if it is a besoin
&& this.opened) { // if a concernement is opened
hover_elmt = {
type: 'besoin',
id: body.id
};
}
if (body.item_type === "reponse" // if it is a besoin
&& this.opened) { // if a concernement is opened
hover_elmt = {
type: 'reponse',
field: body.field,
id: body.id,
bid: body.bid,
cid: body.cid
};
}
}
// console.log(`hover_elmt type: ${hover_elmt.type}, id: ${hover_elmt.id}`);
}
// this.setHoverElmt(hover_elmt);
// if (hover_elmt) {
// document.body.style.cursor = "pointer";
// } else {
// document.body.style.cursor = "auto";
// }
},
// onClick_OLD (e) {
// console.log('onClick', this, e);
// // get the clicked element from matter
// // const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
// let query;
// if (this.opened) {
// // if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
// const bodies = Matter.Composite.allBodies(this.world);
// for (let body of bodies) {
// if (body.item_type === "concernement" && body.id === this.opened.id) {
// query = Matter.Query.point(body.parts, this.mouse.position);
// break;
// }
// }
// } else {
// // if no concernement opened we query concernements
// query = Matter.Query.point(this.world.bodies, this.mouse.position)
// }
// // console.log(this.mouse.position);
// console.log('click query', query);
// // no concernement is yet opened, we deal concernements
// if (!this.opened) {
// if (query.length) {
// // // open/close all concernements
// // this.openCloseConcernements(query[0].id)
// // // push route (keep the hash for map_mode)
// // this.$router.push({
// // name: 'concernement',
// // hash: `#${this.map_mode}`,
// // params: {id: query[0].id}
// // });
// }
// }
// // concernement is already opened, we deal with entités
// if (this.opened) {
// if (query.length) {
// // let clickedEntityBodies = [];
// // query.forEach(body => {
// // // console.log('body id:', body.id);
// // if (body.item_type === "entite") {
// // clickedEntityBodies.push(body);
// // }
// // });
// // if (clickedEntityBodies.length) {
// // // we have clicked on an entite
// // this.$router.push({
// // name: 'concernement',
// // hash: `#${this.map_mode}`,
// // params: {id: this.opened.id, eid: clickedEntityBodies[0].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.opened.id}
// // });
// // }
// } else {
// // if no concernement opened retrun to home (closing concernement contents opened)
// // and reset the opened state in concernement store
// this.resetConcernementOpened();
// this.$router.push({
// name: 'home',
// hash: `#${this.map_mode}`
// });
// }
// }
// }
},
beforeUpdate () {
},

2
src/stores/common.js
View File

@ -10,7 +10,7 @@ export const CommonStore = defineStore({
},
actions: {
setHoverElmt(elmt) {
console.log(`setHoverElmt ${elmt}`);
console.log(`setHoverElmt`, elmt);
// mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
this.hover_elmt = elmt;
}