bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

superposition map behaviours bug fix

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-09-13 21:30:12 +02:00
parent 119ae3f242
commit ef0d8cedf6
5 changed files with 163 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -63,6 +63,10 @@ export default {
...mapActions(ConcernementsStore,['loadConcernements']), ...mapActions(ConcernementsStore,['loadConcernements']),
...mapActions(ConcernementsStore,['loadContentTypeDefinition']), ...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
...mapActions(UserStore,['checkUser']), ...mapActions(UserStore,['checkUser']),
// mapitem_opened(concernement){
// return concernement.opened;
// }
}, },
components: { components: {
MapConcernements, MapConcernements,
@ -97,7 +101,6 @@ export default {
v-if="concernement.visible" v-if="concernement.visible"
:key="index" :key="index"
:concernement="concernement" :concernement="concernement"
:is_opened="concernement.opened"
:active_revision="concernement.active_revision" :active_revision="concernement.active_revision"
/> />
</template> </template>
@ -107,7 +110,6 @@ export default {
v-if="superposition.concernement.visible" v-if="superposition.concernement.visible"
:key="index" :key="index"
:concernement="superposition.concernement" :concernement="superposition.concernement"
:is_opened="superposition.concernement.opened"
:active_revision="superposition.concernement.active_revision" :active_revision="superposition.concernement.active_revision"
:superposition_id="superposition.superposition_id" :superposition_id="superposition.superposition_id"
/> />

169
src/components/ConcernementMapItem.vue
View File

@ -1,23 +1,5 @@
<script> <script>
// https://brm.io/matter-js/docs/classes/Engine.html
// import {
// // Engine,
// // Render,
// // World,
// Bodies,
// Body,
// Events,
// Composite,
// // Composites,
// // Constraint,
// // Vertices,
// // Mouse,
// // MouseConstraint,
// // Query,
// // Common
// } from "matter-js";
import Matter from "matter-js"; import Matter from "matter-js";
import MatterAttractors from "matter-attractors"; import MatterAttractors from "matter-attractors";
// Matter.use(MatterAttractors); // Matter.use(MatterAttractors);
@ -52,6 +34,7 @@ export default {
prev_scale: 1, prev_scale: 1,
opacity: 0, opacity: 0,
tween: null, tween: null,
is_open: false,
is_opening: false, is_opening: false,
is_closing: false, is_closing: false,
is_hover: false, is_hover: false,
@ -64,7 +47,7 @@ export default {
paper_groups: {} paper_groups: {}
} }
}, },
props: ['concernement', 'is_opened', 'active_revision', 'superposition_id'], props: ['concernement', 'active_revision', 'superposition_id'],
computed: { computed: {
...mapState(ConcernementsStore,['map_mode', ...mapState(ConcernementsStore,['map_mode',
'concernementsByID', 'concernementsByID',
@ -74,13 +57,13 @@ export default {
...mapState(CommonStore,['hover_elmt', ...mapState(CommonStore,['hover_elmt',
'map_item_ray', 'map_item_ray',
'cartouch_width', 'cartouch_width',
'cartouch_is_opened', 'cartouch_is_open',
'paper_symbol_definitions']) 'paper_symbol_definitions'])
}, },
created () { created () {
this.cid = this.concernement.id; this.cid = this.concernement.id;
this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid; this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
console.log(`ConcernementsMapItem ${this.id} created`); // console.log(`ConcernementsMapItem ${this.id} created`);
// this.entites = this.concernement.entites // this.entites = this.concernement.entites
this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites; this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
@ -141,21 +124,28 @@ export default {
}, },
deep: true deep: true
}, },
is_opened: { opened_concernement: {
handler (n, o) { handler (n, o) {
// console.log('mapItem watch is_opened', n, this.is_opened); if (!n) { // if there is no opened concernement
if(n){ // opened this.is_open = false;
this.openClose(true); this.applyShuffleForces();
}else if(o) { // closed if was opened } else {
this.openClose(false); if(this.cid === n.id && this.id === n.opened_mapitem_id){
this.is_open = true;
}else{
this.is_open = false;
}
} }
}, },
deep: true deep: true
}, },
opened_concernement: { is_open: {
handler (n, o) { handler (n, o) {
if (!n) { // console.log('mapItem watch is_open', n, this.is_open);
this.applyShuffleForces(); if(n){ // opened
this.openClose(true);
}else if(o) { // closed if was opened
this.openClose(false);
} }
}, },
deep: true deep: true
@ -166,7 +156,7 @@ export default {
if (n === 'terraindevie' && !this.opened_concernement) { if (n === 'terraindevie' && !this.opened_concernement) {
this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie
} }
if (this.is_opened & n !== o) { if (this.is_open & n !== o) {
this.setPaperContents(); this.setPaperContents();
} }
if (n !== o) { if (n !== o) {
@ -674,12 +664,12 @@ export default {
const contrs = new paper.Path({ const contrs = new paper.Path({
name: 'contours', name: 'contours',
segments: segments, segments: segments,
fillColor: 'rgba(255,255,255,0.4)', fillColor: 'rgba(255,255,255,0.4)', // this.superposition_id ? 'rgba(255,0,0,0.4)' : 'rgba(255,255,255,0.4)',
// selected: true, // selected: true,
strokeColor: '#fff', strokeColor: '#fff',
strokeWidth: 1, strokeWidth: 1,
pivot: new paper.Point(this.pos), pivot: new paper.Point(this.pos),
cid: this.id cid: this.cid
}); });
return contrs; return contrs;
@ -807,7 +797,7 @@ export default {
besoin.item_type = 'besoin'; besoin.item_type = 'besoin';
besoin.is_symbol_instance = true; besoin.is_symbol_instance = true;
console.log(`paper besoin id:${besoin.id}`); console.log(`paper besoin id:${besoin.id}`);
this.setBesoinPaperId(besoin.id, this.id, this.concernement.besoins[i].id); this.setBesoinPaperId(besoin.id, this.cid, this.concernement.besoins[i].id);
g.addChild(besoin) g.addChild(besoin)
let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
@ -830,7 +820,7 @@ export default {
reponse.item_cid = this.concernement.id; reponse.item_cid = this.concernement.id;
reponse.item_type = 'reponse'; reponse.item_type = 'reponse';
reponse.is_symbol_instance = true; reponse.is_symbol_instance = true;
this.setBesoinPaperId(reponse.id, this.id, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id); this.setBesoinPaperId(reponse.id, this.cid, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
g.addChild(reponse) g.addChild(reponse)
} }
} }
@ -1133,7 +1123,7 @@ export default {
handlePaperVisibilityOnBeforeOpen(){ handlePaperVisibilityOnBeforeOpen(){
// agissantes // agissantes
if (this.concernement.has_agissantes && this.map_mode === "action") { if (this.concernement.has_agissantes && this.map_mode === "action") {
if (!this.is_opened) { if (!this.is_open) {
this.paper_main_object.children.agissantes_icons.visible = true; this.paper_main_object.children.agissantes_icons.visible = true;
} else { } else {
this.paper_main_object.children.agissantes_icons.visible = false; this.paper_main_object.children.agissantes_icons.visible = false;
@ -1150,7 +1140,7 @@ export default {
handlePaperVisibilityOnClosed(){ handlePaperVisibilityOnClosed(){
// agissantes // agissantes
if (this.concernement.has_agissantes && this.map_mode === "action") { if (this.concernement.has_agissantes && this.map_mode === "action") {
if (!this.is_opened) { if (!this.is_open) {
this.paper_main_object.children.agissantes_icons.visible = true; this.paper_main_object.children.agissantes_icons.visible = true;
} else { } else {
this.paper_main_object.children.agissantes_icons.visible = false; this.paper_main_object.children.agissantes_icons.visible = false;
@ -1163,9 +1153,9 @@ export default {
handlePaperVisibilityOnAfterEnginUpdate(){ handlePaperVisibilityOnAfterEnginUpdate(){
// contours focused // contours focused
if (!this.isFocused()){ if (!this.isFocused()){
this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)"; this.paper_main_object.children['contours'].fillColor = 'rgba(255,255,255,0.1)'; //this.superposition_id ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)";
}else{ }else{
this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.4)"; this.paper_main_object.children['contours'].fillColor = 'rgba(255,255,255,0.4)'; //this.superposition_id ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)";
if (this.is_hover) { if (this.is_hover) {
this.paper_main_object.children['contours'].strokeColor = "#01ffe2"; this.paper_main_object.children['contours'].strokeColor = "#01ffe2";
this.paper_main_object.children['contours'].strokeWidth = 2; this.paper_main_object.children['contours'].strokeWidth = 2;
@ -1178,8 +1168,8 @@ export default {
} }
// contours visibility // contours visibility
if (!this.is_opened if (!this.is_open
|| (this.is_opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) { || (this.is_open && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
this.paper_main_object.children['contours'].visible = true; this.paper_main_object.children['contours'].visible = true;
} else { } else {
this.paper_main_object.children['contours'].visible = false; this.paper_main_object.children['contours'].visible = false;
@ -1190,7 +1180,7 @@ export default {
// superposition // superposition
if (this.concernement.has_superpositions) { if (this.concernement.has_superpositions) {
if (this.map_mode === "superposition") { if (this.map_mode === "superposition") {
if (!this.is_opened) { if (!this.is_open) {
this.paper_main_object.children.entites_superposes.visible = true; // if not opened and has_superpositions draw the entites_superposes points this.paper_main_object.children.entites_superposes.visible = true; // if not opened and has_superpositions draw the entites_superposes points
} else { } else {
this.paper_main_object.children.entites_superposes.visible = true; this.paper_main_object.children.entites_superposes.visible = true;
@ -1203,7 +1193,7 @@ export default {
// puissance d'agir // puissance d'agir
if (this.concernement.has_puissancedagir) { if (this.concernement.has_puissancedagir) {
if (this.map_mode === "puissancedagir") { if (this.map_mode === "puissancedagir") {
if (!this.is_opened) { if (!this.is_open) {
this.paper_main_object.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone this.paper_main_object.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone
} else { } else {
this.paper_main_object.children.puissanceagir_icon.visible = false; this.paper_main_object.children.puissanceagir_icon.visible = false;
@ -1217,7 +1207,7 @@ export default {
if (this.concernement.has_agissantes) { if (this.concernement.has_agissantes) {
if (this.map_mode !== "action") { if (this.map_mode !== "action") {
this.paper_main_object.children.agissantes_icons.visible = false; this.paper_main_object.children.agissantes_icons.visible = false;
} else if(!this.is_opened && !this.is_closing){ } else if(!this.is_open && !this.is_closing){
this.paper_main_object.children.agissantes_icons.visible = true; this.paper_main_object.children.agissantes_icons.visible = true;
} }
} }
@ -1225,7 +1215,7 @@ export default {
// doleance // doleance
if (this.concernement.has_doleance) { if (this.concernement.has_doleance) {
if (this.map_mode === "doleancer") { if (this.map_mode === "doleancer") {
if (!this.is_opened) { if (!this.is_open) {
this.paper_main_object.children.doleance_icon.visible = true; this.paper_main_object.children.doleance_icon.visible = true;
} else { } else {
this.paper_main_object.children.doleance_icon.visible = false; this.paper_main_object.children.doleance_icon.visible = false;
@ -1240,7 +1230,7 @@ export default {
} }
// focus on opened entite // focus on opened entite
if (this.is_opened && this.opened_entite_id && (this.map_mode === 'terraindevie' || this.map_mode === 'action')) { if (this.is_open && this.opened_entite_id && (this.map_mode === 'terraindevie' || this.map_mode === 'action')) {
let group = this.map_mode === 'terraindevie' ? this.paper_main_object.children['entites'] : this.paper_main_object.children['agissantes']; let group = this.map_mode === 'terraindevie' ? this.paper_main_object.children['entites'] : this.paper_main_object.children['agissantes'];
if(group){ if(group){
group.children.forEach((item) => { group.children.forEach((item) => {
@ -1279,16 +1269,6 @@ export default {
// PAPER EVENTS // PAPER EVENTS
initPaperEvents(){ initPaperEvents(){
// this.paper_main_object.onMouseEnter = function(event){
// if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused
// this.setHoverElmt({
// type: 'concernement',
// id: this.id
// });
// document.body.style.cursor = "pointer";
// }
// }.bind(this);
this.paper_main_object.onMouseLeave = function(event){ this.paper_main_object.onMouseLeave = function(event){
if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened
this.resetHoverElmt(); this.resetHoverElmt();
@ -1300,11 +1280,11 @@ export default {
// console.log(`onmousemove ${this.id}`); // console.log(`onmousemove ${this.id}`);
// prevent hover map item mouse event if cartouch is opened // prevent hover map item mouse event if cartouch is opened
if (this.cartouch_is_opened) { if (this.cartouch_is_open) {
return; return;
} }
if (!this.is_opened) { if (!this.is_open) {
if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused
if (this.map_mode === 'superposition') { if (this.map_mode === 'superposition') {
// get the superposed entite // get the superposed entite
@ -1382,20 +1362,18 @@ export default {
console.log('paper concernement onClick'); console.log('paper concernement onClick');
// prevent hover map item mouse event if cartouch is opened // prevent hover map item mouse event if cartouch is opened
if (this.cartouch_is_opened) { if (this.cartouch_is_open) return;
return;
}
if (!this.is_opened) { // si ce concernement n'est pas ouvet if (!this.is_open) { // si ce concernement n'est pas ouvet
if (!this.opened_concernement) { // si aucun concernement n'est ouvert if (!this.opened_concernement) { // si aucun concernement n'est ouvert
console.log(`Open me ${this.id}`); console.log(`Open me ${this.id}`);
// open/close all concernements // open/close all concernements
this.openCloseConcernements(this.id) this.openCloseConcernements(this.cid, this.id)
// push route (keep the hash for map_mode) // push route (keep the hash for map_mode)
this.$router.push({ this.$router.push({
name: 'concernement', name: 'concernement',
hash: `#${this.map_mode}`, hash: `#${this.map_mode}`,
params: {id: this.id} params: {id: this.cid, mapitemid: this.id}
}); });
// reset the mousehover // reset the mousehover
this.resetHoverElmt(); this.resetHoverElmt();
@ -1425,11 +1403,11 @@ export default {
this.$router.push({ this.$router.push({
name: 'concernement', name: 'concernement',
hash: `#${this.map_mode}`, hash: `#${this.map_mode}`,
params: {id: this.id, eid: result.item.item_id} params: {id: this.cid, mapitemid: this.id, eid: result.item.item_id}
}); });
break; break;
case "doleancer": case "doleancer":
this.setOpenedDoleanceField(this.id, result.item.did, result.item.field, result.item.field_index); this.setOpenedDoleanceField(this.cid, result.item.did, result.item.field, result.item.field_index);
break; break;
} }
@ -1438,7 +1416,7 @@ export default {
this.$router.push({ this.$router.push({
name: 'concernement', name: 'concernement',
hash: `#${this.map_mode}`, hash: `#${this.map_mode}`,
params: {id: this.id} params: {id: this.cid, mapitemid: this.id}
}); });
// reset the mousehover // reset the mousehover
this.resetHoverElmt(); this.resetHoverElmt();
@ -1456,7 +1434,7 @@ export default {
}, },
// OPEN / CLOSE (with tween) // OPEN / CLOSE (with tween)
openClose(open) { openClose(open) {
// console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`); console.log(`ConcernementsMapItem ${this.id} openClose: ${open}`);
if (this.tween) { if (this.tween) {
this.tween.stop(); this.tween.stop();
} }
@ -1492,11 +1470,15 @@ export default {
this.paper_main_object.scale(obj.s); this.paper_main_object.scale(obj.s);
// update superposition constraints points // update superposition constraints points
if (this.concernement.superposition_constraints_id && this.concernement.superposition_constraints_id.length) { if (this.concernement.superposition_constraints_id
&& this.concernement.superposition_constraints_id[this.id]
&& this.concernement.superposition_constraints_id[this.id].length)
{
// get all the constraints of the world // get all the constraints of the world
let all_constrains = Matter.Composite.allConstraints(this.matterEngine.world); let all_constrains = Matter.Composite.allConstraints(this.matterEngine.world);
// loop through all constraint ids recorded in the concernement // loop through all constraint ids recorded in the concernement
for(let constraint_id of this.concernement.superposition_constraints_id) { // get only the constraint of this concernement mapitem
for(let constraint_id of this.concernement.superposition_constraints_id[this.id]) {
// get the right constraint object from matter // get the right constraint object from matter
let constraint; let constraint;
for (const c of all_constrains) { for (const c of all_constrains) {
@ -1507,7 +1489,7 @@ export default {
} }
if (constraint) { if (constraint) {
// tween the constraint point // tween the constraint point
let ab = this.id === constraint.concernementA.id ? 'A' : 'B'; let ab = this.cid === constraint.concernementA.id ? 'A' : 'B';
let point = constraint[`point${ab}`]; let point = constraint[`point${ab}`];
// revert to the original point // revert to the original point
let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale) let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
@ -1579,11 +1561,15 @@ export default {
this.paper_main_object.scale(obj.s); this.paper_main_object.scale(obj.s);
// update superposition constraints points // update superposition constraints points
if (this.concernement.superposition_constraints_id && this.concernement.superposition_constraints_id.length) { if (this.concernement.superposition_constraints_id
&& this.concernement.superposition_constraints_id[this.id]
&& this.concernement.superposition_constraints_id[this.id].length)
{
// get all the constraints of the world // get all the constraints of the world
let all_constrains = Matter.Composite.allConstraints(this.matterEngine.world); let all_constrains = Matter.Composite.allConstraints(this.matterEngine.world);
// loop through all constraint ids recorded in the concernement // loop through all constraint ids recorded in the concernement
for(let constraint_id of this.concernement.superposition_constraints_id) { // get only the constraint of this concernement mapitem
for(let constraint_id of this.concernement.superposition_constraints_id[this.id]) {
// get the right constraint object from matter // get the right constraint object from matter
let constraint; let constraint;
for (const c of all_constrains) { for (const c of all_constrains) {
@ -1594,7 +1580,7 @@ export default {
} }
if (constraint) { if (constraint) {
// tween the constraint point // tween the constraint point
let ab = this.id === constraint.concernementA.id ? 'A' : 'B'; let ab = this.cid === constraint.concernementA.id ? 'A' : 'B';
let point = constraint[`point${ab}`]; let point = constraint[`point${ab}`];
// revert to the original point // revert to the original point
let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale) let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
@ -1622,22 +1608,20 @@ export default {
// ENGINE UPDATE // ENGINE UPDATE
onBeforeEngineUpdate (event) { onBeforeEngineUpdate (event) {
// TODO stop item on mouse hover
if (this.hover_elmt && this.hover_elmt.id === this.id) {
// Matter.Body.setStatic(this.body, true);
} else {
// Matter.Body.setStatic(this.body, false);
}
// update the opening/closing tweening // update the opening/closing tweening
if (this.tween) { if (this.tween) {
this.tween.update(); this.tween.update();
} }
if (this.opened_concernement) { if (this.opened_concernement) {
// console.log("try to push aside", this.opened_concernement.opened_mapitem_id, this.id, this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]);
// console.log(this.id, this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id].indexOf(this.id));
if ( if (
this.opened_concernement.id !== this.id // this.opened_concernement.id !== this.cid &&
&& (!this.opened_concernement.superposed_concernements_id || this.opened_concernement.superposed_concernements_id.indexOf(this.id) < 0) this.opened_concernement.opened_mapitem_id !== this.id
// && (!this.opened_concernement.all_superposed_concernements_id || this.opened_concernement.all_superposed_concernements_id.indexOf(this.id) < 0)
&& (!this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id] // when we are not in superposition mode
|| this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id].indexOf(this.id) < 0) // this mapitem is not superposed to the opened mapitem
) { ) {
this.pushAside() this.pushAside()
} }
@ -1671,7 +1655,7 @@ export default {
|| (this.map_mode === 'doleancer' && this.concernement.has_doleance); || (this.map_mode === 'doleancer' && this.concernement.has_doleance);
}, },
pushAside(){ pushAside(){
// console.log('pushAside', this.opened_concernement); // console.log('pushAside');
// apply a force in direction of one side or an other depending of the start position // apply a force in direction of one side or an other depending of the start position
// the force is exponentialy proportional to the distance from the side // the force is exponentialy proportional to the distance from the side
// INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249 // INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249
@ -1680,9 +1664,14 @@ export default {
? (this.canvas.width - this.cartouch_width) / 2 ? (this.canvas.width - this.cartouch_width) / 2
: this.canvas.width / 2; : this.canvas.width / 2;
// get the direction to the closest side // get the direction to the closest side
let dir = this.pos.x > pseudo_center_x let dir =
? 1 // to the right this.pos.x < pseudo_center_x
: -1; // to the left || (this.map_mode === 'superposition'
&& this.concernement.superposition_constraints_id
&& this.concernement.superposition_constraints_id[this.id]
&& this.concernement.superposition_constraints_id[this.id].length) // go to the left if has superposition constraint applied
? -1 // to the left
: -1; // to the right
// max and min item position // max and min item position
let minp = 0; let minp = 0;
let maxp = dir < 0 let maxp = dir < 0
@ -1962,6 +1951,12 @@ export default {
onAfterEngineUpdate (event) { onAfterEngineUpdate (event) {
this.respawn(); this.respawn();
// stop item on mouse hover
// if (this.hover_elmt && this.hover_elmt.id === this.id) {
// // Matter.Body.setStatic(this.body, true);
// } else {
// // Matter.Body.setStatic(this.body, false);
// }
if (this.is_hover) { // if mouse hover reset the matter body position to prev position if (this.is_hover) { // if mouse hover reset the matter body position to prev position
Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}, true); Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}, true);
}else{ // else move following the matter body position }else{ // else move following the matter body position

108
src/components/MapConcernements.vue
View File

@ -221,7 +221,7 @@ export default {
}, },
map_mode: { map_mode: {
handler (n, o) { handler (n, o) {
console.log('concernementMap watch map_mode', o, n); console.log('concernementMap watch map_mode o n', o, n);
if (n === 'superposition' && !this.opened_concernement) { if (n === 'superposition' && !this.opened_concernement) {
// create constraints // create constraints
this.setSuperpositionsMatterConstraints(); this.setSuperpositionsMatterConstraints();
@ -232,6 +232,18 @@ export default {
}, },
deep: true deep: true
}, },
opened_concernement: {
handler (n, o) {
console.log('concernementMap watch opened_concernement o n', o, n);
// if (n && this.map_mode === 'superposition') {
// this.clearSuperpositionsMatterConstraints();
// }
// if(o && !n){
// this.setSuperpositionsMatterConstraints();
// }
},
deep: true
},
allSuperpositions: { allSuperpositions: {
handler (n, o) { handler (n, o) {
console.log('concernementMap watch allSuperpositions', o, n); console.log('concernementMap watch allSuperpositions', o, n);
@ -1050,11 +1062,7 @@ export default {
async setSuperpositionsMatterConstraints(){ async setSuperpositionsMatterConstraints(){
await nextTick(); // wait for dom to be upadted before applying consraint await nextTick(); // wait for dom to be upadted before applying consraint
console.log('setSuperpositionsMatterConstraints this.allSuperpositions', this.allSuperpositions); console.log('setSuperpositionsMatterConstraints this.allSuperpositions', this.allSuperpositions);
// let allBodies = Matter.Composite.allBodies(this.world);
// console.log('allBodies', allBodies);
// let allComposites = Matter.Composite.allComposites(this.world);
// console.log('allComposites', allComposites);
// loop through all supperposition couple // loop through all supperposition couple
for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){ for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){
// if couple has only one superposition, use regular mapItems // if couple has only one superposition, use regular mapItems
@ -1062,25 +1070,30 @@ export default {
let i = 0; let i = 0;
for(let [superposition_id, superposition] of Object.entries(superpositions)){ for(let [superposition_id, superposition] of Object.entries(superpositions)){
i++; i++;
// console.log('superposition', superposition[0].cid, superposition[1].cid);
let matter_bodyA_id, matter_bodyB_id; let concernementA = this.concernementsByID[superposition[0].cid];
if (superpositions_ids.length === 1 || i === 1) { // console.log('concernementA', concernementA);
matter_bodyA_id = superposition[0].cid let concernementB = this.concernementsByID[superposition[1].cid];
matter_bodyB_id = superposition[1].cid // console.log('concernementB', concernementB);
// console.log('superposition', superposition_id, superposition);
let mapitemA_id, mapitemB_id;
if (i === 1) {
mapitemA_id = superposition[0].cid
mapitemB_id = superposition[1].cid
} else { } else {
matter_bodyA_id = `${superposition[0].cid}___${superposition_id}` mapitemA_id = `${superposition[0].cid}___${superposition_id}`
matter_bodyB_id = `${superposition[1].cid}___${superposition_id}` mapitemB_id = `${superposition[1].cid}___${superposition_id}`
} }
// get the concernement matter bodies with id // get the concernement matter bodies with id
let bodyA = Matter.Composite.get(this.world, matter_bodyA_id, 'body'); let bodyA = Matter.Composite.get(this.world, mapitemA_id, 'body'); // matter body id is the same as mapitem_id
let bodyB = Matter.Composite.get(this.world, matter_bodyB_id, 'body'); let bodyB = Matter.Composite.get(this.world, mapitemB_id, 'body'); // matter body id is the same as mapitem_id
// console.log('bodyA, bodyB', bodyA, bodyB); // console.log('bodyA, bodyB', bodyA, bodyB);
// get the entite coordinates inside the concernement body // get the entite coordinates inside the concernement body
let pointA = null; let pointA = null;
let concernementA = this.concernementsByID[superposition[0].cid];
// console.log('concernementA', concernementA);
for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){ for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){
if (entiteA.entite && entiteA.entite.id === superposition[0].eid && entiteA.display) { if (entiteA.entite && entiteA.entite.id === superposition[0].eid && entiteA.display) {
// console.log('entiteA', entiteA); // console.log('entiteA', entiteA);
@ -1089,8 +1102,6 @@ export default {
} }
} }
let pointB = null; let pointB = null;
let concernementB = this.concernementsByID[superposition[1].cid];
// console.log('concernementB', concernementB);
for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){ for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){
if (entiteB.entite && entiteB.entite.id === superposition[1].eid && entiteB.display) { if (entiteB.entite && entiteB.entite.id === superposition[1].eid && entiteB.display) {
// console.log('entiteB', entiteB); // console.log('entiteB', entiteB);
@ -1115,14 +1126,36 @@ export default {
this.superpositions_constraints.push(c); this.superpositions_constraints.push(c);
Matter.Composite.add(this.world, 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) // keep a link the constraint into the concernement object (useful for tweening the constraint pointA & pointB in concernementMapItem)
concernementA.superposition_constraints_id.push(c.id); if(!concernementA.superposition_constraints_id[mapitemA_id]){
concernementB.superposition_constraints_id.push(c.id); concernementA.superposition_constraints_id[mapitemA_id] = [];
// record all superposed concernements for each concernement
if (concernementA.superposed_concernements_id.indexOf(concernementB.id) < 0) {
concernementA.superposed_concernements_id.push(concernementB.id);
} }
if (concernementB.superposed_concernements_id.indexOf(concernementA.id) < 0) { concernementA.superposition_constraints_id[mapitemA_id].push(c.id);
concernementB.superposed_concernements_id.push(concernementA.id); if(!concernementB.superposition_constraints_id[mapitemB_id]){
concernementB.superposition_constraints_id[mapitemB_id] = [];
}
concernementB.superposition_constraints_id[mapitemB_id].push(c.id);
// record all superposed concernements for each concernement
if (concernementA.all_superposed_concernements_id.indexOf(concernementB.id) < 0) {
concernementA.all_superposed_concernements_id.push(concernementB.id);
}
if (concernementB.all_superposed_concernements_id.indexOf(concernementA.id) < 0) {
concernementB.all_superposed_concernements_id.push(concernementA.id);
}
// record all superposed concernements for each concernement by mapitem_id
// A
if (!concernementA.superposed_mapitem_id_by_mapitem_id[mapitemA_id]) {
concernementA.superposed_mapitem_id_by_mapitem_id[mapitemA_id] = []
}
if (concernementA.superposed_mapitem_id_by_mapitem_id[mapitemA_id].indexOf(mapitemB_id) < 0) {
concernementA.superposed_mapitem_id_by_mapitem_id[mapitemA_id].push(mapitemB_id);
}
// B
if (!concernementB.superposed_mapitem_id_by_mapitem_id[mapitemB_id]) {
concernementB.superposed_mapitem_id_by_mapitem_id[mapitemB_id] = []
}
if (concernementB.superposed_mapitem_id_by_mapitem_id[mapitemB_id].indexOf(mapitemA_id) < 0) {
concernementB.superposed_mapitem_id_by_mapitem_id[mapitemB_id].push(mapitemA_id);
} }
} }
@ -1134,21 +1167,18 @@ export default {
console.log('clearSuperpositionsMatterConstraints', this.superpositions_constraints); console.log('clearSuperpositionsMatterConstraints', this.superpositions_constraints);
for(let constraint of this.superpositions_constraints){ for(let constraint of this.superpositions_constraints){
// Delete superposition constraints recorded in concernement object // Delete superposition constraints ids recorded in concernement object
// delete constraint.concernementA.superposition_constraints[constraint.id]; ['A', 'B'].forEach(ab => {
// delete constraint.concernementB.superposition_constraints[constraint.id]; for( let [mapitem_id, constraint_ids] of Object.entries(constraint[`concernement${ab}`].superposition_constraints_id)){
let keysA = constraint.concernementA.superposition_constraints_id; let indexes = Object.keys(constraint_ids);
keysA.forEach(i => { indexes.forEach(i => {
if(constraint.concernementA.superposition_constraints_id[i] === constraint.id) { if(constraint_ids[i] === constraint.id) {
delete constraint.concernementA.superposition_constraints_id[i]; delete constraint[`concernement${ab}`].superposition_constraints_id[mapitem_id][i];
} }
}); })
let keysB = constraint.concernementB.superposition_constraints_id;
keysB.forEach(i => {
if(constraint.concernementB.superposition_constraints_id[i] === constraint.id) {
delete constraint.concernementB.superposition_constraints_id[i];
} }
}); });
Matter.Composite.remove(this.world, constraint, true); Matter.Composite.remove(this.world, constraint, true);
} }
this.superpositions_constraints = []; this.superpositions_constraints = [];

2
src/router/index.js
View File

@ -25,7 +25,7 @@ const router = createRouter({
props: true props: true
}, },
{ {
path: '/concernement/:id/:eid?', path: '/concernement/:id/:mapitemid/:eid?',
name: 'concernement', name: 'concernement',
// component: ConcernementView, // component: ConcernementView,
// route level code-splitting // route level code-splitting

15
src/stores/concernements.js
View File

@ -95,8 +95,9 @@ export const ConcernementsStore = defineStore({
if (entite.entite.superposition.length) { if (entite.entite.superposition.length) {
concernement.has_superpositions = true; concernement.has_superpositions = true;
concernement.superpositions = {}; concernement.superpositions = {};
concernement.superposition_constraints_id = []; concernement.superposition_constraints_id = {};
concernement.superposed_concernements_id = []; concernement.all_superposed_concernements_id = [];
concernement.superposed_mapitem_id_by_mapitem_id = {};
entite.entite.superposition.forEach(entite_superpose => { entite.entite.superposition.forEach(entite_superpose => {
// console.log(`superposition eid:${entite.entite.id}, teid:${entite_superpose.id}`); // console.log(`superposition eid:${entite.entite.id}, teid:${entite_superpose.id}`);
@ -331,17 +332,18 @@ export const ConcernementsStore = defineStore({
} }
}) })
}, },
openCloseConcernements (id) { openCloseConcernements (cid, id) {
console.log(`openCloseConcernements id: ${id}`); console.log(`openCloseConcernements cid: ${cid}, id: ${id}`);
var state; var state;
this.opened_concernement = null; this.opened_concernement = null;
this.opened_recit = null; this.opened_recit = null;
this.concernements.forEach((c, i) => { this.concernements.forEach((c, i) => {
state = id === c.id; state = cid === c.id;
// console.log(`openCloseConcernements foreach id: ${id}, c.id: ${c.id}, state: ${state}`, id, c.id); // console.log(`openCloseConcernements foreach id: ${id}, c.id: ${c.id}, state: ${state}`, id, c.id);
c.opened = this.concernements[i].opened = this.concernementsByID[c.id].opened = state; c.opened = this.concernements[i].opened = this.concernementsByID[c.id].opened = state;
if (state) { if (state) {
this.opened_concernement = c; this.opened_concernement = c;
this.opened_concernement.opened_mapitem_id = id;
if (c.has_recit) { if (c.has_recit) {
this.opened_recit = c.recit; this.opened_recit = c.recit;
} }
@ -349,9 +351,6 @@ export const ConcernementsStore = defineStore({
} }
}); });
}, },
// setConcernementMapItem (id, o) {
// this.concernementsByID[id].map_item = o;
// },
resetConcernementOpened () { resetConcernementOpened () {
this.opened_concernement = null; this.opened_concernement = null;
this.openCloseConcernements(); this.openCloseConcernements();