@bemedev/mind-flow 0.3.1 → 1.0.0

package/src/services/main.machine.ts

@@ -6,7 +6,14 @@ import { nanoid } from 'nanoid';
 /** Type alias for drag-drop state extracted from {@linkcode useDragDropContext}. */
 export type DragDropState = Exclude<ReturnType<typeof useDragDropContext>, null>[0];
 
-import { DEFAULT_INPUT_OFFSET, getDefaultOutputOffset } from './main.machine.data';
+import { clamp } from '..';
+import {
+  DEFAULT_DATA,
+  DEFAULT_INPUT_OFFSET,
+  DEFAULT_SIZE,
+  getDefaultOutputOffset,
+  PARENT_CHILD_GAP_WIDTH,
+} from './main.machine.data';
 import {
   buildEdgeId,
   buildNodeID,
@@ -17,6 +24,7 @@ import {
   edgeJSON,
   extremities,
   newEdge,
+  data,
   nodeJSON,
   point,
   vector,
@@ -24,13 +32,14 @@ import {
   type Dimension,
   type Point,
   type Board,
+  type Vector,
 } from './main.machine.typings';
 
 /**
  * State machine managing flowchart state transitions, nodes, edges, selection, and
  * layout actions.
  *
- * @see {@linkcode calculateDimensions}, {@linkcode buildEdgeId}, {@linkcode buildNodeID}, {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_INPUT_OFFSET}
+ * @see {@linkcode calculateDimensions}, {@linkcode buildEdgeId}, {@linkcode buildNodeID}, {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_INPUT_OFFSET}, {@linkcode DEFAULT_SIZE}, {@linkcode DEFAULT_DATA}
  */
 export const machine = createMachine(
   {
@@ -40,7 +49,7 @@ export const machine = createMachine(
     states: {
       idle: {
         on: {
-          CONFIGURE: { actions: ['configure'], target: '/working' },
+          CONFIGURE: { actions: ['configure'], target: '/construction' },
           CONFIGURE_EMPTY: '/working',
         },
       },
@@ -49,6 +58,7 @@ export const machine = createMachine(
 
       working: {
         on: {
+          CONFIGURE: { actions: ['configure'], target: '/construction' },
           MOVE_IMMEDIATE: {
             actions: [{ name: 'buildUI', description: 'Must be in the ui' }],
           },
@@ -71,8 +81,6 @@ export const machine = createMachine(
             target: '/construction',
           },
 
-          ADD_DIMENSION: { actions: ['addDimension'] },
-
           ADD_SIBLING: {
             actions: [
               'generateID',
@@ -82,6 +90,7 @@ export const machine = createMachine(
             target: '/construction',
           },
 
+          RESIZE: { actions: ['resize', 'buildUI'] },
           MOVE: { actions: ['moveNode', 'buildUI'], target: '/construction' },
           ADD_EDGE: { actions: ['addEdge'], target: '/construction' },
           START_NEW_EDGE: { actions: ['startNewEdge'] },
@@ -93,15 +102,19 @@ export const machine = createMachine(
           ZOOM: { actions: ['zoom'] },
           TOGGLE_ZOOM: { actions: ['toggleZoom'] },
           SET_BOARD: { actions: ['setBoard'] },
+          SET_NODE_DATA: { actions: ['setNodeData'] },
+          EDIT: { actions: ['edit'] },
+          STOP_EDIT: { actions: ['stopEdit'] },
         },
       },
     },
   },
   {
-    eventsMap: type(({ intersection, use, array }) => ({
+    eventsMap: type(({ intersection, use, array, optional }) => ({
       CONFIGURE: {
         nodes: array(intersection(use(nodeJSON), { id: 'string' })),
         edges: array(intersection(use(edgeJSON), { id: 'string' })),
+        defaultData: optional(use(data)),
       },
 
       SET_BOARD: use(board),
@@ -114,13 +127,16 @@ export const machine = createMachine(
       DELETE: 'string',
       SELECT: 'string',
       DESELECT: 'never',
+      EDIT: 'string',
+      STOP_EDIT: 'never',
       ADD_EDGE: use(extremities),
       START_NEW_EDGE: 'string',
       MOVE_NEW_EDGE: use(point),
       CLEAR_NEW_EDGE: 'never',
       ZOOM: 'number',
       TOGGLE_ZOOM: 'never',
-      ADD_DIMENSION: { id: 'string', dimension: use(dimension) },
+      RESIZE: { id: 'string', size: { width: 'number', height: 'number' } },
+      SET_NODE_DATA: { id: 'string', data: use(data) },
     })),
 
     sync: true,
@@ -128,6 +144,7 @@ export const machine = createMachine(
       generatedId: union('string', 'null'),
       previousZoom: optional('number'),
       dimensions: record(use(dimension)),
+      defaultData: optional(use(data)),
 
       getBoardPosition:
         custom<(clientX: number, clientY: number, board: Board) => Point>(),
@@ -172,6 +189,7 @@ export const machine = createMachine(
       edgesPositions: record(use(vector)),
       newEdge: optional(use(newEdge)),
       selected: optional('string'),
+      editing: optional('string'),
       updatingUI: optional('boolean'),
       zoom: 'number',
       bounds: use(point),
@@ -180,21 +198,46 @@ export const machine = createMachine(
 ).provideOptions(({ assign, batch, erase, filter, action }) => ({
   actions: {
     configure: batch(
-      assign('data', { CONFIGURE: ({ payload }) => payload }),
+      assign('data', {
+        CONFIGURE: ({ payload: { nodes, edges } }) => ({ nodes, edges }),
+      }),
       assign('newEdge', () => undefined),
       assign('updatingUI', () => false),
       action(({ pContext }) => {
         pContext.generatedId = null;
       }),
       action({
-        CONFIGURE: ({ payload: { nodes }, pContext: { dimensions } }) => {
+        CONFIGURE: ({ payload: { nodes, defaultData }, pContext }) => {
+          pContext.defaultData = defaultData;
           nodes.forEach(({ id, position }) => {
-            dimensions[id] = calculateDimensions(position);
+            pContext.dimensions[id] = calculateDimensions(position);
           });
         },
       }),
     ),
 
+    setNodeData: assign('data.nodes', {
+      SET_NODE_DATA: ({ context: { data }, payload: { id, data: newData } }) => {
+        return data?.nodes?.map(node => {
+          if (node.id === id) {
+            return { ...node, data: { ...node.data, ...newData } };
+          }
+          return node;
+        });
+      },
+    }),
+
+    setBoard: assign('board', { SET_BOARD: ({ payload }) => payload }),
+    generateID: action(({ pContext }) => (pContext.generatedId = nanoid())),
+    select: assign('selected', { SELECT: ({ payload }) => payload }),
+    clearNewEdge: erase('newEdge'),
+    deselect: batch(erase('selected'), erase('editing')),
+    edit: batch(
+      assign('editing', { EDIT: ({ payload }) => payload }),
+      assign('selected', { EDIT: ({ payload }) => payload }),
+    ),
+    stopEdit: erase('editing'),
+
     startNewEdge: assign('newEdge', {
       START_NEW_EDGE: ({ payload: from, pContext: { dimensions } }) => {
         const { x, y } = dimensions[from].output;
@@ -202,8 +245,6 @@ export const machine = createMachine(
       },
     }),
 
-    setBoard: assign('board', { SET_BOARD: ({ payload }) => payload }),
-
     buildUI: batch(
       assign('edgesPositions', {
         MOVE: ({
@@ -213,11 +254,12 @@ export const machine = createMachine(
         }) => {
           const edges = data?.edges;
           const dimension = dimensions[payload.id];
+          if (!dimension) return;
 
           const outputOffset =
-            dimension?.outputOffset ?? getDefaultOutputOffset(dimension?.width);
+            dimension.outputOffset ?? getDefaultOutputOffset(dimension.width);
 
-          const inputOffset = dimension?.inputOffset ?? DEFAULT_INPUT_OFFSET;
+          const inputOffset = dimension.inputOffset ?? DEFAULT_INPUT_OFFSET;
 
           const output = {
             x: payload.x + outputOffset.x,
@@ -229,107 +271,125 @@ export const machine = createMachine(
             y: payload.y + inputOffset.y,
           };
 
-          if (dimension) {
-            dimension.output = output;
-            dimension.input = input;
-          }
+          dimension.output = output;
+          dimension.input = input;
 
           edges?.forEach(({ from, to, id }) => {
+            const edgePosition = edgesPositions[id];
+            if (!edgePosition) return;
+
             if (from === payload.id) {
-              edgesPositions[id].x0 = output.x;
-              edgesPositions[id].y0 = output.y;
+              edgePosition.x0 = output.x;
+              edgePosition.y0 = output.y;
             }
             if (to === payload.id) {
-              edgesPositions[id].x1 = input.x;
-              edgesPositions[id].y1 = input.y;
+              edgePosition.x1 = input.x;
+              edgePosition.y1 = input.y;
             }
           });
 
           return edgesPositions;
         },
+
         MOVE_IMMEDIATE: ({
           context: { data, edgesPositions },
           payload,
           pContext: { dimensions },
         }) => {
-          const edges = data?.edges;
+          data?.edges?.forEach(({ from, to, id }) => {
+            const dimension = dimensions[payload.id];
+            const edgePosition = edgesPositions[id];
+            if (!edgePosition || !dimension) return;
 
-          edges?.forEach(({ from, to, id }) => {
             if (from === payload.id) {
-              const dimension = dimensions[payload.id];
               const offset =
-                dimension?.outputOffset ?? getDefaultOutputOffset(dimension?.width);
+                dimension.outputOffset ?? getDefaultOutputOffset(dimension.width);
 
               const x0 = payload.x + offset.x;
               const y0 = payload.y + offset.y;
-              edgesPositions[id].x0 = x0;
-              edgesPositions[id].y0 = y0;
-
-              if (dimension) {
-                dimension.output.x = x0;
-                dimension.output.y = y0;
-              }
+              edgePosition.x0 = x0;
+              edgePosition.y0 = y0;
+              dimension.output = { x: x0, y: y0 };
             }
 
             if (to === payload.id) {
-              const dimension = dimensions[payload.id];
               const offset = dimension?.inputOffset ?? DEFAULT_INPUT_OFFSET;
-
               const x1 = payload.x + offset.x;
               const y1 = payload.y + offset.y;
-              edgesPositions[id].x1 = x1;
-              edgesPositions[id].y1 = y1;
-
-              if (dimension) {
-                dimension.input = { x: x1, y: y1 };
-              }
+              edgePosition.x1 = x1;
+              edgePosition.y1 = y1;
+              dimension.input = { x: x1, y: y1 };
             }
           });
 
           return edgesPositions;
         },
-        else: ({ context: { data, edgesPositions }, pContext: { dimensions } }) => {
-          const edges = data?.edges ?? [];
-          edgesPositions = {};
 
-          edges.forEach(({ from, id, to }) => {
+        else: ({ context: { data }, pContext: { dimensions } }) => {
+          const nextEdgesPositions: Record<string, Vector> = {};
+
+          data?.edges?.forEach(({ from, id, to }) => {
             const output = dimensions[from]?.output;
             const input = dimensions[to]?.input;
 
             if (output && input) {
-              edgesPositions[id] = {
+              nextEdgesPositions[id] = {
                 x0: output.x,
                 y0: output.y,
                 x1: input.x,
                 y1: input.y,
               };
-            } else {
-              delete edgesPositions[id];
             }
           });
 
-          return edgesPositions;
+          return nextEdgesPositions;
         },
       }),
 
       assign('updatingUI', () => true),
     ),
 
-    addDimension: action({
-      ADD_DIMENSION: ({ payload: { id, dimension }, pContext: { dimensions } }) => {
-        dimensions[id] = dimension;
+    resize: action({
+      RESIZE: ({
+        payload: {
+          id,
+          size: { width, height },
+        },
+        context: { data },
+        pContext: { dimensions },
+      }) => {
+        const dimension = dimensions[id];
+        if (!dimension) return;
+
+        dimension.width = width;
+        dimension.height = height;
+
+        const node = data?.nodes?.find(n => n.id === id);
+        const outputOffset = getDefaultOutputOffset(width);
+        const inputOffset = dimension.inputOffset ?? DEFAULT_INPUT_OFFSET;
+
+        dimension.outputOffset = outputOffset;
+        dimension.inputOffset = inputOffset;
+
+        if (node) {
+          dimension.output = {
+            x: node.position.x + outputOffset.x,
+            y: node.position.y + outputOffset.y,
+          };
+          dimension.input = {
+            x: node.position.x + inputOffset.x,
+            y: node.position.y + inputOffset.y,
+          };
+        } else {
+          dimension.output = { x: dimension.output.x, y: dimension.output.y };
+        }
       },
     }),
 
-    generateID: action(({ pContext }) => {
-      pContext.generatedId = nanoid();
-    }),
-
     linkChild: batch(
       assign('data.edges', {
-        ADD_CHILD: ({ context: { data }, pContext, payload }) => {
+        ADD_CHILD: ({ context: { data }, pContext, payload: from }) => {
           const edges = toArray.typed(data?.edges);
-          const from = payload;
           const generatedId = pContext?.generatedId;
           const to = buildNodeID(generatedId);
           const id = buildEdgeId(from, to);
@@ -368,22 +428,14 @@ export const machine = createMachine(
     ),
 
     moveNode: assign('data.nodes', {
-      MOVE: ({ context: { data }, payload }) => {
-        const { id, x, y } = payload;
-
-        return (
-          data?.nodes?.map(d => {
-            if (d.id === id) {
-              return { ...d, position: { x, y } };
-            }
-            return d;
-          }) ?? []
-        );
+      MOVE: ({ context: { data }, payload: { id, x, y } }) => {
+        return data?.nodes?.map(node => {
+          if (node.id === id) return { ...node, position: { x, y } };
+          return node;
+        });
       },
     }),
 
-    select: assign('selected', { SELECT: ({ payload }) => payload }),
-
     delete: batch(
       filter('data.edges', {
         DELETE: ({ id, from, to }, _, { payload }) => {
@@ -392,6 +444,7 @@ export const machine = createMachine(
       }),
 
       filter('data.nodes', { DELETE: ({ id }, _, { payload }) => id !== payload }),
+      erase('editing'),
     ),
 
     addEdge: batch(
@@ -405,16 +458,14 @@ export const machine = createMachine(
           return out;
         },
       }),
+
       erase('newEdge'),
     ),
 
-    clearNewEdge: erase('newEdge'),
-    deselect: erase('selected'),
-
     zoom: assign('zoom', {
       ZOOM: ({ context: { zoom }, payload, pContext }) => {
         const next = zoom + payload;
-        const clamped = Math.min(Math.max(Number(next.toFixed(2)), 0.2), 3);
+        const clamped = clamp(next, 0.1, 3);
         pContext.previousZoom = undefined;
         return clamped;
       },
@@ -433,5 +484,132 @@ export const machine = createMachine(
         return 1;
       },
     }),
+
+    // #region UI
+    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);
+        if (!parentNode) return nodes;
+
+        const parentDimension = pContext.dimensions[payload];
+        const id = `node-${pContext.generatedId}`;
+        const width = parentDimension?.width ?? DEFAULT_SIZE.width;
+        const height = parentDimension?.height ?? DEFAULT_SIZE.height;
+        const initialX = parentNode.position.x + width + PARENT_CHILD_GAP_WIDTH;
+        const initialY = parentNode.position.y;
+
+        const position = pContext.clampPosition(
+          board,
+          initialX,
+          initialY,
+          width,
+          height,
+        );
+
+        const defaultData = pContext.defaultData ?? DEFAULT_DATA;
+
+        nodes?.push({ id, data: { ...defaultData }, position });
+
+        pContext.dimensions[id] = pContext.calculateDimensions(
+          position,
+          parentDimension ?? DEFAULT_SIZE,
+        );
+
+        return nodes;
+      },
+    }),
+
+    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?.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,
+          DEFAULT_SIZE.width,
+          DEFAULT_SIZE.height,
+        );
+
+        const defaultData = pContext.defaultData ?? DEFAULT_DATA;
+
+        nodes?.push({ id, data: { ...defaultData }, position });
+
+        pContext.dimensions[id] = pContext.calculateDimensions(
+          position,
+          DEFAULT_SIZE,
+        );
+        return nodes;
+      },
+    }),
+
+    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);
+        if (!parentNode) return nodes;
+
+        const parentDimension = pContext.dimensions[parentID];
+        const id = `node-${pContext.generatedId}`;
+        const width = parentDimension?.width ?? DEFAULT_SIZE.width;
+        const height = parentDimension?.height ?? DEFAULT_SIZE.height;
+        const initialX = parentNode.position.x + width + PARENT_CHILD_GAP_WIDTH;
+        const initialY = parentNode.position.y + PARENT_CHILD_GAP_WIDTH;
+
+        const position = pContext.clampPosition(
+          board,
+          initialX,
+          initialY,
+          width,
+          height,
+        );
+
+        const defaultData = pContext.defaultData ?? DEFAULT_DATA;
+
+        nodes?.push({ id, data: { ...defaultData }, position });
+
+        pContext.dimensions[id] = pContext.calculateDimensions(
+          position,
+          parentDimension ?? DEFAULT_SIZE,
+        );
+
+        return nodes;
+      },
+    }),
+
+    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 };
+      },
+    }),
+    // #endregion
   },
 }));

package/src/services/main.machine.typings.ts

@@ -12,25 +12,47 @@ export type Point = inferT<typeof point>;
  *
  * @see {@linkcode point}
  */
-export const nodeOffset = type(({ optional, use }) => ({
-  input: optional(use(point)),
+export const nodeOffset = type(({ use }) => ({
+  input: use(point),
   output: use(point),
 }));
 
 /** Schema definition for edge extremities. */
 export const extremities = type({ from: 'string', to: 'string' });
 
+/** Schema definition for primitive values allowed in node data. */
+export const nodeDataValue = type(({ union }) =>
+  union('string', 'boolean', 'number'),
+);
+
+/**
+ * Schema definition for serialized node data dictionary.
+ *
+ * @see {@linkcode nodeDataValue}
+ */
+export const data = type(({ record, use }) => record(use(nodeDataValue)));
+
+/** Serialized node data dictionary type inferred from schema {@linkcode data}. */
+export type NodeData = Record<string, string | boolean | number>;
+
 /**
  * Schema definition for a serialized flowchart node entity.
  *
- * @see {@linkcode point}
+ * @see {@linkcode point}, {@linkcode data}
  */
-export const nodeJSON = type(({ optional, use }) => ({
+export const nodeJSON = type(({ use }) => ({
   position: use(point),
-  data: { label: optional('string'), content: 'string' },
-  input: 'boolean',
+  data: use(data),
 }));
 
+/**
+ * Serialized node properties type inferred from schema {@linkcode nodeJSON}.
+ *
+ * @template | {@linkcode NodeData} `D` - Custom data properties type extending
+ *   {@linkcode NodeData}.
+ */
+export type NodeProps<D extends NodeData = NodeData> = { position: Point; data: D };
+
 /**
  * Schema definition for a serialized flowchart edge entity.
  *
@@ -38,6 +60,9 @@ export const nodeJSON = type(({ optional, use }) => ({
  */
 export const edgeJSON = extremities;
 
+/** Serialized edge properties type inferred from schema {@linkcode edgeJSON}. */
+export type EdgeProps = inferT<typeof edgeJSON>;
+
 /**
  * Schema definition for layout dimensions and connection points of a node.
  *

package/src/ui/Flow.tsx

@@ -1,21 +1,60 @@
-import type { Component } from 'solid-js';
+import { createSignal, onMount, Show, type JSX } from 'solid-js';
+import {} from 'solid-js/web';
 
-import { FlowChart, type FlowProps } from './components/FlowChart';
+import type { NodeData } from '../services/main.machine.typings';
+import { FlowChart } from './components/FlowChart';
 import { Provider } from './components/FlowChart.context';
+import type { FlowProps } from './components/FlowChart.types';
+import { LoadingFallback } from './globals/components/organisms/LoadingFallback';
 
 /**
  * Root Flow component wrapping the {@linkcode FlowChart} inside the flow context
  * provider.
  *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ *
  * @param props - Flow chart configuration and callbacks of type
  *   {@linkcode FlowProps}.
  *
  * @returns The rendered Solid component.
  *
- * @see {@linkcode Provider}
+ * @see {@linkcode Provider}, {@linkcode FlowChart}
  */
-export const Flow: Component<FlowProps> = props => (
-  <Provider>
-    <FlowChart {...props} />
-  </Provider>
-);
+export const Flow = <D extends NodeData = NodeData>(
+  props: FlowProps<D>,
+): JSX.Element => {
+  const [isMounted, setIsMounted] = createSignal(false);
+
+  // onMount never runs on the server, only in the browser
+  onMount(() => setTimeout(() => setIsMounted(true), props.delay));
+  return (
+    <div
+      style={{
+        'background-image':
+          'radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)',
+      }}
+
+      class='relative flex h-full w-full rounded-lg border-2 border-gray-600 bg-white bg-size-[30px_30px]'
+    >
+      <Show
+        when={isMounted()}
+        keyed
+        fallback={
+          <div class='relative flex flex-1 items-center justify-center'>
+            <LoadingFallback
+              message='Chart is loading...'
+              interval={35}
+              rewind
+              rewindDelay={1_000}
+            />
+          </div>
+        }
+      >
+        <Provider>
+          <FlowChart {...props} />
+        </Provider>
+      </Show>
+    </div>
+  );
+};

package/src/ui/components/Bounds.tsx

@@ -17,9 +17,7 @@ import { useFlow } from './FlowChart.context';
  */
 export const DragBounds: Component = () => {
   const service = useFlow();
-
   const zoom = createState(service, { selector: ({ context }) => context.zoom });
-
   const board = createState(service, { selector: ({ context }) => context.board });
 
   const [state, { addTransformer, removeTransformer, onDragStart, onDragEnd }] =