From 596f22103c01e14063ebb2388c4dabf4714d37c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Fri, 6 Dec 2024 17:09:49 +0100
Subject: [PATCH] fix(editor): Fix svg background pattern rendering on safari
 (#12079)

---
 .../editor-ui/src/components/canvas/Canvas.test.ts    | 11 ++++++++---
 packages/editor-ui/src/components/canvas/Canvas.vue   |  9 +++++++--
 .../elements/CanvasBackgroundStripedPattern.vue       |  4 ++--
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.test.ts b/packages/editor-ui/src/components/canvas/Canvas.test.ts
index afeb69479c0cd..bf7dae71a7cd1 100644
--- 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
index e20a1b510c406..6826259b7ee83 100644
--- 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
index d72d1f53652bb..b15d4b67d2fca 100644
--- 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>