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

started paperjs events instead of matterjs (query) events

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-06-04 22:39:41 +02:00
parent 46439c51aa
commit 18ab3b2b7d
3 changed files with 293 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -58,7 +58,7 @@ export default {
v-for="(concernement,index) in concernements"
:key="index"
:concernement="concernement"
:opened="concernement.opened"
:is_opened="concernement.opened"
/>
</MapConcernements>
<div id="content">

281
src/components/ConcernementMapItem.vue
View File

@ -60,10 +60,11 @@ export default {
paper_objects: {}
}
},
props: ['concernement', 'opened'],
props: ['concernement', 'is_opened'],
computed: {
...mapState(ConcernementsStore,['map_mode']),
...mapState(ConcernementsStore,['concernementsByID']),
...mapState(ConcernementsStore,['opened']),
...mapState(ConcernementsStore,['opened_entite_id']),
...mapState(CommonStore,['hover_elmt'])
},
@ -72,7 +73,6 @@ export default {
this.id = this.concernement.id
this.entites = this.concernement.entites
this.entites_byid = this.concernement.entites_byid
// console.log(`ConcernementsMapItem ${this.concernement.id} $route`, this.id, this.$route);
// if (this.$route.name === 'concernement'
// && parseInt(this.$route.params.id) === this.id
@ -108,9 +108,8 @@ export default {
},
deep: true
},
opened: {
is_opened: {
handler (n, o) {
if(n){ // opened
this.openClose(true);
}else{ // closed
@ -141,6 +140,8 @@ export default {
}
},
methods: {
...mapActions(CommonStore,['setHoverElmt']),
...mapActions(ConcernementsStore,['openCloseConcernements']),
parsePoints (){
// converts data (menace/maintien, actuel/future, prise) into atcual position x,y
for (let i = 0; i < this.entites.length; i++) {
@ -396,17 +397,98 @@ export default {
},
initPaperObjects(){
this.paper_objects = new paper.Group({
pivot: new paper.Point(this.pos)
pivot: new paper.Point(this.pos),
cid: this.id
});
this.paper_objects.addChild(this.setBoussoleBG());
this.paper_objects.addChild(this.setPaperContour());
this.paper_objects.addChild(this.setPaperEntites());
this.initPaperEvents()
},
setBoussoleBG(){
// BOUSSOLE
let children = [];
// // exterieur circle
children.push(new paper.Path.Circle({
center: [this.pos.x, this.pos.y],
radius: this.ray*this.scale*0.92
}));
// interieur circle
children.push(new paper.Path.Circle({
center: [this.pos.x, this.pos.y],
radius: this.ray/2*this.scale
}));
// axes
// vertical
children.push(new paper.Path.Line({
from: [this.pos.x, this.pos.y - this.ray*this.scale],
to: [this.pos.x, this.pos.y + this.ray*this.scale]
}));
// horizontal
children.push(new paper.Path.Line({
from: [this.pos.x - this.ray*this.scale, this.pos.y],
to: [this.pos.x + this.ray*this.scale, this.pos.y]
}))
// fleches
// haute
children.push(new paper.Path({
segments: [
[this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)],
[this.pos.x, this.pos.y - this.ray*this.scale*0.92],
[this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)],
]
}));
// milieu
children.push(new paper.Path({
segments: [
[this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)],
[this.pos.x, this.pos.y],
[this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)],
]
}));
// MOINS - PLUS
this.ctx.beginPath();
this.ctx.lineWidth = 8;
this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;;
// PLUS
// horizontal
children.push(new paper.Path.Line({
from: [this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale],
to: [this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale]
}))
// vertical
children.push(new paper.Path.Line({
from: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale)],
to: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale)]
}))
// MOINS
// horizontal
children.push(new paper.Path.Line({
from: [this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale],
to: [this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale]
}))
return new paper.Group({
children: children,
pivot: new paper.Point(this.pos),
name: 'boussole_bg',
style: {
strokeColor: '#fff',
strokeWidth: 2
}
});
this.paper_objects.addChild(this.setPaperContour());
},
setPaperContour(){
// this.paper_objects.contours = new paper.Path.Circle({
// center: [this.pos.x, this.pos.y],
// radius: this.ray,
// fillColor: 'red'
// });
let gap = 1;//1.15;
let segments = [
[this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap]
@ -422,8 +504,98 @@ export default {
strokeColor: '#000',
strokeWidth: 1,
fillColor: 'rgba(255,255,255,0.8)',
pivot: new paper.Point(this.pos)
})
pivot: new paper.Point(this.pos),
cid: this.id
});
},
setPaperEntites(){
let g = new paper.Group({
pivot: new paper.Point(this.pos),
name: 'entites'
});
for (let i = 0; i < this.body.parts.length; i++) {
if (this.body.parts[i].item_type === 'entite') {
let part = this.body.parts[i];
g.addChild(new paper.Path.Circle({
center: [part.position.x, part.position.y],
radius: 0.5, //0.3
fillColor: '#000',
eid: part.id
// type: 'entite'
}))
// if (part.id === this.opened_entite_id) {
// this.ctx.fillStyle = "#01ffe2";
// } else {
// this.ctx.fillStyle = "#000";
// }
}
}
return g;
},
initPaperEvents(){
this.paper_objects.onMouseEnter = function(event){
if (!this.is_opened) {
this.setHoverElmt({
type: 'concernement',
id: this.id
});
}
}.bind(this);
this.paper_objects.onMouseMove = function(event){
if (this.is_opened) {
let result = this.paper_objects.children.entites.hitTest(event.point);
// console.log('move result', result);
if (result) {
this.setHoverElmt({
type: 'entite',
id: result.item.eid
});
} else {
this.setHoverElmt(null);
}
}
}.bind(this);
this.paper_objects.onMouseLeave = function(event){
if (!this.is_opened) {
this.setHoverElmt(null);
}
}.bind(this);
this.paper_objects.onClick = function(event){
// console.log('paper onClick', event, this.paper_objects);
if (!this.is_opened) {
// open/close all concernements
this.openCloseConcernements(this.id)
// push route (keep the hash for map_mode)
this.$router.push({
name: 'concernement',
hash: `#${this.map_mode}`,
params: {id: this.id}
});
} else {
let result = this.paper_objects.children.entites.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.eid}
});
} 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}
});
}
}
}.bind(this);
},
openClose(open) {
@ -558,8 +730,12 @@ export default {
Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
}
this.paper_objects.position = this.pos;
this.paper_objects.position = this.pos = this.body.position;
// this.draw()
this.handlePaperVisibility()
},
handlePaperVisibility(){
// contours
if (!this.isFocused()){
this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.3)";
@ -571,41 +747,58 @@ export default {
this.paper_objects.children['contours'].strokeColor = "#000";
}
}
this.draw()
},
draw() {
if (!this.ctx) return;
// record the position from the main matter body
this.pos = this.body.position;
// drawing backgrounds
if (this.opened) {
switch (this.map_mode) {
case 'terraindevie':
this.drawBoussoleBG();
break;
case 'puissancedagir':
this.drawPuissanceagirBG();
break;
case 'doleancer':
this.drawDoleancerBG();
break;
}
}
// contours
if (!this.opened
|| (this.opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
if (!this.is_opened
|| (this.is_opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
this.paper_objects.children['contours'].visible = true;
} else {
this.paper_objects.children['contours'].visible = false;
}
// backgrounds
if (this.is_opened) {
switch (this.map_mode) {
case 'terraindevie':
this.paper_objects.children.boussole_bg.visible = true;
break;
case 'puissancedagir':
// this.drawPuissanceagirBG();
break;
case 'doleancer':
// this.drawDoleancerBG();
break;
}
}else{
this.paper_objects.children.boussole_bg.visible = false;
}
},
draw() {
// if (!this.ctx) return;
// record the position from the main matter body
// this.pos = this.body.position;
// drawing backgrounds
// if (this.is_opened) {
// switch (this.map_mode) {
// case 'terraindevie':
// this.drawBoussoleBG();
// break;
// case 'puissancedagir':
// this.drawPuissanceagirBG();
// break;
// case 'doleancer':
// this.drawDoleancerBG();
// break;
// }
// }
// map mode puissance d'agir
if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") {
if (!this.opened) {
if (!this.is_opened) {
this.drawPuissanceagirIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone
} else {
this.drawBesoins();
@ -615,7 +808,7 @@ export default {
// map mode doleancer
// if not opened and has_doleance draw the doleance icone
if (this.concernement.has_doleance && this.map_mode === "doleancer") {
if (!this.opened) {
if (!this.is_opened) {
this.drawDoleanceIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone
} else {
this.drawDoleanceSteps();
@ -623,7 +816,7 @@ export default {
}
if (this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer') {
this.drawEntites()
// this.drawEntites()
}
@ -972,7 +1165,7 @@ export default {
},
drawEntites(){
// IF OPENED
if (this.opened) {
if (this.is_opened) {
// place all entities points
// OR using entitées matter bodies
for (let i = 0; i < this.body.parts.length; i++) {
@ -1016,7 +1209,7 @@ export default {
}
},
drawContour(){
drawContour_OLD(){
if (this.salientPoints.length > 3) {
// // test draw contour from body part
// for (let i = 0; i < this.body.parts.length; i++) {

100
src/components/MapConcernements.vue
View File

@ -107,8 +107,8 @@ 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.canvasMap.canvas.addEventListener('mousemove', this.onMouseMove)
// this.canvasMap.canvas.addEventListener('click', this.onClick)
this.animate()
},
@ -125,7 +125,7 @@ export default {
window.requestAnimationFrame(this.animate);
},
onMouseMove (e) {
this.checkMouseHover();
// this.checkMouseHover();
},
checkMouseHover(){
// check item mouse over
@ -149,23 +149,23 @@ export default {
// 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 (!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 = {
@ -218,42 +218,42 @@ export default {
// 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}
});
// // 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}
});
}
// 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