<template>
	<sketch-rule
		v-if="state.flowDesign.openRule"
		:thick="thick"
		:scale="scale"
		:width="canvasBox().width"
		:height="canvasBox().height"
		:shadow="shadow"
		:startX="startX"
		:startY="startY"
		:lines="lines"
	></sketch-rule>
</template>

<script setup lang="ts">
import { ref, computed, inject } from 'vue';
import { SketchRule } from 'vue3-sketch-ruler';
import 'vue3-sketch-ruler/lib/style.css';

const state: any = inject<any>('state');

// x轴标尺开始的坐标数值
const startX = ref(0);
// y轴标尺开始的坐标数值
const startY = ref(0);
// 标尺的厚度
const thick = ref(20);
// 初始化水平标尺上的参考线
const lines = {
	h: [],
	v: [],
};

const canvasBox = () => {
	const layoutDom: any = document.getElementById('main');
	if (layoutDom) {
		return {
			height: layoutDom.clientHeight,
			width: layoutDom.clientWidth,
		};
	}
	return {
		width: 1000,
		height: 600,
	};
};

const shadow = computed(() => {
	return {
		x: 0,
		y: 0,
		width: canvasBox().width,
		height: canvasBox().height,
	};
});

const scale = computed(() => {
	return 1;
});
</script>
