#845 Recalculate parallel index before changing the attr

src/components/panels/details/specific-attrs.tsx

@@ -52,11 +52,11 @@ export const LineSpecificAttributes = () => {
     const styleAttrs = (window.graph.getEdgeAttribute(id, style) ?? {}) as any;
     const StyleAttrsComponent = style in lineStyles && lineStyles[style].attrsComponent;
 
-    const recalculateParallelIndex = (id: string) => {
+    const recalculateParallelIndex = (id: string, startFrom: 'from' | 'to') => {
         let parallelIndex = -1;
         if (autoParallel) {
             const [source, target] = window.graph.extremities(id) as [StnId | MiscNodeId, StnId | MiscNodeId];
-            parallelIndex = makeParallelIndex(window.graph, type, source, target, attrs.startFrom);
+            parallelIndex = makeParallelIndex(window.graph, type, source, target, startFrom);
         }
         window.graph.setEdgeAttribute(id, 'parallelIndex', parallelIndex);
     };

src/components/svgs/lines/paths/diagonal.tsx

@@ -104,8 +104,8 @@ const attrsComponent = (props: LinePathAttrsProps<DiagonalPathAttributes>) => {
             value: attrs.startFrom,
             options: { from: t('panel.details.lines.common.from'), to: t('panel.details.lines.common.to') },
             onChange: val => {
+                recalculateParallelIndex(id, val as 'from' | 'to');
                 attrs.startFrom = val as 'from' | 'to';
-                recalculateParallelIndex(id);
                 handleAttrsUpdate(id, attrs);
             },
             minW: 'full',

src/components/svgs/lines/paths/perpendicular.tsx

@@ -87,8 +87,8 @@ const attrsComponent = (props: LinePathAttrsProps<PerpendicularPathAttributes>)
             value: attrs.startFrom,
             options: { from: t('panel.details.lines.common.from'), to: t('panel.details.lines.common.to') },
             onChange: val => {
+                recalculateParallelIndex(id, val as 'from' | 'to');
                 attrs.startFrom = val as 'from' | 'to';
-                recalculateParallelIndex(id);
                 handleAttrsUpdate(id, attrs);
             },
             minW: 'full',

src/components/svgs/lines/paths/rotate-perpendicular.tsx

@@ -115,8 +115,8 @@ const attrsComponent = (props: LinePathAttrsProps<RotatePerpendicularPathAttribu
             value: attrs.startFrom,
             options: { from: t('panel.details.lines.common.from'), to: t('panel.details.lines.common.to') },
             onChange: val => {
+                recalculateParallelIndex(id, val as 'from' | 'to');
                 attrs.startFrom = val as 'from' | 'to';
-                recalculateParallelIndex(id);
                 handleAttrsUpdate(id, attrs);
             },
             minW: 'full',

src/constants/lines.ts

@@ -168,9 +168,20 @@ export interface LinePathAttrsProps<T extends LinePathAttributes> extends AttrsP
     parallelIndex: number;
     /**
      * Changing the `startFrom` attr should result in new parallel recalculation.
-     * Passing it to each line path implementation to call it only in `startFrom`'s field onChange.
+     * Passing it to each line path implementation and only call it in `startFrom`'s field onChange.
+     *
+     * Note: Call this fuction before updating the `startFrom` attr as parallelIndex
+     * is calculated based on it and changing it before calcuation will result in
+     * considering this line (e.g. from -> to) as an existing line (e.g. to).
+     * ```ts
+     * onChange: val => {
+     *   recalculateParallelIndex(id, val as 'from' | 'to');
+     *   attrs.startFrom = val as 'from' | 'to';
+     *   handleAttrsUpdate(id, attrs);
+     * },
+     * ```
      */
-    recalculateParallelIndex: (id: string) => void;
+    recalculateParallelIndex: (id: string, startFrom: 'from' | 'to') => void;
 }
 export interface LinePathAttributes {}
 /**