import { studioState } from './state.js';
import * as actions from './actions.js';
import { t } from '../i18n.js';
/**
* Main Studio UI rendering orchestrator
*/
export function renderStudioUI() {
renderSourceList();
renderAssetGrid();
renderPropertyPanel();
}
/**
* Left Panel: Source File List
*/
function renderSourceList() {
const list = document.getElementById('source-list');
const loadArea = document.getElementById('load-package-area');
if (!list) return;
// 1. Render Load Area (only once or update if needed)
if (loadArea && loadArea.innerHTML === "") {
fetch('/assets').then(res => res.json()).then(data => {
const packs = data.packs || [];
loadArea.innerHTML = `
${t('studio_edit_existing')}
${t('studio_select_package')}
${packs.map(p => `${p.name} `).join('')}
${t('studio_open')}
`;
document.getElementById('load-pack-btn').onclick = () => {
const packId = document.getElementById('exist-pack-select').value;
if (packId && confirm(t('confirm_load_package').replace('{id}', packId))) {
actions.loadExistingPack(packId);
}
};
});
}
// 2. Render Source List
list.innerHTML = studioState.sources.map(src => `
${src.name}
`).join('');
// Add click listeners
list.querySelectorAll('.source-item').forEach(item => {
const id = item.dataset.id;
item.addEventListener('click', (e) => {
if (e.target.classList.contains('delete-btn')) {
studioState.removeSource(id);
renderStudioUI();
} else {
studioState.toggleSelection(id, e.ctrlKey || e.metaKey);
renderStudioUI();
}
});
});
}
/**
* Center Panel: Asset Preview Grid
*/
function renderAssetGrid() {
const grid = document.getElementById('asset-grid');
if (!grid) return;
if (studioState.sources.length === 0) {
grid.innerHTML = `
`;
return;
}
grid.innerHTML = studioState.sources.map(src => `
${src.label}
${src.choice.toUpperCase()}
`).join('');
// Add click listeners
grid.querySelectorAll('.asset-card').forEach(card => {
card.addEventListener('click', (e) => {
studioState.toggleSelection(card.dataset.id, e.ctrlKey || e.metaKey);
renderStudioUI();
});
});
}
/**
* Right Panel: Property Settings & Comparison
*/
function renderPropertyPanel() {
const panel = document.querySelector('.property-panel .panel-content');
if (!panel) return;
const selectedSources = studioState.sources.filter(s => studioState.selectedIds.has(s.id));
if (selectedSources.length === 0) {
panel.innerHTML = `
${t('studio_select_prompt')}
`;
return;
}
if (selectedSources.length === 1) {
const src = selectedSources[0];
panel.innerHTML = renderSingleAssetUI(src);
setupSingleAssetListeners(panel, src);
} else {
panel.innerHTML = renderBulkEditUI(selectedSources.length);
setupBulkEditListeners(panel, selectedSources);
}
}
function renderSingleAssetUI(src) {
return `
${t('original')}
${t('keep_png')}
${t('vector_svg')}
${src.svgData ? src.svgData : '
${t('use_svg')}
${src.status === 'processing' ? `
`;
}
let thresholdTimer = null;
function setupSingleAssetListeners(panel, src) {
panel.querySelector('#prop-label').oninput = (e) => src.label = e.target.value;
panel.querySelector('#prop-category').onchange = (e) => src.category = e.target.value;
panel.querySelector('#prop-category').value = src.category;
panel.querySelector('#add-cat-btn').onclick = () => {
const area = panel.querySelector('#new-cat-area');
area.style.display = area.style.display === 'none' ? 'flex' : 'none';
if (area.style.display === 'flex') panel.querySelector('#new-cat-name').focus();
};
panel.querySelector('#save-cat-btn').onclick = () => {
const input = panel.querySelector('#new-cat-name');
const name = input.value.trim();
if (studioState.addCategory(name)) {
src.category = name;
renderStudioUI();
} else {
panel.querySelector('#new-cat-area').style.display = 'none';
}
};
const thresholdInput = panel.querySelector('#prop-threshold');
const thresholdVal = panel.querySelector('#threshold-val');
thresholdInput.oninput = (e) => {
const val = parseInt(e.target.value);
src.threshold = val;
thresholdVal.textContent = val;
// Debounced Auto-retrace
clearTimeout(thresholdTimer);
thresholdTimer = setTimeout(() => {
actions.startVectorization(src.id);
}, 400);
};
panel.querySelectorAll('.choice-btn').forEach(btn => {
btn.onclick = () => {
if (btn.disabled) return;
studioState.setChoice(src.id, btn.dataset.choice);
renderStudioUI();
};
});
panel.querySelector('#convert-btn').onclick = () => actions.startVectorization(src.id);
}
function renderBulkEditUI(count) {
return `
${t('bulk_edit').replace('{count}', count)}
${t('common_category')}
${t('no_change')}
${studioState.categories.map(cat => `${cat} `).join('')}
${t('apply_to_selected')}
`;
}
function setupBulkEditListeners(panel, selectedSources) {
panel.querySelector('#bulk-apply').onclick = () => {
const cat = panel.querySelector('#bulk-category').value;
actions.bulkUpdateProperties(selectedSources, { category: cat });
renderStudioUI();
};
}