@bemedev/mind-flow 0.3.2 → 1.1.0

package/src/ui/components/EdgeComponent.tsx

@@ -14,6 +14,13 @@ type Props = {
   isNew?: boolean;
 };
 
+/**
+ * Computes bezier curve control point offset based on horizontal distance.
+ *
+ * @param value - Absolute horizontal delta between start and end points.
+ *
+ * @returns Offset distance in pixels for bezier curvature.
+ */
 /**
  * Computes bezier curve control point offset based on horizontal distance.
  *
@@ -33,7 +40,9 @@ const calculateOffset = (value: number) => (value * 100) / 200;
  *
  * @see {@linkcode calculateOffset}
  */
-const draw = ({ x0, y0, x1, y1 }: Vector) => {
+const draw = (vector?: Vector) => {
+  if (!vector) return '';
+  const { x0, y0, x1, y1 } = vector;
   return `M ${x0} ${y0} C ${x0 + calculateOffset(Math.abs(x1 - x0))} ${y0}, ${x1 - calculateOffset(Math.abs(x1 - x0))} ${y1}, ${x1} ${y1}`;
 };
 
@@ -52,7 +61,7 @@ export const EdgeComponent: Component<Props> = props => {
 
   const vector = createState(service, {
     selector: ({ context: { newEdge, edgesPositions } }) => {
-      if (props.isNew) return newEdge!;
+      if (props.isNew) return newEdge;
       return edgesPositions[props.id];
     },
     equals: dequal,
@@ -65,53 +74,58 @@ export const EdgeComponent: Component<Props> = props => {
   /** Computes the 2D midpoint coordinate of the edge curve for handle placement. */
   const middlePoint = () => {
     const v = vector();
+    if (!v) return { x: 0, y: 0 };
     return { x: v.x0 + (v.x1 - v.x0) / 2, y: v.y0 + (v.y1 - v.y0) / 2 };
   };
 
   return (
-    <>
-      <path
-        class='relative cursor-pointer fill-transparent'
-        classList={{
-          'stroke-[rgba(168,168,168,0.4)] stroke-3 z-200': !!props.isNew,
-          'stroke-[rgba(168,168,168,1)] stroke-4 z-100': selected() && !props.isNew,
-          'stroke-[rgba(168,168,168,0.8)] stroke-3': !selected() && !props.isNew,
-        }}
-        style={{ 'pointer-events': props.isNew ? 'none' : 'all' }}
-        d={draw(vector())}
-
-        onMouseDown={e => {
-          e.stopPropagation();
-          return service.send({ type: 'SELECT', payload: props.id });
-        }}
-      />
-      <Show when={selected()}>
-        <g
-          cursor='pointer'
-          transform={`translate(${middlePoint().x}, ${middlePoint().y})`}
-          onMouseDown={e => {
-            e.stopPropagation();
-            service.send({ type: 'DELETE', payload: props.id });
-          }}
-          style={{ 'pointer-events': 'all', 'z-index': '30' }}
-        >
-          <circle cx='0' cy='0' r='12' fill='rgba(168, 168, 168, 1)' />
-          <svg
-            fill='currentColor'
-            stroke-width='0'
-            xmlns='http://www.w3.org/2000/svg'
-            class='h-25 w-25 bg-white fill-white'
-            width='20'
-            height='20'
-            viewBox='0 0 20 20'
-            color='white'
-            x='-10'
-            y='-10'
-          >
-            <path d='M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z'></path>
-          </svg>
-        </g>
-      </Show>
-    </>
+    <Show when={vector()}>
+      {v => (
+        <>
+          <path
+            class='relative cursor-pointer fill-transparent'
+            classList={{
+              'stroke-[rgba(168,168,168,0.4)] stroke-3 z-200': !!props.isNew,
+              'stroke-[rgba(168,168,168,1)] stroke-4 z-100':
+                selected() && !props.isNew,
+              'stroke-[rgba(168,168,168,0.8)] stroke-3': !selected() && !props.isNew,
+            }}
+            style={{ 'pointer-events': props.isNew ? 'none' : 'all' }}
+            d={draw(v())}
+            onMouseDown={e => {
+              e.stopPropagation();
+              return service.send({ type: 'SELECT', payload: props.id });
+            }}
+          />
+          <Show when={selected()}>
+            <g
+              cursor='pointer'
+              transform={`translate(${middlePoint().x}, ${middlePoint().y})`}
+              onMouseDown={e => {
+                e.stopPropagation();
+                service.send({ type: 'DELETE', payload: props.id });
+              }}
+              style={{ 'pointer-events': 'all', 'z-index': '30' }}
+            >
+              <circle cx='0' cy='0' r='12' fill='rgba(168, 168, 168, 1)' />
+              <svg
+                fill='currentColor'
+                stroke-width='0'
+                xmlns='http://www.w3.org/2000/svg'
+                class='h-25 w-25 bg-white fill-white'
+                width='20'
+                height='20'
+                viewBox='0 0 20 20'
+                color='white'
+                x='-10'
+                y='-10'
+              >
+                <path d='M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z'></path>
+              </svg>
+            </g>
+          </Show>
+        </>
+      )}
+    </Show>
   );
 };

package/src/ui/components/EdgesBoard.tsx

@@ -14,11 +14,10 @@ import { useFlow } from './FlowChart.context';
  */
 export const EdgesBoard: Component = () => {
   const service = useFlow();
-
   const hasNewEdge = createState(service, { selector: s => !!s.context.newEdge });
 
   const edgeIds = createState(service, {
-    selector: ({ context }) => Object.keys(context.edgesPositions),
+    selector: ({ context }) => Object.keys(context.edgesPositions ?? {}),
     equals: (prev, next) => prev.length === next.length,
   });
 

package/src/ui/components/EditPanel.hooks.ts

@@ -0,0 +1,69 @@
+import { deepEqual } from '@bemedev/app';
+import { createState } from '@bemedev/app-solidjs';
+import { isDefined } from '@bemedev/app/bemedev';
+import { createSignal, type Accessor } from 'solid-js';
+
+import type { NodeData } from './FlowChart';
+import { useFlow } from './FlowChart.context';
+
+/**
+ * Hook providing reactive state and mutation helpers for editing flowchart node
+ * data.
+ *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ *
+ * @param timeout - Transition delay in milliseconds before closing the panel.
+ *   Defaults to `270`.
+ *
+ * @returns An object containing reactive accessors and mutation callbacks for the
+ *   active node.
+ *
+ * @see {@linkcode useFlow}
+ */
+export const useHook = <D extends NodeData = NodeData>(timeout = 270) => {
+  const service = useFlow();
+  const directClose = () => service.send('STOP_EDIT');
+  const [closing, setClosing] = createSignal(false);
+  const senderData = service.sender('SET_NODE_DATA');
+
+  const _editing = createState(service, {
+    selector: ({ context }) => {
+      const editingId = context.editing;
+      if (!isDefined(editingId)) return;
+
+      const item = context.data?.nodes?.find(n => n.id === editingId);
+      if (!isDefined(item)) return;
+
+      return { id: item.id, data: item.data as D };
+    },
+
+    equals: deepEqual<any>,
+  });
+
+  const close = () => {
+    setClosing(true);
+
+    setTimeout(() => {
+      directClose();
+      setClosing(false);
+    }, timeout);
+  };
+
+  const updateField = <K extends keyof D>(field: K, value: D[K]) => {
+    const current = _editing();
+    if (!current) return;
+
+    return senderData({ ...current, data: { ...current.data, [field]: value } });
+  };
+
+  const updateData = (data: Partial<D>) => {
+    const current = _editing();
+    if (!current) return;
+
+    return senderData({ ...current, data: { ...current.data, ...data } });
+  };
+
+  const editing = _editing as Accessor<{ id: string; data: D }>;
+  return { editing, updateField, updateData, close, closing, directClose };
+};

package/src/ui/components/EditPanel.tsx

@@ -0,0 +1,89 @@
+import { type JSX, Show } from 'solid-js';
+
+import type { NodeData } from '#services/main.machine.typings';
+
+import { clickOutside } from '../globals/directives';
+import { cn } from '../utils';
+import { useHook } from './EditPanel.hooks';
+import type { EditPanelProps } from './EditPanel.types';
+
+/**
+ * Generic overlay edit panel component for modifying the data of the currently
+ * active/double-clicked flowchart node.
+ *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ *
+ * @param props - Edit panel configuration properties of type
+ *   {@linkcode EditPanelProps}.
+ *
+ * @returns The rendered Solid component or `null` when no node is being edited.
+ *
+ * @see {@linkcode useHook}, {@linkcode clickOutside}
+ */
+export const EditPanel = <D extends NodeData = NodeData>(
+  props: EditPanelProps<D>,
+): JSX.Element => {
+  void clickOutside;
+  const hooks = useHook<D>(props.timeout);
+  const classList = () =>
+    props.classList instanceof Function ? props.classList(hooks) : props.classList;
+
+  return (
+    <Show when={hooks.editing()}>
+      {node => (
+        <div
+          class={cn(
+            `w-80 cursor-default rounded-2xl border border-gray-200 bg-white/95 p-4 shadow-xl backdrop-blur-md transition-all ${props.class ?? ''}`,
+          )}
+          classList={classList()}
+          style={props.style}
+          onMouseDown={e => e.stopPropagation()}
+          use:clickOutside={hooks.close}
+        >
+          <div class='flex flex-col gap-3'>
+            <Show
+              when={props.header}
+              keyed
+
+              fallback={
+                <div class='flex items-center justify-between border-b border-gray-100 pb-2'>
+                  <div class='flex items-center gap-2'>
+                    <h3 class='text-sm font-bold text-gray-800'>Edit</h3>
+
+                    <span class='font-mono text-[11px] text-gray-400'>
+                      {node().id}
+                    </span>
+                  </div>
+
+                  <button
+                    type='button'
+                    onClick={hooks.close}
+                    title='Close editor'
+                    aria-label='Close editor'
+
+                    class='cursor-pointer rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700'
+                  >
+                    <svg
+                      class='size-4'
+                      viewBox='0 0 24 24'
+                      fill='none'
+                      stroke='currentColor'
+                      stroke-width='2'
+                    >
+                      <path d='M18 6L6 18M6 6l12 12' />
+                    </svg>
+                  </button>
+                </div>
+              }
+            >
+              {header => header({ id: node().id, close: hooks.close })}
+            </Show>
+
+            {props.children(hooks)}
+          </div>
+        </div>
+      )}
+    </Show>
+  );
+};

package/src/ui/components/EditPanel.types.ts

@@ -0,0 +1,49 @@
+import type { Component, JSX } from 'solid-js';
+
+import type { ClassList } from '../globals/types';
+import { useHook } from './EditPanel.hooks';
+import type { NodeData } from './FlowChart';
+
+/**
+ * Render properties and mutation callbacks provided to {@linkcode EditPanel} children
+ * or custom component.
+ *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ */
+export type EditPanelChildProps<D extends NodeData = NodeData> = ReturnType<
+  typeof useHook<D>
+>;
+
+/**
+ * Configuration properties for the generic {@linkcode EditPanel} component.
+ *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ */
+export type EditPanelProps<D extends NodeData = NodeData> = {
+  /** Optional additional CSS classes for the outer container card. */
+  class?: string;
+  /** Optional class map for conditional styling. */
+  classList?: ClassList | ((hooks: EditPanelChildProps<D>) => ClassList);
+  /** Optional inline CSS styles. */
+  style?: JSX.CSSProperties | string;
+  /**
+   * Custom header renderer.
+   *
+   * @param props - Header props containing the edited node `id` and `close`
+   *   callback.
+   */
+  header?: Component<{ id: string; close: () => void }>;
+  /**
+   * Custom content renderer or static children. When provided as a function,
+   * receives {@linkcode EditPanelChildProps}.
+   */
+  children: Component<EditPanelChildProps<D>>;
+
+  /**
+   * Optional delay in milliseconds before closing the editor panel to allow exit
+   * transitions.
+   */
+  timeout?: number;
+};

package/src/ui/components/FlowChart.context.ts

@@ -1,10 +1,12 @@
 import { interpret } from '@bemedev/app';
 
+import { clamp } from '#helpers/clamp';
 import { createContext } from '#helpers/createContext';
 import { machine } from '#main-machine';
 import {
   BOUNDS_CONSTRAINTS,
   DEFAULT_INPUT_OFFSET,
+  DEFAULT_SIZE,
   getDefaultOutputOffset,
 } from '#services/main.machine.data';
 import type { Dimension, Point } from '#services/main.machine.typings';
@@ -48,14 +50,21 @@ export const [Provider, useFlow] = createContext(
          *   {@linkcode Board}.
          * @param x - Desired X position in pixels.
          * @param y - Desired Y position in pixels.
-         * @param nodeWidth - Node width in pixels, defaults to `192`.
-         * @param nodeHeight - Node height in pixels, defaults to `50`.
+         * @param nodeWidth - Node width in pixels, defaults to `DEFAULT_SIZE.width`.
+         * @param nodeHeight - Node height in pixels, defaults to
+         *   `DEFAULT_SIZE.height`.
          *
          * @returns Clamped coordinate of type {@linkcode Point}.
          *
-         * @see {@linkcode BOUNDS_CONSTRAINTS}
+         * @see {@linkcode BOUNDS_CONSTRAINTS}, {@linkcode DEFAULT_SIZE}
          */
-        clampPosition: (board, x, y, nodeWidth = 192, nodeHeight = 50): Point => {
+        clampPosition: (
+          board,
+          x,
+          y,
+          nodeWidth = DEFAULT_SIZE.width,
+          nodeHeight = DEFAULT_SIZE.height,
+        ): Point => {
           const container = board?.parent;
           if (!container) return { x, y };
 
@@ -81,10 +90,7 @@ export const [Provider, useFlow] = createContext(
               nodeHeight,
           );
 
-          return {
-            x: Math.min(Math.max(x, minX), maxX),
-            y: Math.min(Math.max(y, minY), maxY),
-          };
+          return { x: clamp(x, minX, maxX), y: clamp(y, minY, maxY) };
         },
 
         /**
@@ -95,20 +101,24 @@ export const [Provider, useFlow] = createContext(
          *
          * @returns Calculated dimension object of type {@linkcode Dimension}.
          *
-         * @see {@linkcode DEFAULT_INPUT_OFFSET}, {@linkcode getDefaultOutputOffset}
+         * @see {@linkcode DEFAULT_INPUT_OFFSET}, {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_SIZE}
          */
         calculateDimensions: (
           position: Point,
           parentDimension: Pick<
             Dimension,
             'width' | 'height' | 'outputOffset' | 'inputOffset'
-          > = { width: 192, height: 50, inputOffset: DEFAULT_INPUT_OFFSET },
+          > = {
+            width: DEFAULT_SIZE.width,
+            height: DEFAULT_SIZE.height,
+            inputOffset: DEFAULT_INPUT_OFFSET,
+          },
         ): Dimension => {
           const width = parentDimension.width;
           const height = parentDimension.height;
           const outputOffset =
             parentDimension.outputOffset ?? getDefaultOutputOffset(width);
-          const inputOffset = parentDimension.inputOffset!;
+          const inputOffset = parentDimension.inputOffset ?? DEFAULT_INPUT_OFFSET;
 
           const output = {
             x: position.x + outputOffset.x,

package/src/ui/components/FlowChart.tsx

@@ -1,53 +1,14 @@
 import { createState } from '@bemedev/app-solidjs';
-import type { inferT } from '@bemedev/app/typings';
-import { Component, onCleanup, onMount } from 'solid-js';
+import { type JSX, onCleanup, onMount } from 'solid-js';
+
+import { DEFAULT_NODES } from '#services/main.machine.data';
+import type { NodeData, NodeProps } from '#services/main.machine.typings';
 
-import { DEFAULT_NODES } from '../../services/main.machine.data';
-import type { edgeJSON, nodeJSON } from '../../services/main.machine.typings';
 import { useFlow } from './FlowChart.context';
+import type { FlowProps } from './FlowChart.types';
 import { NodesBoard } from './NodesBoard';
 
-/** Serialized node properties type inferred from schema {@linkcode nodeJSON}. */
-export type NodeProps = inferT<typeof nodeJSON>;
-
-/** Serialized edge properties type inferred from schema {@linkcode edgeJSON}. */
-export type EdgeProps = inferT<typeof edgeJSON>;
-
-/**
- * Configuration options and callback handlers for the {@linkcode FlowChart}
- * component.
- */
-export type FlowProps = {
-  /** Initial flowchart state configuration with nodes and edges. */
-  config?: {
-    nodes?: (NodeProps & { id: string })[];
-    edges?: (EdgeProps & { id: string })[];
-  };
-  /**
-   * Callback triggered when a new node is created.
-   *
-   * @param node - The created node object of type {@linkcode NodeProps}.
-   */
-  onNodeAdded?: (node: NodeProps) => void;
-  /**
-   * Callback triggered when a node is deleted.
-   *
-   * @param nodeId - The identifier of the deleted node.
-   */
-  onNodeDeleted?: (nodeId: string) => void;
-  /**
-   * Callback triggered when an edge is created.
-   *
-   * @param edge - The created edge object of type {@linkcode EdgeProps}.
-   */
-  onEdgeAdded?: (edge: EdgeProps) => void;
-  /**
-   * Callback triggered when an edge is deleted.
-   *
-   * @param edgeId - The identifier of the deleted edge.
-   */
-  onEdgeDeleted?: (edgeId: string) => void;
-};
+export type { NodeData, NodeProps };
 
 // const PARENT_CHILD_GAP_WIDTH = 75;
 
@@ -55,6 +16,9 @@ export type FlowProps = {
  * Flowchart board canvas component that renders interactive nodes, edges, pan/zoom,
  * and toolbar controls.
  *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ *
  * @param props - Flowchart configuration and event handlers of type
  *   {@linkcode FlowProps}.
  *
@@ -62,7 +26,9 @@ export type FlowProps = {
  *
  * @see {@linkcode NodesBoard}, {@linkcode useFlow}, {@linkcode DEFAULT_NODES}
  */
-export const FlowChart: Component<FlowProps> = props => {
+export const FlowChart = <D extends NodeData = NodeData>(
+  props: FlowProps<D>,
+): JSX.Element => {
   const primaryNodes = props.config?.nodes ?? DEFAULT_NODES;
   const primaryEdges = props.config?.edges;
   const service = useFlow();
@@ -71,10 +37,13 @@ export const FlowChart: Component<FlowProps> = props => {
 
   onMount(() => {
     service.resume();
-
     service.send({
       type: 'CONFIGURE',
-      payload: { nodes: primaryNodes, edges: primaryEdges ?? [] },
+      payload: {
+        nodes: primaryNodes,
+        edges: primaryEdges ?? [],
+        defaultData: props.defaultData,
+      },
     });
   });
 
@@ -82,7 +51,6 @@ export const FlowChart: Component<FlowProps> = props => {
     <div
       class='relative h-full w-full'
       onMouseUp={() => service.send('CLEAR_NEW_EDGE')}
-
       onMouseMove={({ clientX, clientY }) => {
         if (hasNewEdge())
           service.send({
@@ -92,15 +60,10 @@ export const FlowChart: Component<FlowProps> = props => {
       }}
     >
       <div
-        class='relative h-full w-full bg-white bg-size-[30px_30px]'
-
-        style={{
-          cursor: hasNewEdge() ? 'inherit' : 'crosshair',
-          'background-image':
-            'radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)',
-        }}
+        class='h-full w-full'
+        style={{ cursor: hasNewEdge() ? 'inherit' : 'crosshair' }}
       >
-        <NodesBoard />
+        <NodesBoard panels={props.panels} component={props.component} />
       </div>
     </div>
   );

package/src/ui/components/FlowChart.types.ts

@@ -0,0 +1,92 @@
+import type { NotUndefined } from '@bemedev/app/bemedev';
+import type { Component } from 'solid-js';
+
+import type { EdgeProps } from '#services/main.machine.typings';
+
+import type { NodeData, NodeProps } from './FlowChart';
+
+/** Overlay panel slots positioned around the flowchart canvas. */
+export type FlowPanels = {
+  /** Top-left corner overlay panel slot component of type {@linkcode Component}. */
+  topLeft?: Component;
+  /** Top-right corner overlay panel slot component of type {@linkcode Component}. */
+  topRight?: Component;
+  /** Bottom-left corner overlay panel slot component of type {@linkcode Component}. */
+  bottomLeft?: Component;
+};
+
+/**
+ * Configuration options and callback handlers for the {@linkcode FlowChart}
+ * component.
+ *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ */
+export type FlowProps<D extends NodeData = NodeData> = {
+  /** Optional delay in milliseconds before mounting the flowchart canvas. */
+  delay?: number;
+  /** Initial flowchart state configuration with nodes and edges. */
+  config?: {
+    nodes?: (NodeProps<D> & { id: string })[];
+    edges?: (EdgeProps & { id: string })[];
+  };
+  /** Custom node component to render inside each flowchart node. */
+  component?: Component<D>;
+
+  /** Default data for new nodes created in the flowchart. */
+  defaultData?: D;
+  /** Custom overlay panels positioned around the canvas. */
+  panels?: FlowPanels;
+  /**
+   * Callback triggered when a new node is created.
+   *
+   * @param node - The created node object of type {@linkcode NodeProps}.
+   */
+  onNodeAdded?: (node: NodeProps<D>) => void;
+  /**
+   * Callback triggered when a node is deleted.
+   *
+   * @param nodeId - The identifier of the deleted node.
+   */
+  onNodeDeleted?: (nodeId: string) => void;
+  /**
+   * Callback triggered when an edge is created.
+   *
+   * @param edge - The created edge object of type {@linkcode EdgeProps}.
+   */
+  onEdgeAdded?: (edge: EdgeProps) => void;
+  /**
+   * Callback triggered when an edge is deleted.
+   *
+   * @param edgeId - The identifier of the deleted edge.
+   */
+  onEdgeDeleted?: (edgeId: string) => void;
+};
+
+/**
+ * Type alias extracting the non-undefined flowchart configuration object.
+ *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ */
+export type ConfigFrom<D extends NodeData = NodeData> = NotUndefined<
+  FlowProps<D>['config']
+>;
+
+/**
+ * Type alias extracting the non-undefined list of nodes from flowchart
+ * configuration.
+ *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ */
+export type NodesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['nodes']>;
+
+/**
+ * Type alias extracting the non-undefined list of edges from flowchart
+ * configuration.
+ *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ */
+export type EdgesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['edges']>;