1123 lines
32 KiB
Vue
1123 lines
32 KiB
Vue
<template>
|
||
<div
|
||
class="flex-1 h-full w-full bg-base-200 relative overflow-hidden diagram-container flex flex-col select-none"
|
||
ref="canvasContainer"
|
||
@mousedown="handleCanvasMouseDown"
|
||
@mousedown.middle.prevent="startMiddleDrag"
|
||
@wheel.prevent="onZoom"
|
||
@contextmenu.prevent="handleContextMenu"
|
||
>
|
||
<!-- 工具栏 -->
|
||
<div class="absolute top-2 right-2 flex gap-2 z-30">
|
||
<button class="btn btn-sm btn-primary" @click="openDiagramFileSelector">
|
||
<FolderOpen class="h-4 w-4 mr-1" />
|
||
导入
|
||
</button>
|
||
<button class="btn btn-sm btn-primary" @click="exportDiagram">
|
||
<Download class="h-4 w-4 mr-1" />
|
||
导出
|
||
</button>
|
||
<button class="btn btn-sm btn-primary" @click="emit('open-components')">
|
||
<Plus class="h-4 w-4 mr-1" />
|
||
添加组件
|
||
</button>
|
||
<button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
|
||
<FileText class="h-4 w-4 mr-1" />
|
||
{{ props.showDocPanel ? "属性面板" : "文档" }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 隐藏的文件输入 -->
|
||
<input
|
||
type="file"
|
||
ref="fileInput"
|
||
class="hidden"
|
||
accept=".json"
|
||
@change="handleFileSelected"
|
||
/>
|
||
|
||
<div
|
||
ref="canvas"
|
||
class="diagram-canvas relative select-none"
|
||
:style="{
|
||
transform: `translate(${componentManager.canvasPosition.x}px, ${componentManager.canvasPosition.y}px) scale(${componentManager.canvasScale.value})`,
|
||
}"
|
||
>
|
||
<!-- 渲染连线 -->
|
||
<svg
|
||
class="wires-layer absolute top-0 left-0 w-full h-full z-50"
|
||
width="10000"
|
||
height="10000"
|
||
>
|
||
<!-- 已完成的连线 -->
|
||
<WireComponent
|
||
v-for="(wire, index) in wireItems"
|
||
:key="wire.id"
|
||
:id="wire.id"
|
||
:start-x="wire.startX"
|
||
:start-y="wire.startY"
|
||
:end-x="wire.endX"
|
||
:end-y="wire.endY"
|
||
:stroke-color="wire.color || '#4a5568'"
|
||
:stroke-width="wire.strokeWidth"
|
||
:is-active="false"
|
||
:start-component-id="wire.startComponentId"
|
||
:start-pin-id="wire.startPinId"
|
||
:end-component-id="wire.endComponentId"
|
||
:end-pin-id="wire.endPinId"
|
||
:routing-mode="wire.routingMode"
|
||
:path-commands="wire.pathCommands"
|
||
/>
|
||
|
||
<!-- 正在创建的连线 -->
|
||
<WireComponent
|
||
v-if="isCreatingWire"
|
||
id="temp-wire"
|
||
:start-x="creatingWireStart.x"
|
||
:start-y="creatingWireStart.y"
|
||
:end-x="mousePosition.x"
|
||
:end-y="mousePosition.y"
|
||
stroke-color="#3182ce"
|
||
:stroke-width="2"
|
||
:is-active="true"
|
||
/>
|
||
</svg>
|
||
|
||
<!-- 渲染画布上的组件 -->
|
||
<div
|
||
v-for="component in diagramParts"
|
||
:key="component.id"
|
||
class="component-wrapper absolute p-0 inline-block overflow-visible select-none"
|
||
:class="{
|
||
'component-hover': hoveredComponent === component.id,
|
||
'component-selected': selectedComponentId === component.id,
|
||
'cursor-not-allowed grayscale-70 opacity-60': !component.isOn,
|
||
'component-hidepins': component.hidepins,
|
||
}"
|
||
:style="{
|
||
top: component.y + 'px',
|
||
left: component.x + 'px',
|
||
zIndex: component.index ?? 0,
|
||
transform: component.rotate
|
||
? `rotate(${component.rotate}deg)`
|
||
: 'none',
|
||
opacity: component.isOn ? 1 : 0.6,
|
||
display: 'block',
|
||
}"
|
||
@mousedown.left.stop="startComponentDrag($event, component)"
|
||
@mouseover="hoveredComponent = component.id"
|
||
@mouseleave="hoveredComponent = null"
|
||
>
|
||
<!-- 动态渲染组件 -->
|
||
<component
|
||
:is="componentManager.getComponentDefinition(component.type)"
|
||
v-if="
|
||
componentManager.componentModules.value[component.type] &&
|
||
componentManager.getComponentDefinition(component.type)
|
||
"
|
||
v-bind="
|
||
componentManager.prepareComponentProps(
|
||
component.attrs || {},
|
||
component.id,
|
||
)
|
||
"
|
||
@update:bindKey="
|
||
(value: string) =>
|
||
updateComponentProp(component.id, 'bindKey', value)
|
||
"
|
||
@pin-click="
|
||
(pinInfo: any) =>
|
||
handlePinClick(component.id, pinInfo, pinInfo.originalEvent)
|
||
"
|
||
:ref="(el: any) => componentManager.setComponentRef(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 flex items-center justify-center"
|
||
>
|
||
<div class="flex flex-col items-center">
|
||
<div class="loading loading-spinner loading-xs mb-1"></div>
|
||
<span>Loading {{ component.type }}...</span>
|
||
<small class="mt-1 text-xs">{{
|
||
componentManager.componentModules.value[component.type]
|
||
? "Module loaded but invalid"
|
||
: "Module not found"
|
||
}}</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 加载指示器 -->
|
||
<div
|
||
v-if="isLoading"
|
||
class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50"
|
||
>
|
||
<div class="loading loading-spinner loading-lg text-primary"></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(componentManager?.canvasScale.value * 100) }}%</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {
|
||
ref,
|
||
reactive,
|
||
onMounted,
|
||
onUnmounted,
|
||
computed,
|
||
watch,
|
||
provide,
|
||
} from "vue";
|
||
import { useEventListener } from "@vueuse/core";
|
||
import { FolderOpen, Download, Plus, FileText } from "lucide-vue-next";
|
||
import WireComponent from "@/components/equipments/Wire.vue";
|
||
import { useAlertStore } from "@/components/Alert";
|
||
|
||
// 导入 diagram 管理器
|
||
import {
|
||
loadDiagramData,
|
||
saveDiagramData,
|
||
updatePartPosition,
|
||
updatePartAttribute,
|
||
parseConnectionPin,
|
||
connectionArrayToWireItem,
|
||
validateDiagramData,
|
||
} from "./composable/diagramManager";
|
||
|
||
import type {
|
||
DiagramData,
|
||
DiagramPart,
|
||
ConnectionArray,
|
||
WireItem,
|
||
} from "./composable/diagramManager";
|
||
|
||
import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
|
||
import { useComponentManager } from "./composable/componentManager";
|
||
|
||
// 右键菜单处理函数
|
||
function handleContextMenu(e: MouseEvent) {
|
||
e.preventDefault();
|
||
}
|
||
|
||
// 定义组件发出的事件
|
||
const emit = defineEmits(["toggle-doc-panel", "open-components"]);
|
||
|
||
// 定义组件接受的属性
|
||
const props = defineProps<{
|
||
showDocPanel?: boolean; // 添加属性接收文档面板的显示状态
|
||
}>();
|
||
|
||
// 获取componentManager实例
|
||
const componentManager = useComponentManager();
|
||
if (!componentManager) {
|
||
throw new Error(
|
||
"DiagramCanvas must be used within a component manager provider",
|
||
);
|
||
}
|
||
|
||
// 获取Alert store实例
|
||
const alertStore = useAlertStore();
|
||
|
||
// --- 画布状态 ---
|
||
const canvasContainer = ref<HTMLElement | null>(null);
|
||
const canvas = ref<HTMLElement | null>(null);
|
||
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 });
|
||
|
||
// Provide and Inject
|
||
provide(CanvasCurrentSelectedComponentID, selectedComponentId);
|
||
|
||
// Diagram 数据
|
||
const diagramData = ref<DiagramData>({
|
||
version: 1,
|
||
author: "admin",
|
||
editor: "me",
|
||
parts: [],
|
||
connections: [],
|
||
});
|
||
|
||
// 计算属性：从 diagramData 中提取组件列表，并按index属性排序
|
||
const diagramParts = computed<DiagramPart[]>(() => {
|
||
// 克隆原始数组以避免直接修改原始数据
|
||
const parts = [...diagramData.value.parts];
|
||
|
||
// 按照index属性进行排序，index值大的排在后面（显示在上层）
|
||
// 如果没有定义index则默认为0
|
||
return parts.sort((a, b) => {
|
||
const indexA = a.index ?? 0;
|
||
const indexB = b.index ?? 0;
|
||
return indexA - indexB;
|
||
});
|
||
});
|
||
|
||
// 计算属性：转换连接为 WireItem 列表以供渲染
|
||
const wireItems = computed<WireItem[]>(() => {
|
||
// 检查组件是否仍然挂载
|
||
if (!document.body.contains(canvasContainer.value)) {
|
||
return []; // 如果组件已经卸载，返回空数组
|
||
}
|
||
|
||
return diagramData.value.connections.map((conn, index) => {
|
||
const [startPin, endPin] = conn;
|
||
const { componentId: startCompId, pinId: startPinId } =
|
||
parseConnectionPin(startPin);
|
||
const { componentId: endCompId, pinId: endPinId } =
|
||
parseConnectionPin(endPin);
|
||
|
||
// 查找对应的组件位置
|
||
const startComp = diagramParts.value.find((p) => p.id === startCompId);
|
||
const endComp = diagramParts.value.find((p) => p.id === endCompId);
|
||
|
||
// 默认位置（如果找不到组件）
|
||
const startPos = { x: 0, y: 0 };
|
||
const endPos = { x: 0, y: 0 };
|
||
|
||
// 如果找到组件，设置连线端点位置
|
||
if (startComp) {
|
||
startPos.x = startComp.x;
|
||
startPos.y = startComp.y;
|
||
|
||
// 尝试获取引脚精确位置（如果有实现）
|
||
const startCompRef = componentManager?.getComponentRef(startCompId);
|
||
if (startCompRef && typeof startCompRef.getPinPosition === "function") {
|
||
try {
|
||
const pinPos = startCompRef.getPinPosition(startPinId);
|
||
console.log(
|
||
`线路${index} - 起点引脚位置(来自${startCompId}):`,
|
||
pinPos,
|
||
);
|
||
|
||
if (pinPos) {
|
||
// 正确合并组件位置与引脚相对位置
|
||
startPos.x = startComp.x + pinPos.x;
|
||
startPos.y = startComp.y + pinPos.y;
|
||
console.log(`线路${index} - 计算后的起点位置:`, startPos);
|
||
}
|
||
} catch (error) {
|
||
// console.error(`获取引脚位置出错:`, error);
|
||
}
|
||
}
|
||
}
|
||
|
||
if (endComp) {
|
||
endPos.x = endComp.x;
|
||
endPos.y = endComp.y;
|
||
|
||
// 尝试获取引脚精确位置
|
||
const endCompRef = componentManager?.getComponentRef(endCompId);
|
||
if (endCompRef && typeof endCompRef.getPinPosition === "function") {
|
||
try {
|
||
const pinPos = endCompRef.getPinPosition(endPinId);
|
||
console.log(`线路${index} - 终点引脚位置(来自${endCompId}):`, pinPos);
|
||
|
||
if (pinPos) {
|
||
// 正确合并组件位置与引脚相对位置
|
||
endPos.x = endComp.x + pinPos.x;
|
||
endPos.y = endComp.y + pinPos.y;
|
||
console.log(`线路${index} - 计算后的终点位置:`, endPos);
|
||
}
|
||
} catch (error) {
|
||
console.error(`获取引脚位置出错:`, error);
|
||
}
|
||
}
|
||
}
|
||
|
||
return connectionArrayToWireItem(conn, index, startPos, endPos);
|
||
});
|
||
});
|
||
|
||
// 连线创建状态
|
||
const isCreatingWire = ref(false);
|
||
const creatingWireStart = reactive({ x: 0, y: 0 });
|
||
const creatingWireStartInfo = reactive({
|
||
componentId: "",
|
||
pinId: "",
|
||
constraint: "",
|
||
});
|
||
const mousePosition = reactive({ x: 0, y: 0 });
|
||
|
||
// 加载状态
|
||
const isLoading = ref(false);
|
||
|
||
// 文件选择引用
|
||
const fileInput = ref<HTMLInputElement | null>(null);
|
||
|
||
// VueUse事件监听器状态管理
|
||
const isDragEventActive = ref(false);
|
||
const isComponentDragEventActive = ref(false);
|
||
const isWireCreationEventActive = ref(false);
|
||
|
||
// 使用VueUse设置事件监听器
|
||
// 画布拖拽事件
|
||
useEventListener(document, "mousemove", (e: MouseEvent) => {
|
||
if (isDragEventActive.value) {
|
||
onCanvasDrag(e);
|
||
}
|
||
if (isComponentDragEventActive.value) {
|
||
onComponentDrag(e);
|
||
}
|
||
if (isWireCreationEventActive.value) {
|
||
onCreatingWireMouseMove(e);
|
||
}
|
||
});
|
||
|
||
useEventListener(document, "mouseup", () => {
|
||
if (isDragEventActive.value) {
|
||
stopDrag();
|
||
}
|
||
if (isComponentDragEventActive.value) {
|
||
stopComponentDrag();
|
||
}
|
||
});
|
||
|
||
// 键盘事件
|
||
useEventListener(window, "keydown", handleKeyDown);
|
||
|
||
// --- 缩放功能 ---
|
||
const MIN_SCALE = 0.2;
|
||
const MAX_SCALE = 10.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 zoomFactor = 1.1; // 每次放大/缩小10%
|
||
const direction = e.deltaY > 0 ? -1 : 1;
|
||
const finalZoomFactor = direction > 0 ? zoomFactor : 1 / zoomFactor;
|
||
|
||
// 使用componentManager的缩放方法
|
||
componentManager?.zoomAtPosition(mouseX, mouseY, finalZoomFactor);
|
||
}
|
||
|
||
// --- 画布交互逻辑 ---
|
||
function handleCanvasMouseDown(e: MouseEvent) {
|
||
// 如果是直接点击画布（而不是元器件），清除选中状态
|
||
if (e.target === canvasContainer.value || e.target === canvas.value) {
|
||
if (selectedComponentId.value !== null) {
|
||
selectedComponentId.value = null;
|
||
// 直接通过componentManager选择组件
|
||
if (componentManager) {
|
||
componentManager.selectComponent(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;
|
||
const currentPosition = componentManager?.getCanvasPosition();
|
||
if (!currentPosition) return;
|
||
dragStart.x = e.clientX - currentPosition.x;
|
||
dragStart.y = e.clientY - currentPosition.y;
|
||
|
||
isDragEventActive.value = true;
|
||
e.preventDefault();
|
||
}
|
||
|
||
// 中键拖拽画布
|
||
function startMiddleDrag(e: MouseEvent) {
|
||
if (e.button !== 1) return;
|
||
|
||
isMiddleDragging.value = true;
|
||
isDragging.value = false;
|
||
draggingComponentId.value = null;
|
||
|
||
const currentPosition = componentManager?.getCanvasPosition();
|
||
if (!currentPosition) return;
|
||
dragStart.x = e.clientX - currentPosition.x;
|
||
dragStart.y = e.clientY - currentPosition.y;
|
||
|
||
isDragEventActive.value = true;
|
||
e.preventDefault();
|
||
}
|
||
|
||
// 拖拽画布过程
|
||
function onCanvasDrag(e: MouseEvent) {
|
||
if (!isDragging.value && !isMiddleDragging.value) return;
|
||
|
||
const newX = e.clientX - dragStart.x;
|
||
const newY = e.clientY - dragStart.y;
|
||
|
||
// 使用componentManager设置画布位置
|
||
componentManager?.setCanvasPosition(newX, newY);
|
||
}
|
||
|
||
// 停止拖拽画布
|
||
function stopDrag() {
|
||
isDragging.value = false;
|
||
isMiddleDragging.value = false;
|
||
isDragEventActive.value = false;
|
||
}
|
||
|
||
// --- 组件拖拽交互 ---
|
||
function startComponentDrag(e: MouseEvent, component: DiagramPart) {
|
||
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;
|
||
// 直接通过componentManager选择组件
|
||
if (componentManager) {
|
||
componentManager.selectComponent(component);
|
||
}
|
||
}
|
||
|
||
// 如果组件锁定位置或是交互元素，则不启动拖拽
|
||
if (component.positionlock || isInteractiveElement || e.button !== 0) {
|
||
return;
|
||
}
|
||
|
||
// 阻止事件冒泡
|
||
e.stopPropagation();
|
||
|
||
console.debug(`Start Drag Component: ${component.type}:${component.id}`);
|
||
|
||
// 设置拖拽状态
|
||
draggingComponentId.value = component.id;
|
||
isDragging.value = false;
|
||
isMiddleDragging.value = false;
|
||
|
||
// 获取容器位置
|
||
if (!canvasContainer.value) return;
|
||
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||
|
||
// 使用componentManager的屏幕坐标转画布坐标方法
|
||
const mouseCanvasPos = componentManager?.screenToCanvas(
|
||
e.clientX - containerRect.left,
|
||
e.clientY - containerRect.top,
|
||
);
|
||
if (!mouseCanvasPos) return;
|
||
|
||
// 计算鼠标相对于组件左上角的偏移量
|
||
componentDragOffset.x = mouseCanvasPos.x - component.x;
|
||
componentDragOffset.y = mouseCanvasPos.y - component.y;
|
||
|
||
// 激活组件拖拽事件监听
|
||
isComponentDragEventActive.value = true;
|
||
}
|
||
|
||
// 拖拽组件过程
|
||
function onComponentDrag(e: MouseEvent) {
|
||
if (!draggingComponentId.value || !canvasContainer.value) return;
|
||
|
||
// 防止触发组件内部的事件
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
|
||
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||
|
||
// 使用componentManager的屏幕坐标转画布坐标方法
|
||
const mouseCanvasPos = componentManager?.screenToCanvas(
|
||
e.clientX - containerRect.left,
|
||
e.clientY - containerRect.top,
|
||
);
|
||
if (!mouseCanvasPos) return;
|
||
|
||
// 计算组件新位置
|
||
const newX = mouseCanvasPos.x - componentDragOffset.x;
|
||
const newY = mouseCanvasPos.y - componentDragOffset.y;
|
||
|
||
// 获取当前拖动的组件
|
||
const draggedComponent = diagramParts.value.find(
|
||
(p) => p.id === draggingComponentId.value,
|
||
);
|
||
if (!draggedComponent) return;
|
||
|
||
// 如果组件属于组，移动组内所有其他组件
|
||
if (draggedComponent.group) {
|
||
const deltaX = Math.round(newX) - draggedComponent.x;
|
||
const deltaY = Math.round(newY) - draggedComponent.y;
|
||
|
||
// 找出属于同一组但不是当前拖动组件的其他组件
|
||
const groupComponents = diagramParts.value.filter(
|
||
(p) =>
|
||
p.group === draggedComponent.group &&
|
||
p.id !== draggingComponentId.value,
|
||
);
|
||
|
||
// 更新这些组件的位置
|
||
for (const groupComp of groupComponents) {
|
||
diagramData.value = updatePartPosition(
|
||
diagramData.value,
|
||
groupComp.id,
|
||
groupComp.x + deltaX,
|
||
groupComp.y + deltaY,
|
||
);
|
||
}
|
||
}
|
||
|
||
// 通知componentManager位置已更新
|
||
if (componentManager) {
|
||
componentManager.moveComponent({
|
||
id: draggingComponentId.value,
|
||
x: Math.round(newX),
|
||
y: Math.round(newY),
|
||
});
|
||
}
|
||
}
|
||
|
||
// 停止拖拽组件
|
||
function stopComponentDrag() {
|
||
// 如果有组件被拖拽，保存当前状态
|
||
if (draggingComponentId.value) {
|
||
draggingComponentId.value = null;
|
||
}
|
||
|
||
isComponentDragEventActive.value = false;
|
||
|
||
saveDiagramData(diagramData.value);
|
||
}
|
||
|
||
// 更新组件属性
|
||
function updateComponentProp(
|
||
componentId: string,
|
||
propName: string,
|
||
value: any,
|
||
) {
|
||
// 直接通过componentManager更新组件属性
|
||
if (componentManager) {
|
||
componentManager.updateComponentProp(componentId, propName, value);
|
||
} else {
|
||
// 后备方案：直接更新数据
|
||
diagramData.value = updatePartAttribute(
|
||
diagramData.value,
|
||
componentId,
|
||
propName,
|
||
value,
|
||
);
|
||
}
|
||
}
|
||
|
||
// --- 连线操作 ---
|
||
// 更新鼠标位置
|
||
function updateMousePosition(e: MouseEvent) {
|
||
if (!canvasContainer.value) return;
|
||
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||
|
||
// 使用componentManager的屏幕坐标转画布坐标方法
|
||
const canvasPos = componentManager?.screenToCanvas(
|
||
e.clientX - containerRect.left,
|
||
e.clientY - containerRect.top,
|
||
);
|
||
if (!canvasPos) return;
|
||
|
||
mousePosition.x = canvasPos.x;
|
||
mousePosition.y = canvasPos.y;
|
||
}
|
||
|
||
// 处理引脚点击
|
||
function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
|
||
if (!canvasContainer.value) return;
|
||
updateMousePosition(event);
|
||
|
||
if (!pinInfo || !pinInfo.label) {
|
||
console.error("无效的针脚信息:", pinInfo);
|
||
return;
|
||
}
|
||
|
||
// 获取引脚ID
|
||
const pinId = pinInfo.label;
|
||
|
||
console.log("----引脚点击详情开始----");
|
||
console.log("组件ID:", componentId);
|
||
console.log("引脚ID:", pinId);
|
||
console.log("引脚原始信息:", pinInfo);
|
||
console.log("鼠标位置:", mousePosition);
|
||
|
||
if (!isCreatingWire.value) {
|
||
// 获取初始位置信息
|
||
let pinPosition = pinInfo.position;
|
||
console.log("Pin信息:", pinInfo);
|
||
console.log("Pin初始位置:", pinPosition);
|
||
console.log("组件ID:", componentId);
|
||
console.log("引脚ID:", pinId);
|
||
|
||
// 从组件引用中获取组件实例
|
||
const component = componentManager?.getComponentRef(componentId);
|
||
console.log("组件引用:", component);
|
||
|
||
// 查找组件部件对象以获取组件位置
|
||
const componentPart = diagramParts.value.find((p) => p.id === componentId);
|
||
if (!componentPart) {
|
||
console.error("找不到组件部件对象:", componentId);
|
||
}
|
||
|
||
// 重新设置引脚位置（初始化）
|
||
pinPosition = { x: 0, y: 0 };
|
||
|
||
// 如果组件实例存在且有 getPinPosition 方法
|
||
if (
|
||
component &&
|
||
typeof component.getPinPosition === "function" &&
|
||
componentPart
|
||
) {
|
||
try {
|
||
console.log("尝试从组件获取引脚位置");
|
||
console.log("组件部件位置:", componentPart.x, componentPart.y);
|
||
const pinRelativePos = component.getPinPosition(pinId);
|
||
console.log("组件返回的引脚相对位置:", pinRelativePos);
|
||
|
||
if (pinRelativePos) {
|
||
// 计算引脚的绝对位置 = 组件位置 + 引脚相对位置
|
||
pinPosition = {
|
||
x: componentPart.x + pinRelativePos.x,
|
||
y: componentPart.y + pinRelativePos.y,
|
||
};
|
||
console.log("计算的引脚绝对位置:", pinPosition);
|
||
} else {
|
||
// 如果没有找到引脚位置，使用组件位置
|
||
pinPosition = {
|
||
x: componentPart.x,
|
||
y: componentPart.y,
|
||
};
|
||
console.log("使用组件位置:", pinPosition);
|
||
}
|
||
} catch (error) {
|
||
console.error(`获取引脚位置出错:`, error);
|
||
}
|
||
} else if (componentPart) {
|
||
// 如果组件不存在或没有 getPinPosition 方法，使用组件的位置
|
||
pinPosition = {
|
||
x: componentPart.x,
|
||
y: componentPart.y,
|
||
};
|
||
console.log("使用组件位置:", pinPosition);
|
||
}
|
||
|
||
console.log("最终使用的引脚位置:", pinPosition);
|
||
|
||
// 使用最终的引脚位置作为连线起点
|
||
setWireCreationStart(
|
||
pinPosition.x,
|
||
pinPosition.y,
|
||
componentId,
|
||
pinId,
|
||
pinInfo.constraint,
|
||
);
|
||
isWireCreationEventActive.value = true;
|
||
} else {
|
||
// 完成连线创建
|
||
if (
|
||
componentId === creatingWireStartInfo.componentId &&
|
||
pinId === creatingWireStartInfo.pinId
|
||
) {
|
||
// 如果点击的是同一个引脚，取消连线创建
|
||
cancelWireCreation();
|
||
return;
|
||
}
|
||
|
||
// 获取终点引脚位置
|
||
let endPosition = { x: 0, y: 0 };
|
||
const componentPart = diagramParts.value.find((p) => p.id === componentId);
|
||
const endComponent = componentManager?.getComponentRef(componentId);
|
||
|
||
console.log("终点组件部件:", componentPart);
|
||
console.log("终点组件引用:", endComponent);
|
||
|
||
// 如果找到组件，设置终点位置
|
||
if (componentPart) {
|
||
endPosition.x = componentPart.x;
|
||
endPosition.y = componentPart.y;
|
||
|
||
// 如果组件实现了getPinPosition方法，使用它
|
||
if (endComponent && typeof endComponent.getPinPosition === "function") {
|
||
try {
|
||
const pinPos = endComponent.getPinPosition(pinId);
|
||
console.log("终点组件返回的引脚位置:", pinPos);
|
||
|
||
if (pinPos) {
|
||
// 正确合并组件位置与引脚相对位置
|
||
endPosition = {
|
||
x: componentPart.x + pinPos.x,
|
||
y: componentPart.y + pinPos.x,
|
||
};
|
||
console.log("终点引脚位置(来自组件方法):", endPosition);
|
||
}
|
||
} catch (error) {
|
||
console.error(`获取终点引脚位置出错:`, error);
|
||
}
|
||
} else {
|
||
// 对于没有提供引脚精确位置的组件，使用组件位置
|
||
console.log("终点组件没有提供引脚位置方法，使用组件位置");
|
||
}
|
||
} else {
|
||
console.error("找不到终点组件部件对象:", componentId);
|
||
}
|
||
|
||
console.log("最终使用的终点位置:", endPosition);
|
||
console.log("线路从", creatingWireStartInfo, "到", { componentId, pinId });
|
||
console.log("----引脚点击详情结束----");
|
||
|
||
// 创建新的连线
|
||
const newConnection: ConnectionArray = [
|
||
`${creatingWireStartInfo.componentId}:${creatingWireStartInfo.pinId}`,
|
||
`${componentId}:${pinId}`,
|
||
2, // 线宽
|
||
["right10", "*", "left10"], // 默认路径
|
||
];
|
||
|
||
// 更新图表数据
|
||
diagramData.value = {
|
||
...diagramData.value,
|
||
connections: [...diagramData.value.connections, newConnection],
|
||
};
|
||
|
||
// 重置连线创建状态
|
||
resetWireCreation();
|
||
isWireCreationEventActive.value = false;
|
||
}
|
||
}
|
||
|
||
// 开始创建连线
|
||
function setWireCreationStart(
|
||
x: number,
|
||
y: number,
|
||
componentId: string,
|
||
pinId: string,
|
||
constraint?: string,
|
||
) {
|
||
isCreatingWire.value = true;
|
||
creatingWireStart.x = x;
|
||
creatingWireStart.y = y;
|
||
creatingWireStartInfo.componentId = componentId;
|
||
creatingWireStartInfo.pinId = pinId;
|
||
creatingWireStartInfo.constraint = constraint || "";
|
||
}
|
||
|
||
// 重置连线创建状态
|
||
function resetWireCreation() {
|
||
isCreatingWire.value = false;
|
||
creatingWireStart.x = 0;
|
||
creatingWireStart.y = 0;
|
||
creatingWireStartInfo.componentId = "";
|
||
creatingWireStartInfo.pinId = "";
|
||
creatingWireStartInfo.constraint = "";
|
||
}
|
||
|
||
// 取消连线创建
|
||
function cancelWireCreation() {
|
||
resetWireCreation();
|
||
isWireCreationEventActive.value = false;
|
||
}
|
||
|
||
// 连线创建过程中的鼠标移动
|
||
function onCreatingWireMouseMove(e: MouseEvent) {
|
||
updateMousePosition(e);
|
||
}
|
||
|
||
// 删除组件
|
||
function deleteComponent(componentId: string) {
|
||
// 直接通过componentManager删除组件
|
||
if (componentManager) {
|
||
componentManager.deleteComponent(componentId);
|
||
}
|
||
|
||
// 清除选中状态
|
||
if (selectedComponentId.value === componentId) {
|
||
selectedComponentId.value = null;
|
||
}
|
||
}
|
||
|
||
// --- 文件操作功能 ---
|
||
// 打开文件选择器
|
||
function openDiagramFileSelector() {
|
||
if (fileInput.value) {
|
||
fileInput.value.click();
|
||
}
|
||
}
|
||
|
||
// 处理文件选择
|
||
function handleFileSelected(event: Event) {
|
||
const target = event.target as HTMLInputElement;
|
||
const file = target.files?.[0];
|
||
|
||
if (!file) {
|
||
return;
|
||
}
|
||
|
||
// 设置加载状态
|
||
isLoading.value = true;
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
try {
|
||
// 检查组件是否仍然挂载
|
||
if (!document.body.contains(canvasContainer.value)) {
|
||
return; // 如果组件已经卸载，不执行后续操作
|
||
}
|
||
|
||
const content = e.target?.result as string;
|
||
const parsed = JSON.parse(content);
|
||
|
||
// 使用验证函数检查文件格式
|
||
const validation = validateDiagramData(parsed);
|
||
|
||
if (!validation.isValid) {
|
||
alertStore?.show(
|
||
`不是有效的diagram.json格式: ${validation.errors.join("; ")}`,
|
||
"error",
|
||
);
|
||
isLoading.value = false;
|
||
return;
|
||
}
|
||
|
||
// 更新画布数据
|
||
diagramData.value = parsed as DiagramData;
|
||
|
||
alertStore?.show(`成功导入diagram文件`, "success");
|
||
} catch (error) {
|
||
console.error("解析JSON文件出错:", error);
|
||
if (document.body.contains(canvasContainer.value)) {
|
||
alertStore?.show("解析文件出错，请确认是有效的JSON格式", "error");
|
||
}
|
||
} finally {
|
||
// 检查组件是否仍然挂载
|
||
if (document.body.contains(canvasContainer.value)) {
|
||
// 结束加载状态
|
||
isLoading.value = false;
|
||
}
|
||
|
||
// 清除文件输入，以便同一文件可以再次导入
|
||
target.value = "";
|
||
}
|
||
};
|
||
reader.onerror = () => {
|
||
// 检查组件是否仍然挂载
|
||
if (document.body.contains(canvasContainer.value)) {
|
||
alertStore?.show("读取文件时出错", "error");
|
||
isLoading.value = false;
|
||
}
|
||
// 清除文件输入
|
||
target.value = "";
|
||
};
|
||
|
||
reader.readAsText(file);
|
||
}
|
||
|
||
// 导出当前diagram数据
|
||
function exportDiagram() {
|
||
try {
|
||
isLoading.value = true;
|
||
|
||
// 创建一个Blob对象
|
||
const jsonString = JSON.stringify(diagramData.value, null, 2);
|
||
const blob = new Blob([jsonString], { type: "application/json" });
|
||
|
||
// 创建一个下载链接
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement("a");
|
||
a.href = url;
|
||
a.download = "diagram.json";
|
||
a.click();
|
||
// 释放URL对象
|
||
setTimeout(() => {
|
||
URL.revokeObjectURL(url);
|
||
// 检查组件是否仍然挂载
|
||
if (document.body.contains(canvasContainer.value)) {
|
||
isLoading.value = false;
|
||
alertStore?.show("成功导出diagram文件", "success");
|
||
}
|
||
}, 100);
|
||
} catch (error) {
|
||
console.error("导出diagram文件时出错:", error);
|
||
alertStore?.show("导出diagram文件时出错", "error");
|
||
isLoading.value = false;
|
||
}
|
||
}
|
||
|
||
// --- 生命周期钩子 ---
|
||
onMounted(async () => {
|
||
// 加载图表数据
|
||
try {
|
||
diagramData.value = await loadDiagramData();
|
||
|
||
// 预加载所有组件模块
|
||
const componentTypes = new Set<string>();
|
||
diagramData.value.parts.forEach((part) => {
|
||
componentTypes.add(part.type);
|
||
});
|
||
|
||
console.log(
|
||
"DiagramCanvas: Requesting component modules:",
|
||
Array.from(componentTypes),
|
||
);
|
||
|
||
// 直接通过componentManager预加载组件模块
|
||
if (componentManager) {
|
||
await componentManager.preloadComponentModules(
|
||
Array.from(componentTypes),
|
||
);
|
||
}
|
||
} catch (error) {
|
||
console.error("加载图表数据失败:", error);
|
||
}
|
||
|
||
// 初始化中心位置 - 使用componentManager设置
|
||
if (canvasContainer.value && componentManager) {
|
||
// 修改为将画布中心点放在容器中心点
|
||
const centerX = canvasContainer.value.clientWidth / 2 - 5000; // 画布宽度的一半
|
||
const centerY = canvasContainer.value.clientHeight / 2 - 5000; // 画布高度的一半
|
||
componentManager.setCanvasPosition(centerX, centerY);
|
||
}
|
||
});
|
||
|
||
// 处理键盘事件
|
||
function handleKeyDown(e: KeyboardEvent) {
|
||
// 如果当前有选中的组件，并且按下了Delete键
|
||
if (selectedComponentId.value && e.key === "Delete") {
|
||
// 触发删除组件事件
|
||
deleteComponent(selectedComponentId.value);
|
||
}
|
||
|
||
// 如果当前正在创建连线，并且按下了ESC键
|
||
if (isCreatingWire.value && e.key === "Escape") {
|
||
// 取消连线创建
|
||
cancelWireCreation();
|
||
}
|
||
}
|
||
|
||
// 无加载动画的数据更新方法
|
||
function updateDiagramDataDirectly(data: DiagramData) {
|
||
// 检查组件是否仍然挂载
|
||
if (!document.body.contains(canvasContainer.value)) {
|
||
return; // 如果组件已经卸载，不执行后续操作
|
||
}
|
||
|
||
diagramData.value = data;
|
||
}
|
||
|
||
// 暴露方法给父组件
|
||
defineExpose({
|
||
// 基本数据操作
|
||
getDiagramData: () => diagramData.value,
|
||
updateDiagramDataDirectly,
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 基础容器样式 - 使用 Tailwind 类替代 */
|
||
.diagram-container {
|
||
background-size:
|
||
20px 20px,
|
||
20px 20px,
|
||
100px 100px,
|
||
100px 100px;
|
||
background-position: 0 0;
|
||
}
|
||
|
||
/* 画布样式 - 部分保留自定义属性 */
|
||
.diagram-canvas {
|
||
width: 10000px;
|
||
height: 10000px;
|
||
transform-origin: 0 0;
|
||
}
|
||
|
||
/* 连线层样式 */
|
||
.wires-layer {
|
||
pointer-events: auto;
|
||
overflow: visible;
|
||
}
|
||
|
||
.wires-layer path {
|
||
pointer-events: stroke;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 组件容器样式 */
|
||
.component-wrapper {
|
||
box-sizing: content-box;
|
||
cursor: move;
|
||
}
|
||
|
||
/* 悬停状态 */
|
||
.component-hover {
|
||
outline: 2px dashed #3498db;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* 选中状态 */
|
||
.component-selected {
|
||
outline: 3px dashed;
|
||
outline-color: #e74c3c #f39c12 #3498db #2ecc71;
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
/* SVG 交互样式 */
|
||
.component-wrapper :deep(svg) {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.component-wrapper
|
||
:deep(
|
||
svg
|
||
*:not([class*="interactive"]):not(rect.glow):not(
|
||
circle[fill-opacity]
|
||
):not([fill-opacity])
|
||
) {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.wire-active {
|
||
stroke: #0099ff !important;
|
||
filter: drop-shadow(0 0 4px #0099ffcc);
|
||
}
|
||
</style>
|