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

143
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,81 +386,79 @@
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) => {
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");
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 directions: VideoScrollDirection[] = directionString
.split(" ")
.map((direction) => {
if (
!Object.values(VideoScrollDirection).includes(
direction as VideoScrollDirection
)
) {
console.error(
`Unknown direction definition: "${direction}" (in #${el.id})`
);
return false;
}
return direction as VideoScrollDirection;
})
.filter((d) => Boolean(d)) as VideoScrollDirection[];
const directions: VideoScrollDirection[] = directionString
.split(" ")
.map((direction) => {
if (
!Object.values(VideoScrollDirection).includes(
direction as VideoScrollDirection
)
) {
console.error(
`Unknown direction definition: "${direction}" (in #${el.id})`
);
return false;
}
return direction as VideoScrollDirection;
})
.filter((d) => Boolean(d)) as VideoScrollDirection[];
console.debug(`[SVG/VIDEOSCROLLS] Fetching ${filesURL}...`);
const fileFetch = await fetch(`content/${filesURL}`);
const preURL = fileFetch.url.replace(/\/files.lst$/, "");
const files = (await fileFetch.text())
.split("\n")
.filter(Boolean)
.map((str) => `${preURL}/${str}`);
console.debug(`[SVG/VIDEOSCROLLS] Fetching ${filesURL}...`);
const fileFetch = await fetch(`content/${filesURL}`);
const preURL = fileFetch.url.replace(/\/files.lst$/, "");
const files = (await fileFetch.text())
.split("\n")
.filter(Boolean)
.map((str) => `${preURL}/${str}`);
let x = el.x.baseVal.value;
let y = el.y.baseVal.value;
let w = el.width.baseVal.value;
let h = el.height.baseVal.value;
let angle = 0;
let x = el.x.baseVal.value;
let y = el.y.baseVal.value;
let w = el.width.baseVal.value;
let h = el.height.baseVal.value;
let angle = 0;
const transform = el.attributes.getNamedItem("transform");
const rotateResult = /rotate\((-?[0-9.]+)\)/.exec(
transform?.value || ""
);
if (rotateResult) {
angle = parseFloat(rotateResult[1]);
const [ncx, ncy] = rotate(x + w / 2, y + h / 2, 0, 0, angle);
x = ncx - w / 2;
y = ncy - h / 2;
}
const transform = el.attributes.getNamedItem("transform");
const rotateResult = /rotate\((-?[0-9.]+)\)/.exec(
transform?.value || ""
);
if (rotateResult) {
angle = parseFloat(rotateResult[1]);
const [ncx, ncy] = rotate(x + w / 2, y + h / 2, 0, 0, angle);
x = ncx - w / 2;
y = ncy - h / 2;
}
return {
id: el.id,
top: y * ratio,
left: x * ratio,
angle,
width: w * ratio,
height: h * ratio,
directions,
files,
};
})
return {
id: el.id,
top: y * ratio,
left: x * ratio,
angle,
width: w * ratio,
height: h * ratio,
directions,
files,
};
})
);
}
function processAudio(svg: XMLDocument): AudioAreaDef[] {
function processAudio(svg: SVGElement): AudioAreaDef[] {
const circles: (SVGCircleElement | SVGEllipseElement)[] = Array.from(
svg.getElementsByTagName("circle")
);