<template>
  <el-form-item label="缩放：">
    <el-slider
      style="width: 100px"
      v-model="scale"
      :min="0.5"
      :step="0.01"
      :max="2"
      @change="shape.setScale(scale, true)"
    />
  </el-form-item>
  <Del @delete="$emit('delete')" />
  <div style="width: 100%">
    <el-form-item label="裁剪：">
      <el-button type="primary" @click="$emit('cropping')">裁剪</el-button>
    </el-form-item>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { BoardShape } from "../board";
import Del from "./delete.vue";

const props = defineProps<{ shape: BoardShape }>();
const emit = defineEmits<{
  (e: "delete"): void;
  (e: "blur"): void;
  (e: "inputIng", ing: boolean): void;
}>();

const scale = ref<number>(props.shape.data.scale);
watchEffect(() => {
  props.shape.setScale(scale.value, false);
});
</script>
