fix(editor): Fix svg background pattern rendering on safari (#12079)

n8n-io · Dec 10, 2024 · 36eb25c · 36eb25c
1 parent f18263b
commit 36eb25c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/packages/editor-ui/src/components/canvas/Canvas.test.ts b/packages/editor-ui/src/components/canvas/Canvas.test.ts
@@ -200,13 +200,18 @@ describe('Canvas', () => {
 	describe('background', () => {
 		it('should render default background', () => {
 			const { container } = renderComponent();
-			expect(container.querySelector('#pattern-canvas')).toBeInTheDocument();
+			const patternCanvas = container.querySelector('#pattern-canvas');
+			expect(patternCanvas).toBeInTheDocument();
+			expect(patternCanvas?.innerHTML).toContain('<circle');
+			expect(patternCanvas?.innerHTML).not.toContain('<path');
 		});
 
 		it('should render striped background', () => {
 			const { container } = renderComponent({ props: { readOnly: true } });
-			expect(container.querySelector('#pattern-canvas')).not.toBeInTheDocument();
-			expect(container.querySelector('#diagonalHatch')).toBeInTheDocument();
+			const patternCanvas = container.querySelector('#pattern-canvas');
+			expect(patternCanvas).toBeInTheDocument();
+			expect(patternCanvas?.innerHTML).toContain('<path');
+			expect(patternCanvas?.innerHTML).not.toContain('<circle');
 		});
 	});
 });
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -686,8 +686,13 @@ provide(CanvasKey, {
 		<CanvasArrowHeadMarker :id="arrowHeadMarkerId" />
 
 		<Background data-test-id="canvas-background" pattern-color="#aaa" :gap="GRID_SIZE">
-			<template v-if="readOnly" #pattern-container>
-				<CanvasBackgroundStripedPattern :x="viewport.x" :y="viewport.y" :zoom="viewport.zoom" />
+			<template v-if="readOnly" #pattern-container="patternProps">
+				<CanvasBackgroundStripedPattern
+					:id="patternProps.id"
+					:x="viewport.x"
+					:y="viewport.y"
+					:zoom="viewport.zoom"
+				/>
 			</template>
 		</Background>
 

diff --git a/packages/editor-ui/src/components/canvas/elements/CanvasBackgroundStripedPattern.vue b/packages/editor-ui/src/components/canvas/elements/CanvasBackgroundStripedPattern.vue
@@ -5,6 +5,7 @@
  */
 import { computed } from 'vue';
 const props = defineProps<{
+	id: string;
 	x: number;
 	y: number;
 	zoom: number;
@@ -16,7 +17,7 @@ const patternOffset = computed(() => scaledGap.value / 2);
 
 <template>
 	<pattern
-		id="diagonalHatch"
+		:id="id"
 		patternUnits="userSpaceOnUse"
 		:x="x % scaledGap"
 		:y="y % scaledGap"
@@ -26,7 +27,6 @@ const patternOffset = computed(() => scaledGap.value / 2);
 	>
 		<path :d="`M0 ${scaledGap / 2} H${scaledGap}`" :stroke-width="scaledGap / 2" />
 	</pattern>
-	<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)" />
 </template>
 
 <style scoped>