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

superpositions clone bug fixe #2303

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2024-01-16 15:02:15 +01:00
parent fb9e7091b4
commit ede55100e0
4 changed files with 98 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -132,8 +132,9 @@ export default {
</transition>
<template v-if="mapitems.length > 0">
<template v-for="(mapitem,index) in mapitems">
<!-- && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone) -->
<ConcernementMapItem
v-if="mapitem.concernement.visible && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone)"
v-if="mapitem.concernement.visible"
:key="mapitem.id"
:mapitem="mapitem"
/>

102
src/components/ConcernementMapItem.vue
View File

@ -42,6 +42,7 @@ export default {
prev_scale: 1,
opacity: 0,
tween: null,
is_visible: true,
is_open: false,
is_opening: false,
is_closing: false,
@ -54,7 +55,8 @@ export default {
paper_main_object: {},
paper_groups: {},
//
doleance_transition: false
doleance_transition: false,
//
}
},
props: ['mapitem'],
@ -112,9 +114,19 @@ export default {
this.initMatterBody()
//
this.initPaperObjects()
//
if(this.mapitem.clone){
if(this.map_mode === 'superposition'){
this.handleMapitemVisibility(true);
}else{
this.handleMapitemVisibility(false);
}
}
}
// this.setConcernementMapItem(this.cid, this);
// this.setConcernementScale(this.cid, this.scale);
this.mapitem.scale = this.scale;
},
// mounted() {
// console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas);
@ -151,9 +163,9 @@ export default {
this.applyShuffleForces();
} else {
if(this.cid === n.id && this.id === n.opened_mapitem_id){
this.is_open = true;
this.is_open = this.mapitem.is_open = true;
}else{
this.is_open = false;
this.is_open = this.mapitem.is_open = false;
}
}
},
@ -182,6 +194,29 @@ export default {
if (n !== o) {
this.handlePaperVisibilityOnMapMode()
}
if(this.mapitem.clone){
let state = false;
if(n === 'superposition'){
// superposition mapemode all clones are visible
state = true;
}else{
if(this.opened_concernement){
if(this.mapitem.is_open){
state = true;
}else{
let opened_mapitem_id = this.opened_concernement.opened_mapitem_id;
if(this.opened_concernement.superposed_mapitem_id_by_mapitem_id[opened_mapitem_id].indexOf(this.mapitem.id) !== -1){
state = true;
}
}
}
}
if(state){
this.handleMapitemVisibility(true);
}else{
this.handleMapitemVisibility(false);
}
}
},
deep: true
},
@ -229,7 +264,9 @@ export default {
'setActiveRevision',
'setBesoinPaperId',
'setOpenedDoleanceField',
'setOpenedRecit']),
'setOpenedRecit',
// 'setConcernementScale',
]),
// getResponsiveRay(){
// return Math.min(this.canvas.width, this.canvas.height) * 0.08;
@ -516,9 +553,9 @@ export default {
});
// fadein intro
if(!this.mapitem.clone){
// if(!this.mapitem.clone){
this.paper_main_object.opacity = (1 + Math.random())*0.001;
}
// }
// the sub items for one concernement
this.paper_main_object.addChild(this.setPaperContour());
@ -712,7 +749,7 @@ export default {
segments: paper_segments,
fillColor: 'rgba(255,255,255,0.4)',
// selected: true,
strokeColor: '#fff',
strokeColor: this.mapitem.clone ? '#f00' : '#fff',
strokeWidth: 1,
pivot: new paper.Point(this.pos),
cid: this.cid
@ -1406,6 +1443,11 @@ export default {
return g;
},
// mapitem visibility
handleMapitemVisibility(state){
this.is_visible = state;
this.paper_main_object.visible = this.is_visible;
},
// PAPER VISIBILITY
handlePaperVisibilityOnBeforeOpen(){
// // agissantes
@ -1467,9 +1509,9 @@ export default {
handlePaperVisibilityOnAfterEnginUpdate(){
// contours focused
if (!this.isFocused()){
this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)"; //this.mapitem.clone ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)";
this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)"; // this.mapitem.clone ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)"; //
}else{
this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.4)"; //this.mapitem.clone ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)";
this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.4)"; // this.mapitem.clone ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)"; //
if (this.is_hover) {
this.paper_main_object.children['contours'].strokeColor = "#01ffe2";
this.paper_main_object.children['contours'].strokeWidth = 2;
@ -2011,6 +2053,7 @@ export default {
// record new scale
this.prev_scale = this.scale;
this.scale = obj.s;
this.mapitem.scale = this.scale;
this.opacity = obj.o;
// console.log('tween update obj.s', obj.s);
this.pos = {x:obj.x, y:obj.y};
@ -2020,6 +2063,7 @@ export default {
// console.log('tween complete obj.s', obj.s);
// record tween one last time
this.prev_scale = this.scale = obj.s;
this.mapitem.scale = this.scale;
this.opacity = obj.o;
this.pos = {x:obj.x, y:obj.y};
Matter.Body.setPosition(this.body, this.pos);
@ -2111,10 +2155,12 @@ export default {
// record new scale
this.prev_scale = this.scale;
this.scale = obj.s;
this.mapitem.scale = this.scale;
this.opacity = obj.o;
})
.onComplete((obj) => {
this.prev_scale = this.scale = 1;
this.mapitem.scale = this.scale;
this.handlePaperVisibilityOnClosed();
this.clearPaperContents();
this.is_closing = false;
@ -2140,12 +2186,14 @@ export default {
// BUT NOT push aside mapitems superposed to this item
// opened_mapitem <-- superposed_mapitems
if (this.opened_concernement.superposed_mapitem_id_by_mapitem_id
&& this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id])
{ // if opened mapitem has superposed mapitems
let superposed_ids = this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]
if (superposed_ids.indexOf(this.id) >= 0) { //this mapitem is directly superposed to the opened mapitem
pushaside = false;
if (this.map_mode === 'superposition') {
if (this.opened_concernement.superposed_mapitem_id_by_mapitem_id
&& this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id])
{ // if opened mapitem has superposed mapitems
let superposed_ids = this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]
if (superposed_ids.indexOf(this.id) >= 0) { //this mapitem is directly superposed to the opened mapitem
pushaside = false;
}
}
}
@ -2477,15 +2525,17 @@ export default {
},
respawn() {
// respawn element if outside screen
if(this.pos.x <= 0
|| this.pos.x >= this.canvas.width
|| this.pos.y <= 0
|| 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();
Matter.Body.setVelocity(this.body, {x:0,y:0});
}
let respanw = false;
if(this.pos.x <= 0){ this.pos.x = 50; respanw=true;}
if(this.pos.x >= this.canvas.width){ this.pos.x = this.canvas.width - 50; respanw=true;}
if(this.pos.y <= 0){ this.pos.y = 50; respanw=true;}
if(this.pos.y >= this.canvas.height){ this.pos.y = this.canvas.height - 50; respanw=true;}
if (respanw) {
// this.pos = respanw_pos;
Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
// this.setInitBodyVelocity();
Matter.Body.setVelocity(this.body, {x:0,y:0});
}
},
onAfterEngineUpdate (event) {
@ -2494,13 +2544,13 @@ export default {
this.paper_main_object.position = this.pos = this.body.position;
// fadein intro
if(!this.mapitem.clone){
// if(!this.mapitem.clone){
if (this.paper_main_object.opacity < 9) {
this.paper_main_object.opacity = this.paper_main_object.opacity * 1.1;
} else{
this.paper_main_object.opacity = 1;
}
}
// }
this.handlePaperVisibilityOnAfterEnginUpdate()

21
src/components/MapConcernements.vue
View File

@ -64,7 +64,8 @@ export default {
'opened_recit',
'allSuperpositions',
// 'allSuperpositions_bycids',
'allSuperpositions_clustered'
'allSuperpositions_clustered',
'allMapItems_byid'
]),
...mapState(CommonStore,['map_item_ray',
'hover_elmt',
@ -224,7 +225,7 @@ export default {
map_mode: {
handler (n, o) {
console.log('concernementMap watch map_mode o n', o, n);
if (n === 'superposition' && !this.opened_concernement) {
if (n === 'superposition') { // && !this.opened_concernement
// create constraints
this.setSuperpositionsMatterConstraints();
}else{
@ -1148,7 +1149,7 @@ export default {
},
async setSuperpositionsMatterConstraints(){
await nextTick(); // wait for dom to be upadted before applying constraint
// console.log('setSuperpositionsMatterConstraints this.allSuperpositions_clustered', this.allSuperpositions_clustered);
console.log('setSuperpositionsMatterConstraints this.allSuperpositions_clustered', this.allSuperpositions_clustered);
// loop through all supperposition couple
for(let [cluster_index, cluster] of Object.entries(this.allSuperpositions_clustered)){
@ -1168,6 +1169,12 @@ export default {
let mapitemB_id = `${cid_eid_B.cid}___${cluster_index}`
// console.log(`mapitemA_id: ${mapitemA_id}, mapitemB_id: ${mapitemB_id}`);
let mapitemA = this.allMapItems_byid[mapitemA_id];
let mapitemB = this.allMapItems_byid[mapitemB_id];
console.log('mapitemA', mapitemA);
console.log('mapitemB', mapitemB);
// get the concernement matter bodies with id
let bodyA = Matter.Composite.get(this.world, mapitemA_id, 'body'); // matter body id is the same as mapitem_id
let bodyB = Matter.Composite.get(this.world, mapitemB_id, 'body'); // matter body id is the same as mapitem_id
@ -1178,7 +1185,9 @@ export default {
for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){
if (entiteA.entite && entiteA.entite.id === cid_eid_A.eid && entiteA.display) {
// console.log('entiteA', entiteA);
pointA = Matter.Vector.create(entiteA.display.pos.x, entiteA.display.pos.y);
let scale = mapitemA.scale;
console.log(`mapitemA.scale ${concernementA.id}`, scale);
pointA = Matter.Vector.create(entiteA.display.pos.x * scale, entiteA.display.pos.y * scale);
break;
}
}
@ -1186,7 +1195,9 @@ export default {
for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){
if (entiteB.entite && entiteB.entite.id === cid_eid_B.eid && entiteB.display) {
// console.log('entiteB', entiteB);
pointB = Matter.Vector.create(entiteB.display.pos.x, entiteB.display.pos.y);
let scale = mapitemB.scale;
console.log(`mapitemB.scale ${concernementB.id}`, scale);
pointB = Matter.Vector.create(entiteB.display.pos.x * scale, entiteB.display.pos.y * scale);
break;
}
}

4
src/stores/concernements.js
View File

@ -388,6 +388,10 @@ export const ConcernementsStore = defineStore({
this.opened_concernement = null;
this.openCloseConcernements();
},
// setConcernementScale(cid, scale){
// console.log(`setConcernementScale ${cid} ${scale}`);
// this.concernementsByID[cid].scale = scale;
// },
setOpenedEntiteId(id){
this.opened_entite_id = id;
},