map_popup for superpositions OK
This commit is contained in:
parent
aae6d0c9d5
commit
5836d39a38
@ -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{
|
||||
|
||||
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
<div id="map-popup" ref="map-popup">
|
||||
|
||||
<div class="popup-content-wrapper">
|
||||
<section v-if="infos.type === 'concernement'" class="concernement-map-popup">
|
||||
<h1>{{ concernement.title }}</h1>
|
||||
<ul class="icons" v-if="concernement.has_puissancedagir || concernement.has_proximite || concernement.has_superposition || concernement.has_agissantes || concernement.has_doleance">
|
||||
<li v-if="concernement.has_puissancedagir" ><span class="icon puissancedagir"></span></li>
|
||||
<li v-if="concernement.has_proximite" ><span class="icon proximite"></span></li>
|
||||
<li v-if="concernement.has_superposition" ><span class="icon superposition"></span></li>
|
||||
<li v-if="concernement.has_agissantes" ><span class="icon action"></span></li>
|
||||
<li v-if="concernement.has_doleance" ><span class="icon doleancer"></span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section v-if="infos.type === 'concernement' && concernement.has_recit" class="concernement-map-popup-recit">
|
||||
<svg-icon type="mdi" :path="headphones_path"></svg-icon>
|
||||
<section v-if="infos.type === 'concernement' || infos.type === 'superposition'" class="concernement-map-popup">
|
||||
<div class="concernement-map-popup-content">
|
||||
<h1>{{ concernement.title }}</h1>
|
||||
<ul class="icons" v-if="concernement.has_puissancedagir || concernement.has_proximite || concernement.has_superposition || concernement.has_agissantes || concernement.has_doleance">
|
||||
<li v-if="concernement.has_puissancedagir" ><span class="icon puissancedagir"></span></li>
|
||||
<li v-if="concernement.has_proximite" ><span class="icon proximite"></span></li>
|
||||
<li v-if="concernement.has_superposition" ><span class="icon superposition"></span></li>
|
||||
<li v-if="concernement.has_agissantes" ><span class="icon action"></span></li>
|
||||
<li v-if="concernement.has_doleance" ><span class="icon doleancer"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="(infos.type === 'concernement' || infos.type === 'superposition') && concernement.has_recit" class="concernement-map-popup-recit">
|
||||
<svg-icon type="mdi" :path="headphones_path"></svg-icon>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="infos.type === 'entite' || infos.type === 'entite_action'" class="entite-map-popup">
|
||||
<h1>{{ entite.entite.title }}</h1>
|
||||
<section v-if="infos.type === 'entite' || infos.type === 'entite_action' || infos.type === 'superposition'" class="entite-map-popup">
|
||||
<h1
|
||||
v-for="(entite, index) of entites"
|
||||
:key="index"
|
||||
>⋅ {{ entite.entite.title }}</h1>
|
||||
</section>
|
||||
|
||||
<section v-if="infos.type === 'besoin'" class="besoin-map-popup">
|
||||
<div v-html="besoin.description"></div>
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user