<template>
  <JsvFreeMoveActor
    :top="layout.top"
    :left="layout.left"
    :width="layout.width"
    :height="layout.height"
    ref="actorRef"
  >
    <img
      :src="src"
      :style="{
        width: layout.width,
        height: layout.height,
      }"
    />
  </JsvFreeMoveActor>
</template>

<script setup>
import { JsvFreeMoveActor } from "jsview";
import { shallowRef } from "vue";
import { buildBounce } from "./FreeMoveBuilder";

const props = defineProps({
  src: {
    type: String,
    required: true,
  },
  layout: {
    type: Object,
    required: true,
  },
});

let actorRef = shallowRef(null);
let vLeftSnakeControl = null;

function startSnakeAnim(left, top, bounceTimes) {
  // showSnake.value = true;
  vLeftSnakeControl = actorRef.value.control;
  vLeftSnakeControl.run((cmds) => [
    ...buildBounce(cmds, 1, left, top, bounceTimes, 2.0, (state) => {}),
  ]);
}

defineExpose({
  start: startSnakeAnim,
});
</script>
