From e7a80d1e4e6fab50f27bd4c6000c6ea6e8c93b43 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 15 Aug 2024 13:18:04 +0300
Subject: [PATCH] feat: Improve minimap design and position in new canvas
 (no-changelog) (#10429)

---
 .../src/components/canvas/Canvas.vue          | 19 ++++++++++++++++++-
 .../src/styles/plugins/_vueflow.scss          | 13 +++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index c5995c5cd6bf8..877bdf0b643bf 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -328,6 +328,14 @@ function onContextMenuAction(action: ContextMenuAction, nodeIds: string[]) {
 	}
 }
 
+/**
+ * Minimap
+ */
+
+function minimapNodeClassnameFn(node: CanvasNode) {
+	return `minimap-node-${node.data?.render.type.replace(/\./g, '-') ?? 'default'}`;
+}
+
 /**
  * Lifecycle
  */
@@ -407,7 +415,16 @@ watch(() => props.readOnly, setReadonly, {
 
 		<Background data-test-id="canvas-background" pattern-color="#aaa" :gap="GRID_SIZE" />
 
-		<MiniMap data-test-id="canvas-minimap" pannable />
+		<MiniMap
+			data-test-id="canvas-minimap"
+			aria-label="n8n Minimap"
+			:height="120"
+			:width="200"
+			:position="PanelPosition.BottomLeft"
+			pannable
+			zoomable
+			:node-class-name="minimapNodeClassnameFn"
+		/>
 
 		<Controls
 			data-test-id="canvas-controls"
diff --git a/packages/editor-ui/src/styles/plugins/_vueflow.scss b/packages/editor-ui/src/styles/plugins/_vueflow.scss
index b10e9f4f9ddb6..86133f44f3a0f 100644
--- a/packages/editor-ui/src/styles/plugins/_vueflow.scss
+++ b/packages/editor-ui/src/styles/plugins/_vueflow.scss
@@ -5,3 +5,16 @@
 .vue-flow__resize-control.handle {
 	background-color: transparent;
 }
+
+.vue-flow__minimap {
+	margin-bottom: calc(48px + 2 * var(--spacing-xs));
+
+	.minimap-node-default {
+		fill: var(--color-foreground-dark);
+	}
+
+	.minimap-node-n8n-nodes-base-stickyNote {
+		opacity: 0.05;
+		fill: var(--color-background-dark);
+	}
+}