yaml: focusOnBranch & automaticResize

eyssette · Oct 15, 2024 · b97b7a6 · b97b7a6
1 parent 80a5de3
commit b97b7a6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/src/lib/Mindmap.svelte b/src/lib/Mindmap.svelte
@@ -24,6 +24,8 @@
 	export let initialExpandLevel;
 	export let openLinksInNewTab;
 	export let curves;
+	export let focusOnBranch;
+	export let automaticResize;
 
 	let mindmap;
 	let w;
@@ -33,7 +35,6 @@
 	let nodeTitle;
 	let description;
 	$: description = $markdownSource;
-	let automaticResize = true;
 
 	onMount(() => {
 		const isMobile =
@@ -149,6 +150,11 @@
 
 	})
 
+	function trimFromLastDot(str) {
+		const lastDotIndex = str.lastIndexOf('.');
+		return lastDotIndex !== -1 ? str.substring(0, lastDotIndex) : str;
+}
+
 	function handleHide(event) {
 			let targetElement = event.target
 			const elementType = targetElement.tagName
@@ -162,15 +168,24 @@
 						debouncedCurvesToLines();
 					}
 				}
-				if (elementType =='circle' && event.altKey) {
-					const parentElement = targetElement.parentElement
-					const depth = parentElement.getAttribute('data-depth');
-					const unfoldedBranches = mindmap.querySelectorAll('g[data-depth="'+depth+'"]:not(.markmap-fold)')
+				if (elementType =='circle' && (event.altKey || focusOnBranch)) {
+					const parentElement = targetElement.parentElement;
+					const dataPathParentElement = parentElement.getAttribute('data-path');
+					const sameLevelBranches = trimFromLastDot(dataPathParentElement)
+					const unfoldedBranches = mindmap.querySelectorAll('g[data-path^="'+sameLevelBranches+'."]:not(.markmap-fold)')
+					const circleFill = targetElement.getAttribute('fill')
 					for (const branch of unfoldedBranches) {
 						const circle = branch.querySelector('circle');
-						if (circle) {circle.dispatchEvent(new MouseEvent("click"));}
+						if (circle) {
+							circle.dispatchEvent(new MouseEvent("click"));
+						}
 					}
+					if(!focusOnBranch || circleFill != 'rgb(255, 255, 255)') {
 						targetElement.dispatchEvent(new MouseEvent("click"));
+					}
+					if(automaticResize) {
+						mm.fit();
+					}
 					return
 				}
 				while (targetElement && targetElement.tagName !== 'DIV' && searchDivCount < 5) {

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -28,6 +28,8 @@
 	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"] span {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;}'
 	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;}'
+	let focusOnBranch = false;
+	let automaticResize = true;
 
 	onMount(async () => {
 		if ($url) {
@@ -123,6 +125,8 @@
 			yamlData = yaml.load($markdownSource.split("---")[1]);
 			style = yamlData.hasOwnProperty('style') ? yamlData.style : '';
 			openLinksInNewTab = yamlData.hasOwnProperty('openLinksInNewTab') ? yamlData.openLinksInNewTab : false;
+			focusOnBranch = yamlData.hasOwnProperty('focusOnBranch') ? yamlData.focusOnBranch : false;
+			automaticResize = yamlData.hasOwnProperty('automaticResize') ? yamlData.automaticResize : true;
 			curves = yamlData.hasOwnProperty('curves') ? yamlData.curves : true;
 			theme = yamlData.hasOwnProperty('theme') ? yamlData.theme : '';
 			if(theme == 'focus' || theme == 'nolines' || theme == 'black') {
@@ -165,9 +169,9 @@
 	<Editor />
 
 	{#if mindmapFromURL}
-		<Mindmap source={mindmapSource} maxWidth={maxWidthFromYAML} style={style} title={title} colorFreezeLevel={colorFreezeLevel} initialExpandLevel={initialExpandLevel} {openLinksInNewTab} {curves} />
+		<Mindmap source={mindmapSource} maxWidth={maxWidthFromYAML} style={style} title={title} colorFreezeLevel={colorFreezeLevel} initialExpandLevel={initialExpandLevel} {openLinksInNewTab} {curves} {focusOnBranch} {automaticResize} />
 	{:else}
-		<Mindmap source={mindmapSource} maxWidth={maxWidthFromYAML} style={style} title={title} colorFreezeLevel={colorFreezeLevel} initialExpandLevel={initialExpandLevel} {openLinksInNewTab} {curves} />
+		<Mindmap source={mindmapSource} maxWidth={maxWidthFromYAML} style={style} title={title} colorFreezeLevel={colorFreezeLevel} initialExpandLevel={initialExpandLevel} {openLinksInNewTab} {curves} {focusOnBranch} {automaticResize} />
 	{/if}
 
 </main>