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