diff options
Diffstat (limited to 'subprojects')
-rw-r--r-- | subprojects/frontend/src/graph/dotSource.ts | 27 | ||||
-rw-r--r-- | subprojects/frontend/src/graph/postProcessSVG.ts | 25 |
2 files changed, 39 insertions, 13 deletions
diff --git a/subprojects/frontend/src/graph/dotSource.ts b/subprojects/frontend/src/graph/dotSource.ts index bcd386cf..ce504c37 100644 --- a/subprojects/frontend/src/graph/dotSource.ts +++ b/subprojects/frontend/src/graph/dotSource.ts | |||
@@ -227,6 +227,25 @@ function binarySerach( | |||
227 | return undefined; | 227 | return undefined; |
228 | } | 228 | } |
229 | 229 | ||
230 | function getEdgeLabel( | ||
231 | name: string, | ||
232 | containment: boolean, | ||
233 | value: string, | ||
234 | ): string { | ||
235 | if (value !== 'ERROR') { | ||
236 | return containment ? `<<b>${name}</b>>` : `"${name}"`; | ||
237 | } | ||
238 | // No need to set an id for the image for animation, | ||
239 | // because it will be the only `<use>` element in its group. | ||
240 | return `<<table fixedsize="TRUE" align="left" border="0" cellborder="0" cellspacing="0" cellpadding="0"> | ||
241 | <tr> | ||
242 | <td><img src="#ERROR"/></td> | ||
243 | <td width="3.9375"></td> | ||
244 | <td align="left">${containment ? `<b>${name}</b>` : name}</td> | ||
245 | </tr> | ||
246 | </table>>`; | ||
247 | } | ||
248 | |||
230 | function createRelationEdges( | 249 | function createRelationEdges( |
231 | graph: GraphStore, | 250 | graph: GraphStore, |
232 | nodeData: NodeData[], | 251 | nodeData: NodeData[], |
@@ -243,10 +262,10 @@ function createRelationEdges( | |||
243 | let weight = EDGE_WEIGHT; | 262 | let weight = EDGE_WEIGHT; |
244 | let penwidth = 1; | 263 | let penwidth = 1; |
245 | const name = graph.getName(relation); | 264 | const name = graph.getName(relation); |
246 | let label = `"${name}"`; | 265 | let containment = false; |
247 | if (detail.type === 'reference' && detail.containment) { | 266 | if (detail.type === 'reference' && detail.containment) { |
248 | weight = CONTAINMENT_WEIGHT; | 267 | weight = CONTAINMENT_WEIGHT; |
249 | label = `<<b>${name}</b>>`; | 268 | containment = true; |
250 | penwidth = 2; | 269 | penwidth = 2; |
251 | } else if ( | 270 | } else if ( |
252 | detail.type === 'opposite' && | 271 | detail.type === 'opposite' && |
@@ -311,8 +330,10 @@ function createRelationEdges( | |||
311 | edgeWeight *= UNKNOWN_WEIGHT_FACTOR; | 330 | edgeWeight *= UNKNOWN_WEIGHT_FACTOR; |
312 | } | 331 | } |
313 | 332 | ||
333 | const id = `${fromNode.name},${toNode.name},${relation.name}`; | ||
334 | const label = getEdgeLabel(name, containment, value); | ||
314 | lines.push(`n${from} -> n${to} [ | 335 | lines.push(`n${from} -> n${to} [ |
315 | id="${fromNode.name},${toNode.name},${relation.name}", | 336 | id="${id}", |
316 | dir="${dir}", | 337 | dir="${dir}", |
317 | constraint=${edgeConstraint}, | 338 | constraint=${edgeConstraint}, |
318 | weight=${edgeWeight}, | 339 | weight=${edgeWeight}, |
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, |