select a thread in download

The web page only supports two colors and a single width for threads.

InkScape does not support a "select same class" function. Same might apply to other applications. It is tedious to select all segments in a downloaded diagram to make such changes afterwards.

Perhaps he download function could combine the individual line segments of each thread in a single segmented path.

The native scala-XML library is of no use in a js environment. So far the SVG-XML is generated as plain string. Below two JavaScript examples that manipulate the SVG (generated by the Scala code) in different ways.

This change request asks for a scala implementation. The problem is too complex for string manipulation. https://github.com/scalajs-io/xml2js or https://github.com/scalajs-io/jsdom might be alternatives.

String replacements:

GroundForge/docs/js/tiles.js

Lines 122 to 129 in 7d7695b

    
           function setDownloadContent (linkNode, id) { 
        
             svg = d3.select(id).node().innerHTML. 
        
                 replace('pointer-events="all"', ''). 
        
                 replace(/<path [^>]+opacity: 0;.+?path>/g, ''). 
        
                 replace(/<\/foreignObject>/g, '</input></foreignObject>') // even if provided, closing tag gets swallowed 
        
             linkNode.href = 'data:image/svg+xml,' + encodeURIComponent('<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->' + svg) 
        
           }

DOM manipulation (toggle thread color):

GroundForge/docs/js/tiles.js

Lines 334 to 336 in 7d7695b

    
           var newColor = segments.style("stroke")+"" == "rgb(255, 0, 0)" ? "#000" : "#F00" 
        
           segments.style("stroke", newColor) 
        
           segments.filter(".node").style("fill", newColor)

Another option is rewrite

GroundForge/src/main/scala/dibl/D3jsSVG.scala

Line 143 in bb40f19

private def renderLinks(diagram: Diagram,

That might not marry well with the animation process. So #142 would have to be fixed first.

Eureka: Don't generate a segmented path. Group the segments.

It is more complicated than it looked at first sight. It looks like the animation needs the nodes and links rendered in the same order as in

GroundForge/src/main/scala/dibl/Diagram.scala

Lines 22 to 24 in bf5971a

    
           @JSExportTopLevel("Diagram") case class Diagram(nodes: Seq[NodeProps], 
        
                                                           links: Seq[LinkProps] 
        
                                                          ) {

fixed with a8b4a94

	function setDownloadContent (linkNode, id) {

	svg = d3.select(id).node().innerHTML.
	replace('pointer-events="all"', '').
	replace(/<path [^>]+opacity: 0;.+?path>/g, '').
	replace(/<\/foreignObject>/g, '</input></foreignObject>') // even if provided, closing tag gets swallowed
	linkNode.href = 'data:image/svg+xml,' + encodeURIComponent('<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->' + svg)
	}

	var newColor = segments.style("stroke")+"" == "rgb(255, 0, 0)" ? "#000" : "#F00"
	segments.style("stroke", newColor)
	segments.filter(".node").style("fill", newColor)

	@JSExportTopLevel("Diagram") case class Diagram(nodes: Seq[NodeProps],
	links: Seq[LinkProps]
	) {