@bemedev/mind-flow 0.1.1 → 0.3.0

package/src/ui/components/NodeComponent.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable @typescript-eslint/no-namespace */
-import { useState } from '@bemedev/app-solidjs';
+import { toArray } from '@bemedev/app';
+import { createState } from '@bemedev/app-solidjs';
 import { createDraggable } from '@thisbeyond/solid-dnd';
-import { Component, createSignal, onMount, Show } from 'solid-js';
-import { produce } from 'solid-js/store';
+import { dequal } from 'dequal';
+import { Component, Show } from 'solid-js';
 
-import { useFlow } from './FlowChart.context';
 import {
-  DEFAULT_INPUT_OFFSET_X,
-  DEFAULT_INPUT_OFFSET_Y,
   HANDLE_CONTAINER_OFFSET_X,
   HANDLE_MARGIN_TOP,
   HANDLE_SIZE,
-} from './FlowChart.data';
+} from '#services/main.machine.data';
+
+import { useFlow } from './FlowChart.context';
 
 declare module 'solid-js' {
   namespace JSX {
@@ -25,16 +25,6 @@ declare module 'solid-js' {
 type Props = {
   /** Unique identifier of the node. */
   id: string;
-  /** Horizontal position of the node in board coordinates. */
-  x: number;
-  /** Vertical position of the node in board coordinates. */
-  y: number;
-  /** Optional header label for the node. */
-  label?: string;
-  /** Body content text of the node. */
-  content: string;
-  /** Whether the node has an input handle. */
-  input: boolean;
 };
 
 /**
@@ -44,69 +34,35 @@ type Props = {
  * @param props - Node rendering properties of type {@linkcode Props}.
  *
  * @returns The rendered Solid component.
+ *
+ * @see {@linkcode useFlow}, {@linkcode HANDLE_CONTAINER_OFFSET_X}, {@linkcode HANDLE_MARGIN_TOP}, {@linkcode HANDLE_SIZE}
  */
 export const NodeComponent: Component<Props> = props => {
-  let inputRef: HTMLDivElement | undefined;
-  let outputRef: HTMLDivElement | undefined;
-  const [ref, setRef] = createSignal<HTMLDivElement>();
-  const {
-    dimensions: [dimensions, setDimensions],
-    newEdge: [newEdge, setNewEdge],
-    getBoardPoint,
-    service,
-    zoom: [zoom],
-  } = useFlow();
-
-  const selected = useState(service, {
-    selector: s => s.context.selected === props.id,
+  const service = useFlow();
+
+  const node = createState(service, {
+    selector: ({ context }) => {
+      const list = toArray.typed(context.data?.nodes);
+      const item = list.find(n => n.id === props.id);
+      if (!item) return undefined;
+      return {
+        x: item.position.x,
+        y: item.position.y,
+        label: item.data.label,
+        content: item.data.content ?? '',
+        input: item.input,
+      };
+    },
+    equals: dequal,
   });
 
-  onMount(() => {
-    const _inputRef = inputRef;
-    const _outputRef = outputRef;
-    const _rootRef = ref();
-    const currentZoom = zoom();
-
-    if (!_outputRef || !_rootRef) return;
-
-    const rootRect = _rootRef.getBoundingClientRect();
-    const outputRect = _outputRef.getBoundingClientRect();
-    const inputRect = _inputRef?.getBoundingClientRect();
-
-    const outputOffsetX =
-      (outputRect.left - rootRect.left + outputRect.width / 2) / currentZoom;
-    const outputOffsetY =
-      (outputRect.top - rootRect.top + outputRect.height / 2) / currentZoom;
-
-    const inputOffsetX = inputRect
-      ? (inputRect.left - rootRect.left + inputRect.width / 2) / currentZoom
-      : DEFAULT_INPUT_OFFSET_X;
-    const inputOffsetY = inputRect
-      ? (inputRect.top - rootRect.top + inputRect.height / 2) / currentZoom
-      : DEFAULT_INPUT_OFFSET_Y;
-
-    const width = rootRect.width / currentZoom;
-    const height = rootRect.height / currentZoom;
-
-    const output = { x: props.x + outputOffsetX, y: props.y + outputOffsetY };
+  const newEdge = createState(service, { selector: s => s.context.newEdge });
 
-    const input = { x: props.x + inputOffsetX, y: props.y + inputOffsetY };
-
-    setDimensions(
-      produce(data => {
-        data[props.id] = {
-          width,
-          height,
-          output,
-          input,
-          outputOffset: { x: outputOffsetX, y: outputOffsetY },
-          inputOffset: { x: inputOffsetX, y: inputOffsetY },
-        };
-      }),
-    );
+  const selected = createState(service, {
+    selector: s => s.context.selected === props.id,
   });
 
-  const hasParent = useState(service, {
+  const hasParent = createState(service, {
     selector: ({ context: { data } }) => {
       const edges = data?.edges;
       if (!edges) return false;
@@ -119,22 +75,21 @@ export const NodeComponent: Component<Props> = props => {
 
   return (
     <div
-      ref={setRef}
-      id={props.id}
       classList={{
         'flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable': true,
         'border border-[#e38c29] z-[100]': selected(),
         'border border-[#e6d4be] z-[1]': !selected(),
       }}
-      style={{ top: `${props.y}px`, left: `${props.x}px` }}
+
+      style={{ top: `${node()?.y ?? 0}px`, left: `${node()?.x ?? 0}px` }}
+      class='min-w-48'
+      use:draggable={{ skipTransform: true }}
+      id={props.id}
+
       onMouseDown={e => {
         e.stopPropagation();
-        e.stopImmediatePropagation();
         service.send({ type: 'SELECT', payload: props.id });
       }}
-      class='min-w-48'
-
-      use:draggable={{ skipTransform: true }}
     >
       <div
         classList={{
@@ -145,13 +100,15 @@ export const NodeComponent: Component<Props> = props => {
       >
         <svg
           class='cursor-pointer rounded-full fill-[#a11111] opacity-100 transition-all duration-200 ease-in-out'
+          fill='currentColor'
+          stroke-width='2'
+          viewBox='4 4 16 16'
+
           onClick={e => {
             e.stopPropagation();
             service.send({ type: 'DELETE', payload: props.id });
           }}
-          fill='currentColor'
-          stroke-width='2'
-          viewBox='4 4 16 16'
+
           style={{
             overflow: 'visible',
             'pointer-events': 'all',
@@ -161,6 +118,7 @@ export const NodeComponent: Component<Props> = props => {
         >
           <path d='M12 4c-4.419 0-8 3.582-8 8s3.581 8 8 8 8-3.582 8-8-3.581-8-8-8zm3.707 10.293a.999.999 0 11-1.414 1.414L12 13.414l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L10.586 12 8.293 9.707a.999.999 0 111.414-1.414L12 10.586l2.293-2.293a.999.999 0 111.414 1.414L13.414 12l2.293 2.293z' />
         </svg>
+
         <Show when={hasParent()}>
           <svg
             class='cursor-pointer overflow-visible rounded-full bg-green-500 p-0.5 text-center font-bold hover:bg-green-600'
@@ -173,6 +131,7 @@ export const NodeComponent: Component<Props> = props => {
               width: `${HANDLE_SIZE * 2}px`,
               height: `${HANDLE_SIZE * 2}px`,
             }}
+
             viewBox='0 0 1024 1024'
             preserveAspectRatio='xMaxYMax'
             xmlns='http://www.w3.org/2000/svg'
@@ -181,6 +140,7 @@ export const NodeComponent: Component<Props> = props => {
           >
             <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' />
+
               <path d='M316.61562,611.03414c0.11517,-90.16257 -0.25516,-99.92912 0.64739,-101.78856c1.56486,-3.22393 131.99102,0.91032 134.6959,-1.89763c2.21336,-2.2977 -0.59362,-129.97807 1.1376,-132.37034c0.7253,-1.00225 11.10552,-0.99175 12.07474,-0.99077c104.50336,0.10564 104.90098,-0.37811 105.967,0.85765c1.56461,1.81373 0.25596,114.18436 0.67852,129.81412c0.1322,4.88975 3.22386,3.28152 99.72028,3.4563c33.0841,0.05992 36.14259,-1.40368 36.21852,4.50462c0.11713,9.11348 1.41954,110.45369 -0.40274,113.92715c-1.81106,3.45208 -130.39967,-0.42618 -134.48289,1.62075c-2.29035,1.14816 -0.36989,101.12392 -1.11542,130.51904c-0.09548,3.76459 -2.13506,3.20617 -47.84854,3.17365c-69.30253,-0.0493 -69.31099,-0.25627 -69.65762,-0.42191c-3.77927,-1.80595 0.16287,-129.33555 -2.24266,-132.58994c-1.79931,-2.43424 -124.06108,-0.29118 -132.80252,-0.97392c-3.81102,-0.29766 -2.58229,-14.8847 -2.58758,-16.8402Z' />
             </g>
           </svg>
@@ -188,55 +148,59 @@ export const NodeComponent: Component<Props> = props => {
         <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 })}
+          viewBox='0 0 24 24'
+          stroke='currentColor'
+          stroke-width='2'
+
           style={{
             'pointer-events': 'all',
             width: `${HANDLE_SIZE * 2}px`,
             height: `${HANDLE_SIZE * 2}px`,
           }}
-          viewBox='0 0 24 24'
-          stroke='currentColor'
-          stroke-width='2'
         >
           <path d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z' />
         </svg>
       </div>
-      <Show when={props.label} keyed>
+
+      <Show when={node()?.label} keyed>
         {label => (
           <span class='min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none'>
             {label}
           </span>
         )}
       </Show>
-      <Show when={props.content} keyed>
+
+      <Show when={node()?.content} keyed>
         {content => <div class='p-3 select-none'>{content}</div>}
       </Show>
-      <Show when={props.input || hasParent()}>
+
+      <Show when={node()?.input || hasParent()}>
         <div
           id='outputs'
           class='pointer-events-none absolute top-0 z-10 flex cursor-default flex-col'
           style={{ left: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
         >
           <div
-            ref={el => (inputRef = el)}
             class='cursor-default rounded-full bg-[#e38b29] shadow-md'
+
             style={{
               width: `${HANDLE_SIZE}px`,
               height: `${HANDLE_SIZE}px`,
               'margin-top': `${HANDLE_MARGIN_TOP}px`,
               'pointer-events': 'all',
             }}
+
             onMouseDown={event => {
               event.stopPropagation();
             }}
+
             onMouseUp={event => {
               event.stopPropagation();
               const from = newEdge()?.from;
 
               if (from) {
                 service.send({ type: 'ADD_EDGE', payload: { from, to: props.id } });
-              }
-
-              setNewEdge();
+              } else service.send('CLEAR_NEW_EDGE');
             }}
           ></div>
         </div>
@@ -247,27 +211,19 @@ export const NodeComponent: Component<Props> = props => {
         style={{ right: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
       >
         <div
-          ref={el => (outputRef = el)}
           class='cursor-crosshair rounded-full bg-[#e38b29] shadow-md'
+
           style={{
             width: `${HANDLE_SIZE}px`,
             height: `${HANDLE_SIZE}px`,
             'margin-top': `${HANDLE_MARGIN_TOP}px`,
             'pointer-events': 'all',
           }}
+
           onMouseDown={event => {
             event.stopPropagation();
             service.send('DESELECT');
-            const output = dimensions()[props.id]?.output;
-            const boardPoint = getBoardPoint(event.clientX, event.clientY);
-            if (output)
-              setNewEdge({
-                x0: output.x,
-                y0: output.y,
-                x1: boardPoint.x,
-                y1: boardPoint.y,
-                from: props.id,
-              });
+            service.send({ type: 'START_NEW_EDGE', payload: props.id });
           }}
         ></div>
       </div>

package/src/ui/components/NodesBoard.tsx

@@ -1,16 +1,25 @@
-import { useState } from '@bemedev/app-solidjs';
+import { toArray } from '@bemedev/app';
+import { createState } from '@bemedev/app-solidjs';
 import {
   DragDropProvider,
   DragDropSensors,
   DragOverlay,
 } from '@thisbeyond/solid-dnd';
 import { dequal } from 'dequal';
-import { Component, createEffect, createSignal, For, on, Show } from 'solid-js';
+import {
+  Component,
+  createEffect,
+  createSignal,
+  For,
+  on,
+  onMount,
+  Show,
+} from 'solid-js';
 
+import { CANVAS_FACTOR, SCROLL_MULTIPLIER } from '../../services/main.machine.data';
 import { DragBounds } from './Bounds';
 import { EdgesBoard } from './EdgesBoard';
 import { useFlow } from './FlowChart.context';
-import { CANVAS_FACTOR, SCROLL_MULTIPLIER } from './FlowChart.data';
 import { NodeComponent } from './NodeComponent';
 
 /**
@@ -18,22 +27,56 @@ import { NodeComponent } from './NodeComponent';
  * panning gestures, and rendered nodes/edges.
  *
  * @returns The rendered Solid component.
+ *
+ * @see {@linkcode DragBounds}, {@linkcode EdgesBoard}, {@linkcode NodeComponent}, {@linkcode useFlow}, {@linkcode CANVAS_FACTOR}, {@linkcode SCROLL_MULTIPLIER}
  */
 export const NodesBoard: Component = () => {
   let containerRef: HTMLDivElement;
   const [isPanning, setIsPanning] = createSignal(false);
   const [transform, setTransform] = createSignal({ x: 0, y: 0 });
   const [id, setId] = createSignal<string | number>('');
-  const [previousZoom, setPreviousZoom] = createSignal<number>();
+  const [ref, setRef] = createSignal<HTMLDivElement | undefined>();
   let percentX = 0;
   let percentY = 0;
 
-  const {
-    board: [, setRef],
-    service,
-    newEdge: [newEdge],
-    zoom: [zoom, setZoom],
-  } = useFlow();
+  const service = useFlow();
+
+  const newEdge = createState(service, {
+    selector: s => s.context.newEdge,
+    equals: dequal,
+  });
+
+  const zoom = createState(service, { selector: s => s.context.zoom ?? 1 });
+
+  /**
+   * Dispatches the current board geometry and parent container dimensions to the
+   * state machine service.
+   */
+  const sendBoard = () => {
+    const el = ref();
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const parent = () => ref()?.parentElement;
+
+    const payload = {
+      self: {
+        left: rect.left,
+        top: rect.top,
+        width: el.clientWidth,
+        height: el.clientHeight,
+      },
+      parent: parent()
+        ? {
+            scrollLeft: parent()!.scrollLeft,
+            scrollTop: parent()!.scrollTop,
+            height: parent()!.clientHeight,
+            width: parent()!.clientWidth,
+          }
+        : undefined,
+    };
+
+    service.send({ type: 'SET_BOARD', payload });
+  };
 
   /**
    * Calculates and saves the normalized scroll percentages across X and Y axes for
@@ -44,6 +87,7 @@ export const NodesBoard: Component = () => {
     const maxScrollY = containerRef.scrollHeight - containerRef.clientHeight;
     percentX = maxScrollX > 0 ? containerRef.scrollLeft / maxScrollX : 0;
     percentY = maxScrollY > 0 ? containerRef.scrollTop / maxScrollY : 0;
+    sendBoard();
   };
 
   createEffect(
@@ -59,7 +103,9 @@ export const NodesBoard: Component = () => {
     ),
   );
 
-  const selectedId = useState(service, { selector: s => s.context?.selected });
+  onMount(sendBoard);
+
+  const selectedId = createState(service, { selector: s => s.context?.selected });
 
   /**
    * Determines whether the given element ID matches the currently selected entity.
@@ -70,25 +116,22 @@ export const NodesBoard: Component = () => {
    */
   const selected = (id: string | number) => selectedId() === id;
 
-  const nodes = useState(service, {
-    selector: s => {
-      const list = s.context.data?.nodes ?? [];
-      return list.map(item => ({
-        id: item.id,
-        x: item.position.x,
-        y: item.position.y,
-        label: item.data.label,
-        content: item.data.content ?? '',
-        input: item.input,
-      }));
+  const nodeIds = createState(service, {
+    selector: ({ context }) => {
+      const list = toArray.typed(context.data?.nodes);
+      return list.map(item => item.id);
     },
-    equals: dequal,
+    equals: (prev, next) => prev.length === next.length,
   });
 
   const CANVAS_SIZE = CANVAS_FACTOR * 100;
   const MARGIN_X = 53 * CANVAS_FACTOR;
   const MARGIN_Y = 85 * CANVAS_FACTOR;
+
+  /** Computes the dynamic canvas width string in CSS units adjusted for zoom. */
   const cWidth = () => `calc((${CANVAS_SIZE}vw - ${MARGIN_X}px) * ${zoom()})`;
+
+  /** Computes the dynamic canvas height string in CSS units adjusted for zoom. */
   const cHeight = () => `calc((${CANVAS_SIZE}vh - ${MARGIN_Y}px) * ${zoom()})`;
 
   return (
@@ -98,9 +141,7 @@ export const NodesBoard: Component = () => {
           e.preventDefault();
           updateScrollPercentages();
           const delta = e.deltaY < 0 ? 0.1 : -0.1;
-          setZoom(prev =>
-            Math.min(Math.max(Number((prev + delta).toFixed(2)), 0.2), 3),
-          );
+          service.send({ type: 'ZOOM', payload: delta });
         }
       }}
 
@@ -167,8 +208,8 @@ export const NodesBoard: Component = () => {
           node.style.setProperty('left', X + 'px');
           node.style.removeProperty('transform');
 
+          service.send({ type: 'MOVE', payload: { id: `${id}`, x: X, y: Y } });
           setTimeout(() => {
-            service.send({ type: 'MOVE', payload: { id: `${id}`, x: X, y: Y } });
             setTransform({ x: 0, y: 0 });
           }, 0);
         }}
@@ -178,7 +219,7 @@ export const NodesBoard: Component = () => {
             return (containerRef = el);
           }}
           onScroll={updateScrollPercentages}
-          class='relative h-full w-full overflow-scroll rounded-lg border-2 border-gray-600'
+          class='relative h-full w-full overflow-auto rounded-lg border-2 border-gray-600'
         >
           <DragDropSensors />
           <div
@@ -186,6 +227,7 @@ export const NodesBoard: Component = () => {
             class='relative cursor-crosshair overflow-hidden'
             classList={{ 'cursor-grabbing': isPanning() }}
             style={{ height: cHeight(), width: cWidth() }}
+            onScroll={() => {}}
 
             onMouseDown={e => {
               if (newEdge() || e.button !== 0) return;
@@ -226,7 +268,7 @@ export const NodesBoard: Component = () => {
             >
               <DragBounds />
               <EdgesBoard />
-              <For each={nodes()} children={NodeComponent} />
+              <For each={nodeIds()}>{id => <NodeComponent id={id} />}</For>
             </div>
           </div>
         </div>
@@ -238,10 +280,7 @@ export const NodesBoard: Component = () => {
             class='flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95'
             onClick={() => {
               updateScrollPercentages();
-              setPreviousZoom(undefined);
-              setZoom(prev =>
-                Math.max(1 / CANVAS_FACTOR, Number((prev - 0.1).toFixed(2))),
-              );
+              service.send({ type: 'ZOOM', payload: -0.1 });
             }}
             title='Zoom out'
             aria-label='Zoom out'
@@ -253,13 +292,7 @@ export const NodesBoard: Component = () => {
             class='h-9 cursor-pointer rounded-lg px-2 text-xs font-semibold text-gray-700 transition-colors hover:bg-gray-100'
             onClick={() => {
               updateScrollPercentages();
-              if (previousZoom()) {
-                setZoom(previousZoom()!);
-                setPreviousZoom(undefined);
-              } else {
-                setPreviousZoom(zoom());
-                setZoom(1);
-              }
+              service.send('TOGGLE_ZOOM');
             }}
             title='Reset zoom'
             aria-label='Reset zoom'
@@ -271,13 +304,7 @@ export const NodesBoard: Component = () => {
             class='flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95'
             onClick={() => {
               updateScrollPercentages();
-              setPreviousZoom(undefined);
-              setZoom(prev =>
-                Math.min(
-                  Math.min(3, CANVAS_FACTOR),
-                  Number((prev + 0.1).toFixed(2)),
-                ),
-              );
+              service.send({ type: 'ZOOM', payload: 0.1 });
             }}
             title='Zoom in'
             aria-label='Zoom in'

package/src/ui/components/classes.ts

@@ -23,7 +23,7 @@ export const CLASSES = [
   'w-full',
   'h-full',
   'overflow-hidden',
-  'overflow-scroll',
+  'overflow-auto',
   'h-[150vh]',
   'w-[2160px]',
   'bg-size-[30px_30px]',

package/lib/services/main.typings.d.ts

@@ -1,68 +0,0 @@
-import { inferT } from '@bemedev/app/typings';
-/** Schema definition for 2D coordinates `(x, y)`. */
-export declare const point: import('@bemedev/typings').inferSh<{
-    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 declare const nodeOffset: import('@bemedev/typings').inferSh<{
-    input: import('@bemedev/typings').Optional<{
-        x: "number";
-        y: "number";
-    }>;
-    output: {
-        x: "number";
-        y: "number";
-    };
-}>;
-/** Schema definition for edge extremities. */
-export declare const extremities: import('@bemedev/typings').inferSh<{
-    from: "string";
-    to: "string";
-}>;
-/** Schema definition for a serialized flowchart node entity. */
-export declare const nodeJSON: import('@bemedev/typings').inferSh<{
-    position: {
-        x: "number";
-        y: "number";
-    };
-    data: {
-        label: import('@bemedev/typings').Optional<"string">;
-        content: "string";
-    };
-    input: "boolean";
-}>;
-/** Schema definition for a serialized flowchart edge entity. */
-export declare const edgeJSON: import('@bemedev/typings').inferSh<{
-    from: "string";
-    to: "string";
-}>;
-/** Schema definition for layout dimensions and connection points of a node. */
-export declare const dimensions: import('@bemedev/typings').inferSh<{
-    width: "number";
-    height: "number";
-    id: "string";
-    output: {
-        x: "number";
-        y: "number";
-    };
-    input: import('@bemedev/typings').Optional<{
-        x: "number";
-        y: "number";
-    }>;
-}>;
-/**
- * Schema definition for a 2D line vector representing edge coordinates `(x0, y0)` to
- * `(x1, y1)`.
- */
-export declare const vector: import('@bemedev/typings').inferSh<{
-    x0: "number";
-    y0: "number";
-    x1: "number";
-    y1: "number";
-}>;
-/** 2D vector coordinate type inferred from schema {@linkcode vector}. */
-export type Vector = inferT<typeof vector>;
-//# sourceMappingURL=main.typings.d.ts.map

package/lib/services/main.typings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.typings.d.ts","sourceRoot":"","sources":["../../src/services/main.typings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,qDAAqD;AACrD,eAAO,MAAM,KAAK;;;EAAqC,CAAC;AAExD,uEAAuE;AACvE,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,KAAK,CAAC,CAAC;AAEzC,oEAAoE;AACpE,eAAO,MAAM,UAAU;;;;;;;;;EAGpB,CAAC;AAEJ,8CAA8C;AAC9C,eAAO,MAAM,WAAW;;;EAAyC,CAAC;AAElE,gEAAgE;AAChE,eAAO,MAAM,QAAQ;;;;;;;;;;EAIlB,CAAC;AAEJ,gEAAgE;AAChE,eAAO,MAAM,QAAQ;;;EAAc,CAAC;AAEpC,+EAA+E;AAC/E,eAAO,MAAM,UAAU;;;;;;;;;;;;EAMpB,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;EAKjB,CAAC;AAEH,yEAAyE;AACzE,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,MAAM,CAAC,CAAC"}

package/lib/ui/components/FlowChart.data.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlowChart.data.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,mFAAmF;AACnF,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAG1C,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,sDAAsD;AACtD,eAAO,MAAM,WAAW,KAAK,CAAC;AAE9B,oDAAoD;AACpD,eAAO,MAAM,aAAa,QAAkB,CAAC;AAE7C,+DAA+D;AAC/D,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,kEAAkE;AAClE,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAE5C,sDAAsD;AACtD,eAAO,MAAM,eAAe,QAAoC,CAAC;AAEjE,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,QAC4B,CAAC;AAEhE,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,QAA0B,CAAC;AAE9D,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,QAAkB,CAAC;AAEtD,kEAAkE;AAClE,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,oBAAoB;;;CAAgC,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAAS;;;CAG9C,CAAC;AAEH,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,yDAAyD;AACzD,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;CAAmC,CAAC;AAEnE,0EAA0E;AAC1E,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B,kEAAkE;AAClE,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAGnC;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,CAAC,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,EAOvD,CAAC"}

package/src/services/main.typings.ts

@@ -1,50 +0,0 @@
-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>;