fix(editor): Add striped background to readonly canvas (no-changelog) (#11297)

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();
+		});
+	});
 });

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

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>