thm/line-and-surface
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity

fix: prevent 404s due to relative image paths of VideoScrolls

Browse source
This commit is contained in:
Tomáš Mládek 2022-08-17 22:42:00 +02:00
parent a3311a67fb
commit 1a93571eb4
1 changed files with 76 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/SVGContent.svelte
View file

@ -74,6 +74,17 @@
) as Document;
console.debug("[SVG] Loaded.");
loadedPercent = 100;
// Prevent 404s due to relative image paths
const imageElements = Array.from(
svgParsed.getElementsByTagName("image")
).filter((el) =>
Array.from(el.children).some((el) => el.tagName == "desc")
);
imageElements.forEach((el) => {
el.remove();
});
const svg = root.appendChild(svgParsed.firstElementChild as Element) as any;
// Set document background
@ -238,7 +249,7 @@
// Videoscrolls
console.debug("[SVG] Processing video scrolls.");
scrolls = await processScrolls(svg);
scrolls = await processScrolls(svg, imageElements);
console.info(`[SVG] Found ${scrolls.length} video scrolls.`);
// Debug Stats
@ -363,7 +374,7 @@
requestAnimationFrame(animate);
});
function processAnchors(document: XMLDocument): SVGRectElement[] {
function processAnchors(document: SVGElement): SVGRectElement[] {
const result: SVGRectElement[] = [];
Array.from(document.getElementsByTagName("rect"))
.filter((el) => el.id.startsWith("anchor"))
@ -375,23 +386,21 @@
return result;
}
async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
const ratio = (svg as any).clientWidth / (svg as any).viewBox.baseVal.width;
async function processScrolls(
svg: SVGElement,
images: SVGImageElement[]
): Promise<VideoScrollDef[]> {
const ratio = svg.clientWidth / (svg as any).viewBox.baseVal.width;
return Promise.all(
Array.from(svg.getElementsByTagName("image"))
.filter((el) =>
Array.from(el.children).some((el) => el.tagName == "desc")
)
.map(async (el) => {
images.map(async (el) => {
const descNode = Array.from(el.children).find(
(el) => el.tagName == "desc"
);
console.debug(
`[SVG/VIDEOSCROLLS] Found video scroll #${el.id}: ${descNode?.textContent}`
);
const [directionString, filesURL] =
descNode!.textContent!.split("\n");
const [directionString, filesURL] = descNode!.textContent!.split("\n");
const directions: VideoScrollDirection[] = directionString
.split(" ")
@ -449,7 +458,7 @@
);
}
function processAudio(svg: XMLDocument): AudioAreaDef[] {
function processAudio(svg: SVGElement): AudioAreaDef[] {
const circles: (SVGCircleElement | SVGEllipseElement)[] = Array.from(
svg.getElementsByTagName("circle")
);