<template>
  <canvas-comp
    :bg="bg"
    :canvas="canvas"
    global-composite-operation="xor"
    v-on:canvasInited="canvasInited"
    v-on:canvasResize="canvasResize"
    v-on:canvasMouseDown="canvasMouseDown"
  />
</template>

<script>
import CanvasComp from "./CanvasComp.vue";
import Proton from "proton-engine";
import RAFManager from "raf-manager";

const colors = [
  "#529B88",
  "#CDD180",
  "#FFFA32",
  "#FB6255",
  "#FB4A53",
  "#FF4E50",
  "#F9D423"
];

export default {
  name: "FountainParticles",
  components: {
    CanvasComp
  },
  props: {
    canvas: Object,
    bg: Boolean,
    color: String,
    num: Number,
    config: {}
  },
  methods: {
    canvasInited(canvas) {
      this.createProton(canvas);
      RAFManager.add(this.renderProton);
      if (this.color) {
        canvas.style.backgroundColor = this.color;
      }
    },
    canvasResize({ width, height }) {
      this.proton.renderers[0].resize(width, height);
    },
    canvasMouseDown(e) {},

    createProton(canvas) {
      const width = canvas.width;
      const height = canvas.height;
      this.proton = new Proton();
      const emitter = new Proton.Emitter();
      emitter.rate = new Proton.Rate(
        this.num ? new Proton.Span(this.num) : new Proton.Span(4, 8),
        new Proton.Span(0.1, 0.25)
      );

      emitter.addInitialize(new Proton.Mass(1));
      emitter.addInitialize(new Proton.Radius(20, 200));
      emitter.addInitialize(new Proton.Life(2, 4));
      emitter.addInitialize(
        new Proton.Velocity(
          new Proton.Span(4, 7),
          new Proton.Span(0, 360),
          "polar"
        )
      );
      emitter.addInitialize(
        new Proton.Position(new Proton.CircleZone(width / 2, height / 2, 100))
      );

      emitter.addBehaviour(new Proton.Alpha(1, 0));
      emitter.addBehaviour(new Proton.Scale(0.2, 1));
      emitter.addBehaviour(this.createCustomBehaviour());
      emitter.addBehaviour(new Proton.Color(colors, "random"));
      emitter.emit();
      this.proton.addEmitter(emitter);

      const renderer = new Proton.CanvasRenderer(canvas);
      this.proton.addRenderer(renderer);
    },
    createCustomBehaviour() {
      const f = 10 * 100;
      return {
        initialize: function(particle) {
          particle.f = new Proton.Vector2D(0, 0);
        },
        applyBehaviour: particle => {
          let length = particle.v.length() / 1000;
          let gradient = particle.v.getGradient();
          gradient += 3.14 / 2;

          particle.f.x = f * length * Math.cos(gradient);
          particle.f.y = f * length * Math.sin(gradient);
          particle.a.add(particle.f);
        }
      };
    },
    renderProton() {
      this.proton && this.proton.update();
    }
  },
  beforeDestroy() {
    try {
      this.proton.destroy();
      RAFManager.remove(this.renderProton);
    } catch (e) {}
  }
};
</script>
