init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import type React from "react";
import { Line } from "react-konva";
import type { BezierPoint } from "../types";
import { CONNECTION_LINE_STYLING } from "../constants";
 
interface ConnectionLinesProps {
  branches: Array<{
    id: string;
    startPointId: string; // Use UUID instead of index
    points: BezierPoint[];
  }>;
  initialPoints: BezierPoint[];
  skeletonEnabled?: boolean;
  drawingStartPointIndex?: number | null;
  currentDrawingSegment?: BezierPoint[];
}
 
export const ConnectionLines: React.FC<ConnectionLinesProps> = ({
  branches,
  initialPoints,
  skeletonEnabled = false,
  drawingStartPointIndex = null,
  currentDrawingSegment = [],
}) => {
  if (branches.length === 0 && (!skeletonEnabled || !drawingStartPointIndex || currentDrawingSegment.length === 0))
    return null;
 
  return (
    <>
      {/* Connection lines for finalized branches */}
      {branches.map((branch) => {
        if (branch.points.length === 0) return null;
 
        const startPoint = initialPoints.find((point) => point.id === branch.startPointId);
        const firstBranchPoint = branch.points[0];
 
        if (!startPoint) return null;
 
        return (
          <Line
            key={`connection-${branch.id}`}
            points={[startPoint.x, startPoint.y, firstBranchPoint.x, firstBranchPoint.y]}
            stroke={CONNECTION_LINE_STYLING.STROKE}
            strokeWidth={CONNECTION_LINE_STYLING.STROKE_WIDTH}
            tension={CONNECTION_LINE_STYLING.TENSION}
            lineCap={CONNECTION_LINE_STYLING.LINE_CAP}
            lineJoin={CONNECTION_LINE_STYLING.LINE_JOIN}
            strokeScaleEnabled={false}
          />
        );
      })}
 
      {/* Connection line for current drawing segment */}
      {skeletonEnabled && drawingStartPointIndex !== null && currentDrawingSegment.length > 0 && (
        <Line
          key="connection-current-segment"
          points={[
            initialPoints[drawingStartPointIndex].x,
            initialPoints[drawingStartPointIndex].y,
            currentDrawingSegment[0].x,
            currentDrawingSegment[0].y,
          ]}
          stroke={CONNECTION_LINE_STYLING.STROKE}
          strokeWidth={CONNECTION_LINE_STYLING.STROKE_WIDTH}
          tension={CONNECTION_LINE_STYLING.TENSION}
          lineCap={CONNECTION_LINE_STYLING.LINE_CAP}
          lineJoin={CONNECTION_LINE_STYLING.LINE_JOIN}
          strokeScaleEnabled={false}
        />
      )}
    </>
  );
};