SceneGraph.jsx

const sceneData = {
  scenes: [
    {id: '1', x: 0, y: 0, width: 375, height: 667},
    {id: '2', x: 400, y: 0, width: 375, height: 667},
    {id: '3', x: 800, y: 0, width: 375, height: 667},
  ],
  connections: [
    {from: '1', to: '3', label: 'onPress'},
    {from: '2', to: '1', label: 'onPress'},
    {from: '3', to: '1', label: 'onLongPress'},
  ],
  viewport: {
    scale: 1,
    x: 600,
    y: 500,
    width: 1200,
    height: 1000,
  },
}

// SceneGraph is a controlled component

const graph = (
  <SceneGraph
    sceneData={sceneData}
    onChange={(sceneData) => {
      // Update state or store
      // This is the entire data structure, if you really don't want to manage the component
      // - but can use more granular callbacks instead when you do.
    }}
    
    renderScene={(scene) => {
      const {id, x, y} = scene
      return <Anything />
    }}
    
    // Do something when specific connections are added or removed
    onConnectionChange={(change) => {
      const {type, connection} = change
      
      if (type === 'added') {
        const {id, from, to} = connection
      }
    }}
    
    // Scene dragging callbacks
    // To cancel, the scene component should cancel the onDragStart (or maybe onMouseDown)
    onDragSceneStart={(scene, position) => {}}
    onDragSceneMove={(scene, position) => {}}
    onDragSceneEnd={(scene, position) => {}}
    onDragSceneCancel={(scene, position) => {}}
    
    // Connection dragging callbacks
    onDragConnectionStart={(connection, position) => {}}
    onDragConnectionMove={(connection, position) => {}}
    onDragConnectionEnd={(connection, position) => {}}
    onDragConnectionCancel={(connection, position) => {}}
    
    // Panning callbacks
    onPanStart={({x, y}}) => {}}
    onPanMove={({x, y}}) => {}}
    onPanEnd={({x, y}) => {}}
    
    onViewportChange={({x, y, width, height, scale}) => {}}
    
    showConnections={true}
  />
)