@bemedev/mind-flow 0.1.1 → 0.3.0

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

@@ -1,366 +1,260 @@
 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 { createContext } from '#helpers/createContext';
+import { machine } from '#main-machine';
 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. */
-type Edge = {
-  /** Source node identifier. */
-  from: string;
-} & Vector;
+} from '#services/main.machine.data';
+import type { Dimension, Point } from '#services/main.machine.typings';
 
 /**
  * Solid Context Provider component and hook for accessing flowchart board state,
  * services, and zoom.
+ *
+ * @see {@linkcode machine}, {@linkcode createContext}
  */
 export const [Provider, useFlow] = createContext(
   () => {
-    /**
-     * Shared state machine interpreter service instance for flowchart state
-     * management.
-     */
+    /** Shared service for flowchart state management. */
     const service = interpret(machine, {
-      context: {},
-      pContext: { generatedId: null },
+      context: { zoom: 1, edgesPositions: {}, bounds: { x: 0, y: 0 } },
+      pContext: {
+        generatedId: null,
+        dimensions: {},
+
+        /**
+         * Converts viewport screen coordinates to unscaled board coordinates.
+         *
+         * @param clientX - Client X coordinate in pixels.
+         * @param clientY - Client Y coordinate in pixels.
+         * @param el - Board layout details of type {@linkcode Board}.
+         *
+         * @returns Calculated 2D coordinate of type {@linkcode Point}.
+         */
+        getBoardPosition(clientX, clientY, el): Point {
+          if (!el) return { x: clientX, y: clientY };
+          const currentZoom = service.state.context.zoom;
+          const x = (clientX - el.self.left) / currentZoom;
+          const y = (clientY - el.self.top) / currentZoom;
+          return { x, y };
+        },
+
+        /**
+         * Clamps given coordinates within board boundaries.
+         *
+         * @param board - Board layout and container details of type
+         *   {@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`.
+         *
+         * @returns Clamped coordinate of type {@linkcode Point}.
+         *
+         * @see {@linkcode BOUNDS_CONSTRAINTS}
+         */
+        clampPosition(board, x, y, nodeWidth = 192, nodeHeight = 50): Point {
+          const container = board?.parent;
+          if (!container) return { x, y };
+
+          const currentZoom = service.state.context.zoom ?? 1;
+
+          const minX =
+            container.scrollLeft / currentZoom + BOUNDS_CONSTRAINTS.horizontal;
+
+          const maxX = Math.max(
+            minX,
+            (container.scrollLeft + container.width) / currentZoom -
+              BOUNDS_CONSTRAINTS.horizontal -
+              nodeWidth,
+          );
+
+          const minY =
+            container.scrollTop / currentZoom + BOUNDS_CONSTRAINTS.vertical;
+
+          const maxY = Math.max(
+            minY,
+            (container.scrollTop + container.height) / currentZoom -
+              BOUNDS_CONSTRAINTS.vertical -
+              nodeHeight,
+          );
+
+          return {
+            x: Math.min(Math.max(x, minX), maxX),
+            y: Math.min(Math.max(y, minY), maxY),
+          };
+        },
+
+        /**
+         * Computes node dimension, connection points, and handle offsets.
+         *
+         * @param position - Node position of type {@linkcode Point}.
+         * @param parentDimension - Optional sizing and offsets to inherit.
+         *
+         * @returns Calculated dimension object of type {@linkcode Dimension}.
+         *
+         * @see {@linkcode DEFAULT_INPUT_OFFSET}, {@linkcode getDefaultOutputOffset}
+         */
+        calculateDimensions: (
+          position: Point,
+          parentDimension: Pick<
+            Dimension,
+            'width' | 'height' | 'outputOffset' | 'inputOffset'
+          > = { width: 192, height: 50, inputOffset: DEFAULT_INPUT_OFFSET },
+        ): Dimension => {
+          const width = parentDimension.width;
+          const height = parentDimension.height;
+          const outputOffset =
+            parentDimension.outputOffset ?? getDefaultOutputOffset(width);
+          const inputOffset = parentDimension.inputOffset!;
+
+          const output = {
+            x: position.x + outputOffset.x,
+            y: position.y + outputOffset.y,
+          };
+          const input = {
+            x: position.x + inputOffset.x,
+            y: position.y + inputOffset.y,
+          };
+
+          return { width, height, output, input, outputOffset, inputOffset };
+        },
+      },
     });
 
-    const zoom = createSignal(1);
-    const newEdge = createSignal<Edge>();
-    const [boardRef, setBoardRef] = createSignal<HTMLDivElement>();
-
-    const [dimensions, setDimensions] = createSignal<Record<string, Dimensions>>(
-      {},
-      { equals: dequal },
-    );
-
-    /**
-     * Converts client viewport coordinates to board canvas coordinates adjusted for
-     * zoom and scroll.
-     *
-     * @param clientX - Viewport horizontal coordinate.
-     * @param clientY - Viewport vertical coordinate.
-     *
-     * @returns Board coordinate point of type {@linkcode Point}.
-     */
-    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]();
-      const x = clientX - rect.left / currentZoom;
-      const y = clientY - rect.top / currentZoom;
-      return { x, y };
-    };
-
-    const [edgesPositions, setEdgesPositions] = createSignal<Record<string, Vector>>(
-      {},
-      { equals: false },
-    );
-
-    /**
-     * Clamps node coordinates within the visible container boundaries.
-     *
-     * @param x - Desired horizontal X coordinate.
-     * @param y - Desired vertical Y coordinate.
-     * @param nodeWidth - Width of the node element in pixels, defaults to `192`.
-     * @param nodeHeight - Height of the node element in pixels, defaults to `50`.
-     *
-     * @returns Clamped coordinate point of type {@linkcode Point}.
-     */
-    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,
-      );
+    // #endregion
 
-      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 }) => ({
+    service.addOptions(({ assign }) => ({
       actions: {
-        placeChild: assign('context.data.nodes', {
-          ADD_CHILD: ({ payload, context: { data }, pContext: { generatedId } }) => {
-            const nodes = data?.nodes ?? [];
+        placeChild: assign('data.nodes', {
+          ADD_CHILD: ({ payload, context: { data, board }, pContext }) => {
+            if (!board) return data?.nodes;
+            const nodes = data?.nodes;
             if (!payload) return nodes;
 
-            const parentNode = nodes.find(node => node.id === payload);
+            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 parentDimension = pContext.dimensions[payload];
+
+            const id = `node-${pContext.generatedId}`;
+            const width = parentDimension?.width ?? 192;
+            const height = parentDimension?.height ?? 50;
             const initialX = parentNode.position.x + width + PARENT_CHILD_GAP_WIDTH;
             const initialY = parentNode.position.y;
-            const position = clampPosition(initialX, initialY, width, height);
+            const position = pContext.clampPosition(
+              board,
+              initialX,
+              initialY,
+              width,
+              height,
+            );
+            const dimension = pContext.calculateDimensions(
+              position,
+              parentDimension,
+            );
+
+            nodes?.push({
+              id,
+              data: { content: '<Nouveau nœud>' },
+              input: true,
+              position,
+            });
+            pContext.dimensions[id] = dimension;
 
-            return [
-              ...nodes,
-              { id, data: { content: '<Nouveau nœud>' }, input: true, position },
-            ];
+            return nodes;
           },
         }),
 
-        placeParent: assign('context.data.nodes', {
-          ADD_PARENT: ({ context: { data }, pContext: { generatedId } }) => {
-            const nodes = data?.nodes ?? [];
-            const id = `node-${generatedId}`;
-            const container = boardRef()?.parentElement;
+        placeParent: assign('data.nodes', {
+          ADD_PARENT: ({ context: { data, zoom = 1, board }, pContext }) => {
+            if (!board) return data?.nodes;
+            const nodes = data?.nodes;
+            const id = `node-${pContext.generatedId}`;
+            const container = board.parent;
             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 width = container?.width ?? 0;
+            const height = container?.height ?? 0;
+            const currentZoom = zoom;
             const x = (scrollLeft + width / 2) / currentZoom;
             const y = (scrollTop + height / 2) / currentZoom;
+            const position = pContext.clampPosition(board, x, y);
+            const dimension = pContext.calculateDimensions(position);
+
+            nodes?.push({
+              id,
+              data: { content: '<Nouveau nœud>' },
+              input: false,
+              position,
+            });
 
-            return [
-              ...nodes,
-              {
-                id,
-                data: { content: '<Nouveau nœud>' },
-                input: false,
-                position: { x, y },
-              },
-            ];
+            pContext.dimensions[id] = dimension;
+            return nodes;
           },
         }),
 
-        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;
+        placeSibling: assign('data.nodes', {
+          ADD_SIBLING: ({ payload, context: { data, board }, pContext }) => {
+            if (!board) return data?.nodes;
+            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);
+            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 parentDimension = pContext.dimensions[parentID];
+            const id = `node-${pContext.generatedId}`;
+            const width = parentDimension?.width ?? 192;
+            const height = parentDimension?.height ?? 50;
             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]) =>
-                edges.some(edge => edge.id === id),
-              );
+            const initialY = parentNode.position.y + PARENT_CHILD_GAP_WIDTH;
+            const position = pContext.clampPosition(
+              board,
+              initialX,
+              initialY,
+              width,
+              height,
+            );
+            const dimension = pContext.calculateDimensions(
+              position,
+              parentDimension,
+            );
 
-              return Object.fromEntries(array);
+            nodes?.push({
+              id,
+              data: { content: '<Nouveau nœud>' },
+              input: true,
+              position,
             });
-          }),
-          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 };
+            pContext.dimensions[id] = dimension;
+            return nodes;
+          },
+        }),
 
-                    setDimensions(
-                      produce(data => {
-                        if (data[payload.id]) {
-                          data[payload.id] = {
-                            ...data[payload.id],
-                            input: { x: x1, y: y1 },
-                          };
-                        }
-                      }),
-                    );
-                  }
-                });
-              }),
+        moveNewEdge: assign('newEdge', {
+          MOVE_NEW_EDGE: ({ context: { newEdge, board }, payload, pContext }) => {
+            if (!board) return undefined;
+            if (!newEdge) return undefined;
+            const { x: x1, y: y1 } = pContext.getBoardPosition(
+              payload.x,
+              payload.y,
+              board,
             );
+            return { ...newEdge, x1, y1 };
           },
         }),
       },
     }));
 
     service.start();
-
-    return {
-      dimensions: [dimensions, setDimensions] as const,
-      newEdge,
-      board: [boardRef, setBoardRef] as const,
-      getBoardPoint,
-      edgesPositions: [edgesPositions, setEdgesPositions] as const,
-      service,
-      zoom,
-      clampPosition,
-    };
+    return service;
   },
   { name: 'FlowContext' },
 );

package/src/ui/components/FlowChart.tsx

@@ -1,9 +1,10 @@
+import { createState } from '@bemedev/app-solidjs';
 import type { inferT } from '@bemedev/app/typings';
 import { Component, onCleanup, onMount } from 'solid-js';
 
-import type { edgeJSON, nodeJSON } from '../../services/main.typings';
+import { DEFAULT_NODES } from '../../services/main.machine.data';
+import type { edgeJSON, nodeJSON } from '../../services/main.machine.typings';
 import { useFlow } from './FlowChart.context';
-import { DEFAULT_NODES } from './FlowChart.data';
 import { NodesBoard } from './NodesBoard';
 
 /** Serialized node properties type inferred from schema {@linkcode nodeJSON}. */
@@ -58,44 +59,43 @@ export type FlowProps = {
  *   {@linkcode FlowProps}.
  *
  * @returns The rendered Solid component.
+ *
+ * @see {@linkcode NodesBoard}, {@linkcode useFlow}, {@linkcode DEFAULT_NODES}
  */
 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();
+  const service = useFlow();
+
+  const hasNewEdge = createState(service, { selector: s => !!s.context.newEdge });
 
   onMount(() => {
-    service.start();
+    service.resume();
     service.send({
       type: 'CONFIGURE',
       payload: { nodes: primaryNodes, edges: primaryEdges ?? [] },
     });
   });
 
-  onCleanup(service.stop);
+  onCleanup(service.pause);
 
   return (
     <div
       class='relative h-full w-full'
-      onMouseUp={() => setNewEdge()}
+      onMouseUp={() => service.send('CLEAR_NEW_EDGE')}
       onMouseMove={event => {
-        const edge = newEdge();
-        if (edge) {
-          const boardPoint = getBoardPoint(event.clientX, event.clientY);
-          setNewEdge({ ...edge, x1: boardPoint.x, y1: boardPoint.y });
-        }
+        service.send({
+          type: 'MOVE_NEW_EDGE',
+          payload: { x: event.clientX, y: event.clientY },
+        });
       }}
       style={{}}
     >
       <div
         class='relative h-full w-full bg-white bg-size-[30px_30px]'
         style={{
-          cursor: newEdge() ? 'inherit' : 'crosshair',
+          cursor: hasNewEdge() ? 'inherit' : 'crosshair',
           'background-image':
             'radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)',
         }}