暂存事件6
This commit is contained in:
186
Documentation/layout_preview.html
Normal file
186
Documentation/layout_preview.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>事件UI布局预览 (动态版)</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
.controls {
|
||||
margin-bottom: 20px;
|
||||
width: 1000px;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: #222;
|
||||
color: #ddd;
|
||||
border: 1px solid #555;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.window {
|
||||
width: 1000px;
|
||||
height: 750px;
|
||||
background-color: #555;
|
||||
border: 2px solid #ccc;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.element {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px black;
|
||||
}
|
||||
.lihui { background-color: rgba(255, 0, 0, 0.4); }
|
||||
.name { background-color: rgba(0, 255, 0, 0.4); }
|
||||
.text { background-color: rgba(0, 0, 255, 0.4); }
|
||||
.options { background-color: rgba(255, 255, 0, 0.4); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<h3>动态布局预览</h3>
|
||||
<p>请将您的 <code>EventUIConfig.xml</code> 文件内容完整粘贴到下面的文本框中，然后点击“生成预览”按钮。</p>
|
||||
<textarea id="xmlInput" placeholder="在这里粘贴 EventUIConfig.xml 的内容..."></textarea>
|
||||
<button onclick="generatePreview()">生成预览</button>
|
||||
</div>
|
||||
<div class="window" id="window">
|
||||
<!-- 布局将在这里生成 -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function parseVector2(str) {
|
||||
const match = str.match(/\((\s*[\d.]+)\s*,\s*([\d.]+)\s*\)/);
|
||||
return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
|
||||
}
|
||||
|
||||
function generatePreview() {
|
||||
const xmlString = document.getElementById('xmlInput').value;
|
||||
if (!xmlString) {
|
||||
alert('请先粘贴XML内容！');
|
||||
return;
|
||||
}
|
||||
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
|
||||
|
||||
// Need to escape the dot in the class name for querySelector
|
||||
const configDef = xmlDoc.querySelector('WulaFallenEmpire\\.EventUIConfigDef');
|
||||
if (!configDef) {
|
||||
alert('无法找到 WulaFallenEmpire.EventUIConfigDef 节点，请检查XML内容是否正确。');
|
||||
return;
|
||||
}
|
||||
|
||||
const config = {
|
||||
lihuiSize: parseVector2(configDef.querySelector('lihuiSize')?.textContent || '(0,0)'),
|
||||
nameSize: parseVector2(configDef.querySelector('nameSize')?.textContent || '(0,0)'),
|
||||
textSize: parseVector2(configDef.querySelector('textSize')?.textContent || '(0,0)'),
|
||||
optionsWidth: parseFloat(configDef.querySelector('optionsWidth')?.textContent || '0'),
|
||||
textNameOffset: parseFloat(configDef.querySelector('textNameOffset')?.textContent || '0'),
|
||||
optionsTextOffset: parseFloat(configDef.querySelector('optionsTextOffset')?.textContent || '0')
|
||||
};
|
||||
|
||||
const windowRect = { width: 1000, height: 750 };
|
||||
const windowDiv = document.getElementById('window');
|
||||
windowDiv.innerHTML = ''; // Clear previous preview
|
||||
|
||||
// --- Calculation logic from Dialog_CustomDisplay.cs ---
|
||||
const virtualWidth = config.lihuiSize.x + config.textSize.x;
|
||||
const virtualHeight = config.lihuiSize.y;
|
||||
|
||||
const scaleX = windowRect.width / virtualWidth;
|
||||
const scaleY = windowRect.height / virtualHeight;
|
||||
const scale = Math.min(scaleX, scaleY) * 0.95;
|
||||
|
||||
const scaledLihuiWidth = config.lihuiSize.x * scale;
|
||||
const scaledLihuiHeight = config.lihuiSize.y * scale;
|
||||
const scaledNameWidth = config.nameSize.x * scale;
|
||||
const scaledNameHeight = config.nameSize.y * scale;
|
||||
const scaledTextWidth = config.textSize.x * scale;
|
||||
const scaledTextHeight = config.textSize.y * scale;
|
||||
const scaledOptionsWidth = config.optionsWidth * scale;
|
||||
|
||||
const totalContentWidth = scaledLihuiWidth + scaledTextWidth;
|
||||
const totalContentHeight = scaledLihuiHeight;
|
||||
const startX = (windowRect.width - totalContentWidth) / 2;
|
||||
const startY = (windowRect.height - totalContentHeight) / 2;
|
||||
|
||||
// --- Create and position elements ---
|
||||
|
||||
// Lihui (Portrait)
|
||||
const lihuiRect = { left: startX, top: startY, width: scaledLihuiWidth, height: scaledLihuiHeight };
|
||||
createDiv('lihui', '立绘 (Portrait)', lihuiRect);
|
||||
|
||||
// Name
|
||||
const nameRect = { left: lihuiRect.left + lihuiRect.width, top: lihuiRect.top, width: scaledNameWidth, height: scaledNameHeight };
|
||||
createDiv('name', '名称 (Name)', nameRect);
|
||||
|
||||
// Text (Description)
|
||||
const textRect = { left: nameRect.left, top: nameRect.top + nameRect.height + (config.textNameOffset * scale), width: scaledTextWidth, height: scaledTextHeight };
|
||||
createDiv('text', '描述 (Description)', textRect);
|
||||
|
||||
// Options
|
||||
const optionRect = { left: nameRect.left, top: textRect.top + textRect.height + (config.optionsTextOffset * scale), width: scaledOptionsWidth, height: lihuiRect.height - nameRect.height - textRect.height - ((config.textNameOffset + config.optionsTextOffset) * scale) };
|
||||
createDiv('options', '选项 (Options)', optionRect);
|
||||
}
|
||||
|
||||
function createDiv(className, text, rect) {
|
||||
const div = document.createElement('div');
|
||||
div.className = `element ${className}`;
|
||||
div.textContent = text;
|
||||
div.style.left = `${rect.left}px`;
|
||||
div.style.top = `${rect.top}px`;
|
||||
div.style.width = `${rect.width}px`;
|
||||
div.style.height = `${rect.height}px`;
|
||||
document.getElementById('window').appendChild(div);
|
||||
}
|
||||
|
||||
// Auto-populate with example content
|
||||
document.getElementById('xmlInput').value = `<?xml version="1.0" encoding="utf-8" ?>
|
||||
<Defs>
|
||||
<WulaFallenEmpire.EventUIConfigDef>
|
||||
<defName>Wula_EventUIConfig</defName>
|
||||
|
||||
<!-- General Style -->
|
||||
<labelFont>Small</labelFont>
|
||||
<drawBorders>true</drawBorders>
|
||||
<defaultBackgroundImagePath></defaultBackgroundImagePath>
|
||||
|
||||
<!-- Virtual Layout Dimensions -->
|
||||
<lihuiSize>(500, 800)</lihuiSize>
|
||||
<nameSize>(260, 130)</nameSize>
|
||||
<textSize>(650, 500)</textSize>
|
||||
<optionsWidth>610</optionsWidth>
|
||||
|
||||
<!-- Virtual Layout Offsets -->
|
||||
<textNameOffset>20</textNameOffset>
|
||||
<optionsTextOffset>20</optionsTextOffset>
|
||||
|
||||
</WulaFallenEmpire.EventUIConfigDef>
|
||||
</Defs>`;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user