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> </transition>
<template v-if="mapitems.length > 0"> <template v-if="mapitems.length > 0">
<template v-for="(mapitem,index) in mapitems"> <template v-for="(mapitem,index) in mapitems">
<!-- && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone) -->
<ConcernementMapItem <ConcernementMapItem
v-if="mapitem.concernement.visible && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone)" v-if="mapitem.concernement.visible"
:key="mapitem.id" :key="mapitem.id"
:mapitem="mapitem" :mapitem="mapitem"
/> />

102
src/components/ConcernementMapItem.vue
View File

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

21
src/components/MapConcernements.vue
View File

@ -64,7 +64,8 @@ export default {
'opened_recit', 'opened_recit',
'allSuperpositions', 'allSuperpositions',
// 'allSuperpositions_bycids', // 'allSuperpositions_bycids',
'allSuperpositions_clustered' 'allSuperpositions_clustered',
'allMapItems_byid'
]), ]),
...mapState(CommonStore,['map_item_ray', ...mapState(CommonStore,['map_item_ray',
'hover_elmt', 'hover_elmt',
@ -224,7 +225,7 @@ export default {
map_mode: { map_mode: {
handler (n, o) { handler (n, o) {
console.log('concernementMap watch map_mode o n', o, n); console.log('concernementMap watch map_mode o n', o, n);
if (n === 'superposition' && !this.opened_concernement) { if (n === 'superposition') { // && !this.opened_concernement
// create constraints // create constraints
this.setSuperpositionsMatterConstraints(); this.setSuperpositionsMatterConstraints();
}else{ }else{
@ -1148,7 +1149,7 @@ export default {
}, },
async setSuperpositionsMatterConstraints(){ async setSuperpositionsMatterConstraints(){
await nextTick(); // wait for dom to be upadted before applying constraint 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 // loop through all supperposition couple
for(let [cluster_index, cluster] of Object.entries(this.allSuperpositions_clustered)){ 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}` let mapitemB_id = `${cid_eid_B.cid}___${cluster_index}`
// console.log(`mapitemA_id: ${mapitemA_id}, mapitemB_id: ${mapitemB_id}`); // 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 // 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 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 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){ for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){
if (entiteA.entite && entiteA.entite.id === cid_eid_A.eid && entiteA.display) { if (entiteA.entite && entiteA.entite.id === cid_eid_A.eid && entiteA.display) {
// console.log('entiteA', entiteA); // 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; break;
} }
} }
@ -1186,7 +1195,9 @@ export default {
for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){ for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){
if (entiteB.entite && entiteB.entite.id === cid_eid_B.eid && entiteB.display) { if (entiteB.entite && entiteB.entite.id === cid_eid_B.eid && entiteB.display) {
// console.log('entiteB', entiteB); // 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; break;
} }
} }

4
src/stores/concernements.js
View File

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