mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™ 2024-12-06 17:09:49 +01:00 committed by Tomi Turtiainen
parent f18263bc8f
commit 36eb25c9f5
3 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/editor-ui/src/components/canvas/Canvas.test.ts
View file

@ -200,13 +200,18 @@ describe('Canvas', () => {
describe('background', () => { describe('background', () => {
it('should render default background', () => { it('should render default background', () => {
const { container } = renderComponent(); 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', () => { it('should render striped background', () => {
const { container } = renderComponent({ props: { readOnly: true } }); const { container } = renderComponent({ props: { readOnly: true } });
expect(container.querySelector('#pattern-canvas')).not.toBeInTheDocument(); const patternCanvas = container.querySelector('#pattern-canvas');
expect(container.querySelector('#diagonalHatch')).toBeInTheDocument(); expect(patternCanvas).toBeInTheDocument();
expect(patternCanvas?.innerHTML).toContain('<path');
expect(patternCanvas?.innerHTML).not.toContain('<circle');
}); });
}); });
}); });

9
packages/editor-ui/src/components/canvas/Canvas.vue
View file

@ -686,8 +686,13 @@ provide(CanvasKey, {
<CanvasArrowHeadMarker :id="arrowHeadMarkerId" /> <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> <template v-if="readOnly" #pattern-container="patternProps">
<CanvasBackgroundStripedPattern :x="viewport.x" :y="viewport.y" :zoom="viewport.zoom" /> <CanvasBackgroundStripedPattern
:id="patternProps.id"
:x="viewport.x"
:y="viewport.y"
:zoom="viewport.zoom"
/>
</template> </template>
</Background> </Background>

4
packages/editor-ui/src/components/canvas/elements/CanvasBackgroundStripedPattern.vue
View file

@ -5,6 +5,7 @@
*/ */
import { computed } from 'vue'; import { computed } from 'vue';
const props = defineProps<{ const props = defineProps<{
id: string;
x: number; x: number;
y: number; y: number;
zoom: number; zoom: number;
@ -16,7 +17,7 @@ const patternOffset = computed(() => scaledGap.value / 2);
<template> <template>
<pattern <pattern
id="diagonalHatch" :id="id"
patternUnits="userSpaceOnUse" patternUnits="userSpaceOnUse"
:x="x % scaledGap" :x="x % scaledGap"
:y="y % 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" /> <path :d="`M0 ${scaledGap / 2} H${scaledGap}`" :stroke-width="scaledGap / 2" />
</pattern> </pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)" />
</template> </template>
<style scoped> <style scoped>