108 lines
3.9 KiB
JavaScript
108 lines
3.9 KiB
JavaScript
/**
|
||
* 核心模块 - 运行环境配置组件
|
||
* @type {module}
|
||
*/
|
||
import { setupEventListeners } from './event-handlers.js';
|
||
import { loadScenarioFiles } from './file-operations.js';
|
||
import { renderBasicUI, updateFileContent } from './ui-renderer.js';
|
||
import { resetEditState } from './utils.js';
|
||
|
||
/**
|
||
* 初始化组件
|
||
* @param {HTMLElement} component - RunEnvConfig组件实例
|
||
*/
|
||
export function initializeComponent(component) {
|
||
// 设置初始状态
|
||
component.currentFile = null;
|
||
component.xmlContent = '';
|
||
component.scenarioFiles = [];
|
||
component.isEdited = false;
|
||
component.xmlDoc = null;
|
||
|
||
// 创建Shadow DOM
|
||
component.attachShadow({ mode: 'open' });
|
||
}
|
||
|
||
/**
|
||
* 组件连接回调
|
||
* @param {HTMLElement} component - RunEnvConfig组件实例
|
||
*/
|
||
export async function connectedCallback(component) {
|
||
// 先渲染UI
|
||
renderBasicUI(component);
|
||
setupEventListeners(component);
|
||
|
||
// 然后加载文件列表
|
||
await loadScenarioFiles(component);
|
||
|
||
// 检查是否有renderComplete方法，如果有则调用
|
||
setTimeout(() => {
|
||
if (typeof component.renderComplete === 'function') {
|
||
component.renderComplete();
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
/**
|
||
* 在完成渲染后同时处理状态恢复
|
||
* @param {HTMLElement} component - RunEnvConfig组件实例
|
||
*/
|
||
export function renderComplete(component) {
|
||
// 在DOM渲染完成后更新文件选择器
|
||
setTimeout(() => {
|
||
// 如果有当前文件，尝试选择它
|
||
if (component.currentFile && component.xmlContent) {
|
||
const fileSelector = component.shadowRoot.getElementById('scenarioFile');
|
||
if (fileSelector) {
|
||
// 确认文件在列表中
|
||
const fileExists = Array.from(fileSelector.options).some(opt => opt.value === component.currentFile);
|
||
|
||
if (fileExists) {
|
||
// 设置选中的文件
|
||
fileSelector.value = component.currentFile;
|
||
|
||
// 解析XML内容
|
||
try {
|
||
const parser = new DOMParser();
|
||
component.xmlDoc = parser.parseFromString(component.xmlContent, 'text/xml');
|
||
|
||
// 更新内容显示
|
||
const contentElement = component.shadowRoot.getElementById('fileContent');
|
||
if (contentElement) {
|
||
contentElement.innerHTML = '';
|
||
component.renderVisualEditor(contentElement, component.xmlDoc);
|
||
}
|
||
|
||
// 如果有编辑状态，恢复它
|
||
if (component.isEdited) {
|
||
const saveButton = component.shadowRoot.getElementById('saveConfig');
|
||
if (saveButton) {
|
||
saveButton.classList.add('modified');
|
||
saveButton.title = '文件已修改，请保存';
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('恢复XML内容失败:', error);
|
||
}
|
||
} else {
|
||
// 文件不存在，清除状态
|
||
component.currentFile = null;
|
||
component.xmlContent = '';
|
||
component.isEdited = false;
|
||
}
|
||
}
|
||
}
|
||
}, 50); // 增加延迟确保DOM已经完全加载
|
||
}
|
||
|
||
/**
|
||
* 组件销毁回调
|
||
* @param {HTMLElement} component - RunEnvConfig组件实例
|
||
*/
|
||
export function disconnectedCallback(component) {
|
||
// 移除可能的事件监听器
|
||
const fileSelector = component.shadowRoot.getElementById('scenarioFile');
|
||
if (fileSelector) {
|
||
fileSelector.removeEventListener('change', component.handleFileSelectorChange);
|
||
}
|
||
}
|