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

<template>
	<div class="repeat-setting">
		<div class="title">{{ t("Canvas.repeatSetting") }}</div>
		<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)"
				style-type="2"
			/>
		</div>
		<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>
		<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>
		<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>
		<div class="repeat-setting-item">
			<span class="label">{{ t("Canvas.offset") }}</span>
			<offset-tool
				:left="offsetX"
				:top="offsetY"
				@input="(e) => emit('inputFillOffset', e)"
				@change="(e) => emit('changeFillOffset', e)"
				:show-dish="false"
			/>
		</div>
		<div class="repeat-setting-item offset">
			<offset-tool
				:left="offsetX"
				:top="offsetY"
				@input="(e) => emit('inputFillOffset', e)"
				@change="(e) => emit('changeFillOffset', e)"
				:show-input="false"
			/>
		</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 offsetX = computed(
		() => (props.object.fill?.offsetX / props.object.width) * 100
	);
	const offsetY = computed(
		() => (props.object.fill?.offsetY / props.object.height) * 100
	);
	const emit = defineEmits([
		"inputFillAngle",
		"changeFillAngle",
		"inputFillOffset",
		"changeFillOffset",
		"inputFillScale",
		"changeFillScale",
		"inputFillGap",
		"changeFillGap",
	]);
	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;
		width: 228px;
		> .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>