aida_front/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue

<template>
	<div class="repeat-setting">
		{{  }}
		<div class="repeat-setting-item">
			<span class="label">{{ t("Canvas.angle") }}</span>
			<angle-tool
				:angle="angle"
				styleType="2"
				@input="(e) => emit('inputFillAngle', e)"
			/>
		</div>
		<p></p>
		<div class="repeat-setting-item">
			<span class="label">{{ t("Canvas.scale") }}</span>
			<slider
				:min="1"
				:max="1000"
				:step="1"
				is-input
				:tipFormatter="(v) => `${scale.toFixed(0)}%`"
				:value="scale"
				@input="inputFillScale"
			/>
		</div>
		<p></p>
		<div class="repeat-setting-item">
			<span class="label">Gap X</span>
			<slider
				:min="0"
				:max="1000"
				:step="1"
				is-input
				:tipFormatter="(v) => `${v}px`"
				:value="gapX"
				@input="(e) => emit('inputFillGap', e, gapY)"
				@change="(e) => emit('changeFillGap', e, gapY)"
			/>
		</div>
		<p></p>
		<div class="repeat-setting-item">
			<span class="label">Gap Y</span>
			<slider
				:min="0"
				:max="1000"
				:step="1"
				is-input
				:tipFormatter="(v) => `${v}px`"
				:value="gapY"
				@input="(e) => emit('inputFillGap', gapX, e)"
				@change="(e) => emit('changeFillGap', gapX, e)"
			/>
		</div>
		<p></p>
		<div class="repeat-setting-item">
			<span class="label">{{ t("Canvas.offset") }}</span>
			<offset-tool
				:top="offset[1]"
				:left="offset[0]"
				@input="inputOffset"
				@change="(e) => emit('changeFillOffset', e)"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, defineProps, defineEmits, computed } from "vue";
	import AngleTool from "./tools/AngleTool.vue";
	import OffsetTool from "./tools/OffsetTool.vue";
	import Slider from "./tools/Slider.vue";
	import { useI18n } from "vue-i18n";
	const { t } = useI18n();

	const props = defineProps({
		object: {
			required: true,
			type: Object,
		},
		sketchPath: {
			required: true,
			type: String,
		},
	});
	const angle = computed(() => props.object?.angle || 0);
	const scale = computed(() => {
		// let scaleValue = props.object?.scale/10;
		// return props.object?.scale/10;
		return props.object?.scale[0] * 100;
	});
	const offset = ref([0,0])
	const sketchSize:any = async ()=>{
		let img = new Image();
		let size = [0,0];
		img.src = props.sketchPath;	
		console.log(props.sketchPath)
		await new Promise((resolve, reject) => {
			img.onload = () => {
				size = [img.width, img.height]
				resolve([img.width, img.height]);
			}
			img.onerror = reject;
		});
		return size
	}
	watch (() => props.object.path || props.object.location, async () => {
		let size = await sketchSize();
		offset.value[0] = props.object.location[0] / size[0] * 100;
		offset.value[1] = props.object.location[1] / size[1] * 100;
	},{immediate: true})
	const gapX = computed(() => props.object.object?.gapX || 0);
	const gapY = computed(() => props.object.object?.gapY || 0);
	const emit = defineEmits([
		"inputFillAngle",
		"changeFillAngle",
		"inputFillOffset",
		"changeFillOffset",
		"inputFillScale",
		"changeFillScale",
		"inputFillGap",
		"changeFillGap",
	]);
	const inputFillScale = (e) => {
		const scale = e / 100;
		console.log(scale.toFixed(2))
		emit("inputFillScale", scale.toFixed(2));
	};
	const inputOffset = async (e:any)=>{
		emit('inputFillOffset', {...e,size: await sketchSize()})
	}
</script>

<style scoped lang="less">
	.repeat-setting {
		user-select: none;
		width: 228px;
		overflow: hidden;
		> .title {
			line-height: 35px;
			font-size: 14px;
			text-align: center;
			margin-top: -12px;
			margin-bottom: 3px;
		}
		> .repeat-setting-item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			&:last-child {
				margin-bottom: 0;
			}
			&.offset {
				justify-content: center;
			}
			> .label {
				min-width: 68px;
				font-size: 12px;
			}
			&:not(.offset) > div {
				width: 120px;
				flex: 1;
			}
			> .slider {
				--slider-thumb-color1: #000;
				--slider-thumb-color2: #eee;
			}
		}
	}
</style>