mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-26 12:01:16 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Raúl Gómez Morales 2024-10-18 09:26:13 +02:00 committed by GitHub
parent 8e5292cf6c
commit a13e142ee2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 56 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/editor-ui/src/components/canvas/Canvas.spec.ts
View file

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

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

@ -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

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

@ -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>