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">图层1</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="v.angle"
									disabled
								/>
							</div>
							<div class="btn" @click="clickflipHorizontal(v)">
								<i class="iconfont icon-flip-horizontal"></i>
								<p class="tip">水平翻转</p>
							</div>
							<div class="btn" @click="clickflipVertical(v)">
								<i class="iconfont icon-flip-vertical"></i>
								<p class="tip">垂直翻转</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);
		if (activeObjects.value.length === 0) {
			close();
		} else {
			show(false);
		}
	};
	const lastSelectLayerId = inject("lastSelectLayerId");
	const layers = inject("layers");
	const changeAngle = (activeObj) => {
		// console.log("=====================", e.target.value);
		// const finalState = TransformCommand.captureTransformState(activeObj);
		// const { xPrime, yPrime } = compute(
		// 	activeObj.left,
		// 	activeObj.top,
		// 	activeObj.width,
		// 	activeObj.height,
		// 	activeObj.angle
		// );
		// finalState.left = xPrime;
		// finalState.top = yPrime;
		// const transformCmd = new TransformCommand({
		// 	canvas: props.canvas,
		// 	objectId: activeObj.id,
		// 	initialState: null,
		// 	finalState,
		// 	objectType: activeObj.type,
		// 	name: `变换 ${activeObj.type || "对象"}`,
		// 	layerManager: props.layerManager,
		// 	layers: layers,
		// 	lastSelectLayerId: lastSelectLayerId,
		// });
		// props.layerManager.commandManager.execute(transformCmd, {
		// 	name: "对象修改",
		// });
	};

	const flipObject = (activeObj, type) => {
		const initialState = TransformCommand.captureTransformState(activeObj);
		const finalState = { ...initialState };
		if (type === "h") {
			finalState.flipX = !finalState.flipX;
		} else if (type === "v") {
			finalState.flipY = !finalState.flipY;
		}
		const transformCmd = new TransformCommand({
			canvas: props.canvas,
			objectId: activeObj.id,
			initialState: initialState,
			finalState,
			objectType: activeObj.type,
			name: `变换 ${activeObj.type || "对象"}`,
			layerManager: props.layerManager,
			layers: layers,
			lastSelectLayerId: lastSelectLayerId,
		});
		props.layerManager.commandManager.execute(transformCmd, {
			name: "对象修改",
		});
	};
	const clickflipHorizontal = (obj) => {
		console.log("水平翻转");
		flipObject(obj, "h");
	};
	const clickflipVertical = (obj) => {
		console.log("垂直翻转");
		flipObject(obj, "v");
	};

	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>