From a13e142ee2907e0a23d80be6e45cd16a086d899d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Fri, 18 Oct 2024 09:26:13 +0200
Subject: [PATCH] fix(editor): Add striped background to readonly canvas
 (no-changelog) (#11297)

---
 .../src/components/canvas/Canvas.spec.ts      | 13 +++++++
 .../src/components/canvas/Canvas.vue          |  8 ++++-
 .../CanvasBackgroundStripedPattern.vue        | 36 +++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 packages/editor-ui/src/components/canvas/elements/CanvasBackgroundStripedPattern.vue

diff --git a/packages/editor-ui/src/components/canvas/Canvas.spec.ts b/packages/editor-ui/src/components/canvas/Canvas.spec.ts
index 5ab4c6e96e..8e53425532 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.spec.ts
+++ b/packages/editor-ui/src/components/canvas/Canvas.spec.ts
@@ -207,4 +207,17 @@ describe('Canvas', () => {
 			await waitFor(() => expect(getByTestId('canvas-minimap')).not.toBeVisible());
 		});
 	});
+
+	describe('background', () => {
+		it('should render default background', () => {
+			const { container } = renderComponent();
+			expect(container.querySelector('#pattern-canvas')).toBeInTheDocument();
+		});
+
+		it('should render striped background', () => {
+			const { container } = renderComponent({ props: { readOnly: true } });
+			expect(container.querySelector('#pattern-canvas')).not.toBeInTheDocument();
+			expect(container.querySelector('#diagonalHatch')).toBeInTheDocument();
+		});
+	});
 });
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 521406ade5..7037b0a580 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -32,6 +32,7 @@ import { CanvasKey } from '@/constants';
 import { onKeyDown, onKeyUp, useDebounceFn } from '@vueuse/core';
 import CanvasArrowHeadMarker from './elements/edges/CanvasArrowHeadMarker.vue';
 import { CanvasNodeRenderType } from '@/types';
+import CanvasBackgroundStripedPattern from './elements/CanvasBackgroundStripedPattern.vue';
 
 const $style = useCssModule();
 
@@ -110,6 +111,7 @@ const {
 	onPaneReady,
 	findNode,
 	onNodesInitialized,
+	viewport,
 } = useVueFlow({ id: props.id, deleteKeyCode: null });
 
 const isPaneReady = ref(false);
@@ -562,7 +564,11 @@ provide(CanvasKey, {
 
 		<CanvasArrowHeadMarker :id="arrowHeadMarkerId" />
 
-		<Background data-test-id="canvas-background" pattern-color="#aaa" :gap="GRID_SIZE" />
+		<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>
+		</Background>
 
 		<Transition name="minimap">
 			<MiniMap
diff --git a/packages/editor-ui/src/components/canvas/elements/CanvasBackgroundStripedPattern.vue b/packages/editor-ui/src/components/canvas/elements/CanvasBackgroundStripedPattern.vue
new file mode 100644
index 0000000000..d72d1f5365
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/CanvasBackgroundStripedPattern.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/* eslint-disable vue/no-multiple-template-root */
+/**
+ * @see https://github.com/bcakmakoglu/vue-flow/blob/master/packages/background/src/Background.vue
+ */
+import { computed } from 'vue';
+const props = defineProps<{
+	x: number;
+	y: number;
+	zoom: number;
+}>();
+
+const scaledGap = computed(() => 20 * props.zoom || 1);
+const patternOffset = computed(() => scaledGap.value / 2);
+</script>
+
+<template>
+	<pattern
+		id="diagonalHatch"
+		patternUnits="userSpaceOnUse"
+		:x="x % scaledGap"
+		:y="y % scaledGap"
+		:width="scaledGap"
+		:height="scaledGap"
+		:patternTransform="`rotate(135) translate(-${patternOffset},-${patternOffset})`"
+	>
+		<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>
+path {
+	stroke: var(--color-canvas-read-only-line);
+}
+</style>