|
@@ -10,33 +10,167 @@
|
|
|
// import MA from '/api/ma-axios'
|
|
|
|
|
|
export default {
|
|
|
+ inject: ['canvasMap'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ canvas: null,
|
|
|
+ ctx: null,
|
|
|
+ pos : {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ },
|
|
|
+ ray: 60,
|
|
|
+ time: 0,
|
|
|
+ salientPoints: []
|
|
|
+ }
|
|
|
+ },
|
|
|
props: ['concernement'],
|
|
|
- // data(){
|
|
|
- // return {
|
|
|
- // block: null
|
|
|
- // }
|
|
|
- // },
|
|
|
- // computed: {
|
|
|
- // ...mapState(UserStore,['isloggedin'])
|
|
|
- // },
|
|
|
created () {
|
|
|
- console.log("ConcernementsMapItem created");
|
|
|
+ console.log("ConcernementsMapItem concernement", this.concernement);
|
|
|
+ this.entites = this.concernement.entites
|
|
|
+ this.parsePoints()
|
|
|
+ this.getSalientPoints()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // canvasMap (n, o) {
|
|
|
+ // console.log("concernementItem watch canvasMap", o, n);
|
|
|
+ // }
|
|
|
+ canvasMap: {
|
|
|
+ handler (n, o){
|
|
|
+ // console.log("concernementItem watch canvasMap.ctx", o, n);
|
|
|
+ this.canvas = this.canvasMap.canvas
|
|
|
+ this.ctx = this.canvasMap.ctx
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- // ...mapActions(ConcernementsStore,['loadConcernements'])
|
|
|
- }
|
|
|
- // components: {
|
|
|
- // LoginBlock,
|
|
|
- // UserTools
|
|
|
- // }
|
|
|
-}
|
|
|
+ parsePoints (){
|
|
|
+ for (let i = 0; i < this.entites.length; i++) {
|
|
|
+ let entite = this.entites[i]
|
|
|
+ console.log('entite', entite);
|
|
|
+
|
|
|
+ this.entites[i].display = {
|
|
|
+ alpha: null,
|
|
|
+ ray: null
|
|
|
+ }
|
|
|
+ // RAYON
|
|
|
+ // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
|
|
|
+ // slope = (output_end - output_start) / (input_end - input_start)
|
|
|
+ // output = output_start + slope * (input - input_start)
|
|
|
+ // from range 0 -> 100 to range 0 -> this.ray
|
|
|
+ let slope = this.ray / 100
|
|
|
+ this.entites[i].display.ray = slope * (100 - entite.prise);
|
|
|
|
|
|
-</script>
|
|
|
+ // ANGLE
|
|
|
+ // -90 <= mm <= 90
|
|
|
+ if (entite.actuelfuture) {
|
|
|
+ // future en haut : 180 <= a <= 360
|
|
|
+ // from -90 -> 90 to range 180 -> 360
|
|
|
+ this.entites[i].display.alpha = entite.menacemaintien + 270
|
|
|
+ } else {
|
|
|
+ // actuel: en bas : O <= a <= 180
|
|
|
+ // from -90 -> 90 to range 180 -> 0
|
|
|
+ this.entites[i].display.alpha = -1 * entite.menacemaintien + 90
|
|
|
+ }
|
|
|
+
|
|
|
+ // POSITION X Y (par rapport au centre de l'entite)
|
|
|
+ this.entites[i].display.pos = {
|
|
|
+ x: this.entites[i].display.ray * Math.cos(this.entites[i].display.alpha * (Math.PI/180)),
|
|
|
+ y: this.entites[i].display.ray * Math.sin(this.entites[i].display.alpha * (Math.PI/180))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getSalientPoints () {
|
|
|
+ // debugger
|
|
|
+ // console.log(this.entites);
|
|
|
+ let arc = 60;
|
|
|
+ // loop through arcs
|
|
|
+ for (let i = 0; i <= 360/arc; i++) {
|
|
|
+ // loop through entities to find the farest on the arc
|
|
|
+ let max_r = 0;
|
|
|
+ let farest = null;
|
|
|
+ for (let j = 0; j < this.entites.length; j++) {
|
|
|
+ let entite = this.entites[j];
|
|
|
+ if(arc*i <= entite.display.alpha && entite.display.alpha <= arc*i+arc) {
|
|
|
+ // if entity is in arc
|
|
|
+ if (entite.display.ray > max_r) {
|
|
|
+ // if entity is farest from precedent one
|
|
|
+ max_r = entite.display.ray;
|
|
|
+ farest = entite;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (farest) {
|
|
|
+ this.salientPoints.push(farest.display)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('this.salientPoints', this.salientPoints);
|
|
|
+ },
|
|
|
+ animate () {
|
|
|
+ if (this.ctx) {
|
|
|
+ // this var is only here to trigger the render()
|
|
|
+ this.time = Date.now();
|
|
|
+ // this.pos.x += 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ // console.log('render()');
|
|
|
+
|
|
|
+ if (!this.ctx) return;
|
|
|
+
|
|
|
+ // this var is only here to trigger the render() from animate()
|
|
|
+ let time = this.time;
|
|
|
|
|
|
-<template>
|
|
|
- <span>{{ concernement.title }}</span>
|
|
|
-</template>
|
|
|
+ // place all entities points
|
|
|
+ for (let i = 0; i < this.entites.length; i++) {
|
|
|
+ let entite = this.entites[i];
|
|
|
+ // console.log('entite', entite);
|
|
|
+ this.ctx.beginPath();
|
|
|
+ this.ctx.arc(this.pos.x+entite.display.pos.x, this.pos.y+entite.display.pos.y, 2, 0, 2 * Math.PI, false);
|
|
|
+ this.ctx.fillStyle = "#F00";
|
|
|
+ this.ctx.fill();
|
|
|
+ }
|
|
|
|
|
|
-<style lang="css" scoped>
|
|
|
+ // concernement id @center
|
|
|
+ this.ctx.beginPath();
|
|
|
+ // this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false);
|
|
|
+ this.ctx.fillStyle = "#000";
|
|
|
+ this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y)
|
|
|
+ this.ctx.fill();
|
|
|
|
|
|
-</style>
|
|
|
+ // exterieur circle
|
|
|
+ this.ctx.beginPath();
|
|
|
+ this.ctx.lineWidth = 0.5;
|
|
|
+ this.ctx.strokeStyle = "#888";
|
|
|
+ this.ctx.arc(this.pos.x, this.pos.y, this.ray, 0, 2 * Math.PI, false);
|
|
|
+ this.ctx.stroke();
|
|
|
+
|
|
|
+ // exterieur circle
|
|
|
+ this.ctx.beginPath();
|
|
|
+ this.ctx.lineWidth = 0.5;
|
|
|
+ this.ctx.strokeStyle = "#888";
|
|
|
+ this.ctx.arc(this.pos.x, this.pos.y, this.ray/2, 0, 2 * Math.PI, false);
|
|
|
+ this.ctx.stroke();
|
|
|
+
|
|
|
+ // contours
|
|
|
+ if (this.salientPoints.length > 3) {
|
|
|
+ this.ctx.beginPath();
|
|
|
+ this.ctx.lineWidth = 1;
|
|
|
+ this.ctx.strokeStyle = "#000";
|
|
|
+ this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
|
|
|
+ for (let j = 1; j < this.salientPoints.length; j++) {
|
|
|
+ this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x, this.pos.y+this.salientPoints[j].pos.y)
|
|
|
+ }
|
|
|
+ this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x, this.pos.y+this.salientPoints[0].pos.y)
|
|
|
+ this.ctx.stroke();
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|