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

<template>
	<transition name="fade">
		<div
			class="select-menu-panel"
			v-if="visible"
			:class="{ active: !closePanel }"
		>
			<div class="btn" @click="setClosePanel">
				<i class="fi fi-br-angle-left"></i>
			</div>
			<!-- 变换工具顶部 -->
			<div class="panel-select">
				<!-- <div class="panel-header">
					<div class="header-title">变换工具</div>
				</div> -->
				<!-- 分割线 -->
				<!-- <div class="panel-divider"></div> -->
				<!-- 变换工具内容 -->
				<div class="tool-content">
					<div
						class="object-item"
						v-for="v in activeObjects"
						:key="v.id"
					>
						<div class="title">{{ v.layer?.name }}</div>
						<div class="list">
							<div>
								<span class="label">W</span>
								<input
									type="number"
									:value="v.width"
									disabled
								/>
							</div>
							<div>
								<span class="label">H</span>
								<input
									type="number"
									:value="v.height"
									disabled
								/>
							</div>
							<!-- <div>
								<span class="label">X</span>
								<input type="number" :value="v.left" disabled />
							</div>
							<div>
								<span class="label">Y</span>
								<input type="number" :value="v.top" disabled />
							</div> -->
							<div>
								<span class="label iconfont icon-angle"></span>
								<input
									type="number"
									:value="Number(Number(v.angle).toFixed(3))"
									@change="(e) => changeAngle(e, v)"
								/>
							</div>
							<div class="btn" @click="clickflipHorizontal(v)">
								<i class="iconfont icon-flip-horizontal"></i>
								<p class="tip">
									{{ t("Canvas.flipHorizontal") }}
								</p>
							</div>
							<div class="btn" @click="clickflipVertical(v)">
								<i class="iconfont icon-flip-vertical"></i>
								<p class="tip">
									{{ t("Canvas.flipVertical") }}
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script setup>
	import showViewVideo from "@/tool/mount";
	import { ref, onMounted, watch, onUnmounted } from "vue";
	import { useI18n } from "vue-i18n";
	import { ToolCommand } from "../commands/ToolCommands";
	import { OperationType } from "../utils/layerHelper";
	import { TransformCommand } from "../commands/StateCommands";
	const props = defineProps({
		canvas: {
			type: Object,
			required: true,
		},
		commandManager: {
			type: Object,
			required: true,
		},
		selectManager: {
			type: Object,
			required: true,
		},
		layerManager: {
			type: Object,
			required: true,
		},
		toolManager: {
			type: Object,
			required: true,
		},
		activeTool: {
			type: String,
			required: false,
			default: null,
		},
	});

	// 响应式数据
	const visible = ref(false);
	//打开隐藏操作面板
	const closePanel = ref(false);
	const setClosePanel = () => {
		closePanel.value = !closePanel.value;
	};

	// 国际化
	const { t } = useI18n();

	onMounted(() => {
		setupCanvasListeners();
	});
	onUnmounted(() => {
		removeCanvasListeners();
	});

	// 监听 activeTool 变化
	watch(
		() => props.activeTool,
		(newTool) => {
			if (newTool === OperationType.SELECT) {
				show();
			} else {
				close();
			}
		},
		{ immediate: true }
	);

	/**
	 * 显示面板
	 */
	function show() {
		if (activeObjects.value.length === 0) return;
		visible.value = true;
		closePanel.value = true;
	}

	/**
	 * 关闭面板
	 */
	function close() {
		visible.value = false;
	}
	// 获取当前选中的对象
	const activeObjects = ref([]);
	const getActiveObject = (e) => {
		console.log("==========切换激活对象", e);
		activeObjects.value = e.selected.map((v) => v);
		activeObjects.value.forEach((v) => {
			v.layer = props.layerManager.getLayerById(v.layerId);
		});
		if (activeObjects.value.length === 0) {
			close();
		} else {
			show(false);
		}
	};
	const lastSelectLayerId = inject("lastSelectLayerId");
	const layers = inject("layers");
	const transformObject = (activeObj, initialState, finalState) => {
		const transformCmd = new TransformCommand({
			canvas: props.canvas,
			objectId: activeObj.id,
			initialState,
			finalState,
			objectType: activeObj.type,
			name: `变换 ${activeObj.type || "对象"}`,
			layerManager: props.layerManager,
			layers: layers,
			lastSelectLayerId: lastSelectLayerId,
		});
		props.layerManager.commandManager.execute(transformCmd, {
			name: "对象修改",
		});
	};

	/**
	 * 根据左上角坐标计算旋转后的新坐标
	 * @param {number} W - 宽度
	 * @param {number} H - 高度
	 * @param {number} currentX - 当前左上角x坐标
	 * @param {number} currentY - 当前左上角y坐标
	 * @param {number} currentAngleDeg - 当前角度(度)
	 * @param {number} newAngleDeg - 新角度(度)
	 * @returns {Object} 旋转后的左上角坐标 {x, y}
	 */
	function calculateRotatedTopLeftDeg(
		W,
		H,
		currentX,
		currentY,
		currentAngleDeg,
		newAngleDeg
	) {
		const currentAngle = (currentAngleDeg * Math.PI) / 180;
		const newAngle = (newAngleDeg * Math.PI) / 180;
		// 1. 用当前角度计算中心点位置
		const cosCurrent = Math.cos(currentAngle);
		const sinCurrent = Math.sin(currentAngle);
		const Cx = currentX + (W / 2) * cosCurrent - (H / 2) * sinCurrent;
		const Cy = currentY + (W / 2) * sinCurrent + (H / 2) * cosCurrent;

		// 2. 用新角度计算旋转后的左上角位置
		const cosNew = Math.cos(newAngle);
		const sinNew = Math.sin(newAngle);
		const newX = Cx + (-W / 2) * cosNew - (-H / 2) * sinNew;
		const newY = Cy + (-W / 2) * sinNew + (-H / 2) * cosNew;

		return { x: newX, y: newY };
	}
	// 改变角度
	const changeAngle = (e, obj) => {
		const initialState = TransformCommand.captureTransformState(obj);
		const finalState = { ...initialState };
		const angle = e.target.value;
		if (obj.originX === "left" && obj.originY === "top") {
			const width = obj.width * obj.scaleX;
			const height = obj.height * obj.scaleY;
			const left = obj.left;
			const top = obj.top;
			const { x, y } = calculateRotatedTopLeftDeg(
				width,
				height,
				left,
				top,
				obj.angle,
				angle
			);
			finalState.left = x;
			finalState.top = y;
		}
		finalState.angle = angle;
		transformObject(obj, initialState, finalState);
	};
	// 水平翻转
	const clickflipHorizontal = (obj) => {
		const initialState = TransformCommand.captureTransformState(obj);
		const finalState = { ...initialState };
		finalState.flipX = !finalState.flipX;
		transformObject(obj, initialState, finalState);
	};
	// 垂直翻转
	const clickflipVertical = (obj) => {
		const initialState = TransformCommand.captureTransformState(obj);
		const finalState = { ...initialState };
		finalState.flipY = !finalState.flipY;
		transformObject(obj, initialState, finalState);
	};

	const updateActiveObjects = (arrs, keys) => {
		arrs.forEach((v) => {
			activeObjects.value.forEach((item) => {
				if (item.id === v.id) {
					keys.forEach((key) => (item[key] = v[key]));
				}
			});
			activeObjects.value = [...activeObjects.value];
		});
	};

	const objectRotatingChange = (e) => {
		const arrs = [];
		if (e.target._objects) {
			e.target._objects.forEach((v) => arrs.push(v));
		} else {
			arrs.push(e.target);
		}
		updateActiveObjects(arrs, ["angle"]);
	};

	/**
	 * 设置画布事件监听
	 */
	function setupCanvasListeners() {
		if (!props.canvas) return;
		// 鼠标事件
		props.canvas.on("selection:created", getActiveObject);
		props.canvas.on("selection:updated", getActiveObject);
		// props.canvas.on("selection:cleared", () => console.log("selection:cleared"));
		props.canvas.on("object:rotating", objectRotatingChange);
	}

	/**
	 * 移除画布事件监听
	 */
	function removeCanvasListeners() {
		if (!props.canvas) return;

		// 移除鼠标事件
		props.canvas.off("selection:created", getActiveObject);
		props.canvas.off("selection:updated", getActiveObject);
		// props.canvas.off("selection:cleared");
		props.canvas.off("object:rotating", objectRotatingChange);
	}
</script>

<style scoped lang="less">
	.select-menu-panel {
		position: absolute;
		bottom: 22px;
		left: 20px;
		right: 20px;
		max-width: min(90vw, 640px);
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		border-radius: 8px;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		color: #333;
		border: 1px solid rgba(0, 0, 0, 0.05);
		user-select: none;
		&.active {
			transform: translateY(100%);
			> .btn {
				> i {
					transform: rotate(90deg);
				}
			}
		}
		> .btn {
			width: 100%;
			height: 22px;
			text-align: center;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;

			> i {
				font-size: 1.4rem;
				transform: rotate(270deg);
			}
		}
	}

	/* 平板和手机适配 */
	@media screen and (max-width: 768px) {
		.select-menu-panel {
			bottom: 15px;
			left: 15px;
			right: 15px;
			max-width: calc(100vw - 30px);
			border-radius: 6px;
		}
	}

	@media screen and (max-width: 480px) {
		.select-menu-panel {
			bottom: 10px;
			left: 10px;
			right: 10px;
			max-width: calc(100vw - 20px);
		}
	}

	.select-menu-panel.is-active {
		transform: translateY(0);
	}

	.panel-header {
		padding: 8px 15px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 8px 8px 0 0;
	}

	.header-title {
		font-size: 13px;
		font-weight: 500;
		color: #333;
		text-align: left;
	}

	.panel-select {
		// padding: 0 0 10px;
	}

	/* 平板适配 */
	@media screen and (max-width: 768px) {
		.panel-header {
			padding: 6px 12px;
			border-radius: 6px 6px 0 0;
		}
	}

	/* 手机适配 */
	@media screen and (max-width: 480px) {
		.panel-header {
			padding: 5px 10px;
		}

		.header-title {
			font-size: 12px;
		}
	}

	.tool-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.05);
		border: none;
		border-radius: 6px;
		padding: 6px;
		color: #333;
		cursor: pointer;
		transition: all 0.2s;
	}

	.tool-btn span {
		margin-top: 0;
		font-size: 12px;
	}

	.tool-btn svg {
		width: 24px;
		height: 24px;
	}

	.tool-btn:hover {
		background-color: rgba(0, 0, 0, 0.08);
	}

	.tool-btn.active {
		background-color: #007aff;
		color: white;
	}

	.panel-divider {
		height: 1px;
		background-color: rgba(0, 0, 0, 0.05);
		margin: 0 10px 5px 10px;
	}

	.tool-content {
		overflow-y: auto;
		max-height: 220px;
		margin-top: 10px;
		padding: 0 10px;
		> .object-item {
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			padding: 10px 0;
			&:last-child {
				border-bottom: none;
			}
			> .title {
				text-align: left;
				margin-bottom: 5px;
			}
			> .list {
				display: flex;
				> div {
					margin-right: 15px;
					font-size: 14px;
					color: #474747;
					> .label {
						margin-right: 5px;
					}
					> input {
						width: 65px;
					}
					.iconfont {
						font-size: 14px;
					}
				}
				> div.btn {
					position: relative;
					min-width: 24px;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 2px;
					transition: background-color 0.2s;
					background-color: rgba(0, 0, 0, 0);
					> .tip {
						position: absolute;
						top: -5px;
						left: 50%;
						transform: translate(-50%, -100%);
						background-color: rgba(0, 0, 0, 0.7);
						color: white;
						padding: 0.4rem 0.8rem;
						border-radius: 0.4rem;
						margin-left: 0.8rem;
						font-size: 1.2rem;
						white-space: nowrap;
						pointer-events: none;
						display: none;
						&::after {
							content: "";
							position: absolute;
							top: 97%;
							left: 50%;
							transform: translateX(-50%);
							width: 0;
							height: 0;
							border-left: 5px solid transparent;
							border-right: 5px solid transparent;
							border-top: 5px solid rgba(0, 0, 0, 0.8);
						}
					}
					&:hover {
						background-color: rgba(0, 0, 0, 0.08);
						> .tip {
							display: block;
						}
					}
				}
			}
		}
	}

	/* 平板适配 - 每行4个按钮 */
	@media screen and (max-width: 768px) {
		.tool-content {
			grid-template-columns: repeat(3, 1fr);
			gap: 8px 6px;
			padding: 0 8px;
		}
	}

	/* 手机适配 - 每行3个按钮 */
	@media screen and (max-width: 480px) {
		.tool-content {
			grid-template-columns: repeat(3, 1fr);
			gap: 6px 4px;
			padding: 0 6px;
		}

		.header-btn {
			font-size: 11px;
			padding: 2px 4px;
			min-width: 28px;
		}
	}

	.action-btn {
		display: flex;
		// flex-direction: column;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		color: #333;
		cursor: pointer;
		padding: 0;
		gap: 4px;
		.c-svg {
			width: auto;
		}
	}

	.action-btn svg {
		width: 22px;
		height: 22px;
		margin-bottom: 8px;
	}

	.btn-text {
		display: block;
		font-size: 12px;
		text-align: center;
	}

	.action-btn:hover {
		color: #007aff;
	}

	.action-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	/* 对话框样式 */
	.dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2000;
	}

	.dialog-container {
		background-color: #ffffff;
		border-radius: 12px;
		width: 280px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		border: 1px solid rgba(0, 0, 0, 0.05);
	}

	.dialog-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	.dialog-header h3 {
		margin: 0;
		font-size: 15px;
		color: #333;
		font-weight: 500;
	}

	.close-dialog-btn {
		background: none;
		border: none;
		color: #666;
		font-size: 18px;
		cursor: pointer;
		padding: 0;
		line-height: 1;
	}

	.dialog-content {
		padding: 15px;
	}

	.feather-control {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.slider-control {
		flex: 1;
		height: 4px;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 2px;
		-webkit-appearance: none;
		appearance: none;
		margin-right: 10px;
	}

	.slider-control::-webkit-slider-thumb {
		-webkit-appearance: none;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #007aff;
		cursor: pointer;
	}

	.feather-value {
		font-size: 14px;
		color: #333;
		min-width: 40px;
		text-align: right;
	}

	.dialog-buttons {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		margin-top: 15px;
	}

	.cancel-btn,
	.confirm-btn {
		padding: 8px 16px;
		border-radius: 6px;
		font-size: 14px;
		cursor: pointer;
		border: none;
	}

	.cancel-btn {
		background-color: rgba(0, 0, 0, 0.05);
		color: #333;
	}

	.confirm-btn {
		background-color: #007aff;
		color: white;
	}

	.color-picker {
		width: 100%;
		height: 40px;
		border: none;
		border-radius: 6px;
		cursor: pointer;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s, transform 0.3s;
	}
	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
		transform: translateY(30px);
	}
</style>