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

refactored mapitem (main and clones) generation for better superpositions opening

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-09-18 12:09:55 +02:00
parent c1c1eab95d
commit 36e88290e6
4 changed files with 120 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/App.vue
View File

@ -13,6 +13,13 @@ import MapConcernements from '@components/MapConcernements.vue'
import ConcernementMapItem from '@components/ConcernementMapItem.vue' import ConcernementMapItem from '@components/ConcernementMapItem.vue'
export default { export default {
data() {
return {
mapitems: [],
// not_cloned_mapitems: [],
// superposed_cloned_mapitems: []
}
},
created () { created () {
this.loadContentTypeDefinition(); this.loadContentTypeDefinition();
this.loadConcernements() this.loadConcernements()
@ -25,48 +32,92 @@ export default {
...mapState(UserStore,['isloggedin']), ...mapState(UserStore,['isloggedin']),
...mapState(ConcernementsStore,['map_mode', ...mapState(ConcernementsStore,['map_mode',
'concernements', 'concernements',
'concernements_loaded',
'concernementsByID', 'concernementsByID',
'allSuperpositions_byid', 'allSuperpositions_byid',
'opened_recit']), 'opened_recit']),
superposed_clones_concernements () { },
let clones = []; watch: {
// loop through all superposition grouped by concernements couples concernements_loaded:{
for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){ handler (n, o) {
// loop through all superpositions for one concernement couple and mark the first as NOT cloned and clone the others and mark them as cloned if(n && !o){
let i = 0; this.parseMapitems()
for(let [superposition_id, superposition] of Object.entries(superpositions)){
i++
if (i === 1) {
// first superposition of the couple is not cloned
this.allSuperpositions_byid[couple_id][superposition_id].cloned = false;
continue;
}
// following superpositions of the couple generate concernement map_item clones
// first concernement of the couple
clones.push({
concernement: this.concernementsByID[superposition[0].cid],
superposition_id: superposition_id
})
// second concernement of the couple
clones.push({
concernement: this.concernementsByID[superposition[1].cid],
superposition_id: superposition_id
})
this.allSuperpositions_byid[couple_id][superposition_id].cloned = true;
} }
} },
return clones; deep: true
} }
}, },
methods: { methods: {
...mapActions(ConcernementsStore,['loadConcernements']), ...mapActions(ConcernementsStore,['loadConcernements']),
...mapActions(ConcernementsStore,['loadContentTypeDefinition']), ...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
...mapActions(UserStore,['checkUser']), ...mapActions(UserStore,['checkUser']),
// parseSuperposedMapitemsClones () {
// let clones = [];
// // loop through all superposition grouped by concernements couples
// for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){
// // loop through all superpositions for one concernement couple and mark the first as NOT cloned and clone the others and mark them as cloned
// let i = 0;
// for(let [superposition_id, superposition] of Object.entries(superpositions)){
// i++
// if (i === 1) {
// // first superposition of the couple is not cloned
// this.allSuperpositions_byid[couple_id][superposition_id].cloned = false;
// continue;
// }
// // following superpositions of the couple generate concernement map_item clones
// // first concernement of the couple
// clones.push({
// concernement: this.concernementsByID[superposition[0].cid],
// superposition_id: superposition_id
// })
// // second concernement of the couple
// clones.push({
// concernement: this.concernementsByID[superposition[1].cid],
// superposition_id: superposition_id
// })
// mapitem_opened(concernement){ // this.allSuperpositions_byid[couple_id][superposition_id].cloned = true;
// return concernement.opened; // }
// } // }
// this.superposed_cloned_mapitems = clones;
// },
parseMapitems() {
let couple_ids = Object.keys(this.allSuperpositions_byid);
console.log('App couple_ids', couple_ids);
// loop through all concernement
for(let [concernement_id, concernement] of Object.entries(this.concernementsByID)){
// create the main mapitem object
let mapitem = {
id: concernement.id,
concernement: concernement,
superposition_ids: [],
clone: false,
}
// loop through superposistions couples
couple_ids.forEach(couple_id => {
let cids = couple_id.match(/(\d+)-(\d+)/i);
// console.log('cids', cids);
if (concernement.id === parseInt(cids[1]) || concernement.id === parseInt(cids[2])) {
let i = 0;
for(let [superposition_id, superposition] of Object.entries(this.allSuperpositions_byid[couple_id])){
i++;
if (i === 1) {
mapitem.superposition_ids.push(superposition_id)
}else{
this.mapitems.push({
id: `${concernement.id}___${superposition_id}`,
concernement: concernement,
superposition_ids: [superposition_id],
clone: true
});
}
}
}
});
this.mapitems.push(mapitem)
}
console.log('App mapitems', this.mapitems);
}
}, },
components: { components: {
MapConcernements, MapConcernements,
@ -96,25 +147,22 @@ export default {
<div id="main-content"> <div id="main-content">
<MapConcernements> <MapConcernements>
<template v-for="(concernement,index) in concernements"> <template v-for="(mapitem,index) in mapitems">
<ConcernementMapItem <ConcernementMapItem
v-if="concernement.visible" v-if="mapitem.concernement.visible && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone)"
:key="index" :key="mapitem.id"
:concernement="concernement" :mapitem="mapitem"
:active_revision="concernement.active_revision"
/> />
</template> </template>
<template v-if="map_mode === 'superposition'"> <!-- <template v-if="map_mode === 'superposition'">
<template v-for="(superposition,index) in superposed_clones_concernements"> <template v-for="(mapitem,index) in superposed_cloned_mapitems">
<ConcernementMapItem <ConcernementMapItem
v-if="superposition.concernement.visible" v-if="mapitem.concernement.visible"
:key="index" :key="mapitem.id"
:concernement="superposition.concernement" :mapitem="mapitem"
:active_revision="superposition.concernement.active_revision"
:superposition_id="superposition.superposition_id"
/> />
</template> </template>
</template> </template> -->
</MapConcernements> </MapConcernements>
<div id="content" :class="{'recit-opened':opened_recit}"> <div id="content" :class="{'recit-opened':opened_recit}">
<RouterView /> <RouterView />

58
src/components/ConcernementMapItem.vue
View File

@ -19,6 +19,9 @@ export default {
data() { data() {
return { return {
id: null, id: null,
cid: null,
concernement: null,
active_revision: null,
entities: null, entities: null,
superposedEntitesIDsList: [], superposedEntitesIDsList: [],
canvas: null, canvas: null,
@ -47,7 +50,7 @@ export default {
paper_groups: {} paper_groups: {}
} }
}, },
props: ['concernement', 'active_revision', 'superposition_id'], props: ['mapitem'],
computed: { computed: {
...mapState(ConcernementsStore,['map_mode', ...mapState(ConcernementsStore,['map_mode',
'concernementsByID', 'concernementsByID',
@ -61,8 +64,13 @@ export default {
'paper_symbol_definitions']) 'paper_symbol_definitions'])
}, },
created () { created () {
console.log('ConcernementMapItem', this.mapitem);
// this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
this.id = this.mapitem.id;
this.concernement = this.mapitem.concernement;
this.cid = this.concernement.id; this.cid = this.concernement.id;
this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid; this.active_revision = this.concernement.active_revision;
// console.log(`ConcernementsMapItem ${this.id} created`); // console.log(`ConcernementsMapItem ${this.id} created`);
// this.entites = this.concernement.entites // this.entites = this.concernement.entites
this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites; this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
@ -103,7 +111,7 @@ export default {
// beforeUnmount () { // beforeUnmount () {
unmounted () { unmounted () {
// console.log(`mapitem ${this.id} unmounted`); // console.log(`mapitem ${this.id} unmounted`);
if(this.superposition_id) { if(this.mapitem.clone) {
// console.log(`this.paper_main_object ${this.paper_main_object.id}`, this.paper_main_object); // console.log(`this.paper_main_object ${this.paper_main_object.id}`, this.paper_main_object);
paper.project.getItem({id:this.paper_main_object.id}).remove(); paper.project.getItem({id:this.paper_main_object.id}).remove();
}; };
@ -185,7 +193,9 @@ export default {
active_revision: { active_revision: {
handler (n, o) { handler (n, o) {
console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`); console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
this.resetPaperActiveRevision(); if(o & n){ // do not trigger on first variable filling (if o is null)
this.resetPaperActiveRevision();
}
}, },
deep: true deep: true
} }
@ -372,31 +382,12 @@ export default {
return num return num
}, },
getSuperposedEntitesIDsList(){ getSuperposedEntitesIDsList(){
if (this.concernement.superpositions) {
// find the right entite(s) to display on this original map_item vs cloned map item // loop through all concernement superpositions couples of this concernement
// (clones are needed for multiple superpositions by concernement couples)
// let eids = [];
if (this.superposition_id) {
// console.log('has superposition_id', this.superposition_id);
// if we have a superposition_id prop then we are on a temporary concernement map_item clone
// find the right entite id from the superposition_id prop
let ids = this.superposition_id.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
// console.log('ids', ids);
switch (this.cid) { // get the right eid regarding the cid
case parseInt(ids[1]):
this.superposedEntitesIDsList.push(parseInt(ids[2]));
break;
case parseInt(ids[3]):
this.superposedEntitesIDsList.push(parseInt(ids[4]));
break;
}
} else if (this.concernement.superpositions) {
// console.log('DONOT has superposition_id');
// if we do not have a superposition_id prop then we are on the regular concernement map_item
// loop through all concernement superpositions and select only thoose which are not part of a temporary cloned
for(let [couple_id, superpositions] of Object.entries(this.concernement.superpositions)){ for(let [couple_id, superpositions] of Object.entries(this.concernement.superpositions)){
// loop through all superpositions of each couple
for(let [superposition_id, superposition] of Object.entries(superpositions)){ for(let [superposition_id, superposition] of Object.entries(superpositions)){
if (!superposition.cloned) { // not part of a clone if (this.mapitem.superposition_ids.indexOf(superposition_id) >= 0) {
switch (this.cid) { // get the right eid regarding the cid switch (this.cid) { // get the right eid regarding the cid
case superposition[0].cid: case superposition[0].cid:
this.superposedEntitesIDsList.push(superposition[0].eid); this.superposedEntitesIDsList.push(superposition[0].eid);
@ -409,7 +400,7 @@ export default {
} }
} }
} }
// console.log('eids', eids); console.log('superposedEntitesIDsList', this.superposedEntitesIDsList);
}, },
// MATTER BODY // MATTER BODY
@ -514,7 +505,7 @@ export default {
pivot: new paper.Point(this.pos), pivot: new paper.Point(this.pos),
name: `main_${this.id}`, name: `main_${this.id}`,
cid: this.cid, cid: this.cid,
superposition_id: this.superposition_id superposition_id: this.mapitem.superposition_ids[0] // TODO what to do with multiples superpositions ids
}); });
// the sub items for one concernement // the sub items for one concernement
@ -667,7 +658,7 @@ export default {
const contrs = new paper.Path({ const contrs = new paper.Path({
name: 'contours', name: 'contours',
segments: segments, segments: segments,
fillColor: 'rgba(255,255,255,0.4)', // this.superposition_id ? 'rgba(255,0,0,0.4)' : 'rgba(255,255,255,0.4)', fillColor: 'rgba(255,255,255,0.4)',
// selected: true, // selected: true,
strokeColor: '#fff', strokeColor: '#fff',
strokeWidth: 1, strokeWidth: 1,
@ -1171,9 +1162,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.superposition_id ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)"; this.paper_main_object.children['contours'].fillColor = 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.superposition_id ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)"; this.paper_main_object.children['contours'].fillColor = 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;
@ -1398,7 +1389,8 @@ export default {
params: {cid: this.cid}, params: {cid: this.cid},
query: { query: {
mapitemid: this.id, mapitemid: this.id,
superposition_id: this.superposition_id // TODO when mapitem not a clone, there is no superposition_id prop
superposition_id: this.mapitem.superposition_ids[0]
}, },
hash: `#${this.map_mode}` hash: `#${this.map_mode}`
}); });

3
src/components/MapConcernements.vue
View File

@ -1159,8 +1159,7 @@ export default {
} }
} }
} }
} }
}, },
clearSuperpositionsMatterConstraints(){ clearSuperpositionsMatterConstraints(){

4
src/views/Concernement.vue
View File

@ -61,7 +61,7 @@ export default {
if (this.superposition) { if (this.superposition) {
let r = null; let r = null;
this.superposition.forEach(s => { this.superposition.forEach(s => {
if(s.cid !== this.opened_concernement.id){ if(this.opened_concernement && s.cid !== this.opened_concernement.id){
r = { r = {
cid: s.cid, cid: s.cid,
eid: s.eid eid: s.eid
@ -156,7 +156,7 @@ export default {
<PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="cid"/> <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="cid"/>
<Doleancer v-if="map_mode === 'doleancer'" :id="cid"/> <Doleancer v-if="map_mode === 'doleancer'" :id="cid"/>
</section> </section>
<section v-if="map_mode === 'superposition' && superposition" class="concernement clone"> <section v-if="map_mode === 'superposition' && superposition && superposed_cid_eid" class="concernement clone">
<TerrainDeVie :cid="superposed_cid_eid.cid" :eid="superposed_cid_eid.eid" /> <TerrainDeVie :cid="superposed_cid_eid.cid" :eid="superposed_cid_eid.eid" />
</section> </section>
<nav class="close-concernement" @click="closeConcernement"> <nav class="close-concernement" @click="closeConcernement">