224 lines
7.2 KiB
JavaScript
224 lines
7.2 KiB
JavaScript
/**
|
||
* Component-editor for sonic-diamond.
|
||
*
|
||
* Modes:
|
||
* - Matrix (default): grid of all valid preset combinations. Click → Single.
|
||
* - Single: one component instance with dropdown/checkbox controls and
|
||
* a checker-pattern preview frame. Diamond has no per-variant tuning,
|
||
* so this mode here only demonstrates the prop-switching flow.
|
||
*
|
||
* Mode is driven by the URL hash:
|
||
* '' → Matrix
|
||
* 'shape=...&color=...&chipped=...' → Single
|
||
*
|
||
* "Copy snapshot" works in either mode and produces JS source ready to
|
||
* paste between `@editor:anchors-*` and `@editor:variants-*` markers.
|
||
*/
|
||
await customElements.whenDefined('sonic-diamond');
|
||
|
||
const Comp = customElements.get('sonic-diamond');
|
||
const { presetProps, chippedShapes } = Comp;
|
||
|
||
document.getElementById('meta').textContent =
|
||
`${Object.keys(Comp.variants).length} variants · baseSize ${Comp.baseSize.w}×${Comp.baseSize.h}mm · origin (${Comp.origin.x}, ${Comp.origin.y})`;
|
||
|
||
initMatrix();
|
||
initSingle();
|
||
window.addEventListener('hashchange', route);
|
||
route();
|
||
|
||
document.getElementById('btn-copy').addEventListener('click', async () => {
|
||
const text = serializeSnapshot(Comp.anchorsDefault, Comp.variants);
|
||
await navigator.clipboard.writeText(text);
|
||
showToast('Snapshot copied');
|
||
});
|
||
|
||
// ---- Routing ----
|
||
|
||
function route() {
|
||
const params = new URLSearchParams(location.hash.slice(1));
|
||
const matrixView = document.getElementById('matrix-view');
|
||
const singleView = document.getElementById('single-view');
|
||
if (params.has('shape')) {
|
||
matrixView.hidden = true;
|
||
singleView.hidden = false;
|
||
applySingle(params);
|
||
} else {
|
||
matrixView.hidden = false;
|
||
singleView.hidden = true;
|
||
}
|
||
}
|
||
|
||
function setHashParams(updates) {
|
||
const params = new URLSearchParams(location.hash.slice(1));
|
||
for (const [k, v] of Object.entries(updates)) params.set(k, String(v));
|
||
location.hash = params.toString();
|
||
}
|
||
|
||
// ---- Matrix mode ----
|
||
|
||
function initMatrix() {
|
||
const root = document.getElementById('matrix-view');
|
||
renderGrid(root, 'Full', false);
|
||
renderGrid(root, 'Chipped', true);
|
||
}
|
||
|
||
function renderGrid(root, title, chipped) {
|
||
const shapes = chipped
|
||
? presetProps.shape.filter(s => chippedShapes.has(s))
|
||
: presetProps.shape;
|
||
const colors = presetProps.color;
|
||
|
||
const section = document.createElement('section');
|
||
const h2 = document.createElement('h2');
|
||
h2.textContent = `${title} — ${shapes.length} × ${colors.length}`;
|
||
section.appendChild(h2);
|
||
|
||
const grid = document.createElement('div');
|
||
grid.className = 'grid';
|
||
grid.style.gridTemplateColumns = `repeat(${colors.length}, 1fr)`;
|
||
|
||
for (const shape of shapes) {
|
||
for (const color of colors) {
|
||
grid.appendChild(makeCell(shape, color, chipped));
|
||
}
|
||
}
|
||
|
||
section.appendChild(grid);
|
||
root.appendChild(section);
|
||
}
|
||
|
||
function makeCell(shape, color, chipped) {
|
||
const cell = document.createElement('div');
|
||
cell.className = 'cell';
|
||
cell.title = 'Open in single mode';
|
||
cell.addEventListener('click', () => {
|
||
location.hash = `shape=${shape}&color=${color}&chipped=${chipped}`;
|
||
});
|
||
|
||
const preview = document.createElement('div');
|
||
preview.className = 'preview';
|
||
|
||
const inst = document.createElement('sonic-diamond');
|
||
inst.setAttribute('shape', shape);
|
||
inst.setAttribute('color', color);
|
||
inst.setAttribute('chipped', String(chipped));
|
||
preview.appendChild(inst);
|
||
|
||
const label = document.createElement('div');
|
||
label.className = 'label';
|
||
label.innerHTML = `<div>${shape} · ${color}</div>`;
|
||
|
||
const key = document.createElement('div');
|
||
key.className = 'key';
|
||
key.textContent = inst._variantKey();
|
||
|
||
cell.appendChild(preview);
|
||
cell.appendChild(label);
|
||
cell.appendChild(key);
|
||
return cell;
|
||
}
|
||
|
||
// ---- Single mode ----
|
||
|
||
let singleInstance = null;
|
||
|
||
function initSingle() {
|
||
fillSelect('ctrl-shape', presetProps.shape);
|
||
fillSelect('ctrl-color', presetProps.color);
|
||
|
||
document.getElementById('ctrl-shape').addEventListener('change', e =>
|
||
setHashParams({ shape: e.target.value })
|
||
);
|
||
document.getElementById('ctrl-color').addEventListener('change', e =>
|
||
setHashParams({ color: e.target.value })
|
||
);
|
||
document.getElementById('ctrl-chipped').addEventListener('change', e =>
|
||
setHashParams({ chipped: e.target.checked })
|
||
);
|
||
document.getElementById('btn-back').addEventListener('click', () => {
|
||
location.hash = '';
|
||
});
|
||
}
|
||
|
||
function applySingle(params) {
|
||
if (!singleInstance) {
|
||
singleInstance = document.createElement('sonic-diamond');
|
||
document.getElementById('single-frame').appendChild(singleInstance);
|
||
}
|
||
|
||
const shape = params.get('shape') ?? presetProps.shape[0];
|
||
const color = params.get('color') ?? presetProps.color[0];
|
||
const chipped = params.get('chipped') === 'true';
|
||
|
||
singleInstance.setAttribute('shape', shape);
|
||
singleInstance.setAttribute('color', color);
|
||
singleInstance.setAttribute('chipped', String(chipped));
|
||
|
||
document.getElementById('ctrl-shape').value = shape;
|
||
document.getElementById('ctrl-color').value = color;
|
||
const cb = document.getElementById('ctrl-chipped');
|
||
const cbLabel = document.getElementById('ctrl-chipped-label');
|
||
const supportsChipped = chippedShapes.has(shape);
|
||
cb.checked = chipped && supportsChipped;
|
||
cb.disabled = !supportsChipped;
|
||
cbLabel.textContent = supportsChipped ? 'Chipped' : 'Chipped (n/a for this shape)';
|
||
|
||
const key = singleInstance._variantKey();
|
||
document.getElementById('info-variant').textContent = key;
|
||
document.getElementById('info-basesize').textContent = `${Comp.baseSize.w}×${Comp.baseSize.h}mm`;
|
||
document.getElementById('info-origin').textContent = `(${Comp.origin.x}, ${Comp.origin.y})`;
|
||
document.getElementById('info-img').textContent = Comp.variants[key]?.img ?? '—';
|
||
}
|
||
|
||
function fillSelect(id, options) {
|
||
const sel = document.getElementById(id);
|
||
sel.innerHTML = '';
|
||
for (const opt of options) {
|
||
const o = document.createElement('option');
|
||
o.value = opt;
|
||
o.textContent = opt;
|
||
sel.appendChild(o);
|
||
}
|
||
}
|
||
|
||
// ---- Snapshot serialization ----
|
||
|
||
function serializeSnapshot(anchorsDefault, variants) {
|
||
const lines = [];
|
||
lines.push(' // @editor:anchors-start');
|
||
lines.push(` static anchorsDefault = ${formatAnchors(anchorsDefault, ' ')};`);
|
||
lines.push(' // @editor:anchors-end');
|
||
lines.push('');
|
||
lines.push(' // @editor:variants-start');
|
||
lines.push(' static variants = {');
|
||
for (const [key, v] of Object.entries(variants)) {
|
||
const a = formatAnchorsInline(v.anchors || {});
|
||
lines.push(` ${key}: { img: ${JSON.stringify(v.img)}, dx: ${v.dx}, dy: ${v.dy}, scale: ${v.scale}, anchors: ${a} },`);
|
||
}
|
||
lines.push(' };');
|
||
lines.push(' // @editor:variants-end');
|
||
return lines.join('\n');
|
||
}
|
||
|
||
function formatAnchors(anchors, indent) {
|
||
const keys = Object.keys(anchors);
|
||
if (keys.length === 0) return '{}';
|
||
const inner = keys.map(k => `${indent} ${k}: { x: ${anchors[k].x}, y: ${anchors[k].y} }`).join(',\n');
|
||
return `{\n${inner},\n${indent}}`;
|
||
}
|
||
|
||
function formatAnchorsInline(anchors) {
|
||
const keys = Object.keys(anchors);
|
||
if (keys.length === 0) return '{}';
|
||
const parts = keys.map(k => `${k}: { x: ${anchors[k].x}, y: ${anchors[k].y} }`);
|
||
return `{ ${parts.join(', ')} }`;
|
||
}
|
||
|
||
function showToast(msg) {
|
||
const toast = document.getElementById('toast');
|
||
toast.textContent = msg;
|
||
toast.classList.add('show');
|
||
setTimeout(() => toast.classList.remove('show'), 1500);
|
||
}
|