New <NodeEditor /> and builder slice for editing nodes

package.json

@@ -27,6 +27,7 @@
     "react-dom": "18.2.0",
     "react-is": "18.2.0",
     "react-redux": "^9.1.0",
+    "react-shadow": "^20.4.0",
     "redux-persist": "^6.0.0",
     "styled-components": "5.3.6"
   },

packages/flow-client/src/app/app.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
 import { FlowCanvas } from './components/flow-canvas/flow-canvas'; // Ensure the path is correct
-import NodePalette from './components/node-palette/node-palette'; // Import NodePalette
+import { NodeEditor } from './components/node-editor';
+import { NodePalette } from './components/node-palette/node-palette'; // Import NodePalette
 
 // StyledApp defines the main application container styles.
 // It ensures the flow canvas takes up the full viewport height for better visibility.
@@ -21,6 +22,7 @@ const StyledApp = styled.div`
     .builder-container {
         display: flex;
         flex-direction: row;
+        position: relative;
         height: calc(100% - 60px);
 
         .node-palette {
@@ -44,6 +46,7 @@ export function App() {
             <div className="builder-container">
                 <NodePalette />
                 <FlowCanvas />
+                <NodeEditor />
             </div>
         </StyledApp>
     );

packages/flow-client/src/app/components/flow-canvas/flow-canvas.tsx

@@ -192,16 +192,39 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({
 
     useEffect(() => {
         const canvas = document.querySelector('.flow-canvas');
+        const canvasContainer = document.querySelector(
+            '.flow-canvas-container'
+        );
+
         const handleZoom = (event: Event) =>
             engine.increaseZoomLevel(event as WheelEvent);
         const disableContextMenu = (event: Event) => event.preventDefault();
 
         canvas?.addEventListener('wheel', handleZoom);
         canvas?.addEventListener('contextmenu', disableContextMenu);
 
+        // Disable key events from outside our canvas
+        const actionEventBus = engine.getActionEventBus();
+        const originalFireAction =
+            actionEventBus.fireAction.bind(actionEventBus);
+        actionEventBus.fireAction = actionEvent => {
+            // Check if the event is a key event (keydown or keyup)
+            if (['keydown', 'keyup'].includes(actionEvent.event.type)) {
+                // Check if the event target is not our canvas, then exit
+                if (
+                    !canvasContainer?.contains(actionEvent.event.target as Node)
+                ) {
+                    return;
+                }
+            }
+            // Call the original fireAction method
+            originalFireAction(actionEvent);
+        };
+
         return () => {
             canvas?.removeEventListener('wheel', handleZoom);
             canvas?.removeEventListener('contextmenu', disableContextMenu);
+            actionEventBus.fireAction = originalFireAction;
         };
     }, []);
 
@@ -276,7 +299,12 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({
     // The CanvasWidget component is used to render the flow canvas within the UI.
     // The "canvas-widget" className can be targeted for custom styling.
     return (
-        <div ref={drop} style={{ height: '100%', width: '100%' }}>
+        <div
+            className="flow-canvas-container"
+            ref={drop}
+            style={{ height: '100%', width: '100%' }}
+            tabIndex={0}
+        >
             <LogFlowSlice />
             <StyledCanvasWidget engine={engine} className="flow-canvas" />
         </div>

packages/flow-client/src/app/components/flow-canvas/model.ts

@@ -27,12 +27,9 @@ export class CustomDiagramModel extends DiagramModel {
                 },
             });
         });
-        return ret;
     }
 
-    // Custom method to add a link and register an event listener
-    override addLink(link: LinkModel): LinkModel {
-        const ret = super.addLink(link);
+    private attachLinkListeners(link: LinkModel) {
         // intercept points
         const linkAddPoint = link.addPoint.bind(link);
         link.addPoint = <P extends PointModel>(point: P) => {

packages/flow-client/src/app/components/flow-canvas/node.tsx

@@ -8,9 +8,12 @@ import {
 import React from 'react';
 import styled from 'styled-components';
 
-import { CustomEngine } from './engine';
-import NodeRedNode from '../node/node-red-node';
+import { useAppDispatch } from '../../redux/hooks';
+import { builderActions } from '../../redux/modules/builder/builder.slice';
 import { NodeEntity } from '../../redux/modules/node/node.slice';
+import NodeRedNode from '../node/node-red-node';
+import { CustomEngine } from './engine';
+import { FlowNodeEntity } from '../../redux/modules/flow/flow.slice';
 
 // Styled components for the node and its elements
 const StyledNode = styled.div<{ borderColor?: string }>`
@@ -131,15 +134,21 @@ export type NodeProps = {
 };
 
 export const Node: React.FC<NodeProps> = ({ node, engine }) => {
+    const dispatch = useAppDispatch();
+
     // Convert the ports model to an array for rendering
     const ports = Object.values(node.getPorts());
 
+    const handleDoubleClick = () => {
+        dispatch(builderActions.setEditing(node.getID()));
+    };
 
     const entity = node.entity ?? ({} as NodeEntity);
 
     return (
         <StyledNode
             className={node.isSelected() ? 'selected' : ''}
+            onDoubleClick={handleDoubleClick}
         >
             <NodeRedNode entity={entity} instance={node.config}>
                 {/* Render ports */}

packages/flow-client/src/app/redux/modules/builder/builder.slice.ts

@@ -0,0 +1,37 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export const BUILDER_FEATURE_KEY = 'builder';
+
+// Define the state interface
+export interface BuilderState {
+    editing: string | null;
+}
+
+// Initial state
+const initialState: BuilderState = {
+    editing: null,
+};
+
+// Create the slice
+export const builderSlice = createSlice({
+    name: BUILDER_FEATURE_KEY,
+    initialState,
+    reducers: {
+        // Action to set the editing node
+        setEditing: (state, action: PayloadAction<string | null>) => {
+            state.editing = action.payload;
+        },
+        // Action to clear the editing node
+        clearEditing: state => {
+            state.editing = null;
+        },
+    },
+});
+
+// Export the reducer and actions
+export const builderReducer = builderSlice.reducer;
+export const builderActions = builderSlice.actions;
+
+// Selectors
+export const selectEditing = (state: { [BUILDER_FEATURE_KEY]: BuilderState }) =>
+    state[BUILDER_FEATURE_KEY].editing;

packages/flow-client/src/app/redux/store.ts

@@ -13,6 +13,10 @@ import storage from 'redux-persist/lib/storage';
 
 import { featureApi } from './modules/api/feature.api';
 import { nodeApi } from './modules/api/node.api'; // Import the nodeApi
+import {
+    BUILDER_FEATURE_KEY,
+    builderReducer,
+} from './modules/builder/builder.slice';
 import {
     FEATURE_FEATURE_KEY,
     featureReducer,
@@ -39,6 +43,7 @@ export const createStore = () => {
                 },
                 flowReducer
             ),
+            [BUILDER_FEATURE_KEY]: builderReducer,
         },
         // Additional middleware can be passed to this array
         middleware: getDefaultMiddleware =>