Plugin mindmap

src/marknotes/plugins/markdown/mindmap.php

@@ -0,0 +1,89 @@
+<?php
+/**
+ * Parse the markdown content and replace emoji's thanks to
+ * the LitEmoji library
+ * @link https://github.com/elvanto/litemoji
+ */
+
+namespace MarkNotes\Plugins\Markdown;
+
+defined('_MARKNOTES') or die('No direct access allowed');
+
+class MindMap extends \MarkNotes\Plugins\Markdown\Plugin
+{
+	protected static $me = __CLASS__;
+	protected static $json_settings = 'plugins.markdown.mindmap';
+	protected static $json_options = '';
+
+	public static function readMD(array &$params = []) : bool
+	{
+		if (trim($params['markdown']) === '') {
+			return true;
+		}
+
+		$markdown = $params['markdown'];
+
+		if (strpos($markdown, '%MINDMAP_START%') !== false) {
+			$pattern = '/\%MINDMAP_START\%/';
+			preg_match($pattern, $markdown, $matches, PREG_OFFSET_CAPTURE);
+
+			// Get everything between the %MINDMAP_START% tag and
+			// %MINDMAP_END%
+			$startLen = strlen($matches[0][0]);
+			$startPos = $matches[0][1];
+
+			$pattern = '/\%MINDMAP_END\%/';
+			preg_match($pattern, $markdown, $matches, PREG_OFFSET_CAPTURE);
+
+			$endLen = strlen($matches[0][0]);
+			$endPos = $matches[0][1];
+
+			// Get %MINDMAP_START%(text)%MINDMAP_END%
+			$original = substr($markdown, $startPos, $endPos - $startPos + $endLen);
+
+			// Retrieve only the data
+			$len = $endPos - $startPos;
+			$items = substr($markdown, $startPos + $startLen, $endPos - $startPos - $startLen);
+
+			$items = str_replace(["\r\n", "\n", "\r"], PHP_EOL, $items);
+			//$items = str_replace("\t", '   ', $items);
+
+			$maps = '';
+
+			$arr = explode(PHP_EOL, $items);
+
+			// Process line by line and remove the bullet character
+			// (i.e. replace "* Item" by "Item")
+			foreach ($arr as $line) {
+				$line = str_replace(["\r\n", "\n", "\r"], '', $line);
+				$line = preg_replace("/\t[\*\ \-]/", "\t", $line);
+				$maps .= ltrim($line, '* -') . "\r\n";
+			}
+			$maps = '<pre style="display:none" class="MN_mindmap">' . $maps . '</pre>';
+
+			$markdown = str_replace($original, $maps, $markdown);
+
+			$params['markdown'] = $markdown;
+		}
+
+		return true;
+	}
+
+	/**
+	 * Verify if the plugin is well needed and thus have a reason
+	 * to be fired
+	 */
+	final protected static function canRun() : bool
+	{
+		$bCanRun = parent::canRun();
+
+		if ($bCanRun) {
+			$aeFiles = \MarkNotes\Files::getInstance();
+			// Be sure the library is there
+			$lib = __DIR__ . '/emoji/libs/litemoji/LitEmoji.php';
+			$bCanRun = $aeFiles->exists($lib);
+		}
+
+		return $bCanRun;
+	}
+}

src/marknotes/plugins/page/html/mindmap.php

@@ -0,0 +1,65 @@
+<?php
+/**
+ * Mindmap
+ * @link https://github.com/jyruzicka/dugong
+ */
+
+namespace MarkNotes\Plugins\Page\HTML;
+
+defined('_MARKNOTES') or die('No direct access allowed');
+
+class MindMap extends \MarkNotes\Plugins\Page\HTML\Plugin
+{
+	protected static $me = __CLASS__;
+	protected static $json_settings = 'plugins.page.html.mindmap';
+	protected static $json_options = 'plugins.options.page.html.mindmap';
+
+	/**
+	 * Provide additionnal javascript
+	 */
+	public static function addJS(&$js = null) : bool
+	{
+		$aeFunctions = \MarkNotes\Functions::getInstance();
+
+		$url = rtrim($aeFunctions->getCurrentURL(), '/') . '/';
+		$url .= 'marknotes/plugins/page/html/mindmap/';
+
+		$script = '<script ' .
+			'src="' . $url . 'assets/dugong-min.js">' .
+			"</script>\n" .
+			"<script>\n" .
+			"Dugong.populate('MN_mindmap');\n" .
+			"$('.MN_mindmap').show();\n" .
+			"</script>\n";
+
+		$js .= $aeFunctions->addJavascriptInline($script);
+
+		return true;
+	}
+
+	/**
+	 * Provide additionnal stylesheets
+	 */
+	public static function addCSS(&$css = null) : bool
+	{
+		$aeFunctions = \MarkNotes\Functions::getInstance();
+
+		$url = rtrim($aeFunctions->getCurrentURL(), '/') . '/';
+		$url .= 'marknotes/plugins/page/html/mindmap/';
+
+		$script = '<link media="screen" rel="stylesheet" type="text/css" ' .
+			'href="' . $url . "assets/dugong.css\" />\n";
+
+		$css .= $aeFunctions->addStyleInline($script);
+
+		return true;
+	}
+
+	/**
+	 * Add/modify the HTML content
+	 */
+	public static function doIt(&$html = null) : bool
+	{
+		return true;
+	}
+}

src/marknotes/plugins/page/html/mindmap/assets/README.md

@@ -0,0 +1,55 @@
+# Dugong
+
+## Kind of ugly mind-mapping in javascript and html
+
+Dugong is a tiny tiny (tiny) library in javascript to turn a plaintext indented list (text outline) into a shiny SVG-type mindmap, right in your browser.
+
+![](preview.png)
+
+## Installation
+
+Download dugong.js or dugong.js.min from this repo. Include it in the relevant web page by the normal means.
+
+## Usage
+
+Include all of your dugong lists in divs with a given class - for example, if you want to use the class "dugong-src":
+
+```html
+<div class="dugong-src">
+Root node
+	Child node
+	Another child
+		Some grandchildren
+		Go here
+	A third child
+		And another grandchild
+</div>
+```
+
+Now, somewhere in your code, call `Dugong.populate(className)`:
+
+```html
+<script>
+Dugong.populate("dugong-src");
+</script>
+```
+
+## Styling
+
+You can style dugong mindmaps using CSS. Every dugong mindmap is stored inside an `svg` with the class `dugong`. Connectors are elements of tag name `path`. Nodes are made of a `rect` and `foreignObject` (which in turn contains a `div`), both grouped together within a `g` element. Every `g` and `path` node also has a class indicating its "generation": the root node is class `gen-0`, first children and their connectors are `gen-1`, etc. etc.
+
+See `dugong.css` for a basic stylesheet.
+
+## Customizing
+
+You can customize dugong.js by altering a variety of proprties before calling `Dugong.populate()`. These include:
+
+* `Dugong.stalkLength`: Distance between nodes [default: 200]
+* `Dugong.boxMinHeight`: Minimum height of each node box [default: 50]
+* `Dugong.boxRatio`: Width-to-height ratio of node boxes [default: 2]
+* `Dugong.canvasMargin`: Margin to leave around the outside of the map [default: 100]
+* `Dugong.boxMargin`: Margin to leave between each node box and the text it contains [default: 10]
+
+## Hacking
+
+Dugong is released using the MIT license, so feel free to modify as appropriate for use in your projects should you wish.

src/marknotes/plugins/page/html/mindmap/assets/dugong.css

@@ -0,0 +1,15 @@
+svg { text-align: center; }
+svg line { stroke-width: 2; }
+
+svg rect {
+	stroke-width: 2;
+	fill: #FFF;
+	stroke: #000;
+}
+
+.gen-0 rect {stroke-width: 4; }
+
+.dugong {
+	width: 100%;
+	max-height: 800px;
+}

src/settings.json.dist

@@ -473,6 +473,11 @@
 					"not_if_task": ["task.timeline.get"],
 					"only_if_task": ["main", "interface", "task.export.html"]
 				},
+				"mindmap": {
+					"enabled": 1,
+					"not_if_task": ["task.timeline.get"],
+					"only_if_task": ["main", "interface", "task.export.html"]
+				},
 				"new_window": {
 					"enabled": 1,
 					"not_if_task": [],
@@ -611,6 +616,11 @@
 				"not_if_task": [],
 				"only_if_task": ["main", "interface", "task.export.html", "task.export.docx"]
 			},
+			"mindmap": {
+				"enabled": 1,
+				"not_if_task": ["task.timeline.get"],
+				"only_if_task": ["main", "interface", "task.export.html"]
+			},
 			"yaml": {
 				"enabled": 1,
 				"not_if_task": ["task.search.search", "task.timeline.get"],