@libs-ui/services-diagram-draw 0.2.356-37 → 0.2.356-40

package/fesm2022/libs-ui-services-diagram-draw.mjs

@@ -10,7 +10,7 @@ class MoLibDiagramCalculatorBranchUtil {
         let Ly = startDraw;
         Ly += canvasConfigReadonly().ELEMENT_HEIGHT_CURVE; // chiều dài đến element đầu tiên
         Ly += getDistanceFromBranchToFirstBlock(branch.nodeOtherConfig); // chiều dài đến element đầu tiên
-        if (!branch.elements || !branch.elements.length) {
+        if (!branch.elements?.length) {
             Ly += maxHeightBranch;
             Ly += 20; // thêm đoạn nối từ điểm kết thúc nhánh đến hết
         }
@@ -27,7 +27,7 @@ class MoLibDiagramCalculatorBranchUtil {
             const waitHeight = getHeightWaitConfig(branch.nodeOtherConfig);
             const topStartLine2 = endYToWait + waitHeight;
             delete branch.nodeOtherConfig.attributeSvgD;
-            if (branch.elements && branch.elements.length) {
+            if (branch.elements?.length) {
                 branch.nodeOtherConfig.attributeSvgD = `M ${coord1.mx} ${topStartLine2} L ${coord1.mx} ${coord1.ly}`;
             }
             branch.nodeOtherConfig.specific_y = endYToWait;
@@ -35,7 +35,7 @@ class MoLibDiagramCalculatorBranchUtil {
         }
         branch.specific_start_branch_y = top + lineFormElementToBranching + canvasConfigReadonly().ELEMENT_HEIGHT_CURVE;
         branch.specific_start_branch_x = left;
-        if (!branch.elements || !branch.elements.length) {
+        if (!branch.elements?.length) {
             return;
         }
         const heightToElement = canvasConfigReadonly().ELEMENT_HEIGHT_CURVE + getDistanceFromBranchToFirstBlock(branch.nodeOtherConfig); // chiều dài đến element đầu tiên;
@@ -49,7 +49,7 @@ class MoLibDiagramCalculatorBranchUtil {
         const { coordQL2, isCheckAllElementConnectToExit } = this.drawAboveUnderLine(left, lineFormElementToBranching, top, lineBetweenBranch, branch, maxHeightBranch, 'left', config);
         branch.specific_start_branch_x = coordQL2.x;
         branch.specific_start_branch_y = coordQL2.y;
-        if (!branch.elements || !branch.elements.length) {
+        if (!branch.elements?.length) {
             return;
         }
         this.drawElementInBranchLine(branch, coordQL2, config);
@@ -64,7 +64,7 @@ class MoLibDiagramCalculatorBranchUtil {
         const maxY = (coordQL1.y ?? 0) + 200;
         const configSvg = config.widthHeightSvgCanvas;
         configSvg.heightSvg = maxY > configSvg.heightSvg ? maxY : configSvg.heightSvg;
-        if (!branch.elements || !branch.elements.length) {
+        if (!branch.elements?.length) {
             return;
         }
         this.drawElementInBranchLine(branch, coordQL2, config);
@@ -122,7 +122,7 @@ class MoLibDiagramCalculatorBranchUtil {
         };
         coordQL2.ly = (coordQL2.y ?? 0) + getDistanceFromBranchToFirstBlock(branch.nodeOtherConfig);
         coordQL2.lx = coordQL2.x;
-        if (!branch.elements || !branch.elements.length) {
+        if (!branch.elements?.length) {
             coordQL2.ly = maxHeightBranch + (coordQL2.ly ?? 0); // tổng chiều cao của nhánh + điểm xuất phát
         }
         let QL2 = `Q ${coordQL2.x1},${coordQL2.y1} ${coordQL2.x},${coordQL2.y} L ${coordQL2.lx} ${coordQL2.ly}`;
@@ -132,7 +132,7 @@ class MoLibDiagramCalculatorBranchUtil {
             const topStartLine2 = endYToWait + waitHeight;
             delete branch.nodeOtherConfig.attributeSvgD;
             QL2 = `Q ${coordQL2.x1},${coordQL2.y1} ${coordQL2.x},${coordQL2.y} M ${coordQL2.x},${coordQL2.y} L ${coordQL2.x},${endYToWait}`;
-            if (branch.elements && branch.elements.length) {
+            if (branch.elements?.length) {
                 branch.nodeOtherConfig.attributeSvgD = `M ${coordQL2.x} ${topStartLine2} L ${coordQL2.x} ${coordQL2.ly}`;
             }
             branch.nodeOtherConfig.specific_y = endYToWait;
@@ -151,7 +151,7 @@ class MoLibDiagramCalculatorBranchUtil {
             return toExit;
         }
         elements.forEach((element) => {
-            if (!element.branches || !element.branches.length) {
+            if (!element.branches?.length) {
                 return;
             }
             let branchConnectToExit = 0;
@@ -192,18 +192,18 @@ class MoLibDiagramCalculatorBranchUtil {
 const buildFlatElement = (elements, flatElementsContainer) => {
     elements.forEach((element) => {
         flatElementsContainer.push(element);
-        if (!element.branches || !element.branches.length) {
+        if (!element.branches?.length) {
             return;
         }
         flatElementHasBranch(element, flatElementsContainer);
     });
 };
 const flatElementHasBranch = (element, flatElementsContainer) => {
-    if (!element.branches || !element.branches.length) {
+    if (!element.branches?.length) {
         return;
     }
     element.branches.forEach((branch) => {
-        if (!branch.elements || !branch.elements.length) {
+        if (!branch.elements?.length) {
             return;
         }
         buildFlatElement(branch.elements, flatElementsContainer);
@@ -244,7 +244,7 @@ const applyElementStyle = (el, element) => {
 
 class MoLibDiagramCalculatorCoordinatesUtil {
     static setXYElements(elements, config, positionX) {
-        if (!elements || !elements.length) {
+        if (!elements?.length) {
             return;
         }
         elements.forEach((currentElement, index) => {
@@ -260,7 +260,7 @@ class MoLibDiagramCalculatorCoordinatesUtil {
             const top = currentElement.specific_y ?? 0;
             const left = (currentElement.specific_x ?? 0) + (currentElement.specific_width ?? 0) / 2;
             let lineBetweenElements = (currentElement.specific_height ?? 0) + checkElementGetHeight(currentElement.nodeOtherConfig);
-            if (currentElement.branches && currentElement.branches.length) {
+            if (currentElement.branches?.length) {
                 lineBetweenElements = (currentElement.specific_height ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
             }
             const maxY = (currentElement.specific_y ?? 0) + (currentElement.specific_height ?? 0) + 200;
@@ -269,7 +269,7 @@ class MoLibDiagramCalculatorCoordinatesUtil {
             configSvg.heightSvg = maxY > configSvg.heightSvg ? maxY : configSvg.heightSvg;
             configSvg.widthSvg = maxXLeft > configSvg.widthSvg ? maxXLeft : configSvg.widthSvg;
             checkMaxLeft(config, currentElement.specific_x, currentElement.branches?.[0].positionMaxLeft);
-            if (!currentElement.branches || !currentElement.branches.length) {
+            if (!currentElement.branches?.length) {
                 // các element không có nhánh mới vẽ đường thẳng
                 const drawFormToHeightExit = (currentElement.subCodeOfElement || currentElement.code) === canvasConfigReadonly().TYPE_ELEMENT_EXIT ? (currentElement.specific_height ?? 0) / 2 : lineBetweenElements;
                 currentElement.attributeSvgD = `M ${left} ${top} l 0 ${drawFormToHeightExit}`;
@@ -315,12 +315,12 @@ class MoLibDiagramCalculatorCoordinatesUtil {
                 MoLibDiagramCalculatorBranchUtil.drawStraightLine(left, lineFormElementToBranching, top, brachMiddle, maxHeightBranch.height, config);
             }
             let hasNextSameParentElementNext = false;
-            const aboveHalfReverse = aboveHalf.reverse();
+            const aboveHalfReverse = aboveHalf.slice().reverse();
             aboveHalfReverse.forEach((branch, indexBranch) => {
                 if (!hasNextSameParentElementNext) {
                     const flatElementOnBranch = [];
                     buildFlatElement(branch.elements, flatElementOnBranch);
-                    hasNextSameParentElementNext = !flatElementOnBranch || !flatElementOnBranch.length ? true : flatElementOnBranch.find((item) => item.next_id === currentElement.next_id) ? true : false;
+                    hasNextSameParentElementNext = !flatElementOnBranch?.length || !!flatElementOnBranch.find((item) => item.next_id === currentElement.next_id);
                 }
                 branch.onTheSide = 'above';
                 const maxWidthBranch = { width: 0, aboveWidth: 0, underWidth: 0 }; // tính chiều ngang để cách nhánh trên or dưới
@@ -345,7 +345,7 @@ class MoLibDiagramCalculatorCoordinatesUtil {
                 if (!hasNextSameParentElementNext) {
                     const flatElementOnBranch = [];
                     buildFlatElement(branch.elements, flatElementOnBranch);
-                    hasNextSameParentElementNext = !flatElementOnBranch || !flatElementOnBranch.length ? true : flatElementOnBranch.find((item) => item.next_id === currentElement.next_id) ? true : false;
+                    hasNextSameParentElementNext = !flatElementOnBranch?.length || !!flatElementOnBranch.find((item) => item.next_id === currentElement.next_id);
                 }
                 branch.onTheSide = 'under';
                 const maxWidthBranch = { width: 0, aboveWidth: 0, underWidth: 0 }; // tính chiều cao để cách nhánh trên or dưới
@@ -394,7 +394,7 @@ class MoLibDiagramCalculatorCoordinatesUtil {
                         branch.nodeOtherConfig.translateY = branch.nodeOtherConfig.specific_y;
                     }
                     // Recursively set positions cho elements trong branch
-                    if (branch.elements && branch.elements.length > 0) {
+                    if (branch.elements?.length > 0) {
                         this.setTranslatePositions(branch.elements);
                     }
                 });
@@ -402,11 +402,11 @@ class MoLibDiagramCalculatorCoordinatesUtil {
         });
     }
     static calculatorMaxBranchHeight(element, maxHeightBranch) {
-        if (!element.branches || !element.branches.length) {
+        if (!element.branches?.length) {
             return;
         }
         element.branches.forEach((branch) => {
-            if (!branch.elements || !branch.elements.length) {
+            if (!branch.elements?.length) {
                 const lineBranchNoHasElement = canvasConfigReadonly().ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT;
                 maxHeightBranch.height = lineBranchNoHasElement > maxHeightBranch.height ? lineBranchNoHasElement : maxHeightBranch.height;
                 return;
@@ -420,9 +420,9 @@ class MoLibDiagramCalculatorCoordinatesUtil {
     }
     static plusHeightElementInBranch(elements, total) {
         elements.forEach((element) => {
-            const margin = !element.branches || !element.branches.length ? checkElementGetHeight(element.nodeOtherConfig) : canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
+            const margin = !element.branches?.length ? checkElementGetHeight(element.nodeOtherConfig) : canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
             total.height += (element.specific_height ?? 0) + margin;
-            if (!element.branches || !element.branches.length) {
+            if (!element.branches?.length) {
                 return;
             }
             total.height += 64; // từ chiều đường thẳng ngang xuống đến nhánh đầu tiên
@@ -432,7 +432,7 @@ class MoLibDiagramCalculatorCoordinatesUtil {
             element.branches.forEach((branch) => {
                 const heightInBranch = { height: 0 };
                 heightInBranch.height += canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH_TO_ELEMENT_FIRST + 20; // đường cong kết thúc nhánh + 10px đường cong
-                if (!branch.elements || !branch.elements.length) {
+                if (!branch.elements?.length) {
                     heightInBranch.height += canvasConfigReadonly().ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT;
                     if (theMostElementsInBranch.height < heightInBranch.height) {
                         theMostElementsInBranch.height = heightInBranch.height;
@@ -448,7 +448,7 @@ class MoLibDiagramCalculatorCoordinatesUtil {
         });
     }
     static calculatorWidthBranch(elements, maxWidth, log) {
-        if (!elements || !elements.length) {
+        if (!elements?.length) {
             const width = canvasConfigReadonly().DEFAULT_BRANCH_WHEN_NO_ELEMENT;
             maxWidth.width = width;
             maxWidth.aboveWidth = width / 2;
@@ -457,7 +457,7 @@ class MoLibDiagramCalculatorCoordinatesUtil {
         }
         const maxWidthInElements = { width: 0, aboveWidth: 0, underWidth: 0 };
         elements.forEach((element) => {
-            if (!element.branches || !element.branches.length) {
+            if (!element.branches?.length) {
                 // tính chiều cao của từng element 1, vì chiều cao của từng thằng có thể khác nhau
                 if ((element.specific_width ?? 0) < maxWidthInElements.width) {
                     return;
@@ -608,7 +608,7 @@ class MoLibDiagramHorizontalCalculatorBranchUtil {
         let Lx = startDraw;
         Lx += canvasConfigReadonly().ELEMENT_HEIGHT_CURVE;
         Lx += this.getHorizontalDistanceToFirstBlock(branch);
-        if (!branch.elements || !branch.elements.length) {
+        if (!branch.elements?.length) {
             Lx += maxWidthBranch + 20;
         }
         const coord1 = { mx: left, my: top, lx: Lx, ly: top };
@@ -620,7 +620,7 @@ class MoLibDiagramHorizontalCalculatorBranchUtil {
             const waitWidth = getHeightWaitConfig(branch.nodeOtherConfig);
             const leftLine2 = endXToWait + waitWidth;
             delete branch.nodeOtherConfig.attributeSvgD;
-            if (branch.elements && branch.elements.length) {
+            if (branch.elements?.length) {
                 branch.nodeOtherConfig.attributeSvgD = `M ${leftLine2} ${coord1.my} L ${coord1.lx} ${coord1.my}`;
             }
             branch.nodeOtherConfig.specific_x = endXToWait;
@@ -635,7 +635,7 @@ class MoLibDiagramHorizontalCalculatorBranchUtil {
         }
         branch.specific_start_branch_x = left + lineFormElementToBranching + canvasConfigReadonly().ELEMENT_HEIGHT_CURVE;
         branch.specific_start_branch_y = top;
-        if (!branch.elements || !branch.elements.length)
+        if (!branch.elements?.length)
             return;
         const widthToElement = canvasConfigReadonly().ELEMENT_HEIGHT_CURVE + this.getHorizontalDistanceToFirstBlock(branch);
         branch.elements.forEach((el) => {
@@ -650,7 +650,7 @@ class MoLibDiagramHorizontalCalculatorBranchUtil {
         const { coordQL2, isCheckAllElementConnectToExit } = this.drawAboveUnderLine(top, lineFormElementToBranching, left, lineBetweenBranch, branch, maxWidthBranch, 'above', config);
         branch.specific_start_branch_x = coordQL2.x;
         branch.specific_start_branch_y = coordQL2.y;
-        if (!branch.elements || !branch.elements.length)
+        if (!branch.elements?.length)
             return;
         this.drawElementInBranchLine(branch, coordQL2, config);
         if (isCheckAllElementConnectToExit)
@@ -666,7 +666,7 @@ class MoLibDiagramHorizontalCalculatorBranchUtil {
         const maxY = (coordQL1.y ?? 0) + 200;
         const configSvg = config.widthHeightSvgCanvas;
         configSvg.heightSvg = maxY > configSvg.heightSvg ? maxY : configSvg.heightSvg;
-        if (!branch.elements || !branch.elements.length)
+        if (!branch.elements?.length)
             return;
         this.drawElementInBranchLine(branch, coordQL2, config);
         if (isCheckAllElementConnectToExit)
@@ -733,7 +733,7 @@ class MoLibDiagramHorizontalCalculatorBranchUtil {
         };
         // Đoạn L sau QL2: đi ngang (phải) đến vị trí element đầu tiên trong nhánh
         const distToFirst = this.getHorizontalDistanceToFirstBlock(branch);
-        if (!branch.elements || !branch.elements.length) {
+        if (!branch.elements?.length) {
             coordQL2.lx = (coordQL2.x ?? 0) + distToFirst + maxWidthBranch;
         }
         else {
@@ -749,7 +749,7 @@ class MoLibDiagramHorizontalCalculatorBranchUtil {
             const leftLine2 = endXToWait + waitWidth;
             delete branch.nodeOtherConfig.attributeSvgD;
             QL2 = `Q ${coordQL2.x1},${coordQL2.y1} ${coordQL2.x},${coordQL2.y} M ${coordQL2.x},${coordQL2.y} L ${endXToWait},${coordQL2.y}`;
-            if (branch.elements && branch.elements.length) {
+            if (branch.elements?.length) {
                 branch.nodeOtherConfig.attributeSvgD = `M ${leftLine2} ${coordQL2.y} L ${coordQL2.lx} ${coordQL2.ly}`;
             }
             branch.nodeOtherConfig.specific_x = endXToWait;
@@ -776,7 +776,7 @@ class MoLibDiagramHorizontalCalculatorBranchUtil {
             return true;
         }
         elements.forEach((element) => {
-            if (!element.branches || !element.branches.length)
+            if (!element.branches?.length)
                 return;
             let branchConnectToExit = 0;
             element.branches.forEach((branch) => {
@@ -827,7 +827,7 @@ class MoLibDiagramHorizontalCalculatorBranchUtil {
  */
 class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
     static setXYElements(elements, config, positionY) {
-        if (!elements || !elements.length) {
+        if (!elements?.length) {
             return;
         }
         elements.forEach((currentElement, index) => {
@@ -843,9 +843,8 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
             }
             checkMaxTop(config, currentElement.specific_y, currentElement.branches?.[0]?.positionMaxTop);
             const top = currentElement.specific_y ?? 0;
-            const left = (currentElement.specific_x ?? 0) + (currentElement.specific_width ?? 0) / 2; // điểm giữa theo X (điểm vẽ SVG)
             let lineBetweenElements = (currentElement.specific_width ?? 0) + this.checkElementGetMargin(currentElement.nodeOtherConfig);
-            if (currentElement.branches && currentElement.branches.length) {
+            if (currentElement.branches?.length) {
                 lineBetweenElements = (currentElement.specific_width ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
             }
             const maxY = (currentElement.specific_y ?? 0) + (currentElement.specific_height ?? 0) + 200;
@@ -853,7 +852,7 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
             const configSvg = config.widthHeightSvgCanvas;
             configSvg.heightSvg = maxY > configSvg.heightSvg ? maxY : configSvg.heightSvg;
             configSvg.widthSvg = maxXRight > configSvg.widthSvg ? maxXRight : configSvg.widthSvg;
-            if (!currentElement.branches || !currentElement.branches.length) {
+            if (!currentElement.branches?.length) {
                 // Element không có nhánh: vẽ đường thẳng ngang
                 const drawFormToWidthExit = (currentElement.subCodeOfElement || currentElement.code) === canvasConfigReadonly().TYPE_ELEMENT_EXIT ? (currentElement.specific_width ?? 0) / 2 : lineBetweenElements;
                 currentElement.attributeSvgD = `M ${currentElement.specific_x ?? 0} ${top + (currentElement.specific_height ?? 0) / 2} l ${drawFormToWidthExit} 0`;
@@ -909,12 +908,12 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
                 MoLibDiagramHorizontalCalculatorBranchUtil.drawStraightLine(topMid, lineFormElementToBranching, currentElement.specific_x ?? 0, brachMiddle, maxWidthBranch.width, config);
             }
             let hasNextSameParentElementNext = false;
-            const aboveHalfReverse = aboveHalf.reverse();
-            aboveHalfReverse.forEach((branch, indexBranch) => {
+            aboveHalf.reverse();
+            aboveHalf.forEach((branch, indexBranch) => {
                 if (!hasNextSameParentElementNext) {
                     const flatElementOnBranch = [];
                     buildFlatElement(branch.elements, flatElementOnBranch);
-                    hasNextSameParentElementNext = !flatElementOnBranch || !flatElementOnBranch.length ? true : flatElementOnBranch.find((item) => item.next_id === currentElement.next_id) ? true : false;
+                    hasNextSameParentElementNext = !flatElementOnBranch?.length ? true : !!flatElementOnBranch.find((item) => item.next_id === currentElement.next_id);
                 }
                 branch.onTheSide = 'above';
                 const maxWidthB = { width: 0, aboveWidth: 0, underWidth: 0 };
@@ -924,7 +923,7 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
                     above: maxWidthB.aboveWidth,
                     under: maxWidthB.underWidth,
                 };
-                const branchPre = aboveHalfReverse[indexBranch - 1];
+                const branchPre = aboveHalf[indexBranch - 1];
                 let lineBetweenBranch = maxWidthB.underWidth + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2;
                 if (branchPre) {
                     lineBetweenBranch += (branchPre.widthBranch?.width ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT;
@@ -938,7 +937,7 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
                 if (!hasNextSameParentElementNext) {
                     const flatElementOnBranch = [];
                     buildFlatElement(branch.elements, flatElementOnBranch);
-                    hasNextSameParentElementNext = !flatElementOnBranch || !flatElementOnBranch.length ? true : flatElementOnBranch.find((item) => item.next_id === currentElement.next_id) ? true : false;
+                    hasNextSameParentElementNext = !flatElementOnBranch?.length ? true : !!flatElementOnBranch.find((item) => item.next_id === currentElement.next_id);
                 }
                 branch.onTheSide = 'under';
                 const maxWidthB = { width: 0, aboveWidth: 0, underWidth: 0 };
@@ -989,11 +988,11 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
     }
     /** Tính chiều rộng tối đa của nhánh (trong horizontal = chiều cao thực của nhánh không có element) */
     static calculatorMaxBranchWidth(element, maxWidthBranch) {
-        if (!element.branches || !element.branches.length) {
+        if (!element.branches?.length) {
             return;
         }
         element.branches.forEach((branch) => {
-            if (!branch.elements || !branch.elements.length) {
+            if (!branch.elements?.length) {
                 const lineBranchNoHasElement = canvasConfigReadonly().ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT;
                 maxWidthBranch.width = lineBranchNoHasElement > maxWidthBranch.width ? lineBranchNoHasElement : maxWidthBranch.width;
                 return;
@@ -1006,9 +1005,9 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
     /** Tính tổng chiều rộng các elements trong nhánh (dọc theo trục X) */
     static plusWidthElementInBranch(elements, total) {
         elements.forEach((element) => {
-            const margin = !element.branches || !element.branches.length ? this.checkElementGetMargin(element.nodeOtherConfig) : canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
+            const margin = !element.branches?.length ? this.checkElementGetMargin(element.nodeOtherConfig) : canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
             total.height += (element.specific_width ?? 0) + margin;
-            if (!element.branches || !element.branches.length) {
+            if (!element.branches?.length) {
                 return;
             }
             total.height += 64;
@@ -1016,7 +1015,7 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
             element.branches.forEach((branch) => {
                 const widthInBranch = { height: 0 };
                 widthInBranch.height += canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH_TO_ELEMENT_FIRST + 20;
-                if (!branch.elements || !branch.elements.length) {
+                if (!branch.elements?.length) {
                     widthInBranch.height += canvasConfigReadonly().ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT;
                     if (theMostElementsInBranch.height < widthInBranch.height) {
                         theMostElementsInBranch.height = widthInBranch.height;
@@ -1036,7 +1035,7 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
      * Trong horizontal context: mỗi nhánh trải dài theo Y (lên/xuống).
      */
     static calculatorHeightBranch(elements, maxWidth) {
-        if (!elements || !elements.length) {
+        if (!elements?.length) {
             const w = canvasConfigReadonly().DEFAULT_BRANCH_WHEN_NO_ELEMENT;
             maxWidth.width = w;
             maxWidth.aboveWidth = w / 2;
@@ -1045,7 +1044,7 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
         }
         const maxWidthInElements = { width: 0, aboveWidth: 0, underWidth: 0 };
         elements.forEach((element) => {
-            if (!element.branches || !element.branches.length) {
+            if (!element.branches?.length) {
                 // element không nhánh: dùng specific_height làm Y span
                 if ((element.specific_height ?? 0) < maxWidthInElements.width) {
                     return;
@@ -1124,6 +1123,138 @@ class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
     }
 }
 
+const DEFAULT_NAVIGATION_LINE_STYLE = {
+    curve: 10,
+    distancePoint: 20,
+    stroke: 'var(--libs-ui-color-light-1, #4e8cf7)',
+    strokeDasharray: '5',
+    strokeWidth: '1',
+};
+const DEFAULT_NAVIGATION_ARROW_STYLE = {
+    width: 4,
+    height: 8,
+    fill: 'var(--libs-ui-color-light-1, #4e8cf7)',
+};
+const DEFAULT_NAVIGATION_ENDPOINT_GAP = 8;
+
+class LibsUiDiagramDrawNavigationUtil {
+    /** Rule chọn mode mặc định (copy từ workflows/canvas.component.ts:471). */
+    static defaultModeResolver(start, end) {
+        return start.x < end.x && start.y > end.y ? 'quart-in' : 's-line';
+    }
+    /**
+     * Build dữ liệu navigation line (next_other_id) từ flat elements để render qua draw-line directive.
+     * @param flatElements Danh sách phẳng tất cả elements (sau khi configXYElements đã chạy).
+     * @param orientation Chiều layout của diagram.
+     * @param styleConfig Tuỳ chỉnh style line/arrow + override resolver mode/gap.
+     */
+    static buildNavigationData(flatElements, orientation, styleConfig) {
+        const result = [];
+        flatElements.forEach((item) => {
+            if (item.branches?.length) {
+                item.branches.forEach((branch, index) => {
+                    if (!branch.next_other_id?.length || !branch.nodeOtherConfig) {
+                        return;
+                    }
+                    const nodeOtherConfig = branch.nodeOtherConfig;
+                    const nextIds = branch.next_other_id;
+                    nextIds.forEach((nextId, idx) => {
+                        const target = flatElements.find((el) => el.id === nextId);
+                        if (!target) {
+                            return;
+                        }
+                        const lineId = nextIds.length > 1 ? `${item.id}_branch_${index}_${idx}` : `${item.id}_branch_${index}`;
+                        const lineData = this.buildOneLine(lineId, nodeOtherConfig, target, orientation, styleConfig);
+                        if (lineData) {
+                            result.push(lineData);
+                        }
+                    });
+                });
+                return;
+            }
+            if (!item.next_other_id?.length || !item.nodeOtherConfig) {
+                return;
+            }
+            const nodeOtherConfig = item.nodeOtherConfig;
+            const nextIds = item.next_other_id;
+            nextIds.forEach((nextId, idx) => {
+                const target = flatElements.find((el) => el.id === nextId);
+                if (!target) {
+                    return;
+                }
+                const lineId = nextIds.length > 1 ? `${item.id ?? ''}_${idx}` : (item.id ?? '');
+                const lineData = this.buildOneLine(lineId, nodeOtherConfig, target, orientation, styleConfig);
+                if (lineData) {
+                    result.push(lineData);
+                }
+            });
+        });
+        return result;
+    }
+    static buildOneLine(id, source, target, orientation, styleConfig) {
+        const gap = styleConfig?.endpointGap ?? DEFAULT_NAVIGATION_ENDPOINT_GAP;
+        const points = orientation === 'horizontal' ? this.calcPointsHorizontal(source, target, gap) : this.calcPointsVertical(source, target, gap);
+        if (!points) {
+            return undefined;
+        }
+        const resolver = styleConfig?.modeResolver ?? this.defaultModeResolver;
+        const mode = resolver(points.start, points.end);
+        return {
+            id,
+            points,
+            mode,
+            lineStyle: { ...DEFAULT_NAVIGATION_LINE_STYLE, ...styleConfig?.lineStyle },
+            arrowStyle: { ...DEFAULT_NAVIGATION_ARROW_STYLE, ...styleConfig?.arrowStyle },
+        };
+    }
+    /** VERTICAL: line navigation đi NGANG — kẹp cạnh phải/trái source → cạnh trái/phải target. */
+    static calcPointsVertical(source, target, gap) {
+        const sx = source.specific_x ?? 0;
+        const sy = source.specific_y ?? 0;
+        const sw = source.specific_width ?? 0;
+        const sh = source.specific_height ?? 0;
+        const tx = target.specific_x ?? 0;
+        const ty = target.specific_y ?? 0;
+        const tw = target.specific_width ?? 0;
+        const th = target.specific_height ?? 0;
+        const sMidY = sy + sh / 2;
+        const tMidY = ty + th / 2;
+        // Default: line đi sang PHẢI từ source → cạnh TRÁI target
+        let start = { x: sx + sw, y: sMidY };
+        let end = { x: tx - gap, y: tMidY };
+        // Source nằm BÊN PHẢI target → line đi sang TRÁI: cạnh TRÁI source → cạnh PHẢI target
+        if (sx > tx + tw) {
+            start = { x: sx, y: sMidY };
+            end = { x: tx + tw + gap, y: tMidY };
+            return { start, end };
+        }
+        // Source nằm PHÍA TRÊN target (cùng cột hoặc gần) → đi XUỐNG vào cạnh TRÊN target
+        if (sy < ty && Math.abs(sx + sw / 2 - (tx + tw / 2)) < Math.max(sw, tw)) {
+            start = { x: sx + sw / 2, y: sy + sh };
+            end = { x: tx + tw / 2, y: ty - gap };
+        }
+        return { start, end };
+    }
+    /** HORIZONTAL: line navigation đi DỌC — kẹp cạnh dưới/trên source → cạnh trên/dưới target. */
+    static calcPointsHorizontal(source, target, gap) {
+        const sx = source.specific_x ?? 0;
+        const sy = source.specific_y ?? 0;
+        const sw = source.specific_width ?? 0;
+        const tx = target.specific_x ?? 0;
+        const ty = target.specific_y ?? 0;
+        const tw = target.specific_width ?? 0;
+        const th = target.specific_height ?? 0;
+        // Default: line đi XUỐNG từ source → cạnh TRÊN target
+        const start = { x: sx + sw, y: sy };
+        const end = { x: tx - gap, y: ty + th / 2 };
+        if (sy < ty) {
+            end.x = tx + tw / 2;
+            end.y = ty - gap;
+        }
+        return { start, end };
+    }
+}
+
 const canvasConfig = signal({
     ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT: 60,
     ELEMENT_MARGIN_DEFAULT: 60,
@@ -1236,7 +1367,7 @@ class LibsUiDiagramDrawService {
             if (currentElement.nodeOtherConfig?.attributeSvgD) {
                 this.attributeSvgD.update((prev) => `${prev ?? ''} ${currentElement.nodeOtherConfig?.attributeSvgD}`);
             }
-            if (!currentElement.branches || !currentElement.branches.length) {
+            if (!currentElement.branches?.length) {
                 return;
             }
             currentElement.branches.forEach((branch) => {
@@ -1263,7 +1394,7 @@ class LibsUiDiagramDrawService {
             return;
         }
         this.clearNodes();
-        this.renderElementsRecursively(elements, true, undefined);
+        this.renderElementsRecursively(elements, true);
         this.renderBranchLabels(elements);
     }
     extractVirtualElements(elements) {
@@ -1410,7 +1541,7 @@ class LibsUiDiagramDrawService {
                 this.createNode(element, branch, shouldShowArrow, false);
             }
             // Render nodeOtherConfig nếu có (nodes phụ) - KHÔNG có arrow
-            if (element.nodeOtherConfig && element.nodeOtherConfig.translateX !== undefined && element.nodeOtherConfig.translateY !== undefined) {
+            if (element.nodeOtherConfig?.translateX !== undefined && element.nodeOtherConfig.translateY !== undefined) {
                 this.createNode(element.nodeOtherConfig, branch, false, true);
             }
             // Render branches nếu có
@@ -1419,7 +1550,7 @@ class LibsUiDiagramDrawService {
                     if (branch.elements && branch.elements.length > 0) {
                         this.renderElementsRecursively(branch.elements, false, branch);
                     }
-                    if (branch.nodeOtherConfig && branch.nodeOtherConfig.translateX !== undefined && branch.nodeOtherConfig.translateY !== undefined) {
+                    if (branch.nodeOtherConfig?.translateX !== undefined && branch.nodeOtherConfig.translateY !== undefined) {
                         this.createNode(branch.nodeOtherConfig, branch, false, true);
                     }
                 });
@@ -1633,6 +1764,14 @@ class LibsUiDiagramDrawService {
             }
         });
     }
+    /**
+     * Build dữ liệu navigation line (next_other_id) từ flat elements để render qua draw-line directive.
+     * Service tự đọc `orientation()` để chọn pattern endpoint phù hợp.
+     * Caller chỉ cần truyền vào `drawLineFunctionControl.setData(...)`.
+     */
+    buildNavigationData(flatElements, styleConfig) {
+        return LibsUiDiagramDrawNavigationUtil.buildNavigationData(flatElements, this.orientation(), styleConfig);
+    }
     /** Xóa tất cả drop zone "+" khỏi DOM */
     clearDropZones() {
         const container = this.configCanvas()?.nodesContainer?.nativeElement;
@@ -1833,18 +1972,18 @@ class LibsUiDiagramDrawCanvasUtil {
     static buildFlatElement(elements, flatElementsContainer) {
         elements.forEach((element) => {
             flatElementsContainer.push(element);
-            if (!element.branches || !element.branches.length) {
+            if (!element.branches?.length) {
                 return;
             }
             LibsUiDiagramDrawCanvasUtil.flatElementHasBranch(element, flatElementsContainer);
         });
     }
     static flatElementHasBranch(element, flatElementsContainer) {
-        if (!element.branches || !element.branches.length) {
+        if (!element.branches?.length) {
             return;
         }
         element.branches.forEach((branch) => {
-            if (!branch.elements || !branch.elements.length) {
+            if (!branch.elements?.length) {
                 return;
             }
             LibsUiDiagramDrawCanvasUtil.buildFlatElement(branch.elements, flatElementsContainer);
@@ -1859,11 +1998,11 @@ class LibsUiDiagramDrawCanvasUtil {
      * data.count: số lượng branch có next_id đến idElement
      */
     static getBranchContainerAndCountElementHasNextIdToElement(element, idElement, data, flowFlatElements) {
-        if (!element || !element.branches) {
+        if (!element?.branches) {
             return;
         }
         element.branches.forEach((branch) => {
-            if (!branch.elements || !branch.elements.length) {
+            if (!branch.elements?.length) {
                 data.count++;
                 data.branchContainer = branch;
                 data.branchEmpty++;
@@ -1873,7 +2012,7 @@ class LibsUiDiagramDrawCanvasUtil {
             if (!lastElement.next_id) {
                 return;
             }
-            if (lastElement.branches && lastElement.branches.length) {
+            if (lastElement.branches?.length) {
                 const dataOfLastElement = this.getDefaultStorageBranchEndCount();
                 LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(lastElement, idElement, dataOfLastElement, flowFlatElements);
                 if (!dataOfLastElement.count) {
@@ -1883,7 +2022,8 @@ class LibsUiDiagramDrawCanvasUtil {
                 data.count++;
                 data.branchContainer = branch;
                 if (dataOfLastElement.count === 1) {
-                    return (data.branchContainer = dataOfLastElement.branchContainer);
+                    data.branchContainer = dataOfLastElement.branchContainer;
+                    return;
                 }
                 return;
             }
@@ -1893,7 +2033,6 @@ class LibsUiDiagramDrawCanvasUtil {
             }
             data.count++;
             data.branchContainer = branch;
-            return;
         });
     }
     static getElementHasCurrentBranchOrCurrentElement(currentBranch, currentElement, flatElements) {
@@ -1901,15 +2040,15 @@ class LibsUiDiagramDrawCanvasUtil {
             currentBranch: undefined,
             element: undefined,
         };
-        if (!flatElements || !flatElements.length || (!currentBranch && !currentElement)) {
+        if (!flatElements?.length || (!currentBranch && !currentElement)) {
             return data;
         }
         if (!currentElement) {
             data.currentBranch = currentBranch;
-            data.element = flatElements.find((el) => el.branches && !!el.branches.find((branch) => branch === currentBranch));
+            data.element = flatElements.find((el) => !!el.branches?.find((branch) => branch === currentBranch));
             return data;
         }
-        const elementsHasBranches = flatElements.filter((item) => item.branches && item.branches.length);
+        const elementsHasBranches = flatElements.filter((item) => item.branches?.length);
         if (!elementsHasBranches) {
             return data;
         }
@@ -1919,7 +2058,7 @@ class LibsUiDiagramDrawCanvasUtil {
                 return data;
             }
             for (const branch of branches) {
-                if (!branch.elements || !branch.elements.length) {
+                if (!branch.elements?.length) {
                     continue;
                 }
                 if (branch.elements.find((item) => item.id === currentElement.id)) {
@@ -1938,11 +2077,11 @@ class LibsUiDiagramDrawCanvasUtil {
                 containerElement.splice(+index, 1);
                 return true;
             }
-            if (!elementOfIndex.branches || !elementOfIndex.branches.length) {
+            if (!elementOfIndex.branches?.length) {
                 continue;
             }
             for (const branch of elementOfIndex.branches) {
-                if (!branch.elements || !branch.elements.length) {
+                if (!branch.elements?.length) {
                     continue;
                 }
                 if (this.findAndDeleteElementFromContainer(branch.elements, elementDelete)) {
@@ -1958,7 +2097,7 @@ class LibsUiDiagramDrawCanvasUtil {
             return;
         }
         for (const item of flatElementHasBranch) {
-            if (!item.branches || !item.branches.length) {
+            if (!item.branches?.length) {
                 continue;
             }
             for (const branch of item.branches) {
@@ -1990,11 +2129,11 @@ const findAndDeleteElementFromContainer = (containerElement, elementDelete) => {
             containerElement.splice(+index, 1);
             return true;
         }
-        if (!elementOfIndex.branches || !elementOfIndex.branches.length) {
+        if (!elementOfIndex.branches?.length) {
             continue;
         }
         for (const branch of elementOfIndex.branches) {
-            if (!branch.elements || !branch.elements.length) {
+            if (!branch.elements?.length) {
                 continue;
             }
             if (findAndDeleteElementFromContainer(branch.elements, elementDelete)) {
@@ -2678,7 +2817,7 @@ const getAllItemPreOfElement = (element, flatElements) => {
 };
 const getAllItemNextOfElement = (element, flatElements) => {
     if (!element.next_id) {
-        if (!element.branches || !element.branches.length) {
+        if (!element.branches?.length) {
             return;
         }
         const flatElementInElementCurrent = [];
@@ -2783,17 +2922,17 @@ class LibsUiDiagramDrawDirectionService {
     /**xóa line đến và xóa line đi ở toàn bộ các khối và nhánh bị xóa */
     deleteLineConnectFromElement(elements, flatElements) {
         elements.forEach((item) => {
-            if (item.branches && item.branches.length) {
+            if (item.branches?.length) {
                 item.branches.forEach((branch) => {
-                    if (branch.next_other_id && branch.next_other_id.length) {
+                    if (branch.next_other_id?.length) {
                         this.deletePreOtherId(item.id ?? '', branch.next_other_id, flatElements);
                     }
                 });
             }
-            if (item.next_other_id && item.next_other_id.length) {
+            if (item.next_other_id?.length) {
                 this.deletePreOtherId(item.id ?? '', item.next_other_id, flatElements);
             }
-            if (item.pre_other_id && item.pre_other_id.length) {
+            if (item.pre_other_id?.length) {
                 // nhánh chỉ lưu id next đi thôi chứ không lưu được pre => chỉ cần xóa pre trong khối.
                 this.deleteNextOtherId(item.id ?? '', item.pre_other_id, flatElements);
             }
@@ -2803,7 +2942,7 @@ class LibsUiDiagramDrawDirectionService {
     deletePreOtherId(itemId, nextOtherId, flatElements) {
         nextOtherId.forEach((nextToId) => {
             const nextElement = flatElements.find((item) => item.id === nextToId);
-            if (!nextElement || !nextElement.pre_other_id || !nextElement.pre_other_id.length) {
+            if (!nextElement?.pre_other_id?.length) {
                 return;
             }
             const indexIdPre = nextElement.pre_other_id.findIndex((id) => id === itemId);
@@ -2821,28 +2960,28 @@ class LibsUiDiagramDrawDirectionService {
             }
             if (preElement.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
                 preElement.branches?.forEach((branch) => {
-                    if (!branch.next_other_id || !branch.next_other_id.length) {
+                    if (!branch.next_other_id?.length) {
                         return;
                     }
                     const indexIdNextInBranch = branch.next_other_id.findIndex((id) => id === itemId);
                     if (indexIdNextInBranch !== -1) {
                         branch.next_other_id.splice(indexIdNextInBranch, 1);
                     }
-                    if (!branch.next_other_id || !branch.next_other_id.length) {
+                    if (!branch.next_other_id?.length) {
                         branch.nodeOtherConfig = undefined;
                         this.canvasService.addElementExitWhenDeleteDirectionLine(preElement, branch);
                     }
                 });
                 return;
             }
-            if (!preElement.next_other_id || !preElement.next_other_id.length) {
+            if (!preElement.next_other_id?.length) {
                 return;
             }
             const indexIdNext = preElement.next_other_id.findIndex((id) => id === itemId);
             if (indexIdNext !== -1) {
                 preElement.next_other_id.splice(indexIdNext, 1);
             }
-            if (!preElement.next_other_id || !preElement.next_other_id.length) {
+            if (!preElement.next_other_id?.length) {
                 // thêm khối thoát vì không còn khối nào connect tới nó
                 if (preElement.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
                     const getConfigDefaultBranches = this.canvasService.HandlerFunction?.getConfigDefaultBranches ?? getDefaultConfigConstituentBranches;
@@ -2885,7 +3024,7 @@ class LibsUiDiagramDrawDirectionService {
     deleteElementsBehindElementConnectTo(element, flatElements) {
         const listElementDelete = [];
         let flatElementInElementCurrent = [];
-        if (element.branches && element.branches.length) {
+        if (element.branches?.length) {
             buildFlatElement([element], flatElementInElementCurrent);
             flatElementInElementCurrent = flatElementInElementCurrent.filter((item) => item.id !== element.id);
         }
@@ -2904,11 +3043,11 @@ class LibsUiDiagramDrawDirectionService {
                 containerElement.splice(+index, 1);
                 return true;
             }
-            if (!elementOfIndex.branches || !elementOfIndex.branches.length) {
+            if (!elementOfIndex.branches?.length) {
                 continue;
             }
             for (const branch of elementOfIndex.branches) {
-                if (!branch.elements || !branch.elements.length) {
+                if (!branch.elements?.length) {
                     continue;
                 }
                 if (this.findAndDeleteElementFromContainer(branch.elements, elementDelete)) {
@@ -2926,7 +3065,7 @@ class LibsUiDiagramDrawDirectionService {
         const idOldNextTo = element.next_other_id?.[0];
         const elementOldTo = flatElements?.find((item) => item.id === idOldNextTo);
         // xóa line cũ
-        if (elementOldTo && elementOldTo.pre_other_id) {
+        if (elementOldTo?.pre_other_id) {
             const itemIndex = elementOldTo.pre_other_id?.findIndex((id) => id === element.id);
             if (itemIndex !== -1) {
                 elementOldTo.pre_other_id?.splice(itemIndex, 1);
@@ -2949,7 +3088,7 @@ class LibsUiDiagramDrawDirectionService {
         const idOldNextTo = branch.next_other_id?.[0];
         const elementOldTo = flatElements?.find((item) => item.id === idOldNextTo);
         // xóa line cũ
-        if (elementOldTo && elementOldTo.pre_other_id) {
+        if (elementOldTo?.pre_other_id) {
             const itemIndex = elementOldTo.pre_other_id?.findIndex((id) => id === element.id);
             if (itemIndex !== -1) {
                 elementOldTo.pre_other_id?.splice(itemIndex, 1);