better pushAside & bringToCenter logarithmic algorithem

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(){
-      
+      // console.log('pushAside', this.opened_concernement);
-      // INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249 
-      
       // 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
+      // INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249 
-      // let minp = 0;
+      let pseudo_center_x = (this.canvas.width - this.cartouch_width) / 2;
-      // let maxp = this.canvas.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 ori_pos = {x:pseudo_center_x, y:this.body.position.y};
-      let x_force = Math.pow(dist/700,100) * dir;
-      
-      let ori_pos = {x:this.canvas.width/2, 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 pseudo_center_x = (this.canvas.width - this.cartouch_width) / 2;
-      let dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
+      // get the direction to the centre
-      let ori_pos = dir < 0 ? {x:this.canvas.width, y:this.body.position.y} : {x:0, y:this.body.position.y}
+      let dir = this.pos.x > pseudo_center_x 
-      let x_force = Math.pow(dist/800,10) * dir;
+        ? -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;
 

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: {