aida_front/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue

<template>
	<div class="repeat-setting">
		<div class="repeat-setting-item">
			<span class="label">{{ t("Canvas.angle") }}</span>
			<angle-tool
				:angle="angle"
				@input="(e) => emit('inputFillAngle', e)"
				@change="(e) => emit('changeFillAngle', e)"
			/>
		</div>
		<p></p>
		<div class="repeat-setting-item">
			<span class="label">{{ t("Canvas.scale") }}</span>
			<slider
				:min="1"
				:max="500"
				:step="1"
				is-input
				:tipFormatter="(v) => `${scale}%`"
				:value="scale"
				@input="inputFillScale"
				@change="changeFillScale"
			/>
		</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('inputFill_Gap', e, gapY)"
				@change="(e) => emit('changeFill_Gap', 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('inputFill_Gap', gapX, e)"
				@change="(e) => emit('changeFill_Gap', gapX, e)"
			/>
		</div>
		<p></p>
		<div class="repeat-setting-item">
			<span class="label">{{ t("Canvas.offset") }}</span>
			<offset-tool
				:top="(props.object.fill?.offsetY / props.object.height) * 100"
				:left="(props.object.fill?.offsetX / props.object.width) * 100"
				@input="(e) => emit('inputFillOffset', e)"
				@change="(e) => emit('changeFillOffset', e)"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, defineProps, defineEmits, computed } from "vue";
	import { getTransformScaleAngle } from "../../utils/helper";
	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,
		},
	});
	const angle = computed(
		() => getTransformScaleAngle(props.object.fill?.patternTransform).angle
	);
	const scale = computed(() => {
		const patternTransform = props.object.fill?.patternTransform;
		const scaleValue = getTransformScaleAngle(patternTransform).scale * 100;
		return Number(Number(scaleValue).toFixed(2));
	});
	const gapX = computed(() => props.object.fill_?.gapX || 0);
	const gapY = computed(() => props.object.fill_?.gapY || 0);
	const emit = defineEmits([
		"inputFillAngle",
		"changeFillAngle",
		"inputFillOffset",
		"changeFillOffset",
		"inputFillScale",
		"changeFillScale",
		"inputFill_Gap",
		"changeFill_Gap",
	]);
	const inputFillScale = (e) => {
		const scale = e / 100;
		emit("inputFillScale", scale);
	};
	const changeFillScale = (e) => {
		const scale = e / 100;
		emit("changeFillScale", scale);
	};
</script>

<style scoped lang="less">
	.repeat-setting {
		user-select: none;
		> .repeat-setting-item {
			display: flex;
			align-items: center;
			//虚线
			> .label {
				min-width: 50px;
				font-size: 14px;
			}
			> .angle-tool {
				width: 120px;
			}
		}
		> p {
			margin: 10px 0;
			width: 100%;
			height: 0;
			border-bottom: 1px dashed #e5e5e5;
		}
	}
</style>