| 3167 | |
| 3168 | // Build an L-shaped path (horizontal first or vertical first) |
| 3169 | const buildLPath = (startGrid: { gx: number; gy: number }, endGrid: { gx: number; gy: number }, horizontalFirst: boolean) => { |
| 3170 | const pathPoints: { gx: number; gy: number }[] = []; |
| 3171 | |
| 3172 | if (horizontalFirst) { |
| 3173 | // Horizontal then vertical |
| 3174 | const xStep = startGrid.gx < endGrid.gx ? gridSize : -gridSize; |
| 3175 | if (startGrid.gx !== endGrid.gx) { |
| 3176 | for (let gx = startGrid.gx; xStep > 0 ? gx <= endGrid.gx : gx >= endGrid.gx; gx += xStep) { |
| 3177 | pathPoints.push({ gx, gy: startGrid.gy }); |
| 3178 | } |
| 3179 | } else { |
| 3180 | pathPoints.push({ gx: startGrid.gx, gy: startGrid.gy }); |
| 3181 | } |
| 3182 | const yStep = startGrid.gy < endGrid.gy ? gridSize : -gridSize; |
| 3183 | if (startGrid.gy !== endGrid.gy) { |
| 3184 | for (let gy = startGrid.gy + yStep; yStep > 0 ? gy <= endGrid.gy : gy >= endGrid.gy; gy += yStep) { |
| 3185 | pathPoints.push({ gx: endGrid.gx, gy }); |
| 3186 | } |
| 3187 | } |
| 3188 | } else { |
| 3189 | // Vertical then horizontal |
| 3190 | const yStep = startGrid.gy < endGrid.gy ? gridSize : -gridSize; |
| 3191 | if (startGrid.gy !== endGrid.gy) { |
| 3192 | for (let gy = startGrid.gy; yStep > 0 ? gy <= endGrid.gy : gy >= endGrid.gy; gy += yStep) { |
| 3193 | pathPoints.push({ gx: startGrid.gx, gy }); |
| 3194 | } |
| 3195 | } else { |
| 3196 | pathPoints.push({ gx: startGrid.gx, gy: startGrid.gy }); |
| 3197 | } |
| 3198 | const xStep = startGrid.gx < endGrid.gx ? gridSize : -gridSize; |
| 3199 | if (startGrid.gx !== endGrid.gx) { |
| 3200 | for (let gx = startGrid.gx + xStep; xStep > 0 ? gx <= endGrid.gx : gx >= endGrid.gx; gx += xStep) { |
| 3201 | pathPoints.push({ gx, gy: endGrid.gy }); |
| 3202 | } |
| 3203 | } |
| 3204 | } |
| 3205 | |
| 3206 | return pathPoints; |
| 3207 | }; |
| 3208 | |
| 3209 | // Draw a path through actual deformed grid dots, avoiding other panels |
| 3210 | const drawGridPath = (fromX: number, fromY: number, toX: number, toY: number, color: string, lineWidth: number, alpha: number, excludePanelIds: string[] = [], animated: boolean = false) => { |