Add custom composedPath polyfill

CHANGELOG.md

@@ -0,0 +1,28 @@
+
+# Changelog
+
+ ## [Unreleased]
+
+ ## Added
+
+- Upgrade Typescript and Storybook.
+- Prevent re-rendering for nodes and links that are not in use. [alexcuz PR7](https://github.com/MrBlenny/react-flow-chart/pull/7)
+- Render only nodes currently visible for user. [alexcuz PR7](https://github.com/MrBlenny/react-flow-chart/pull/7)
+- Fix calculating link position when canvas is not positioned in top left corner. [alexcuz PR7](https://github.com/MrBlenny/react-flow-chart/pull/7)
+
+ ## Breaking
+
+ - Added a new [onNodeSizeChange](https://github.com/MrBlenny/react-flow-chart/pull/7/files#diff-5a121158d13f502e78c5c29411f54269R141) action that is required for calculating which nodes are visible. If you are using external state, this will need to be implemented.
+
+ ## [0.0.5] - 2019-04-02
+
+ ### Added
+
+- Fixed a bug where links would not work on firefox [tantayou999](https://github.com/MrBlenny/react-flow-chart/issues/12)
+
+ ## [0.0.4] - 2019-03-24
+
+ ### Added
+
+- Start keeping a changelog
+- Remove storybook and lodash from from dist [alexcuz PR5](https://github.com/MrBlenny/react-flow-chart/pull/5)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrblenny/react-flow-chart",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A flexible, stateless flow chart library for react.",
   "main": "src/index.js",
   "repository": "git@github.com:MrBlenny/react-flow-chart.git",

src/components/Port/Port.wrapper.tsx

@@ -6,6 +6,16 @@ import {
 } from '../../'
 import { IPortDefaultProps, PortDefault } from './Port.default'
 
+/** Construct the composed path by traversing parentElements */
+const composedPath = (el: HTMLElement | null) => {
+  const path: HTMLElement[] = [];
+  while (el) {
+    path.push(el);
+    el = el.parentElement;
+  }
+  return path
+}
+
 export interface IPortWrapperProps {
   style?: object
   chart: IChart
@@ -61,10 +71,12 @@ export class PortWrapper extends React.Component<IPortWrapperProps> {
 
     // Create and bind the mouse up handler
     // This is used to check if the link is complete or cancelled
-    const mouseUpHandler = (e: MouseEvent & { path: HTMLElement[] }) => {
+    const mouseUpHandler = (e: MouseEvent) => {
+
       // We traverse up the event path until we find an element with 'data-port-id' and data-node-id'
       // e.toElement cannot be used because it may be a child element of the port
-      const portEl = e.path.find((el) => {
+      const path = composedPath(e.target as HTMLElement)
+      const portEl = path.find((el) => {
         const toPortId = el.getAttribute && el.getAttribute('data-port-id')
         const toNodeId = el.getAttribute && el.getAttribute('data-node-id')
         return !!(toPortId && toNodeId)