#916 Free drag and magnetic layout #917
Conversation
| @@ -252,6 +327,18 @@ const SvgCanvas = () => { | |||
|
|
|||
| const SingleColor = singleColor.component; | |||
|
|
|||
| const getPolylinesPath = (p: Polyline): [number, number, number, number] => { | |||
| if (p.a === 0) { | |||
| return [-10000, 10000, -p.c / p.b, -p.c / p.b]; | |||
There was a problem hiding this comment.
If the station and/or user are looking on is beyond 10000, what will happen? Will the line be missing?
| {activePolylines.length !== 0 && | ||
| activePolylines.map((p, i) => ( | ||
| <path | ||
| key={`line_polyline_${i}`} |
There was a problem hiding this comment.
We should use the a,b,c,x,y in p instead of i
https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/
|
|
||
| if (isNodeSupportPolyline(node, graph.current)) { | ||
| if (activePolylines.length !== 0) { | ||
| // remove the active polylines if the distance is larger than 5 |
There was a problem hiding this comment.
This comment tells the same thing the next line of code tells. Comments should be the reason why we do this not what we are doing. e.g. Remove some polylines if they are far away from the targeting position as the user is moving the station to a new position.
https://stackoverflow.blog/2021/12/23/best-practices-for-writing-code-comments/
| setActivePolylines(activePolylines.filter(l => getPolylineDistance(l, toX, toY) <= 5)); | ||
| } | ||
| if (activePolylines.length < 2) { | ||
| // add the nearest polylines if the distance is less than 3 |
There was a problem hiding this comment.
This comment tells the same thing the next line of code tells. Comments should be the reason why we do this not what we are doing.
https://stackoverflow.blog/2021/12/23/best-practices-for-writing-code-comments/
| const toX = fromX - ((offset.x - x) * svgViewBoxZoom) / 100; | ||
| const toY = fromY - ((offset.y - y) * svgViewBoxZoom) / 100; | ||
|
|
||
| let newX = toX; |
There was a problem hiding this comment.
Simply explaining what toXY and newXY are will help in understanding the code.
| y: number; | ||
| } | ||
|
|
||
| export interface Polylines { |
There was a problem hiding this comment.
c, p, n are hard to understand
| return Math.abs(line.a * x + line.b * y + line.c) / Math.sqrt(line.a ** 2 + line.b ** 2); | ||
| }; | ||
|
|
||
| export const getNearestPolyline = (x: number, y: number, polylines: Polyline[], nodes: Id[]) => { |
There was a problem hiding this comment.
Simply explain how we find the nearest polyline.
No description provided.