Merge branch 'main' of https://github.com/eyssette/myMarkmap

eyssette · Aug 20, 2024 · f1c2734 · f1c2734
2 parents 8754b2a + 02cc9b2
commit f1c2734
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 9 deletions.
diff --git a/src/lib/Menu.svelte b/src/lib/Menu.svelte
@@ -9,6 +9,9 @@
 	import url from './url.js';
 	
 	import { fade, fly } from 'svelte/transition';
+	import {
+		saveAs
+	} from 'file-saver-es';
 
 	let urlToShare;
 	let encodageHash;

diff --git a/src/lib/Mindmap.svelte b/src/lib/Mindmap.svelte
@@ -23,6 +23,7 @@
 	export let colorFreezeLevel;
 	export let initialExpandLevel;
 	export let openLinksInNewTab;
+	export let curves;
 
 	let mindmap;
 	let w;
@@ -32,12 +33,15 @@
 	let nodeTitle;
 	let description;
 	$: description = $markdownSource;
+	let automaticResize = true;
 
-	const isMobile =
+	onMount(() => {
+		const isMobile =
 	/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
 		navigator.userAgent
-	);
-	let automaticResize = isMobile ? false : true;
+		);
+		automaticResize = isMobile ? false : true;
+	})
 	let mm;
 
 	$: if (maxWidth<250) {
@@ -52,6 +56,35 @@
 	$: wValue.update(n => w)
 	$: hValue.update(n => h)
 
+	// Fonction debounce pour gérer l'update de la carte avec un délai
+	// fonction utilisée pour changer les lignes en courbe après affichage
+	// et afin d'éviter un clignotement à chaque touche appuyée
+	function debounce(func, wait) {
+		let timeout;
+		return function(...args) {
+			const later = () => {
+				clearTimeout(timeout);
+				func(...args);
+			};
+			clearTimeout(timeout);
+			timeout = setTimeout(later, wait);
+		};
+	}
+
+	function curvesToLines() {
+		if(mindmap && !curves) {
+			const paths = mindmap.querySelectorAll('path');
+			paths.forEach(path => {
+				const d = path.getAttribute('d');
+				if (d && d.includes('C')) {
+					const newD = d.replace('C','L')
+					path.setAttribute('d', newD);
+				}
+			});
+		}
+	}
+	const debouncedCurvesToLines = debounce(curvesToLines, 500);
+
 	afterUpdate(() => {
 		const transformer = new Transformer();
 
@@ -96,15 +129,24 @@
 		const styleElement = document.createElement("style")
 		styleElement.innerHTML=styleCSS;
 		mindmap.appendChild(styleElement);
+
 		mm=Markmap.create('#markmap', optionsFull, root);
 
+
+		if (curves === false) {
+			debouncedCurvesToLines();
+			document.body.addEventListener("keyup", debouncedCurvesToLines);
+		}
+
 		if(openLinksInNewTab) { 
 			const links = mindmap.querySelectorAll('a');
 			links.forEach(link => {
 				link.setAttribute('target', '_blank');
 			});
 		}
 
+		
+
 	})
 
 	function handleHide(event) {
@@ -114,6 +156,12 @@
 			if (elementType == 'SVG') {
 				return
 			} else {
+				if(elementType =='circle') {
+					// On gère à nouveau la conversion en lignes droites si besoin
+					if (curves === false) {
+						debouncedCurvesToLines();
+					}
+				}
 				if (elementType =='circle' && event.altKey) {
 					const parentElement = targetElement.parentElement
 					const depth = parentElement.getAttribute('data-depth');

diff --git a/src/lib/stores.js b/src/lib/stores.js
@@ -52,7 +52,7 @@ maxWidth: 600
 - \`_texte_\` : pour mettre en _italiques_
 - \`[lien](URL)\` : pour insérer un [lien](https://eyssette.forge.apps.education.fr/)
 - \`![](URL)\` : pour insérer une image
-	- \`![h-25](URL)\` : pour spécifier la hauteur  \\\\de l'image (de h-25, h-50 … à h-200)
+	- \`![h-25](URL)\` : pour spécifier \\\\la hauteur de l'image (en pixels)
 - \`\`\` \`code\` \`\`\` : Pour insérer du \`code\` 
 - \`==texte==\`: Pour surligner du ==texte==
 - \`++texte++\`: Pour souligner du ++texte++
@@ -78,6 +78,11 @@ maxWidth: 600
 	- \`\`\`colorFreezeLevel: 2\`\`\`  \\\\ (pour que chaque branche \\\\ait sa propre couleur)
 - Pour ajouter des styles \\\\CSS spécifiques
 	- \`\`\`style: strong{color:red}\`\`\`
+- Pour ajouter un \\\\thème spécifique
+	- \`\`\`theme: focus\`\`\`
+  - Thèmes disponibles : \\\\ \`focus\`, \`nolines\` et \`black\`
+- Pour avoir des lignes droites \\\\plutôt que des courbes
+	- \`\`\`curves: false\`\`\`
 - Pour ajouter un titre
 	- \`\`\`title: Mon titre\`\`\`
 - Pour masquer par défaut \\\\les sous-branches à partir\\\\ d'un certain niveau

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -22,7 +22,12 @@
 	let colorFreezeLevel = 0;
 	let initialExpandLevel = -1;
 	let openLinksInNewTab = false;
+	let theme = '';
+	let curves = true;
 	const corsProxy = "https://corsproxy.io/?"
+	const focusStyle = 'line, path, circle{stroke-width:3} g[data-depth="0"] circle, g[data-depth="1"] circle{r:7} g[data-depth="2"] circle{r:3} circle {r:1} g[data-depth="0"] line, g[data-depth="1"] line, path[data-depth="1"], circle{stroke-width:10} g[data-depth="0"] circle {fill:rgb(31, 119, 180)} g[data-depth="2"] line,  path[data-depth="2"], g[data-depth="1"] circle{stroke-width:6} div{padding-bottom:0.2em!important; padding-top:0.2em; font-family:Arial} g[data-depth="0"] div{border:2px solid rgb(31, 119, 180);border-radius:5px; padding-left:0.5em; margin-left:-1.3em; padding-top:0.35em}  g[data-depth="1"] div{background-color:#EEE; padding:0.3em 0.5em; margin-top:-0.35em; margin-left:-1em; border-radius:5px} div{font-family:Arial, sans-serif;} g[data-depth="2"] div{margin-left:-1em;} img{height:4em; display:block;} g[data-depth="1"] span{padding:0!important}'
+	const nolinesStyle = 'line {stroke:transparent} g[data-depth="0"] line{stroke:#002D62; stroke-width:4} g div{margin-top:10px;} g[data-depth="0"] div{border:#002D62 2px solid; margin-left:-1.4em; background-color:white; margin-top:3px; padding:0.5em; text-align:center; border-radius:7px} g[data-depth="0"] span {display:inline!important;} circle{r:4} g[data-depth="0"] circle{r:0} circle:not([fill="rgb(255, 255, 255)"]){stroke:transparent} path{stroke-width:2.5;} path[data-depth="0"],path[data-depth="1"]{stroke-width:4;}'
+	const blackStyle = 'line, path, circle{stroke:black} g[data-depth="0"] line{stroke-width:8} g[data-depth="1"] line, path[data-depth="1"]{stroke-width:4} g[data-depth="2"] line, path[data-depth="2"]{stroke-width:2} circle{r:4} g[data-depth="0"] circle{r:6} circle:not([fill="rgb(255, 255, 255)"]){fill:black; stroke:transparent;}'
 
 	onMount(async () => {
 		if ($url) {
@@ -108,17 +113,41 @@
 		md = md.replace(/@accolade_D/g, '}');
 		// Espaces insécables
 		md = md.replace(/ /g, '&nbsp;');
+		// Gestion des images : définition possible de la hauteur dans le alt
+		md = md.replace(/\!\[h-(.*?)\]\((.*?)\)/g, '<img src="$2" height=$1 />')
 		return md;
 	}
 
 	$: if ($markdownSource.split("---").length > 2) {
 		try {
 			yamlData = yaml.load($markdownSource.split("---")[1]);
-			maxWidthFromYAML = yamlData.hasOwnProperty('maxWidth') ? yamlData.maxWidth : 500;
 			style = yamlData.hasOwnProperty('style') ? yamlData.style : '';
-			colorFreezeLevel = yamlData.hasOwnProperty('colorFreezeLevel') ? yamlData.colorFreezeLevel : 0;
-			initialExpandLevel = yamlData.hasOwnProperty('initialExpandLevel') ? yamlData.initialExpandLevel : -1;
 			openLinksInNewTab = yamlData.hasOwnProperty('openLinksInNewTab') ? yamlData.openLinksInNewTab : false;
+			curves = yamlData.hasOwnProperty('curves') ? yamlData.curves : true;
+			theme = yamlData.hasOwnProperty('theme') ? yamlData.theme : '';
+			if(theme == 'focus' || theme == 'nolines' || theme == 'black') {
+				if(theme == 'focus' || theme == 'nolines') {
+					maxWidthFromYAML = yamlData.hasOwnProperty('maxWidth') ? yamlData.maxWidth : 250;
+					initialExpandLevel = yamlData.hasOwnProperty('initialExpandLevel') ? yamlData.initialExpandLevel : 2;
+					colorFreezeLevel = yamlData.hasOwnProperty('colorFreezeLevel') ? yamlData.colorFreezeLevel : 2;
+				}
+				if(theme == 'focus') {
+					style = focusStyle + ' ' + style;
+				}
+				if(theme == 'nolines') {
+					style = nolinesStyle + ' ' + style;
+				}
+				if(theme =='black') {
+					style = blackStyle + ' ' + style;
+					curves = yamlData.hasOwnProperty('curves') ? yamlData.curves : false;
+				}
+			} else {
+				maxWidthFromYAML = yamlData.hasOwnProperty('maxWidth') ? yamlData.maxWidth : 500;
+				initialExpandLevel = yamlData.hasOwnProperty('initialExpandLevel') ? yamlData.initialExpandLevel : -1;
+				colorFreezeLevel = yamlData.hasOwnProperty('colorFreezeLevel') ? yamlData.colorFreezeLevel : 0;
+				curves = yamlData.hasOwnProperty('curves') ? yamlData.curves : true;
+				style = style;
+			}
 		} catch (e) {
 
 		}
@@ -136,9 +165,9 @@
 	<Editor />
 
 	{#if mindmapFromURL}
-		<Mindmap source={mindmapSource} maxWidth={maxWidthFromYAML} style={style} title={title} colorFreezeLevel={colorFreezeLevel} initialExpandLevel={initialExpandLevel} {openLinksInNewTab} />
+		<Mindmap source={mindmapSource} maxWidth={maxWidthFromYAML} style={style} title={title} colorFreezeLevel={colorFreezeLevel} initialExpandLevel={initialExpandLevel} {openLinksInNewTab} {curves} />
 	{:else}
-		<Mindmap source={mindmapSource} maxWidth={maxWidthFromYAML} style={style} title={title} colorFreezeLevel={colorFreezeLevel} initialExpandLevel={initialExpandLevel} {openLinksInNewTab} />
+		<Mindmap source={mindmapSource} maxWidth={maxWidthFromYAML} style={style} title={title} colorFreezeLevel={colorFreezeLevel} initialExpandLevel={initialExpandLevel} {openLinksInNewTab} {curves} />
 	{/if}
 
 </main>