451 lines
14 KiB
Vue
451 lines
14 KiB
Vue
<template>
|
||
<div class="flex-1 min-w-[60%] bg-base-200 relative overflow-hidden diagram-container" ref="canvasContainer"
|
||
@mousedown="handleCanvasMouseDown"
|
||
@mousedown.middle.prevent="startMiddleDrag"
|
||
@wheel.prevent="onZoom">
|
||
<div
|
||
ref="canvas"
|
||
class="diagram-canvas"
|
||
:style="{ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})` }"> <!-- 渲染画布上的组件 -->
|
||
<div v-for="component in props.components" :key="component.id"
|
||
class="component-wrapper"
|
||
:class="{
|
||
'component-hover': hoveredComponent === component.id,
|
||
'component-selected': selectedComponentId === component.id
|
||
}"
|
||
:style="{
|
||
top: component.y + 'px',
|
||
left: component.x + 'px',
|
||
zIndex: selectedComponentId === component.id ? 999 : 1
|
||
}"
|
||
@mousedown.left.stop="startComponentDrag($event, component)"
|
||
@mouseover="hoveredComponent = component.id"
|
||
@mouseleave="hoveredComponent = null"><!-- 动态渲染组件 -->
|
||
<component
|
||
:is="getComponentDefinition(component.type)"
|
||
v-if="props.componentModules[component.type]"
|
||
v-bind="prepareComponentProps(component.props || {})"
|
||
@update:bindKey="(value: string) => updateComponentProp(component.id, 'bindKey', value)"
|
||
:ref="el => { if (el) componentRefs[component.id] = el; }"
|
||
/>
|
||
|
||
<!-- Fallback if component module not loaded yet -->
|
||
<div v-else class="p-2 text-xs text-gray-400 border border-dashed border-gray-400">
|
||
Loading {{ component.type }}...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 缩放指示器 -->
|
||
<div class="absolute bottom-4 right-4 bg-base-100 px-3 py-1.5 rounded-md shadow-md z-20" style="opacity: 0.9;">
|
||
<span class="text-sm font-medium">{{ Math.round(scale * 100) }}%</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
||
|
||
// 定义组件接受的属性
|
||
interface ComponentItem {
|
||
id: string;
|
||
type: string;
|
||
name: string;
|
||
x: number;
|
||
y: number;
|
||
props?: Record<string, any>;
|
||
}
|
||
|
||
const props = defineProps<{
|
||
components: ComponentItem[],
|
||
componentModules: Record<string, any>
|
||
}>();
|
||
|
||
// 定义组件发出的事件
|
||
const emit = defineEmits(['component-selected', 'component-moved', 'update-component-prop', 'component-delete']);
|
||
|
||
// --- 画布状态 ---
|
||
const canvasContainer = ref<HTMLElement | null>(null);
|
||
const canvas = ref<HTMLElement | null>(null);
|
||
const position = reactive({ x: 0, y: 0 });
|
||
const scale = ref(1);
|
||
const isDragging = ref(false);
|
||
const isMiddleDragging = ref(false);
|
||
const dragStart = reactive({ x: 0, y: 0 });
|
||
const selectedComponentId = ref<string | null>(null);
|
||
const hoveredComponent = ref<string | null>(null);
|
||
const draggingComponentId = ref<string | null>(null);
|
||
const componentDragOffset = reactive({ x: 0, y: 0 });
|
||
|
||
// 组件引用跟踪
|
||
const componentRefs = ref<Record<string, any>>({});
|
||
|
||
// --- 缩放功能 ---
|
||
const MIN_SCALE = 0.2;
|
||
const MAX_SCALE = 3.0;
|
||
|
||
function onZoom(e: WheelEvent) {
|
||
e.preventDefault();
|
||
|
||
if (!canvasContainer.value) return;
|
||
|
||
// 获取容器的位置
|
||
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||
|
||
// 计算鼠标在容器内的相对位置
|
||
const mouseX = e.clientX - containerRect.left;
|
||
const mouseY = e.clientY - containerRect.top;
|
||
|
||
// 计算鼠标在画布坐标系中的位置
|
||
const mouseXCanvas = (mouseX - position.x) / scale.value;
|
||
const mouseYCanvas = (mouseY - position.y) / scale.value;
|
||
|
||
// 计算缩放值
|
||
const zoomFactor = 1.1; // 每次放大/缩小10%
|
||
const direction = e.deltaY > 0 ? -1 : 1;
|
||
|
||
// 计算新的缩放值
|
||
let newScale = direction > 0 ? scale.value * zoomFactor : scale.value / zoomFactor;
|
||
newScale = Math.max(MIN_SCALE, Math.min(newScale, MAX_SCALE));
|
||
|
||
// 计算新的位置，使鼠标指针位置在缩放前后保持不变
|
||
position.x = mouseX - mouseXCanvas * newScale;
|
||
position.y = mouseY - mouseYCanvas * newScale;
|
||
|
||
// 更新缩放值
|
||
scale.value = newScale;
|
||
}
|
||
|
||
// --- 动态组件渲染 ---
|
||
const getComponentDefinition = (type: string) => {
|
||
const module = props.componentModules[type];
|
||
if (!module) return null;
|
||
|
||
// 确保我们返回一个有效的组件定义
|
||
if (module.default) {
|
||
return module.default;
|
||
} else if (module.__esModule && module.default) {
|
||
// 有时 Vue 的动态导入会将默认导出包装在 __esModule 属性下
|
||
return module.default;
|
||
} else {
|
||
console.warn(`Module for ${type} found but default export is missing`, module);
|
||
return null;
|
||
}
|
||
};
|
||
|
||
// 准备组件属性，确保类型正确
|
||
function prepareComponentProps(props: Record<string, any>): Record<string, any> {
|
||
const result: Record<string, any> = {};
|
||
for (const key in props) {
|
||
let value = props[key];
|
||
// 只要不是 null/undefined 且不是 string，就强制转字符串
|
||
if (
|
||
(key === 'style' || key === 'direction' || key === 'type') &&
|
||
value != null &&
|
||
typeof value !== 'string'
|
||
) {
|
||
value = String(value);
|
||
}
|
||
result[key] = value;
|
||
}
|
||
return result;
|
||
}
|
||
|
||
// --- 画布交互逻辑 ---
|
||
function handleCanvasMouseDown(e: MouseEvent) {
|
||
// 如果是直接点击画布（而不是元器件），清除选中状态
|
||
if (e.target === canvasContainer.value || e.target === canvas.value) {
|
||
if (selectedComponentId.value !== null) {
|
||
selectedComponentId.value = null;
|
||
emit('component-selected', null);
|
||
}
|
||
}
|
||
|
||
// 左键拖拽画布逻辑
|
||
if (e.button === 0 && (e.target === canvasContainer.value || e.target === canvas.value)) {
|
||
startDrag(e);
|
||
}
|
||
}
|
||
|
||
// 左键拖拽画布
|
||
function startDrag(e: MouseEvent) {
|
||
if (e.button !== 0 || draggingComponentId.value) return;
|
||
|
||
isDragging.value = true;
|
||
isMiddleDragging.value = false;
|
||
dragStart.x = e.clientX - position.x;
|
||
dragStart.y = e.clientY - position.y;
|
||
|
||
document.addEventListener('mousemove', onDrag);
|
||
document.addEventListener('mouseup', stopDrag);
|
||
e.preventDefault();
|
||
}
|
||
|
||
// 中键拖拽画布
|
||
function startMiddleDrag(e: MouseEvent) {
|
||
if (e.button !== 1) return;
|
||
|
||
isMiddleDragging.value = true;
|
||
isDragging.value = false;
|
||
draggingComponentId.value = null;
|
||
|
||
dragStart.x = e.clientX - position.x;
|
||
dragStart.y = e.clientY - position.y;
|
||
|
||
document.addEventListener('mousemove', onDrag);
|
||
document.addEventListener('mouseup', stopDrag);
|
||
e.preventDefault();
|
||
}
|
||
|
||
// 拖拽画布过程
|
||
function onDrag(e: MouseEvent) {
|
||
if (!isDragging.value && !isMiddleDragging.value) return;
|
||
|
||
position.x = e.clientX - dragStart.x;
|
||
position.y = e.clientY - dragStart.y;
|
||
}
|
||
|
||
// 停止拖拽画布
|
||
function stopDrag() {
|
||
isDragging.value = false;
|
||
isMiddleDragging.value = false;
|
||
|
||
document.removeEventListener('mousemove', onDrag);
|
||
document.removeEventListener('mouseup', stopDrag);
|
||
}
|
||
|
||
// --- 组件拖拽交互 ---
|
||
function startComponentDrag(e: MouseEvent, component: ComponentItem) {
|
||
const target = e.target as HTMLElement;
|
||
|
||
// 检查点击的是否为交互元素 (如按钮、开关等)
|
||
const isInteractiveElement = (
|
||
target.tagName === 'rect' ||
|
||
target.tagName === 'circle' ||
|
||
target.tagName === 'path' ||
|
||
target.hasAttribute('fill-opacity') ||
|
||
(typeof target.className === 'string' &&
|
||
(target.className.includes('glow') || target.className.includes('interactive')))
|
||
);
|
||
|
||
// 仍然选中组件，无论是否为交互元素
|
||
if (selectedComponentId.value !== component.id) {
|
||
selectedComponentId.value = component.id;
|
||
emit('component-selected', component);
|
||
}
|
||
|
||
// 如果是交互元素，则不启动拖拽
|
||
if (isInteractiveElement || e.button !== 0) {
|
||
return;
|
||
}
|
||
|
||
// 阻止事件冒泡
|
||
e.stopPropagation();
|
||
|
||
// 设置拖拽状态
|
||
draggingComponentId.value = component.id;
|
||
isDragging.value = false;
|
||
isMiddleDragging.value = false;
|
||
|
||
// 获取容器位置
|
||
if (!canvasContainer.value) return;
|
||
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||
|
||
// 计算鼠标在画布坐标系中的位置
|
||
const mouseX_canvas = (e.clientX - containerRect.left - position.x) / scale.value;
|
||
const mouseY_canvas = (e.clientY - containerRect.top - position.y) / scale.value;
|
||
|
||
// 计算鼠标相对于组件左上角的偏移量
|
||
componentDragOffset.x = mouseX_canvas - component.x;
|
||
componentDragOffset.y = mouseY_canvas - component.y;
|
||
|
||
// 添加全局监听器
|
||
document.addEventListener('mousemove', onComponentDrag);
|
||
document.addEventListener('mouseup', stopComponentDrag);
|
||
}
|
||
|
||
// 拖拽组件过程
|
||
function onComponentDrag(e: MouseEvent) {
|
||
if (!draggingComponentId.value || !canvasContainer.value) return;
|
||
|
||
// 防止触发组件内部的事件
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
|
||
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||
|
||
// 计算鼠标在画布坐标系中的位置
|
||
const mouseX_canvas = (e.clientX - containerRect.left - position.x) / scale.value;
|
||
const mouseY_canvas = (e.clientY - containerRect.top - position.y) / scale.value;
|
||
|
||
// 计算组件新位置
|
||
const newX = mouseX_canvas - componentDragOffset.x;
|
||
const newY = mouseY_canvas - componentDragOffset.y;
|
||
|
||
// 通知父组件更新位置
|
||
emit('component-moved', {
|
||
id: draggingComponentId.value,
|
||
x: Math.round(newX),
|
||
y: Math.round(newY),
|
||
});
|
||
}
|
||
|
||
// 停止拖拽组件
|
||
function stopComponentDrag() {
|
||
draggingComponentId.value = null;
|
||
|
||
document.removeEventListener('mousemove', onComponentDrag);
|
||
document.removeEventListener('mouseup', stopComponentDrag);
|
||
}
|
||
|
||
// 更新组件属性
|
||
function updateComponentProp(componentId: string, propName: string, value: any) {
|
||
emit('update-component-prop', { id: componentId, propName, value });
|
||
}
|
||
|
||
// 获取组件引用，用于外部访问
|
||
function getComponentRef(componentId: string) {
|
||
const component = props.components.find(c => c.id === componentId);
|
||
if (!component) return null;
|
||
|
||
// 查找组件的引用
|
||
return componentRefs.value[component.id] || null;
|
||
}
|
||
|
||
// 暴露给父组件的方法
|
||
defineExpose({
|
||
getComponentRef
|
||
});
|
||
|
||
// --- 生命周期钩子 ---
|
||
onMounted(() => {
|
||
// 初始化中心位置
|
||
if (canvasContainer.value) {
|
||
position.x = canvasContainer.value.clientWidth / 2;
|
||
position.y = canvasContainer.value.clientHeight / 2;
|
||
}
|
||
if (canvasContainer.value) {
|
||
canvasContainer.value.addEventListener('wheel', onZoom);
|
||
}
|
||
// 添加键盘事件监听器
|
||
window.addEventListener('keydown', handleKeyDown);
|
||
});
|
||
|
||
// 处理键盘事件
|
||
function handleKeyDown(e: KeyboardEvent) {
|
||
// 如果当前有选中的组件，并且按下了Delete键
|
||
if (selectedComponentId.value && (e.key === 'Delete' || e.key === 'Backspace')) {
|
||
// 触发删除元器件事件
|
||
emit('component-delete', selectedComponentId.value);
|
||
// 清除选中状态
|
||
selectedComponentId.value = null;
|
||
}
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
// 清理事件监听器
|
||
document.removeEventListener('mousemove', onComponentDrag);
|
||
document.removeEventListener('mouseup', stopComponentDrag);
|
||
document.removeEventListener('mousemove', onDrag);
|
||
document.removeEventListener('mouseup', stopDrag);
|
||
if (canvasContainer.value) {
|
||
canvasContainer.value.removeEventListener('wheel', onZoom);
|
||
}
|
||
// 移除键盘事件监听器
|
||
window.removeEventListener('keydown', handleKeyDown);
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.diagram-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background-image:
|
||
linear-gradient(to right, rgba(100, 100, 100, 0.1) 1px, transparent 1px),
|
||
linear-gradient(to bottom, rgba(100, 100, 100, 0.1) 1px, transparent 1px),
|
||
linear-gradient(to right, rgba(80, 80, 80, 0.2) 100px, transparent 100px),
|
||
linear-gradient(to bottom, rgba(80, 80, 80, 0.2) 100px, transparent 100px);
|
||
background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
|
||
background-position: 0 0;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
}
|
||
|
||
.diagram-canvas {
|
||
position: relative;
|
||
width: 4000px;
|
||
height: 4000px;
|
||
transform-origin: 0 0;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
}
|
||
|
||
/* 元器件容器样式 */
|
||
.component-wrapper {
|
||
position: absolute;
|
||
padding: 0; /* 移除内边距，确保元素大小与内容完全匹配 */
|
||
box-sizing: content-box; /* 使用content-box确保内容尺寸不受padding影响 */
|
||
display: inline-block;
|
||
overflow: visible; /* 允许内容溢出（用于显示边框） */
|
||
cursor: move; /* 显示移动光标 */
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
}
|
||
|
||
/* 悬停状态 - 使用outline而非伪元素 */
|
||
.component-hover {
|
||
outline: 2px dashed #3498db;
|
||
outline-offset: 2px;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 选中状态 - 使用outline而非伪元素 */
|
||
.component-selected {
|
||
outline: 3px dashed;
|
||
outline-color: #e74c3c #f39c12 #3498db #2ecc71;
|
||
outline-offset: 3px;
|
||
z-index: 999 !important; /* 使用更高的z-index确保始终在顶层 */
|
||
}
|
||
|
||
/* 为黑暗模式设置不同的网格线颜色 */
|
||
:root[data-theme="dark"] .diagram-container {
|
||
background-image:
|
||
linear-gradient(to right, rgba(200, 200, 200, 0.1) 1px, transparent 1px),
|
||
linear-gradient(to bottom, rgba(200, 200, 200, 0.1) 1px, transparent 1px),
|
||
linear-gradient(to right, rgba(180, 180, 180, 0.15) 100px, transparent 100px),
|
||
linear-gradient(to bottom, rgba(180, 180, 180, 0.15) 100px, transparent 100px);
|
||
}
|
||
|
||
/* 深度选择器 - 默认阻止SVG内部元素的鼠标事件，但允许SVG本身和特定交互元素 */
|
||
.component-wrapper :deep(svg) {
|
||
pointer-events: auto; /* 确保SVG本身可以接收鼠标事件用于拖拽 */
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
}
|
||
|
||
.component-wrapper :deep(svg *:not([class*="interactive"]):not(rect.glow):not(circle[fill-opacity]):not([fill-opacity])) {
|
||
pointer-events: none; /* 非交互元素不接收鼠标事件 */
|
||
}
|
||
|
||
/* 允许特定SVG元素接收鼠标事件，用于交互 */
|
||
.component-wrapper :deep(svg circle[fill-opacity]),
|
||
.component-wrapper :deep(svg rect[fill-opacity]),
|
||
.component-wrapper :deep(svg rect[class*="glow"]),
|
||
.component-wrapper :deep(svg rect.glow),
|
||
.component-wrapper :deep(svg [class*="interactive"]),
|
||
.component-wrapper :deep(button),
|
||
.component-wrapper :deep(input) {
|
||
pointer-events: auto !important;
|
||
}
|
||
</style>
|