Link/Node: noop onClick/Hover if readonly

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+## Fixed
+
+- Readonly mode should prevent link edits [loonyuni](https://github.com/MrBlenny/react-flow-chart/pull/45)
+
 ## [0.0.7] - 2019-08-22
 
 ## Added

src/components/Link/Link.wrapper.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { IConfig, ILink, INode, IOnLinkMouseEnter, IOnLinkMouseLeave } from '../../'
+import { IConfig, ILink, INode, IOnLinkClick, IOnLinkMouseEnter, IOnLinkMouseLeave } from '../../'
+import { noop } from '../../utils'
 import { ILinkDefaultProps, LinkDefault } from './Link.default'
 import { getLinkPosition } from './utils'
 
@@ -12,7 +13,7 @@ export interface ILinkWrapperProps {
   toNode: INode | undefined
   onLinkMouseEnter: IOnLinkMouseEnter
   onLinkMouseLeave: IOnLinkMouseLeave
-  onLinkClick: IOnLinkMouseLeave
+  onLinkClick: IOnLinkClick
   Component?: React.FunctionComponent<ILinkDefaultProps>
 }
 
@@ -46,9 +47,9 @@ export const LinkWrapper = React.memo(({
       link={link}
       startPos={startPos}
       endPos={endPos}
-      onLinkMouseEnter={onLinkMouseEnter}
-      onLinkMouseLeave={onLinkMouseLeave}
-      onLinkClick={onLinkClick}
+      onLinkMouseEnter={config.readonly ? noop : onLinkMouseEnter}
+      onLinkMouseLeave={config.readonly ? noop : onLinkMouseLeave}
+      onLinkClick={config.readonly ? noop : onLinkClick}
       isSelected={isSelected}
       isHovered={isHovered}
     />

src/components/Node/Node.wrapper.tsx

@@ -8,6 +8,7 @@ import {
   IOnNodeClick, IOnNodeSizeChange, IOnPortPositionChange,
   IPortDefaultProps, IPortsDefaultProps, IPosition, ISelectedOrHovered, ISize, PortWrapper,
 } from '../../'
+import { noop } from '../../utils'
 import { INodeDefaultProps, NodeDefault } from './Node.default'
 
 export interface INodeWrapperProps {
@@ -94,8 +95,8 @@ export const NodeWrapper = ({
             port={node.ports[portId]}
             Component={Port}
             onPortPositionChange={onPortPositionChange}
-            onLinkStart={config.readonly ? () => null : onLinkStart}
-            onLinkMove={config.readonly ? () => null : onLinkMove}
+            onLinkStart={config.readonly ? noop : onLinkStart}
+            onLinkMove={config.readonly ? noop : onLinkMove}
             onLinkComplete={onLinkComplete}
             onLinkCancel={onLinkCancel}
           />
@@ -122,8 +123,10 @@ export const NodeWrapper = ({
         ref={compRef}
         children={children}
         onClick={(e) => {
-          onNodeClick({ config, nodeId: node.id })
-          e.stopPropagation()
+          if (!config.readonly) {
+            onNodeClick({ config, nodeId: node.id })
+            e.stopPropagation()
+          }
         }}
         isSelected={isSelected}
         node={node}

src/index.ts

@@ -2,3 +2,4 @@ export * from './components'
 export * from './container'
 export * from './types'
 export * from './constants'
+export * from './utils'

src/utils.ts

@@ -0,0 +1 @@
+export const noop = () => null