diff --git a/src/App.vue b/src/App.vue index 5435681..604905c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -60,6 +60,7 @@ export default { :key="index" :concernement="concernement" :is_opened="concernement.opened" + :active_revision="concernement.active_revision" /> diff --git a/src/api/gql/concernement.fragment.gql b/src/api/gql/concernement.fragment.gql index 0c338d9..dae2653 100644 --- a/src/api/gql/concernement.fragment.gql +++ b/src/api/gql/concernement.fragment.gql @@ -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 diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 9e66176..bb084c6 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -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}) diff --git a/src/components/contents/TerrainDeVie.vue b/src/components/contents/TerrainDeVie.vue index e24560c..7c9c999 100644 --- a/src/components/contents/TerrainDeVie.vue +++ b/src/components/contents/TerrainDeVie.vue @@ -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, diff --git a/src/stores/concernements.js b/src/stores/concernements.js index 8fbf100..ffbf2a6 100644 --- a/src/stores/concernements.js +++ b/src/stores/concernements.js @@ -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; } + } }) \ No newline at end of file