Behave Graph Features and bug fixes

packages/client-core/i18n/en/editor.json

@@ -893,6 +893,9 @@
       "lbl-newProject": "New Project"
     }
   },
+  "graphPanel":{
+    "addGraph" : "Add Behave Graph"
+  },
   "layout": {
     "assetGrid": {
       "loading": "Loading...",

packages/editor/src/components/graph/BehaveFlow.tsx

@@ -25,15 +25,11 @@ Ethereal Engine. All Rights Reserved.
 
 import { BehaveGraphComponent } from '@etherealengine/engine/src/behave-graph/components/BehaveGraphComponent'
 import { BehaveGraphState } from '@etherealengine/engine/src/behave-graph/state/BehaveGraphState'
-import {
-  getComponent,
-  hasComponent,
-  useComponent,
-  useQuery
-} from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { getComponent, hasComponent, useQuery } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import { getMutableState, getState, useHookstate } from '@etherealengine/hyperflux'
 import { isEqual } from 'lodash'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import 'reactflow/dist/style.css'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
@@ -47,7 +43,6 @@ export const ActiveBehaveGraph = (props: { entity }) => {
   const { entity } = props
 
   // reactivity
-  useComponent(entity, BehaveGraphComponent).graph.value
   const behaveGraphState = getState(BehaveGraphState)
 
   // get underlying data, avoid hookstate error 202
@@ -75,6 +70,7 @@ const BehaveFlow = () => {
   const entities = selectionState.selectedEntities.value
   const entity = entities[entities.length - 1]
   const validEntity = typeof entity === 'number' && hasComponent(entity, BehaveGraphComponent)
+  const { t } = useTranslation()
 
   const addGraph = () => EditorControlFunctions.addOrRemoveComponent([entity], BehaveGraphComponent, true)
 
@@ -97,8 +93,7 @@ const BehaveFlow = () => {
                 addGraph()
               }}
             >
-              {' '}
-              Add Graph
+              {t('editor:graphPanel.addGraph')}
             </PropertiesPanelButton>
           ) : (
             <></>

packages/editor/src/components/graph/ee-flow/components/Flow.tsx

@@ -24,7 +24,7 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import React, { useEffect, useRef } from 'react'
-import { Background, BackgroundVariant, ReactFlow } from 'reactflow'
+import { Background, BackgroundVariant, ReactFlow, ReactFlowProvider } from 'reactflow'
 
 import { GraphJSON, IRegistry } from '@behave-graph/core'
 
@@ -33,6 +33,7 @@ import { useHookstate } from '@hookstate/core'
 import { useBehaveGraphFlow } from '../hooks/useBehaveGraphFlow.js'
 import { useFlowHandlers } from '../hooks/useFlowHandlers.js'
 import { useNodeSpecGenerator } from '../hooks/useNodeSpecGenerator.js'
+import { useSelectionHandler } from '../hooks/useSelectionHandler.js'
 import CustomControls from './Controls.js'
 import { NodePicker } from './NodePicker.js'
 import { Examples } from './modals/LoadModal.js'
@@ -80,52 +81,61 @@ export const Flow: React.FC<FlowProps> = ({ initialGraph: graph, examples, regis
     registry
   })
 
+  const { onSelectionChange } = useSelectionHandler({
+    nodes,
+    onNodesChange,
+    onEdgesChange
+  })
+
   useEffect(() => {
     if (dragging.value || !mouseOver.value) return
     onChangeGraph(graphJson ?? graph)
   }, [graphJson]) // change in node position triggers reactor
 
   return (
-    <ReactFlow
-      ref={flowRef}
-      nodeTypes={nodeTypes}
-      nodes={nodes}
-      edges={edges}
-      onNodeDragStart={() => dragging.set(true)}
-      onNodeDragStop={() => dragging.set(false)}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onConnect={onConnect}
-      // @ts-ignore
-      onConnectStart={handleStartConnect}
-      // @ts-ignore
-      onConnectEnd={handleStopConnect}
-      onPaneMouseEnter={() => mouseOver.set(true)}
-      onPaneMouseLeave={() => mouseOver.set(false)}
-      fitView
-      fitViewOptions={{ maxZoom: 1 }}
-      onPaneClick={handlePaneClick}
-      onPaneContextMenu={handlePaneContextMenu}
-    >
-      <CustomControls
-        playing={playing}
-        togglePlay={togglePlay}
-        onSaveGraph={onChangeGraph}
-        setBehaviorGraph={setGraphJson}
-        examples={examples}
-        specGenerator={specGenerator}
-      />
-      <Background variant={BackgroundVariant.Lines} color="#2a2b2d" style={{ backgroundColor: '#1E1F22' }} />
-      {nodePickerVisibility && (
-        <NodePicker
-          flowRef={flowRef}
-          position={nodePickerVisibility}
-          filters={nodePickFilters}
-          onPickNode={handleAddNode}
-          onClose={closeNodePicker}
-          specJSON={specGenerator?.getAllNodeSpecs()}
+    <ReactFlowProvider>
+      <ReactFlow
+        ref={flowRef}
+        nodeTypes={nodeTypes}
+        nodes={nodes}
+        edges={edges}
+        onNodeDragStart={() => dragging.set(true)}
+        onNodeDragStop={() => dragging.set(false)}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onConnectStart={handleStartConnect}
+        onConnectEnd={handleStopConnect}
+        onPaneMouseEnter={() => mouseOver.set(true)}
+        onPaneMouseLeave={() => mouseOver.set(false)}
+        fitView
+        fitViewOptions={{ maxZoom: 1 }}
+        onPaneClick={handlePaneClick}
+        onPaneContextMenu={handlePaneContextMenu}
+        onSelectionChange={onSelectionChange}
+        multiSelectionKeyCode={'Shift'}
+        deleteKeyCode={'Backspace'}
+      >
+        <CustomControls
+          playing={playing}
+          togglePlay={togglePlay}
+          onSaveGraph={onChangeGraph}
+          setBehaviorGraph={setGraphJson}
+          examples={examples}
+          specGenerator={specGenerator}
         />
-      )}
-    </ReactFlow>
+        <Background variant={BackgroundVariant.Lines} color="#2a2b2d" style={{ backgroundColor: '#1E1F22' }} />
+        {nodePickerVisibility && (
+          <NodePicker
+            flowRef={flowRef}
+            position={nodePickerVisibility}
+            filters={nodePickFilters}
+            onPickNode={handleAddNode}
+            onClose={closeNodePicker}
+            specJSON={specGenerator?.getAllNodeSpecs()}
+          />
+        )}
+      </ReactFlow>
+    </ReactFlowProvider>
   )
 }