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

scaling superpositions constraints on concernement opening

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-09-04 14:36:14 +02:00
parent a6dc15d646
commit a418682a72
4 changed files with 112 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/ConcernementMapItem.vue
View File

@@ -107,6 +107,8 @@ export default {
this.initPaperObjects()
// }
}
this.setConcernementMapItem(this.id, this);
},
// mounted() {
// console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas);
@@ -130,7 +132,7 @@ export default {
// console.log('mapItem watch is_opened', n, this.is_opened);
if(n){ // opened
this.openClose(true);
}else{ // closed
}else if(o) { // closed if was opened
this.openClose(false);
}
},
@@ -180,7 +182,8 @@ export default {
},
methods: {
...mapActions(CommonStore,['setHoverElmt']),
...mapActions(ConcernementsStore,['openCloseConcernements',
...mapActions(ConcernementsStore,['setConcernementMapItem',
'openCloseConcernements',
'hideShowConcernement',
'setBesoinPaperId',
'setOpenedDoleanceField',
@@ -369,7 +372,7 @@ export default {
// INFO https://github.com/liabru/matter-attractors/issues/8
// INFO https://github.com/liabru/matter-attractors/blob/master/index.js
// INFO https://github.com/liabru/matter-attractors/blob/master/build/matter-attractors.js#L180
// MatterAttractors.Attractors.gravityConstant = -20;
MatterAttractors.Attractors.gravityConstant = -20;
// Create parts of the body : main big circle & entities
// INFO map a range of numbers to another range of numbers https://stackoverflow.com/a/46462321
@@ -400,37 +403,37 @@ export default {
collisionFilter: {
group: -1
},
// plugin: {
// attractors: [
// // // there is a built in helper function for Newtonian gravity!
// // // you can find out how it works in index.js
// MatterAttractors.Attractors.gravity
plugin: {
attractors: [
// // there is a built in helper function for Newtonian gravity!
// // you can find out how it works in index.js
MatterAttractors.Attractors.gravity
// // function(bodyA, bodyB) {
// // var force = {
// // x: (bodyA.position.x - bodyB.position.x) * 1e-6,
// // y: (bodyA.position.y - bodyB.position.y) * 1e-6
// // }
// // // apply force to both bodies
// // Matter.Body.applyForce(bodyA, bodyA.position, force);
// // Matter.Body.applyForce(bodyB, bodyB.position, Matter.Vector.neg(force));
// // }
// // INFO https://github.com/liabru/matter-attractors/blob/master/build/matter-attractors.js#L192
// // function (bodyA, bodyB){
// // // use Newton's law of gravitation
// // var bToA = Matter.Vector.sub(bodyB.position, bodyA.position),
// // distanceSq = Matter.Vector.magnitudeSquared(bToA) || 0.0001,
// // normal = Matter.Vector.normalise(bToA),
// // magnitude = -MatterAttractors.Attractors.gravityConstant * (bodyA.mass * bodyB.mass / distanceSq),
// // force = Matter.Vector.mult(normal, magnitude);
// // // to apply forces to both bodies
// // Matter.Body.applyForce(bodyA, bodyA.position, Matter.Vector.neg(force));
// // Matter.Body.applyForce(bodyB, bodyB.position, force);
// // }
// ]
// function(bodyA, bodyB) {
// var force = {
// x: (bodyA.position.x - bodyB.position.x) * 1e-6,
// y: (bodyA.position.y - bodyB.position.y) * 1e-6
// }
// // apply force to both bodies
// Matter.Body.applyForce(bodyA, bodyA.position, force);
// Matter.Body.applyForce(bodyB, bodyB.position, Matter.Vector.neg(force));
// }
// INFO https://github.com/liabru/matter-attractors/blob/master/build/matter-attractors.js#L192
// function (bodyA, bodyB){
// // use Newton's law of gravitation
// var bToA = Matter.Vector.sub(bodyB.position, bodyA.position),
// distanceSq = Matter.Vector.magnitudeSquared(bToA) || 0.0001,
// normal = Matter.Vector.normalise(bToA),
// magnitude = -MatterAttractors.Attractors.gravityConstant * (bodyA.mass * bodyB.mass / distanceSq),
// force = Matter.Vector.mult(normal, magnitude);
// // to apply forces to both bodies
// Matter.Body.applyForce(bodyA, bodyA.position, Matter.Vector.neg(force));
// Matter.Body.applyForce(bodyB, bodyB.position, force);
// }
]
}
});
Matter.Body.setPosition(this.body, this.pos);
@@ -1123,7 +1126,7 @@ export default {
if (!this.is_opened) {
this.paper_main_object.children.entites_superposes.visible = true; // if not opened and has_superpositions draw the entites_superposes points
} else {
this.paper_main_object.children.entites_superposes.visible = false;
this.paper_main_object.children.entites_superposes.visible = true;
}
} else {
this.paper_main_object.children.entites_superposes.visible = false;
@@ -1389,15 +1392,32 @@ export default {
Matter.Body.scale(this.body, obj.s, obj.s)
this.paper_main_object.scale(obj.s);
// update superposition constraints
if (Object.keys(this.concernement.superposition_constraints).length) {
// console.log('concernement superposition_constraints', this.concernement.superposition_constraints);
for(let constraint_id in this.concernement.superposition_constraints) {
let constraint = this.concernement.superposition_constraints[constraint_id];
// console.log('concernement mapitem constraint', constraint);
let ab = this.id === constraint.concernementA.id ? 'A' : 'B';
let point = constraint[`point${ab}`];
// console.log('point', point);
// revert to the original point
let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
let newpoint = Matter.Vector.create(oripoint.x * obj.s, oripoint.y * obj.s)
constraint[`point${ab}`] = newpoint;
}
}
// record new scale
this.prev_scale = this.scale;
this.scale = obj.s;
this.opacity = obj.o;
// console.log('tween update obj.s', obj.s);
this.pos = {x:obj.x, y:obj.y};
Matter.Body.setPosition(this.body, this.pos);
})
.onComplete((obj) => {
// console.log('tween complete obj.s', obj.s);
// record tween one last time
this.prev_scale = this.scale = obj.s;
this.opacity = obj.o;
@@ -1416,6 +1436,8 @@ export default {
});
Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
this.is_opening = false;
});
// recreate the matter engine event to get it a the end of the events stack
@@ -1446,6 +1468,22 @@ export default {
Matter.Body.scale(this.body, obj.s, obj.s)
this.paper_main_object.scale(obj.s);
// update superposition constraints
if (this.concernement.superposition_constraints && Object.keys(this.concernement.superposition_constraints).length) {
// console.log('concernement superposition_constraints', this.concernement.superposition_constraints);
for(let constraint_id in this.concernement.superposition_constraints) {
let constraint = this.concernement.superposition_constraints[constraint_id];
// console.log('concernement mapitem constraint', constraint);
let ab = this.id === constraint.concernementA.id ? 'A' : 'B';
let point = constraint[`point${ab}`];
// console.log('point', point);
// revert to the original point
let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
let newpoint = Matter.Vector.create(oripoint.x * obj.s, oripoint.y * obj.s)
constraint[`point${ab}`] = newpoint;
}
}
// record new scale
this.prev_scale = this.scale;
this.scale = obj.s;
@@ -1476,7 +1514,7 @@ export default {
}
if (this.opened_concernement) {
if (this.opened_concernement.id !== this.id) {
if (this.opened_concernement.id !== this.id && this.opened_concernement.superposed_concernements_id.indexOf(this.id) < 0) {
this.pushAside()
}
} else if (this.map_mode === 'proximite'

38
src/components/MapConcernements.vue
View File

@@ -233,7 +233,7 @@ export default {
allSuperpositions: {
handler (n, o) {
console.log('concernementMap watch allSuperpositions', o, n);
if (n && n.length) {
if (this.map_mode === "superposition" && n && n.length) {
// create constraints with a delay (watch is needed for first page load)
window.setTimeout(this.setSuperpositionsMatterConstraints, 200);
}
@@ -243,7 +243,16 @@ export default {
// }
},
deep: true
}
},
// opened_concernement: {
// handler (n, o) {
// console.log('map opened_concernement', this.opened_concernement);
// if (this.map_mode === 'superposition' && n) {
// this.resetSuperpositionsMatterConstraints();
// }
// },
// deep: true
// }
},
methods: {
...mapActions(ConcernementsStore,['setMapMode',
@@ -1053,7 +1062,7 @@ export default {
// get the entite coordinates inside the concernement body
let pointA = null;
let concernementA = this.concernementsByID[superposition[0].cid];
// console.log('concernementA', concernementA);
console.log('concernementA', concernementA);
for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){
if (entiteA.entite && entiteA.entite.id === superposition[0].eid && entiteA.display) {
// console.log('entiteA', entiteA);
@@ -1063,7 +1072,7 @@ export default {
}
let pointB = null;
let concernementB = this.concernementsByID[superposition[1].cid];
// console.log('concernementB', concernementB);
console.log('concernementB', concernementB);
for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){
if (entiteB.entite && entiteB.entite.id === superposition[1].eid && entiteB.display) {
// console.log('entiteB', entiteB);
@@ -1081,20 +1090,39 @@ export default {
pointB: pointB,
stiffness: 1,
length: 0,
damping: 1
damping: 1,
concernementA: concernementA,
concernementB: concernementB
});
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)
concernementA.superposition_constraints[c.id] = c;
concernementB.superposition_constraints[c.id] = c;
// 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) {
concernementB.superposed_concernements_id.push(concernementA.id);
}
}
}
},
clearSuperpositionsMatterConstraints(){
console.log('clearSuperpositionsMatterConstraints', this.superpositions_constraints);
for(let constraint of this.superpositions_constraints){
delete constraint.concernementA.superposition_constraints[constraint.id];
delete constraint.concernementB.superposition_constraints[constraint.id];
Matter.Composite.remove(this.world, constraint, true);
}
this.superpositions_constraints = [];
},
// resetSuperpositionsMatterConstraints(){
// this.clearSuperpositionsMatterConstraints();
// this.setSuperpositionsMatterConstraints();
// },
onBeforeEngineUpdate(){
},

20
src/stores/concernements.js
View File

@@ -92,25 +92,14 @@ export const ConcernementsStore = defineStore({
// SUPERPOSITIONS
if (entite.entite.superposition.length) {
concernement.has_superpositions = true;
concernement.superposition_constraints = {};
concernement.superposed_concernements_id = [];
entite.entite.superposition.forEach(entite_superpose => {
// console.log(`superposition eid:${entite.entite.id}, teid:${entite_superpose.id}`);
let already_recorded = false;
// loop through all already recorded superposition to complete the array instead of create duplicates
// TODO check if target cid and eid are accessible before recording the superposition
for(let superposition of this.allSuperpositions) {
// if (superposition.indexOf(entite_superpose.id) >= 0) {
// already_recorded = true;
// if (superposition.indexOf(entite.entite.id) < 0) {
// superposition.push(entite.entite.id)
// }
// break;
// }
// if (superposition.indexOf(entite.entite.id) >= 0) {
// already_recorded = true;
// if (superposition.indexOf(entite_superpose.id) < 0) {
// superposition.push(entite_superpose.id)
// }
// break;
// }
for(let superposition_item of superposition) {
if (superposition_item.eid === entite.entite.id && !superposition_item.cid) {
console.log(`already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title);
@@ -316,6 +305,9 @@ export const ConcernementsStore = defineStore({
}
});
},
setConcernementMapItem (id, o) {
this.concernementsByID[id].map_item = o;
},
resetConcernementOpened () {
this.opened_concernement = null;
this.openCloseConcernements();

2
src/views/Concernement.vue
View File

@@ -106,7 +106,7 @@ export default {
<template>
<section v-if="opened_concernement" class="concernement">
<TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'" :id="id" :eid="eid" :entite="entite"/>
<TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'|| map_mode === 'superposition'" :id="id" :eid="eid" :entite="entite"/>
<PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
<Doleancer v-if="map_mode === 'doleancer'" :id="id"/>
<nav class="close-concernement" @click="closeConcernement">