85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
import React, {memo} from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {useStoreState} from 'easy-peasy';
|
|
import classnames from 'classnames';
|
|
|
|
const baseStyles = {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
};
|
|
|
|
const createGridLines = (width, height, xOffset, yOffset, gap) => {
|
|
const lineCountX = Math.ceil(width / gap) + 1;
|
|
const lineCountY = Math.ceil(height / gap) + 1;
|
|
|
|
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(' ');
|
|
};
|
|
|
|
const createGridDots = (width, height, xOffset, yOffset, gap, size) => {
|
|
const lineCountX = Math.ceil(width / gap) + 1;
|
|
const lineCountY = Math.ceil(height / gap) + 1;
|
|
|
|
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(' ');
|
|
};
|
|
|
|
const Grid = memo(({gap, color, size, style, className, gridStyle}) => {
|
|
const {
|
|
width,
|
|
height,
|
|
transform: [x, y, scale],
|
|
} = useStoreState(s => s);
|
|
|
|
const gridClasses = classnames('react-flow__grid', className);
|
|
const scaledGap = gap * scale;
|
|
|
|
const xOffset = x % scaledGap;
|
|
const yOffset = y % scaledGap;
|
|
const isLines = gridStyle === 'lines';
|
|
const path = isLines
|
|
? createGridLines(width, height, xOffset, yOffset, scaledGap)
|
|
: createGridDots(width, height, xOffset, yOffset, scaledGap, size);
|
|
|
|
const fill = isLines ? 'none' : color;
|
|
const stroke = isLines ? color : 'none';
|
|
|
|
return (
|
|
<svg width={width} height={height} style={{...baseStyles, ...style}} className={gridClasses}>
|
|
<path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
|
|
</svg>
|
|
);
|
|
});
|
|
|
|
Grid.displayName = 'Grid';
|
|
|
|
Grid.propTypes = {
|
|
gap: PropTypes.number,
|
|
color: PropTypes.string,
|
|
size: PropTypes.number,
|
|
style: PropTypes.object,
|
|
className: PropTypes.string,
|
|
gridStyle: PropTypes.oneOf(['lines', 'dots']),
|
|
};
|
|
|
|
Grid.defaultProps = {
|
|
gap: 24,
|
|
color: '#999',
|
|
size: .5,
|
|
style: {},
|
|
className: null,
|
|
gridStyle: 'dots',
|
|
};
|
|
|
|
export default Grid;
|