diff options
Diffstat (limited to 'subprojects/frontend/src/graph/postProcessSVG.ts')
-rw-r--r-- | subprojects/frontend/src/graph/postProcessSVG.ts | 25 |
1 files changed, 15 insertions, 10 deletions
diff --git a/subprojects/frontend/src/graph/postProcessSVG.ts b/subprojects/frontend/src/graph/postProcessSVG.ts index 97130012..90dfbf61 100644 --- a/subprojects/frontend/src/graph/postProcessSVG.ts +++ b/subprojects/frontend/src/graph/postProcessSVG.ts | |||
@@ -135,6 +135,10 @@ function hrefToClass(node: SVGGElement) { | |||
135 | }); | 135 | }); |
136 | } | 136 | } |
137 | 137 | ||
138 | function parseCoordinate(element: SVGElement, attribute: string): number { | ||
139 | return Number(element.getAttribute(attribute)?.replace('px', '') ?? '0'); | ||
140 | } | ||
141 | |||
138 | function replaceImages(node: SVGGElement) { | 142 | function replaceImages(node: SVGGElement) { |
139 | node.querySelectorAll<SVGImageElement>('image').forEach((image) => { | 143 | node.querySelectorAll<SVGImageElement>('image').forEach((image) => { |
140 | const href = | 144 | const href = |
@@ -142,13 +146,17 @@ function replaceImages(node: SVGGElement) { | |||
142 | if (href === 'undefined' || !href?.startsWith('#')) { | 146 | if (href === 'undefined' || !href?.startsWith('#')) { |
143 | return; | 147 | return; |
144 | } | 148 | } |
145 | const width = image.getAttribute('width')?.replace('px', '') ?? ''; | 149 | const width = parseCoordinate(image, 'width'); |
146 | const height = image.getAttribute('height')?.replace('px', '') ?? ''; | 150 | const height = parseCoordinate(image, 'height'); |
151 | const x = parseCoordinate(image, 'x'); | ||
152 | const y = parseCoordinate(image, 'y'); | ||
153 | const size = Math.min(width, height); | ||
154 | const sizeString = String(size); | ||
147 | const use = document.createElementNS(SVG_NS, 'use'); | 155 | const use = document.createElementNS(SVG_NS, 'use'); |
148 | use.setAttribute('x', image.getAttribute('x') ?? ''); | 156 | use.setAttribute('x', String(x + (width - size) / 2)); |
149 | use.setAttribute('y', image.getAttribute('y') ?? ''); | 157 | use.setAttribute('y', String(y + (height - size) / 2)); |
150 | use.setAttribute('width', width); | 158 | use.setAttribute('width', sizeString); |
151 | use.setAttribute('height', height); | 159 | use.setAttribute('height', sizeString); |
152 | const iconName = `icon-${href.replace('#', '')}`; | 160 | const iconName = `icon-${href.replace('#', '')}`; |
153 | use.setAttribute('href', `#refinery-${iconName}`); | 161 | use.setAttribute('href', `#refinery-${iconName}`); |
154 | use.classList.add('icon', iconName); | 162 | use.classList.add('icon', iconName); |
@@ -193,14 +201,11 @@ function markerColorToClass(svg: SVGSVGElement) { | |||
193 | } | 201 | } |
194 | 202 | ||
195 | export default function postProcessSvg(svg: SVGSVGElement) { | 203 | export default function postProcessSvg(svg: SVGSVGElement) { |
196 | // svg | ||
197 | // .querySelectorAll<SVGTitleElement>('title') | ||
198 | // .forEach((title) => title.parentElement?.removeChild(title)); | ||
199 | svg.querySelectorAll<SVGGElement>('g.node').forEach((node) => { | 204 | svg.querySelectorAll<SVGGElement>('g.node').forEach((node) => { |
200 | optimizeNodeShapes(node); | 205 | optimizeNodeShapes(node); |
201 | hrefToClass(node); | 206 | hrefToClass(node); |
202 | replaceImages(node); | ||
203 | }); | 207 | }); |
208 | replaceImages(svg); | ||
204 | // Increase padding to fit box shadows for multi-objects. | 209 | // Increase padding to fit box shadows for multi-objects. |
205 | const viewBox = [ | 210 | const viewBox = [ |
206 | svg.viewBox.baseVal.x - 6, | 211 | svg.viewBox.baseVal.x - 6, |