@bemedev/mind-flow 0.3.1 → 1.0.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,12 +1,13 @@
 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,
-  PARENT_CHILD_GAP_WIDTH,
 } from '#services/main.machine.data';
 import type { Dimension, Point } from '#services/main.machine.typings';
 
@@ -34,7 +35,7 @@ export const [Provider, useFlow] = createContext(
          *
          * @returns Calculated 2D coordinate of type {@linkcode Point}.
          */
-        getBoardPosition(clientX, clientY, el): 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;
@@ -49,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 };
 
@@ -82,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) };
         },
 
         /**
@@ -96,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,
@@ -125,134 +134,6 @@ export const [Provider, useFlow] = createContext(
       },
     });
 
-    // #endregion
-
-    service.addOptions(({ assign }) => ({
-      actions: {
-        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 ?? 192;
-            const height = parentDimension?.height ?? 50;
-            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 dimension = pContext.calculateDimensions(
-              position,
-              parentDimension,
-            );
-
-            nodes?.push({
-              id,
-              data: { content: '<Nouveau nœud>' },
-              input: true,
-              position,
-            });
-            pContext.dimensions[id] = dimension;
-
-            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);
-            const dimension = pContext.calculateDimensions(position);
-
-            nodes?.push({
-              id,
-              data: { content: '<Nouveau nœud>' },
-              input: false,
-              position,
-            });
-
-            pContext.dimensions[id] = dimension;
-            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 ?? 192;
-            const height = parentDimension?.height ?? 50;
-            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 dimension = pContext.calculateDimensions(
-              position,
-              parentDimension,
-            );
-
-            nodes?.push({
-              id,
-              data: { content: '<Nouveau nœud>' },
-              input: true,
-              position,
-            });
-
-            pContext.dimensions[id] = dimension;
-            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 };
-          },
-        }),
-      },
-    }));
-
     service.start();
     return service;
   },