<script setup>
import { ref, onMounted } from "vue";
import { FreeMoveFunc, ForgeConst } from "jsview";

const div1 = ref();
const div2 = ref();

const control1 = new FreeMoveFunc.ActControlDebug();
const control2 = new FreeMoveFunc.ActControlDebug();

onMounted(() => {
  const linkNexusId = FreeMoveFunc.newNexus();

  let div1View = div1.value.jsvGetProxyView();
  control1.bindForgeView(div1View, true);
  div1View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag

  control1.run([
    control1.state().startMovementSync(linkNexusId, -200, 200, -200, 200, 0b11),
  ]);

  let div2View = div2.value.jsvGetProxyView();
  control2.bindForgeView(div2View, true);
  div2View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
  control2.run([
    control2
      .condition()
      .movementSync(linkNexusId)
      .then([control2.action().ackMovementSync(-100, 100, -100, 100, 0b11, 1)]),
  ]);
});
</script>

<template>
  <div
    ref="div1"
    :style="{
      left: 50,
      top: 50,
      width: 300,
      height: 300,
      backgroundColor: '#FF0000',
    }"
  ></div>
  <div
    ref="div2"
    :style="{
      left: 550,
      top: 50,
      width: 100,
      height: 100,
      backgroundColor: '#00FF00',
    }"
  ></div>
</template>
