You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.9 KiB
101 lines
2.9 KiB
{
|
|
class Waiter {
|
|
constructor() {
|
|
this.promise = new Promise((resolve) => {
|
|
this.resolve = resolve;
|
|
});
|
|
}
|
|
}
|
|
|
|
async function getSVGDocument(elem) {
|
|
const data = elem.data;
|
|
elem.data = '';
|
|
elem.data = data;
|
|
const waiter = new Waiter();
|
|
elem.addEventListener('load', waiter.resolve);
|
|
await waiter.promise;
|
|
return elem.getSVGDocument();
|
|
}
|
|
|
|
const diagrams = {
|
|
lookup: {
|
|
async init(elem) {
|
|
const svg = await getSVGDocument(elem);
|
|
const partsByName = {};
|
|
[
|
|
'[id$=-Input]',
|
|
'[id$=-Output]',
|
|
'[id$=-Result]',
|
|
].forEach((selector) => {
|
|
[...svg.querySelectorAll('[id^=Effect]')].forEach((elem) => {
|
|
// because affinity designer doesn't export blend modes (T_T)
|
|
// and because I'd prefer not to have to manually fix things as I edit.
|
|
// I suppose I could add a build process.
|
|
elem.style.mixBlendMode = elem.id.split('-')[1];
|
|
});
|
|
[...svg.querySelectorAll(selector)].forEach((elem) => {
|
|
const [name, type] = elem.id.split('-');
|
|
partsByName[name] = partsByName[name] || {};
|
|
partsByName[name][type] = elem;
|
|
elem.style.visibility = 'hidden';
|
|
});
|
|
});
|
|
const parts = Object.keys(partsByName).sort().map(k => partsByName[k]);
|
|
let ndx = 0;
|
|
let step = 0;
|
|
let delay = 0;
|
|
setInterval(() => {
|
|
const part = parts[ndx];
|
|
switch (step) {
|
|
case 0:
|
|
part.Input.style.visibility = '';
|
|
++step;
|
|
break;
|
|
case 1:
|
|
part.Output.style.visibility = '';
|
|
++step;
|
|
break;
|
|
case 2:
|
|
part.Result.style.visibility = '';
|
|
++step;
|
|
break;
|
|
case 3:
|
|
part.Input.style.visibility = 'hidden';
|
|
part.Output.style.visibility = 'hidden';
|
|
ndx = (ndx + 1) % parts.length;
|
|
if (ndx === 0) {
|
|
step = 4;
|
|
delay = 4;
|
|
} else {
|
|
step = 0;
|
|
}
|
|
break;
|
|
case 4:
|
|
--delay;
|
|
if (delay <= 0) {
|
|
for (const part of parts) {
|
|
for (const elem of Object.values(part)) {
|
|
elem.style.visibility = 'hidden';
|
|
}
|
|
}
|
|
step = 0;
|
|
}
|
|
break;
|
|
}
|
|
}, 500);
|
|
},
|
|
},
|
|
};
|
|
|
|
[...document.querySelectorAll('[data-diagram]')].forEach(createDiagram);
|
|
|
|
function createDiagram(base) {
|
|
const name = base.dataset.diagram;
|
|
const info = diagrams[name];
|
|
if (!info) {
|
|
throw new Error(`no diagram ${name}`);
|
|
}
|
|
info.init(base);
|
|
}
|
|
}
|
|
|
|
|