From c0390eec798ab7b368c7e6cf384329f4407adddf Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 19 May 2020 18:33:29 +0200
Subject: [PATCH] feat(helper): export project function closes #237

---
 README.md                         | 18 ++++++++++++++++--
 example/package-lock.json         |  4 ++--
 src/container/GraphView/index.tsx |  3 ++-
 src/types/index.ts                |  2 ++
 src/utils/graph.ts                |  6 ++++++
 5 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index a2501be6..6ced9125 100644
--- a/README.md
+++ b/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
diff --git a/example/package-lock.json b/example/package-lock.json
index 8ab267cc..d72cffdc 100644
--- a/example/package-lock.json
+++ b/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": {
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 44df5852..2789ccaf 100644
--- a/src/container/GraphView/index.tsx
+++ b/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]);
diff --git a/src/types/index.ts b/src/types/index.ts
index bdfb71a4..289121de 100644
--- a/src/types/index.ts
+++ b/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;
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index dede7829..263f2844 100644
--- a/src/utils/graph.ts
+++ b/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.');