HX-Tfd
commented
3 months ago Detailled Spec:
Seems much easier with current React.Flow version: https://reactflow.dev/examples/styling/styled-components
Create a separate NodeType for DataObjects and Actions, display corresponding Icon in upper-left corner. Related to dataflow diagrams, DataObjects should have sharp corners, and Actions conrners with some radius.
Additionally show the type of the Action or DataObject in the upper-right corner. For that take the first character of the type and visualize it similar to the icon in the upper-left corner.
Implement a Custom Node Component and as a first step put an Icon in the upper-right corner to show the Node Type, e.g. Action or DataObject.
Additional Informations:
Custom Node Example https://reactflow.dev/docs/examples/nodes/resize-rotate/
Pro Example: https://pro.reactflow.dev/examples/expand-collapse/full
API Doc: https://reactflow.dev/docs/api/graph-util-functions/
Alternative Doc: https://morioh.com/p/51fe4cdcdcb2
Typescript example https://codesandbox.io/s/react-flow-customnode-ts-lu18j?file=/src/Flow.tsx:2833-2850
SO question: https://stackoverflow.com/questions/73878038/how-to-implement-expand-and-collapse-functionality-in-reactflow-in-react-applica