<template>
  <sketch-rule
    :thick="thick"
    :scale="scale"
    :width="width"
    :height="height"
    :startX="startX"
    :startY="startY"
    :lines="lines"
  ></sketch-rule>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useDesignStore } from '@/store/modules/designStore/designStore'

const chartEditStore = useChartEditStore()
const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)

const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)

// 初始化标尺的缩放
const scale = 2
// x轴标尺开始的坐标数值
const startX = 0
// y轴标尺开始的坐标数值
const startY = 0
// 标尺的厚度
const thick = 20
// 初始化水平标尺上的参考线
const lines = {
  h: [],
  v: []
}
</script>

<style>
/* 横线 */
#mb-ruler .v-container .lines .line {
  border-top: 1px dashed v-bind('themeColor') !important;
}
#mb-ruler .v-container .indicator {
  border-bottom: 1px dashed v-bind('themeColor') !important;
}
/* 竖线 */
#mb-ruler .h-container .lines .line {
  border-left: 1px dashed v-bind('themeColor') !important;
}
#mb-ruler .h-container .indicator {
  border-left: 1px dashed v-bind('themeColor') !important;
}
/* 坐标数值背景颜色 */
#mb-ruler .indicator .value {
  background-color: rgba(0, 0, 0, 0);
}
/* 删除按钮 */
#mb-ruler .line .del {
  padding: 0;
  color: v-bind('themeColor');
  font-size: 26px;
  font-weight: bolder;
}
#mb-ruler .corner{
  border-width: 0!important;
}
</style>
