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
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"
:concernement="concernement"
:is_opened="concernement.opened"
:active_revision="concernement.active_revision"
/>
</template>
</MapConcernements>

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

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

151
src/components/ConcernementMapItem.vue
View File

@@ -62,7 +62,7 @@ export default {
paper_groups: {}
}
},
props: ['concernement', 'is_opened'],
props: ['concernement', 'is_opened', 'active_revision'],
computed: {
...mapState(ConcernementsStore,['map_mode',
'concernementsByID',
@@ -76,8 +76,9 @@ export default {
created () {
// console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
this.id = this.concernement.id
this.entites = this.concernement.entites
this.entites_byid = this.concernement.entites_byid
// this.entites = this.concernement.entites
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
if(this.entites.length < 3){
@@ -89,9 +90,9 @@ export default {
// define the ray regarding the width and height of screen
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.getJarvisEnvelopeConvexe()
@@ -166,6 +167,13 @@ export default {
}
},
deep: true
},
active_revision: {
handler (n, o) {
console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
this.resetPaperActiveRevision();
},
deep: true
}
},
methods: {
@@ -178,48 +186,50 @@ export default {
// getResponsiveRay(){
// 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
for (let i = 0; i < this.entites.length; i++) {
let entite = this.entites[i]
// console.log('entite', entite);
this.entites[i].display = {
alpha: null,
ray: null
}
// RAYON
// https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
// slope = (output_end - output_start) / (input_end - input_start)
// output = output_start + slope * (input - input_start)
// from range 0 -> 100 to range 0 -> this.ray
let init_max = 100
let slope = this.ray / init_max
this.entites[i].display.ray = slope * (init_max - entite.prise);
// if (this.concernement.id === 28) {
// console.log(`entity prise: ${entite.prise} | ray: ${this.entites[i].display.ray}`);
// }
for (let r = 0; r < this.concernement.revisions.length; r++) { // loop through all revisions
for (let i = 0; i < this.concernement.revisions[r].entites.length; i++) { // loop through all entite for each revision
let entite = this.concernement.revisions[r].entites[i]
// console.log('entite', entite);
entite.display = {
alpha: null,
ray: null
}
// RAYON
// https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
// slope = (output_end - output_start) / (input_end - input_start)
// output = output_start + slope * (input - input_start)
// from range 0 -> 100 to range 0 -> this.ray
let init_max = 100
let slope = this.ray / init_max
entite.display.ray = slope * (init_max - entite.prise);
// if (this.concernement.id === 28) {
// console.log(`entity prise: ${entite.prise} | ray: ${entite.display.ray}`);
// }
// ANGLE
// -90 <= mm <= 90
if (entite.actuelfuture) {
// future en haut : 180 <= a <= 360
// from -90 -> 90 to range 180 -> 360
this.entites[i].display.alpha = entite.menacemaintien + 270
} else {
// actuel: en bas : O <= a <= 180
// from -90 -> 90 to range 180 -> 0
this.entites[i].display.alpha = -1 * entite.menacemaintien + 90
}
// ANGLE
// -90 <= mm <= 90
if (entite.actuelfuture) {
// future en haut : 180 <= a <= 360
// from -90 -> 90 to range 180 -> 360
entite.display.alpha = entite.menacemaintien + 270
} else {
// actuel: en bas : O <= a <= 180
// from -90 -> 90 to range 180 -> 0
entite.display.alpha = -1 * entite.menacemaintien + 90
}
// POSITION X Y (par rapport au centre du concernement)
this.entites[i].display.pos = {
x: this.entites[i].display.ray * Math.cos(this.entites[i].display.alpha * (Math.PI/180)),
y: this.entites[i].display.ray * Math.sin(this.entites[i].display.alpha * (Math.PI/180))
}
if (entite.entite) {
this.entites_byid[entite.entite.id].display = this.entites[i].display;
// POSITION X Y (par rapport au centre du concernement)
entite.display.pos = {
x: entite.display.ray * Math.cos(entite.display.alpha * (Math.PI/180)),
y: entite.display.ray * Math.sin(entite.display.alpha * (Math.PI/180))
}
// if (entite.entite) {
// this.entites_byid[entite.entite.id].display = entite.display;
// }
}
}
},
@@ -258,12 +268,14 @@ export default {
// console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
},
getJarvisEnvelopeConvexe(){
this.salientPoints = [];
let entites = this.concernement.revisions_byid[this.concernement.active_revision].entites;
// console.log(`getJarvisEnvelopeConvexe ${this.id}`, this.entites.length);
// https://www.geeksforgeeks.org/convex-hull-using-jarvis-algorithm-or-wrapping/
// find the most left point
let l, min_x = null;
for (let i = 0; i < this.entites.length; i++) {
let entite = this.entites[i];
for (let i = 0; i < entites.length; i++) {
let entite = entites[i];
let x = entite.display.ray * Math.cos(entite.display.alpha * (Math.PI/180));
if(!min_x || min_x > x){
l = i;
@@ -277,7 +289,7 @@ export default {
do {
// console.log(`do while ${this.id}`, p);
// Add current point to result
let entite = this.entites[p];
let entite = entites[p];
let farest = {
alpha: entite.display.alpha,
ray: entite.display.ray,
@@ -295,14 +307,14 @@ export default {
// track of last visited most clockwise
// point in q. If any point 'i' is more
// clockwise than q, then update q.
q = (p + 1) % this.entites.length;
for (let i = 0; i < this.entites.length; i++) {
let p_x = (this.entites[p].display.ray) * Math.cos(this.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 i_x = (this.entites[i].display.ray) * Math.cos(this.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 q_x = (this.entites[q].display.ray) * Math.cos(this.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));
q = (p + 1) % entites.length;
for (let i = 0; i < entites.length; i++) {
let p_x = (entites[p].display.ray) * Math.cos(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 = (entites[i].display.ray) * Math.cos(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 = (entites[q].display.ray) * Math.cos(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);
@@ -483,6 +495,19 @@ export default {
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(){
let clearable_children = ['boussole_bg', 'entites',
'puissanceagir_bg','puissanceagir_besoins',
@@ -590,16 +615,18 @@ export default {
pivot: new paper.Point(this.pos),
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
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]);
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.fillColor = '#000';
instance.item_id = this.entites[i].entite ? this.entites[i].entite.id : null;
instance.item_type = this.entites[i].entite ? 'entite' : 'hidden_entite';
instance.item_id = entite.entite ? entite.entite.id : null;
instance.item_type = entite.entite ? 'entite' : 'hidden_entite';
instance.is_symbol_instance = true;
g.addChild(instance)
}
@@ -610,6 +637,7 @@ export default {
pivot: new paper.Point(this.pos),
name: 'agissantes'
});
for (let i = 0; i < this.entites.length; i++) {
if (this.entites[i].entite && this.entites[i].entite.agissante) {
let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']);
@@ -1244,6 +1272,7 @@ export default {
this.setHoverElmt(null);
}, 100);
},
// OPEN / CLOSE (with tween)
openClose(open) {
// console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
if (this.tween) {
@@ -1320,6 +1349,8 @@ export default {
Matter.Composite.remove(this.matterEngine.world, this.constraint);
}
this.concernement.active_revision = this.concernement.revision_id;
this.handlePaperVisibilityOnBeforeClose();
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);
// revisions
if (!this.opened_concernement.revisons) {
this.loadConcernementsRevisions(this.id).then(()=>{
console.log('Terrain de vie revisions loaded', this.opened_concernement.revisions);
if (this.opened_concernement.revisions.length > 1) {
let data=[];
this.opened_concernement.revisions.forEach(rev => {
let d = new Date(rev.changed);
data.push({
'id': rev.revision_id,
'changed': d.toLocaleDateString("fr-FR")
})
this.history_value = Math.max(this.history_value, parseInt(rev.revision_id));
});
this.history_slider_ops = {
dotSize:10,
data: data,
'data-value': 'id',
'data-label': 'changed',
adsorb: true,
'hide-label': true
}
} else {
this.history_slider_ops = null;
}
});
let data=[];
this.opened_concernement.revisions.forEach(rev => {
if (rev.entites.length > 3) {
let d = new Date(rev.changed);
data.push({
'id': rev.revision_id,
'changed': d.toLocaleDateString("fr-FR")
})
this.history_value = Math.max(this.history_value, parseInt(rev.revision_id));
}
});
if (data.length > 1) {
this.history_slider_ops = {
dotSize:10,
data: data,
'data-value': 'id',
'data-label': 'changed',
adsorb: true,
'hide-label': true
}
} 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: {
...mapActions(ConcernementsStore, ['loadConcernementsRevisions'])
...mapActions(ConcernementsStore, ['setActiveRevision']) // 'loadConcernementsRevisions'
},
components: {
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
concernement.has_puissancedagir = concernement.besoins.length ? true : false;
concernement.besoins.forEach(besoin => {
@@ -294,28 +301,9 @@ export const ConcernementsStore = defineStore({
console.log('concernement store setRecitPlayer', player);
this.recit_plyr_player = player;
},
loadConcernementsRevisions (cid) {
console.log('concernements store loadConcernementsRevisions');
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)
})
})
setActiveRevision (cid, rid) {
this.concernementsByID[cid].active_revision = rid;
}
}
})