|
@@ -1,14 +1,24 @@
|
|
|
<script>
|
|
|
|
|
|
-// import { mapActions, mapState } from 'pinia'
|
|
|
-// import { ConcernementsStore } from '@/stores/concernements'
|
|
|
+// https://brm.io/matter-js/docs/classes/Engine.html
|
|
|
+import {
|
|
|
+ // Engine,
|
|
|
+ // Render,
|
|
|
+ // World,
|
|
|
+ Bodies,
|
|
|
+ Body,
|
|
|
+ Events,
|
|
|
+ Composite,
|
|
|
+ // Composites,
|
|
|
+ // Constraint,
|
|
|
+ // Vertices,
|
|
|
+ // Mouse,
|
|
|
+ // MouseConstraint,
|
|
|
+ // Query,
|
|
|
+ // Common
|
|
|
+} from "matter-js";
|
|
|
|
|
|
|
|
|
-// import LoginBlock from '@components/block/LoginBlock.vue'
|
|
|
-// import UserTools from '@components/block/UserTools.vue'
|
|
|
-
|
|
|
-// import MA from '/api/ma-axios'
|
|
|
-
|
|
|
export default {
|
|
|
inject: ['canvasMap'],
|
|
|
data() {
|
|
@@ -21,18 +31,23 @@ export default {
|
|
|
},
|
|
|
ray: 60,
|
|
|
time: 0,
|
|
|
- salientPoints: []
|
|
|
+ salientPoints: [],
|
|
|
+ // matter
|
|
|
+ body: null
|
|
|
}
|
|
|
},
|
|
|
props: ['concernement'],
|
|
|
created () {
|
|
|
- // console.log("ConcernementsMapItem concernement", this.concernement);
|
|
|
+ console.log("ConcernementsMapItem concernement", this.canvasMap);
|
|
|
this.entites = this.concernement.entites
|
|
|
this.parsePoints()
|
|
|
this.getSalientPoints()
|
|
|
- if (this.canvasMap) {
|
|
|
- this.initCanvasMap()
|
|
|
- }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // console.log('concernementItem mounted', typeof this.canvasMap.canvas);
|
|
|
+ // if (this.canvasMap) {
|
|
|
+ // // this.initCanvasMap()
|
|
|
+ // }
|
|
|
},
|
|
|
watch: {
|
|
|
// canvasMap (n, o) {
|
|
@@ -40,7 +55,7 @@ export default {
|
|
|
// }
|
|
|
canvasMap: {
|
|
|
handler (n, o){
|
|
|
- console.log("concernementItem watch canvasMap.ctx", o, n);
|
|
|
+ // console.log("concernementItem watch canvasMap.ctx", typeof this.canvas, o, n);
|
|
|
if (!this.canvas) {
|
|
|
this.initCanvasMap()
|
|
|
}
|
|
@@ -50,12 +65,36 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
initCanvasMap (){
|
|
|
+ // record canvas and ctx for rendering (drawing)
|
|
|
this.canvas = this.canvasMap.canvas
|
|
|
this.ctx = this.canvasMap.ctx
|
|
|
+
|
|
|
+ // define init position of the item
|
|
|
this.pos.x = this.ray/2 + Math.random()*(this.canvas.width - this.ray)
|
|
|
this.pos.y = this.ray/2 + Math.random()*(this.canvas.height - this.ray)
|
|
|
- // listen for animate event dispatched from parent
|
|
|
- this.canvas.addEventListener('animate', this.animate)
|
|
|
+
|
|
|
+ // MATTER
|
|
|
+ // create the matter body and add it to the engine
|
|
|
+ if (!this.body) {
|
|
|
+ console.log('concernementItem creating body');
|
|
|
+ this.body = Bodies.circle(this.pos.x, this.pos.y, this.ray, {
|
|
|
+ frictionAir: 0,
|
|
|
+ mass: this.entites.length,
|
|
|
+ restitution: 0.9
|
|
|
+ });
|
|
|
+ // Body.setPosition(this.body, this.pos);
|
|
|
+ Body.setVelocity(this.body, {
|
|
|
+ x: -50 + Math.random()*50,
|
|
|
+ y: -50 + Math.random()*50
|
|
|
+ });
|
|
|
+ // console.log('concernementItem mass', this.body.mass);
|
|
|
+ Composite.add(this.canvasMap.matter.engine.world, this.body);
|
|
|
+ }
|
|
|
+
|
|
|
+ // // listen for animate event dispatched from parent
|
|
|
+ // this.canvas.addEventListener('animate', this.animate)
|
|
|
+ // listen for afterUpdate event from Matter.Engine object
|
|
|
+ Events.on(this.canvasMap.matter.engine, "afterUpdate", this.animate)
|
|
|
},
|
|
|
parsePoints (){
|
|
|
// converts data (menace/maintien, actuel/future, prise) into atcual position x,y
|
|
@@ -120,11 +159,11 @@ export default {
|
|
|
}
|
|
|
console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
|
|
|
},
|
|
|
- animate () {
|
|
|
+ animate (event) {
|
|
|
if (this.ctx) {
|
|
|
// this var is only here to trigger the render()
|
|
|
this.time = Date.now();
|
|
|
- // this.pos.x += 0;
|
|
|
+ this.pos = this.body.position;
|
|
|
}
|
|
|
}
|
|
|
},
|