Merge pull request #284 from wbkd/develop

Develop

example/src/CustomNode/ColorSelectorNode.js

@@ -1,30 +1,22 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { Handle } from 'react-flow-renderer';
 
-export default ({ data }) => {
+export default memo(({ data }) => {
   return (
     <>
       <Handle
         type="target"
         position="left"
         style={{ background: '#fff' }}
-        onConnect={params => console.log('handle onConnect', params)}
+        onConnect={(params) => console.log('handle onConnect', params)}
-      />
-      <div>Custom Color Picker Node: <strong>{data.color}</strong></div>
-      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color}/>
-      <Handle
-        type="source"
-        position="right"
-        id="a"
-        style={{ top: 10, background: '#fff' }}
-      />
-      <Handle
-        type="source"
-        position="right"
-        id="b"
-        style={{ bottom: 10, top: 'auto', background: '#fff' }}
       />
+      <div>
+        Custom Color Picker Node: <strong>{data.color}</strong>
+      </div>
+      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
+      <Handle type="source" position="right" id="a" style={{ top: 10, background: '#fff' }} />
+      <Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#fff' }} />
     </>
   );
-};
+});

example/src/Validation/index.js

@@ -8,53 +8,43 @@ const initialElements = [
   { id: '0', type: 'custominput', position: { x: 0, y: 150 } },
   { id: 'A', type: 'customnode', position: { x: 250, y: 0 } },
   { id: 'B', type: 'customnode', position: { x: 250, y: 150 } },
-  { id: 'C', type: 'customnode', position: { x: 250, y:300 } },
+  { id: 'C', type: 'customnode', position: { x: 250, y: 300 } },
 ];
 
+const isValidConnection = (connection) => connection.target === 'B';
+
 const CustomInput = () => (
   <>
     <div>Only connectable with B</div>
-    <Handle
+    <Handle type="source" position="right" isValidConnection={isValidConnection} />
-      type="source"
-      position="right"
-      isValidConnection={connection => connection.target === 'B'}
-    />
   </>
 );
 
 const CustomNode = ({ id }) => (
   <>
-    <Handle
+    <Handle type="target" position="left" isValidConnection={isValidConnection} />
-      type="target"
-      position="left"
-      isValidConnection={_ => id === 'B'}
-    />
     <div>{id}</div>
-    <Handle
+    <Handle type="source" position="right" isValidConnection={isValidConnection} />
-      type="source"
-      position="right"
-      isValidConnection={_ => id === 'B'}
-    />
   </>
 );
 
 const HorizontalFlow = () => {
   const [elements, setElements] = useState(initialElements);
-  const onConnect = (params) => setElements(els => addEdge(params, els));
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
 
   return (
     <ReactFlow
       elements={elements}
       onConnect={onConnect}
       selectNodesOnDrag={false}
-      onLoad={reactFlowInstance => reactFlowInstance.fitView()}
+      onLoad={(reactFlowInstance) => reactFlowInstance.fitView()}
       className="validationflow"
       nodeTypes={{
         custominput: CustomInput,
-        customnode: CustomNode
+        customnode: CustomNode,
       }}
     />
   );
-}
+};
 
 export default HorizontalFlow;

src/components/Nodes/DefaultNode.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const DefaultNode = ({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
+const DefaultNode = memo(({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
   <>
     <Handle type="target" position={targetPosition} />
     {data.label}
     <Handle type="source" position={sourcePosition} />
   </>
-);
+));
 
 DefaultNode.displayName = 'DefaultNode';
 

src/components/Nodes/InputNode.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const InputNode = ({ data, sourcePosition = Position.Bottom }: NodeProps) => (
+const InputNode = memo(({ data, sourcePosition = Position.Bottom }: NodeProps) => (
   <>
     {data.label}
     <Handle type="source" position={sourcePosition} />
   </>
-);
+));
 
 InputNode.displayName = 'InputNode';
 

src/components/Nodes/OutputNode.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const OutputNode = ({ data, targetPosition = Position.Top }: NodeProps) => (
+const OutputNode = memo(({ data, targetPosition = Position.Top }: NodeProps) => (
   <>
     <Handle type="target" position={targetPosition} />
     {data.label}
   </>
-);
+));
 
 OutputNode.displayName = 'OutputNode';
 

src/store/index.ts

@@ -330,7 +330,9 @@ export const storeModel: StoreModel = {
   }),
 
   updateTransform: action((state, transform) => {
-    state.transform = [transform.x, transform.y, transform.k];
+    state.transform[0] = transform.x;
+    state.transform[1] = transform.y;
+    state.transform[2] = transform.k;
   }),
 
   updateSize: action((state, size) => {