more paperjs refactoring
This commit is contained in:
parent
18ab3b2b7d
commit
3a473ea932
File diff suppressed because it is too large
Load Diff
@ -49,6 +49,8 @@ export default {
|
||||
// render: null,
|
||||
mouse: null,
|
||||
mapPopupData: null,
|
||||
// PAPERJS
|
||||
paper: null
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@ -88,8 +90,9 @@ export default {
|
||||
let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
|
||||
console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
|
||||
|
||||
paper.setup(this.canvasMap.canvas);
|
||||
this.paper = paper.setup(this.canvasMap.canvas);
|
||||
// console.log('this.canvasMap.paper', this.canvasMap.paper);
|
||||
this.canvasMap.canvas.addEventListener('click', this.onCanvasClick);
|
||||
|
||||
// MATTER
|
||||
let wall_w = 100;
|
||||
@ -124,25 +127,36 @@ export default {
|
||||
// this.checkMouseHover();
|
||||
window.requestAnimationFrame(this.animate);
|
||||
},
|
||||
onMouseMove (e) {
|
||||
// this.checkMouseHover();
|
||||
},
|
||||
checkMouseHover(){
|
||||
// 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)
|
||||
onCanvasClick(event){
|
||||
// console.log('onCanvasClick');
|
||||
// use the canvas click to get back if no items is mousover
|
||||
if (!this.hover_elmt) {
|
||||
this.resetConcernementOpened();
|
||||
this.$router.push({
|
||||
name: 'home',
|
||||
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) {
|
||||
@ -187,84 +201,84 @@ export default {
|
||||
}
|
||||
// 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";
|
||||
}
|
||||
// this.setHoverElmt(hover_elmt);
|
||||
// if (hover_elmt) {
|
||||
// document.body.style.cursor = "pointer";
|
||||
// } else {
|
||||
// document.body.style.cursor = "auto";
|
||||
// }
|
||||
},
|
||||
onClick (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);
|
||||
// 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}
|
||||
// });
|
||||
}
|
||||
}
|
||||
// // 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}`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
// // 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 () {
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user