puissance agir hover events both ways (map <-> cartouche) are done

This commit is contained in:
Bachir Soussi Chiadmi 2023-07-06 22:43:27 +02:00
parent 19e61bbcd7
commit 213f151557
5 changed files with 50 additions and 7 deletions

View File

@ -226,9 +226,9 @@ body{
}
>header{
padding: 0 0 0 0;
cursor: pointer;
>label{
padding:0.3em 0 0.5em 0;
cursor: pointer;
svg{
width:0.7em; height:0.7em;
}

View File

@ -163,6 +163,7 @@ export default {
...mapActions(CommonStore,['setHoverElmt']),
...mapActions(ConcernementsStore,['openCloseConcernements']),
...mapActions(ConcernementsStore,['hideShowConcernement']),
...mapActions(ConcernementsStore,['setBesoinPaperId']),
// getResponsiveRay(){
// return Math.min(this.canvas.width, this.canvas.height) * 0.08;
// },
@ -600,6 +601,8 @@ export default {
besoin.item_cid = this.concernement.id;
besoin.item_type = 'besoin';
besoin.is_symbol_instance = true;
console.log(`paper besoin id:${besoin.id}`);
this.setBesoinPaperId(besoin.id, this.id, this.concernement.besoins[i].id);
g.addChild(besoin)
let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
@ -621,6 +624,7 @@ export default {
reponse.item_cid = this.concernement.id;
reponse.item_type = 'reponse';
reponse.is_symbol_instance = true;
this.setBesoinPaperId(reponse.id, this.id, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
g.addChild(reponse)
}
}
@ -1035,9 +1039,13 @@ export default {
id: result.item.item_id
};
switch (result.item.item_type) {
case "besoin":
new_hover_elmt.no_popup = true;
break;
case "reponse":
new_hover_elmt.bid = result.item.item_bid;
new_hover_elmt.cid = result.item.item_cid;
new_hover_elmt.no_popup = true;
break;
}
if (!this.hover_elmt || new_hover_elmt.paper_id !== this.hover_elmt.paper_id) {
@ -1336,7 +1344,7 @@ export default {
let fa = Math.exp(fa_minf + fa_scale*(dist-minp)*-1);
this.body.frictionAir = fa;
console.log(`bringToCenter dist:${dist}, x_force:${x_force}, friction air:${fa}`);
// console.log(`bringToCenter dist:${dist}, x_force:${x_force}, friction air:${fa}`);
} else { // in the ceneter zone let items floats freely
let fa = 0.01;
let velocity = Matter.Body.getVelocity(this.body);
@ -1347,7 +1355,7 @@ export default {
let velocity_range = [50, 1000];
let fa_range = [0,3];
fa = fa_range[0] + (velocityx - velocity_range[0]) * (fa_range[1] - fa_range[0]) / (velocity_range[1] - velocity_range[0]);
console.log(`bringToCenter velocityx:${velocityx}, fa:${fa}, velocity`, velocity);
// console.log(`bringToCenter velocityx:${velocityx}, fa:${fa}, velocity`, velocity);
} else {
console.warn(`bringToCenter no velocity`, velocity);
}

View File

@ -153,7 +153,7 @@ export default {
}
}
if (o && o.paper_id) {
if (o && o.paper_id && (!n || o.paper_id !== n.paper_id)) {
let oitem = paper.project.getItem({id: o.paper_id})
console.log('watch hover_element oitem', oitem);
if (!oitem.is_symbol_instance) { // not symbol instance
@ -969,7 +969,7 @@ export default {
</ul>
</nav>
<ConcernementMapPopup
v-if="hover_elmt && hover_elmt.type !== 'doleance_step'"
v-if="hover_elmt && hover_elmt.type !== 'doleance_step' && !hover_elmt.no_popup"
:infos="hover_elmt"
/>
</template>

View File

@ -39,14 +39,28 @@ export default {
},
created () {
console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
},
mounted() {
},
methods: {
...mapActions(CommonStore,['setHoverElmt']),
onClickBesoin(id){
console.log("onClickBesoin", id);
this.opened_besoin_id = id === this.opened_besoin_id ? null : id;
},
besoinClass(id){
return this.opened_besoin_id === id ? "opened" : "";
},
onHoverItem(type, pid, bid, rid){
console.log(`onHoverItem type:${type}, paper_id:${pid} bid:${bid}, rid:${rid}`);
this.setHoverElmt({
type: type,
paper_id: pid,
id: rid ? rid : bid,
bid: rid ? bid : null,
no_popup: true
});
}
},
components: {
@ -74,6 +88,7 @@ export default {
class="besoin"
:id="besoin.id"
:class="besoinClass(besoin.id)"
@mouseover="onHoverItem('besoin', besoin.paper_id, besoin.id)"
>
<svg-icon
type="mdi"
@ -81,12 +96,11 @@ export default {
class="open-btn"
@click="onClickBesoin(besoin.id)"
></svg-icon>
<header>
<header @click="onClickBesoin(besoin.id)">
<label
:class="{ 'hover': hover_elmt
&& (hover_elmt.type === 'besoin' || hover_elmt.type === 'reponse')
&& (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
@click="onClickBesoin(besoin.id)"
>
<svg-icon
type="mdi"
@ -102,6 +116,7 @@ export default {
:key="reponse.id"
class="reponse"
:id="reponse.id"
@mouseover.stop="onHoverItem('reponse', reponse.paper_id, besoin.id, reponse.id)"
>
<label
:class="{ 'hover': hover_elmt

View File

@ -238,6 +238,26 @@ export const ConcernementsStore = defineStore({
},
setOpenedEntityId(id){
this.opened_entite_id = id;
},
setBesoinPaperId(paper_id, cid, bid, rid){
this.concernements.forEach((c, i) => {
if(c.id === cid){
this.concernements[i].besoins.forEach((b,j) => {
if(b.id === bid) {
if (!rid) {
this.concernements[i].besoins[j].paper_id = this.concernementsByID[cid].besoins[j].paper_id = paper_id;
} else {
this.concernements[i].besoins[j].reponses.forEach((r,k) => {
if (r.id === rid) {
this.concernements[i].besoins[j].reponses[k].paper_id = this.concernementsByID[cid].besoins[j].reponses[k].paper_id = paper_id;
}
})
}
}
})
}
})
}
}
})