@bemedev/mind-flow 0.0.1

package/src/services/main.machine.ts

@@ -0,0 +1,247 @@
+import { createMachine } from '@bemedev/app';
+import { type } from '@bemedev/app/bemedev';
+import { nanoid } from 'nanoid';
+import { edgeJSON, extremities, nodeJSON } from './main.typings';
+
+/**
+ * Constructs a unique edge identifier string from source and destination
+ * node IDs.
+ *
+ * @param out - The source node ID string.
+ * @param _in - The destination node ID string.
+ *
+ * @returns Formatted edge identifier string.
+ */
+export const buildEdgeId = (out: string, _in: string) => {
+  return `edge = ${out} => ${_in}`;
+};
+
+/**
+ * Constructs a formatted node identifier string from a generated ID.
+ *
+ * @param generated - The generated unique ID string or `null`/`undefined`.
+ *
+ * @returns Formatted node identifier string.
+ */
+export const buildNodeID = (generated?: string | null) => {
+  return `node-${generated}`;
+};
+
+/**
+ * State machine managing flowchart state transitions, nodes, edges,
+ * selection, and layout actions.
+ */
+export const machine = createMachine(
+  {
+    initial: 'idle',
+    states: {
+      idle: {
+        on: {
+          CONFIGURE: { actions: ['configure'], target: '/working' },
+          CONFIGURE_EMPTY: '/working',
+        },
+      },
+
+      construction: {
+        always: { actions: ['buildUI'], target: '/working' },
+      },
+
+      working: {
+        on: {
+          MOVE: {
+            actions: ['moveNode', 'buildUI'],
+            target: '/construction',
+          },
+          MOVE_IMMEDIATE: {
+            actions: [
+              {
+                name: 'buildImmediateUI',
+                description: 'Must be in the ui',
+              },
+            ],
+          },
+
+          UPDATE_UI: '/construction',
+
+          ADD_CHILD: {
+            actions: [
+              'generateID',
+              { name: 'placeChild', description: 'Must be in the ui' },
+              'linkChild',
+            ],
+            target: '/construction',
+          },
+
+          ADD_PARENT: {
+            actions: [
+              'generateID',
+              { name: 'placeParent', description: 'Must be in the ui' },
+              'selectParent',
+            ],
+            target: '/construction',
+          },
+
+          ADD_SIBLING: {
+            actions: [
+              'generateID',
+              { name: 'placeSibling', description: 'Must be in the ui' },
+              'linkSibling',
+            ],
+            target: '/construction',
+          },
+
+          ADD_EDGE: { actions: ['addEdge'], target: '/construction' },
+
+          DELETE: { actions: ['delete'], target: '/construction' },
+
+          SELECT: { actions: ['select'] },
+
+          DESELECT: { actions: ['deselect'] },
+        },
+      },
+    },
+  },
+  {
+    eventsMap: type(({ intersection, use, array }) => ({
+      CONFIGURE: {
+        nodes: array(intersection(use(nodeJSON), { id: 'string' })),
+        edges: array(intersection(use(edgeJSON), { id: 'string' })),
+      },
+
+      CONFIGURE_EMPTY: 'never',
+
+      MOVE: { id: 'string', x: 'number', y: 'number' },
+
+      MOVE_IMMEDIATE: { id: 'string', x: 'number', y: 'number' },
+
+      ADD_CHILD: 'string',
+      ADD_PARENT: 'never',
+      ADD_SIBLING: 'string',
+      DELETE: 'string',
+      SELECT: 'string',
+      DESELECT: 'never',
+      ADD_EDGE: use(extremities),
+    })),
+
+    pContext: type(({ union }) => ({
+      generatedId: union('string', 'null'),
+    })),
+
+    context: type(({ optional, use, array }) => ({
+      data: optional({
+        nodes: array({ ...use(nodeJSON), id: 'string' }),
+        edges: array({ ...use(edgeJSON), id: 'string' }),
+      }),
+
+      selected: optional('string'),
+      updatingUI: optional('boolean'),
+    })),
+
+    sync: true,
+  },
+).provideOptions(({ assign, batch, erase }) => ({
+  actions: {
+    configure: batch(
+      assign('context.data', () => ({ nodes: [], edges: [] })),
+
+      assign('context.data.nodes', {
+        CONFIGURE: ({ payload: { nodes } }) => nodes,
+      }),
+
+      assign('context.data.edges', {
+        CONFIGURE: ({ payload: { edges } }) => edges,
+      }),
+
+      assign('context.updatingUI', () => false),
+      assign('pContext.generatedId', () => null),
+    ),
+
+    generateID: assign('pContext.generatedId', () => nanoid()),
+
+    linkChild: batch(
+      assign('context.data.edges', {
+        ADD_CHILD: ({ context, pContext, payload }) => {
+          const data = context.data;
+          const from = payload;
+          const generatedId = pContext?.generatedId;
+          const to = buildNodeID(generatedId);
+          const id = buildEdgeId(from, to);
+          return [...(data?.edges ?? []), { id, from, to }];
+        },
+      }),
+
+      assign('context.selected', ({ pContext: { generatedId } }) =>
+        buildNodeID(generatedId),
+      ),
+    ),
+
+    linkSibling: batch(
+      assign('context.data.edges', {
+        ADD_SIBLING: ({ pContext, payload, context }) => {
+          const edges = context.data?.edges;
+          const generatedId = pContext?.generatedId;
+          const out = [...(edges ?? [])];
+          const from = edges?.find(({ to }) => to === payload)?.from;
+          if (!from) return out;
+          const to = buildNodeID(generatedId);
+          const id = buildEdgeId(from, to);
+          out.push({ from, to, id });
+
+          return out;
+        },
+      }),
+
+      assign('context.selected', ({ pContext: { generatedId } }) =>
+        buildNodeID(generatedId),
+      ),
+    ),
+
+    selectParent: assign(
+      'context.selected',
+      ({ pContext: { generatedId } }) => buildNodeID(generatedId),
+    ),
+
+    moveNode: assign('context.data.nodes', {
+      MOVE: ({ context: { data }, payload }) => {
+        const { id, x, y } = payload;
+        if (!id) return data?.nodes ?? [];
+
+        return (
+          data?.nodes?.map(d => {
+            if (d.id === id) {
+              return { ...d, position: { x, y } };
+            }
+            return d;
+          }) ?? []
+        );
+      },
+    }),
+
+    select: assign('context.selected', {
+      SELECT: ({ payload }) => payload,
+    }),
+
+    delete: assign(['context.data.nodes', 'context.data.edges'], {
+      DELETE: ({ context: { data }, payload }) => {
+        const nodes = data?.nodes?.filter(({ id }) => id !== payload);
+        const edges = data?.edges?.filter(
+          ({ id, from, to }) =>
+            id !== payload && from !== payload && to !== payload,
+        );
+        return [nodes, edges];
+      },
+    }),
+
+    addEdge: assign('context.data.edges', {
+      ADD_EDGE: ({ context, payload: { from, to } }) => {
+        const edges = context.data?.edges ?? [];
+        const id = buildEdgeId(from, to);
+        if (edges.some(e => e.id === id)) return edges;
+        const out = [...edges, { id, from, to }];
+        return out;
+      },
+    }),
+
+    deselect: erase('context.selected'),
+  },
+}));

package/src/services/main.typings.ts

@@ -0,0 +1,50 @@
+import { type } from '@bemedev/app/bemedev';
+import type { inferT } from '@bemedev/app/typings';
+
+/** Schema definition for 2D coordinates `(x, y)`. */
+export const point = type({ x: 'number', y: 'number' });
+
+/** 2D coordinate point type inferred from schema {@linkcode point}. */
+export type Point = inferT<typeof point>;
+
+/** Schema definition for node handle offsets (input and output). */
+export const nodeOffset = type(({ optional, use }) => ({
+  input: optional(use(point)),
+  output: use(point),
+}));
+
+/** Schema definition for edge extremities */
+export const extremities = type({ from: 'string', to: 'string' });
+
+/** Schema definition for a serialized flowchart node entity. */
+export const nodeJSON = type(({ optional, use }) => ({
+  position: use(point),
+  data: { label: optional('string'), content: 'string' },
+  input: 'boolean',
+}));
+
+/** Schema definition for a serialized flowchart edge entity. */
+export const edgeJSON = extremities;
+
+/** Schema definition for layout dimensions and connection points of a node. */
+export const dimensions = type(({ optional, use }) => ({
+  width: 'number',
+  height: 'number',
+  id: 'string',
+  output: use(point),
+  input: optional(use(point)),
+}));
+
+/**
+ * Schema definition for a 2D line vector representing edge coordinates
+ * `(x0, y0)` to `(x1, y1)`.
+ */
+export const vector = type({
+  x0: 'number',
+  y0: 'number',
+  x1: 'number',
+  y1: 'number',
+});
+
+/** 2D vector coordinate type inferred from schema {@linkcode vector}. */
+export type Vector = inferT<typeof vector>;

package/src/ui/Flow.tsx

@@ -0,0 +1,18 @@
+import type { Component } from 'solid-js';
+import { FlowChart, type FlowProps } from './components/FlowChart';
+import { Provider } from './components/FlowChart.context';
+
+/**
+ * Root Flow component wrapping the {@linkcode FlowChart} inside the flow
+ * context provider.
+ *
+ * @param props - Flow chart configuration and callbacks of type
+ *   {@linkcode FlowProps}.
+ *
+ * @returns The rendered Solid component.
+ */
+export const Flow: Component<FlowProps> = props => (
+  <Provider>
+    <FlowChart {...props} />
+  </Provider>
+);

package/src/ui/components/Bounds.tsx

@@ -0,0 +1,87 @@
+import {
+  useDragDropContext,
+  type Transformer,
+} from '@thisbeyond/solid-dnd';
+import { type Component } from 'solid-js';
+import { BOUNDS_CONSTRAINTS } from './FlowChart.data';
+import { useFlow } from './FlowChart.context';
+
+/**
+ * Drag boundary transformer component that clamps draggable nodes within
+ * container scroll bounds.
+ *
+ * @returns `null` as this component performs side-effect transformer
+ *   registrations only.
+ */
+export const DragBounds: Component = () => {
+  const {
+    board: [ref],
+    zoom: [zoom],
+  } = useFlow();
+
+  const [
+    state,
+    { addTransformer, removeTransformer, onDragStart, onDragEnd },
+  ] = useDragDropContext()!;
+
+  const transformer: Transformer = {
+    id: 'clamp-to-container',
+    order: 100,
+    callback: transform => {
+      const container = ref()?.parentElement;
+      const activeDraggable = state.active.draggable;
+      if (!container || !activeDraggable) return transform;
+      const draggableLayout = activeDraggable.layout;
+
+      // #region Inner visible boundaries (excluding borders and scrollbars)
+      const containerRect = container.getBoundingClientRect();
+      const innerLeft = containerRect.left + container.clientLeft;
+      const innerTop = containerRect.top + container.clientTop;
+      const innerRight = innerLeft + container.clientWidth;
+      const innerBottom = innerTop + container.clientHeight;
+      // #endregion
+
+      // #region Convert boundaries to board coordinate space
+      const currentZoom = zoom();
+      const minX =
+        innerLeft -
+        draggableLayout.left +
+        BOUNDS_CONSTRAINTS.horizontal * currentZoom;
+
+      const maxX = Math.max(
+        minX,
+        innerRight -
+          draggableLayout.right -
+          BOUNDS_CONSTRAINTS.horizontal * currentZoom,
+      );
+
+      const minY =
+        innerTop -
+        draggableLayout.top +
+        BOUNDS_CONSTRAINTS.vertical * currentZoom;
+
+      const maxY = Math.max(
+        minY,
+        innerBottom -
+          draggableLayout.bottom -
+          BOUNDS_CONSTRAINTS.vertical * currentZoom,
+      );
+      // #endregion
+
+      return {
+        x: Math.min(Math.max(transform.x, minX), maxX),
+        y: Math.min(Math.max(transform.y, minY), maxY),
+      };
+    },
+  };
+
+  onDragStart(({ draggable }) => {
+    addTransformer('draggables', draggable.id, transformer);
+  });
+
+  onDragEnd(({ draggable }) => {
+    removeTransformer('draggables', draggable.id, transformer.id);
+  });
+
+  return null;
+};

package/src/ui/components/EdgeComponent.tsx

@@ -0,0 +1,106 @@
+import { useState } from '@bemedev/app-solidjs';
+import { Component, createEffect, createSignal, Show } from 'solid-js';
+import type { Vector } from '../../services/main.typings';
+import { useFlow } from './FlowChart.context';
+
+/** Properties for rendering an SVG connection edge between two points. */
+type Props = {
+  /** Unique identifier of the edge. */
+  id: string;
+  /** Whether this is a temporary edge currently being dragged. */
+  isNew?: boolean;
+} & Vector;
+
+/**
+ * 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.
+ */
+const calculateOffset = (value: number) => (value * 100) / 200;
+
+/**
+ * Generates an SVG cubic bezier path `d` string between coordinates `(x0,
+ * y0)` and `(x1, y1)`.
+ *
+ * @param vector - Vector coordinates of type {@linkcode Vector}.
+ *
+ * @returns SVG cubic bezier path string.
+ */
+const draw = ({ 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}`;
+};
+
+/**
+ * SVG edge component rendering bezier curves and delete interaction
+ * handles for node connections.
+ *
+ * @param props - Edge properties of type {@linkcode Props}.
+ *
+ * @returns The rendered SVG JSX elements.
+ */
+export const EdgeComponent: Component<Props> = props => {
+  const [middlePoint, setMiddlePoint] = createSignal({
+    x: props.x0 + (props.x1 - props.x0) / 2,
+    y: props.y0 + (props.y1 - props.y0) / 2,
+  });
+
+  const { service } = useFlow();
+
+  createEffect(() => {
+    const middleX = props.x0 + (props.x1 - props.x0) / 2;
+    const middleY = props.y0 + (props.y1 - props.y0) / 2;
+    setMiddlePoint({ x: middleX, y: middleY });
+  });
+
+  const selected = useState(service, {
+    selector: s => s.context.selected === props.id,
+  });
+
+  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(props)}
+        onMouseDown={e => e.stopPropagation()}
+        onClick={() => 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>
+    </>
+  );
+};

package/src/ui/components/EdgesBoard.tsx

@@ -0,0 +1,56 @@
+import {
+  Component,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  Show,
+} from 'solid-js';
+import { EdgeComponent } from './EdgeComponent';
+import { useFlow } from './FlowChart.context';
+
+/**
+ * SVG board overlay component that renders all active connecting edges and
+ * ongoing edge creation previews.
+ *
+ * @returns The rendered SVG JSX element.
+ */
+export const EdgesBoard: Component = () => {
+  const [selected, setSelected] = createSignal<string>();
+
+  const {
+    newEdge: [newEdge],
+    edgesPositions: [edgesPositions],
+  } = useFlow();
+
+  const datas = createMemo(() => {
+    const entries = Object.entries(edgesPositions());
+    return entries.map(([id, vector]) => ({ id, ...vector }));
+  });
+
+  createEffect(() => {
+    if (selected() && newEdge()) setSelected();
+  });
+
+  return (
+    <svg
+      class='pointer-events-none h-full w-full overflow-visible'
+      // style={{ scale: zoom() }}
+    >
+      <Show when={newEdge()}>
+        {value => (
+          <EdgeComponent
+            id='__#new-edge#__TEMP'
+            isNew
+            x0={value().x0}
+            y0={value().y0}
+            x1={value().x1}
+            y1={value().y1}
+          />
+        )}
+      </Show>
+
+      <For each={datas()} children={EdgeComponent} />
+    </svg>
+  );
+};