refactor(store): connection data

2023-06-05 00:02:07 +02:00
parent 1dab08f36e
commit 45f51e96b1
29 changed files with 527 additions and 879 deletions
@@ -2,9 +2,8 @@
  import { getContext, createEventDispatcher } from 'svelte';
  import cc from 'classcat';
  import { Position, type Connection } from '@reactflow/system';
-  import { isMouseEvent } from '@reactflow/utils';
+  import { XYHandle, isMouseEvent } from '@reactflow/utils';

-  import { handlePointerDown } from './handler';
  import { useStore } from '$lib/store';
  import type { HandleComponentProps } from '$lib/types';

@@ -23,7 +22,8 @@

  const handleId = id || null;
  const dispatch = createEventDispatcher();
-
+  
+  const store = useStore();
  const {
    connectionMode,
    domNode,
@@ -31,11 +31,12 @@
    connectionRadius,
    transform,
    isValidConnection,
+    lib,
    addEdge,
    panBy,
    cancelConnection,
    updateConnection,
-  } = useStore();
+  } = store;

  function dispatchEvent(eventName: string, params?: Connection) {
    dispatch(eventName, params || { nodeId, handleId, type });
@@ -50,23 +51,22 @@
    const isMouseTriggered = isMouseEvent(event);

    if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
-      handlePointerDown({
-        event,
+      XYHandle.onPointerDown(event, {
        handleId,
        nodeId,
        isTarget,
        connectionRadius: $connectionRadius,
        domNode: $domNode,
-        nodes,
+        nodes: $nodes,
        connectionMode: $connectionMode,
-        transform,
+        transform: $transform,
+        lib: $lib,
+        autoPanOnConnect: true,
        isValidConnection: $isValidConnection,
-        onConnect: onConnectExtended,
        updateConnection,
        cancelConnection,
        panBy,
-        onConnectStart: () => dispatchEvent('connect:start'),
-        onConnectEnd: () => dispatchEvent('connect:end')
+        onConnect: onConnectExtended,
      });
    }
  }
@@ -1,213 +0,0 @@
-import { get, type Writable } from 'svelte/store';
-import {
-  getHostForElement,
-  calcAutoPan,
-  getEventPosition,
-  pointToRendererPoint,
-  rendererPointToPoint
-} from '@reactflow/utils';
-import type {
-  OnConnect,
-  HandleType,
-  Connection,
-  ConnectionMode,
-  XYPosition,
-  Transform
-} from '@reactflow/system';
-
-import {
-  getClosestHandle,
-  getConnectionStatus,
-  getHandleLookup,
-  getHandleType,
-  isValidHandle,
-  resetRecentHandle,
-  type ConnectionHandle
-} from './utils';
-import type { ConnectionData, IsValidConnection, Node } from '$lib/types';
-
-export function handlePointerDown({
-  event,
-  handleId,
-  nodeId,
-  onConnect,
-  domNode,
-  nodes,
-  connectionMode,
-  connectionRadius,
-  isTarget,
-  transform: transformStore,
-  panBy,
-  updateConnection,
-  cancelConnection,
-  isValidConnection,
-  edgeUpdaterType,
-  onEdgeUpdateEnd,
-  onConnectStart,
-  onConnectEnd
-}: {
-  event: MouseEvent | TouchEvent;
-  handleId: string | null;
-  nodeId: string;
-  onConnect: OnConnect;
-  isTarget: boolean;
-  connectionMode: ConnectionMode;
-  domNode: HTMLDivElement | null;
-  nodes: Writable<Node[]>;
-  connectionRadius: number;
-  isValidConnection: IsValidConnection;
-  transform: Writable<Transform>;
-  updateConnection: (connection: Partial<ConnectionData>) => void;
-  cancelConnection: () => void;
-  panBy: (delta: XYPosition) => void;
-  edgeUpdaterType?: HandleType;
-  onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
-  onConnectStart: () => void;
-  onConnectEnd: () => void;
-}): void {
-  // when svelte-flow is used inside a shadow root we can't use document
-  const doc = getHostForElement(event.target as HTMLElement);
-  let autoPanId = 0;
-  let prevClosestHandle: ConnectionHandle | null;
-
-  const { x, y } = getEventPosition(event);
-  const clickedHandle = doc?.elementFromPoint(x, y);
-  const handleType = getHandleType(edgeUpdaterType, clickedHandle);
-  const containerBounds = domNode?.getBoundingClientRect();
-
-  if (!containerBounds || !handleType) {
-    return;
-  }
-
-  let prevActiveHandle: Element;
-  let connectionPosition = getEventPosition(event, containerBounds);
-  let autoPanStarted = false;
-  let connection: Connection | null = null;
-  let isValid = false;
-  let handleDomNode: Element | null = null;
-
-  const autoPanOnConnect = true;
-
-  const handleLookup = getHandleLookup({
-    nodes: get(nodes),
-    nodeId,
-    handleId,
-    handleType
-  });
-
-  // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
-  const autoPan = (): void => {
-    // @todd add prop
-    if (!autoPanOnConnect) {
-      return;
-    }
-    const [xMovement, yMovement] = calcAutoPan(connectionPosition, containerBounds);
-
-    panBy({ x: xMovement, y: yMovement });
-    autoPanId = requestAnimationFrame(autoPan);
-  };
-
-  updateConnection({
-    position: connectionPosition,
-    nodeId,
-    handleId,
-    handleType,
-    status: null
-  });
-
-  // onConnectStart?.(event, { nodeId, handleId, handleType });
-  onConnectStart();
-
-  function onPointerMove(event: MouseEvent | TouchEvent) {
-    const transform = get(transformStore);
-    connectionPosition = getEventPosition(event, containerBounds);
-
-    prevClosestHandle = getClosestHandle(
-      pointToRendererPoint(connectionPosition, transform, false, [1, 1]),
-      connectionRadius,
-      handleLookup
-    );
-
-    if (!autoPanStarted) {
-      autoPan();
-      autoPanStarted = true;
-    }
-
-    const result = isValidHandle(
-      event,
-      prevClosestHandle,
-      connectionMode,
-      nodeId,
-      handleId,
-      isTarget ? 'target' : 'source',
-      isValidConnection,
-      doc,
-      get(nodes)
-    );
-
-    handleDomNode = result.handleDomNode;
-    connection = result.connection;
-    isValid = result.isValid;
-
-    updateConnection({
-      position:
-        prevClosestHandle && isValid
-          ? rendererPointToPoint(
-              {
-                x: prevClosestHandle.x,
-                y: prevClosestHandle.y
-              },
-              transform
-            )
-          : connectionPosition,
-      status: getConnectionStatus(!!prevClosestHandle, isValid)
-    });
-
-    if (!prevClosestHandle && !isValid && !handleDomNode) {
-      return resetRecentHandle(prevActiveHandle);
-    }
-
-    if (connection.source !== connection.target && handleDomNode) {
-      resetRecentHandle(prevActiveHandle);
-      prevActiveHandle = handleDomNode;
-      // @todo: remove the old class names "svelte-flow__handle-" in the next major version
-      handleDomNode.classList.add('connecting');
-      handleDomNode.classList.toggle('valid', isValid);
-    }
-  }
-
-  function onPointerUp(event: MouseEvent | TouchEvent) {
-    if ((prevClosestHandle || handleDomNode) && connection && isValid) {
-      onConnect?.(connection);
-    }
-
-    // it's important to get a fresh reference from the store here
-    // in order to get the latest state of onConnectEnd
-
-    onConnectEnd();
-
-    if (edgeUpdaterType) {
-      onEdgeUpdateEnd?.(event);
-    }
-
-    resetRecentHandle(prevActiveHandle);
-    cancelConnection();
-    cancelAnimationFrame(autoPanId);
-    autoPanStarted = false;
-    isValid = false;
-    connection = null;
-    handleDomNode = null;
-
-    doc.removeEventListener('mousemove', onPointerMove as EventListener);
-    doc.removeEventListener('mouseup', onPointerUp as EventListener);
-
-    doc.removeEventListener('touchmove', onPointerMove as EventListener);
-    doc.removeEventListener('touchend', onPointerUp as EventListener);
-  }
-
-  doc.addEventListener('mousemove', onPointerMove as EventListener);
-  doc.addEventListener('mouseup', onPointerUp as EventListener);
-
-  doc.addEventListener('touchmove', onPointerMove as EventListener);
-  doc.addEventListener('touchend', onPointerUp as EventListener);
-}
@@ -1,194 +0,0 @@
-import { internalsSymbol, ConnectionMode, type ConnectionStatus } from '@reactflow/system';
-import type { Connection, HandleType, XYPosition, NodeHandleBounds } from '@reactflow/system';
-import { getEventPosition } from '@reactflow/utils';
-
-import type { IsValidConnection, Node } from '$lib/types';
-
-export type ConnectionHandle = {
-  id: string | null;
-  type: HandleType;
-  nodeId: string;
-  x: number;
-  y: number;
-};
-
-export type ValidConnectionFunc = (connection: Connection) => boolean;
-
-// this functions collects all handles and adds an absolute position
-// so that we can later find the closest handle to the mouse position
-export function getHandles(
-  node: Node,
-  handleBounds: NodeHandleBounds,
-  type: HandleType,
-  currentHandle: string
-): ConnectionHandle[] {
-  return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
-    if (`${node.id}-${h.id}-${type}` !== currentHandle) {
-      res.push({
-        id: h.id || null,
-        type,
-        nodeId: node.id,
-        x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
-        y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2
-      });
-    }
-    return res;
-  }, []);
-}
-
-export function getClosestHandle(
-  pos: XYPosition,
-  connectionRadius: number,
-  handles: ConnectionHandle[]
-): ConnectionHandle | null {
-  let closestHandle: ConnectionHandle | null = null;
-  let minDistance = Infinity;
-
-  handles.forEach((handle) => {
-    const distance = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2));
-    if (distance <= connectionRadius && distance < minDistance) {
-      minDistance = distance;
-      closestHandle = handle;
-    }
-  });
-
-  return closestHandle;
-}
-
-type Result = {
-  handleDomNode: Element | null;
-  isValid: boolean;
-  connection: Connection;
-};
-
-const nullConnection: Connection = {
-  source: null,
-  target: null,
-  sourceHandle: null,
-  targetHandle: null
-};
-
-// checks if  and returns connection in fom of an object { source: 123, target: 312 }
-export function isValidHandle(
-  event: MouseEvent | TouchEvent,
-  handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'> | null,
-  connectionMode: ConnectionMode,
-  fromNodeId: string,
-  fromHandleId: string | null,
-  fromType: string,
-  isValidConnection: IsValidConnection,
-  doc: Document | ShadowRoot,
-  nodes: Node[]
-) {
-  const isTarget = fromType === 'target';
-  const handleDomNode = doc.querySelector(
-    `.svelte-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
-  );
-  const { x, y } = getEventPosition(event);
-  const handleBelow = doc.elementFromPoint(x, y);
-  const handleToCheck = handleBelow?.classList.contains('svelte-flow__handle')
-    ? handleBelow
-    : handleDomNode;
-
-  const result: Result = {
-    handleDomNode: handleToCheck,
-    isValid: false,
-    connection: nullConnection
-  };
-
-  if (handleToCheck) {
-    const handleType = getHandleType(undefined, handleToCheck);
-    const handleNodeId = handleToCheck.getAttribute('data-nodeid');
-    const handleId = handleToCheck.getAttribute('data-handleid');
-
-    const connection: Connection = {
-      source: isTarget ? handleNodeId : fromNodeId,
-      sourceHandle: isTarget ? handleId : fromHandleId,
-      target: isTarget ? fromNodeId : handleNodeId,
-      targetHandle: isTarget ? fromHandleId : handleId
-    };
-
-    result.connection = connection;
-
-    // in strict mode we don't allow target to target or source to source connections
-    const isValid =
-      connectionMode === ConnectionMode.Strict
-        ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
-        : handleNodeId !== fromNodeId || handleId !== fromHandleId;
-
-    if (isValid) {
-      const fromNode: Node | undefined = nodes.find((n) => n.id === connection.source);
-      const toNode: Node | undefined = nodes.find((n) => n.id === connection.target);
-
-      if (fromNode && toNode) result.isValid = isValidConnection(connection, { fromNode, toNode });
-    }
-  }
-
-  return result;
-}
-
-type GetHandleLookupParams = {
-  nodes: Node[];
-  nodeId: string;
-  handleId: string | null;
-  handleType: string;
-};
-
-export function getHandleLookup({ nodes, nodeId, handleId, handleType }: GetHandleLookupParams) {
-  return nodes.reduce<ConnectionHandle[]>((res, node) => {
-    if (node[internalsSymbol]) {
-      const { handleBounds } = node[internalsSymbol];
-      let sourceHandles: ConnectionHandle[] = [];
-      let targetHandles: ConnectionHandle[] = [];
-
-      if (handleBounds) {
-        sourceHandles = getHandles(
-          node,
-          handleBounds,
-          'source',
-          `${nodeId}-${handleId}-${handleType}`
-        );
-        targetHandles = getHandles(
-          node,
-          handleBounds,
-          'target',
-          `${nodeId}-${handleId}-${handleType}`
-        );
-      }
-
-      res.push(...sourceHandles, ...targetHandles);
-    }
-    return res;
-  }, []);
-}
-
-export function getHandleType(
-  edgeUpdaterType: HandleType | undefined,
-  handleDomNode: Element | null
-): HandleType | null {
-  if (edgeUpdaterType) {
-    return edgeUpdaterType;
-  } else if (handleDomNode?.classList.contains('target')) {
-    return 'target';
-  } else if (handleDomNode?.classList.contains('source')) {
-    return 'source';
-  }
-
-  return null;
-}
-
-export function resetRecentHandle(handleDomNode: Element): void {
-  handleDomNode?.classList.remove('valid', 'connecting');
-}
-
-export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) {
-  let connectionStatus = null;
-
-  if (isHandleValid) {
-    connectionStatus = 'valid';
-  } else if (isInsideConnectionRadius && !isHandleValid) {
-    connectionStatus = 'invalid';
-  }
-
-  return connectionStatus as ConnectionStatus;
-}