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,83 @@
+import React, { useRef, useEffect, CSSProperties } from 'react';
+import classnames from 'classnames';
+
+import { useStoreState } from '../../store/hooks';
+import { getNodesInside } from '../../utils/graph';
+import { Node } from '../../types';
+
+type StringFunc = (node: Node) => string;
+
+interface MiniMapProps {
+  style?: CSSProperties;
+  className?: string | null;
+  bgColor?: string;
+  nodeColor?: string | StringFunc;
+};
+
+const baseStyle: CSSProperties = {
+  position: 'absolute',
+  zIndex: 5,
+  bottom: 10,
+  right: 10,
+  width: 200
+};
+
+export default (
+  { style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd' }: MiniMapProps
+) => {
+  const canvasNode = useRef(null);
+  const state = useStoreState(s => ({
+    width: s.width,
+    height: s.height,
+    nodes: s.nodes,
+    transform: s.transform,
+  }));
+  const mapClasses = classnames('react-flow__minimap', className);
+  const nodePositions = state.nodes.map(n => n.__rg.position);
+  const width: number = +(style.width || baseStyle.width || 0);
+  const height = (state.height / (state.width || 1)) * width;
+  const bbox = { x: 0, y: 0, width: state.width, height: state.height };
+  const scaleFactor = width / state.width;
+  const nodeColorFunc = (nodeColor instanceof Function ? nodeColor: () => nodeColor) as StringFunc;
+
+  useEffect(() => {
+    if (canvasNode && canvasNode.current) {
+      const ctx = canvasNode.current.getContext('2d');
+      const nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
+
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, width, height);
+
+      nodesInside.forEach((n) => {
+        const pos = n.__rg.position;
+        const transformX = state.transform[0];
+        const transformY = state.transform[1];
+        const x = (pos.x * state.transform[2]) + transformX;
+        const y = (pos.y * state.transform[2]) + transformY;
+
+        ctx.fillStyle = nodeColorFunc(n);
+
+        ctx.fillRect(
+          (x * scaleFactor),
+          (y * scaleFactor),
+          n.__rg.width * scaleFactor * state.transform[2],
+          n.__rg.height * scaleFactor * state.transform[2]
+        );
+      });
+    }
+  }, [canvasNode.current, nodePositions, state.transform, height])
+
+  return (
+    <canvas
+      style={{
+        ...baseStyle,
+        ...style,
+        height
+      }}
+      width={width}
+      height={height}
+      className={mapClasses}
+      ref={canvasNode}
+    />
+  );
+}