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

history is working #2203

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-07-14 13:14:04 +02:00
parent 0a5f1adf90
commit 6b2146ea8f
5 changed files with 148 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -60,6 +60,7 @@ export default {
:key="index" :key="index"
:concernement="concernement" :concernement="concernement"
:is_opened="concernement.opened" :is_opened="concernement.opened"
:active_revision="concernement.active_revision"
/> />
</template> </template>
</MapConcernements> </MapConcernements>

15
src/api/gql/concernement.fragment.gql
View File

@ -27,9 +27,6 @@ fragment ConcernementFields on Concernement {
name name
} }
entites { entites {
menacemaintien
prise
actuelfuture
entite { entite {
title title
id id
@ -44,6 +41,18 @@ fragment ConcernementFields on Concernement {
} }
} }
} }
revisions {
revision_id
changed
entites {
menacemaintien
prise
actuelfuture
entite {
id
}
}
}
besoins { besoins {
author author
description description

151
src/components/ConcernementMapItem.vue
View File

@ -62,7 +62,7 @@ export default {
paper_groups: {} paper_groups: {}
} }
}, },
props: ['concernement', 'is_opened'], props: ['concernement', 'is_opened', 'active_revision'],
computed: { computed: {
...mapState(ConcernementsStore,['map_mode', ...mapState(ConcernementsStore,['map_mode',
'concernementsByID', 'concernementsByID',
@ -76,8 +76,9 @@ export default {
created () { created () {
// console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine); // console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
this.id = this.concernement.id this.id = this.concernement.id
this.entites = this.concernement.entites // this.entites = this.concernement.entites
this.entites_byid = this.concernement.entites_byid this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
// this.entites_byid = this.concernement.entites_byid
// disable concernement if less than 3 entite // disable concernement if less than 3 entite
if(this.entites.length < 3){ if(this.entites.length < 3){
@ -89,9 +90,9 @@ export default {
// define the ray regarding the width and height of screen // define the ray regarding the width and height of screen
this.ray = this.map_item_ray; this.ray = this.map_item_ray;
console.log(`this.ray: ${this.ray}`); // console.log(`this.ray: ${this.ray}`);
// //
this.parsePoints() this.parseEntityPointsValues()
// this.getSalientPoints() // this.getSalientPoints()
this.getJarvisEnvelopeConvexe() this.getJarvisEnvelopeConvexe()
@ -166,6 +167,13 @@ export default {
} }
}, },
deep: true deep: true
},
active_revision: {
handler (n, o) {
console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
this.resetPaperActiveRevision();
},
deep: true
} }
}, },
methods: { methods: {
@ -178,48 +186,50 @@ export default {
// getResponsiveRay(){ // getResponsiveRay(){
// return Math.min(this.canvas.width, this.canvas.height) * 0.08; // return Math.min(this.canvas.width, this.canvas.height) * 0.08;
// }, // },
parsePoints (){ parseEntityPointsValues (){
// converts data (menace/maintien, actuel/future, prise) into atcual position x,y // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
for (let i = 0; i < this.entites.length; i++) { for (let r = 0; r < this.concernement.revisions.length; r++) { // loop through all revisions
let entite = this.entites[i] for (let i = 0; i < this.concernement.revisions[r].entites.length; i++) { // loop through all entite for each revision
// console.log('entite', entite); let entite = this.concernement.revisions[r].entites[i]
// console.log('entite', entite);
this.entites[i].display = {
alpha: null, entite.display = {
ray: null alpha: null,
} ray: null
// RAYON }
// https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another // RAYON
// slope = (output_end - output_start) / (input_end - input_start) // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
// output = output_start + slope * (input - input_start) // slope = (output_end - output_start) / (input_end - input_start)
// from range 0 -> 100 to range 0 -> this.ray // output = output_start + slope * (input - input_start)
let init_max = 100 // from range 0 -> 100 to range 0 -> this.ray
let slope = this.ray / init_max let init_max = 100
this.entites[i].display.ray = slope * (init_max - entite.prise); let slope = this.ray / init_max
// if (this.concernement.id === 28) { entite.display.ray = slope * (init_max - entite.prise);
// console.log(`entity prise: ${entite.prise} | ray: ${this.entites[i].display.ray}`); // if (this.concernement.id === 28) {
// } // console.log(`entity prise: ${entite.prise} | ray: ${entite.display.ray}`);
// }
// ANGLE // ANGLE
// -90 <= mm <= 90 // -90 <= mm <= 90
if (entite.actuelfuture) { if (entite.actuelfuture) {
// future en haut : 180 <= a <= 360 // future en haut : 180 <= a <= 360
// from -90 -> 90 to range 180 -> 360 // from -90 -> 90 to range 180 -> 360
this.entites[i].display.alpha = entite.menacemaintien + 270 entite.display.alpha = entite.menacemaintien + 270
} else { } else {
// actuel: en bas : O <= a <= 180 // actuel: en bas : O <= a <= 180
// from -90 -> 90 to range 180 -> 0 // from -90 -> 90 to range 180 -> 0
this.entites[i].display.alpha = -1 * entite.menacemaintien + 90 entite.display.alpha = -1 * entite.menacemaintien + 90
} }
// POSITION X Y (par rapport au centre du concernement) // POSITION X Y (par rapport au centre du concernement)
this.entites[i].display.pos = { entite.display.pos = {
x: this.entites[i].display.ray * Math.cos(this.entites[i].display.alpha * (Math.PI/180)), x: entite.display.ray * Math.cos(entite.display.alpha * (Math.PI/180)),
y: this.entites[i].display.ray * Math.sin(this.entites[i].display.alpha * (Math.PI/180)) y: entite.display.ray * Math.sin(entite.display.alpha * (Math.PI/180))
} }
if (entite.entite) { // if (entite.entite) {
this.entites_byid[entite.entite.id].display = this.entites[i].display; // this.entites_byid[entite.entite.id].display = entite.display;
// }
} }
} }
}, },
@ -258,12 +268,14 @@ export default {
// console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints); // console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
}, },
getJarvisEnvelopeConvexe(){ getJarvisEnvelopeConvexe(){
this.salientPoints = [];
let entites = this.concernement.revisions_byid[this.concernement.active_revision].entites;
// console.log(`getJarvisEnvelopeConvexe ${this.id}`, this.entites.length); // console.log(`getJarvisEnvelopeConvexe ${this.id}`, this.entites.length);
// https://www.geeksforgeeks.org/convex-hull-using-jarvis-algorithm-or-wrapping/ // https://www.geeksforgeeks.org/convex-hull-using-jarvis-algorithm-or-wrapping/
// find the most left point // find the most left point
let l, min_x = null; let l, min_x = null;
for (let i = 0; i < this.entites.length; i++) { for (let i = 0; i < entites.length; i++) {
let entite = this.entites[i]; let entite = entites[i];
let x = entite.display.ray * Math.cos(entite.display.alpha * (Math.PI/180)); let x = entite.display.ray * Math.cos(entite.display.alpha * (Math.PI/180));
if(!min_x || min_x > x){ if(!min_x || min_x > x){
l = i; l = i;
@ -277,7 +289,7 @@ export default {
do { do {
// console.log(`do while ${this.id}`, p); // console.log(`do while ${this.id}`, p);
// Add current point to result // Add current point to result
let entite = this.entites[p]; let entite = entites[p];
let farest = { let farest = {
alpha: entite.display.alpha, alpha: entite.display.alpha,
ray: entite.display.ray, ray: entite.display.ray,
@ -295,14 +307,14 @@ export default {
// track of last visited most clockwise // track of last visited most clockwise
// point in q. If any point 'i' is more // point in q. If any point 'i' is more
// clockwise than q, then update q. // clockwise than q, then update q.
q = (p + 1) % this.entites.length; q = (p + 1) % entites.length;
for (let i = 0; i < this.entites.length; i++) { for (let i = 0; i < entites.length; i++) {
let p_x = (this.entites[p].display.ray) * Math.cos(this.entites[p].display.alpha * (Math.PI/180)); let p_x = (entites[p].display.ray) * Math.cos(entites[p].display.alpha * (Math.PI/180));
let p_y = (this.entites[p].display.ray) * Math.sin(this.entites[p].display.alpha * (Math.PI/180)); let p_y = (entites[p].display.ray) * Math.sin(entites[p].display.alpha * (Math.PI/180));
let i_x = (this.entites[i].display.ray) * Math.cos(this.entites[i].display.alpha * (Math.PI/180)); let i_x = (entites[i].display.ray) * Math.cos(entites[i].display.alpha * (Math.PI/180));
let i_y = (this.entites[i].display.ray) * Math.sin(this.entites[i].display.alpha * (Math.PI/180)); let i_y = (entites[i].display.ray) * Math.sin(entites[i].display.alpha * (Math.PI/180));
let q_x = (this.entites[q].display.ray) * Math.cos(this.entites[q].display.alpha * (Math.PI/180)); let q_x = (entites[q].display.ray) * Math.cos(entites[q].display.alpha * (Math.PI/180));
let q_y = (this.entites[q].display.ray) * Math.sin(this.entites[q].display.alpha * (Math.PI/180)); let q_y = (entites[q].display.ray) * Math.sin(entites[q].display.alpha * (Math.PI/180));
let val = (i_y - p_y) * (q_x - i_x) - (i_x - p_x) * (q_y - i_y); let val = (i_y - p_y) * (q_x - i_x) - (i_x - p_x) * (q_y - i_y);
@ -483,6 +495,19 @@ export default {
break; break;
} }
}, },
resetPaperActiveRevision(){
this.getJarvisEnvelopeConvexe();
// remove contours if already exists
if (this.paper_main_object.children.contours) {
this.paper_main_object.children.contours.remove();
}
this.paper_main_object.addChild(this.setPaperContour());
// remove entites if already exists
if (this.paper_main_object.children.entites) {
this.paper_main_object.children.entites.remove();
}
this.paper_main_object.addChild(this.setPaperEntites());
},
clearPaperContents(){ clearPaperContents(){
let clearable_children = ['boussole_bg', 'entites', let clearable_children = ['boussole_bg', 'entites',
'puissanceagir_bg','puissanceagir_besoins', 'puissanceagir_bg','puissanceagir_besoins',
@ -590,16 +615,18 @@ export default {
pivot: new paper.Point(this.pos), pivot: new paper.Point(this.pos),
name: 'entites' name: 'entites'
}); });
for (let i = 0; i < this.entites.length; i++) { // for (let i = 0; i < this.entites.length; i++) {
for (let i = 0; i < this.concernement.revisions_byid[this.concernement.active_revision].entites.length; i++) {
let entite = this.concernement.revisions_byid[this.concernement.active_revision].entites[i];
// use paper symbol // use paper symbol
let symbol_name = this.entites[i].entite ? 'entite' : 'entite_hidden'; let symbol_name = entite.entite ? 'entite' : 'entite_hidden';
let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]); let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
instance.name = 'entite'; instance.name = 'entite';
instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x * this.scale, this.pos.y + this.entites[i].display.pos.y * this.scale]); instance.position = new paper.Point([this.pos.x + entite.display.pos.x * this.scale, this.pos.y + entite.display.pos.y * this.scale]);
instance.scale(this.scale); instance.scale(this.scale);
instance.fillColor = '#000'; instance.fillColor = '#000';
instance.item_id = this.entites[i].entite ? this.entites[i].entite.id : null; instance.item_id = entite.entite ? entite.entite.id : null;
instance.item_type = this.entites[i].entite ? 'entite' : 'hidden_entite'; instance.item_type = entite.entite ? 'entite' : 'hidden_entite';
instance.is_symbol_instance = true; instance.is_symbol_instance = true;
g.addChild(instance) g.addChild(instance)
} }
@ -610,6 +637,7 @@ export default {
pivot: new paper.Point(this.pos), pivot: new paper.Point(this.pos),
name: 'agissantes' name: 'agissantes'
}); });
for (let i = 0; i < this.entites.length; i++) { for (let i = 0; i < this.entites.length; i++) {
if (this.entites[i].entite && this.entites[i].entite.agissante) { if (this.entites[i].entite && this.entites[i].entite.agissante) {
let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']); let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']);
@ -1244,6 +1272,7 @@ export default {
this.setHoverElmt(null); this.setHoverElmt(null);
}, 100); }, 100);
}, },
// OPEN / CLOSE (with tween)
openClose(open) { openClose(open) {
// console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`); // console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
if (this.tween) { if (this.tween) {
@ -1320,6 +1349,8 @@ export default {
Matter.Composite.remove(this.matterEngine.world, this.constraint); Matter.Composite.remove(this.matterEngine.world, this.constraint);
} }
this.concernement.active_revision = this.concernement.revision_id;
this.handlePaperVisibilityOnBeforeClose(); this.handlePaperVisibilityOnBeforeClose();
this.tween = new Tween.Tween({s: this.scale, o: 1}) this.tween = new Tween.Tween({s: this.scale, o: 1})

60
src/components/contents/TerrainDeVie.vue
View File

@ -43,35 +43,43 @@ export default {
console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement); console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
// revisions // revisions
if (!this.opened_concernement.revisons) {
this.loadConcernementsRevisions(this.id).then(()=>{ let data=[];
console.log('Terrain de vie revisions loaded', this.opened_concernement.revisions); this.opened_concernement.revisions.forEach(rev => {
if (this.opened_concernement.revisions.length > 1) { if (rev.entites.length > 3) {
let data=[]; let d = new Date(rev.changed);
this.opened_concernement.revisions.forEach(rev => { data.push({
let d = new Date(rev.changed); 'id': rev.revision_id,
data.push({ 'changed': d.toLocaleDateString("fr-FR")
'id': rev.revision_id, })
'changed': d.toLocaleDateString("fr-FR") this.history_value = Math.max(this.history_value, parseInt(rev.revision_id));
}) }
this.history_value = Math.max(this.history_value, parseInt(rev.revision_id)); });
});
this.history_slider_ops = { if (data.length > 1) {
dotSize:10, this.history_slider_ops = {
data: data, dotSize:10,
'data-value': 'id', data: data,
'data-label': 'changed', 'data-value': 'id',
adsorb: true, 'data-label': 'changed',
'hide-label': true adsorb: true,
} 'hide-label': true
} else { }
this.history_slider_ops = null; } else {
} this.history_slider_ops = null;
}); }
},
watch: {
history_value: {
handler (n, o) {
console.log(`TerrainDeVie watch history_value o:${o}, n:${n}`);
this.setActiveRevision(this.opened_concernement.id, n);
},
deep: true
} }
}, },
methods: { methods: {
...mapActions(ConcernementsStore, ['loadConcernementsRevisions']) ...mapActions(ConcernementsStore, ['setActiveRevision']) // 'loadConcernementsRevisions'
}, },
components: { components: {
CartoucheLayout, CartoucheLayout,

32
src/stores/concernements.js
View File

@ -81,6 +81,13 @@ export const ConcernementsStore = defineStore({
} }
}); });
// revisions
concernement.active_revision = concernement.revision_id;
concernement.revisions_byid = {};
concernement.revisions.forEach(rev => {
concernement.revisions_byid[rev.revision_id] = rev;
});
// puissance d'agir // puissance d'agir
concernement.has_puissancedagir = concernement.besoins.length ? true : false; concernement.has_puissancedagir = concernement.besoins.length ? true : false;
concernement.besoins.forEach(besoin => { concernement.besoins.forEach(besoin => {
@ -294,28 +301,9 @@ export const ConcernementsStore = defineStore({
console.log('concernement store setRecitPlayer', player); console.log('concernement store setRecitPlayer', player);
this.recit_plyr_player = player; this.recit_plyr_player = player;
}, },
loadConcernementsRevisions (cid) { setActiveRevision (cid, rid) {
console.log('concernements store loadConcernementsRevisions'); this.concernementsByID[cid].active_revision = rid;
return new Promise((resolve, reject) => {
const ast = gql`{
concernementrevisions(id: ${cid}) {
...ConcernementFields
}
}
${ConcernementFields}
`
// console.log('ast', ast);
GQL.post('', { query: print(ast) })
.then(({ data : { data : { concernementrevisions } } }) => {
console.log('concernementsrevisions all loaded', concernementrevisions);
this.concernementsByID[cid].revisions = concernementrevisions;
resolve()
})
.catch(error => {
console.warn('Issue with loadConcernements revisions', error)
reject(error)
})
})
} }
} }
}) })