@bemedev/mind-flow 0.3.0 → 0.3.2

package/src/ui/components/NodeComponent.tsx

@@ -39,12 +39,14 @@ type Props = {
  */
 export const NodeComponent: Component<Props> = props => {
   const service = useFlow();
+  const newEdge = createState(service, { selector: s => s.context.newEdge });
+  const draggable = createDraggable(props.id);
+  void draggable;
 
   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;
+      const item = list.find(n => n.id === props.id)!;
       return {
         x: item.position.x,
         y: item.position.y,
@@ -56,10 +58,8 @@ export const NodeComponent: Component<Props> = props => {
     equals: dequal,
   });
 
-  const newEdge = createState(service, { selector: s => s.context.newEdge });
-
   const selected = createState(service, {
-    selector: s => s.context.selected === props.id,
+    selector: ({ context }) => context.selected === props.id,
   });
 
   const hasParent = createState(service, {
@@ -70,9 +70,6 @@ export const NodeComponent: Component<Props> = props => {
     },
   });
 
-  const draggable = createDraggable(props.id);
-  void draggable;
-
   return (
     <div
       classList={{
@@ -81,7 +78,7 @@ export const NodeComponent: Component<Props> = props => {
         'border border-[#e6d4be] z-[1]': !selected(),
       }}
 
-      style={{ top: `${node()?.y ?? 0}px`, left: `${node()?.x ?? 0}px` }}
+      style={{ top: `${node().y}px`, left: `${node().x}px` }}
       class='min-w-48'
       use:draggable={{ skipTransform: true }}
       id={props.id}
@@ -122,6 +119,7 @@ export const NodeComponent: Component<Props> = props => {
         <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'
+
             style={{
               'pointer-events': 'all',
               'fill-rule': 'evenodd',
@@ -145,6 +143,7 @@ export const NodeComponent: Component<Props> = props => {
             </g>
           </svg>
         </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 })}
@@ -162,7 +161,7 @@ export const NodeComponent: Component<Props> = props => {
         </svg>
       </div>
 
-      <Show when={node()?.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}
@@ -170,13 +169,13 @@ export const NodeComponent: Component<Props> = props => {
         )}
       </Show>
 
-      <Show when={node()?.content} keyed>
+      <Show when={node().content} keyed>
         {content => <div class='p-3 select-none'>{content}</div>}
       </Show>
 
-      <Show when={node()?.input || hasParent()}>
+      <Show when={node().input || hasParent()}>
         <div
-          id='outputs'
+          id='inputs'
           class='pointer-events-none absolute top-0 z-10 flex cursor-default flex-col'
           style={{ left: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
         >
@@ -206,7 +205,7 @@ export const NodeComponent: Component<Props> = props => {
         </div>
       </Show>
       <div
-        id='inputs'
+        id='outputs'
         class='pointer-events-none absolute top-0 z-10 flex flex-col'
         style={{ right: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
       >

package/src/ui/components/NodesBoard.tsx

@@ -34,7 +34,6 @@ 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 [ref, setRef] = createSignal<HTMLDivElement | undefined>();
   let percentX = 0;
   let percentY = 0;
@@ -107,15 +106,6 @@ export const NodesBoard: Component = () => {
 
   const selectedId = createState(service, { selector: s => s.context?.selected });
 
-  /**
-   * Determines whether the given element ID matches the currently selected entity.
-   *
-   * @param id - The node or edge identifier to check.
-   *
-   * @returns `true` if the item is currently selected, otherwise `false`.
-   */
-  const selected = (id: string | number) => selectedId() === id;
-
   const nodeIds = createState(service, {
     selector: ({ context }) => {
       const list = toArray.typed(context.data?.nodes);
@@ -149,44 +139,38 @@ export const NodesBoard: Component = () => {
     >
       <DragDropProvider
         onDragMove={({ draggable: { transform: _transform, node, id } }) => {
-          setId(id);
-          if (selected(id)) {
-            const grandParent = node.parentElement?.parentElement;
-            const currentZoom = zoom();
-            const minX = 0;
-            const maxX = grandParent
-              ? Math.max(0, grandParent.clientWidth / currentZoom - node.offsetWidth)
-              : Infinity;
-            const minY = 0;
-            const maxY = grandParent
-              ? Math.max(
-                  0,
-                  grandParent.clientHeight / currentZoom - node.offsetHeight,
-                )
-              : Infinity;
-
-            const targetX = node.offsetLeft + _transform.x / currentZoom;
-            const targetY = node.offsetTop + _transform.y / currentZoom;
-
-            const x = Math.min(Math.max(targetX, minX), maxX);
-            const y = Math.min(Math.max(targetY, minY), maxY);
-
-            const deltaX = x - node.offsetLeft;
-            const deltaY = y - node.offsetTop;
-
-            // Directly update the draggable node's CSS transform adjusted for zoom:
-            node.style.setProperty(
-              'transform',
-              `translate3d(${deltaX}px, ${deltaY}px, 0)`,
-            );
-
-            service.send({ type: 'MOVE_IMMEDIATE', payload: { id: `${id}`, x, y } });
-            setTransform({ x: deltaX * currentZoom, y: deltaY * currentZoom });
-          }
+          const grandParent = node.parentElement?.parentElement;
+          const currentZoom = zoom();
+          const minX = 0;
+          const maxX = grandParent
+            ? Math.max(0, grandParent.clientWidth / currentZoom - node.offsetWidth)
+            : Infinity;
+          const minY = 0;
+          const maxY = grandParent
+            ? Math.max(0, grandParent.clientHeight / currentZoom - node.offsetHeight)
+            : Infinity;
+
+          const targetX = node.offsetLeft + _transform.x / currentZoom;
+          const targetY = node.offsetTop + _transform.y / currentZoom;
+
+          const x = Math.min(Math.max(targetX, minX), maxX);
+          const y = Math.min(Math.max(targetY, minY), maxY);
+
+          const deltaX = x - node.offsetLeft;
+          const deltaY = y - node.offsetTop;
+
+          // Directly update the draggable node's CSS transform adjusted for zoom:
+          node.style.setProperty(
+            'transform',
+            `translate3d(${deltaX}px, ${deltaY}px, 0)`,
+          );
+
+          service.send({ type: 'MOVE_IMMEDIATE', payload: { id: `${id}`, x, y } });
+          setTransform({ x: deltaX * currentZoom, y: deltaY * currentZoom });
         }}
 
         onDragEnd={({ draggable: { node, id } }) => {
-          if (!selected(id)) return;
+          // if (!selected(id)) return;
 
           const grandParent = node.parentElement?.parentElement;
           const currentZoom = zoom();
@@ -227,11 +211,12 @@ export const NodesBoard: Component = () => {
             class='relative cursor-crosshair overflow-hidden'
             classList={{ 'cursor-grabbing': isPanning() }}
             style={{ height: cHeight(), width: cWidth() }}
-            onScroll={() => {}}
+            // onScroll={() => {}}
 
             onMouseDown={e => {
               if (newEdge() || e.button !== 0) return;
               service.send('DESELECT');
+              setIsPanning(true);
 
               // #region Props
               const startX = e.clientX;
@@ -240,8 +225,6 @@ export const NodesBoard: Component = () => {
               const startScrollTop = containerRef.scrollTop;
               // #endregion
 
-              setIsPanning(true);
-
               const handleMouseMove = (moveEvent: MouseEvent) => {
                 const dx = moveEvent.clientX - startX;
                 const dy = moveEvent.clientY - startY;
@@ -325,7 +308,7 @@ export const NodesBoard: Component = () => {
             </svg>
           </button>
         </div>
-        <Show when={!id() || !selected(id())}>
+        <Show when={!selectedId()}>
           <DragOverlay children='' />
         </Show>
       </DragDropProvider>