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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/ConcernementMapItem.vue
View File

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

38
src/components/MapConcernements.vue
View File

@ -233,7 +233,7 @@ export default {
allSuperpositions: { allSuperpositions: {
handler (n, o) { handler (n, o) {
console.log('concernementMap watch allSuperpositions', o, n); 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) // create constraints with a delay (watch is needed for first page load)
window.setTimeout(this.setSuperpositionsMatterConstraints, 200); window.setTimeout(this.setSuperpositionsMatterConstraints, 200);
} }
@ -243,7 +243,16 @@ export default {
// } // }
}, },
deep: true 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: { methods: {
...mapActions(ConcernementsStore,['setMapMode', ...mapActions(ConcernementsStore,['setMapMode',
@ -1053,7 +1062,7 @@ export default {
// 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]; 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){ 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);
@ -1063,7 +1072,7 @@ export default {
} }
let pointB = null; let pointB = null;
let concernementB = this.concernementsByID[superposition[1].cid]; 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){ 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);
@ -1081,20 +1090,39 @@ export default {
pointB: pointB, pointB: pointB,
stiffness: 1, stiffness: 1,
length: 0, length: 0,
damping: 1 damping: 1,
concernementA: concernementA,
concernementB: concernementB
}); });
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)
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(){ clearSuperpositionsMatterConstraints(){
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 constraint.concernementA.superposition_constraints[constraint.id];
delete constraint.concernementB.superposition_constraints[constraint.id];
Matter.Composite.remove(this.world, constraint, true); Matter.Composite.remove(this.world, constraint, true);
} }
this.superpositions_constraints = []; this.superpositions_constraints = [];
}, },
// resetSuperpositionsMatterConstraints(){
// this.clearSuperpositionsMatterConstraints();
// this.setSuperpositionsMatterConstraints();
// },
onBeforeEngineUpdate(){ onBeforeEngineUpdate(){
}, },

20
src/stores/concernements.js
View File

@ -92,25 +92,14 @@ export const ConcernementsStore = defineStore({
// SUPERPOSITIONS // SUPERPOSITIONS
if (entite.entite.superposition.length) { if (entite.entite.superposition.length) {
concernement.has_superpositions = true; concernement.has_superpositions = true;
concernement.superposition_constraints = {};
concernement.superposed_concernements_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}`);
let already_recorded = false; let already_recorded = false;
// loop through all already recorded superposition to complete the array instead of create duplicates // 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) { 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) { for(let superposition_item of superposition) {
if (superposition_item.eid === entite.entite.id && !superposition_item.cid) { 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); 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 () { resetConcernementOpened () {
this.opened_concernement = null; this.opened_concernement = null;
this.openCloseConcernements(); this.openCloseConcernements();

2
src/views/Concernement.vue
View File

@ -106,7 +106,7 @@ export default {
<template> <template>
<section v-if="opened_concernement" class="concernement"> <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"/> <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
<Doleancer v-if="map_mode === 'doleancer'" :id="id"/> <Doleancer v-if="map_mode === 'doleancer'" :id="id"/>
<nav class="close-concernement" @click="closeConcernement"> <nav class="close-concernement" @click="closeConcernement">