superposition: mapitem openeing and entite clickable

This commit is contained in:
Bachir Soussi Chiadmi 2023-09-14 10:42:31 +02:00
parent 43290d3c5d
commit 36b76a9ba6
4 changed files with 50 additions and 23 deletions

View File

@ -544,6 +544,9 @@ export default {
this.addNewPaperSymbolInstance('boussole_bg', true); this.addNewPaperSymbolInstance('boussole_bg', true);
this.paper_main_object.addChild(this.setPaperEntites()); this.paper_main_object.addChild(this.setPaperEntites());
break; break;
case 'superposition':
this.addNewPaperSymbolInstance('boussole_bg', true);
break;
case 'puissancedagir': case 'puissancedagir':
this.addNewPaperSymbolInstance('puissanceagir_bg', true); this.addNewPaperSymbolInstance('puissanceagir_bg', true);
this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins()); this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins());
@ -1129,13 +1132,30 @@ export default {
this.paper_main_object.children.agissantes_icons.visible = false; this.paper_main_object.children.agissantes_icons.visible = false;
} }
} }
},
handlePaperVisibilityOnOpened(){
// superposition
// scale down superposed entites on open
let entites_superposes = this.paper_main_object.children['entites_superposes'];
// console.log('entites_superposes.children', entites_superposes.children);
if(entites_superposes){
for(let paper_item of entites_superposes.children) {
// paper_item.definition = this.paper_symbol_definitions.entite_hover;
paper_item.scale(0.25)
}
}
}, },
handlePaperVisibilityOnOpened(){},
handlePaperVisibilityOnBeforeClose(){ handlePaperVisibilityOnBeforeClose(){
// superposition
// scale up superposed entites on open
let entites_superposes = this.paper_main_object.children['entites_superposes'];
// console.log('entites_superposes.children', entites_superposes.children);
if(entites_superposes){
for(let paper_item of entites_superposes.children) {
// paper_item.definition = this.paper_symbol_definitions.entite_hover;
paper_item.scale(4)
}
}
}, },
handlePaperVisibilityOnClosed(){ handlePaperVisibilityOnClosed(){
// agissantes // agissantes
@ -1147,9 +1167,7 @@ export default {
} }
} }
}, },
handlePaperVisibilityOnMapMode(){ handlePaperVisibilityOnMapMode(){},
},
handlePaperVisibilityOnAfterEnginUpdate(){ handlePaperVisibilityOnAfterEnginUpdate(){
// contours focused // contours focused
if (!this.isFocused()){ if (!this.isFocused()){
@ -1283,9 +1301,7 @@ export default {
// console.log(`onmousemove ${this.id}`); // console.log(`onmousemove ${this.id}`);
// prevent hover map item mouse event if cartouch is opened // prevent hover map item mouse event if cartouch is opened
if (this.cartouch_is_open) { if (this.cartouch_is_open) return;
return;
}
if (!this.is_open) { if (!this.is_open) {
if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused
@ -1316,6 +1332,9 @@ export default {
case "terraindevie": case "terraindevie":
paper_group_tohit = this.paper_main_object.children['entites']; paper_group_tohit = this.paper_main_object.children['entites'];
break; break;
case "superposition":
paper_group_tohit = this.paper_main_object.children['entites_superposes'];
break;
case "action": case "action":
paper_group_tohit = this.paper_main_object.children['agissantes']; paper_group_tohit = this.paper_main_object.children['agissantes'];
break; break;
@ -1363,11 +1382,12 @@ export default {
this.paper_main_object.onClick = function(event){ this.paper_main_object.onClick = function(event){
console.log('paper concernement onClick'); console.log('paper concernement onClick');
// prevent hover map item mouse event if cartouch is opened // prevent hover map item mouse event if cartouch is opened
if (this.cartouch_is_open) return; if (this.cartouch_is_open) return;
if (!this.is_open) { // si ce concernement n'est pas ouvet if (!this.is_open) { // si ce concernement n'est pas ouvet
console.log('mapitem is NOT opened');
if (!this.opened_concernement) { // si aucun concernement n'est ouvert if (!this.opened_concernement) { // si aucun concernement n'est ouvert
console.log(`Open me ${this.id}`); console.log(`Open me ${this.id}`);
// open/close all concernements // open/close all concernements
@ -1382,12 +1402,16 @@ export default {
this.resetHoverElmt(); this.resetHoverElmt();
} }
} else { // si ce concernement est ouvert } else { // si ce concernement est ouvert
console.log('mapitem is opened');
// lets define some options regarding the map_mode // lets define some options regarding the map_mode
let group_to_hit = null; let group_to_hit = null;
switch (this.map_mode) { switch (this.map_mode) {
case "terraindevie": case "terraindevie":
group_to_hit = this.paper_main_object.children['entites']; group_to_hit = this.paper_main_object.children['entites'];
break; break;
case "superposition":
group_to_hit = this.paper_main_object.children['entites_superposes'];
break;
case "action": case "action":
group_to_hit = this.paper_main_object.children['agissantes']; group_to_hit = this.paper_main_object.children['agissantes'];
break; break;
@ -1401,6 +1425,7 @@ export default {
if (result) { if (result) {
switch (this.map_mode) { switch (this.map_mode) {
case "terraindevie": case "terraindevie":
case "superposition":
case "action": case "action":
// we have clicked on an entite // we have clicked on an entite
this.$router.push({ this.$router.push({
@ -1443,8 +1468,6 @@ export default {
} }
if (open) { if (open) {
this.is_opening = true; this.is_opening = true;
// paper bring to front
this.paper_main_object.bringToFront();
// create the paper objects to display (like entite, besoin, etc) // create the paper objects to display (like entite, besoin, etc)
this.setPaperContents(); this.setPaperContents();
this.handlePaperVisibilityOnBeforeOpen(); this.handlePaperVisibilityOnBeforeOpen();
@ -1454,8 +1477,7 @@ export default {
// let s = this.canvas.height / (this.ray*2.8) // let s = this.canvas.height / (this.ray*2.8)
let s = Math.min(this.canvas.height, this.canvas.width - this.cartouch_width) / (this.ray*2.8) let s = Math.min(this.canvas.height, this.canvas.width - this.cartouch_width) / (this.ray*2.8)
// create once the opening tweening
// opening tweening
this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0}) this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0})
.to({ .to({
s: s, s: s,
@ -1472,7 +1494,7 @@ export default {
Matter.Body.scale(this.body, obj.s, obj.s) Matter.Body.scale(this.body, obj.s, obj.s)
this.paper_main_object.scale(obj.s); this.paper_main_object.scale(obj.s);
// update superposition constraints points // update superposition constraints points poisitions
if (this.concernement.superposition_constraints_id if (this.concernement.superposition_constraints_id
&& this.concernement.superposition_constraints_id[this.id] && this.concernement.superposition_constraints_id[this.id]
&& this.concernement.superposition_constraints_id[this.id].length) && this.concernement.superposition_constraints_id[this.id].length)
@ -1531,7 +1553,8 @@ export default {
}); });
Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]); Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
// paper bring to front
this.paper_main_object.bringToFront();
this.is_opening = false; this.is_opening = false;
}); });
@ -1552,6 +1575,7 @@ export default {
// this.setOpenedRecit(null); // this.setOpenedRecit(null);
// create once the closing tween
this.tween = new Tween.Tween({s: this.scale, o: 1}) this.tween = new Tween.Tween({s: this.scale, o: 1})
.to({s: 1, o: 0}, 500) .to({s: 1, o: 0}, 500)
.onUpdate((obj) => { .onUpdate((obj) => {
@ -1563,7 +1587,7 @@ export default {
Matter.Body.scale(this.body, obj.s, obj.s) Matter.Body.scale(this.body, obj.s, obj.s)
this.paper_main_object.scale(obj.s); this.paper_main_object.scale(obj.s);
// update superposition constraints points // update superposition constraints points positions
if (this.concernement.superposition_constraints_id if (this.concernement.superposition_constraints_id
&& this.concernement.superposition_constraints_id[this.id] && this.concernement.superposition_constraints_id[this.id]
&& this.concernement.superposition_constraints_id[this.id].length) && this.concernement.superposition_constraints_id[this.id].length)
@ -1623,7 +1647,8 @@ export default {
// this.opened_concernement.id !== this.cid && // this.opened_concernement.id !== this.cid &&
this.opened_concernement.opened_mapitem_id !== this.id this.opened_concernement.opened_mapitem_id !== this.id
// && (!this.opened_concernement.all_superposed_concernements_id || this.opened_concernement.all_superposed_concernements_id.indexOf(this.id) < 0) // && (!this.opened_concernement.all_superposed_concernements_id || this.opened_concernement.all_superposed_concernements_id.indexOf(this.id) < 0)
&& (!this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id] // when we are not in superposition mode && (!this.opened_concernement.superposed_mapitem_id_by_mapitem_id
|| !this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id] // when we are not in superposition mode
|| this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id].indexOf(this.id) < 0) // this mapitem is not superposed to the opened mapitem || this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id].indexOf(this.id) < 0) // this mapitem is not superposed to the opened mapitem
) { ) {
this.pushAside() this.pushAside()
@ -1952,7 +1977,8 @@ export default {
|| this.pos.y >= this.canvas.height){ || this.pos.y >= this.canvas.height){
this.pos = this.getRandomPos() this.pos = this.getRandomPos()
Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}); Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
this.setInitBodyVelocity(); // this.setInitBodyVelocity();
Matter.Body.setVelocity(this.body, {x:0,y:0});
} }
}, },

View File

@ -56,6 +56,7 @@ export default {
this.concernement = this.concernementsByID[this.infos.cid]; this.concernement = this.concernementsByID[this.infos.cid];
break; break;
case 'entite': case 'entite':
case 'entite_superpose':
case 'entite_action': case 'entite_action':
this.entites = [this.allEntitesById[this.infos.id]]; this.entites = [this.allEntitesById[this.infos.id]];
break; break;
@ -148,7 +149,7 @@ export default {
</div> </div>
</section> </section>
<section v-if="infos.type === 'entite' || infos.type === 'entite_action' || infos.type === 'superposition'" class="entite-map-popup"> <section v-if="infos.type === 'entite' || infos.type === 'entite_action' || infos.type === 'superposition' || infos.type === 'entite_superpose'" class="entite-map-popup">
<template <template
v-for="(entite, index) of entites" v-for="(entite, index) of entites"
:key="index" :key="index"

View File

@ -108,7 +108,7 @@ export default {
// use the paper.view click to get back if no items is clicked // use the paper.view click to get back if no items is clicked
this.paper.view.onClick = function(event) { this.paper.view.onClick = function(event) {
console.log("view onClick", this, event.target); // console.log("view onClick", this, event.target);
if(event.target._id === "paper-view-0") { if(event.target._id === "paper-view-0") {
this.resetConcernementOpened(); this.resetConcernementOpened();
this.$router.push({ this.$router.push({

View File

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