<template>
  <div ref="_mazfactor" :class="`base_fanci ${snapped?'snapped':''}`">
    <div :class="`underlayer ${overlayer} ${overlayerColor}`"
         :style="`z-index:1;--from_x:${color_n1}; --to_x:${color_n2};--g_x:${w}px;--g_h:${h}px;`"></div>
    <canvas :id="elId" style="z-index: 2">Canvas not supported.</canvas>
    <slot class="fenci_layer"></slot>
  </div>
</template>

<script>

import { generateBackgroundCanvas, Clear } from "../engines/three/wrapengine/facto_generator"
import elementbase from "../mixins/tools/elementbase"

export default {
  name: "BgFactorialGen",
  mixins: [elementbase],
  props: {
    color_n1: {
      type: String,
      required: false,
      default: "#507a4b"
    },
    color_n2: {
      type: String,
      required: false,
      default: "#4fca40"
    },
    color_n3: {
      type: String,
      required: false,
      default: "#2ddb17"
    }
  },
  mounted() {
    this.$nextTick(() => {
      generateBackgroundCanvas(
        this.elId,
        this.clickGen,
        this.autoGenTime,
        this.color_n1,
        this.color_n2,
        this.color_n3,
        this.byRequirement,
        this.snapped ? this.$refs._mazfactor : undefined)
      this.updateRenderSize(this.$refs._mazfactor)
    })
  },
  beforeDestroy() {
    Clear()
  }
}
</script>

<style scoped lang="scss">
@import "../commonstyle/us";

.base_fanci {
  position: absolute;

  .fenci_layer {
    z-index: 3;
  }

  .underlayer {
    @extend .cover_basic_runner;
    width: 100vw;
    height: 100vh;
  }

  &.snapped {
    .underlayer {
      width: var(--g_x);
      height: var(--g_h);;
    }
  }
}
</style>
