<template>
  <div :style="{ left: layout.left, top: layout.top }">
    <JsvRipple
      :width="layout.width"
      :height="layout.height"
      ref="rippleViewRef"
    >
      <slot></slot>
    </JsvRipple>
  </div>
</template>

<script setup>
import { JsvRipple, JsvRippleShape } from "jsview";
import { shallowRef } from "vue";
const props = defineProps({
  layout: {
    type: Object,
    required: true,
  },
});

const rippleViewRef = shallowRef();

defineExpose({
  /* position: 位置, duration: 时长(秒) */
  addRipple(position, duration = 3) {
    //duration = ln(amplitude) / timeDecay => timeDecay = ln(amplitude) / duration
    const amplitude = 50;

    const timeDecay = Math.log(amplitude) / (duration);

    rippleViewRef.value.addSource(
      position.left,
      position.top,
      amplitude,
      {
        type: JsvRippleShape.CIRCLE,
      },
      {
        timeDecay: timeDecay,
        distanceDecay: 8,
        speed: 60,
        frequency: 2,
        waveNum: 2,
      }
    );
  },
});
</script>
