From 0d2bdf7ce8ffd56dffbf4569f75b27c29fe41339 Mon Sep 17 00:00:00 2001 From: moklick Date: Sat, 25 Jul 2020 15:06:58 +0200 Subject: [PATCH 1/2] refactor(background): use repeating inline svg as bg pattern #356 --- .../Background/index.tsx | 19 +++++---- .../Background/style.css | 2 + src/additional-components/Background/utils.ts | 40 ++++--------------- 3 files changed, 22 insertions(+), 39 deletions(-) diff --git a/src/additional-components/Background/index.tsx b/src/additional-components/Background/index.tsx index 86a24a09..685446e6 100644 --- a/src/additional-components/Background/index.tsx +++ b/src/additional-components/Background/index.tsx @@ -21,8 +21,6 @@ const defaultColors = { const Background = memo( ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style, className }: BackgroundProps) => { - const width = useStoreState((s) => s.width); - const height = useStoreState((s) => s.height); const [x, y, scale] = useStoreState((s) => s.transform); const bgClasses = cc(['react-flow__background', className]); @@ -32,15 +30,22 @@ const Background = memo( const yOffset = y % scaledGap; const isLines = variant === BackgroundVariant.Lines; const path = isLines - ? createGridLinesPath(width, height, xOffset, yOffset, scaledGap) - : createGridDotsPath(width, height, xOffset, yOffset, scaledGap, size); + ? createGridLinesPath(xOffset, yOffset, scaledGap) + : createGridDotsPath(xOffset, yOffset, scaledGap, size); const fill = isLines ? 'none' : bgColor; const stroke = isLines ? bgColor : 'none'; + const bg = ``; + return ( - - - +
); } ); diff --git a/src/additional-components/Background/style.css b/src/additional-components/Background/style.css index b96234b9..9343180d 100644 --- a/src/additional-components/Background/style.css +++ b/src/additional-components/Background/style.css @@ -2,4 +2,6 @@ position: absolute; top: 0; left: 0; + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/src/additional-components/Background/utils.ts b/src/additional-components/Background/utils.ts index cf938870..c9b33e3a 100644 --- a/src/additional-components/Background/utils.ts +++ b/src/additional-components/Background/utils.ts @@ -1,37 +1,13 @@ -export const createGridLinesPath = ( - width: number, - height: number, - xOffset: number, - yOffset: number, - gap: number -): string => { - const lineCountX = Math.ceil(width / gap) + 1; - const lineCountY = Math.ceil(height / gap) + 1; +export const createGridLinesPath = (xOffset: number, yOffset: number, scaledGap: number): string => { + const x = xOffset < 0 ? scaledGap + xOffset : xOffset; + const y = yOffset < 0 ? scaledGap + yOffset : yOffset; - const xValues = Array.from({ length: lineCountX }, (_, i) => `M${i * gap + xOffset} 0 V${height}`); - const yValues = Array.from({ length: lineCountY }, (_, i) => `M0 ${i * gap + yOffset} H${width}`); - - return [...xValues, ...yValues].join(' '); + return `M${x} 0 V${scaledGap} M0 ${y} H${scaledGap}`; }; -export const createGridDotsPath = ( - width: number, - height: number, - xOffset: number, - yOffset: number, - gap: number, - size: number -): string => { - const lineCountX = Math.ceil(width / gap) + 1; - const lineCountY = Math.ceil(height / gap) + 1; +export const createGridDotsPath = (xOffset: number, yOffset: number, scaledGap: number, size: number): string => { + const x = xOffset < 0 ? scaledGap + xOffset : xOffset; + const y = yOffset < 0 ? scaledGap + yOffset : yOffset; - const values = Array.from({ length: lineCountX }, (_, col) => { - const x = col * gap + xOffset; - return Array.from({ length: lineCountY }, (_, row) => { - const y = row * gap + yOffset; - return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`; - }).join(' '); - }); - - return values.join(' '); + return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`; }; From cdfc3119426dff5942d9c68d61330759ffd026ba Mon Sep 17 00:00:00 2001 From: moklick Date: Sun, 26 Jul 2020 17:12:50 +0200 Subject: [PATCH 2/2] refactor(background): use background position for positioning dots and lines #356 --- cypress/integration/flow/basic.spec.js | 3 --- example/src/Overview/index.js | 2 +- .../Background/index.tsx | 25 ++++++++++--------- src/additional-components/Background/utils.ts | 14 +++-------- 4 files changed, 18 insertions(+), 26 deletions(-) diff --git a/cypress/integration/flow/basic.spec.js b/cypress/integration/flow/basic.spec.js index 121896d3..39209e42 100644 --- a/cypress/integration/flow/basic.spec.js +++ b/cypress/integration/flow/basic.spec.js @@ -13,9 +13,6 @@ describe('Basic Flow Rendering', () => { it('renders a grid', () => { cy.get('.react-flow__background'); - - const gridStroke = Cypress.$('.react-flow__background path').attr('stroke'); - expect(gridStroke).to.equal('#eee'); }); it('selects a node by click', () => { diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js index d2247c38..c7e3c64f 100644 --- a/example/src/Overview/index.js +++ b/example/src/Overview/index.js @@ -136,7 +136,7 @@ const OverviewFlow = () => { }} /> - + ); }; diff --git a/src/additional-components/Background/index.tsx b/src/additional-components/Background/index.tsx index 685446e6..c655b544 100644 --- a/src/additional-components/Background/index.tsx +++ b/src/additional-components/Background/index.tsx @@ -1,4 +1,4 @@ -import React, { memo, HTMLAttributes } from 'react'; +import React, { memo, useMemo, HTMLAttributes } from 'react'; import cc from 'classcat'; import { useStoreState } from '../../store/hooks'; @@ -24,26 +24,27 @@ const Background = memo( const [x, y, scale] = useStoreState((s) => s.transform); const bgClasses = cc(['react-flow__background', className]); - const bgColor = color ? color : defaultColors[variant]; const scaledGap = gap * scale; const xOffset = x % scaledGap; const yOffset = y % scaledGap; - const isLines = variant === BackgroundVariant.Lines; - const path = isLines - ? createGridLinesPath(xOffset, yOffset, scaledGap) - : createGridDotsPath(xOffset, yOffset, scaledGap, size); - const fill = isLines ? 'none' : bgColor; - const stroke = isLines ? bgColor : 'none'; - const bg = ``; + const bgSvgTile = useMemo(() => { + const isLines = variant === BackgroundVariant.Lines; + const bgColor = color ? color : defaultColors[variant]; + const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor); + + return encodeURIComponent( + `${path}` + ); + }, [variant, scaledGap, size, color]); return (
); diff --git a/src/additional-components/Background/utils.ts b/src/additional-components/Background/utils.ts index c9b33e3a..c0b6d315 100644 --- a/src/additional-components/Background/utils.ts +++ b/src/additional-components/Background/utils.ts @@ -1,13 +1,7 @@ -export const createGridLinesPath = (xOffset: number, yOffset: number, scaledGap: number): string => { - const x = xOffset < 0 ? scaledGap + xOffset : xOffset; - const y = yOffset < 0 ? scaledGap + yOffset : yOffset; - - return `M${x} 0 V${scaledGap} M0 ${y} H${scaledGap}`; +export const createGridLinesPath = (scaledGap: number, strokeWidth: number, stroke: string): string => { + return ``; }; -export const createGridDotsPath = (xOffset: number, yOffset: number, scaledGap: number, size: number): string => { - const x = xOffset < 0 ? scaledGap + xOffset : xOffset; - const y = yOffset < 0 ? scaledGap + yOffset : yOffset; - - return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`; +export const createGridDotsPath = (size: number, fill: string): string => { + return ``; };