Skip to content

Commit e6685a9

Browse files
javdomejavdome
committed
Refactor comments for clarity and consistency in arrow.js
1 parent 475ff43 commit e6685a9

File tree

1 file changed

+51
-51
lines changed

1 file changed

+51
-51
lines changed

‎arrow.js‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -163,21 +163,21 @@ export default class Arrow {
163163
somePath.style.fill = "none";
164164
somePath.style.pointerEvents = "auto";
165165

166-
// Устанавливаем тип линии
167-
const line = lineType !== undefined ? lineType : 0; // По умолчанию сплошная линия
166+
// Set the line type
167+
const line = lineType !== undefined ? lineType : 0; // Default to solid line
168168
if (line === 0) {
169-
// Тип 0: Сплошная линия (по умолчанию)
169+
// Type 0: Solid line (default)
170170
somePath.style.strokeDasharray = "none";
171171
} else if (line === 1) {
172-
// Тип 1: Пунктирная линия
172+
// Type 1: Dashed line
173173
somePath.style.strokeDasharray = "7,5";
174174
}
175-
// Здесь можно добавить дополнительные типы линий:
175+
// You can add more line types here:
176176
// } else if (line === 2) {
177-
// // Тип 2: Точечная линия
177+
// // Type 2: Dotted line
178178
// somePath.style.strokeDasharray = "2,3";
179179
// } else if (line === 3) {
180-
// // Тип 3: Штрих-пунктир
180+
// // Type 3: Dash-dot line
181181
// somePath.style.strokeDasharray = "10,5,2,5";
182182
// }
183183

@@ -206,10 +206,10 @@ export default class Arrow {
206206
const bothItemsExist = (this._timeline.itemsData.get(dep.id_item_1) !== null) && (this._timeline.itemsData.get(dep.id_item_2) !== null);
207207

208208
//Checks if at least one item is visible in screen
209-
let oneItemVisible = false; //Iniciamos a false
209+
let oneItemVisible = false; // Initialize as false
210210
//Checks if the groups of items are both visible
211-
let groupOf_1_isVisible = false; //Iniciamos a false
212-
let groupOf_2_isVisible = false; //Iniciamos a false
211+
let groupOf_1_isVisible = false; // Initialize as false
212+
let groupOf_2_isVisible = false; // Initialize as false
213213

214214
if (bothItemsExist) {
215215
const visibleItems = this._timeline.getVisibleItems();
@@ -247,13 +247,13 @@ export default class Arrow {
247247
var item_1 = this._getItemPos(this._timeline.itemSet.items[dep.id_item_1]);
248248
var item_2 = this._getItemPos(this._timeline.itemSet.items[dep.id_item_2]);
249249

250-
// Для стрелок без специальных параметров (type: 0, без align) возвращаем старое поведение
250+
// For arrows without special parameters (type: 0, no align), return the old behavior
251251
const arrowType = dep.type !== undefined ? dep.type : 0;
252252
const isDefaultArrow = arrowType === 0 && !dep.align;
253253
let swapped = false;
254254

255255
if (isDefaultArrow && !this._followRelationships && item_2.mid_x < item_1.mid_x) {
256-
[item_1, item_2] = [item_2, item_1]; // Перестановка для стандартных стрелок
256+
[item_1, item_2] = [item_2, item_1]; // Swap for standard arrows
257257
swapped = true;
258258
}
259259

@@ -268,7 +268,7 @@ export default class Arrow {
268268
markerStart = "";
269269
markerEnd = "";
270270
} else if (direction === 1) {
271-
// стрелка всегда у второго события
271+
// arrow always at the second event
272272
if (isDefaultArrow && swapped) {
273273
markerStart = `url(#${markerId})`;
274274
markerEnd = "";
@@ -277,7 +277,7 @@ export default class Arrow {
277277
markerEnd = `url(#${markerId})`;
278278
}
279279
} else if (direction === 2) {
280-
// стрелка всегда у первого события
280+
// arrow always at the first event
281281
if (isDefaultArrow && swapped) {
282282
markerStart = "";
283283
markerEnd = `url(#${markerId})`;
@@ -290,57 +290,57 @@ export default class Arrow {
290290
markerEnd = `url(#${markerId})`;
291291
}
292292

293-
// --- Path построение ---
293+
// --- Path construction ---
294294
let pathStr;
295295
if (arrowType === 1) {
296-
// Прямая линия
296+
// Straight line
297297
const x1 = item_1.mid_x;
298298
const y1 = item_1.mid_y;
299299
const x2 = item_2.mid_x;
300300
const y2 = item_2.mid_y;
301301

302302
function getRectIntersection(rect, x0, y0, x1, y1, offset = 0) {
303-
// Вектор направления
303+
// Direction vector
304304
const dx = x1 - x0;
305305
const dy = y1 - y0;
306306
let candidates = [];
307-
// Левая
307+
// Left side
308308
if (dx !== 0) {
309309
const t = (rect.left - x0) / dx;
310310
if (t > 0 && t < 1) {
311311
const y = y0 + t * dy;
312312
if (y >= rect.top && y <= rect.bottom) candidates.push({ x: rect.left, y, t });
313313
}
314314
}
315-
// Правая
315+
// Right side
316316
if (dx !== 0) {
317317
const t = (rect.right - x0) / dx;
318318
if (t > 0 && t < 1) {
319319
const y = y0 + t * dy;
320320
if (y >= rect.top && y <= rect.bottom) candidates.push({ x: rect.right, y, t });
321321
}
322322
}
323-
// Верхняя
323+
// Top side
324324
if (dy !== 0) {
325325
const t = (rect.top - y0) / dy;
326326
if (t > 0 && t < 1) {
327327
const x = x0 + t * dx;
328328
if (x >= rect.left && x <= rect.right) candidates.push({ x, y: rect.top, t });
329329
}
330330
}
331-
// Нижняя
331+
// Bottom side
332332
if (dy !== 0) {
333333
const t = (rect.bottom - y0) / dy;
334334
if (t > 0 && t < 1) {
335335
const x = x0 + t * dx;
336336
if (x >= rect.left && x <= rect.right) candidates.push({ x, y: rect.bottom, t });
337337
}
338338
}
339-
// Выбираем ближайшую к центру точку
339+
// Choose the point closest to the center
340340
if (candidates.length === 0) return { x: x0, y: y0 };
341341
candidates.sort((a, b) => Math.hypot(a.x - x0, a.y - y0) - Math.hypot(b.x - x0, b.y - y0));
342342
let pt = candidates[0];
343-
// Добавляем отступ, если требуется
343+
// Add offset if required
344344
if (offset > 0) {
345345
const norm = Math.hypot(dx, dy);
346346
if (norm > 0) {
@@ -350,14 +350,14 @@ export default class Arrow {
350350
}
351351
return pt;
352352
}
353-
// Определяем, нужен ли отступ на концах
353+
// Determine if we need offset at the ends
354354
let offset1 = 0, offset2 = 0;
355-
if (direction === 1) offset2 = 10; // стрелка только на втором конце
356-
if (direction === 2) offset1 = 10; // стрелка только на первом конце
357-
if (direction === 3) { offset1 = 10; offset2 = 10; } // стрелки на обоих концах
358-
// Находим точки пересечения
359-
const pt1 = getRectIntersection(item_1, x1, y1, x2, y2, offset1); // из центра первого к центру второго
360-
const pt2 = getRectIntersection(item_2, x2, y2, x1, y1, offset2); // из центра второго к центру первого
355+
if (direction === 1) offset2 = 10; // arrow only at second end
356+
if (direction === 2) offset1 = 10; // arrow only at first end
357+
if (direction === 3) { offset1 = 10; offset2 = 10; } // arrows at both ends
358+
// Find intersection points
359+
const pt1 = getRectIntersection(item_1, x1, y1, x2, y2, offset1); // from first center to second center
360+
const pt2 = getRectIntersection(item_2, x2, y2, x1, y1, offset2); // from second center to first center
361361
pathStr = `M ${pt1.x} ${pt1.y} L ${pt2.x} ${pt2.y}`;
362362
} else if (arrowType === 2) {
363363
const offset = 10;
@@ -371,73 +371,73 @@ export default class Arrow {
371371
end = { x: item_2.right, y: item_2.mid_y };
372372
sign = -1;
373373
}
374-
// Отступы для стрелок
374+
// Arrow spacing
375375
if (direction === 1 || direction === 3) end.x -= 10 * sign;
376376
if (direction === 2 || direction === 3) start.x += 10 * sign;
377377

378-
// Проверка на "внахлёст" или близость
378+
// Check for overlap or proximity
379379
const overlap = (item_1.left < item_2.right && item_1.right > item_2.left);
380380
const close = Math.abs(end.x - start.x) < offset * 2;
381381
if (overlap || close) {
382-
// 4 изгиба
382+
// 4 bends
383383
const xA = start.x + offset * sign;
384384
const xB = end.x - offset * sign;
385385
const midY = (start.y + end.y) / 2;
386386
pathStr = `M ${start.x} ${start.y} L ${xA} ${start.y} L ${xA} ${midY} L ${xB} ${midY} L ${xB} ${end.y} L ${end.x} ${end.y}`;
387387
} else {
388-
// 2 изгиба
388+
// 2 bends
389389
const xA = start.x + offset * sign;
390390
pathStr = `M ${start.x} ${start.y} L ${xA} ${start.y} L ${xA} ${end.y} L ${end.x} ${end.y}`;
391391
}
392392
} else if (dep.align === 'center') {
393-
// --- Исправленный алгоритм: линия между ближайшими к центру точками пересечения ---
393+
// --- Corrected algorithm: line between nearest-to-center intersection points ---
394394
const x1 = item_1.mid_x;
395395
const y1 = item_1.mid_y;
396396
const x2 = item_2.mid_x;
397397
const y2 = item_2.mid_y;
398398

399399
function getRectIntersection(rect, x0, y0, x1, y1, offset = 0) {
400-
// Вектор направления
400+
// Direction vector
401401
const dx = x1 - x0;
402402
const dy = y1 - y0;
403403
let candidates = [];
404-
// Левая
404+
// Left side
405405
if (dx !== 0) {
406406
const t = (rect.left - x0) / dx;
407407
if (t > 0 && t < 1) {
408408
const y = y0 + t * dy;
409409
if (y >= rect.top && y <= rect.bottom) candidates.push({ x: rect.left, y, t });
410410
}
411411
}
412-
// Правая
412+
// Right side
413413
if (dx !== 0) {
414414
const t = (rect.right - x0) / dx;
415415
if (t > 0 && t < 1) {
416416
const y = y0 + t * dy;
417417
if (y >= rect.top && y <= rect.bottom) candidates.push({ x: rect.right, y, t });
418418
}
419419
}
420-
// Верхняя
420+
// Top side
421421
if (dy !== 0) {
422422
const t = (rect.top - y0) / dy;
423423
if (t > 0 && t < 1) {
424424
const x = x0 + t * dx;
425425
if (x >= rect.left && x <= rect.right) candidates.push({ x, y: rect.top, t });
426426
}
427427
}
428-
// Нижняя
428+
// Bottom side
429429
if (dy !== 0) {
430430
const t = (rect.bottom - y0) / dy;
431431
if (t > 0 && t < 1) {
432432
const x = x0 + t * dx;
433433
if (x >= rect.left && x <= rect.right) candidates.push({ x, y: rect.bottom, t });
434434
}
435435
}
436-
// Выбираем ближайшую к центру точку
436+
// Choose the point closest to the center
437437
if (candidates.length === 0) return { x: x0, y: y0 };
438438
candidates.sort((a, b) => Math.hypot(a.x - x0, a.y - y0) - Math.hypot(b.x - x0, b.y - y0));
439439
let pt = candidates[0];
440-
// Добавляем отступ, если требуется
440+
// Add offset if required
441441
if (offset > 0) {
442442
const norm = Math.hypot(dx, dy);
443443
if (norm > 0) {
@@ -447,17 +447,17 @@ export default class Arrow {
447447
}
448448
return pt;
449449
}
450-
// Определяем, нужен ли отступ на концах
450+
// Determine if we need offset at the ends
451451
let offset1 = 0, offset2 = 0;
452-
if (direction === 1) offset2 = 10; // стрелка только на втором конце
453-
if (direction === 2) offset1 = 10; // стрелка только на первом конце
454-
if (direction === 3) { offset1 = 10; offset2 = 10; } // стрелки на обоих концах
455-
// Находим точки пересечения
456-
const pt1 = getRectIntersection(item_1, x1, y1, x2, y2, offset1); // из центра первого к центру второго
457-
const pt2 = getRectIntersection(item_2, x2, y2, x1, y1, offset2); // из центра второго к центру первого
452+
if (direction === 1) offset2 = 10; // arrow only at second end
453+
if (direction === 2) offset1 = 10; // arrow only at first end
454+
if (direction === 3) { offset1 = 10; offset2 = 10; } // arrows at both ends
455+
// Find intersection points
456+
const pt1 = getRectIntersection(item_1, x1, y1, x2, y2, offset1); // from first center to second center
457+
const pt2 = getRectIntersection(item_2, x2, y2, x1, y1, offset2); // from second center to first center
458458
pathStr = `M ${pt1.x} ${pt1.y} L ${pt2.x} ${pt2.y}`;
459459
} else {
460-
// Bezier (по умолчанию)
460+
// Bezier (default)
461461
if (this._followRelationships && item_2.mid_x < item_1.mid_x) {
462462
if (markerStart !== "") item_2.right += 10;
463463
if (markerEnd !== "") item_1.left -= 10;
@@ -500,7 +500,7 @@ export default class Arrow {
500500
item_2.mid_y;
501501
}
502502
}
503-
// --- Конец построения path ---
503+
// --- End of path construction ---
504504
if (this._followRelationships && item_2.mid_x < item_1.mid_x) {
505505
this._dependencyPath[index].setAttribute("marker-start", markerStart);
506506
this._dependencyPath[index].setAttribute("marker-end", markerEnd);

0 commit comments

Comments
 (0)