started refactoring rendering with paper.js

package.json

@@ -12,9 +12,11 @@
     "@material-design-icons/svg": "^0.14.2",
     "@mdi/font": "^7.1.96",
     "@tweenjs/tween.js": "^19.0.0",
+    "fabric": "^6.0.0-beta7",
     "granim": "^2.0.0",
     "matter-attractors": "^0.1.6",
     "matter-js": "^0.19.0",
+    "paper": "^0.12.17",
     "pinia": "^2.0.21",
     "poly-decomp": "^0.3.0",
     "vue": "^3.2.38",

src/components/ConcernementMapItem.vue

@@ -23,6 +23,8 @@ import MatterAttractors from "matter-attractors";
 // Matter.use(MatterAttractors);
 // import polydecomp from "poly-decomp";
 
+import paper from 'paper';
+
 // import { easeInOutQuad, easeInOutQuart } from 'easing-utils';
 import Tween from "@tweenjs/tween.js";
 
@@ -47,12 +49,15 @@ export default {
       time: 0,
       salientPoints: [],
       scale: 1,
+      prev_scale: 1,
       opacity: 0,
       tween: null,
       body: null,
       body_parts: [],
       constraint: null,
-      isHover: false
+      isHover: false,
+      //
+      paper_objects: {}
     }
   },
   props: ['concernement', 'opened'],
@@ -219,11 +224,14 @@ export default {
       // record canvas and ctx for rendering (drawing)
       this.canvas = this.canvasMap.canvas
       this.ctx = this.canvasMap.ctx
+      // this.paper = this.canvasMap.paper
 
       // define init position of the item
       this.pos = this.getRandomPos();
       //
       this.initMatterBody()
+      //
+      this.initPaperObjects()
     },
     getRandomPos(){
       let pad = 200;
@@ -386,6 +394,38 @@ export default {
         }
       }
     },
+    initPaperObjects(){
+      this.paper_objects = new paper.Group({
+        pivot: new paper.Point(this.pos)
+      });
+
+      this.paper_objects.addChild(this.setPaperContour());
+    },
+    setPaperContour(){
+      // this.paper_objects.contours = new paper.Path.Circle({
+      //   center: [this.pos.x, this.pos.y],
+      //   radius: this.ray,
+      //   fillColor: 'red'
+      // });
+      let gap = 1;//1.15;
+      let segments = [
+        [this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap]
+      ]; 
+      for (let j = 1; j < this.salientPoints.length; j++) {
+        segments.push([this.pos.x+this.salientPoints[j].pos.x*this.scale*gap, this.pos.y+this.salientPoints[j].pos.y*this.scale*gap])
+      }
+      segments.push([this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap])
+      
+      return new paper.Path({
+        name: 'contours',
+        segments: segments,
+        strokeColor: '#000',
+        strokeWidth: 1,
+        fillColor: 'rgba(255,255,255,0.8)',
+        pivot: new paper.Point(this.pos)
+      })
+
+    },
     openClose(open) {
       // console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
       if (this.tween) {
@@ -404,9 +444,13 @@ export default {
             // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
             // revert to the original size (by reverting the previous scale)
             Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
+            this.paper_objects.scale(1 / this.scale);
             // then scale again to new scale
             Matter.Body.scale(this.body, obj.s, obj.s)
+            this.paper_objects.scale(obj.s);
+
             // record new scale
+            this.prev_scale = this.scale;
             this.scale = obj.s;
             this.opacity = obj.o;
             
@@ -422,6 +466,7 @@ export default {
               length: 0
             });
             Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
+            this.prev_scale = this.scale;
           });
           // recreate the matter engine event to get it a the end of the events stack
           Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
@@ -437,11 +482,18 @@ export default {
             // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
             // revert to the original size (by reverting the previous scale)
             Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
+            this.paper_objects.scale(1 / this.scale);
             // then scale again to new scale
             Matter.Body.scale(this.body, obj.s, obj.s)
+            this.paper_objects.scale(obj.s);
+            
             // record new scale
+            this.prev_scale = this.scale;
             this.scale = obj.s;
             this.opacity = obj.o;
+          })
+          .onComplete((obj) => {
+            this.prev_scale = this.scale = 1;
           });
       }
       this.tween.easing(Tween.Easing.Quadratic.InOut).start();
@@ -506,6 +558,19 @@ export default {
           Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
         }
       
+      this.paper_objects.position = this.pos;
+
+      // contours
+      if (!this.isFocused()){
+        this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.3)";
+        }else{
+          this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.8)";
+          if (this.isHover) {
+            this.paper_objects.children['contours'].strokeColor = "#01ffe2";
+          }else{
+            this.paper_objects.children['contours'].strokeColor = "#000";
+          }
+        }
       this.draw()
     },
     draw() {
@@ -533,8 +598,10 @@ export default {
       // contours
       if (!this.opened 
         || (this.opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
-        this.drawContour();
-      } 
+        this.paper_objects.children['contours'].visible = true;
+      } else {
+        this.paper_objects.children['contours'].visible = false;
+      }
 
       // map mode puissance d'agir
       if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") {
@@ -951,29 +1018,6 @@ export default {
     },
     drawContour(){
       if (this.salientPoints.length > 3) {
-        var fillStyle;
-        let strokeStyle = "#000";
-        if (!this.isFocused()){
-          fillStyle = "rgba(255,255,255,0.3)";
-        }else{
-          fillStyle = "rgba(255,255,255,0.8)"
-          if (this.isHover) {
-            strokeStyle = "#01ffe2";
-          }
-        }
-        this.ctx.beginPath();
-        this.ctx.lineWidth = 1;
-        this.ctx.strokeStyle = strokeStyle;
-        this.ctx.fillStyle = fillStyle;
-        let gap = 1;//1.15;
-        this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap)
-        for (let j = 1; j < this.salientPoints.length; j++) {
-          this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale*gap, this.pos.y+this.salientPoints[j].pos.y*this.scale*gap)
-        }
-        this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap)
-        this.ctx.fill();
-        this.ctx.stroke();
-
         // // test draw contour from body part
         // for (let i = 0; i < this.body.parts.length; i++) {
         //   if (this.body.parts[i].item_type === 'concernement-contours'){
@@ -1004,7 +1048,7 @@ export default {
               
         //     // }
         //   } 
-        // }
+        // 
       }
     },
     isFocused(){

src/components/MapConcernements.vue

@@ -26,6 +26,7 @@ import Matter from "matter-js";
 import MatterAttractors from "matter-attractors";
 Matter.use(MatterAttractors);
 
+import paper from 'paper';
 
 import { mapState, mapActions } from 'pinia'
 import { ConcernementsStore } from '@/stores/concernements'
@@ -38,7 +39,7 @@ export default {
     return {
       canvasMap: {
         canvas: null,
-        ctx: null,
+        ctx: null
       },
       animateEvent: new Event('animate'),
       granim: null,
@@ -85,6 +86,10 @@ export default {
 
     let canvas_w = this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
     let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
+    console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
+
+    paper.setup(this.canvasMap.canvas);
+    // console.log('this.canvasMap.paper', this.canvasMap.paper);
 
     // MATTER
     let wall_w = 100;
@@ -113,7 +118,7 @@ export default {
     ...mapActions(ConcernementsStore,['resetConcernementOpened']),
     ...mapActions(CommonStore,['setHoverElmt']),
     animate () {
-      this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
+      // this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
       // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
       Matter.Engine.update(this.engine, 1);
       // this.checkMouseHover();

src/main.js

@@ -8,9 +8,6 @@ import '@csstools/normalize.css';
 import '@mdi/font/css/materialdesignicons.css'
 import './assets/main.scss'
 
-// import VueCollapsiblePanel from '@dafcoe/vue-collapsible-panel'
-// import '@dafcoe/vue-collapsible-panel/dist/vue-collapsible-panel.css'
-
 // var decomp = require('poly-decomp');
 // window.decomp = decomp;