@bemedev/mind-flow 0.1.1 → 0.3.0

package/src/ui/components/EdgeComponent.tsx

@@ -1,7 +1,9 @@
-import { useState } from '@bemedev/app-solidjs';
-import { Component, createEffect, createSignal, Show } from 'solid-js';
+import { createState } from '@bemedev/app-solidjs';
+import { dequal } from 'dequal';
+import { Component, Show } from 'solid-js';
+
+import type { Vector } from '#services/main.machine.typings';
 
-import type { Vector } from '../../services/main.typings';
 import { useFlow } from './FlowChart.context';
 
 /** Properties for rendering an SVG connection edge between two points. */
@@ -10,7 +12,7 @@ type Props = {
   id: string;
   /** Whether this is a temporary edge currently being dragged. */
   isNew?: boolean;
-} & Vector;
+};
 
 /**
  * Computes bezier curve control point offset based on horizontal distance.
@@ -28,6 +30,8 @@ const calculateOffset = (value: number) => (value * 100) / 200;
  * @param vector - Vector coordinates of type {@linkcode Vector}.
  *
  * @returns SVG cubic bezier path string.
+ *
+ * @see {@linkcode calculateOffset}
  */
 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}`;
@@ -40,66 +44,84 @@ const draw = ({ x0, y0, x1, y1 }: Vector) => {
  * @param props - Edge properties of type {@linkcode Props}.
  *
  * @returns The rendered SVG JSX elements.
+ *
+ * @see {@linkcode draw}, {@linkcode useFlow}
  */
 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();
+  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 vector = createState(service, {
+    selector: ({ context }) => {
+      if (props.isNew) {
+        const edge = context.newEdge;
+        if (!edge) return undefined;
+        return { x0: edge.x0, y0: edge.y0, x1: edge.x1, y1: edge.y1 };
+      }
+      return context.edgesPositions[props.id];
+    },
+    equals: dequal,
   });
 
-  const selected = useState(service, {
+  const selected = createState(service, {
     selector: s => s.context.selected === props.id,
   });
 
+  /** 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(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>
-    </>
+    <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

@@ -1,11 +1,5 @@
-import {
-  Component,
-  createEffect,
-  createMemo,
-  createSignal,
-  For,
-  Show,
-} from 'solid-js';
+import { createState } from '@bemedev/app-solidjs';
+import { Component, For, Show } from 'solid-js';
 
 import { EdgeComponent } from './EdgeComponent';
 import { useFlow } from './FlowChart.context';
@@ -15,43 +9,26 @@ import { useFlow } from './FlowChart.context';
  * edge creation previews.
  *
  * @returns The rendered SVG JSX element.
+ *
+ * @see {@linkcode EdgeComponent}, {@linkcode useFlow}
  */
 export const EdgesBoard: Component = () => {
-  const [selected, setSelected] = createSignal<string>();
-
-  const {
-    newEdge: [newEdge],
-    edgesPositions: [edgesPositions],
-  } = useFlow();
+  const service = useFlow();
 
-  const datas = createMemo(() => {
-    const entries = Object.entries(edgesPositions());
-    return entries.map(([id, vector]) => ({ id, ...vector }));
-  });
+  const hasNewEdge = createState(service, { selector: s => !!s.context.newEdge });
 
-  createEffect(() => {
-    if (selected() && newEdge()) setSelected();
+  const edgeIds = createState(service, {
+    selector: ({ context }) => Object.keys(context.edgesPositions),
+    equals: (prev, next) => prev.length === next.length,
   });
 
   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}
-          />
-        )}
+    <svg class='pointer-events-none h-full w-full overflow-visible'>
+      <Show when={hasNewEdge()}>
+        <EdgeComponent id='__#new-edge#__TEMP' isNew />
       </Show>
 
-      <For each={datas()} children={EdgeComponent} />
+      <For each={edgeIds()}>{id => <EdgeComponent id={id} />}</For>
     </svg>
   );
 };