diff --git a/src/App.vue b/src/App.vue index 9903853..3ea1924 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,8 +13,8 @@ import ConcernementMapItem from '@components/ConcernementMapItem.vue' export default { created () { - this.loadConcernements() this.loadContentTypeDefinition(); + this.loadConcernements() }, mounted () { console.log('APP onMounted') diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index fb95fe1..45fc9eb 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -32,8 +32,9 @@ export default { inject: ['canvasMap', 'matterEngine'], data() { return { + id: null, entities: null, - // concernement: null, + opened_entite_id: null, canvas: null, ctx: null, pos : { @@ -45,9 +46,7 @@ export default { salientPoints: [], scale: 1, opacity: 0, - // anim: null, tween: null, - // matter body: null, constraint: null } @@ -57,18 +56,30 @@ export default { ...mapState(ConcernementsStore,['concernementsByID']) }, created () { - // console.log("ConcernementsMapItem concernement", this.canvasMap, this.matterEngine); + // 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 + + console.log(`ConcernementsMapItem ${this.concernement.id} $route`, this.id, this.$route); + if (this.$route.name === 'concernement' + && parseInt(this.$route.params.id) === this.id + && typeof this.$route.params.eid !== "undefined") { + console.log("we have an entity"); + this.opened_entite_id = parseInt(this.$route.params.eid); + } + this.parsePoints() this.getSalientPoints() - }, - mounted() { - console.log('concernementItem mounted', typeof this.canvasMap.canvas); if (this.canvasMap) { this.initCanvasMap() } + }, + // mounted() { + // console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas); + + // }, watch: { // canvasMap (n, o) { // console.log("concernementItem watch canvasMap", o, n); @@ -84,6 +95,7 @@ export default { }, opened: { handler (n, o) { + if(n){ // opened this.openClose(true); }else{ // closed @@ -95,7 +107,7 @@ export default { }, methods: { initCanvasMap (){ - // console.log('initCanvasMap'); + // console.log(`ConcernementsMapItem ${this.concernement.id} initCanvasMap`); // record canvas and ctx for rendering (drawing) this.canvas = this.canvasMap.canvas this.ctx = this.canvasMap.ctx @@ -258,6 +270,7 @@ export default { // } // }, openClose(open) { + // console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`); if (this.tween) { this.tween.stop(); } @@ -427,8 +440,13 @@ export default { if (this.body.parts[i].item_type === 'entite') { let part = this.body.parts[i]; this.ctx.beginPath(); - this.ctx.arc(this.body.parts[i].position.x, this.body.parts[i].position.y, 0.3*this.scale, 0, 2 * Math.PI, false); - this.ctx.fillStyle = "#000"; + this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false); + // console.log(part.id, this.opened_entite_id); + if (part.id === this.opened_entite_id) { + this.ctx.fillStyle = "#F00"; + } else { + this.ctx.fillStyle = "#000"; + } this.ctx.fill(); } } diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index b1b7768..3532ba7 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -107,7 +107,6 @@ export default { methods: { ...mapActions(ConcernementsStore,['openCloseConcernements']), ...mapActions(ConcernementsStore,['resetConcernementOpened']), - ...mapActions(ConcernementsStore,['openEntite']), animate () { this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height) // this.canvasMap.canvas.dispatchEvent(this.animateEvent) @@ -179,33 +178,36 @@ export default { // no concernement is yet opened, we deal concernements if (!this.opened) { - let clickedIDs = []; - query.forEach(body => { - // console.log('body id:', body.id); - clickedIDs.push(body.id); - }); - // open/close all concernements - this.openCloseConcernements(clickedIDs) - - // if no concernement opened retrun to home (closing concernement contents opened) - // and reset the opened state in concernement store - if (!clickedIDs.length) { - this.resetConcernementOpened(); - this.$router.push({name: 'home'}); + if (query.length) { + // open/close all concernements + this.openCloseConcernements(query[0].id) + // push route + this.$router.push({name: 'concernement', params: {id: query[0].id}}); } } // concernement is already opened, we deal with entités if (this.opened) { - let clickedBodies = []; - query.forEach(body => { - // console.log('body id:', body.id); - if (body.item_type === "entite") { - clickedBodies.push(body); + if (query.length) { + let clickedEntityBodies = []; + query.forEach(body => { + // console.log('body id:', body.id); + if (body.item_type === "entite") { + clickedEntityBodies.push(body); + } + }); + if (clickedEntityBodies.length) { + // we have clicked on an entite + this.$router.push({name: 'concernement', params: {id: this.opened.id, eid: clickedEntityBodies[0].id}}); + } else { + // otherwise we close the entite and come back to the concernement + this.$router.push({name: 'concernement', params: {id: this.opened.id}}); } - }); - if (clickedBodies.length) { - this.openEntite(clickedBodies[0].cid, clickedBodies[0].id) + } else { + // if no concernement opened retrun to home (closing concernement contents opened) + // and reset the opened state in concernement store + this.resetConcernementOpened(); + this.$router.push({name: 'home'}); } } } diff --git a/src/stores/concernements.js b/src/stores/concernements.js index 3b0b9c6..31d510d 100644 --- a/src/stores/concernements.js +++ b/src/stores/concernements.js @@ -20,7 +20,8 @@ export const ConcernementsStore = defineStore({ concernementsByID: {}, allEntitesById: {}, opened: false, - ct_concernement: {} + ct_concernement: {}, + concernements_loaded: false }), getters: { @@ -52,6 +53,7 @@ export const ConcernementsStore = defineStore({ this.concernements.push(concernement); this.concernementsByID[concernement.id] = concernement; }); + this.concernements_loaded = true; }) .catch(error => { console.warn('Issue with loadConcernements', error) @@ -76,29 +78,29 @@ export const ConcernementsStore = defineStore({ } GQL.post('', body) .then(({ data: { data: { entitydef }}}) => { - console.log('loadContentTypeDefinition entitydef', entitydef); + // console.log('loadContentTypeDefinition entitydef', entitydef); entitydef.fields.forEach(field => { this.ct_concernement[field.field_name] = field; }); + console.log('loadContentTypeDefinition entitydef', this.ct_concernement); + }) }, - openCloseConcernements (ids) { + openCloseConcernements (id) { + console.log(`openCloseConcernements id: ${id}`); var state; this.concernements.forEach((c, i) => { - state = ids.indexOf(c.id) !== -1; + state = id == c.id; this.concernements[i].opened = this.concernementsByID[c.id].opened = state; if (state) { this.opened = c; - this.router.push({name: 'concernement', params: {id: c.id}}); } }); }, resetConcernementOpened () { this.opened = null; - }, - openEntite (cid, id) { - this.router.push({name: 'concernement', params: {id: cid, eid: id}}); + this.openCloseConcernements(); } } }) \ No newline at end of file diff --git a/src/views/Concernement.vue b/src/views/Concernement.vue index 7932cda..d6bb02b 100644 --- a/src/views/Concernement.vue +++ b/src/views/Concernement.vue @@ -12,27 +12,47 @@ export default { props: ['id', 'eid'], data(){ return { - entite: null + entite: null, } }, computed: { ...mapState(ConcernementsStore,['opened']), + ...mapState(ConcernementsStore,['concernements_loaded']), ...mapState(ConcernementsStore,['ct_concernement']) }, created () { - // console.log("Concernement view created, id", this.opened.id); - // this.loadStatics() + console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened:${this.opened}`); + + // when we arrived directly to the entite, load the entite + if (!this.entity && this.eid) { + this.loadEntite(); + } }, watch: { + concernements_loaded: { + handler (n, o){ + console.log(`watch concernements_loaded n: ${n}, opened:${this.opened}, id:${this.id}`); + // when we arrived directly to the url then all concernement are loaded: do open the concernement + if (!this.opened) { + this.openCloseConcernements(this.id) + } + + }, + deep: true + }, eid: { handler (n, o){ - this.loadEntite() + if(n){ + this.loadEntite() + }else{ + this.entite = false; + } }, deep: true }, }, methods: { - // ...mapActions(StaticsStore,['loadStatics']) + ...mapActions(ConcernementsStore,['openCloseConcernements']), loadEntite(){ const ast = gql`{ entite (id: ${this.eid}) { @@ -59,18 +79,18 @@ export default {