Develop (#35)

* refactor(ts): add ReactFlowProps * Refactor/grid.tsx (#24) * chore(deps-dev): bump start-server-and-test from 1.10.4 to 1.10.5 Bumps [start-server-and-test](https://github.com/bahmutov/start-server-and-test) from 1.10.4 to 1.10.5. - [Release notes](https://github.com/bahmutov/start-server-and-test/releases) - [Commits](https://github.com/bahmutov/start-server-and-test/compare/v1.10.4...v1.10.5) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> * chore(deps-dev): bump typescript from 3.6.3 to 3.6.4 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.6.3 to 3.6.4. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/compare/v3.6.3...v3.6.4) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> * refactor: grid.js -> grid.tsx * refactor(bg): remove unused renderer * refactor(connectionline): use ts * refactor(ts): edges * chore(build): update * Refactor/typescript (WIP) (#25) * refactor(store): use ts * refactor(edgewrapper): use ts * fix(handle): provide onConnect default func * refactor(nodeselection): use ts * refactor(userselction): use ts * refactor(plugins): use ts * refactor(hooks): use ts * refactor(nodes): use ts * refactor(edgerenderer): use ts * refactor(graphview): use ts * refactor(utils): rename js to ts * refactor(app): fix ts errors * fix(ts): errors * fix(app): ts errors * refactor(app): ts erros * refactor(app): ts errors * fix(utils): removeElements * feat(example): add empty renderer closes #34 * fix(connect): dont drag node on connect * chore(build): update
2019-10-15 22:44:10 +02:00
parent 1651ed332a
commit c5632323c3
55 changed files with 4399 additions and 13047 deletions
@@ -0,0 +1,85 @@
+import React, {memo} from 'react';
+import classnames from 'classnames';
+
+import { useStoreState } from '../../store/hooks';
+import { GridType } from '../../types';
+
+interface GridProps {
+  backgroundType?: GridType;
+  gap?: number;
+  color?: string;
+  size?: number;
+  style?: React.CSSProperties;
+  className?: string | null;
+};
+
+const baseStyles: React.CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+};
+
+const createGridLines = (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;
+
+  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: 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;
+
+  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 = 24, color = '#aaa', size = 0.5, style = {}, className = null, backgroundType = GridType.Dots}: GridProps) => {
+    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 = backgroundType === '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';
+
+export default Grid;