@bemedev/mind-flow 0.0.1 → 0.1.0

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

@@ -2,6 +2,7 @@ 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';
@@ -29,56 +30,50 @@ type Dimensions = {
 };
 
 /** Connection edge coordinate representation between two endpoints. */
-export type Edge = {
+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 },
-});
+} & Vector;
 
 /**
- * Solid Context Provider component and hook for accessing flowchart board
- * state, services, and zoom.
+ * Solid Context Provider component and hook for accessing flowchart board state,
+ * services, and zoom.
  */
 export const [Provider, useFlow] = createContext(
   () => {
+    /**
+     * Shared state machine interpreter service instance for flowchart state
+     * management.
+     */
+    const service = interpret(machine, {
+      context: {},
+      pContext: { generatedId: null },
+    });
+
     const zoom = createSignal(1);
     const newEdge = createSignal<Edge>();
     const [boardRef, setBoardRef] = createSignal<HTMLDivElement>();
 
-    const [dimensions, setDimensions] = createSignal<
-      Record<string, Dimensions>
-    >({}, { equals: dequal });
+    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 x = clientX - rect.left / currentZoom;
+      const y = clientY - rect.top / currentZoom;
+      return { x, y };
     };
 
-    const [edgesPositions, setEdgesPositions] = createSignal<
-      Record<string, Vector>
-    >({}, { equals: false });
+    const [edgesPositions, setEdgesPositions] = createSignal<Record<string, Vector>>(
+      {},
+      { equals: false },
+    );
 
     const clampPosition = (
       x: number,
@@ -88,10 +83,12 @@ export const [Provider, useFlow] = createContext(
     ): 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 -
@@ -99,8 +96,8 @@ export const [Provider, useFlow] = createContext(
           nodeWidth,
       );
 
-      const minY =
-        container.scrollTop / currentZoom + BOUNDS_CONSTRAINTS.vertical;
+      const minY = container.scrollTop / currentZoom + BOUNDS_CONSTRAINTS.vertical;
+
       const maxY = Math.max(
         minY,
         (container.scrollTop + container.clientHeight) / currentZoom -
@@ -117,11 +114,7 @@ export const [Provider, useFlow] = createContext(
     service.addOptions(({ voidAction, batch, assign }) => ({
       actions: {
         placeChild: assign('context.data.nodes', {
-          ADD_CHILD: ({
-            payload,
-            context: { data },
-            pContext: { generatedId },
-          }) => {
+          ADD_CHILD: ({ payload, context: { data }, pContext: { generatedId } }) => {
             const nodes = data?.nodes ?? [];
             if (!payload) return nodes;
 
@@ -131,33 +124,19 @@ export const [Provider, useFlow] = createContext(
             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 initialX = parentNode.position.x + width + PARENT_CHILD_GAP_WIDTH;
             const initialY = parentNode.position.y;
-            const position = clampPosition(
-              initialX,
-              initialY,
-              width,
-              height,
-            );
+            const position = clampPosition(initialX, initialY, width, height);
 
             return [
               ...nodes,
-              {
-                id,
-                data: { content: '<Nouveau nœud>' },
-                input: true,
-                position,
-              },
+              { id, data: { content: '<Nouveau nœud>' }, input: true, position },
             ];
           },
         }),
 
         placeParent: assign('context.data.nodes', {
-          ADD_PARENT: ({
-            context: { data },
-            pContext: { generatedId },
-          }) => {
+          ADD_PARENT: ({ context: { data }, pContext: { generatedId } }) => {
             const nodes = data?.nodes ?? [];
             const id = `node-${generatedId}`;
             const container = boardRef()?.parentElement;
@@ -189,7 +168,6 @@ export const [Provider, useFlow] = createContext(
           }) => {
             const edges = data?.edges ?? [];
             const nodes = data?.nodes ?? [];
-
             const parentID = edges.find(edge => edge.to === payload)?.from;
             if (!parentID) return nodes;
 
@@ -199,24 +177,13 @@ export const [Provider, useFlow] = createContext(
             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 initialX = parentNode.position.x + width + PARENT_CHILD_GAP_WIDTH;
             const initialY = parentNode.position.y + 100;
-            const position = clampPosition(
-              initialX,
-              initialY,
-              width,
-              height,
-            );
+            const position = clampPosition(initialX, initialY, width, height);
 
             return [
               ...nodes,
-              {
-                id,
-                data: { content: '<Nouveau nœud>' },
-                input: true,
-                position,
-              },
+              { id, data: { content: '<Nouveau nœud>' }, input: true, position },
             ];
           },
         }),
@@ -225,9 +192,9 @@ export const [Provider, useFlow] = createContext(
           voidAction(({ context: { data } }) => {
             const edges = data?.edges ?? [];
             setEdgesPositions(data => {
-              const array = Object.entries({ ...data }).filter(([id]) => {
-                return edges?.some(edge => edge.id === id);
-              });
+              const array = Object.entries({ ...data }).filter(([id]) =>
+                edges.some(edge => edge.id === id),
+              );
 
               return Object.fromEntries(array);
             });
@@ -240,6 +207,7 @@ export const [Provider, useFlow] = createContext(
                   edges?.forEach(({ from, id, to }) => {
                     const output = dimensions()[from]?.output;
                     const input = dimensions()[to]?.input;
+
                     if (output && input) {
                       next[id] = {
                         x0: output.x,
@@ -261,12 +229,12 @@ export const [Provider, useFlow] = createContext(
                     if (from === payload.id) {
                       const offset =
                         dimensions()[payload.id]?.outputOffset ??
-                        getDefaultOutputOffset(
-                          dimensions()[payload.id]?.width,
-                        );
+                        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]) {
@@ -282,9 +250,11 @@ export const [Provider, useFlow] = createContext(
                       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]) {
@@ -301,6 +271,7 @@ export const [Provider, useFlow] = createContext(
               );
             },
           }),
+
           assign('context.updatingUI', () => true),
         ),
 
@@ -314,12 +285,12 @@ export const [Provider, useFlow] = createContext(
                   if (from === payload.id) {
                     const offset =
                       dimensions()[payload.id]?.outputOffset ??
-                      getDefaultOutputOffset(
-                        dimensions()[payload.id]?.width,
-                      );
+                      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]) {
@@ -331,13 +302,15 @@ export const [Provider, useFlow] = createContext(
                       }),
                     );
                   }
+
                   if (to === payload.id) {
                     const offset =
-                      dimensions()[payload.id]?.inputOffset ??
-                      DEFAULT_INPUT_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]) {
@@ -367,6 +340,7 @@ export const [Provider, useFlow] = createContext(
       edgesPositions: [edgesPositions, setEdgesPositions] as const,
       service,
       zoom,
+      clampPosition,
     };
   },
   { name: 'FlowContext' },

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

@@ -1,9 +1,6 @@
 import type { NodeProps } from './FlowChart';
 
-/**
- * Horizontal gap in pixels between a parent node and newly created child
- * node.
- */
+/** 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
@@ -41,10 +38,7 @@ export const DEFAULT_INPUT_OFFSET = {
   y: DEFAULT_INPUT_OFFSET_Y,
 };
 
-/**
- * Dimensions representing width and height of the flow chart container
- * canvas.
- */
+/** Dimensions representing width and height of the flow chart container canvas. */
 export const CONTAINER_DIMENSIONS = { WIDTH: 5000, HEIGHT: 3500 };
 
 /**
@@ -66,16 +60,16 @@ export const TOOLBAR_TOP_OFFSET = 30;
 export const TOOLBAR_BUFFER = 5;
 
 /**
- * Boundary padding constraints for node dragging and positioning within
- * the viewport.
+ * 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,
-};
+export const BOUNDS_CONSTRAINTS = { horizontal: 55, vertical: 40 };
 
 /** Multiplier factor used to compute canvas virtual scroll dimensions. */
 export const CANVAS_FACTOR = 5;
+
+/** Multiplier factor used to compute canvas scroll dimensions. */
+export const SCROLL_MULTIPLIER = 3;
 // #endregion
 
 /** Default node items provided when no initial configuration is given. */

package/src/ui/components/FlowChart.tsx

@@ -1,20 +1,15 @@
 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';
+import { NodesBoard } from './NodesBoard';
 
-/**
- * Serialized node properties type inferred from schema
- * {@linkcode nodeJSON}.
- */
+/** Serialized node properties type inferred from schema {@linkcode nodeJSON}. */
 export type NodeProps = inferT<typeof nodeJSON>;
 
-/**
- * Serialized edge properties type inferred from schema
- * {@linkcode edgeJSON}.
- */
+/** Serialized edge properties type inferred from schema {@linkcode edgeJSON}. */
 export type EdgeProps = inferT<typeof edgeJSON>;
 
 /**
@@ -56,8 +51,8 @@ export type FlowProps = {
 // const PARENT_CHILD_GAP_WIDTH = 75;
 
 /**
- * Flowchart board canvas component that renders interactive nodes, edges,
- * pan/zoom, and toolbar controls.
+ * 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}.

package/src/ui/components/NodeComponent.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 import { useState } from '@bemedev/app-solidjs';
 import { createDraggable } from '@thisbeyond/solid-dnd';
-import { Component, createEffect, createSignal, Show } from 'solid-js';
+import { Component, createSignal, onMount, Show } from 'solid-js';
 import { produce } from 'solid-js/store';
+
 import { useFlow } from './FlowChart.context';
 import {
   DEFAULT_INPUT_OFFSET_X,
@@ -37,8 +38,8 @@ type Props = {
 };
 
 /**
- * Interactive flowchart node component supporting dragging, selection,
- * handle connections, and child/sibling creation.
+ * Interactive flowchart node component supporting dragging, selection, handle
+ * connections, and child/sibling creation.
  *
  * @param props - Node rendering properties of type {@linkcode Props}.
  *
@@ -60,7 +61,7 @@ export const NodeComponent: Component<Props> = props => {
     selector: s => s.context.selected === props.id,
   });
 
-  createEffect(() => {
+  onMount(() => {
     const _inputRef = inputRef;
     const _outputRef = outputRef;
     const _rootRef = ref();
@@ -73,15 +74,12 @@ export const NodeComponent: Component<Props> = props => {
     const inputRect = _inputRef?.getBoundingClientRect();
 
     const outputOffsetX =
-      (outputRect.left - rootRect.left + outputRect.width / 2) /
-      currentZoom;
+      (outputRect.left - rootRect.left + outputRect.width / 2) / currentZoom;
     const outputOffsetY =
-      (outputRect.top - rootRect.top + outputRect.height / 2) /
-      currentZoom;
+      (outputRect.top - rootRect.top + outputRect.height / 2) / currentZoom;
 
     const inputOffsetX = inputRect
-      ? (inputRect.left - rootRect.left + inputRect.width / 2) /
-        currentZoom
+      ? (inputRect.left - rootRect.left + inputRect.width / 2) / currentZoom
       : DEFAULT_INPUT_OFFSET_X;
     const inputOffsetY = inputRect
       ? (inputRect.top - rootRect.top + inputRect.height / 2) / currentZoom
@@ -90,10 +88,7 @@ export const NodeComponent: Component<Props> = props => {
     const width = rootRect.width / currentZoom;
     const height = rootRect.height / currentZoom;
 
-    const output = {
-      x: props.x + outputOffsetX,
-      y: props.y + outputOffsetY,
-    };
+    const output = { x: props.x + outputOffsetX, y: props.y + outputOffsetY };
 
     const input = { x: props.x + inputOffsetX, y: props.y + inputOffsetY };
 
@@ -115,7 +110,7 @@ export const NodeComponent: Component<Props> = props => {
     selector: ({ context: { data } }) => {
       const edges = data?.edges;
       if (!edges) return false;
-      return Object.values(edges).some(edge => edge.to === props.id);
+      return edges.some(({ to }) => to === props.id);
     },
   });
 
@@ -182,9 +177,7 @@ export const NodeComponent: Component<Props> = props => {
             preserveAspectRatio='xMaxYMax'
             xmlns='http://www.w3.org/2000/svg'
             fill='white'
-            onClick={() =>
-              service.send({ type: 'ADD_SIBLING', payload: props.id })
-            }
+            onClick={() => service.send({ type: 'ADD_SIBLING', payload: props.id })}
           >
             <g id='background'>
               <path d='M467.40667,277.66696c-0.05948,-14.53055 5.75527,-22.95613 -8.62044,-20.90487c-112.55699,16.0607 -222.1609,112.14558 -245.06161,239.85765c-46.52056,259.43466 231.33083,443.06705 449.51209,316.97506c117.31668,-67.80002 160.95215,-190.43324 151.34416,-288.29849c-5.92276,-60.32819 -27.80273,-107.95668 -53.44246,-144.25469l59.39269,-42.05363c111.72214,156.309 73.11535,351.55635 -25.06953,459.45565c-184.18877,202.4124 -470.46624,145.52064 -592.95027,-32.92123c-156.18269,-227.53604 -27.15324,-543.64371 261.18883,-582.44416c5.0579,-0.68061 3.56556,-7.04079 3.56442,-8.58985c-0.05594,-76.3354 -0.11021,-76.7687 1.10909,-77.24589c2.06886,-0.80969 151.41433,118.4561 151.92482,118.95524c4.65592,4.55233 -0.99548,7.829 -29.07828,30.50907c-120.49369,97.31245 -120.4977,98.55675 -123.0691,97.87586c-0.43639,-0.11555 -0.80698,-0.31322 -0.74442,-66.91571Z' />
@@ -194,9 +187,7 @@ export const NodeComponent: Component<Props> = props => {
         </Show>
         <svg
           class='flex cursor-pointer items-center justify-center rounded-lg bg-blue-500 p-0.5 text-center font-bold text-white hover:bg-blue-600'
-          onClick={() =>
-            service.send({ type: 'ADD_CHILD', payload: props.id })
-          }
+          onClick={() => service.send({ type: 'ADD_CHILD', payload: props.id })}
           style={{
             'pointer-events': 'all',
             width: `${HANDLE_SIZE * 2}px`,
@@ -242,10 +233,7 @@ export const NodeComponent: Component<Props> = props => {
               const from = newEdge()?.from;
 
               if (from) {
-                service.send({
-                  type: 'ADD_EDGE',
-                  payload: { from, to: props.id },
-                });
+                service.send({ type: 'ADD_EDGE', payload: { from, to: props.id } });
               }
 
               setNewEdge();