276 lines
10 KiB
HTML
276 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Asteroid Splitting Editor</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: #1a1a2e; color: #e0e0e0; font-family: 'Segoe UI', system-ui, sans-serif; }
|
|
#toolbar {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
|
|
background: #16213e; border-bottom: 1px solid #0f3460;
|
|
display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 14px;
|
|
}
|
|
#toolbar button {
|
|
padding: 6px 14px; border: 1px solid #0f3460; border-radius: 6px;
|
|
background: #1a1a2e; color: #e0e0e0; cursor: pointer; font-size: 13px;
|
|
}
|
|
#toolbar button:hover { background: #0f3460; }
|
|
#toolbar button.primary { background: #533483; border-color: #7b2d8e; }
|
|
#toolbar button.save { background: #1b8a5a; border-color: #239b6e; }
|
|
#toolbar button[disabled] { opacity: 0.4; cursor: not-allowed; }
|
|
#page-indicator { color: #a0a0c0; font-weight: 600; min-width: 100px; text-align: center; }
|
|
.spacer { flex: 1; }
|
|
#statusbar {
|
|
position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
|
|
background: #16213e; border-top: 1px solid #0f3460;
|
|
padding: 6px 16px; font-size: 12px; color: #a0a0c0;
|
|
}
|
|
#worksheet-container {
|
|
margin-top: 52px; margin-bottom: 32px;
|
|
display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px;
|
|
}
|
|
.page-label {
|
|
position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
|
|
background: #533483; color: white; font-size: 11px; font-weight: 700;
|
|
padding: 2px 12px; border-radius: 4px;
|
|
}
|
|
.editor-selected { outline: 3px solid #7c3aed !important; outline-offset: 4px; }
|
|
.editor-changed::after {
|
|
content: ''; position: absolute; top: -2px; right: -2px;
|
|
width: 8px; height: 8px; background: #f97316; border-radius: 50%; z-index: 10;
|
|
}
|
|
#toast {
|
|
position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%);
|
|
background: #533483; color: white; padding: 8px 20px; border-radius: 8px;
|
|
font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.3s;
|
|
z-index: 2000; pointer-events: none;
|
|
}
|
|
#toast.show { opacity: 1; }
|
|
#coord-tooltip {
|
|
position: fixed; display: none; background: rgba(0,0,0,0.8); color: #e0e0e0;
|
|
padding: 3px 8px; border-radius: 4px; font-size: 11px; z-index: 2000;
|
|
pointer-events: none; white-space: nowrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="toolbar">
|
|
<button id="btn-prev">← Prev</button>
|
|
<span id="page-indicator">Page 1 / ?</span>
|
|
<button id="btn-next">Next →</button>
|
|
<div class="spacer"></div>
|
|
<span id="selection-info" style="color: #c4b5fd; font-size: 12px;">Loading...</span>
|
|
<div class="spacer"></div>
|
|
<button id="btn-copy" class="primary">Copy JSON</button>
|
|
<button id="btn-save" class="save" disabled>Save</button>
|
|
</div>
|
|
<div id="worksheet-container"></div>
|
|
<div id="statusbar">
|
|
<span id="status-text">Keys: +/- scale • [/] rotate • 0 reset</span>
|
|
</div>
|
|
<div id="toast"></div>
|
|
<div id="coord-tooltip"></div>
|
|
|
|
<script src="../../src/editor/editor-core.js"></script>
|
|
<script>
|
|
// ============================================================
|
|
// Simple approach: ALL state lives in the DOM (img.style.transform).
|
|
// No in-memory state. buildConfig reads from DOM.
|
|
// Like collecting-asteroids editor pattern.
|
|
// ============================================================
|
|
|
|
var sectionEls = []; // [{container, bigImg, smallImgs, pageNum, secIndex}]
|
|
var selected = null; // currently selected section
|
|
var ready = false;
|
|
|
|
// --- Parse transform string from DOM ---
|
|
function parseTransform(img) {
|
|
var t = img.style.transform || '';
|
|
var sm = t.match(/scale\(([\d.]+)\)/);
|
|
var rm = t.match(/rotate\(([-\d.]+)deg\)/);
|
|
return {
|
|
scale: sm ? parseFloat(sm[1]) : 1,
|
|
rotate: rm ? parseFloat(rm[1]) : 0
|
|
};
|
|
}
|
|
|
|
function setTransform(img, scale, rotate) {
|
|
img.style.transform = 'scale(' + scale + ') rotate(' + rotate + 'deg)';
|
|
}
|
|
|
|
// --- Find all sections in loaded pages ---
|
|
function findSections(pages) {
|
|
sectionEls = [];
|
|
pages.forEach(function(page, pi) {
|
|
var glows = page.querySelectorAll('.asteroid-glow');
|
|
glows.forEach(function(container, si) {
|
|
var bigImg = container.querySelector('img');
|
|
var sectionRow = container.parentElement;
|
|
while (sectionRow && !sectionRow.classList.contains('gap-[8mm]')) {
|
|
sectionRow = sectionRow.parentElement;
|
|
}
|
|
if (!sectionRow) sectionRow = container.parentElement;
|
|
|
|
var allImgs = sectionRow.querySelectorAll('img[src*="pack3-asteroids"]');
|
|
var smallImgs = [];
|
|
allImgs.forEach(function(img) { if (img !== bigImg) smallImgs.push(img); });
|
|
|
|
var sec = { container: container, bigImg: bigImg, smallImgs: smallImgs, pageNum: pi + 1, secIndex: si };
|
|
sectionEls.push(sec);
|
|
|
|
container.style.cursor = 'pointer';
|
|
container.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
selectSection(sec);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function selectSection(sec) {
|
|
if (selected) selected.container.classList.remove('editor-selected');
|
|
selected = sec;
|
|
sec.container.classList.add('editor-selected');
|
|
showInfo();
|
|
}
|
|
|
|
function showInfo() {
|
|
var el = document.getElementById('selection-info');
|
|
if (!selected) { el.textContent = 'Click a big asteroid to select'; return; }
|
|
var t = parseTransform(selected.bigImg);
|
|
el.textContent = 'Page ' + selected.pageNum + ' Sec ' + (selected.secIndex + 1) +
|
|
' \u2014 scale: ' + t.scale.toFixed(2) + ' rotate: ' + t.rotate + '\u00B0';
|
|
}
|
|
|
|
// --- Apply scale/rotate to big + all small imgs ---
|
|
function applyToSection(sec, scale, rotate) {
|
|
setTransform(sec.bigImg, scale, rotate);
|
|
sec.smallImgs.forEach(function(img) { setTransform(img, scale, rotate); });
|
|
sec.container.classList.toggle('editor-changed', scale !== 1 || rotate !== 0);
|
|
showInfo();
|
|
}
|
|
|
|
// --- Load data.json and apply transforms to DOM ---
|
|
function loadData(docId, cb) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', 'docs/' + docId + '.data.json', true);
|
|
xhr.onload = function() {
|
|
if (xhr.status === 200) {
|
|
try {
|
|
var data = JSON.parse(xhr.responseText);
|
|
var n = 0;
|
|
(data.pages || []).forEach(function(p) {
|
|
(p.sections || []).forEach(function(s) {
|
|
if (s.scale === 1 && s.rotate === 0) return;
|
|
var sec = sectionEls.find(function(el) {
|
|
return el.pageNum === p.page && el.secIndex === s.index;
|
|
});
|
|
if (sec) { applyToSection(sec, s.scale, s.rotate); n++; }
|
|
});
|
|
});
|
|
if (n > 0) core.showToast('Loaded ' + n + ' edits');
|
|
} catch(e) {}
|
|
}
|
|
if (cb) cb();
|
|
};
|
|
xhr.onerror = function() { if (cb) cb(); };
|
|
xhr.send();
|
|
}
|
|
|
|
// --- Serialize: read ALL transforms from DOM ---
|
|
function buildConfig() {
|
|
var pagesMap = {};
|
|
sectionEls.forEach(function(sec) {
|
|
var t = parseTransform(sec.bigImg);
|
|
if (!pagesMap[sec.pageNum]) pagesMap[sec.pageNum] = { page: sec.pageNum, sections: [] };
|
|
pagesMap[sec.pageNum].sections.push({
|
|
index: sec.secIndex,
|
|
scale: +t.scale.toFixed(3),
|
|
rotate: +t.rotate.toFixed(1)
|
|
});
|
|
});
|
|
return { pages: Object.values(pagesMap) };
|
|
}
|
|
|
|
// --- Save: sync XHR, read from DOM ---
|
|
function saveToServer() {
|
|
if (!ready) return;
|
|
var data = buildConfig();
|
|
try {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/api/save-edits', false);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.send(JSON.stringify({ taskType: 'asteroid-splitting', docId: core.docId, data: data }));
|
|
core.showToast(xhr.status === 200 ? 'Saved!' : 'Error: ' + xhr.statusText);
|
|
} catch(e) {
|
|
core.showToast('Save failed: ' + e.message);
|
|
}
|
|
}
|
|
|
|
// --- Keyboard ---
|
|
document.addEventListener('keydown', function(e) {
|
|
if (!selected) return;
|
|
var t = parseTransform(selected.bigImg);
|
|
var step = e.shiftKey ? 0.01 : 0.05;
|
|
var rotStep = e.shiftKey ? 1 : 5;
|
|
switch (e.key) {
|
|
case '+': case '=':
|
|
applyToSection(selected, Math.min(2, +(t.scale + step).toFixed(3)), t.rotate);
|
|
e.preventDefault(); break;
|
|
case '-': case '_':
|
|
applyToSection(selected, Math.max(0.3, +(t.scale - step).toFixed(3)), t.rotate);
|
|
e.preventDefault(); break;
|
|
case '[':
|
|
applyToSection(selected, t.scale, t.rotate - rotStep);
|
|
e.preventDefault(); break;
|
|
case ']':
|
|
applyToSection(selected, t.scale, t.rotate + rotStep);
|
|
e.preventDefault(); break;
|
|
case '0':
|
|
applyToSection(selected, 1, 0);
|
|
e.preventDefault(); break;
|
|
case 'Escape':
|
|
if (selected) { selected.container.classList.remove('editor-selected'); selected = null; showInfo(); }
|
|
break;
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (selected && !e.target.closest('.asteroid-glow')) {
|
|
selected.container.classList.remove('editor-selected');
|
|
selected = null; showInfo();
|
|
}
|
|
});
|
|
|
|
// --- Init ---
|
|
// NOTE: do NOT pass serialize to EditorCore — we handle Save ourselves
|
|
// to avoid double-handler (EditorCore's async + ours sync) race condition
|
|
var core = EditorCore.init({
|
|
taskType: 'asteroid-splitting',
|
|
onReady: function(pages) {
|
|
findSections(pages);
|
|
document.getElementById('status-text').textContent =
|
|
sectionEls.length + ' sections. Keys: +/- scale \u2022 [/] rotate (Shift=fine) \u2022 0 reset';
|
|
// Load saved data, then enable Save
|
|
loadData(core.docId, function() {
|
|
ready = true;
|
|
document.getElementById('btn-save').disabled = false;
|
|
document.getElementById('selection-info').textContent = 'Click a big asteroid to select';
|
|
});
|
|
// Wire Save button directly (EditorCore won't touch it without serialize)
|
|
document.getElementById('btn-save').addEventListener('click', function(e) {
|
|
saveToServer();
|
|
});
|
|
// Wire Copy JSON
|
|
document.getElementById('btn-copy').addEventListener('click', function(e) {
|
|
var json = JSON.stringify(buildConfig(), null, 2);
|
|
navigator.clipboard.writeText(json).then(function() { core.showToast('Copied!'); });
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|