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) { function handleSprites(potentialSpriteMap: Record<string, any>, parser: DOMParser, msg: Record<string, any>, spriteMapSvg: SVGElement, i: number) {
const [_, dataUrl] = msg.value.split('_$OPENREPLAY_SPRITE$_'); const [_, svgData] = msg.value.split('_$OPENREPLAY_SPRITE$_');
const potentialSprite = potentialSpriteMap[dataUrl]; const potentialSprite = potentialSpriteMap[svgData];
if (potentialSprite) { if (potentialSprite) {
msg.value = potentialSprite; msg.value = potentialSprite;
} else { } else {
const svgText = atob(dataUrl.split(",")[1]); const svgDoc = parser.parseFromString(svgData, "image/svg+xml");
const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
const originalSvg = svgDoc.querySelector("svg"); const originalSvg = svgDoc.querySelector("svg");
if (originalSvg) { if (originalSvg) {
const symbol = document.createElementNS("http://www.w3.org/2000/svg", "symbol"); 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); spriteMapSvg.appendChild(symbol);
msg.value = `#${symbolId}`; 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 iconCache = {}
const domParser = new DOMParser() const domParser = new DOMParser()
async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl') { async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl' | 'svgtext') {
try { try {
const href = useElement.getAttribute('xlink:href') || useElement.getAttribute('href') const href = useElement.getAttribute('xlink:href') || useElement.getAttribute('href')
if (!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' } const res = { paths: symbol.innerHTML, vbox: symbol.getAttribute('viewBox') || '0 0 24 24' }
iconCache[symbolId] = res iconCache[symbolId] = res
return 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 = ` const inlineSvg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="${symbol.getAttribute('viewBox') || '0 0 24 24'}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="${symbol.getAttribute('viewBox') || '0 0 24 24'}">
${symbol.innerHTML} ${symbol.innerHTML}
@ -70,9 +82,8 @@ async function parseUseEl(useElement: SVGUseElement, mode: 'inline' | 'dataurl')
iconCache[symbolId] = dataUrl iconCache[symbolId] = dataUrl
return 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) { } catch (error) {
console.error('Openreplay: Error processing <use> element:', error) console.error('Openreplay: Error processing <use> element:', error)
} }
@ -239,10 +250,10 @@ export default abstract class Observer {
} }
if (isUseElement(node) && name === 'href') { if (isUseElement(node) && name === 'href') {
parseUseEl(node, 'dataurl') parseUseEl(node, 'svgtext')
.then((dataUrl) => { .then((svgData) => {
if (dataUrl) { if (svgData) {
this.app.send(SetNodeAttribute(id, name, `_$OPENREPLAY_SPRITE$_${dataUrl}`)) this.app.send(SetNodeAttribute(id, name, `_$OPENREPLAY_SPRITE$_${svgData}`))
} }
}) })
.catch((e: any) => { .catch((e: any) => {