<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 14:52:08
 * @Description: file content
-->
<script setup>
import { useFocusHub } from "jsview";
import Center from "./center/Center.vue";
import Backward from "./backward/Backward.vue";
import Stretch from "./stretch/App.vue";

import { onMounted } from "vue";

const focusHub = useFocusHub();

onMounted(() => {
  focusHub.setFocus("itemResizeCenter");
});
</script>

<template>
  <div
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#007788',
    }"
  >
    <div :style="{ left: 150, top: 10 }" class="text">
      获焦后放大, 按ok键可以控制放大/缩小, 放大动画以中心为锚点
    </div>
    <div :style="{ left: 150, top: 50 }">
      <center />
    </div>
    <div :style="{ left: 150, top: 220 }" class="text">
      获焦一秒后放大, 放大动画以左侧为锚点
    </div>
    <div :style="{ left: 150, top: 260 }">
      <backward />
    </div>
    <div :style="{ left: 150, top: 430 }" class="text">
      推拉组件
    </div>
    <div :style="{ left: 150, top: 470 }">
      <stretch />
    </div>
  </div>
</template>

<style scoped>
.text {
  width: 1280;
  height: 30;
  line-height: 30;
  font-size: 25;
  color: #ffffff;
}
</style>
