text: import React, { useState } from 'react';
  
  import ReactNodeGraph from '../index';
  
  const exampleGraph = {
    "nodes":[
      {"nid":1,"type":"WebGLRenderer","x":1479,"y":351,"fields":{"in":[{"name":"width"},{"name":"height"},{"name":"scene"},{"name":"camera"},{"name":"bg_color"},{"name":"postfx"},{"name":"shadowCameraNear"},{"name":"shadowCameraFar"},{"name":"shadowMapWidth"},{"name":"shadowMapHeight"},{"name":"shadowMapEnabled"},{"name":"shadowMapSoft"}],"out":[]}},
      {"nid":14,"type":"Camera","x":549,"y":478,"fields":{"in":[{"name":"fov"},{"name":"aspect"},{"name":"near"},{"name":"far"},{"name":"position"},{"name":"target"},{"name":"useTarget"}],"out":[{"name":"out"}]}},
      {"nid":23,"type":"Scene","x":1216,"y":217,"fields":{"in":[{"name":"children"},{"name":"position"},{"name":"rotation"},{"name":"scale"},{"name":"doubleSided"},{"name":"visible"},{"name":"castShadow"},{"name":"receiveShadow"}],"out":[{"name":"out"}]}},
      {"nid":35,"type":"Merge","x":948,"y":217,"fields":{"in":[{"name":"in0"},{"name":"in1"},{"name":"in2"},{"name":"in3"},{"name":"in4"},{"name":"in5"}],"out":[{"name":"out"}]}},
      {"nid":45,"type":"Color","x":950,"y":484,"fields":{"in":[{"name":"rgb"},{"name":"r"},{"name":"g"},{"name":"b"}],"out":[{"name":"rgb"},{"name":"r"},{"name":"g"},{"name":"b"}]}},
      {"nid":55,"type":"Vector3","x":279,"y":503,"fields":{"in":[{"name":"xyz"},{"name":"x"},{"name":"y"},{"name":"z"}],"out":[{"name":"xyz"},{"name":"x"},{"name":"y"},{"name":"z"}]}},
      {"nid":65,"type":"ThreeMesh","x":707,"y":192,"fields":{"in":[{"name":"children"},{"name":"position"},{"name":"rotation"},{"name":"scale"},{"name":"doubleSided"},{"name":"visible"},{"name":"castShadow"},{"name":"receiveShadow"},{"name":"geometry"},{"name":"material"},{"name":"overdraw"}],"out":[{"name":"out"}]}},
      {"nid":79,"type":"Timer","x":89,"y":82,"fields":{"in":[{"name":"reset"},{"name":"pause"},{"name":"max"}],"out":[{"name":"out"}]}},
      {"nid":84,"type":"MathMult","x":284,"y":82,"fields":{"in":[{"name":"in"},{"name":"factor"}],"out":[{"name":"out"}]}},
      {"nid":89,"type":"Vector3","x":486,"y":188,"fields":{"in":[{"name":"xyz"},{"name":"x"},{"name":"y"},{"name":"z"}],"out":[{"name":"xyz"},{"name":"x"},{"name":"y"},{"name":"z"}]}}
    ],
    "connections":[
      {"from_node":23,"from":"out","to_node":1,"to":"scene"},
      {"from_node":14,"from":"out","to_node":1,"to":"camera"},
      {"from_node":14,"from":"out","to_node":35,"to":"in5"},
      {"from_node":35,"from":"out","to_node":23,"to":"children"},
      {"from_node":45,"from":"rgb","to_node":1,"to":"bg_color"},
      {"from_node":55,"from":"xyz","to_node":14,"to":"position"},
      {"from_node":65,"from":"out","to_node":35,"to":"in0"},
      {"from_node":79,"from":"out","to_node":84,"to":"in"},
      {"from_node":89,"from":"xyz","to_node":65,"to":"rotation"},
      {"from_node":84,"from":"out","to_node":89,"to":"y"}
    ]
  };
  
  export const App = () => {
    const [state, setState] = useState(exampleGraph);
  
    const onNewConnector = (fromNode, fromPin, toNode, toPin) => {
      let connections = [...state.connections, {
        from_node: fromNode,
        from: fromPin,
        to_node: toNode,
        to: toPin
      }];
  
      console.log({...state, ...connections});
      setState(old => {
        return {
          ...old,
          "connections": connections
        }
      });
    }
  
    const onRemoveConnector = (connector) => {
      let connections = [...state.connections];
      connections = connections.filter(connection => {
        return connection !== connector;
      });
  
      setState(old => {
        return {
          ...old,
          "connections": connections
        }
      });
    }
  
    const onNodeMove = (nid, pos) => {
      console.log(`end move:`, nid, pos);
    }
  
    const onNodeStartMove = nid  => {
      console.log(`start move:`, nid);
    }
  
    const handleNodeSelect = nid => {
      console.log(`node selected:`, nid);
    }
  
    const handleNodeDeselect = nid => {
      console.log(`node deselected:`, nid);
    }
  
    return <ReactNodeGraph
              data={state}
              onNodeMove={(nid, pos) => onNodeMove(nid, pos)}
              onNodeStartMove={nid => onNodeStartMove(nid)}
              onNewConnector={(n1, o, n2, i) => onNewConnector(n1, o, n2, i)}
              onRemoveConnector={connector => onRemoveConnector(connector)}
              onNodeSelect={nid => handleNodeSelect(nid)}
              onNodeDeselect={nid => handleNodeDeselect(nid)}
           />;
  }
  
  export default App;