refactor: rewrite basic canvas using konva
This commit is contained in:
parent
e0db12e0eb
commit
b6fb7e05fa
|
|
@ -22,6 +22,7 @@
|
||||||
"ts-log": "^2.2.7",
|
"ts-log": "^2.2.7",
|
||||||
"ts-results-es": "^5.0.1",
|
"ts-results-es": "^5.0.1",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
|
"vue-konva": "^3.2.1",
|
||||||
"vue-router": "4",
|
"vue-router": "4",
|
||||||
"yocto-queue": "^1.2.1",
|
"yocto-queue": "^1.2.1",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
|
|
@ -4036,6 +4037,34 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/vue-konva": {
|
||||||
|
"version": "3.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-konva/-/vue-konva-3.2.1.tgz",
|
||||||
|
"integrity": "sha512-gLF+VYnlrBfwtaN3NkgzzEqlj9nyCll80VZv2DdvLUM3cisUsdcRJJuMwGTBJOTebcnn6MB22r33IFd2m+m/ig==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "patreon",
|
||||||
|
"url": "https://www.patreon.com/lavrton"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/konva"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/lavrton"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 4.0.0",
|
||||||
|
"npm": ">= 3.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"konva": ">7",
|
||||||
|
"vue": "^3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vue-router": {
|
"node_modules/vue-router": {
|
||||||
"version": "4.5.0",
|
"version": "4.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,7 @@
|
||||||
"ts-log": "^2.2.7",
|
"ts-log": "^2.2.7",
|
||||||
"ts-results-es": "^5.0.1",
|
"ts-results-es": "^5.0.1",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
|
"vue-konva": "^3.2.1",
|
||||||
"vue-router": "4",
|
"vue-router": "4",
|
||||||
"yocto-queue": "^1.2.1",
|
"yocto-queue": "^1.2.1",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
|
|
|
||||||
|
|
@ -2,13 +2,10 @@ import './assets/main.css'
|
||||||
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
|
import VueKonva from "vue-konva"
|
||||||
|
|
||||||
import App from '@/App.vue'
|
import App from '@/App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
// import { Client } from './APIClient'
|
|
||||||
|
|
||||||
const app = createApp(App).use(router).use(createPinia()).mount('#app')
|
const app = createApp(App).use(router).use(createPinia()).use(VueKonva).mount('#app')
|
||||||
|
|
||||||
// 初始化约束通信
|
|
||||||
// initConstraintCommunication();
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,844 +1,95 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="h-screen flex flex-col overflow-hidden">
|
<div class="h-screen w-screen">
|
||||||
<div class="flex flex-1 overflow-hidden relative">
|
<v-stage class="h-full w-full" ref="stage" :config="stageSize">
|
||||||
<!-- 左侧图形化区域 -->
|
<v-layer ref="layer">
|
||||||
<div class="relative bg-base-200 overflow-hidden h-full" :style="{ width: leftPanelWidth + '%' }">
|
<v-group ref="group">
|
||||||
<DiagramCanvas ref="diagramCanvas" :componentModules="componentModules" :showDocPanel="showDocPanel"
|
<v-star v-for="item in list" :key="item.id" :config="{
|
||||||
@component-selected="handleComponentSelected" @component-moved="handleComponentMoved"
|
x: item.x,
|
||||||
@component-delete="handleComponentDelete" @wire-created="handleWireCreated" @wire-deleted="handleWireDeleted"
|
y: item.y,
|
||||||
@diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
|
rotation: item.rotation,
|
||||||
@load-component-module="handleLoadComponentModule" @toggle-doc-panel="toggleDocPanel" />
|
id: item.id,
|
||||||
|
numPoints: 5,
|
||||||
|
innerRadius: 30,
|
||||||
|
outerRadius: 50,
|
||||||
|
fill: '#89b717',
|
||||||
|
opacity: 0.8,
|
||||||
|
shadowColor: 'black',
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOpacity: 0.6,
|
||||||
|
scaleX: item.scale,
|
||||||
|
scaleY: item.scale,
|
||||||
|
}" />
|
||||||
|
</v-group>
|
||||||
|
</v-layer>
|
||||||
|
</v-stage>
|
||||||
|
<div class="absolute top-20 left-10">
|
||||||
|
<input type="checkbox" class="checkbox" @change="handleCacheChange" />
|
||||||
|
cache shapes
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 拖拽分割线 -->
|
|
||||||
<div
|
|
||||||
class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
|
|
||||||
@mousedown="startResize"></div>
|
|
||||||
<!-- 右侧编辑区域 -->
|
|
||||||
<div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
|
|
||||||
<div class="overflow-y-auto flex-1">
|
|
||||||
<!-- 使用条件渲染显示不同的面板 -->
|
|
||||||
<PropertyPanel v-show="!showDocPanel" :componentData="selectedComponentData"
|
|
||||||
:componentConfig="selectedComponentConfig" @updateProp="updateComponentProp"
|
|
||||||
@updateDirectProp="updateComponentDirectProp" />
|
|
||||||
<div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
|
|
||||||
<MarkdownRenderer :content="documentContent" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 元器件选择组件 -->
|
|
||||||
<ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
|
|
||||||
@add-component="handleAddComponent" @add-template="handleAddTemplate" @close="showComponentsMenu = false" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// 引入wokwi-elements和组件
|
import { isNull, isUndefined } from "mathjs";
|
||||||
// import "@wokwi/elements"; // 不再需要全局引入 wokwi
|
import { ref, onMounted, useTemplateRef, type HTMLAttributes } from "vue";
|
||||||
import { ref, computed, onMounted, onUnmounted, shallowRef } from "vue"; // 引入 defineAsyncComponent 和 shallowRef
|
|
||||||
import DiagramCanvas from "@/components/DiagramCanvas.vue";
|
|
||||||
import ComponentSelector from "@/components/ComponentSelector.vue";
|
|
||||||
import PropertyPanel from "@/components/PropertyPanel.vue";
|
|
||||||
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
|
|
||||||
import type { DiagramData, DiagramPart } from "@/components/diagramManager";
|
|
||||||
import {
|
|
||||||
type PropertyConfig,
|
|
||||||
generatePropertyConfigs,
|
|
||||||
generatePropsFromDefault,
|
|
||||||
generatePropsFromAttrs,
|
|
||||||
} from "@/components/equipments/componentConfig"; // 引入组件配置工具
|
|
||||||
|
|
||||||
// --- 文档面板控制 ---
|
type CanvasObject = {
|
||||||
const showDocPanel = ref(false);
|
|
||||||
const documentContent = ref("");
|
|
||||||
|
|
||||||
// 获取路由参数
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
const route = useRoute();
|
|
||||||
|
|
||||||
// 切换文档面板和属性面板
|
|
||||||
async function toggleDocPanel() {
|
|
||||||
showDocPanel.value = !showDocPanel.value;
|
|
||||||
|
|
||||||
// 如果切换到文档面板，则获取文档内容
|
|
||||||
if (showDocPanel.value) {
|
|
||||||
await loadDocumentContent();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 加载文档内容
|
|
||||||
async function loadDocumentContent() {
|
|
||||||
try {
|
|
||||||
// 从路由参数中获取教程ID
|
|
||||||
const tutorialId = (route.query.tutorial as string) || "02"; // 默认加载02例程
|
|
||||||
|
|
||||||
// 构建文档路径
|
|
||||||
let docPath = `/doc/${tutorialId}/doc.md`;
|
|
||||||
|
|
||||||
// 检查当前路径是否包含下划线（例如 02_key 格式）
|
|
||||||
// 如果不包含，那么使用更新的命名格式
|
|
||||||
if (!tutorialId.includes("_")) {
|
|
||||||
docPath = `/doc/${tutorialId}/doc.md`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取文档内容
|
|
||||||
const response = await fetch(docPath);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Failed to load document: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新文档内容，并替换图片路径
|
|
||||||
documentContent.value = (await response.text()).replace(
|
|
||||||
/.\/images/gi,
|
|
||||||
`/doc/${tutorialId}/images`,
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("加载文档失败:", error);
|
|
||||||
documentContent.value = "# 文档加载失败\n\n无法加载请求的文档。";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查是否有例程参数，如果有则自动打开文档面板
|
|
||||||
onMounted(async () => {
|
|
||||||
if (route.query.tutorial) {
|
|
||||||
showDocPanel.value = true;
|
|
||||||
await loadDocumentContent();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- 元器件管理 ---
|
|
||||||
const showComponentsMenu = ref(false);
|
|
||||||
const diagramData = ref<DiagramData>({
|
|
||||||
version: 1,
|
|
||||||
author: "admin",
|
|
||||||
editor: "me",
|
|
||||||
parts: [],
|
|
||||||
connections: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
const selectedComponentId = ref<string | null>(null);
|
|
||||||
const selectedComponentData = computed(() => {
|
|
||||||
return (
|
|
||||||
diagramData.value.parts.find((p) => p.id === selectedComponentId.value) ||
|
|
||||||
null
|
|
||||||
);
|
|
||||||
});
|
|
||||||
const diagramCanvas = ref(null);
|
|
||||||
|
|
||||||
// 存储动态导入的组件模块
|
|
||||||
interface ComponentModule {
|
|
||||||
default: any;
|
|
||||||
getDefaultProps?: () => Record<string, any>;
|
|
||||||
config?: {
|
|
||||||
props?: Array<PropertyConfig>;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const componentModules = shallowRef<Record<string, ComponentModule>>({});
|
|
||||||
const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(
|
|
||||||
null,
|
|
||||||
); // 存储选中组件的配置
|
|
||||||
|
|
||||||
// 动态加载组件定义
|
|
||||||
async function loadComponentModule(type: string) {
|
|
||||||
if (!componentModules.value[type]) {
|
|
||||||
try {
|
|
||||||
// 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
|
|
||||||
const module = await import(`../components/equipments/${type}.vue`);
|
|
||||||
|
|
||||||
// 使用 markRaw 包装模块，避免不必要的响应式处理
|
|
||||||
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 handleLoadComponentModule(type: string) {
|
|
||||||
console.log("Handling load component module request for:", type);
|
|
||||||
await loadComponentModule(type);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- 分割面板 ---
|
|
||||||
const leftPanelWidth = ref(60);
|
|
||||||
const isResizing = ref(false);
|
|
||||||
|
|
||||||
// 分割面板拖拽相关函数
|
|
||||||
function startResize(e: MouseEvent) {
|
|
||||||
isResizing.value = true;
|
|
||||||
document.addEventListener("mousemove", onResize);
|
|
||||||
document.addEventListener("mouseup", stopResize);
|
|
||||||
e.preventDefault(); // 防止文本选择
|
|
||||||
}
|
|
||||||
|
|
||||||
function onResize(e: MouseEvent) {
|
|
||||||
if (!isResizing.value) return;
|
|
||||||
|
|
||||||
// 获取容器宽度和鼠标位置
|
|
||||||
const container = document.querySelector(
|
|
||||||
".flex-1.overflow-hidden",
|
|
||||||
) as HTMLElement;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const containerWidth = container.clientWidth;
|
|
||||||
const mouseX = e.clientX;
|
|
||||||
|
|
||||||
// 计算左侧面板应占的百分比
|
|
||||||
let newWidth = (mouseX / containerWidth) * 100;
|
|
||||||
|
|
||||||
// 限制最小宽度和最大宽度
|
|
||||||
newWidth = Math.max(20, Math.min(newWidth, 80));
|
|
||||||
|
|
||||||
// 更新宽度
|
|
||||||
leftPanelWidth.value = newWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopResize() {
|
|
||||||
isResizing.value = false;
|
|
||||||
document.removeEventListener("mousemove", onResize);
|
|
||||||
document.removeEventListener("mouseup", stopResize);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- 元器件操作 ---
|
|
||||||
function openComponentsMenu() {
|
|
||||||
showComponentsMenu.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理 ComponentSelector 组件添加元器件事件
|
|
||||||
async function handleAddComponent(componentData: {
|
|
||||||
type: string;
|
|
||||||
name: string;
|
|
||||||
props: Record<string, any>;
|
|
||||||
}) {
|
|
||||||
// 加载组件模块以便后续使用
|
|
||||||
const componentModule = await loadComponentModule(componentData.type);
|
|
||||||
|
|
||||||
// 获取画布容器和位置信息
|
|
||||||
const canvasInstance = diagramCanvas.value as any;
|
|
||||||
|
|
||||||
// 获取当前画布的位置信息
|
|
||||||
let position = { x: 100, y: 100 };
|
|
||||||
let scale = 1;
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (
|
|
||||||
canvasInstance &&
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建新组件，使用diagramManager接口定义
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
|
|
||||||
console.log("添加新组件:", newComponent);
|
|
||||||
// 通过画布实例添加组件
|
|
||||||
if (
|
|
||||||
canvasInstance &&
|
|
||||||
canvasInstance.getDiagramData &&
|
|
||||||
canvasInstance.updateDiagramDataDirectly
|
|
||||||
) {
|
|
||||||
const currentData = canvasInstance.getDiagramData();
|
|
||||||
currentData.parts.push(newComponent);
|
|
||||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理模板添加事件
|
|
||||||
async function handleAddTemplate(templateData: {
|
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
x: number;
|
||||||
template: any;
|
y: number;
|
||||||
}) {
|
rotation: number;
|
||||||
console.log("添加模板:", templateData);
|
scale: number;
|
||||||
console.log("=== 模板组件数量:", templateData.template?.parts?.length || 0);
|
};
|
||||||
// 获取画布实例
|
|
||||||
const canvasInstance = diagramCanvas.value as any;
|
|
||||||
if (
|
|
||||||
!canvasInstance ||
|
|
||||||
!canvasInstance.getDiagramData ||
|
|
||||||
!canvasInstance.updateDiagramDataDirectly
|
|
||||||
) {
|
|
||||||
console.error("没有可用的画布实例添加模板");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取当前图表数据
|
const stageSize = {
|
||||||
const currentData = canvasInstance.getDiagramData();
|
width: window.innerWidth,
|
||||||
console.log("=== 当前图表组件数量:", currentData.parts.length);
|
height: window.innerHeight,
|
||||||
|
};
|
||||||
|
|
||||||
// 生成唯一ID前缀，以确保添加的组件ID不重复
|
const list = ref<CanvasObject[]>([]);
|
||||||
const idPrefix = `template-${Date.now()}-`;
|
const group = useTemplateRef<HTMLAttributes>("group");
|
||||||
// 处理模板组件并添加到图表
|
const dragItemId = ref(null);
|
||||||
if (templateData.template && templateData.template.parts) {
|
|
||||||
// 获取当前视口中心位置
|
|
||||||
let viewportCenter = { x: 300, y: 200 }; // 默认值
|
|
||||||
try {
|
|
||||||
if (
|
|
||||||
canvasInstance &&
|
|
||||||
canvasInstance.getCanvasPosition &&
|
|
||||||
canvasInstance.getScale
|
|
||||||
) {
|
|
||||||
const position = canvasInstance.getCanvasPosition();
|
|
||||||
const scale = canvasInstance.getScale();
|
|
||||||
|
|
||||||
// 获取画布容器
|
function handleCacheChange(e: Event) {
|
||||||
const canvasContainer = canvasInstance.$el as HTMLElement;
|
const target = e.target as HTMLInputElement;
|
||||||
if (canvasContainer) {
|
const shouldCache = isNull(target) ? false : target.checked;
|
||||||
// 计算可视区域中心点在画布坐标系中的位置
|
if (shouldCache) {
|
||||||
const viewportWidth = canvasContainer.clientWidth;
|
group.getNode().cache();
|
||||||
const viewportHeight = canvasContainer.clientHeight;
|
|
||||||
|
|
||||||
// 计算视口中心点的坐标 (与handleAddComponent函数中的方法相同)
|
|
||||||
viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
|
|
||||||
viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
|
|
||||||
console.log(
|
|
||||||
`=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("获取视口中心位置时出错:", error);
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("=== 使用视口中心添加模板组件:", viewportCenter);
|
|
||||||
|
|
||||||
// 找到模板中的主要组件（假设是第一个组件）
|
|
||||||
const mainPart = templateData.template.parts[0];
|
|
||||||
|
|
||||||
// 创建带有新位置的组件
|
|
||||||
const newParts = await Promise.all(
|
|
||||||
templateData.template.parts.map(async (part: any) => {
|
|
||||||
// 创建组件副本并分配新ID
|
|
||||||
const newPart = JSON.parse(JSON.stringify(part));
|
|
||||||
newPart.id = `${idPrefix}${part.id}`;
|
|
||||||
|
|
||||||
// 尝试加载组件模块并获取能力页面
|
|
||||||
try {
|
|
||||||
const componentModule = await loadComponentModule(part.type);
|
|
||||||
if (
|
|
||||||
componentModule &&
|
|
||||||
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 oldX = newPart.x;
|
|
||||||
const oldY = newPart.y;
|
|
||||||
|
|
||||||
// 计算相对位置（相对于主要组件）
|
|
||||||
const relativeX = part.x - mainPart.x;
|
|
||||||
const relativeY = part.y - mainPart.y;
|
|
||||||
|
|
||||||
// 应用到视口中心位置
|
|
||||||
newPart.x = viewportCenter.x + relativeX;
|
|
||||||
newPart.y = viewportCenter.y + relativeY;
|
|
||||||
|
|
||||||
console.log(
|
|
||||||
`=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return newPart;
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
// 向图表添加新组件
|
|
||||||
currentData.parts.push(...newParts);
|
|
||||||
|
|
||||||
// 处理连接关系
|
|
||||||
if (templateData.template.connections) {
|
|
||||||
// 创建一个映射表用于转换旧组件ID到新组件ID
|
|
||||||
const idMap: Record<string, string> = {};
|
|
||||||
templateData.template.parts.forEach((part: any) => {
|
|
||||||
idMap[part.id] = `${idPrefix}${part.id}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 添加连接，更新组件ID引用
|
|
||||||
const newConnections = templateData.template.connections.map(
|
|
||||||
(conn: any) => {
|
|
||||||
// 处理连接数据 (格式为 [from, to, type, path])
|
|
||||||
if (Array.isArray(conn)) {
|
|
||||||
const [from, to, type, path] = conn;
|
|
||||||
|
|
||||||
// 从连接字符串中提取组件ID和引脚ID
|
|
||||||
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];
|
|
||||||
|
|
||||||
// 创建新的连接字符串，使用新的组件ID
|
|
||||||
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);
|
|
||||||
|
|
||||||
// 显示成功消息
|
|
||||||
showToast(`已添加 ${templateData.name} 模板`, "success");
|
|
||||||
} else {
|
} else {
|
||||||
console.error("模板格式错误，缺少parts数组");
|
group.getNode().clearCache();
|
||||||
showToast("模板格式错误", "error");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理组件选中事件
|
function handleDragstart(e: Event) {
|
||||||
async function handleComponentSelected(componentData: DiagramPart | null) {
|
// save drag element:
|
||||||
selectedComponentId.value = componentData ? componentData.id : null;
|
const target = e.target as HTMLInputElement;
|
||||||
selectedComponentConfig.value = null; // 重置配置
|
dragItemId.value = e.target?.id();
|
||||||
|
// move current element to the top:
|
||||||
|
const item = list.value.find((i) => i.id === dragItemId.value);
|
||||||
|
if (isUndefined(item)) return;
|
||||||
|
|
||||||
if (componentData) {
|
const index = list.value.indexOf(item);
|
||||||
// 先加载组件模块
|
list.value.splice(index, 1);
|
||||||
const moduleRef = await loadComponentModule(componentData.type);
|
list.value.push(item);
|
||||||
|
}
|
||||||
|
|
||||||
if (moduleRef) {
|
function handleDragend() {
|
||||||
try {
|
dragItemId.value = null;
|
||||||
// 创建属性配置数组
|
}
|
||||||
const propConfigs: PropertyConfig[] = [];
|
|
||||||
|
|
||||||
// 创建一个映射来跟踪已添加的属性名
|
onMounted(() => {
|
||||||
const addedProps = new Set<string>();
|
for (let n = 0; n < 30; n++) {
|
||||||
|
list.value.push({
|
||||||
// 1. 首先从getDefaultProps方法获取默认配置
|
id: Math.round(Math.random() * 10000).toString(),
|
||||||
if (typeof moduleRef.getDefaultProps === "function") {
|
x: Math.random() * stageSize.width,
|
||||||
const defaultProps = moduleRef.getDefaultProps();
|
y: Math.random() * stageSize.height,
|
||||||
const defaultPropConfigs = generatePropsFromDefault(defaultProps);
|
rotation: Math.random() * 180,
|
||||||
|
scale: Math.random(),
|
||||||
// 添加默认配置并记录属性名
|
|
||||||
defaultPropConfigs.forEach((config) => {
|
|
||||||
propConfigs.push(config);
|
|
||||||
addedProps.add(config.name);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. 添加组件直接属性，这些属性会覆盖默认配置
|
|
||||||
const directPropConfigs = generatePropertyConfigs(componentData);
|
|
||||||
|
|
||||||
// 过滤掉已经添加过的属性名
|
|
||||||
const newDirectProps = directPropConfigs.filter(
|
|
||||||
(config) => !addedProps.has(config.name),
|
|
||||||
);
|
|
||||||
propConfigs.push(...newDirectProps);
|
|
||||||
|
|
||||||
// 3. 最后添加attrs中的属性
|
|
||||||
if (componentData.attrs) {
|
|
||||||
const attrs = componentData.attrs;
|
|
||||||
const attrPropConfigs = generatePropsFromAttrs(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 handleDiagramUpdated(data: DiagramData) {
|
|
||||||
diagramData.value = data;
|
|
||||||
console.log("Diagram data updated:", data);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理组件移动事件
|
|
||||||
function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
|
|
||||||
const part = diagramData.value.parts.find((p) => p.id === moveData.id);
|
|
||||||
if (part) {
|
|
||||||
part.x = moveData.x;
|
|
||||||
part.y = moveData.y;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理组件删除事件
|
|
||||||
function handleComponentDelete(componentId: string) {
|
|
||||||
// 查找要删除的组件
|
|
||||||
const component = diagramData.value.parts.find((p) => p.id === componentId);
|
|
||||||
if (!component) return;
|
|
||||||
|
|
||||||
// 收集需要删除的组件ID列表（包括当前组件和同组组件）
|
|
||||||
const componentsToDelete: string[] = [componentId];
|
|
||||||
|
|
||||||
// 如果组件属于一个组，则找出所有同组的组件
|
|
||||||
if (component.group && component.group !== "") {
|
|
||||||
const groupMembers = diagramData.value.parts.filter(
|
|
||||||
(p) => p.group === component.group && p.id !== componentId,
|
|
||||||
);
|
|
||||||
|
|
||||||
// 将同组组件ID添加到删除列表
|
|
||||||
componentsToDelete.push(...groupMembers.map((p) => p.id));
|
|
||||||
console.log(
|
|
||||||
`删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除所有标记的组件
|
|
||||||
diagramData.value.parts = diagramData.value.parts.filter(
|
|
||||||
(p) => !componentsToDelete.includes(p.id),
|
|
||||||
);
|
|
||||||
|
|
||||||
// 同时删除与这些组件相关的所有连接
|
|
||||||
diagramData.value.connections = diagramData.value.connections.filter(
|
|
||||||
(connection) => {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新组件属性的方法
|
|
||||||
function updateComponentProp(
|
|
||||||
componentId: string,
|
|
||||||
propName: string,
|
|
||||||
value: any,
|
|
||||||
) {
|
|
||||||
const canvasInstance = diagramCanvas.value as any;
|
|
||||||
if (
|
|
||||||
!canvasInstance ||
|
|
||||||
!canvasInstance.getDiagramData ||
|
|
||||||
!canvasInstance.updateDiagramDataDirectly
|
|
||||||
) {
|
|
||||||
console.error("没有可用的画布实例进行属性更新");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查值是否为对象，如果是对象并有value属性，则使用该属性值
|
|
||||||
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 {
|
|
||||||
// 否则当作attrs中的属性处理
|
|
||||||
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 ||
|
|
||||||
!canvasInstance.getDiagramData ||
|
|
||||||
!canvasInstance.updateDiagramDataDirectly
|
|
||||||
) {
|
|
||||||
console.error("没有可用的画布实例进行属性更新");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentData = canvasInstance.getDiagramData();
|
|
||||||
const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
|
|
||||||
|
|
||||||
if (part) {
|
|
||||||
// @ts-ignore: 动态属性赋值
|
|
||||||
part[propName] = value;
|
|
||||||
|
|
||||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
|
||||||
console.log(
|
|
||||||
`更新组件${componentId}的直接属性${propName}为:`,
|
|
||||||
value,
|
|
||||||
typeof value,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 专门用于更新组件的显示层级 - 这个方法可以删除，直接使用updateComponentProp即可
|
|
||||||
|
|
||||||
// 处理连线创建事件
|
|
||||||
function handleWireCreated(wireData: any) {
|
|
||||||
console.log("Wire created:", wireData);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理连线删除事件
|
|
||||||
function handleWireDeleted(wireId: string) {
|
|
||||||
console.log("Wire deleted:", wireId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 导出当前diagram数据
|
|
||||||
function exportDiagram() {
|
|
||||||
// 直接使用DiagramCanvas组件提供的导出功能
|
|
||||||
const canvasInstance = diagramCanvas.value as any;
|
|
||||||
if (canvasInstance && canvasInstance.exportDiagram) {
|
|
||||||
canvasInstance.exportDiagram();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- 消息提示 ---
|
|
||||||
const showNotification = ref(false);
|
|
||||||
const notificationMessage = ref("");
|
|
||||||
const notificationType = ref<"success" | "error" | "info">("info");
|
|
||||||
|
|
||||||
function showToast(
|
|
||||||
message: string,
|
|
||||||
type: "success" | "error" | "info" = "info",
|
|
||||||
duration = 3000,
|
|
||||||
) {
|
|
||||||
const canvasInstance = diagramCanvas.value as any;
|
|
||||||
if (canvasInstance && canvasInstance.showToast) {
|
|
||||||
canvasInstance.showToast(message, type, duration);
|
|
||||||
} else {
|
|
||||||
// 后备方案：使用原来的通知系统
|
|
||||||
notificationMessage.value = message;
|
|
||||||
notificationType.value = type;
|
|
||||||
showNotification.value = true;
|
|
||||||
|
|
||||||
// 设置自动消失
|
|
||||||
setTimeout(() => {
|
|
||||||
showNotification.value = false;
|
|
||||||
}, duration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 显示通知
|
|
||||||
|
|
||||||
// --- 组件属性处理辅助函数 ---
|
|
||||||
// 直接使用 componentConfig.ts 中导入的 getPropValue 函数
|
|
||||||
|
|
||||||
// --- 生命周期钩子 ---
|
|
||||||
onMounted(async () => {
|
|
||||||
// 初始化画布设置
|
|
||||||
console.log("ProjectView mounted, diagram canvas ref:", diagramCanvas.value);
|
|
||||||
|
|
||||||
// 获取初始图表数据
|
|
||||||
const canvasInstance = diagramCanvas.value as any;
|
|
||||||
if (canvasInstance && canvasInstance.getDiagramData) {
|
|
||||||
diagramData.value = canvasInstance.getDiagramData();
|
|
||||||
|
|
||||||
// 预加载所有使用的组件模块，以确保它们在渲染时可用
|
|
||||||
const componentTypes = new Set<string>();
|
|
||||||
diagramData.value.parts.forEach((part) => {
|
|
||||||
componentTypes.add(part.type);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log("Preloading component modules:", Array.from(componentTypes));
|
|
||||||
|
|
||||||
// 并行加载所有组件模块
|
|
||||||
await Promise.all(
|
|
||||||
Array.from(componentTypes).map((type) => loadComponentModule(type)),
|
|
||||||
);
|
|
||||||
|
|
||||||
console.log("All component modules loaded");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.removeEventListener("mousemove", onResize);
|
|
||||||
document.removeEventListener("mouseup", stopResize);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="postcss">
|
<style>
|
||||||
/* 样式保持不变 */
|
|
||||||
@import "../assets/main.css";
|
@import "../assets/main.css";
|
||||||
|
|
||||||
/* 分割线样式 */
|
|
||||||
.resizer {
|
|
||||||
width: 6px;
|
|
||||||
height: 100%;
|
|
||||||
cursor: col-resize;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resizer:hover,
|
|
||||||
.resizer:active {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 调整大小时应用全局样式 */
|
|
||||||
:global(body.resizing) {
|
|
||||||
cursor: col-resize;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-slideRight {
|
|
||||||
animation: slideRight 0.3s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideRight {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 确保滚动行为仅在需要时出现 */
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 文档面板样式 */
|
|
||||||
.doc-panel {
|
|
||||||
padding: 1.5rem;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
/* 使用透明背景 */
|
|
||||||
border: none;
|
|
||||||
/* 确保没有边框 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 文档切换按钮样式 */
|
|
||||||
.doc-toggle-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
z-index: 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Markdown渲染样式调整 */
|
|
||||||
:deep(.markdown-content) {
|
|
||||||
padding: 1rem;
|
|
||||||
background-color: hsl(var(--b1));
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,844 @@
|
||||||
|
<template>
|
||||||
|
<div class="h-screen flex flex-col overflow-hidden">
|
||||||
|
<div class="flex flex-1 overflow-hidden relative">
|
||||||
|
<!-- 左侧图形化区域 -->
|
||||||
|
<div class="relative bg-base-200 overflow-hidden h-full" :style="{ width: leftPanelWidth + '%' }">
|
||||||
|
<DiagramCanvas ref="diagramCanvas" :componentModules="componentModules" :showDocPanel="showDocPanel"
|
||||||
|
@component-selected="handleComponentSelected" @component-moved="handleComponentMoved"
|
||||||
|
@component-delete="handleComponentDelete" @wire-created="handleWireCreated" @wire-deleted="handleWireDeleted"
|
||||||
|
@diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
|
||||||
|
@load-component-module="handleLoadComponentModule" @toggle-doc-panel="toggleDocPanel" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 拖拽分割线 -->
|
||||||
|
<div
|
||||||
|
class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
|
||||||
|
@mousedown="startResize"></div>
|
||||||
|
<!-- 右侧编辑区域 -->
|
||||||
|
<div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
|
||||||
|
<div class="overflow-y-auto flex-1">
|
||||||
|
<!-- 使用条件渲染显示不同的面板 -->
|
||||||
|
<PropertyPanel v-show="!showDocPanel" :componentData="selectedComponentData"
|
||||||
|
:componentConfig="selectedComponentConfig" @updateProp="updateComponentProp"
|
||||||
|
@updateDirectProp="updateComponentDirectProp" />
|
||||||
|
<div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
|
||||||
|
<MarkdownRenderer :content="documentContent" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 元器件选择组件 -->
|
||||||
|
<ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
|
||||||
|
@add-component="handleAddComponent" @add-template="handleAddTemplate" @close="showComponentsMenu = false" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// 引入wokwi-elements和组件
|
||||||
|
// import "@wokwi/elements"; // 不再需要全局引入 wokwi
|
||||||
|
import { ref, computed, onMounted, onUnmounted, shallowRef } from "vue"; // 引入 defineAsyncComponent 和 shallowRef
|
||||||
|
import DiagramCanvas from "@/components/DiagramCanvas.vue";
|
||||||
|
import ComponentSelector from "@/components/ComponentSelector.vue";
|
||||||
|
import PropertyPanel from "@/components/PropertyPanel.vue";
|
||||||
|
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
|
||||||
|
import type { DiagramData, DiagramPart } from "@/components/diagramManager";
|
||||||
|
import {
|
||||||
|
type PropertyConfig,
|
||||||
|
generatePropertyConfigs,
|
||||||
|
generatePropsFromDefault,
|
||||||
|
generatePropsFromAttrs,
|
||||||
|
} from "@/components/equipments/componentConfig"; // 引入组件配置工具
|
||||||
|
|
||||||
|
// --- 文档面板控制 ---
|
||||||
|
const showDocPanel = ref(false);
|
||||||
|
const documentContent = ref("");
|
||||||
|
|
||||||
|
// 获取路由参数
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
// 切换文档面板和属性面板
|
||||||
|
async function toggleDocPanel() {
|
||||||
|
showDocPanel.value = !showDocPanel.value;
|
||||||
|
|
||||||
|
// 如果切换到文档面板，则获取文档内容
|
||||||
|
if (showDocPanel.value) {
|
||||||
|
await loadDocumentContent();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载文档内容
|
||||||
|
async function loadDocumentContent() {
|
||||||
|
try {
|
||||||
|
// 从路由参数中获取教程ID
|
||||||
|
const tutorialId = (route.query.tutorial as string) || "02"; // 默认加载02例程
|
||||||
|
|
||||||
|
// 构建文档路径
|
||||||
|
let docPath = `/doc/${tutorialId}/doc.md`;
|
||||||
|
|
||||||
|
// 检查当前路径是否包含下划线（例如 02_key 格式）
|
||||||
|
// 如果不包含，那么使用更新的命名格式
|
||||||
|
if (!tutorialId.includes("_")) {
|
||||||
|
docPath = `/doc/${tutorialId}/doc.md`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取文档内容
|
||||||
|
const response = await fetch(docPath);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to load document: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新文档内容，并替换图片路径
|
||||||
|
documentContent.value = (await response.text()).replace(
|
||||||
|
/.\/images/gi,
|
||||||
|
`/doc/${tutorialId}/images`,
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("加载文档失败:", error);
|
||||||
|
documentContent.value = "# 文档加载失败\n\n无法加载请求的文档。";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查是否有例程参数，如果有则自动打开文档面板
|
||||||
|
onMounted(async () => {
|
||||||
|
if (route.query.tutorial) {
|
||||||
|
showDocPanel.value = true;
|
||||||
|
await loadDocumentContent();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- 元器件管理 ---
|
||||||
|
const showComponentsMenu = ref(false);
|
||||||
|
const diagramData = ref<DiagramData>({
|
||||||
|
version: 1,
|
||||||
|
author: "admin",
|
||||||
|
editor: "me",
|
||||||
|
parts: [],
|
||||||
|
connections: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectedComponentId = ref<string | null>(null);
|
||||||
|
const selectedComponentData = computed(() => {
|
||||||
|
return (
|
||||||
|
diagramData.value.parts.find((p) => p.id === selectedComponentId.value) ||
|
||||||
|
null
|
||||||
|
);
|
||||||
|
});
|
||||||
|
const diagramCanvas = ref(null);
|
||||||
|
|
||||||
|
// 存储动态导入的组件模块
|
||||||
|
interface ComponentModule {
|
||||||
|
default: any;
|
||||||
|
getDefaultProps?: () => Record<string, any>;
|
||||||
|
config?: {
|
||||||
|
props?: Array<PropertyConfig>;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const componentModules = shallowRef<Record<string, ComponentModule>>({});
|
||||||
|
const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(
|
||||||
|
null,
|
||||||
|
); // 存储选中组件的配置
|
||||||
|
|
||||||
|
// 动态加载组件定义
|
||||||
|
async function loadComponentModule(type: string) {
|
||||||
|
if (!componentModules.value[type]) {
|
||||||
|
try {
|
||||||
|
// 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
|
||||||
|
const module = await import(`../components/equipments/${type}.vue`);
|
||||||
|
|
||||||
|
// 使用 markRaw 包装模块，避免不必要的响应式处理
|
||||||
|
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 handleLoadComponentModule(type: string) {
|
||||||
|
console.log("Handling load component module request for:", type);
|
||||||
|
await loadComponentModule(type);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 分割面板 ---
|
||||||
|
const leftPanelWidth = ref(60);
|
||||||
|
const isResizing = ref(false);
|
||||||
|
|
||||||
|
// 分割面板拖拽相关函数
|
||||||
|
function startResize(e: MouseEvent) {
|
||||||
|
isResizing.value = true;
|
||||||
|
document.addEventListener("mousemove", onResize);
|
||||||
|
document.addEventListener("mouseup", stopResize);
|
||||||
|
e.preventDefault(); // 防止文本选择
|
||||||
|
}
|
||||||
|
|
||||||
|
function onResize(e: MouseEvent) {
|
||||||
|
if (!isResizing.value) return;
|
||||||
|
|
||||||
|
// 获取容器宽度和鼠标位置
|
||||||
|
const container = document.querySelector(
|
||||||
|
".flex-1.overflow-hidden",
|
||||||
|
) as HTMLElement;
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
const containerWidth = container.clientWidth;
|
||||||
|
const mouseX = e.clientX;
|
||||||
|
|
||||||
|
// 计算左侧面板应占的百分比
|
||||||
|
let newWidth = (mouseX / containerWidth) * 100;
|
||||||
|
|
||||||
|
// 限制最小宽度和最大宽度
|
||||||
|
newWidth = Math.max(20, Math.min(newWidth, 80));
|
||||||
|
|
||||||
|
// 更新宽度
|
||||||
|
leftPanelWidth.value = newWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopResize() {
|
||||||
|
isResizing.value = false;
|
||||||
|
document.removeEventListener("mousemove", onResize);
|
||||||
|
document.removeEventListener("mouseup", stopResize);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 元器件操作 ---
|
||||||
|
function openComponentsMenu() {
|
||||||
|
showComponentsMenu.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理 ComponentSelector 组件添加元器件事件
|
||||||
|
async function handleAddComponent(componentData: {
|
||||||
|
type: string;
|
||||||
|
name: string;
|
||||||
|
props: Record<string, any>;
|
||||||
|
}) {
|
||||||
|
// 加载组件模块以便后续使用
|
||||||
|
const componentModule = await loadComponentModule(componentData.type);
|
||||||
|
|
||||||
|
// 获取画布容器和位置信息
|
||||||
|
const canvasInstance = diagramCanvas.value as any;
|
||||||
|
|
||||||
|
// 获取当前画布的位置信息
|
||||||
|
let position = { x: 100, y: 100 };
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (
|
||||||
|
canvasInstance &&
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建新组件，使用diagramManager接口定义
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("添加新组件:", newComponent);
|
||||||
|
// 通过画布实例添加组件
|
||||||
|
if (
|
||||||
|
canvasInstance &&
|
||||||
|
canvasInstance.getDiagramData &&
|
||||||
|
canvasInstance.updateDiagramDataDirectly
|
||||||
|
) {
|
||||||
|
const currentData = canvasInstance.getDiagramData();
|
||||||
|
currentData.parts.push(newComponent);
|
||||||
|
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理模板添加事件
|
||||||
|
async function handleAddTemplate(templateData: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
template: any;
|
||||||
|
}) {
|
||||||
|
console.log("添加模板:", templateData);
|
||||||
|
console.log("=== 模板组件数量:", templateData.template?.parts?.length || 0);
|
||||||
|
// 获取画布实例
|
||||||
|
const canvasInstance = diagramCanvas.value as any;
|
||||||
|
if (
|
||||||
|
!canvasInstance ||
|
||||||
|
!canvasInstance.getDiagramData ||
|
||||||
|
!canvasInstance.updateDiagramDataDirectly
|
||||||
|
) {
|
||||||
|
console.error("没有可用的画布实例添加模板");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取当前图表数据
|
||||||
|
const currentData = canvasInstance.getDiagramData();
|
||||||
|
console.log("=== 当前图表组件数量:", currentData.parts.length);
|
||||||
|
|
||||||
|
// 生成唯一ID前缀，以确保添加的组件ID不重复
|
||||||
|
const idPrefix = `template-${Date.now()}-`;
|
||||||
|
// 处理模板组件并添加到图表
|
||||||
|
if (templateData.template && templateData.template.parts) {
|
||||||
|
// 获取当前视口中心位置
|
||||||
|
let viewportCenter = { x: 300, y: 200 }; // 默认值
|
||||||
|
try {
|
||||||
|
if (
|
||||||
|
canvasInstance &&
|
||||||
|
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;
|
||||||
|
|
||||||
|
// 计算视口中心点的坐标 (与handleAddComponent函数中的方法相同)
|
||||||
|
viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
|
||||||
|
viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
|
||||||
|
console.log(
|
||||||
|
`=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("获取视口中心位置时出错:", error);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("=== 使用视口中心添加模板组件:", viewportCenter);
|
||||||
|
|
||||||
|
// 找到模板中的主要组件（假设是第一个组件）
|
||||||
|
const mainPart = templateData.template.parts[0];
|
||||||
|
|
||||||
|
// 创建带有新位置的组件
|
||||||
|
const newParts = await Promise.all(
|
||||||
|
templateData.template.parts.map(async (part: any) => {
|
||||||
|
// 创建组件副本并分配新ID
|
||||||
|
const newPart = JSON.parse(JSON.stringify(part));
|
||||||
|
newPart.id = `${idPrefix}${part.id}`;
|
||||||
|
|
||||||
|
// 尝试加载组件模块并获取能力页面
|
||||||
|
try {
|
||||||
|
const componentModule = await loadComponentModule(part.type);
|
||||||
|
if (
|
||||||
|
componentModule &&
|
||||||
|
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 oldX = newPart.x;
|
||||||
|
const oldY = newPart.y;
|
||||||
|
|
||||||
|
// 计算相对位置（相对于主要组件）
|
||||||
|
const relativeX = part.x - mainPart.x;
|
||||||
|
const relativeY = part.y - mainPart.y;
|
||||||
|
|
||||||
|
// 应用到视口中心位置
|
||||||
|
newPart.x = viewportCenter.x + relativeX;
|
||||||
|
newPart.y = viewportCenter.y + relativeY;
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return newPart;
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
// 向图表添加新组件
|
||||||
|
currentData.parts.push(...newParts);
|
||||||
|
|
||||||
|
// 处理连接关系
|
||||||
|
if (templateData.template.connections) {
|
||||||
|
// 创建一个映射表用于转换旧组件ID到新组件ID
|
||||||
|
const idMap: Record<string, string> = {};
|
||||||
|
templateData.template.parts.forEach((part: any) => {
|
||||||
|
idMap[part.id] = `${idPrefix}${part.id}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加连接，更新组件ID引用
|
||||||
|
const newConnections = templateData.template.connections.map(
|
||||||
|
(conn: any) => {
|
||||||
|
// 处理连接数据 (格式为 [from, to, type, path])
|
||||||
|
if (Array.isArray(conn)) {
|
||||||
|
const [from, to, type, path] = conn;
|
||||||
|
|
||||||
|
// 从连接字符串中提取组件ID和引脚ID
|
||||||
|
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];
|
||||||
|
|
||||||
|
// 创建新的连接字符串，使用新的组件ID
|
||||||
|
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);
|
||||||
|
|
||||||
|
// 显示成功消息
|
||||||
|
showToast(`已添加 ${templateData.name} 模板`, "success");
|
||||||
|
} else {
|
||||||
|
console.error("模板格式错误，缺少parts数组");
|
||||||
|
showToast("模板格式错误", "error");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理组件选中事件
|
||||||
|
async function handleComponentSelected(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>();
|
||||||
|
|
||||||
|
// 1. 首先从getDefaultProps方法获取默认配置
|
||||||
|
if (typeof moduleRef.getDefaultProps === "function") {
|
||||||
|
const defaultProps = moduleRef.getDefaultProps();
|
||||||
|
const defaultPropConfigs = generatePropsFromDefault(defaultProps);
|
||||||
|
|
||||||
|
// 添加默认配置并记录属性名
|
||||||
|
defaultPropConfigs.forEach((config) => {
|
||||||
|
propConfigs.push(config);
|
||||||
|
addedProps.add(config.name);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 添加组件直接属性，这些属性会覆盖默认配置
|
||||||
|
const directPropConfigs = generatePropertyConfigs(componentData);
|
||||||
|
|
||||||
|
// 过滤掉已经添加过的属性名
|
||||||
|
const newDirectProps = directPropConfigs.filter(
|
||||||
|
(config) => !addedProps.has(config.name),
|
||||||
|
);
|
||||||
|
propConfigs.push(...newDirectProps);
|
||||||
|
|
||||||
|
// 3. 最后添加attrs中的属性
|
||||||
|
if (componentData.attrs) {
|
||||||
|
const attrs = componentData.attrs;
|
||||||
|
const attrPropConfigs = generatePropsFromAttrs(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 handleDiagramUpdated(data: DiagramData) {
|
||||||
|
diagramData.value = data;
|
||||||
|
console.log("Diagram data updated:", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理组件移动事件
|
||||||
|
function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
|
||||||
|
const part = diagramData.value.parts.find((p) => p.id === moveData.id);
|
||||||
|
if (part) {
|
||||||
|
part.x = moveData.x;
|
||||||
|
part.y = moveData.y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理组件删除事件
|
||||||
|
function handleComponentDelete(componentId: string) {
|
||||||
|
// 查找要删除的组件
|
||||||
|
const component = diagramData.value.parts.find((p) => p.id === componentId);
|
||||||
|
if (!component) return;
|
||||||
|
|
||||||
|
// 收集需要删除的组件ID列表（包括当前组件和同组组件）
|
||||||
|
const componentsToDelete: string[] = [componentId];
|
||||||
|
|
||||||
|
// 如果组件属于一个组，则找出所有同组的组件
|
||||||
|
if (component.group && component.group !== "") {
|
||||||
|
const groupMembers = diagramData.value.parts.filter(
|
||||||
|
(p) => p.group === component.group && p.id !== componentId,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 将同组组件ID添加到删除列表
|
||||||
|
componentsToDelete.push(...groupMembers.map((p) => p.id));
|
||||||
|
console.log(
|
||||||
|
`删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除所有标记的组件
|
||||||
|
diagramData.value.parts = diagramData.value.parts.filter(
|
||||||
|
(p) => !componentsToDelete.includes(p.id),
|
||||||
|
);
|
||||||
|
|
||||||
|
// 同时删除与这些组件相关的所有连接
|
||||||
|
diagramData.value.connections = diagramData.value.connections.filter(
|
||||||
|
(connection) => {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新组件属性的方法
|
||||||
|
function updateComponentProp(
|
||||||
|
componentId: string,
|
||||||
|
propName: string,
|
||||||
|
value: any,
|
||||||
|
) {
|
||||||
|
const canvasInstance = diagramCanvas.value as any;
|
||||||
|
if (
|
||||||
|
!canvasInstance ||
|
||||||
|
!canvasInstance.getDiagramData ||
|
||||||
|
!canvasInstance.updateDiagramDataDirectly
|
||||||
|
) {
|
||||||
|
console.error("没有可用的画布实例进行属性更新");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查值是否为对象，如果是对象并有value属性，则使用该属性值
|
||||||
|
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 {
|
||||||
|
// 否则当作attrs中的属性处理
|
||||||
|
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 ||
|
||||||
|
!canvasInstance.getDiagramData ||
|
||||||
|
!canvasInstance.updateDiagramDataDirectly
|
||||||
|
) {
|
||||||
|
console.error("没有可用的画布实例进行属性更新");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentData = canvasInstance.getDiagramData();
|
||||||
|
const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
|
||||||
|
|
||||||
|
if (part) {
|
||||||
|
// @ts-ignore: 动态属性赋值
|
||||||
|
part[propName] = value;
|
||||||
|
|
||||||
|
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||||
|
console.log(
|
||||||
|
`更新组件${componentId}的直接属性${propName}为:`,
|
||||||
|
value,
|
||||||
|
typeof value,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 专门用于更新组件的显示层级 - 这个方法可以删除，直接使用updateComponentProp即可
|
||||||
|
|
||||||
|
// 处理连线创建事件
|
||||||
|
function handleWireCreated(wireData: any) {
|
||||||
|
console.log("Wire created:", wireData);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理连线删除事件
|
||||||
|
function handleWireDeleted(wireId: string) {
|
||||||
|
console.log("Wire deleted:", wireId);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出当前diagram数据
|
||||||
|
function exportDiagram() {
|
||||||
|
// 直接使用DiagramCanvas组件提供的导出功能
|
||||||
|
const canvasInstance = diagramCanvas.value as any;
|
||||||
|
if (canvasInstance && canvasInstance.exportDiagram) {
|
||||||
|
canvasInstance.exportDiagram();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 消息提示 ---
|
||||||
|
const showNotification = ref(false);
|
||||||
|
const notificationMessage = ref("");
|
||||||
|
const notificationType = ref<"success" | "error" | "info">("info");
|
||||||
|
|
||||||
|
function showToast(
|
||||||
|
message: string,
|
||||||
|
type: "success" | "error" | "info" = "info",
|
||||||
|
duration = 3000,
|
||||||
|
) {
|
||||||
|
const canvasInstance = diagramCanvas.value as any;
|
||||||
|
if (canvasInstance && canvasInstance.showToast) {
|
||||||
|
canvasInstance.showToast(message, type, duration);
|
||||||
|
} else {
|
||||||
|
// 后备方案：使用原来的通知系统
|
||||||
|
notificationMessage.value = message;
|
||||||
|
notificationType.value = type;
|
||||||
|
showNotification.value = true;
|
||||||
|
|
||||||
|
// 设置自动消失
|
||||||
|
setTimeout(() => {
|
||||||
|
showNotification.value = false;
|
||||||
|
}, duration);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 显示通知
|
||||||
|
|
||||||
|
// --- 组件属性处理辅助函数 ---
|
||||||
|
// 直接使用 componentConfig.ts 中导入的 getPropValue 函数
|
||||||
|
|
||||||
|
// --- 生命周期钩子 ---
|
||||||
|
onMounted(async () => {
|
||||||
|
// 初始化画布设置
|
||||||
|
console.log("ProjectView mounted, diagram canvas ref:", diagramCanvas.value);
|
||||||
|
|
||||||
|
// 获取初始图表数据
|
||||||
|
const canvasInstance = diagramCanvas.value as any;
|
||||||
|
if (canvasInstance && canvasInstance.getDiagramData) {
|
||||||
|
diagramData.value = canvasInstance.getDiagramData();
|
||||||
|
|
||||||
|
// 预加载所有使用的组件模块，以确保它们在渲染时可用
|
||||||
|
const componentTypes = new Set<string>();
|
||||||
|
diagramData.value.parts.forEach((part) => {
|
||||||
|
componentTypes.add(part.type);
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("Preloading component modules:", Array.from(componentTypes));
|
||||||
|
|
||||||
|
// 并行加载所有组件模块
|
||||||
|
await Promise.all(
|
||||||
|
Array.from(componentTypes).map((type) => loadComponentModule(type)),
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log("All component modules loaded");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
document.removeEventListener("mousemove", onResize);
|
||||||
|
document.removeEventListener("mouseup", stopResize);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="postcss">
|
||||||
|
/* 样式保持不变 */
|
||||||
|
@import "../assets/main.css";
|
||||||
|
|
||||||
|
/* 分割线样式 */
|
||||||
|
.resizer {
|
||||||
|
width: 6px;
|
||||||
|
height: 100%;
|
||||||
|
cursor: col-resize;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resizer:hover,
|
||||||
|
.resizer:active {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 调整大小时应用全局样式 */
|
||||||
|
:global(body.resizing) {
|
||||||
|
cursor: col-resize;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-slideRight {
|
||||||
|
animation: slideRight 0.3s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideRight {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保滚动行为仅在需要时出现 */
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文档面板样式 */
|
||||||
|
.doc-panel {
|
||||||
|
padding: 1.5rem;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
/* 使用透明背景 */
|
||||||
|
border: none;
|
||||||
|
/* 确保没有边框 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文档切换按钮样式 */
|
||||||
|
.doc-toggle-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Markdown渲染样式调整 */
|
||||||
|
:deep(.markdown-content) {
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: hsl(var(--b1));
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue