refactor(svelte/react): use edge layouting vanilla helpers

2023-06-08 15:46:35 +02:00
parent 4707a07c8b
commit c1e2499028
21 changed files with 392 additions and 436 deletions
@@ -1,19 +1,8 @@
 import type { ComponentType } from 'react';
-import {
-  internalsSymbol,
-  Position,
-  rectToBox,
-  getHandlePosition,
-  type HandleElement,
-  type NodeHandleBounds,
-  type Rect,
-  type Transform,
-  type XYPosition,
-} from '@xyflow/system';

 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
-import type { EdgeProps, EdgeTypes, EdgeTypesWrapped, Node } from '../../types';
+import type { EdgeProps, EdgeTypes, EdgeTypesWrapped } from '../../types';

 export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;

@@ -40,103 +29,3 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
    ...specialTypes,
  };
 }
-
-interface EdgePositions {
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-}
-
-export const getEdgePositions = (
-  sourceNodeRect: Rect,
-  sourceHandle: HandleElement,
-  sourcePosition: Position,
-  targetNodeRect: Rect,
-  targetHandle: HandleElement,
-  targetPosition: Position
-): EdgePositions => {
-  const sourceHandlePos = getHandlePosition(sourcePosition, sourceNodeRect, sourceHandle);
-  const targetHandlePos = getHandlePosition(targetPosition, targetNodeRect, targetHandle);
-
-  return {
-    sourceX: sourceHandlePos.x,
-    sourceY: sourceHandlePos.y,
-    targetX: targetHandlePos.x,
-    targetY: targetHandlePos.y,
-  };
-};
-
-interface IsEdgeVisibleParams {
-  sourcePos: XYPosition;
-  targetPos: XYPosition;
-  sourceWidth: number;
-  sourceHeight: number;
-  targetWidth: number;
-  targetHeight: number;
-  width: number;
-  height: number;
-  transform: Transform;
-}
-
-export function isEdgeVisible({
-  sourcePos,
-  targetPos,
-  sourceWidth,
-  sourceHeight,
-  targetWidth,
-  targetHeight,
-  width,
-  height,
-  transform,
-}: IsEdgeVisibleParams): boolean {
-  const edgeBox = {
-    x: Math.min(sourcePos.x, targetPos.x),
-    y: Math.min(sourcePos.y, targetPos.y),
-    x2: Math.max(sourcePos.x + sourceWidth, targetPos.x + targetWidth),
-    y2: Math.max(sourcePos.y + sourceHeight, targetPos.y + targetHeight),
-  };
-
-  if (edgeBox.x === edgeBox.x2) {
-    edgeBox.x2 += 1;
-  }
-
-  if (edgeBox.y === edgeBox.y2) {
-    edgeBox.y2 += 1;
-  }
-
-  const viewBox = rectToBox({
-    x: (0 - transform[0]) / transform[2],
-    y: (0 - transform[1]) / transform[2],
-    width: width / transform[2],
-    height: height / transform[2],
-  });
-
-  const xOverlap = Math.max(0, Math.min(viewBox.x2, edgeBox.x2) - Math.max(viewBox.x, edgeBox.x));
-  const yOverlap = Math.max(0, Math.min(viewBox.y2, edgeBox.y2) - Math.max(viewBox.y, edgeBox.y));
-  const overlappingArea = Math.ceil(xOverlap * yOverlap);
-
-  return overlappingArea > 0;
-}
-
-export function getNodeData(node?: Node): [Rect, NodeHandleBounds | null, boolean] {
-  const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
-
-  const isValid =
-    handleBounds &&
-    node?.width &&
-    node?.height &&
-    typeof node?.positionAbsolute?.x !== 'undefined' &&
-    typeof node?.positionAbsolute?.y !== 'undefined';
-
-  return [
-    {
-      x: node?.positionAbsolute?.x || 0,
-      y: node?.positionAbsolute?.y || 0,
-      width: node?.width || 0,
-      height: node?.height || 0,
-    },
-    handleBounds,
-    !!isValid,
-  ];
-}