jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tracker: use simple string for sprites

Browse source
This commit is contained in:
nick-delirium 2024-12-18 14:31:07 +01:00
parent f791d06ecd
commit b6080b2492
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
2 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/app/player/web/MessageLoader.ts
View file

@ -455,13 +455,12 @@ function findBrokenNodes(nodes: any[]) {
}
function handleSprites(potentialSpriteMap: Record<string, any>, parser: DOMParser, msg: Record<string, any>, spriteMapSvg: SVGElement, i: number) {
const [_, dataUrl] = msg.value.split('_$OPENREPLAY_SPRITE$_');
const potentialSprite = potentialSpriteMap[dataUrl];
const [_, svgData] = msg.value.split('_$OPENREPLAY_SPRITE$_');
const potentialSprite = potentialSpriteMap[svgData];
if (potentialSprite) {
msg.value = potentialSprite;
} else {
const svgText = atob(dataUrl.split(",")[1]);
const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
const svgDoc = parser.parseFromString(svgData, "image/svg+xml");
const originalSvg = svgDoc.querySelector("svg");
if (originalSvg) {
const symbol = document.createElementNS("http://www.w3.org/2000/svg", "symbol");
@ -472,7 +471,7 @@ function handleSprites(potentialSpriteMap: Record<string, any>, parser: DOMParse
spriteMapSvg.appendChild(symbol);
msg.value = `#${symbolId}`;
potentialSpriteMap[dataUrl] = `#${symbolId}`;
potentialSpriteMap[svgData] = `#${symbolId}`;
}
}
}

27
tracker/tracker/src/main/app/observer/observer.ts
View file

@ -25,7 +25,7 @@ import {
const iconCache = {}
const domParser = new DOMParser()
async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl') {
async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl' | 'svgtext') {
try {
const href = useElement.getAttribute('xlink:href') || useElement.getAttribute('href')
if (!href) {
@ -58,7 +58,19 @@ async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl')
const res = { paths: symbol.innerHTML, vbox: symbol.getAttribute('viewBox') || '0 0 24 24' }
iconCache[symbolId] = res
return res
} else if (mode === 'dataurl') {
}
if (mode === 'svgtext') {
const inlineSvg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="${symbol.getAttribute('viewBox') || '0 0 24 24'}">
${symbol.innerHTML}
</svg>
`.trim()
iconCache[symbolId] = inlineSvg
return inlineSvg
}
if (mode === 'dataurl') {
const inlineSvg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="${symbol.getAttribute('viewBox') || '0 0 24 24'}">
${symbol.innerHTML}
@ -70,9 +82,8 @@ async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl')
iconCache[symbolId] = dataUrl
return dataUrl
} else {
console.debug(`Openreplay: Unknown mode: ${mode}. Use "inline" or "dataurl".`)
}
console.debug(`Openreplay: Unknown mode: ${mode}. Use "inline" or "dataurl".`)
} catch (error) {
console.error('Openreplay: Error processing <use> element:', error)
}
@ -239,10 +250,10 @@ export default abstract class Observer {
}
if (isUseElement(node) && name === 'href') {
parseUseEl(node, 'dataurl')
.then((dataUrl) => {
if (dataUrl) {
this.app.send(SetNodeAttribute(id, name, `_$OPENREPLAY_SPRITE$_${dataUrl}`))
parseUseEl(node, 'svgtext')
.then((svgData) => {
if (svgData) {
this.app.send(SetNodeAttribute(id, name, `_$OPENREPLAY_SPRITE$_${svgData}`))
}
})
.catch((e: any) => {