feat(helper): export project function closes #237

README.md

@@ -7,7 +7,7 @@ React Flow is a library for building node-based graphs. You can easily implement
 - [Key Features](#key-features)
 - [Installation](#installation)
 - [Usage](#usage)
-- [ReactFlow Component Props](#reactflow-component-props)
+- [ReactFlow Component Prop Types](#reactflow-component-prop-types)
 - [Styling](#styling)
 - [Nodes](#nodes)
   - [Options](#options-1)
@@ -62,7 +62,7 @@ const BasicFlow = () => (
 );
 ```
 
-## ReactFlow Component Props
+## ReactFlow Component Prop Types
 
 - `elements`: array of [nodes](#nodes) and [edges](#edges) *(required)*
 - `onElementClick`: element click handler
@@ -249,20 +249,34 @@ import ReactFlow, { isNode, isEdge, removeElements, addEdge } from 'react-flow-r
 
 #### isEdge
 
+Returns true if element is an edge
+
 `isEdge = (element: Node | Edge): element is Edge`
 
 #### isNode
 
+Returns true if element is a node
+
 `isNode = (element: Node | Edge): element is Node`
 
 #### removeElements
 
+Returns elements without the elements from `elementsToRemove`
+
 `removeElements = (elementsToRemove: Elements, elements: Elements): Elements`
 
 #### addEdge
 
+Returns elements array with added edge
+
 `addEdge = (edgeParams: Edge, elements: Elements): Elements`
 
+#### project
+
+Transforms pixel coordinates to the internal React Flow coordinate system
+
+`project = (position: XYPosition): XYPosition`
+
 You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.
 
 ## Plugins

example/package-lock.json

@@ -10701,13 +10701,13 @@
     "react-flow-renderer": {
       "version": "file:..",
       "requires": {
-        "@welldone-software/why-did-you-render": "^4.2.0",
+        "@welldone-software/why-did-you-render": "^4.2.1",
         "classnames": "^2.2.6",
         "d3-selection": "^1.4.1",
         "d3-zoom": "^1.8.3",
         "easy-peasy": "^3.3.0",
         "fast-deep-equal": "^3.1.1",
-        "react-draggable": "^4.3.1",
+        "react-draggable": "^4.4.2",
         "resize-observer": "^1.0.0"
       },
       "dependencies": {

src/container/GraphView/index.tsx

@@ -12,7 +12,7 @@ import useD3Zoom from '../../hooks/useD3Zoom';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
 import { getDimensions } from '../../utils';
-import { fitView, zoomIn, zoomOut } from '../../utils/graph';
+import { fitView, zoomIn, zoomOut, project } from '../../utils/graph';
 import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc, Node, Edge, Connection } from '../../types';
 
 export interface GraphViewProps {
@@ -115,6 +115,7 @@ const GraphView = memo(
           fitView,
           zoomIn,
           zoomOut,
+          project,
         });
       }
     }, [state.d3Initialised]);

src/types/index.ts

@@ -133,11 +133,13 @@ export type FitViewParams = {
   padding: number;
 };
 export type FitViewFunc = (fitViewOptions: FitViewParams) => void;
+export type ProjectFunc = (position: XYPosition) => XYPosition;
 
 type OnLoadParams = {
   zoomIn: () => void;
   zoomOut: () => void;
   fitView: FitViewFunc;
+  project: ProjectFunc;
 };
 
 export type OnLoadFunc = (params: OnLoadParams) => void;

src/utils/graph.ts

@@ -74,6 +74,12 @@ export const pointToRendererPoint = (
   return position;
 };
 
+export const project = (position: XYPosition): XYPosition => {
+  const { transform, snapToGrid, snapGrid } = store.getState();
+
+  return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
+};
+
 export const parseElement = (element: Node | Edge): Node | Edge => {
   if (!element.id) {
     throw new Error('All elements (nodes and edges) need to have an id.');