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,
|
// render: null,
|
||||||
mouse: null,
|
mouse: null,
|
||||||
mapPopupData: null,
|
mapPopupData: null,
|
||||||
|
// PAPERJS
|
||||||
|
paper: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
provide() {
|
provide() {
|
||||||
@ -88,8 +90,9 @@ export default {
|
|||||||
let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
|
let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
|
||||||
console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
|
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);
|
// console.log('this.canvasMap.paper', this.canvasMap.paper);
|
||||||
|
this.canvasMap.canvas.addEventListener('click', this.onCanvasClick);
|
||||||
|
|
||||||
// MATTER
|
// MATTER
|
||||||
let wall_w = 100;
|
let wall_w = 100;
|
||||||
@ -124,25 +127,36 @@ export default {
|
|||||||
// this.checkMouseHover();
|
// this.checkMouseHover();
|
||||||
window.requestAnimationFrame(this.animate);
|
window.requestAnimationFrame(this.animate);
|
||||||
},
|
},
|
||||||
onMouseMove (e) {
|
onCanvasClick(event){
|
||||||
// this.checkMouseHover();
|
// 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}`
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
checkMouseHover(){
|
// onMouseMove_OLD (e) {
|
||||||
|
// // this.checkMouseHover();
|
||||||
|
// },
|
||||||
|
checkMouseHover_OLD(){
|
||||||
// check item mouse over
|
// check item mouse over
|
||||||
let query;
|
// let query;
|
||||||
if (this.opened) {
|
// if (this.opened) {
|
||||||
// if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
|
// // if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
|
||||||
const bodies = Matter.Composite.allBodies(this.world);
|
// const bodies = Matter.Composite.allBodies(this.world);
|
||||||
for (let body of bodies) {
|
// for (let body of bodies) {
|
||||||
if (body.item_type === "concernement" && body.id === this.opened.id) {
|
// if (body.item_type === "concernement" && body.id === this.opened.id) {
|
||||||
query = Matter.Query.point(body.parts, this.mouse.position);
|
// query = Matter.Query.point(body.parts, this.mouse.position);
|
||||||
break;
|
// break;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
// if no concernement opened we query concernements
|
// // if no concernement opened we query concernements
|
||||||
query = Matter.Query.point(this.world.bodies, this.mouse.position)
|
// query = Matter.Query.point(this.world.bodies, this.mouse.position)
|
||||||
}
|
// }
|
||||||
|
|
||||||
let hover_elmt = null;
|
let hover_elmt = null;
|
||||||
if (query && query.length) {
|
if (query && query.length) {
|
||||||
@ -187,84 +201,84 @@ export default {
|
|||||||
}
|
}
|
||||||
// console.log(`hover_elmt type: ${hover_elmt.type}, id: ${hover_elmt.id}`);
|
// console.log(`hover_elmt type: ${hover_elmt.type}, id: ${hover_elmt.id}`);
|
||||||
}
|
}
|
||||||
this.setHoverElmt(hover_elmt);
|
// this.setHoverElmt(hover_elmt);
|
||||||
if (hover_elmt) {
|
// if (hover_elmt) {
|
||||||
document.body.style.cursor = "pointer";
|
// 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);
|
|
||||||
|
|
||||||
// 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 {
|
// } else {
|
||||||
// // otherwise we close the entite and come back to the concernement
|
// 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({
|
// this.$router.push({
|
||||||
// name: 'concernement',
|
// name: 'home',
|
||||||
// hash: `#${this.map_mode}`,
|
// 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 () {
|
beforeUpdate () {
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user