839 lines
24 KiB
TypeScript
839 lines
24 KiB
TypeScript
import { ref, shallowRef, computed, reactive } from "vue";
|
||
import { createInjectionState } from "@vueuse/core";
|
||
import {
|
||
saveDiagramData,
|
||
type DiagramData,
|
||
type 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>>({});
|
||
|
||
// 新增：直接管理canvas的位置和缩放
|
||
const canvasPosition = reactive({ x: 0, y: 0 });
|
||
const canvasScale = ref(1);
|
||
|
||
// 计算当前选中的组件数据
|
||
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;
|
||
});
|
||
|
||
// --- Canvas 控制方法 ---
|
||
|
||
/**
|
||
* 设置canvas位置
|
||
*/
|
||
function setCanvasPosition(x: number, y: number) {
|
||
canvasPosition.x = x;
|
||
canvasPosition.y = y;
|
||
}
|
||
|
||
/**
|
||
* 更新canvas位置（相对偏移）
|
||
*/
|
||
function updateCanvasPosition(deltaX: number, deltaY: number) {
|
||
canvasPosition.x += deltaX;
|
||
canvasPosition.y += deltaY;
|
||
}
|
||
|
||
/**
|
||
* 设置canvas缩放
|
||
*/
|
||
function setCanvasScale(scale: number) {
|
||
canvasScale.value = Math.max(0.2, Math.min(scale, 10.0));
|
||
}
|
||
|
||
/**
|
||
* 获取canvas位置
|
||
*/
|
||
function getCanvasPosition() {
|
||
return { x: canvasPosition.x, y: canvasPosition.y };
|
||
}
|
||
|
||
/**
|
||
* 获取canvas缩放
|
||
*/
|
||
function getCanvasScale() {
|
||
return canvasScale.value;
|
||
}
|
||
|
||
/**
|
||
* 缩放到指定位置（以鼠标位置为中心）
|
||
*/
|
||
function zoomAtPosition(
|
||
mouseX: number,
|
||
mouseY: number,
|
||
zoomFactor: number,
|
||
) {
|
||
// 计算鼠标在画布坐标系中的位置
|
||
const mouseXCanvas = (mouseX - canvasPosition.x) / canvasScale.value;
|
||
const mouseYCanvas = (mouseY - canvasPosition.y) / canvasScale.value;
|
||
|
||
// 计算新的缩放值
|
||
const newScale = Math.max(
|
||
0.2,
|
||
Math.min(canvasScale.value * zoomFactor, 10.0),
|
||
);
|
||
|
||
// 计算新的位置，使鼠标指针位置在缩放前后保持不变
|
||
canvasPosition.x = mouseX - mouseXCanvas * newScale;
|
||
canvasPosition.y = mouseY - mouseYCanvas * newScale;
|
||
canvasScale.value = newScale;
|
||
|
||
return {
|
||
scale: newScale,
|
||
position: { x: canvasPosition.x, y: canvasPosition.y },
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 将屏幕坐标转换为画布坐标
|
||
*/
|
||
function screenToCanvas(screenX: number, screenY: number) {
|
||
return {
|
||
x: (screenX - canvasPosition.x) / canvasScale.value,
|
||
y: (screenY - canvasPosition.y) / canvasScale.value,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 将画布坐标转换为屏幕坐标
|
||
*/
|
||
function canvasToScreen(canvasX: number, canvasY: number) {
|
||
return {
|
||
x: canvasX * canvasScale.value + canvasPosition.x,
|
||
y: canvasY * canvasScale.value + canvasPosition.y,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 居中显示指定区域
|
||
*/
|
||
function centerView(
|
||
bounds: { x: number; y: number; width: number; height: number },
|
||
containerWidth: number,
|
||
containerHeight: number,
|
||
) {
|
||
// 计算合适的缩放比例
|
||
const scaleX = containerWidth / bounds.width;
|
||
const scaleY = containerHeight / bounds.height;
|
||
const newScale = Math.min(scaleX, scaleY, 1) * 0.8; // 留一些边距
|
||
|
||
// 计算居中位置
|
||
const centerX = bounds.x + bounds.width / 2;
|
||
const centerY = bounds.y + bounds.height / 2;
|
||
|
||
canvasScale.value = newScale;
|
||
canvasPosition.x = containerWidth / 2 - centerX * newScale;
|
||
canvasPosition.y = containerHeight / 2 - centerY * newScale;
|
||
|
||
return {
|
||
scale: newScale,
|
||
position: { x: canvasPosition.x, y: canvasPosition.y },
|
||
};
|
||
}
|
||
|
||
// --- 组件模块管理 ---
|
||
|
||
/**
|
||
* 动态加载组件模块
|
||
*/
|
||
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 };
|
||
|
||
try {
|
||
const canvasContainer = canvasInstance.$el as HTMLElement;
|
||
if (canvasContainer) {
|
||
const viewportWidth = canvasContainer.clientWidth;
|
||
const viewportHeight = canvasContainer.clientHeight;
|
||
|
||
position.x =
|
||
(viewportWidth / 2 - canvasPosition.x) / canvasScale.value;
|
||
position.y =
|
||
(viewportHeight / 2 - canvasPosition.y) / canvasScale.value;
|
||
}
|
||
} 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);
|
||
saveDiagramData(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 {
|
||
const canvasContainer = canvasInstance.$el as HTMLElement;
|
||
|
||
if (canvasContainer) {
|
||
const viewportWidth = canvasContainer.clientWidth;
|
||
const viewportHeight = canvasContainer.clientHeight;
|
||
viewportCenter.x =
|
||
(viewportWidth / 2 - canvasPosition.x) / canvasScale.value;
|
||
viewportCenter.y =
|
||
(viewportHeight / 2 - canvasPosition.y) / canvasScale.value;
|
||
}
|
||
} 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,
|
||
);
|
||
saveDiagramData(currentData);
|
||
|
||
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);
|
||
|
||
saveDiagramData(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 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,
|
||
|
||
// Canvas控制状态
|
||
canvasPosition,
|
||
canvasScale,
|
||
|
||
// 方法
|
||
loadComponentModule,
|
||
preloadComponentModules,
|
||
addComponent,
|
||
addTemplate,
|
||
deleteComponent,
|
||
selectComponent,
|
||
updateComponentProp,
|
||
updateComponentDirectProp,
|
||
moveComponent,
|
||
setCanvasRef,
|
||
setComponentRef,
|
||
getComponentRef,
|
||
getDiagramData,
|
||
updateDiagramData,
|
||
getComponentDefinition,
|
||
prepareComponentProps,
|
||
initialize,
|
||
|
||
// Canvas控制方法
|
||
setCanvasPosition,
|
||
updateCanvasPosition,
|
||
setCanvasScale,
|
||
getCanvasPosition,
|
||
getCanvasScale,
|
||
zoomAtPosition,
|
||
screenToCanvas,
|
||
canvasToScreen,
|
||
centerView,
|
||
};
|
||
},
|
||
);
|
||
|
||
export { useProvideComponentManager, useComponentManager };
|