diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 7cbca52..0c24c75 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -72,7 +72,8 @@ export default { ...mapState(ConcernementsStore,['concernementsByID']), ...mapState(ConcernementsStore,['opened_concernement']), ...mapState(ConcernementsStore,['opened_entite_id']), - ...mapState(CommonStore,['hover_elmt']) + ...mapState(CommonStore,['hover_elmt']), + ...mapState(CommonStore,['cartouch_width']) }, created () { // console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine); @@ -1691,7 +1692,7 @@ export default { this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0}) .to({ s: s, - x: (this.canvas.width - 450) / 2, + x: (this.canvas.width - this.cartouch_width) / 2, y: this.canvas.height / 2, o: 0.8 }, 800) @@ -1786,19 +1787,35 @@ export default { } }, pushAside(){ - - // INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249 - + // console.log('pushAside', this.opened_concernement); // 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 - let dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side - // let minp = 0; - // let maxp = this.canvas.width / 2; + // INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249 + let pseudo_center_x = (this.canvas.width - this.cartouch_width) / 2; + // get the direction to the closest side + let dir = this.pos.x > pseudo_center_x + ? 1 // to the right + : -1; // to the left + // max and min item position + let minp = 0; + let maxp = dir < 0 + ? pseudo_center_x + : this.canvas.width - pseudo_center_x; + // max and min force + let minf = 0; + let maxf = 10; + // scale factor + let scale = (maxf-minf) / (maxp-minp); + // get the inversed distance + let dist = dir < 0 + ? this.pos.x + : this.canvas.width - this.pos.x; // get the distance from the side + // // calculate the force + // let x_force = Math.pow(dist/700,100) * dir; + // calculate the logarithmic force + let x_force = Math.exp(minf + scale*(dist-minp)) * dir; - // let dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side - let x_force = Math.pow(dist/700,100) * dir; - - let ori_pos = {x:this.canvas.width/2, y:this.body.position.y}; + let ori_pos = {x:pseudo_center_x, y:this.body.position.y}; Matter.Body.applyForce( this.body, @@ -1811,10 +1828,32 @@ export default { }, bringToCenter(){ // bring to the centre - let dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre - let dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side - let ori_pos = dir < 0 ? {x:this.canvas.width, y:this.body.position.y} : {x:0, y:this.body.position.y} - let x_force = Math.pow(dist/800,10) * dir; + let pseudo_center_x = (this.canvas.width - this.cartouch_width) / 2; + // get the direction to the centre + let dir = this.pos.x > pseudo_center_x + ? -1 // to left + : 1; // to right + // max & min item position + let minp = 0; + let maxp = dir < 0 + ? this.canvas.width - pseudo_center_x + : pseudo_center_x; + // max and min force + let minf = 0; + let maxf = 2; + // scale factor + let scale = (maxf-minf) / (maxp-minp); + // get the inversed distance from the side + let dist = dir < 0 + ? this.pos.x - pseudo_center_x + : pseudo_center_x - this.pos.x; + + let x_force = Math.exp(minf + scale*(dist-minp)) * dir; + + let ori_pos = dir < 0 + ? {x:this.canvas.width, y:this.body.position.y} + : {x:0, y:this.body.position.y}; + // let x_force = Math.pow(dist/800,10) * dir; this.body.frictionAir = 0.05; diff --git a/src/stores/common.js b/src/stores/common.js index 40ea2bb..7746934 100644 --- a/src/stores/common.js +++ b/src/stores/common.js @@ -3,7 +3,8 @@ import { defineStore } from 'pinia' export const CommonStore = defineStore({ id: 'common', state: () => ({ - hover_elmt: null + hover_elmt: null, + cartouch_width: 450 }), getters: {