From 5836d39a38ad576d93688f353bdf436f27b96432 Mon Sep 17 00:00:00 2001 From: bach Date: Tue, 12 Sep 2023 12:20:35 +0200 Subject: [PATCH] map_popup for superpositions OK --- src/assets/main.scss | 12 ++- src/components/ConcernementMapItem.vue | 111 +++++++++++++----------- src/components/ConcernementMapPopup.vue | 102 ++++++++++++---------- src/components/MapConcernements.vue | 3 - 4 files changed, 125 insertions(+), 103 deletions(-) diff --git a/src/assets/main.scss b/src/assets/main.scss index b63c8b2..4ce809d 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -596,9 +596,10 @@ body{ // left: 0; .popup-content-wrapper{ - display: flex; - flex-direction: row; - align-items:center; + // display: flex; + // flex-direction: row; + // align-items:center; + position: relative; .concernement-map-popup{ background-color: white; padding: 0.5em; @@ -618,6 +619,9 @@ body{ } .concernement-map-popup-recit{ padding-left: 0.8em; + position: absolute; + top:3px; + left:100%; >svg{ display: inline-block; $d: 55px; @@ -634,7 +638,7 @@ body{ .besoin-map-popup, .reponse-map-popup{ background-color: white; - padding: 1em; + padding: 0.5em; border-radius: 3px; max-width: 30em; >div{ diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 52b471a..0cfc510 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -38,6 +38,7 @@ export default { return { id: null, entities: null, + superposedEntitesIDsList: [], canvas: null, ctx: null, pos : { @@ -100,14 +101,14 @@ export default { // this.getSalientPoints() this.getJarvisEnvelopeConvexe() - // if (this.canvasMap) { - // define init position of the item - this.pos = this.getRandomPos(); - // - this.initMatterBody() - // - this.initPaperObjects() - // } + // define init position of the item + this.pos = this.getRandomPos(); + // + this.getSuperposedEntitesIDsList(); + // + this.initMatterBody() + // + this.initPaperObjects() } // this.setConcernementMapItem(this.cid, this); @@ -177,7 +178,7 @@ export default { hover_elmt: { handler (n, o) { // console.log(`watch hover_elmt ${this.id}`, o, n); - if (n && n.type === 'concernement' && n.id === this.id) { + if (n && (n.type === 'concernement' || n.type === 'superposition') && n.id === this.id) { this.is_hover = true; } else { this.is_hover = false; @@ -374,6 +375,47 @@ export default { if (num > 1 || num < 0) return this.getGaussianRandom() // resample between 0 and 1 return num }, + getSuperposedEntitesIDsList(){ + + // find the right entite(s) to display on this original map_item vs cloned map item + // (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 [superposition_id, superposition] of Object.entries(superpositions)){ + if (!superposition.cloned) { // not part of a clone + switch (this.cid) { // get the right eid regarding the cid + case superposition[0].cid: + this.superposedEntitesIDsList.push(superposition[0].eid); + break; + case superposition[1].cid: + this.superposedEntitesIDsList.push(superposition[1].eid); + break; + } + } + } + } + } + // console.log('eids', eids); + + }, // MATTER BODY initMatterBody (){ @@ -659,45 +701,7 @@ export default { return g; }, setPaperEntitesSuperposees(){ - console.log('setPaperSuperpositions, superpositions', this.concernement.superpositions); - - // find the right entite(s) to display on this original map_item vs cloned map item - // (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]): - eids.push(parseInt(ids[2])); - break; - case parseInt(ids[3]): - eids.push(parseInt(ids[4])); - break; - } - } else { - // 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 [superposition_id, superposition] of Object.entries(superpositions)){ - if (!superposition.cloned) { // not part of a clone - switch (this.cid) { // get the right eid regarding the cid - case superposition[0].cid: - eids.push(superposition[0].eid); - break; - case superposition[1].cid: - eids.push(superposition[1].eid); - break; - } - } - } - } - } - // console.log('eids', eids); + // console.log('setPaperSuperpositions, superpositions', this.concernement.superpositions); let g = new paper.Group({ pivot: new paper.Point(this.pos), @@ -706,7 +710,7 @@ export default { 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]; if (entite.entite // check if we have an entite object with all the contents - && eids.indexOf(entite.entite.id) >= 0) // check if entite id is in the list builded above + && this.superposedEntitesIDsList.indexOf(entite.entite.id) >= 0) // check if entite id is in the list builded above { // console.log(`entite ${entite.entite.id}`, entite, entite.entite.superposition); // use paper symbol @@ -1277,15 +1281,18 @@ export default { if (!this.is_opened) { if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused if (this.map_mode === 'superposition') { + // get the superposed entite this.setHoverElmt({ type: 'superposition', - cid: this.id, - eid: 0 // TODO + id: this.id, + cid: this.cid, + eids: this.superposedEntitesIDsList }); } else { this.setHoverElmt({ type: 'concernement', - id: this.id + id: this.id, + cid: this.cid }); } diff --git a/src/components/ConcernementMapPopup.vue b/src/components/ConcernementMapPopup.vue index 43ba22d..e9034ad 100644 --- a/src/components/ConcernementMapPopup.vue +++ b/src/components/ConcernementMapPopup.vue @@ -16,7 +16,7 @@ export default { dom: null, type: null, concernement: null, - entite: null, + entites: null, besoin: null, reponse: null, superposition: null, @@ -24,32 +24,17 @@ export default { } }, created () { - // console.log(`popup created type: ${this.infos.type}`, this.infos); - if (this.infos.type === 'concernement') { - this.concernement = this.concernementsByID[this.infos.id]; - } else if(this.infos.type === 'entite' || this.infos.type === 'entite_action') { - this.entite = this.allEntitesById[this.infos.id]; - } else if (this.infos.type === 'besoin') { - this.besoin = this.allBesoinsById[this.infos.id]; - } else if (this.infos.type === 'reponse') { - for (let i = 0; i < this.allBesoinsById[this.infos.bid].reponses.length; i++) { - if (this.allBesoinsById[this.infos.bid].reponses[i].id === this.infos.id) { - this.reponse = this.allBesoinsById[this.infos.bid].reponses[i]; - break; - } - } - } else if (this.infos.type === 'superposition') { - this.superposition = { - concernement: this.concernementsByID[this.infos.cid], - entite: this.allEntitesById[this.infos.eid] - } - } + console.log(`popup created type: ${this.infos.type}`, this.infos); + this.parseInfos() }, mounted () { // console.log('APP onMounted') this.dom = this.$refs['map-popup']; window.addEventListener('mousemove', this.onMousemove); }, + beforeUnmount () { + window.removeEventListener('mousemove', this.onMousemove); + }, computed: { ...mapState(ConcernementsStore,['concernements']), ...mapState(ConcernementsStore,['concernementsByID']), @@ -59,20 +44,43 @@ export default { watch: { infos: { handler (n, o){ - if (n.type === 'concernement') { - this.concernement = this.concernementsByID[n.id]; - } else if(n.type === 'entite' || n.type === 'entite_action') { - this.entite = this.allEntitesById[this.infos.id]; - } else if (n.type === 'besoin') { - this.besoin = this.allBesoinsById[this.infos.id]; - } else if (n.type === 'reponse') { - - } + this.parseInfos() }, deep: true }, }, methods: { + parseInfos(){ + switch (this.infos.type) { + case 'concernement': + this.concernement = this.concernementsByID[this.infos.cid]; + break; + case 'entite': + case 'entite_action': + this.entites = [this.allEntitesById[this.infos.id]]; + break; + case 'besoin': + this.besoin = this.allBesoinsById[this.infos.id]; + break; + case 'reponse': + this.besoin = this.allBesoinsById[this.infos.id]; + for (let i = 0; i < this.allBesoinsById[this.infos.bid].reponses.length; i++) { + if (this.allBesoinsById[this.infos.bid].reponses[i].id === this.infos.id) { + this.reponse = this.allBesoinsById[this.infos.bid].reponses[i]; + break; + } + } + break; + case 'superposition': + this.concernement = this.concernementsByID[this.infos.cid]; + // this.entite = this.allEntitesById[this.infos.eid]; + this.entites = []; + for (let eid of this.infos.eids) { + this.entites.push(this.allEntitesById[eid]) + } + break; + } + }, onMousemove(e){ // console.log(`popup move type: ${this.infos.type}`); let v = "top"; @@ -124,23 +132,29 @@ export default {
-
-

{{ concernement.title }}

-
    -
    • -
    • -
    • -
    • -
    • -
+
+
+

{{ concernement.title }}

+
    +
    • +
    • +
    • +
    • +
    • +
+
+
+ +
-
- + +
+

⋅ {{ entite.entite.title }}

-
-

{{ entite.entite.title }}

-
diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index a4ce87d..0a03fc8 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -1115,9 +1115,6 @@ export default { this.superpositions_constraints.push(c); Matter.Composite.add(this.world, c); // keep a link the constraint into the concernement object (useful for tweening the constraint pointA & pointB in concernementMapItem) - // TODO this two lines make the all thing very slow - // concernementA.superposition_constraints[c.id] = c; - // concernementB.superposition_constraints[c.id] = c; concernementA.superposition_constraints_id.push(c.id); concernementB.superposition_constraints_id.push(c.id); // record all superposed concernements for each concernement