Here we describe the results of creating a new plugin to render interactive graphs in Fedwiki. First let's Make a New Plugin.
https://github.com/ViralAcademy/wiki-plugin-svg/tree/master emit = ($item, item) -> bind = ($item, item) -> $item.dblclick -> wiki.textEditor $item, item window.plugins.svg = {emit, bind} if window? module.exports = {expand} if module?
We want to try a few approaches:
wiki-plugin-graph
in the end we may seek to combine these approaches back into a single graph plugin.
Here is a graph:
We've made progress manipulating svg with jquery, particularly getting it to parse svg from javascript strings.
There is currenlty no short term solution for interactive Fedwiki maps. Both standard HTML Image maps and SVG fails to work.
The HTML Sanitization that the About HTML Plugin performs removes the markup required to provide Internal Links.
A simple svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> <text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle"><![CDATA[410]]></text> </svg>
Example SVG with a simple link.
This is an interesting bug, that maybe could be put to good use :)
There is currenlty no short term solution for interactive Fedwiki maps. Both standard HTML Image maps and SVG fails to work.
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
Can be found here - dropboxusercontent
<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example link01 - a link on an ellipse </desc> <rect x=".01" y=".01" width="4.98" height="2.98" fill="none" stroke="blue" stroke-width=".03"/> <a xlink:href="http://www.w3.org"> <ellipse cx="2.5" cy="1.5" rx="2" ry="1" fill="red" /> </a> </svg>