refactor: merge
This commit is contained in:
466
src/components/LabCanvas/ComponentSelector.vue
Normal file
466
src/components/LabCanvas/ComponentSelector.vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 元器件选择菜单 (Drawer) -->
|
||||
<div class="drawer drawer-end z-50">
|
||||
<input id="component-drawer" type="checkbox" class="drawer-toggle" v-model="showComponentsMenu" />
|
||||
<div class="drawer-side">
|
||||
<label for="component-drawer" aria-label="close sidebar" class="drawer-overlay !bg-opacity-50"></label>
|
||||
<div class="menu p-0 w-[460px] min-h-full bg-base-100 shadow-xl flex flex-col">
|
||||
<!-- 菜单头部 -->
|
||||
<div class="p-6 border-b border-base-300 flex justify-between items-center">
|
||||
<h3 class="text-xl font-bold text-primary flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="text-primary">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path d="M12 8v8"></path>
|
||||
<path d="M8 12h8"></path>
|
||||
</svg>
|
||||
添加元器件
|
||||
</h3>
|
||||
<label for="component-drawer" class="btn btn-ghost btn-sm btn-circle" @click="closeMenu">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="tabs tabs-boxed bg-base-200 mx-6 mt-4 rounded-box">
|
||||
<a class="tab" :class="{ 'tab-active': activeTab === 'components' }"
|
||||
@click="activeTab = 'components'">元器件</a>
|
||||
<a class="tab" :class="{ 'tab-active': activeTab === 'templates' }" @click="activeTab = 'templates'">模板</a>
|
||||
<a class="tab" :class="{ 'tab-active': activeTab === 'virtual' }" @click="activeTab = 'virtual'">虚拟外设</a>
|
||||
</div>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="px-6 py-4 border-b border-base-300">
|
||||
<div class="join w-full">
|
||||
<div class="join-item flex-1 relative">
|
||||
<input type="text" placeholder="搜索..." class="input input-bordered input-sm w-full pl-10"
|
||||
v-model="searchQuery" @keyup.enter="searchComponents" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content opacity-60">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<button class="btn btn-sm join-item" @click="searchComponents">
|
||||
搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 元器件列表 (组件选项卡) -->
|
||||
<div v-if="activeTab === 'components'" class="px-6 py-4 overflow-auto flex-1">
|
||||
<div v-if="filteredComponents.length > 0" class="grid grid-cols-2 gap-4">
|
||||
<div v-for="(component, index) in filteredComponents" :key="index"
|
||||
class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
|
||||
@click="addComponent(component)">
|
||||
<div class="card-body p-3 items-center text-center">
|
||||
<div
|
||||
class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
|
||||
<!-- 直接使用组件作为预览 -->
|
||||
<component v-if="componentModules[component.type]" :is="componentModules[component.type].default"
|
||||
class="component-preview" :size="getPreviewSize(component.type)" />
|
||||
<!-- 加载中状态 -->
|
||||
<span v-else class="text-xs text-gray-400">加载中...</span>
|
||||
</div>
|
||||
<h3 class="card-title text-sm mt-2">{{ component.name }}</h3>
|
||||
<p class="text-xs opacity-70">{{ component.type }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 无搜索结果 -->
|
||||
<div v-else class="py-16 text-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="mx-auto text-base-300 mb-3">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
<line x1="8" y1="11" x2="14" y2="11"></line>
|
||||
</svg>
|
||||
<p class="text-base-content opacity-70">没有找到匹配的元器件</p>
|
||||
<button class="btn btn-sm btn-ghost mt-3" @click="searchQuery = ''">
|
||||
清除搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模板列表 (模板选项卡) -->
|
||||
<div v-if="activeTab === 'templates'" class="px-6 py-4 overflow-auto flex-1">
|
||||
<div v-if="filteredTemplates.length > 0" class="grid grid-cols-2 gap-4">
|
||||
<div v-for="(template, index) in filteredTemplates" :key="index"
|
||||
class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
|
||||
@click="addTemplate(template)">
|
||||
<div class="card-body p-3 items-center text-center">
|
||||
<div
|
||||
class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
|
||||
<img :src="template.thumbnailUrl || '/placeholder-template.png'
|
||||
" alt="Template thumbnail" class="max-h-full max-w-full object-contain" />
|
||||
</div>
|
||||
<h3 class="card-title text-sm mt-2">{{ template.name }}</h3>
|
||||
<p class="text-xs opacity-70">
|
||||
{{ template.description || "模板" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 无搜索结果 -->
|
||||
<div v-else class="py-16 text-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="mx-auto text-base-300 mb-3">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
<line x1="8" y1="11" x2="14" y2="11"></line>
|
||||
</svg>
|
||||
<p class="text-base-content opacity-70">没有找到匹配的模板</p>
|
||||
<button class="btn btn-sm btn-ghost mt-3" @click="searchQuery = ''">
|
||||
清除搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 虚拟外设列表 (虚拟外设选项卡) -->
|
||||
<div v-if="activeTab === 'virtual'" class="px-6 py-4 overflow-auto flex-1">
|
||||
<div v-if="filteredVirtualDevices.length > 0" class="grid grid-cols-2 gap-4">
|
||||
<div v-for="(device, index) in filteredVirtualDevices" :key="index"
|
||||
class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
|
||||
@click="addComponent(device)">
|
||||
<div class="card-body p-3 items-center text-center">
|
||||
<div
|
||||
class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
|
||||
<!-- 直接使用组件作为预览 -->
|
||||
<component v-if="componentModules[device.type]" :is="componentModules[device.type].default"
|
||||
class="component-preview" :size="getPreviewSize(device.type)" />
|
||||
<!-- 加载中状态 -->
|
||||
<span v-else class="text-xs text-gray-400">加载中...</span>
|
||||
</div>
|
||||
<h3 class="card-title text-sm mt-2">{{ device.name }}</h3>
|
||||
<p class="text-xs opacity-70">{{ device.type }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 无搜索结果 -->
|
||||
<div v-else class="py-16 text-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="mx-auto text-base-300 mb-3">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
<line x1="8" y1="11" x2="14" y2="11"></line>
|
||||
</svg>
|
||||
<p class="text-base-content opacity-70">没有找到匹配的虚拟外设</p>
|
||||
<button class="btn btn-sm btn-ghost mt-3" @click="searchQuery = ''">
|
||||
清除搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<div class="p-4 border-t border-base-300 bg-base-200 flex justify-between">
|
||||
<label for="component-drawer" class="btn btn-sm btn-ghost" @click="closeMenu">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
返回
|
||||
</label>
|
||||
<label for="component-drawer" class="btn btn-sm btn-primary" @click="closeMenu">
|
||||
完成
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, shallowRef, onMounted } from "vue";
|
||||
import motherboardSvg from "@/components/equipments/svg/motherboard.svg";
|
||||
import buttonSvg from "@/components//equipments/svg/button.svg";
|
||||
|
||||
// Props 定义
|
||||
interface Props {
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
// 定义组件发出的事件
|
||||
const emit = defineEmits([
|
||||
"close",
|
||||
"add-component",
|
||||
"add-template",
|
||||
"update:open",
|
||||
]);
|
||||
|
||||
// 当前激活的选项卡
|
||||
const activeTab = ref("components");
|
||||
|
||||
// --- 搜索功能 ---
|
||||
const searchQuery = ref("");
|
||||
|
||||
// --- 可用元器件列表 ---
|
||||
const availableComponents = [
|
||||
{ type: "MechanicalButton", name: "机械按钮" },
|
||||
{ type: "Switch", name: "开关" },
|
||||
{ type: "Pin", name: "引脚" },
|
||||
{ type: "SMT_LED", name: "贴片LED" },
|
||||
{ type: "SevenSegmentDisplay", name: "数码管" },
|
||||
{ type: "HDMI", name: "HDMI接口" },
|
||||
{ type: "DDR", name: "DDR内存" },
|
||||
{ type: "ETH", name: "以太网接口" },
|
||||
{ type: "SD", name: "SD卡插槽" },
|
||||
{ type: "SFP", name: "SFP光纤模块" },
|
||||
{ type: "SMA", name: "SMA连接器" },
|
||||
{ type: "MotherBoard", name: "主板" },
|
||||
{ type: "PG2L100H_FBG676", name: "PG2L100H FBG676芯片" },
|
||||
{ type: "BaseBoard", name: "通用底板" },
|
||||
];
|
||||
|
||||
// --- 可用虚拟外设列表 ---
|
||||
const availableVirtualDevices = [{ type: "DDS", name: "信号发生器" }];
|
||||
|
||||
// --- 可用模板列表 ---
|
||||
const availableTemplates = ref([
|
||||
{
|
||||
name: "PG2L100H 基础开发板",
|
||||
id: "PG2L100H_Pango100pro",
|
||||
description: "包含主板和两个LED的基本设置",
|
||||
path: "/EquipmentTemplates/PG2L100H_Pango100pro.json",
|
||||
thumbnailUrl: motherboardSvg,
|
||||
},
|
||||
{
|
||||
name: "矩阵键盘",
|
||||
id: "MatrixKey",
|
||||
description: "包含4x4，共16个按键的矩阵键盘",
|
||||
path: "/EquipmentTemplates/MatrixKey.json",
|
||||
thumbnailUrl: buttonSvg,
|
||||
},
|
||||
]);
|
||||
|
||||
// 显示/隐藏组件菜单
|
||||
const showComponentsMenu = computed({
|
||||
get: () => props.open,
|
||||
set: (value) => emit("update:open", value),
|
||||
});
|
||||
|
||||
// 组件模块缓存
|
||||
const componentModules = shallowRef<Record<string, any>>({});
|
||||
|
||||
// 动态加载组件定义
|
||||
async function loadComponentModule(type: string) {
|
||||
if (!componentModules.value[type]) {
|
||||
try {
|
||||
// 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
|
||||
const module = await import(`@/components/equipments/${type}.vue`);
|
||||
|
||||
// 将模块添加到缓存中
|
||||
componentModules.value = {
|
||||
...componentModules.value,
|
||||
[type]: module,
|
||||
};
|
||||
|
||||
console.log(`Loaded module for ${type}:`, module);
|
||||
} catch (error) {
|
||||
console.error(`Failed to load component module ${type}:`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return componentModules.value[type];
|
||||
}
|
||||
|
||||
// 预加载组件模块
|
||||
async function preloadComponentModules() {
|
||||
// 加载基础组件
|
||||
for (const component of availableComponents) {
|
||||
try {
|
||||
await loadComponentModule(component.type);
|
||||
} catch (error) {
|
||||
console.error(`Failed to preload component ${component.type}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载虚拟外设组件
|
||||
for (const device of availableVirtualDevices) {
|
||||
try {
|
||||
await loadComponentModule(device.type);
|
||||
} catch (error) {
|
||||
console.error(`Failed to preload virtual device ${device.type}:`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取组件预览时适合的尺寸
|
||||
function getPreviewSize(componentType: string): number {
|
||||
// 根据组件类型返回适当的预览尺寸
|
||||
const previewSizes: Record<string, number> = {
|
||||
MechanicalButton: 0.4, // 按钮较大，需要更小尺寸
|
||||
Switch: 0.35, // 开关较大，需要更小尺寸
|
||||
Pin: 0.8, // 引脚较小，可以大一些
|
||||
SMT_LED: 0.7, // LED可以保持适中
|
||||
SevenSegmentDisplay: 0.4, // 数码管较大，需要较小尺寸
|
||||
HDMI: 0.5, // HDMI接口较大
|
||||
DDR: 0.5, // DDR内存较大
|
||||
ETH: 0.5, // 以太网接口较大
|
||||
SD: 0.6, // SD卡插槽适中
|
||||
SFP: 0.4, // SFP光纤模块较大
|
||||
SMA: 0.7, // SMA连接器可以适中
|
||||
MotherBoard: 0.13, // 主板最大，需要最小尺寸
|
||||
DDS: 0.3, // 信号发生器较大，需要较小尺寸
|
||||
};
|
||||
|
||||
// 返回对应尺寸，如果没有特定配置则返回默认值0.5
|
||||
return previewSizes[componentType] || 0.5;
|
||||
}
|
||||
|
||||
// 搜索组件
|
||||
function searchComponents() {
|
||||
// 根据用户输入过滤可用组件列表
|
||||
// 实际逻辑已经在 filteredComponents 计算属性中实现
|
||||
}
|
||||
|
||||
// 关闭菜单
|
||||
function closeMenu() {
|
||||
showComponentsMenu.value = false;
|
||||
emit("close");
|
||||
}
|
||||
|
||||
// 添加新元器件
|
||||
async function addComponent(componentTemplate: { type: string; name: string }) {
|
||||
// 先加载组件模块
|
||||
const moduleRef = await loadComponentModule(componentTemplate.type);
|
||||
let defaultProps: Record<string, any> = {};
|
||||
|
||||
// 尝试直接调用组件导出的getDefaultProps方法
|
||||
if (moduleRef) {
|
||||
if (typeof moduleRef.getDefaultProps === "function") {
|
||||
defaultProps = moduleRef.getDefaultProps();
|
||||
console.log(
|
||||
`Got default props from ${componentTemplate.type}:`,
|
||||
defaultProps,
|
||||
);
|
||||
} else {
|
||||
// 回退到配置文件
|
||||
console.log(`No getDefaultProps found for ${componentTemplate.type}`);
|
||||
}
|
||||
} else {
|
||||
console.log(`Failed to load module for ${componentTemplate.type}`);
|
||||
}
|
||||
|
||||
// 发送添加组件事件给父组件
|
||||
emit("add-component", {
|
||||
type: componentTemplate.type,
|
||||
name: componentTemplate.name,
|
||||
props: defaultProps,
|
||||
});
|
||||
|
||||
// 关闭菜单
|
||||
closeMenu();
|
||||
}
|
||||
|
||||
// 添加模板
|
||||
async function addTemplate(template: any) {
|
||||
try {
|
||||
// 加载模板JSON文件
|
||||
const response = await fetch(template.path);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load template: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const templateData = await response.json();
|
||||
console.log("加载模板:", templateData);
|
||||
|
||||
// 发出事件，将模板数据传递给父组件
|
||||
emit("add-template", {
|
||||
id: template.id,
|
||||
name: template.name,
|
||||
template: templateData,
|
||||
capsPage: template.capsPage
|
||||
});
|
||||
|
||||
// 关闭菜单
|
||||
closeMenu();
|
||||
} catch (error) {
|
||||
console.error("加载模板出错:", error);
|
||||
alert("无法加载模板文件，请检查控制台错误信息");
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤后的元器件列表 (用于菜单)
|
||||
const filteredComponents = computed(() => {
|
||||
if (!searchQuery.value || activeTab.value !== "components") {
|
||||
return availableComponents;
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
return availableComponents.filter(
|
||||
(component) =>
|
||||
component.name.toLowerCase().includes(query) ||
|
||||
component.type.toLowerCase().includes(query),
|
||||
);
|
||||
});
|
||||
|
||||
// 过滤后的模板列表 (用于菜单)
|
||||
const filteredTemplates = computed(() => {
|
||||
if (!searchQuery.value || activeTab.value !== "templates") {
|
||||
return availableTemplates.value;
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
return availableTemplates.value.filter(
|
||||
(template) =>
|
||||
template.name.toLowerCase().includes(query) ||
|
||||
(template.description &&
|
||||
template.description.toLowerCase().includes(query)),
|
||||
);
|
||||
});
|
||||
|
||||
// 过滤后的虚拟外设列表 (用于菜单)
|
||||
const filteredVirtualDevices = computed(() => {
|
||||
if (!searchQuery.value || activeTab.value !== "virtual") {
|
||||
return availableVirtualDevices;
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
return availableVirtualDevices.filter(
|
||||
(device) =>
|
||||
device.name.toLowerCase().includes(query) ||
|
||||
device.type.toLowerCase().includes(query),
|
||||
);
|
||||
});
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
// 预加载组件模块
|
||||
preloadComponentModules();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 组件预览样式 */
|
||||
.component-preview {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.animate-slideUp {
|
||||
animation: slideUp 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1277
src/components/LabCanvas/DiagramCanvas.vue
Normal file
1277
src/components/LabCanvas/DiagramCanvas.vue
Normal file
File diff suppressed because it is too large
Load Diff
646
src/components/LabCanvas/composable/componentManager.ts
Normal file
646
src/components/LabCanvas/composable/componentManager.ts
Normal file
@@ -0,0 +1,646 @@
|
||||
import { ref, shallowRef, computed } from "vue";
|
||||
import { createInjectionState } from "@vueuse/core";
|
||||
import type { DiagramData, DiagramPart } from "./diagramManager";
|
||||
import type { PropertyConfig } from "@/components/equipments/componentConfig";
|
||||
import {
|
||||
generatePropertyConfigs,
|
||||
generatePropsFromDefault,
|
||||
generatePropsFromAttrs,
|
||||
} from "@/components/equipments/componentConfig";
|
||||
|
||||
// 存储动态导入的组件模块
|
||||
interface ComponentModule {
|
||||
default: any;
|
||||
getDefaultProps?: () => Record<string, any>;
|
||||
config?: {
|
||||
props?: Array<PropertyConfig>;
|
||||
};
|
||||
__esModule?: boolean; // 添加 __esModule 属性
|
||||
}
|
||||
|
||||
// 定义组件管理器的状态和方法
|
||||
const [useProvideComponentManager, useComponentManager] = createInjectionState(
|
||||
() => {
|
||||
// --- 状态管理 ---
|
||||
const componentModules = ref<Record<string, ComponentModule>>({});
|
||||
const selectedComponentId = ref<string | null>(null);
|
||||
const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(null);
|
||||
const diagramCanvas = ref<any>(null);
|
||||
const componentRefs = ref<Record<string, any>>({});
|
||||
|
||||
// 计算当前选中的组件数据
|
||||
const selectedComponentData = computed(() => {
|
||||
if (!diagramCanvas.value || !selectedComponentId.value) return null;
|
||||
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (canvasInstance && canvasInstance.getDiagramData) {
|
||||
const data = canvasInstance.getDiagramData();
|
||||
return data.parts.find((p: DiagramPart) => p.id === selectedComponentId.value) || null;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
// --- 组件模块管理 ---
|
||||
|
||||
/**
|
||||
* 动态加载组件模块
|
||||
*/
|
||||
async function loadComponentModule(type: string) {
|
||||
console.log(`尝试加载组件模块: ${type}`);
|
||||
console.log(`当前已加载的模块:`, Object.keys(componentModules.value));
|
||||
|
||||
if (!componentModules.value[type]) {
|
||||
try {
|
||||
console.log(`正在动态导入模块: @/components/equipments/${type}.vue`);
|
||||
const module = await import(`@/components/equipments/${type}.vue`);
|
||||
console.log(`成功导入模块 ${type}:`, module);
|
||||
|
||||
// 直接设置新的对象引用以触发响应性
|
||||
componentModules.value = {
|
||||
...componentModules.value,
|
||||
[type]: module,
|
||||
};
|
||||
console.log(`模块 ${type} 已添加到 componentModules`);
|
||||
console.log(`更新后的模块列表:`, Object.keys(componentModules.value));
|
||||
} catch (error) {
|
||||
console.error(`Failed to load component module ${type}:`, error);
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
console.log(`模块 ${type} 已经存在`);
|
||||
}
|
||||
return componentModules.value[type];
|
||||
}
|
||||
|
||||
/**
|
||||
* 预加载所有组件模块
|
||||
*/
|
||||
async function preloadComponentModules(componentTypes: string[]) {
|
||||
console.log("Preloading component modules:", componentTypes);
|
||||
await Promise.all(
|
||||
componentTypes.map((type) => loadComponentModule(type))
|
||||
);
|
||||
console.log("All component modules loaded");
|
||||
}
|
||||
|
||||
// --- 组件操作 ---
|
||||
|
||||
/**
|
||||
* 添加新组件到画布
|
||||
*/
|
||||
async function addComponent(componentData: {
|
||||
type: string;
|
||||
name: string;
|
||||
props: Record<string, any>;
|
||||
}) {
|
||||
console.log("=== 开始添加组件 ===");
|
||||
console.log("组件数据:", componentData);
|
||||
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance) {
|
||||
console.error("没有可用的画布实例");
|
||||
return;
|
||||
}
|
||||
|
||||
// 预加载组件模块，确保组件能正常渲染
|
||||
console.log(`预加载组件模块: ${componentData.type}`);
|
||||
const componentModule = await loadComponentModule(componentData.type);
|
||||
if (!componentModule) {
|
||||
console.error(`无法加载组件模块: ${componentData.type}`);
|
||||
return;
|
||||
}
|
||||
console.log(`组件模块加载成功: ${componentData.type}`, componentModule);
|
||||
|
||||
// 获取画布位置信息
|
||||
let position = { x: 100, y: 100 };
|
||||
let scale = 1;
|
||||
|
||||
try {
|
||||
if (canvasInstance.getCanvasPosition && canvasInstance.getScale) {
|
||||
position = canvasInstance.getCanvasPosition();
|
||||
scale = canvasInstance.getScale();
|
||||
|
||||
const canvasContainer = canvasInstance.$el as HTMLElement;
|
||||
if (canvasContainer) {
|
||||
const viewportWidth = canvasContainer.clientWidth;
|
||||
const viewportHeight = canvasContainer.clientHeight;
|
||||
|
||||
position.x = (viewportWidth / 2 - position.x) / scale;
|
||||
position.y = (viewportHeight / 2 - position.y) / scale;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取画布位置时出错:", error);
|
||||
}
|
||||
|
||||
// 添加随机偏移
|
||||
const offsetX = Math.floor(Math.random() * 100) - 50;
|
||||
const offsetY = Math.floor(Math.random() * 100) - 50;
|
||||
|
||||
// 获取组件能力页面
|
||||
let capsPage = null;
|
||||
if (
|
||||
componentModule &&
|
||||
componentModule.default &&
|
||||
typeof componentModule.default.getCapabilities === "function"
|
||||
) {
|
||||
try {
|
||||
capsPage = componentModule.default.getCapabilities();
|
||||
console.log(`获取到${componentData.type}组件的能力页面`);
|
||||
} catch (error) {
|
||||
console.error(`获取${componentData.type}组件能力页面失败:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// 创建新组件
|
||||
const newComponent: DiagramPart = {
|
||||
id: `component-${Date.now()}`,
|
||||
type: componentData.type,
|
||||
x: Math.round(position.x + offsetX),
|
||||
y: Math.round(position.y + offsetY),
|
||||
attrs: componentData.props,
|
||||
rotate: 0,
|
||||
group: "",
|
||||
positionlock: false,
|
||||
hidepins: true,
|
||||
isOn: true,
|
||||
index: 0,
|
||||
};
|
||||
|
||||
// 通过画布实例添加组件
|
||||
if (canvasInstance.getDiagramData && canvasInstance.updateDiagramDataDirectly) {
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
currentData.parts.push(newComponent);
|
||||
|
||||
// 使用 updateDiagramDataDirectly 避免触发加载状态
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
|
||||
console.log("组件添加完成:", newComponent);
|
||||
|
||||
// 等待Vue的下一个tick，确保组件模块已经更新
|
||||
await new Promise(resolve => setTimeout(resolve, 50));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加模板到画布
|
||||
*/
|
||||
async function addTemplate(templateData: {
|
||||
id: string;
|
||||
name: string;
|
||||
template: any;
|
||||
}) {
|
||||
console.log("添加模板:", templateData);
|
||||
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
|
||||
console.error("没有可用的画布实例添加模板");
|
||||
return;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
console.log("=== 当前图表组件数量:", currentData.parts.length);
|
||||
|
||||
// 生成唯一ID前缀
|
||||
const idPrefix = `template-${Date.now()}-`;
|
||||
|
||||
if (templateData.template?.parts) {
|
||||
// 获取视口中心位置
|
||||
let viewportCenter = { x: 300, y: 200 };
|
||||
try {
|
||||
if (canvasInstance.getCanvasPosition && canvasInstance.getScale) {
|
||||
const position = canvasInstance.getCanvasPosition();
|
||||
const scale = canvasInstance.getScale();
|
||||
const canvasContainer = canvasInstance.$el as HTMLElement;
|
||||
|
||||
if (canvasContainer) {
|
||||
const viewportWidth = canvasContainer.clientWidth;
|
||||
const viewportHeight = canvasContainer.clientHeight;
|
||||
viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
|
||||
viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取视口中心位置时出错:", error);
|
||||
}
|
||||
|
||||
const mainPart = templateData.template.parts[0];
|
||||
|
||||
// 创建新组件
|
||||
const newParts = await Promise.all(
|
||||
templateData.template.parts.map(async (part: any) => {
|
||||
const newPart = JSON.parse(JSON.stringify(part));
|
||||
newPart.id = `${idPrefix}${part.id}`;
|
||||
|
||||
// 加载组件模块并获取能力页面
|
||||
try {
|
||||
const componentModule = await loadComponentModule(part.type);
|
||||
if (
|
||||
componentModule?.default &&
|
||||
typeof componentModule.default.getCapabilities === "function"
|
||||
) {
|
||||
newPart.capsPage = componentModule.default.getCapabilities();
|
||||
console.log(`加载模板组件${part.type}组件的能力页面成功`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`加载模板组件${part.type}的能力页面失败:`, error);
|
||||
}
|
||||
|
||||
// 计算新位置
|
||||
if (typeof newPart.x === "number" && typeof newPart.y === "number") {
|
||||
const relativeX = part.x - mainPart.x;
|
||||
const relativeY = part.y - mainPart.y;
|
||||
newPart.x = viewportCenter.x + relativeX;
|
||||
newPart.y = viewportCenter.y + relativeY;
|
||||
}
|
||||
|
||||
return newPart;
|
||||
})
|
||||
);
|
||||
|
||||
currentData.parts.push(...newParts);
|
||||
|
||||
// 处理连接关系
|
||||
if (templateData.template.connections) {
|
||||
const idMap: Record<string, string> = {};
|
||||
templateData.template.parts.forEach((part: any) => {
|
||||
idMap[part.id] = `${idPrefix}${part.id}`;
|
||||
});
|
||||
|
||||
const newConnections = templateData.template.connections.map((conn: any) => {
|
||||
if (Array.isArray(conn)) {
|
||||
const [from, to, type, path] = conn;
|
||||
const fromParts = from.split(":");
|
||||
const toParts = to.split(":");
|
||||
|
||||
if (fromParts.length === 2 && toParts.length === 2) {
|
||||
const fromComponentId = fromParts[0];
|
||||
const fromPinId = fromParts[1];
|
||||
const toComponentId = toParts[0];
|
||||
const toPinId = toParts[1];
|
||||
|
||||
const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
|
||||
const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
|
||||
|
||||
return [newFrom, newTo, type, path];
|
||||
}
|
||||
}
|
||||
return conn;
|
||||
});
|
||||
|
||||
currentData.connections.push(...newConnections);
|
||||
}
|
||||
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);
|
||||
|
||||
return { success: true, message: `已添加 ${templateData.name} 模板` };
|
||||
} else {
|
||||
console.error("模板格式错误，缺少parts数组");
|
||||
return { success: false, message: "模板格式错误" };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除组件
|
||||
*/
|
||||
function deleteComponent(componentId: string) {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
const component = currentData.parts.find((p: DiagramPart) => p.id === componentId);
|
||||
|
||||
if (!component) return;
|
||||
|
||||
const componentsToDelete: string[] = [componentId];
|
||||
|
||||
// 处理组件组
|
||||
if (component.group && component.group !== "") {
|
||||
const groupMembers = currentData.parts.filter(
|
||||
(p: DiagramPart) => p.group === component.group && p.id !== componentId
|
||||
);
|
||||
componentsToDelete.push(...groupMembers.map((p: DiagramPart) => p.id));
|
||||
console.log(`删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`);
|
||||
}
|
||||
|
||||
// 删除组件
|
||||
currentData.parts = currentData.parts.filter(
|
||||
(p: DiagramPart) => !componentsToDelete.includes(p.id)
|
||||
);
|
||||
|
||||
// 删除相关连接
|
||||
currentData.connections = currentData.connections.filter((connection: any) => {
|
||||
for (const id of componentsToDelete) {
|
||||
if (connection[0].startsWith(`${id}:`) || connection[1].startsWith(`${id}:`)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// 清除选中状态
|
||||
if (selectedComponentId.value && componentsToDelete.includes(selectedComponentId.value)) {
|
||||
selectedComponentId.value = null;
|
||||
selectedComponentConfig.value = null;
|
||||
}
|
||||
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
}
|
||||
|
||||
/**
|
||||
* 选中组件
|
||||
*/
|
||||
async function selectComponent(componentData: DiagramPart | null) {
|
||||
selectedComponentId.value = componentData ? componentData.id : null;
|
||||
selectedComponentConfig.value = null;
|
||||
|
||||
if (componentData) {
|
||||
const moduleRef = await loadComponentModule(componentData.type);
|
||||
|
||||
if (moduleRef) {
|
||||
try {
|
||||
const propConfigs: PropertyConfig[] = [];
|
||||
const addedProps = new Set<string>();
|
||||
|
||||
// 从 getDefaultProps 方法获取默认配置
|
||||
if (typeof moduleRef.getDefaultProps === "function") {
|
||||
const defaultProps = moduleRef.getDefaultProps();
|
||||
const defaultPropConfigs = generatePropsFromDefault(defaultProps);
|
||||
defaultPropConfigs.forEach((config) => {
|
||||
propConfigs.push(config);
|
||||
addedProps.add(config.name);
|
||||
});
|
||||
}
|
||||
|
||||
// 添加组件直接属性
|
||||
const directPropConfigs = generatePropertyConfigs(componentData);
|
||||
const newDirectProps = directPropConfigs.filter(
|
||||
(config) => !addedProps.has(config.name)
|
||||
);
|
||||
propConfigs.push(...newDirectProps);
|
||||
|
||||
// 添加 attrs 中的属性
|
||||
if (componentData.attrs) {
|
||||
const attrPropConfigs = generatePropsFromAttrs(componentData.attrs);
|
||||
attrPropConfigs.forEach((attrConfig) => {
|
||||
const existingIndex = propConfigs.findIndex(
|
||||
(p) => p.name === attrConfig.name
|
||||
);
|
||||
if (existingIndex >= 0) {
|
||||
propConfigs[existingIndex] = attrConfig;
|
||||
} else {
|
||||
propConfigs.push(attrConfig);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectedComponentConfig.value = { props: propConfigs };
|
||||
console.log(`Built config for ${componentData.type}:`, selectedComponentConfig.value);
|
||||
} catch (error) {
|
||||
console.error(`Error building config for ${componentData.type}:`, error);
|
||||
selectedComponentConfig.value = { props: [] };
|
||||
}
|
||||
} else {
|
||||
console.warn(`Module for component ${componentData.type} not found.`);
|
||||
selectedComponentConfig.value = { props: [] };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新组件属性
|
||||
*/
|
||||
function updateComponentProp(componentId: string, propName: string, value: any) {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
|
||||
console.error("没有可用的画布实例进行属性更新");
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查值格式
|
||||
if (value !== null && typeof value === "object" && "value" in value) {
|
||||
value = value.value;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
|
||||
|
||||
if (part) {
|
||||
if (propName in part) {
|
||||
(part as any)[propName] = value;
|
||||
} else {
|
||||
if (!part.attrs) {
|
||||
part.attrs = {};
|
||||
}
|
||||
part.attrs[propName] = value;
|
||||
}
|
||||
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
console.log(`更新组件${componentId}的属性${propName}为:`, value, typeof value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新组件直接属性
|
||||
*/
|
||||
function updateComponentDirectProp(componentId: string, propName: string, value: any) {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
|
||||
console.error("没有可用的画布实例进行属性更新");
|
||||
return;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
|
||||
|
||||
if (part) {
|
||||
(part as any)[propName] = value;
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
console.log(`更新组件${componentId}的直接属性${propName}为:`, value, typeof value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动组件
|
||||
*/
|
||||
function moveComponent(moveData: { id: string; x: number; y: number }) {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
const part = currentData.parts.find((p: DiagramPart) => p.id === moveData.id);
|
||||
if (part) {
|
||||
part.x = moveData.x;
|
||||
part.y = moveData.y;
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置画布实例引用
|
||||
*/
|
||||
function setCanvasRef(canvasRef: any) {
|
||||
diagramCanvas.value = canvasRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置组件DOM引用
|
||||
*/
|
||||
function setComponentRef(componentId: string, el: any) {
|
||||
if (el) {
|
||||
componentRefs.value[componentId] = el;
|
||||
} else {
|
||||
delete componentRefs.value[componentId];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取组件DOM引用
|
||||
*/
|
||||
function getComponentRef(componentId: string) {
|
||||
return componentRefs.value[componentId];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前图表数据
|
||||
*/
|
||||
function getDiagramData() {
|
||||
const canvasInstance = diagramCanvas.value;
|
||||
if (canvasInstance && canvasInstance.getDiagramData) {
|
||||
return canvasInstance.getDiagramData();
|
||||
}
|
||||
return { parts: [], connections: [], version: 1, author: "admin", editor: "me" };
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新图表数据
|
||||
*/
|
||||
function updateDiagramData(data: any) {
|
||||
const canvasInstance = diagramCanvas.value;
|
||||
if (canvasInstance && canvasInstance.updateDiagramDataDirectly) {
|
||||
canvasInstance.updateDiagramDataDirectly(data);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取画布位置和缩放信息
|
||||
*/
|
||||
function getCanvasInfo() {
|
||||
const canvasInstance = diagramCanvas.value;
|
||||
if (!canvasInstance) return { position: { x: 0, y: 0 }, scale: 1 };
|
||||
|
||||
const position = canvasInstance.getCanvasPosition ? canvasInstance.getCanvasPosition() : { x: 0, y: 0 };
|
||||
const scale = canvasInstance.getScale ? canvasInstance.getScale() : 1;
|
||||
|
||||
return { position, scale };
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示通知
|
||||
*/
|
||||
function showToast(message: string, type: "success" | "error" | "info" = "info") {
|
||||
const canvasInstance = diagramCanvas.value;
|
||||
if (canvasInstance && canvasInstance.showToast) {
|
||||
canvasInstance.showToast(message, type);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取组件定义
|
||||
*/
|
||||
function getComponentDefinition(type: string) {
|
||||
const module = componentModules.value[type];
|
||||
|
||||
if (!module) {
|
||||
console.warn(`No module found for component type: ${type}`);
|
||||
// 尝试异步加载组件模块
|
||||
loadComponentModule(type);
|
||||
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(
|
||||
attrs: Record<string, any>,
|
||||
componentId?: string,
|
||||
): Record<string, any> {
|
||||
const result: Record<string, any> = { ...attrs };
|
||||
if (componentId) {
|
||||
result.componentId = componentId;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化组件管理器
|
||||
*/
|
||||
async function initialize() {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (canvasInstance?.getDiagramData) {
|
||||
const diagramData = canvasInstance.getDiagramData();
|
||||
|
||||
// 收集所有组件类型
|
||||
const componentTypes = new Set<string>();
|
||||
diagramData.parts.forEach((part: DiagramPart) => {
|
||||
componentTypes.add(part.type);
|
||||
});
|
||||
|
||||
// 预加载组件模块
|
||||
await preloadComponentModules(Array.from(componentTypes));
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
componentModules,
|
||||
selectedComponentId,
|
||||
selectedComponentData,
|
||||
selectedComponentConfig,
|
||||
componentRefs,
|
||||
|
||||
// 方法
|
||||
loadComponentModule,
|
||||
preloadComponentModules,
|
||||
addComponent,
|
||||
addTemplate,
|
||||
deleteComponent,
|
||||
selectComponent,
|
||||
updateComponentProp,
|
||||
updateComponentDirectProp,
|
||||
moveComponent,
|
||||
setCanvasRef,
|
||||
setComponentRef,
|
||||
getComponentRef,
|
||||
getDiagramData,
|
||||
updateDiagramData,
|
||||
getCanvasInfo,
|
||||
showToast,
|
||||
getComponentDefinition,
|
||||
prepareComponentProps,
|
||||
initialize,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export { useProvideComponentManager, useComponentManager };
|
||||
331
src/components/LabCanvas/composable/diagramManager.ts
Normal file
331
src/components/LabCanvas/composable/diagramManager.ts
Normal file
@@ -0,0 +1,331 @@
|
||||
// 定义 diagram.json 的类型结构
|
||||
export interface DiagramData {
|
||||
version: number;
|
||||
author: string;
|
||||
editor: string;
|
||||
parts: DiagramPart[];
|
||||
connections: ConnectionArray[];
|
||||
exportTime?: string; // 导出时的时间戳
|
||||
}
|
||||
|
||||
// 组件部分的类型定义
|
||||
export interface DiagramPart {
|
||||
id: string;
|
||||
type: string;
|
||||
x: number;
|
||||
y: number;
|
||||
attrs: Record<string, any>;
|
||||
rotate: number;
|
||||
group: string;
|
||||
positionlock: boolean;
|
||||
hidepins: boolean;
|
||||
isOn: boolean;
|
||||
index?: number; // 显示层级，数值越大显示越靠前
|
||||
}
|
||||
|
||||
// 连接类型定义 - 使用元组类型表示四元素数组
|
||||
export type ConnectionArray = [string, string, number, string[]];
|
||||
|
||||
// 解析连接字符串为组件ID和引脚ID
|
||||
export function parseConnectionPin(connectionPin: string): { componentId: string; pinId: string } {
|
||||
const [componentId, pinId] = connectionPin.split(':');
|
||||
return { componentId, pinId };
|
||||
}
|
||||
|
||||
// 将连接数组转换为适用于渲染的格式
|
||||
export function connectionArrayToWireItem(
|
||||
connection: ConnectionArray,
|
||||
index: number,
|
||||
startPos = { x: 0, y: 0 },
|
||||
endPos = { x: 0, y: 0 }
|
||||
): WireItem {
|
||||
const [startPinStr, endPinStr, width, path] = connection;
|
||||
const { componentId: startComponentId, pinId: startPinId } = parseConnectionPin(startPinStr);
|
||||
const { componentId: endComponentId, pinId: endPinId } = parseConnectionPin(endPinStr);
|
||||
|
||||
return {
|
||||
id: `wire-${index}`,
|
||||
startX: startPos.x,
|
||||
startY: startPos.y,
|
||||
endX: endPos.x,
|
||||
endY: endPos.y,
|
||||
startComponentId,
|
||||
startPinId,
|
||||
endComponentId,
|
||||
endPinId,
|
||||
strokeWidth: width,
|
||||
color: '#4a5568', // 默认颜色
|
||||
routingMode: 'path',
|
||||
pathCommands: path,
|
||||
showLabel: false
|
||||
};
|
||||
}
|
||||
|
||||
// WireItem 接口定义
|
||||
export interface WireItem {
|
||||
id: string;
|
||||
startX: number;
|
||||
startY: number;
|
||||
endX: number;
|
||||
endY: number;
|
||||
startComponentId: string;
|
||||
startPinId?: string;
|
||||
endComponentId: string;
|
||||
endPinId?: string;
|
||||
strokeWidth: number;
|
||||
color: string;
|
||||
routingMode: 'orthogonal' | 'path';
|
||||
constraint?: string;
|
||||
pathCommands?: string[];
|
||||
showLabel: boolean;
|
||||
}
|
||||
|
||||
// 从本地存储加载图表数据
|
||||
export async function loadDiagramData(): Promise<DiagramData> {
|
||||
try {
|
||||
// 先尝试从本地存储加载
|
||||
const savedData = localStorage.getItem('diagramData');
|
||||
if (savedData) {
|
||||
return JSON.parse(savedData);
|
||||
}
|
||||
|
||||
// 如果本地存储没有，从文件加载
|
||||
const response = await fetch('/src/components/diagram.json');
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load diagram.json: ${response.statusText}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('Error loading diagram data:', error);
|
||||
// 返回空的默认数据结构
|
||||
return createEmptyDiagram();
|
||||
}
|
||||
}
|
||||
|
||||
// 创建空的图表数据
|
||||
export function createEmptyDiagram(): DiagramData {
|
||||
return {
|
||||
version: 1,
|
||||
author: 'user',
|
||||
editor: 'user',
|
||||
parts: [],
|
||||
connections: []
|
||||
};
|
||||
}
|
||||
|
||||
// 保存图表数据到本地存储
|
||||
export function saveDiagramData(data: DiagramData): void {
|
||||
try {
|
||||
localStorage.setItem('diagramData', JSON.stringify(data));
|
||||
} catch (error) {
|
||||
console.error('Error saving diagram data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 添加新组件到图表数据
|
||||
export function addPart(data: DiagramData, part: DiagramPart): DiagramData {
|
||||
return {
|
||||
...data,
|
||||
parts: [...data.parts, part]
|
||||
};
|
||||
}
|
||||
|
||||
// 更新组件位置
|
||||
export function updatePartPosition(
|
||||
data: DiagramData,
|
||||
partId: string,
|
||||
x: number,
|
||||
y: number
|
||||
): DiagramData {
|
||||
return {
|
||||
...data,
|
||||
parts: data.parts.map(part =>
|
||||
part.id === partId
|
||||
? { ...part, x, y }
|
||||
: part
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
// 更新组件属性
|
||||
export function updatePartAttribute(
|
||||
data: DiagramData,
|
||||
partId: string,
|
||||
attrName: string,
|
||||
value: any
|
||||
): DiagramData {
|
||||
return {
|
||||
...data,
|
||||
parts: data.parts.map(part =>
|
||||
part.id === partId
|
||||
? {
|
||||
...part,
|
||||
attrs: {
|
||||
...part.attrs,
|
||||
[attrName]: value
|
||||
}
|
||||
}
|
||||
: part
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
// 删除组件及同组组件
|
||||
export function deletePart(data: DiagramData, partId: string): DiagramData {
|
||||
// 首先找到要删除的组件
|
||||
const component = data.parts.find(part => part.id === partId);
|
||||
if (!component) return data;
|
||||
|
||||
// 收集需要删除的组件ID列表
|
||||
const componentsToDelete: string[] = [partId];
|
||||
|
||||
// 如果组件属于一个组，则找出所有同组的组件
|
||||
if (component.group && component.group !== '') {
|
||||
const groupMembers = data.parts.filter(
|
||||
p => p.group === component.group && p.id !== partId
|
||||
);
|
||||
|
||||
// 将同组组件ID添加到删除列表
|
||||
componentsToDelete.push(...groupMembers.map(p => p.id));
|
||||
console.log(`删除组件 ${partId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`);
|
||||
}
|
||||
|
||||
return {
|
||||
...data,
|
||||
// 删除所有标记的组件
|
||||
parts: data.parts.filter(part => !componentsToDelete.includes(part.id)),
|
||||
// 删除与这些组件相关的所有连接
|
||||
connections: data.connections.filter(conn => {
|
||||
const [startPin, endPin] = conn;
|
||||
const startCompId = startPin.split(':')[0];
|
||||
const endCompId = endPin.split(':')[0];
|
||||
|
||||
// 检查连接两端的组件是否在删除列表中
|
||||
return !componentsToDelete.includes(startCompId) && !componentsToDelete.includes(endCompId);
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
// 添加连接
|
||||
export function addConnection(
|
||||
data: DiagramData,
|
||||
startComponentId: string,
|
||||
startPinId: string,
|
||||
endComponentId: string,
|
||||
endPinId: string,
|
||||
width: number = 2,
|
||||
path: string[] = []
|
||||
): DiagramData {
|
||||
const newConnection: ConnectionArray = [
|
||||
`${startComponentId}:${startPinId}`,
|
||||
`${endComponentId}:${endPinId}`,
|
||||
width,
|
||||
path
|
||||
];
|
||||
|
||||
return {
|
||||
...data,
|
||||
connections: [...data.connections, newConnection]
|
||||
};
|
||||
}
|
||||
|
||||
// 删除连接
|
||||
export function deleteConnection(
|
||||
data: DiagramData,
|
||||
connectionIndex: number
|
||||
): DiagramData {
|
||||
return {
|
||||
...data,
|
||||
connections: data.connections.filter((_, index) => index !== connectionIndex)
|
||||
};
|
||||
}
|
||||
|
||||
// 查找与组件关联的所有连接
|
||||
export function findConnectionsByPart(
|
||||
data: DiagramData,
|
||||
partId: string
|
||||
): { connection: ConnectionArray; index: number }[] {
|
||||
return data.connections
|
||||
.map((connection, index) => ({ connection, index }))
|
||||
.filter(({ connection }) => {
|
||||
const [startPin, endPin] = connection;
|
||||
const startCompId = startPin.split(':')[0];
|
||||
const endCompId = endPin.split(':')[0];
|
||||
return startCompId === partId || endCompId === partId;
|
||||
});
|
||||
}
|
||||
|
||||
// 基于组的移动相关组件
|
||||
export function moveGroupComponents(
|
||||
data: DiagramData,
|
||||
groupId: string,
|
||||
deltaX: number,
|
||||
deltaY: number
|
||||
): DiagramData {
|
||||
if (!groupId) return data;
|
||||
|
||||
return {
|
||||
...data,
|
||||
parts: data.parts.map(part =>
|
||||
part.group === groupId
|
||||
? { ...part, x: part.x + deltaX, y: part.y + deltaY }
|
||||
: part
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
// 添加验证diagram.json文件的函数
|
||||
export function validateDiagramData(data: any): { isValid: boolean; errors: string[] } {
|
||||
const errors: string[] = [];
|
||||
|
||||
// 检查版本号
|
||||
if (!data.version) {
|
||||
errors.push('缺少version字段');
|
||||
}
|
||||
|
||||
// 检查parts数组
|
||||
if (!Array.isArray(data.parts)) {
|
||||
errors.push('parts字段不是数组');
|
||||
} else {
|
||||
// 验证parts中的每个对象
|
||||
data.parts.forEach((part: any, index: number) => {
|
||||
if (!part.id) errors.push(`parts[${index}]缺少id`);
|
||||
if (!part.type) errors.push(`parts[${index}]缺少type`);
|
||||
if (typeof part.x !== 'number') errors.push(`parts[${index}]缺少有效的x坐标`);
|
||||
if (typeof part.y !== 'number') errors.push(`parts[${index}]缺少有效的y坐标`);
|
||||
});
|
||||
}
|
||||
|
||||
// 检查connections数组
|
||||
if (!Array.isArray(data.connections)) {
|
||||
errors.push('connections字段不是数组');
|
||||
} else {
|
||||
// 验证connections中的每个数组
|
||||
data.connections.forEach((conn: any, index: number) => {
|
||||
if (!Array.isArray(conn) || conn.length < 3) {
|
||||
errors.push(`connections[${index}]不是有效的连接数组`);
|
||||
return;
|
||||
}
|
||||
|
||||
const [startPin, endPin, width] = conn;
|
||||
|
||||
if (typeof startPin !== 'string' || !startPin.includes(':')) {
|
||||
errors.push(`connections[${index}]的起始针脚格式无效`);
|
||||
}
|
||||
|
||||
if (typeof endPin !== 'string' || !endPin.includes(':')) {
|
||||
errors.push(`connections[${index}]的结束针脚格式无效`);
|
||||
}
|
||||
|
||||
if (typeof width !== 'number') {
|
||||
errors.push(`connections[${index}]的宽度不是有效的数字`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
isValid: errors.length === 0,
|
||||
errors
|
||||
};
|
||||
}
|
||||
85
src/components/LabCanvas/composable/wireManager.ts
Normal file
85
src/components/LabCanvas/composable/wireManager.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
export interface WireItem {
|
||||
id: string;
|
||||
startX: number;
|
||||
startY: number;
|
||||
endX: number;
|
||||
endY: number;
|
||||
startComponentId: string;
|
||||
endComponentId?: string;
|
||||
color?: string;
|
||||
isActive?: boolean;
|
||||
constraint?: string;
|
||||
strokeWidth?: number;
|
||||
routingMode?: 'auto' | 'orthogonal' | 'direct';
|
||||
showLabel?: boolean;
|
||||
}
|
||||
|
||||
// 全局wires状态
|
||||
export const wires = ref<WireItem[]>([]);
|
||||
|
||||
// 添加新连线
|
||||
export function addWire(wire: WireItem) {
|
||||
wires.value.push(wire);
|
||||
}
|
||||
|
||||
// 删除连线
|
||||
export function deleteWire(wireId: string) {
|
||||
const idx = wires.value.findIndex(w => w.id === wireId);
|
||||
if (idx !== -1) wires.value.splice(idx, 1);
|
||||
}
|
||||
|
||||
// 批量更新与某个引脚相关的所有Wire的约束
|
||||
export function updateWiresConstraintByPin(componentId: string, newConstraint: string) {
|
||||
wires.value.forEach(wire => {
|
||||
if (
|
||||
(wire.startComponentId === componentId) ||
|
||||
(wire.endComponentId === componentId)
|
||||
) {
|
||||
wire.constraint = newConstraint;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查找与某个引脚相关的所有Wire
|
||||
export function findWiresByPin(componentId: string) {
|
||||
return wires.value.filter(wire =>
|
||||
(wire.startComponentId === componentId) ||
|
||||
(wire.endComponentId === componentId)
|
||||
);
|
||||
}
|
||||
|
||||
// 临时连线相关状态
|
||||
export const isCreatingWire = ref(false);
|
||||
export const creatingWireStart = reactive({ x: 0, y: 0 });
|
||||
export const creatingWireStartInfo = reactive({
|
||||
componentId: '',
|
||||
pinLabel: '',
|
||||
constraint: ''
|
||||
});
|
||||
export const mousePosition = reactive({ x: 0, y: 0 });
|
||||
|
||||
export function resetWireCreation() {
|
||||
isCreatingWire.value = false;
|
||||
creatingWireStart.x = 0;
|
||||
creatingWireStart.y = 0;
|
||||
creatingWireStartInfo.componentId = '';
|
||||
creatingWireStartInfo.pinLabel = '';
|
||||
creatingWireStartInfo.constraint = '';
|
||||
}
|
||||
|
||||
export function setWireCreationStart(x: number, y: number, componentId: string, pinLabel: string, constraint: string) {
|
||||
isCreatingWire.value = true;
|
||||
creatingWireStart.x = x;
|
||||
creatingWireStart.y = y;
|
||||
creatingWireStartInfo.componentId = componentId;
|
||||
creatingWireStartInfo.pinLabel = pinLabel;
|
||||
creatingWireStartInfo.constraint = constraint;
|
||||
}
|
||||
|
||||
export function setMousePosition(x: number, y: number) {
|
||||
mousePosition.x = x;
|
||||
mousePosition.y = y;
|
||||
}
|
||||
|
||||
8
src/components/LabCanvas/index.ts
Normal file
8
src/components/LabCanvas/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
// 导出组件管理器服务
|
||||
export { useProvideComponentManager, useComponentManager } from './composable/componentManager';
|
||||
|
||||
// 导出图表管理器
|
||||
export type { DiagramData, DiagramPart } from './composable/diagramManager';
|
||||
|
||||
// 导出连线管理器
|
||||
export type { WireItem } from './composable/wireManager';
|
||||
Reference in New Issue
Block a user