@bemedev/mind-flow 0.0.1

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

@@ -0,0 +1,373 @@
+import { interpret } from '@bemedev/app';
+import { dequal } from 'dequal/lite';
+import { createSignal } from 'solid-js';
+import { produce } from 'solid-js/store';
+import { createContext } from '../../helpers/createContext';
+import { machine } from '../../services/main.machine';
+import type { Point, Vector } from '../../services/main.typings';
+import {
+  BOUNDS_CONSTRAINTS,
+  DEFAULT_INPUT_OFFSET,
+  getDefaultOutputOffset,
+  PARENT_CHILD_GAP_WIDTH,
+} from './FlowChart.data';
+
+/** Layout dimensions and handle offset coordinates for a flowchart node. */
+type Dimensions = {
+  /** Node width in pixels. */
+  width: number;
+  /** Node height in pixels. */
+  height: number;
+  /** Output handle point coordinates of type {@linkcode Point}. */
+  output: Point;
+  /** Input handle point coordinates of type {@linkcode Point}. */
+  input?: Point;
+  /** Output handle relative offset point of type {@linkcode Point}. */
+  outputOffset?: Point;
+  /** Input handle relative offset point of type {@linkcode Point}. */
+  inputOffset?: Point;
+};
+
+/** Connection edge coordinate representation between two endpoints. */
+export type Edge = {
+  /** Source node identifier. */
+  from: string;
+  /** Starting X-coordinate. */
+  x0: number;
+  /** Starting Y-coordinate. */
+  y0: number;
+  /** Ending X-coordinate. */
+  x1: number;
+  /** Ending Y-coordinate. */
+  y1: number;
+};
+
+/**
+ * Shared state machine interpreter service instance for flowchart state
+ * management.
+ */
+const service = interpret(machine, {
+  context: {},
+  pContext: { generatedId: null },
+});
+
+/**
+ * Solid Context Provider component and hook for accessing flowchart board
+ * state, services, and zoom.
+ */
+export const [Provider, useFlow] = createContext(
+  () => {
+    const zoom = createSignal(1);
+    const newEdge = createSignal<Edge>();
+    const [boardRef, setBoardRef] = createSignal<HTMLDivElement>();
+
+    const [dimensions, setDimensions] = createSignal<
+      Record<string, Dimensions>
+    >({}, { equals: dequal });
+
+    const getBoardPoint = (clientX: number, clientY: number): Point => {
+      const el = boardRef();
+      if (!el) return { x: clientX, y: clientY };
+      const rect = el.getBoundingClientRect();
+      const currentZoom = zoom[0]();
+      return {
+        x: (clientX - rect.left) / currentZoom,
+        y: (clientY - rect.top) / currentZoom,
+      };
+    };
+
+    const [edgesPositions, setEdgesPositions] = createSignal<
+      Record<string, Vector>
+    >({}, { equals: false });
+
+    const clampPosition = (
+      x: number,
+      y: number,
+      nodeWidth = 192,
+      nodeHeight = 50,
+    ): Point => {
+      const container = boardRef()?.parentElement;
+      if (!container) return { x, y };
+      const currentZoom = zoom[0]();
+
+      const minX =
+        container.scrollLeft / currentZoom + BOUNDS_CONSTRAINTS.horizontal;
+      const maxX = Math.max(
+        minX,
+        (container.scrollLeft + container.clientWidth) / currentZoom -
+          BOUNDS_CONSTRAINTS.horizontal -
+          nodeWidth,
+      );
+
+      const minY =
+        container.scrollTop / currentZoom + BOUNDS_CONSTRAINTS.vertical;
+      const maxY = Math.max(
+        minY,
+        (container.scrollTop + container.clientHeight) / currentZoom -
+          BOUNDS_CONSTRAINTS.vertical -
+          nodeHeight,
+      );
+
+      return {
+        x: Math.min(Math.max(x, minX), maxX),
+        y: Math.min(Math.max(y, minY), maxY),
+      };
+    };
+
+    service.addOptions(({ voidAction, batch, assign }) => ({
+      actions: {
+        placeChild: assign('context.data.nodes', {
+          ADD_CHILD: ({
+            payload,
+            context: { data },
+            pContext: { generatedId },
+          }) => {
+            const nodes = data?.nodes ?? [];
+            if (!payload) return nodes;
+
+            const parentNode = nodes.find(node => node.id === payload);
+            if (!parentNode) return nodes;
+
+            const id = `node-${generatedId}`;
+            const width = dimensions()[payload]?.width ?? 0;
+            const height = dimensions()[payload]?.height ?? 0;
+            const initialX =
+              parentNode.position.x + width + PARENT_CHILD_GAP_WIDTH;
+            const initialY = parentNode.position.y;
+            const position = clampPosition(
+              initialX,
+              initialY,
+              width,
+              height,
+            );
+
+            return [
+              ...nodes,
+              {
+                id,
+                data: { content: '<Nouveau nœud>' },
+                input: true,
+                position,
+              },
+            ];
+          },
+        }),
+
+        placeParent: assign('context.data.nodes', {
+          ADD_PARENT: ({
+            context: { data },
+            pContext: { generatedId },
+          }) => {
+            const nodes = data?.nodes ?? [];
+            const id = `node-${generatedId}`;
+            const container = boardRef()?.parentElement;
+            const scrollLeft = container?.scrollLeft ?? 0;
+            const scrollTop = container?.scrollTop ?? 0;
+            const width = container?.clientWidth ?? 0;
+            const height = container?.clientHeight ?? 0;
+            const currentZoom = zoom[0]();
+            const x = (scrollLeft + width / 2) / currentZoom;
+            const y = (scrollTop + height / 2) / currentZoom;
+
+            return [
+              ...nodes,
+              {
+                id,
+                data: { content: '<Nouveau nœud>' },
+                input: false,
+                position: { x, y },
+              },
+            ];
+          },
+        }),
+
+        placeSibling: assign('context.data.nodes', {
+          ADD_SIBLING: ({
+            payload,
+            context: { data },
+            pContext: { generatedId },
+          }) => {
+            const edges = data?.edges ?? [];
+            const nodes = data?.nodes ?? [];
+
+            const parentID = edges.find(edge => edge.to === payload)?.from;
+            if (!parentID) return nodes;
+
+            const parentNode = nodes.find(node => node.id === parentID);
+            if (!parentNode) return nodes;
+
+            const id = `node-${generatedId}`;
+            const width = dimensions()[parentID]?.width ?? 0;
+            const height = dimensions()[parentID]?.height ?? 0;
+            const initialX =
+              parentNode.position.x + width + PARENT_CHILD_GAP_WIDTH;
+            const initialY = parentNode.position.y + 100;
+            const position = clampPosition(
+              initialX,
+              initialY,
+              width,
+              height,
+            );
+
+            return [
+              ...nodes,
+              {
+                id,
+                data: { content: '<Nouveau nœud>' },
+                input: true,
+                position,
+              },
+            ];
+          },
+        }),
+
+        buildUI: batch(
+          voidAction(({ context: { data } }) => {
+            const edges = data?.edges ?? [];
+            setEdgesPositions(data => {
+              const array = Object.entries({ ...data }).filter(([id]) => {
+                return edges?.some(edge => edge.id === id);
+              });
+
+              return Object.fromEntries(array);
+            });
+          }),
+          voidAction({
+            else: ({ context: { data } }) => {
+              const edges = data?.edges ?? [];
+              setEdgesPositions(
+                produce(next => {
+                  edges?.forEach(({ from, id, to }) => {
+                    const output = dimensions()[from]?.output;
+                    const input = dimensions()[to]?.input;
+                    if (output && input) {
+                      next[id] = {
+                        x0: output.x,
+                        y0: output.y,
+                        x1: input.x,
+                        y1: input.y,
+                      };
+                    }
+                  });
+                }),
+              );
+            },
+            MOVE: ({ context: { data }, payload }) => {
+              const edges = data?.edges ?? [];
+
+              setEdgesPositions(
+                produce(next => {
+                  edges?.forEach(({ from, to, id }) => {
+                    if (from === payload.id) {
+                      const offset =
+                        dimensions()[payload.id]?.outputOffset ??
+                        getDefaultOutputOffset(
+                          dimensions()[payload.id]?.width,
+                        );
+                      const x0 = payload.x + offset.x;
+                      const y0 = payload.y + offset.y;
+                      next[id] = { ...next[id], x0, y0 };
+                      setDimensions(
+                        produce(data => {
+                          if (data[payload.id]) {
+                            data[payload.id] = {
+                              ...data[payload.id],
+                              output: { x: x0, y: y0 },
+                            };
+                          }
+                        }),
+                      );
+                    }
+                    if (to === payload.id) {
+                      const offset =
+                        dimensions()[payload.id]?.inputOffset ??
+                        DEFAULT_INPUT_OFFSET;
+                      const x1 = payload.x + offset.x;
+                      const y1 = payload.y + offset.y;
+                      next[id] = { ...next[id], x1, y1 };
+                      setDimensions(
+                        produce(data => {
+                          if (data[payload.id]) {
+                            data[payload.id] = {
+                              ...data[payload.id],
+                              input: { x: x1, y: y1 },
+                            };
+                          }
+                        }),
+                      );
+                    }
+                  });
+                }),
+              );
+            },
+          }),
+          assign('context.updatingUI', () => true),
+        ),
+
+        buildImmediateUI: voidAction({
+          MOVE_IMMEDIATE: ({ context: { data }, payload }) => {
+            const edges = data?.edges ?? [];
+
+            setEdgesPositions(
+              produce(next => {
+                edges?.forEach(({ from, to, id }) => {
+                  if (from === payload.id) {
+                    const offset =
+                      dimensions()[payload.id]?.outputOffset ??
+                      getDefaultOutputOffset(
+                        dimensions()[payload.id]?.width,
+                      );
+                    const x0 = payload.x + offset.x;
+                    const y0 = payload.y + offset.y;
+                    next[id] = { ...next[id], x0, y0 };
+                    setDimensions(
+                      produce(data => {
+                        if (data[payload.id]) {
+                          data[payload.id] = {
+                            ...data[payload.id],
+                            output: { x: x0, y: y0 },
+                          };
+                        }
+                      }),
+                    );
+                  }
+                  if (to === payload.id) {
+                    const offset =
+                      dimensions()[payload.id]?.inputOffset ??
+                      DEFAULT_INPUT_OFFSET;
+                    const x1 = payload.x + offset.x;
+                    const y1 = payload.y + offset.y;
+                    next[id] = { ...next[id], x1, y1 };
+                    setDimensions(
+                      produce(data => {
+                        if (data[payload.id]) {
+                          data[payload.id] = {
+                            ...data[payload.id],
+                            input: { x: x1, y: y1 },
+                          };
+                        }
+                      }),
+                    );
+                  }
+                });
+              }),
+            );
+          },
+        }),
+      },
+    }));
+
+    service.start();
+
+    return {
+      dimensions: [dimensions, setDimensions] as const,
+      newEdge,
+      board: [boardRef, setBoardRef] as const,
+      getBoardPoint,
+      edgesPositions: [edgesPositions, setEdgesPositions] as const,
+      service,
+      zoom,
+    };
+  },
+  { name: 'FlowContext' },
+);

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

@@ -0,0 +1,89 @@
+import type { NodeProps } from './FlowChart';
+
+/**
+ * Horizontal gap in pixels between a parent node and newly created child
+ * node.
+ */
+export const PARENT_CHILD_GAP_WIDTH = 100;
+
+// #region Node & Handle Layout Constants & Formulas
+/** Border width in pixels for a node container. */
+export const NODE_BORDER_WIDTH = 1.5;
+
+/** Diameter in pixels of a node connection handle. */
+export const HANDLE_SIZE = 12;
+
+/** Radius in pixels of a node connection handle. */
+export const HANDLE_RADIUS = HANDLE_SIZE / 2;
+
+/** Top margin in pixels for positioning connection handles. */
+export const HANDLE_MARGIN_TOP = 12;
+
+/** Horizontal container offset in pixels for handle placement. */
+export const HANDLE_CONTAINER_OFFSET_X = 18;
+
+/** Y-axis center coordinate in pixels of a handle. */
+export const HANDLE_CENTER_Y = HANDLE_MARGIN_TOP + HANDLE_RADIUS;
+
+/** X-axis center offset in pixels from the node container edge. */
+export const HANDLE_CENTER_X_OFFSET =
+  HANDLE_CONTAINER_OFFSET_X - NODE_BORDER_WIDTH - HANDLE_RADIUS;
+
+/** Default X offset in pixels for input connection handles. */
+export const DEFAULT_INPUT_OFFSET_X = -HANDLE_CENTER_X_OFFSET;
+
+/** Default Y offset in pixels for input connection handles. */
+export const DEFAULT_INPUT_OFFSET_Y = HANDLE_CENTER_Y;
+
+/** Default 2D offset coordinates for input connection handles. */
+export const DEFAULT_INPUT_OFFSET = {
+  x: DEFAULT_INPUT_OFFSET_X,
+  y: DEFAULT_INPUT_OFFSET_Y,
+};
+
+/**
+ * Dimensions representing width and height of the flow chart container
+ * canvas.
+ */
+export const CONTAINER_DIMENSIONS = { WIDTH: 5000, HEIGHT: 3500 };
+
+/**
+ * Computes default output handle offset coordinates given a node width.
+ *
+ * @param width - Node width in pixels, defaults to `0`.
+ *
+ * @returns 2D offset coordinates for the output handle.
+ */
+export const getDefaultOutputOffset = (width = 0) => ({
+  x: width + HANDLE_CENTER_X_OFFSET,
+  y: HANDLE_CENTER_Y,
+});
+
+/** Top offset in pixels for node action toolbars. */
+export const TOOLBAR_TOP_OFFSET = 30;
+
+/** Safety buffer in pixels applied above the toolbar. */
+export const TOOLBAR_BUFFER = 5;
+
+/**
+ * Boundary padding constraints for node dragging and positioning within
+ * the viewport.
+ */
+export const BOUNDS_CONSTRAINTS = {
+  horizontal: HANDLE_CONTAINER_OFFSET_X + 2,
+  vertical: TOOLBAR_TOP_OFFSET + TOOLBAR_BUFFER,
+};
+
+/** Multiplier factor used to compute canvas virtual scroll dimensions. */
+export const CANVAS_FACTOR = 5;
+// #endregion
+
+/** Default node items provided when no initial configuration is given. */
+export const DEFAULT_NODES: (NodeProps & { id: string })[] = [
+  {
+    id: 'node-0',
+    data: { content: 'Some text', label: 'Root node' },
+    input: false,
+    position: { x: 350, y: 100 },
+  },
+];

package/src/ui/components/FlowChart.tsx

@@ -0,0 +1,112 @@
+import type { inferT } from '@bemedev/app/typings';
+import { Component, onCleanup, onMount } from 'solid-js';
+import type { edgeJSON, nodeJSON } from '../../services/main.typings';
+import { useFlow } from './FlowChart.context';
+import { NodesBoard } from './NodesBoard';
+import { DEFAULT_NODES } from './FlowChart.data';
+
+/**
+ * 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;
+};
+
+// const PARENT_CHILD_GAP_WIDTH = 75;
+
+/**
+ * Flowchart board canvas component that renders interactive nodes, edges,
+ * pan/zoom, and toolbar controls.
+ *
+ * @param props - Flowchart configuration and event handlers of type
+ *   {@linkcode FlowProps}.
+ *
+ * @returns The rendered Solid component.
+ */
+export const FlowChart: Component<FlowProps> = props => {
+  const primaryNodes = props.config?.nodes ?? DEFAULT_NODES;
+  const primaryEdges = props.config?.edges;
+
+  const {
+    service,
+    newEdge: [newEdge, setNewEdge],
+    getBoardPoint,
+  } = useFlow();
+
+  onMount(() => {
+    service.start();
+    service.send({
+      type: 'CONFIGURE',
+      payload: { nodes: primaryNodes, edges: primaryEdges ?? [] },
+    });
+  });
+
+  onCleanup(service.stop);
+
+  return (
+    <div
+      class='relative h-full w-full'
+      onMouseUp={() => setNewEdge()}
+      onMouseMove={event => {
+        const edge = newEdge();
+        if (edge) {
+          const boardPoint = getBoardPoint(event.clientX, event.clientY);
+          setNewEdge({ ...edge, x1: boardPoint.x, y1: boardPoint.y });
+        }
+      }}
+      style={{}}
+    >
+      <div
+        class='relative h-full w-full bg-white bg-size-[30px_30px]'
+        style={{
+          cursor: newEdge() ? 'inherit' : 'crosshair',
+          'background-image':
+            'radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)',
+        }}
+      >
+        <NodesBoard />
+      </div>
+    </div>
+  );
+};