Since 8.08, it's possible to supply an additional parameter to the Graphviz extension functions that make it possible to generate SVG or a PNG with a click map.
The following example shows how to create a simple graph with 2 clickable nodes.
Note: the '$' symbol is an automatic variable that refers to the textual contents of the <pre> element.
HTML Source
<pre function="graphviz.Dot($, 'png+map')" class="script">
digraph {
Google [ URL = "http://www.google.com" ]
CNN [ URL = "http://cnn.com" ]
Google -> CNN;
}
</pre>
Result
reference to undefined name 'graphviz' Exception of type 'MindTouch.Deki.Script.Runtime.DekiScriptUndefinedNameException' was thrown. (click for details)Callstack:
at App_Catalog/Graphviz/Graphviz_with_URIs
MindTouch.Deki.Script.Runtime.DekiScriptUndefinedNameException: reference to undefined name 'graphviz' Exception of type 'MindTouch.Deki.Script.Runtime.DekiScriptUndefinedNameException' was thrown.
at MindTouch.Deki.Script.Compiler.DekiScriptExpressionEvaluation.Visit (MindTouch.Deki.Script.Expr.DekiScriptVar expr, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Expr.DekiScriptVar.VisitWith[DekiScriptExpressionEvaluationState,Range] (IDekiScriptExpressionVisitor`2 visitor, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Compiler.DekiScriptExpressionEvaluation.Evaluate (MindTouch.Deki.Script.Expr.DekiScriptAccess expr, DekiScriptExpressionEvaluationState state, Boolean evaluateProperties) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Compiler.DekiScriptExpressionEvaluation.Visit (MindTouch.Deki.Script.Expr.DekiScriptAccess expr, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Expr.DekiScriptAccess.VisitWith[DekiScriptExpressionEvaluationState,Range] (IDekiScriptExpressionVisitor`2 visitor, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Compiler.DekiScriptExpressionEvaluation.Visit (MindTouch.Deki.Script.Expr.DekiScriptCall expr, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Expr.DekiScriptCall.VisitWith[DekiScriptExpressionEvaluationState,Range] (IDekiScriptExpressionVisitor`2 visitor, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Compiler.DekiScriptExpressionEvaluation.Visit (MindTouch.Deki.Script.Expr.DekiScriptSequence expr, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Expr.DekiScriptSequence.VisitWith[DekiScriptExpressionEvaluationState,Range] (IDekiScriptExpressionVisitor`2 visitor, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Compiler.DekiScriptExpressionEvaluation.Visit (MindTouch.Deki.Script.Expr.DekiScriptReturnScope expr, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
If your users are like mine and are afraid of the "Source" editor screen, you can create a style to include this "pre function" block.
To do this, you need to edit the file "fckconfig.js". In Ubuntu, this should be located at /var/www/dekiwiki/editor/fckeditor/editor/fckconfig.js.
In other releases, it should be in editor/fckeditor/editor/fckconfig.js under the document root.
Open the file and search for the text "FCKConfig.CustomStyles".
Modify the section to include a Graphviz style.
FCKConfig.CustomStyles =
{
'Code' : { Element : 'code' },
'DekiScript' : { Element : 'pre', Attributes : { 'class' : 'script' } },
'Graphviz' : { Element : 'pre', Attributes : { 'function': 'graphviz.Dot($,\'png+map\')', 'class' : 'script' } },
'Comment' : { Element : 'p', Attributes : { 'class' : 'comment' } }
};
Save the file and your users can now add Graphviz blocks by selecting "Graphviz" from the FckEditor "Style" dropdown menu. edited 10:38, 18 Apr 2009