Add a node functionality enable on any node of the tree - 3 hours
Delete a node functionality enable on any node of the tree - 3 hours
Edit node functionality enable on any node of the tree - 3 hours
List out the limitations for each function and combined
Acceptance Criteria:
AC1: Add Node
Given a user has selected a node within the tree,
they should be able to add the new node,
The new node should appear as a child of the selected node in the tree.
AC2: Delete Node
Given a user selects a node within the tree,
When they press [BACKSPACE] on keyboard or a Delete button to delete the node(pick one way to implement)
Then the node should be removed from the tree
AC3: Edit Node
Given a user selects a node within the tree,
When they choose the option to edit or double click the node,
Then they should be able to modify the node's details
AC4: JSON Schema for Nodes and Edges:
Define the structure of nodes and edges in JSON format.
Note:
Use localstorage/whatever is easier to manage state if other Zustand takes longer
When you implement a custom node it is wrapped in a component that enables basic functionality like selection and dragging. Your custom node receives the following props:
export type NodeProps<T = any> = {
id: string;
data: T;
dragHandle?: boolean;
type?: string;
selected?: boolean;
isConnectable?: boolean;
zIndex?: number;
xPos: number;
yPos: number;
dragging: boolean;
targetPosition?: Position;
sourcePosition?: Position;
};
Objective: Be able to offer CRUD functionalities of the Tree on Page - Find out if the hooks/functionalities might potential block each other or cause other functionalities to be not usable Exploration/Learning needed if not already familiar with React-Flow - 8 hours Reference: https://reactflow.dev/learn/getting-started/building-a-flow https://reactflow.dev/learn/tutorials/mind-map-app-with-react-flow
Ticket Scope:
Acceptance Criteria:
AC1: Add Node Given a user has selected a node within the tree, they should be able to add the new node, The new node should appear as a child of the selected node in the tree.
AC2: Delete Node Given a user selects a node within the tree, When they press [BACKSPACE] on keyboard or a Delete button to delete the node(pick one way to implement) Then the node should be removed from the tree
AC3: Edit Node Given a user selects a node within the tree, When they choose the option to edit or double click the node, Then they should be able to modify the node's details
AC4: JSON Schema for Nodes and Edges: Define the structure of nodes and edges in JSON format.
Note: Use localstorage/whatever is easier to manage state if other Zustand takes longer
When you implement a custom node it is wrapped in a component that enables basic functionality like selection and dragging. Your custom node receives the following props: export type NodeProps<T = any> = { id: string; data: T; dragHandle?: boolean; type?: string; selected?: boolean; isConnectable?: boolean; zIndex?: number; xPos: number; yPos: number; dragging: boolean; targetPosition?: Position; sourcePosition?: Position; };