feat: Improve minimap design and position in new canvas (no-changelog) (

#10429)
n8n-io · Aug 26, 2024 · e7a80d1 · e7a80d1
1 parent 4d9ad2f
commit e7a80d1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git 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
@@ -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);
+	}
+}