doc/img/gui_flow/graph.xsl

   1 <?xml version="1.0" encoding="utf-8" standalone="no"?>
   2 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   3                 xmlns:svg="http://www.w3.org/2000/svg"
   4                 xmlns:xlink="http://www.w3.org/1999/xlink"
   5                 xmlns:math="http://exslt.org/math"
   6                 xmlns:ex="http://www.example.com/graph"
   7                 version="1.0">
   8   <xsl:import href="math.sqrt.template.xsl"/>
   9   <xsl:output indent="yes"/>
  10
  11   <xsl:template match="ex:graph">
  12     <xsl:variable name="view-box" select="./ex:config/@viewBox"/>
  13     <svg:svg version="1.0" viewBox="{$view-box}">
  14       <svg:defs>
  15         <xsl:variable name="arc-color" select="./ex:config/@arc-color"/>
  16         <svg:marker id="arrowhead" viewBox="0 0 20 20" refX="20" refY="10"
  17                     markerUnits="strokeWidth" markerWidth="8" markerHeight="6"
  18                     orient="auto" style="{$arc-color}">
  19           <svg:path d="M 0 0 L 20 10 L 0 20 z"/>
  20         </svg:marker>
  21       </svg:defs>
  22       <!-- making sure the arcs are drawn first -->
  23       <xsl:apply-templates select="ex:arc"/>
  24       <xsl:apply-templates select="ex:node"/>
  25     </svg:svg>
  26   </xsl:template>
  27
  28   <xsl:template match="ex:arc">
  29     <xsl:variable name="text-color" select="../ex:config/@text-color"/>
  30     <xsl:variable name="arc-color" select="../ex:config/@arc-color"/>
  31     <xsl:variable name="node-radius" select="../ex:config/@node-radius"/>
  32     <xsl:variable name="arc-offset" select="../ex:config/@arc-offset"/>
  33     <svg:g style="{$arc-color}">
  34       <xsl:variable name="from"><xsl:value-of select="@from"/></xsl:variable>
  35       <xsl:variable name="to"><xsl:value-of select="@to"/></xsl:variable>
  36       <xsl:variable name="x1" select="../ex:node[@name=$from]/@cx"/>
  37       <xsl:variable name="y1" select="../ex:node[@name=$from]/@cy"/>
  38       <xsl:variable name="x2" select="../ex:node[@name=$to]/@cx"/>
  39       <xsl:variable name="y2" select="../ex:node[@name=$to]/@cy"/>
  40       <!-- calculate endpoints shortened by $node-radius + $arc-offset -->
  41       <xsl:variable name="Dx" select="$x2 - $x1"/>
  42       <xsl:variable name="Dy" select="$y2 - $y1"/>
  43       <xsl:variable name="Dsquare" select="($Dx*$Dx + $Dy*$Dy)"/>
  44       <xsl:variable name="D"><xsl:call-template name="sqrt">
  45           <xsl:with-param name="number" select="$Dsquare"/>
  46       </xsl:call-template></xsl:variable>
  47       <xsl:variable name="a-off" select="$node-radius + $arc-offset"/>
  48       <xsl:variable name="dx" select="$a-off * $Dx div $D"/>
  49       <xsl:variable name="dy" select="$a-off * $Dy div $D"/>
  50       <xsl:variable name="X1" select="$x1 + $dx"/>
  51       <xsl:variable name="Y1" select="$y1 + $dy"/>
  52       <xsl:variable name="X2" select="$x2 - $dx"/>
  53       <xsl:variable name="Y2" select="$y2 - $dy"/>
  54       <svg:path style="marker-end:url(#arrowhead);stroke-width:1;"
  55                 d="M{$X1} {$Y1} L{$X2} {$Y2}"/>
  56       <svg:defs>
  57         <svg:path id="textPath-{@label}" d="M{$X1} {$Y1} L{$X2} {$Y2}"/>
  58       </svg:defs>
  59       <svg:text text-anchor="middle" style="{$text-color}">
  60         <svg:textPath xlink:href="#textPath-{@label}" startOffset="50%">
  61           <svg:tspan dy="-0.4em">  <!-- raise text slightly off the line -->
  62             <xsl:value-of select="@label"/>
  63           </svg:tspan>
  64         </svg:textPath>
  65       </svg:text>
  66     </svg:g>
  67   </xsl:template>
  68
  69   <xsl:template match="ex:node">
  70     <xsl:variable name="text-color" select="../ex:config/@text-color"/>
  71     <xsl:variable name="node-color" select="../ex:config/@node-color"/>
  72     <xsl:variable name="node-radius" select="../ex:config/@node-radius"/>
  73     <svg:g style="{$node-color}">
  74       <svg:circle cx="{@cx}" cy="{@cy}" r="{$node-radius}"/>
  75       <svg:text text-anchor="middle" x="{@cx}" y="{@cy}"
  76                 style="dominant-baseline:central;{$text-color}">
  77         <xsl:value-of select="@label"/>
  78       </svg:text>
  79     </svg:g>
  80   </xsl:template>
  81 </xsl:stylesheet>