@libs-ui/components-draw-line 0.2.306 → 0.2.307-0

package/fesm2022/libs-ui-components-draw-line.mjs

@@ -5,11 +5,11 @@ import { Subject, takeUntil, tap } from 'rxjs';
 
 class MoCanvasCalculatorBranchUtil {
     /**
-   *
-   * above, left a + b; opposite = true a - b;
-   *
-   * under, right a - b; opposite = true a + b
-   */
+     *
+     * above, left a + b; opposite = true a - b;
+     *
+     * under, right a - b; opposite = true a + b
+     */
     static mathOperatorsCalculation(direction, a, b, opposite) {
         switch (direction) {
             case 'left':
@@ -32,7 +32,7 @@ class MoCanvasCalculatorBranchUtil {
 
 class MoCanvasCalculatorDirectionElementUtil {
     static checkUpDownLeftRight(firstPoint, endPoint, direction) {
-        const distance = ((firstPoint ?? 0) - (endPoint ?? 0));
+        const distance = (firstPoint ?? 0) - (endPoint ?? 0);
         if (distance === 0) {
             return 'center';
         }
@@ -99,17 +99,16 @@ class MoCanvasCalculatorDirectionElementUtil {
     }
     /**Tránh khối phía bên phải */
     static byPassElementOnRightSide(startX, startY, endY, lineCurve, elementBlockRoad, directionX, separatedPoints, key, coordLX) {
-        const topElementBlockRoad = (elementBlockRoad.y ?? 0);
+        const topElementBlockRoad = elementBlockRoad.y ?? 0;
         const bottomElementBlockRoad = (elementBlockRoad.y ?? 0) + (elementBlockRoad.height ?? 0);
         const directionY = this.checkUpDownLeftRight(startY, endY, 'y');
         const Q1 = this.drawLineQ({ x: startX, y: startY ?? 0 }, `${directionX}-${directionY === 'under' ? 'under' : 'above'}`, lineCurve, lineCurve);
         const L1 = {
             x: Q1.x ?? 0,
-            y: (directionY === 'under' ? bottomElementBlockRoad : topElementBlockRoad)
+            y: directionY === 'under' ? bottomElementBlockRoad : topElementBlockRoad,
         };
         if (MoCanvasConnectNavigationNewElementUtil.START_MODE !== 'bottom-left') {
-            if ((directionY === 'under' && bottomElementBlockRoad - (Q1.y ?? 0) <= 0)
-                || (directionY === 'above' && topElementBlockRoad - (Q1.y ?? 0) >= 0)) {
+            if ((directionY === 'under' && bottomElementBlockRoad - (Q1.y ?? 0) <= 0) || (directionY === 'above' && topElementBlockRoad - (Q1.y ?? 0) >= 0)) {
                 L1.y = Q1.y ?? 0;
             }
             if (Math.abs((L1.y ?? 0) - endY) <= 10) {
@@ -126,19 +125,19 @@ class MoCanvasCalculatorDirectionElementUtil {
             pathByPassQ: `${pathQ1} ${pathQ2}`,
             endPath: {
                 x: Q2.x ?? 0,
-                y: Q2.y ?? 0
-            }
+                y: Q2.y ?? 0,
+            },
         };
     }
     /**Tránh khối phía bên trên */
     static byPassElementOnTopBottomSide(startX, startY, endX, lineCurve, elementBlockRoad, directionY, separatedPoints, key) {
-        const leftElementBlockRoad = (elementBlockRoad.x ?? 0);
+        const leftElementBlockRoad = elementBlockRoad.x ?? 0;
         const rightElementBlockRoad = (elementBlockRoad.x ?? 0) + (elementBlockRoad.width ?? 0);
         const directionX = this.checkUpDownLeftRight(startX, endX, 'x') === 'left' ? 'left' : 'right'; // xem nên tránh sang trái hay phải
         const Q1 = this.drawLineQ({ x: startX, y: startY ?? 0 }, `${directionY}-${directionX}`, lineCurve, lineCurve);
         const L1 = {
-            x: (directionX === 'left' ? leftElementBlockRoad : rightElementBlockRoad),
-            y: Q1.y ?? 0
+            x: directionX === 'left' ? leftElementBlockRoad : rightElementBlockRoad,
+            y: Q1.y ?? 0,
         };
         if ((directionX === 'right' && rightElementBlockRoad - (Q1.x ?? 0) <= 0) || (directionX === 'left' && leftElementBlockRoad - (Q1.x ?? 0) >= 0)) {
             L1.x = Q1.x ?? 0;
@@ -156,8 +155,8 @@ class MoCanvasCalculatorDirectionElementUtil {
             pathByPassQ: `${pathQ1} ${pathQ2}`,
             endPath: {
                 x: Q2.x ?? 0,
-                y: Q2.y ?? 0
-            }
+                y: Q2.y ?? 0,
+            },
         };
     }
     // kiểm tra đường thẳng và khối có cắt nhau không
@@ -165,15 +164,15 @@ class MoCanvasCalculatorDirectionElementUtil {
         const minimumDistanceFromBlock = 8;
         start += minimumDistanceFromBlock + 1; // tránh khối xuất phát vào list
         const listPointsOfLine = range(start, end + 1);
-        const elementBlockRoad = obstacleRect.filter(item => {
+        const elementBlockRoad = obstacleRect.filter((item) => {
             const left = (item.x ?? 0) - minimumDistanceFromBlock;
             const right = (item.x ?? 0) + (item.width ?? 0) + minimumDistanceFromBlock;
             const top = (item.y ?? 0) - minimumDistanceFromBlock;
             const bottom = (item.y ?? 0) + (item.height ?? 0) + minimumDistanceFromBlock;
-            if (direction === 'x' && listPointsOfLine.find(el => (left <= el && el <= right)) && (top <= xOrYOfLine && xOrYOfLine <= bottom)) {
+            if (direction === 'x' && listPointsOfLine.find((el) => left <= el && el <= right) && top <= xOrYOfLine && xOrYOfLine <= bottom) {
                 return true;
             }
-            if (direction === 'y' && listPointsOfLine.find(el => (top <= el && el <= bottom)) && (left <= xOrYOfLine && xOrYOfLine <= right)) {
+            if (direction === 'y' && listPointsOfLine.find((el) => top <= el && el <= bottom) && left <= xOrYOfLine && xOrYOfLine <= right) {
                 return true;
             }
             return false;
@@ -185,9 +184,9 @@ class MoCanvasCalculatorDirectionElementUtil {
             return elementBlockRoad;
         }
         if (direction === 'y') {
-            return elementBlockRoad.reduce((a, b) => (Math.abs(((a.y ?? 0) - start))) < (Math.abs(((b.y ?? 0) - start))) ? a : b);
+            return elementBlockRoad.reduce((a, b) => (Math.abs((a.y ?? 0) - start) < Math.abs((b.y ?? 0) - start) ? a : b));
         }
-        return elementBlockRoad.reduce((a, b) => (Math.abs(((a.x ?? 0) - start))) < (Math.abs(((b.x ?? 0) - start))) ? a : b);
+        return elementBlockRoad.reduce((a, b) => (Math.abs((a.x ?? 0) - start) < Math.abs((b.x ?? 0) - start) ? a : b));
     }
     // kiểm tra hướng thẳng vẽ về điểm end xem có bị chắn bởi khối nào không, nếu có thì phải lùi lại điểm end nhé.
     static checkBlocksElementStraightY(startX, startY, endPosition, obstacleRect) {
@@ -195,7 +194,7 @@ class MoCanvasCalculatorDirectionElementUtil {
         if (!elementBlockRoad || !elementBlockRoad.length) {
             return;
         }
-        return elementBlockRoad.reduce((a, b) => (Math.abs((a.x ?? 0 - startX))) < (Math.abs((b.x ?? 0 - startX))) ? a : b);
+        return elementBlockRoad.reduce((a, b) => (Math.abs(a.x ?? 0 - startX) < Math.abs(b.x ?? 0 - startX) ? a : b));
     }
     // kiểm tra hướng ngang vẽ về điểm end xem có bị chắn bởi khối nào không, nếu có thì phải lùi lại điểm end nhé.
     static checkBlocksElementX(startX, startY, endPosition, obstacleRect) {
@@ -203,7 +202,7 @@ class MoCanvasCalculatorDirectionElementUtil {
         if (!elementBlockRoad || !elementBlockRoad.length) {
             return;
         }
-        return elementBlockRoad.reduce((a, b) => (Math.abs(((a.y ?? 0) - startY))) < (Math.abs(((b.y ?? 0) - startY))) ? a : b);
+        return elementBlockRoad.reduce((a, b) => (Math.abs((a.y ?? 0) - startY) < Math.abs((b.y ?? 0) - startY) ? a : b));
     }
     // kiểm tra hướng sang phải là tránh khối
     static checkAndAvoidBlocksLeft(startX, startY, lineCurve, endPosition, obstacleRect, separatedPoints) {
@@ -214,10 +213,10 @@ class MoCanvasCalculatorDirectionElementUtil {
             return coordLX;
         }
         const directionX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(startX, endPosition.x, 'x');
-        const specificXElement = directionX === 'right' ? (elementBlockRoad.x ?? 0) : ((elementBlockRoad.x ?? 0) + (elementBlockRoad.width ?? 0));
-        coordLX.x = specificXElement + (MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2) + (lineCurve / 2);
+        const specificXElement = directionX === 'right' ? (elementBlockRoad.x ?? 0) : (elementBlockRoad.x ?? 0) + (elementBlockRoad.width ?? 0);
+        coordLX.x = specificXElement + MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2 + lineCurve / 2;
         if (directionX === 'right') {
-            coordLX.x = specificXElement - (MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2) - (lineCurve / 2);
+            coordLX.x = specificXElement - MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2 - lineCurve / 2;
         }
         let startXBypassElement = coordLX.x;
         if ((directionX === 'left' && startX - (coordLX.x ?? 0) <= 0) || (directionX === 'right' && startX - (coordLX.x ?? 0) >= 0)) {
@@ -226,7 +225,8 @@ class MoCanvasCalculatorDirectionElementUtil {
         }
         let lineByPassBlock = [];
         let { endPath } = MoCanvasCalculatorDirectionElementUtil.byPassElementOnRightSide(startXBypassElement ?? 0, coordLX.y ?? 0, endPosition.y, lineCurve, elementBlockRoad, directionX, lineByPassBlock, undefined, coordLX.x);
-        if (MoCanvasConnectNavigationNewElementUtil.START_MODE === 'bottom-left' && elementBlockRoad.x + (elementBlockRoad.width) / 2 === endPosition.x && Math.abs(endPosition.y - elementBlockRoad.y) <= 20) { // check xem khối chắn có phải là khối đích hay không?
+        if (MoCanvasConnectNavigationNewElementUtil.START_MODE === 'bottom-left' && elementBlockRoad.x + elementBlockRoad.width / 2 === endPosition.x && Math.abs(endPosition.y - elementBlockRoad.y) <= 20) {
+            // check xem khối chắn có phải là khối đích hay không?
             lineByPassBlock = [];
             const data = MoCanvasCalculatorDirectionElementUtil.byPassElementOnRightSideNewMode(startXBypassElement ?? 0, coordLX.y ?? 0, endPosition.y, lineByPassBlock, undefined, coordLX.x);
             endPath = data.endPath;
@@ -243,20 +243,20 @@ class MoCanvasCalculatorDirectionElementUtil {
         if (!elementBlockRoad) {
             const elementBlockRoadStraightLineY = this.checkBlocksElementStraightY((coordLX.x ?? 0) + 10, coordLX.y ?? 0, endPosition, obstacleRect); // tính điểm end_x dự kiến theo trường hợp đẹp nhất xem nó có chắn bởi khối nào khi kéo xuống không
             if (elementBlockRoadStraightLineY && (elementBlockRoadStraightLineY.x ?? 0) > startX) {
-                let toX = (elementBlockRoadStraightLineY.x ?? 0) - (MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2) - (lineCurve / 2);
-                if (((elementBlockRoadStraightLineY?.x ?? 0) - startX) < MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT) {
-                    toX = (elementBlockRoadStraightLineY.x ?? 0) - (((elementBlockRoadStraightLineY?.x ?? 0) - startX) / 2);
+                let toX = (elementBlockRoadStraightLineY.x ?? 0) - MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2 - lineCurve / 2;
+                if ((elementBlockRoadStraightLineY?.x ?? 0) - startX < MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT) {
+                    toX = (elementBlockRoadStraightLineY.x ?? 0) - ((elementBlockRoadStraightLineY?.x ?? 0) - startX) / 2;
                 }
                 coordLX.x = toX;
             }
             separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: 'checkAndAvoidBlocks', name: 'end' });
             return {
                 path: pathPre ? `${pathPre} L ${coordLX.x} ${coordLX.y}` : `L ${coordLX.x} ${coordLX.y}`,
-                endPath: coordLX
+                endPath: coordLX,
             };
         }
         const directionX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(startX, endPosition.x, 'x');
-        coordLX.x = (elementBlockRoad.x ?? 0) - (MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2) - (lineCurve / 2);
+        coordLX.x = (elementBlockRoad.x ?? 0) - MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2 - lineCurve / 2;
         let separatedPointsByPassElementOnRightSide = [];
         const { pathByPassQ, endPath } = MoCanvasCalculatorDirectionElementUtil.byPassElementOnRightSide(coordLX.x, coordLX.y ?? 0, endPosition.y, lineCurve, elementBlockRoad, directionX, separatedPointsByPassElementOnRightSide, 'checkAndAvoidBlocks', coordLX.x);
         let line = pathPre ? `${pathPre} L ${coordLX.x} ${coordLX.y} ${pathByPassQ}` : `L ${coordLX.x} ${coordLX.y} ${pathByPassQ}`;
@@ -265,14 +265,14 @@ class MoCanvasCalculatorDirectionElementUtil {
         if (!elementBlockRoadPre) {
             const elementBlockRoadStraightLineY = this.checkBlocksElementStraightY((endPosition.x ?? 0) + 10, endPath.y ?? 0, endPosition, obstacleRect);
             if (elementBlockRoadStraightLineY) {
-                const XNew = (elementBlockRoadStraightLineY.x ?? 0) - (MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2) - (lineCurve / 2);
+                const XNew = (elementBlockRoadStraightLineY.x ?? 0) - MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2 - lineCurve / 2;
                 if (XNew < (endPath.x ?? 0)) {
                     separatedPointsByPassElementOnRightSide = [];
                     separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: 'checkAndAvoidBlocks', name: 'u' });
                     line = pathPre ? `${pathPre} L ${coordLX.x} ${coordLX.y}` : `L ${coordLX.x} ${coordLX.y}`;
                     return {
                         path: line,
-                        endPath: coordLX
+                        endPath: coordLX,
                     };
                 }
             }
@@ -282,7 +282,7 @@ class MoCanvasCalculatorDirectionElementUtil {
         const data = this.checkAndAvoidBlocks(endPath.x ?? 0, endPath.y ?? 0, lineCurve, endPosition, obstacleRect, separatedPoints, `${line}`);
         return {
             path: data.path,
-            endPath: data.endPath
+            endPath: data.endPath,
         };
     }
     // kiểm tra hướng thẳng và tránh khối
@@ -293,14 +293,14 @@ class MoCanvasCalculatorDirectionElementUtil {
             separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: 'k' });
             return {
                 path: pathPre ?? '',
-                endPath: { x: startX, y: startY }
+                endPath: { x: startX, y: startY },
             };
         }
         if (!elementBlockRoad) {
             separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: 'r' });
             return {
                 path: pathPre ? `${pathPre} L ${coordLX.x} ${coordLX.y}` : `L ${coordLX.x} ${coordLX.y}`,
-                endPath: coordLX
+                endPath: coordLX,
             };
         }
         const y = directionY === 'above' ? (elementBlockRoad.y ?? 0) + (elementBlockRoad.height ?? 0) : (elementBlockRoad.y ?? 0);
@@ -312,7 +312,7 @@ class MoCanvasCalculatorDirectionElementUtil {
         const data = this.checkAndAvoidBlocksY(endPath.x ?? 0, endPath.y ?? 0, lineCurve, endPosition, directionY, obstacleRect, separatedPoints, `${line}`);
         return {
             path: data.path,
-            endPath: data.endPath
+            endPath: data.endPath,
         };
     }
     // kiểm tra hướng thẳng và tránh khối
@@ -321,11 +321,11 @@ class MoCanvasCalculatorDirectionElementUtil {
         const coordLX = { x: startX, y: endPosition.y };
         const elementBlockRoad = MoCanvasCalculatorDirectionElementUtil.checkLinePassBlockHorizontal(startY, endPosition.y, startX, 'y', obstacleRect);
         if (!elementBlockRoad) {
-            const elementBlockRoadStraightLineX = MoCanvasCalculatorDirectionElementUtil.checkBlocksElementX(coordLX.x ?? 0, (coordLX.y ?? 0), endPosition, obstacleRect);
+            const elementBlockRoadStraightLineX = MoCanvasCalculatorDirectionElementUtil.checkBlocksElementX(coordLX.x ?? 0, coordLX.y ?? 0, endPosition, obstacleRect);
             if (elementBlockRoadStraightLineX) {
-                const topElementBlockRoad = (elementBlockRoadStraightLineX.y ?? 0);
+                const topElementBlockRoad = elementBlockRoadStraightLineX.y ?? 0;
                 const bottomElementBlockRoad = (elementBlockRoadStraightLineX.y ?? 0) + (elementBlockRoadStraightLineX.height ?? 0);
-                let toY = (directionY === 'under' ? topElementBlockRoad : bottomElementBlockRoad);
+                let toY = directionY === 'under' ? topElementBlockRoad : bottomElementBlockRoad;
                 toY = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionY, toY, lineCurve * 2);
                 if (toY > startY && MoCanvasConnectNavigationNewElementUtil.START_MODE !== 'bottom-left') {
                     coordLX.y = toY;
@@ -334,11 +334,11 @@ class MoCanvasCalculatorDirectionElementUtil {
             separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: key, name: 'a' });
             return {
                 path: pathPre ? `${pathPre} L ${coordLX.x} ${coordLX.y}` : `L ${coordLX.x} ${coordLX.y}`,
-                endPath: coordLX
+                endPath: coordLX,
             };
         }
         const y = directionY === 'above' ? (elementBlockRoad.y ?? 0) + (elementBlockRoad.height ?? 0) : (elementBlockRoad.y ?? 0);
-        const elementBlockRoadStraightLineX = MoCanvasCalculatorDirectionElementUtil.checkBlocksElementX(coordLX.x ?? 0, (coordLX.y ?? 0), endPosition, obstacleRect);
+        const elementBlockRoadStraightLineX = MoCanvasCalculatorDirectionElementUtil.checkBlocksElementX(coordLX.x ?? 0, coordLX.y ?? 0, endPosition, obstacleRect);
         let ignoreBypassElement = false;
         if (elementBlockRoadStraightLineX && elementBlockRoadStraightLineX.id === elementBlockRoad.id) {
             ignoreBypassElement = true;
@@ -354,7 +354,7 @@ class MoCanvasCalculatorDirectionElementUtil {
             separatedPoints.push({ start: coordLX, end, mode: 'horizontal', id: key, name: 'c' });
             return {
                 path: line,
-                endPath: end
+                endPath: end,
             };
         }
         end = endPath;
@@ -363,7 +363,7 @@ class MoCanvasCalculatorDirectionElementUtil {
         const data = this.checkAndAvoidBlocksYLeft(end.x ?? 0, end.y ?? 0, lineCurve, endPosition, directionY, obstacleRect, separatedPoints, `${line}`);
         return {
             path: data.path,
-            endPath: data.endPath
+            endPath: data.endPath,
         };
     }
     static byPassElementOnRightSideNewMode(startX, startY, endY, separatedPoints, key, coordLX) {
@@ -372,7 +372,7 @@ class MoCanvasCalculatorDirectionElementUtil {
         separatedPoints.push({ start: start, end: end, mode: 'horizontal', id: key, name: 'q2r' });
         return {
             pathByPassQ: ``,
-            endPath: end
+            endPath: end,
         };
     }
 }
@@ -381,7 +381,7 @@ class MoCanvasConnectNavigationBottomLeftElementUtil {
     static lineLeft(pointNext, pointStart, start, lineCurve, obstacleRect, separatedPoints) {
         const endPositionOrigin = {
             x: pointNext.x,
-            y: pointNext.y
+            y: pointNext.y,
         };
         const endPosition = cloneDeep(endPositionOrigin);
         const directionStartY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(start.y, endPositionOrigin.y, 'y');
@@ -389,12 +389,12 @@ class MoCanvasConnectNavigationBottomLeftElementUtil {
         if (directionStartY === 'above') {
             const startQL = { lx: start.x - lineCurve, ly: (start.y ?? 0) + lineCurve };
             const line = {
-                start: { x: (start.x ?? 0), y: start.y ?? 0 },
-                end: { x: startQL.lx ?? 0, y: startQL.ly ?? 0 }
+                start: { x: start.x ?? 0, y: start.y ?? 0 },
+                end: { x: startQL.lx ?? 0, y: startQL.ly ?? 0 },
             };
             newPosition = {
                 x: pointStart.x - (lineCurve + 10),
-                y: MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartY, line.end.y, lineCurve, true)
+                y: MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartY, line.end.y, lineCurve, true),
             };
             separatedPoints.push({ start: line.start, end: line.end, mode: 'vertical-single-curve', id: '1' }); // line vẽ đi khỏi khối đầu tiên
             separatedPoints.push({ start: line.end, end: newPosition, mode: 'horizontal-single-curve', id: '1' }); // line vẽ đi khỏi khối đầu tiên
@@ -407,14 +407,14 @@ class MoCanvasConnectNavigationBottomLeftElementUtil {
             return;
         }
         if (Math.abs((straightLine.endPath.x ?? 0) - endPositionOrigin.x) < lineCurve) {
-            const listLine = separatedPoints.filter(item => item.id === 'checkAndAvoidBlocksYLeft');
-            const elements = listLine.filter(item => item.start.x === straightLine.endPath.x || item.end.x === straightLine.endPath.x);
-            elements.forEach(item => {
+            const listLine = separatedPoints.filter((item) => item.id === 'checkAndAvoidBlocksYLeft');
+            const elements = listLine.filter((item) => item.start.x === straightLine.endPath.x || item.end.x === straightLine.endPath.x);
+            elements.forEach((item) => {
                 if (item.start.x === straightLine.endPath.x) {
-                    item.start.x = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartX, item.start.x, (lineCurve));
+                    item.start.x = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartX, item.start.x, lineCurve);
                 }
                 if (item.end.x === straightLine.endPath.x) {
-                    item.end.x = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartX, item.end.x, (lineCurve));
+                    item.end.x = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartX, item.end.x, lineCurve);
                 }
             });
         }
@@ -423,7 +423,7 @@ class MoCanvasConnectNavigationBottomLeftElementUtil {
         const directionNextX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(straightLine.endPath.x ?? 0, endPositionOrigin.x, 'x');
         const coordQ1 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: straightLine.endPath.x ?? 0, y: straightLine.endPath.y ?? 0 }, `${directionStartY}-${directionNextX}`, lineCurve, lineCurve); // tính đoạn cong từ đường ngang sang đường thẳng
         const elementBlockRoadX = (elementBlockRoad?.x ?? 0) + (elementBlockRoad?.width ?? 0);
-        if (elementBlockRoad && Math.abs((elementBlockRoadX) - (straightLine.endPath.x ?? 0)) <= lineCurve * 2) {
+        if (elementBlockRoad && Math.abs(elementBlockRoadX - (straightLine.endPath.x ?? 0)) <= lineCurve * 2) {
             coordQ1.x1 = straightLine.endPath.x ?? 0;
             coordQ1.y1 = straightLine.endPath.y ?? 0;
             coordQ1.x = straightLine.endPath.x ?? 0;
@@ -437,11 +437,11 @@ class MoCanvasConnectNavigationBottomLeftElementUtil {
             separatedPoints.push({ start: straightLine.endPath, end: endPosition, mode: 'vertical', id: '6a ' + directionStartY });
             return;
         }
-        const end = { x: (coordQ1.x ?? 0), y: coordQ1.y ?? 0 };
+        const end = { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 };
         separatedPoints.push(...pathHorizontal);
         separatedPoints.push({ start: straightLine.endPath, end: end, mode: 'vertical-single-curve', id: '6a ' + directionStartY }); // góc cong từ đường thẳng sang ngang
         if (endPath.x === endPosition.x && endPath.y < endPosition.y) {
-            const itemLast = pathHorizontal.find(item => item.end.x === endPath.x);
+            const itemLast = pathHorizontal.find((item) => item.end.x === endPath.x);
             if (itemLast) {
                 itemLast.end.x = endPosition.x + 50;
                 endPath.x = itemLast.end.x;
@@ -452,25 +452,25 @@ class MoCanvasConnectNavigationBottomLeftElementUtil {
     static rightLeft(elementNext, start, lineCurve, obstacleRect, separatedPoints) {
         const endPosition = {
             x: elementNext.x,
-            y: elementNext.y
+            y: elementNext.y,
         };
         // vẽ 1 đường thẳng từ điểm start ra ngoài đã
         const end = { x: (start.x ?? 0) + 10, y: (start.y ?? 0) + 10 };
-        separatedPoints.push({ start: { x: (start.x ?? 0), y: start.y ?? 0 }, end: end, mode: 'vertical-single-curve', id: '1' });
+        separatedPoints.push({ start: { x: start.x ?? 0, y: start.y ?? 0 }, end: end, mode: 'vertical-single-curve', id: '1' });
         const endPositionX = cloneDeep(endPosition);
         endPositionX.x -= 50;
         let separatedPointsCheckAndAvoidBlocks = [];
-        let { endPath } = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocks(end.x ?? 0, (end.y ?? 0), lineCurve, endPositionX, obstacleRect, separatedPointsCheckAndAvoidBlocks);
+        let { endPath } = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocks(end.x ?? 0, end.y ?? 0, lineCurve, endPositionX, obstacleRect, separatedPointsCheckAndAvoidBlocks);
         if (Math.abs((start.x ?? 0) - endPosition.x) < 10 || end.x > endPath.x) {
             endPath = {
                 x: end.x,
-                y: end.y
+                y: end.y,
             };
             separatedPointsCheckAndAvoidBlocks = [];
         }
         if (Math.abs((endPath.y ?? 0) - endPosition.y) < 15) {
-            const element = separatedPointsCheckAndAvoidBlocks.find(item => (item.end.y === endPath.y && item.end.x === endPath.x));
-            const elementQR = separatedPointsCheckAndAvoidBlocks.find(item => (item.end.y === element?.start.y && item.end.x === element.start.x));
+            const element = separatedPointsCheckAndAvoidBlocks.find((item) => item.end.y === endPath.y && item.end.x === endPath.x);
+            const elementQR = separatedPointsCheckAndAvoidBlocks.find((item) => item.end.y === element?.start.y && item.end.x === element.start.x);
             if (element) {
                 element.start.y = endPosition.y;
                 element.end.y = endPosition.y;
@@ -493,7 +493,7 @@ class MoCanvasConnectNavigationBottomLeftElementUtil {
         const coordQ1 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: endPath.x ?? 0, y: endPath.y ?? 0 }, `right-${directionY === 'above' ? 'above' : 'under'}`, lineCurve, lineCurve); // tính đoạn cong từ đường ngang sang đường thẳng
         const endPositionY = cloneDeep(endPosition);
         endPositionY.y = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionY, endPositionY.y, lineCurve);
-        separatedPoints.push({ start: { x: endPath.x ?? 0, y: endPath.y }, end: { x: coordQ1.x ?? 0, y: (coordQ1.y ?? 0) }, mode: 'horizontal-single-curve', id: 'g' });
+        separatedPoints.push({ start: { x: endPath.x ?? 0, y: endPath.y }, end: { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 }, mode: 'horizontal-single-curve', id: 'g' });
         let avoidBlocksYLine = [];
         const straightLine = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksY(coordQ1.x ?? 0, coordQ1.y ?? 0, lineCurve, endPositionY, directionY, obstacleRect, avoidBlocksYLine);
         if (directionY === 'under' && (coordQ1.y ?? 0) > endPositionY.y) {
@@ -505,8 +505,8 @@ class MoCanvasConnectNavigationBottomLeftElementUtil {
             straightLine.endPath = { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 };
         }
         if (Math.abs((straightLine.endPath.x ?? 0) - endPosition.x) < 15) {
-            const elements = avoidBlocksYLine.filter(item => item.start.x === straightLine.endPath.x || item.end.x === straightLine.endPath.x);
-            elements.forEach(item => {
+            const elements = avoidBlocksYLine.filter((item) => item.start.x === straightLine.endPath.x || item.end.x === straightLine.endPath.x);
+            elements.forEach((item) => {
                 if (item.start.x === straightLine.endPath.x) {
                     item.start.x += 30;
                 }
@@ -530,12 +530,14 @@ class MoCanvasConnectNavigationNewElementUtil {
     static drawLineConnect(elementFrom, elementNext, obstacleRect, separatedPoints, curve) {
         let start_x = (elementFrom.x ?? 0) + (elementFrom.width ?? 0); // điểm out luôn ở phía bên phải
         let start_y = (elementFrom.y ?? 0) + (elementFrom.height ?? 0) / 2; // điểm out luôn ở phía bên phải
-        if (MoCanvasConnectNavigationNewElementUtil.START_MODE === 'bottom-top') { // điểm out luôn ở phía bên dưới
-            start_x = (elementFrom.x ?? 0) + ((elementFrom.width ?? 0) / 2);
+        if (MoCanvasConnectNavigationNewElementUtil.START_MODE === 'bottom-top') {
+            // điểm out luôn ở phía bên dưới
+            start_x = (elementFrom.x ?? 0) + (elementFrom.width ?? 0) / 2;
             start_y = (elementFrom.y ?? 0) + (elementFrom.height ?? 0);
         }
-        if (MoCanvasConnectNavigationNewElementUtil.START_MODE === 'bottom-left') { // điểm out luôn ở phía bên dưới
-            start_x = (elementFrom.x ?? 0) + ((elementFrom.width ?? 0) / 2);
+        if (MoCanvasConnectNavigationNewElementUtil.START_MODE === 'bottom-left') {
+            // điểm out luôn ở phía bên dưới
+            start_x = (elementFrom.x ?? 0) + (elementFrom.width ?? 0) / 2;
             start_y = (elementFrom.y ?? 0) + (elementFrom.height ?? 0);
         }
         const M_start = { x: start_x, y: start_y };
@@ -567,8 +569,8 @@ class MoCanvasConnectNavigationNewElementUtil {
     }
     static lineConnectRight(elementNext, start, lineCurve, obstacleRect, separatedPoints) {
         const endPosition = {
-            x: (elementNext.x ?? 0) - (lineCurve * 3),
-            y: (elementNext.y ?? 0) + (elementNext.height ?? 0) / 2
+            x: (elementNext.x ?? 0) - lineCurve * 3,
+            y: (elementNext.y ?? 0) + (elementNext.height ?? 0) / 2,
         };
         const endPositionX = cloneDeep(endPosition);
         let separatedPointsCheckAndAvoidBlocks = [];
@@ -577,7 +579,7 @@ class MoCanvasConnectNavigationNewElementUtil {
             path = '';
             endPath = {
                 x: start.x,
-                y: start.y
+                y: start.y,
             };
             separatedPointsCheckAndAvoidBlocks = [];
         }
@@ -589,7 +591,7 @@ class MoCanvasConnectNavigationNewElementUtil {
             separatedPoints.push({ start: endPath, end: LEnd, mode: 'horizontal', id: 'f' });
             return {
                 dPath: `${path} L ${LEnd.x} ${LEnd.y}`,
-                endPath: LEnd
+                endPath: LEnd,
             };
         }
         let lineCurveSubY = lineCurve;
@@ -618,21 +620,21 @@ class MoCanvasConnectNavigationNewElementUtil {
         const lineClose = this.closeLine({ x: coordQ2.x ?? 0, y: coordQ2.y ?? 0 }, endPosition, lineCurve, elementNext, separatedPoints);
         return {
             dPath: `${path} ${pathQ1} ${straightLine.path} ${pathQ2} ${lineClose}`,
-            endPath: straightLine.endPath
+            endPath: straightLine.endPath,
         };
     }
     static lineConnectLeft(elementNext, elementFrom, start, lineCurve, obstacleRect, separatedPoints) {
         const endPositionOrigin = {
-            x: (elementNext.x ?? 0) - (lineCurve * 1.5),
-            y: (elementNext.y ?? 0) + (elementNext.height ?? 0) / 2
+            x: (elementNext.x ?? 0) - lineCurve * 1.5,
+            y: (elementNext.y ?? 0) + (elementNext.height ?? 0) / 2,
         };
         const endPosition = cloneDeep(endPositionOrigin);
         const directionStartY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(start.y, endPositionOrigin.y, 'y');
-        const endY = (directionStartY === 'under' || directionStartY === 'center') ? (elementNext.y ?? 0) : (elementNext.y ?? 0) + (elementNext.height ?? 0);
-        endPosition.y = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartY, endY, (lineCurve * 2));
+        const endY = directionStartY === 'under' || directionStartY === 'center' ? (elementNext.y ?? 0) : (elementNext.y ?? 0) + (elementNext.height ?? 0);
+        endPosition.y = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartY, endY, lineCurve * 2);
         const pathQ = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: (start.x ?? 0) + 10, y: start.y ?? 0 }, `right-${directionStartY === 'under' ? 'under' : 'above'}`, lineCurve, lineCurve);
-        const startQL = { lx: pathQ.x, ly: MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartY, (pathQ.y ?? 0), ((elementFrom.height ?? 0) / 2), true) };
-        separatedPoints.push({ start: { x: (start.x ?? 0), y: start.y ?? 0 }, end: { x: pathQ.x ?? 0, y: pathQ.y ?? 0 }, mode: 'horizontal-single-curve', id: '1' });
+        const startQL = { lx: pathQ.x, ly: MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartY, pathQ.y ?? 0, (elementFrom.height ?? 0) / 2, true) };
+        separatedPoints.push({ start: { x: start.x ?? 0, y: start.y ?? 0 }, end: { x: pathQ.x ?? 0, y: pathQ.y ?? 0 }, mode: 'horizontal-single-curve', id: '1' });
         separatedPoints.push({ start: { x: pathQ.x ?? 0, y: pathQ.y ?? 0 }, end: { x: startQL.lx ?? 0, y: startQL.ly }, mode: 'horizontal', id: '2' });
         if (directionStartY === 'center') {
             const coordQ1 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: startQL.lx ?? 0, y: startQL.ly ?? 0 }, `above-left`, lineCurve, lineCurve); // tính đoạn cong từ đường ngang sang đường thẳng
@@ -653,7 +655,7 @@ class MoCanvasConnectNavigationNewElementUtil {
         if ((directionStartY === 'under' && startQL.ly > endPosition.y) || (directionStartY === 'above' && startQL.ly < endPosition.y) || startQL.ly === endPosition.y) {
             let condition = true;
             while (condition) {
-                const checkAndAvoidBlocksYLeft = separatedPoints.findIndex(item => item.id === "checkAndAvoidBlocksYLeft");
+                const checkAndAvoidBlocksYLeft = separatedPoints.findIndex((item) => item.id === 'checkAndAvoidBlocksYLeft');
                 if (checkAndAvoidBlocksYLeft !== -1) {
                     separatedPoints.splice(checkAndAvoidBlocksYLeft, 1);
                 }
@@ -664,7 +666,7 @@ class MoCanvasConnectNavigationNewElementUtil {
             straightLine.path = '';
             straightLine.endPath = {
                 x: startQL.lx ?? 0,
-                y: startQL.ly ?? 0
+                y: startQL.ly ?? 0,
             };
         }
         if (endPosition.x === straightLine.endPath.x) {
@@ -677,7 +679,7 @@ class MoCanvasConnectNavigationNewElementUtil {
         const directionNextX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(straightLine.endPath.x ?? 0, endPositionOrigin.x, 'x');
         const coordQ1 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: straightLine.endPath.x ?? 0, y: straightLine.endPath.y ?? 0 }, `${directionStartY}-${directionNextX}`, lineCurve, lineCurve); // tính đoạn cong từ đường ngang sang đường thẳng
         const elementBlockRoadX = (elementBlockRoad?.x ?? 0) + (elementBlockRoad?.width ?? 0);
-        if (elementBlockRoad && Math.abs((elementBlockRoadX) - (straightLine.endPath.x ?? 0)) <= lineCurve * 2) {
+        if (elementBlockRoad && Math.abs(elementBlockRoadX - (straightLine.endPath.x ?? 0)) <= lineCurve * 2) {
             coordQ1.x1 = straightLine.endPath.x ?? 0;
             coordQ1.y1 = straightLine.endPath.y ?? 0;
             coordQ1.x = straightLine.endPath.x ?? 0;
@@ -703,7 +705,7 @@ class MoCanvasConnectNavigationNewElementUtil {
         const line = { x: start.x, y: start.y };
         const endPoint = {
             x: elementNext.x,
-            y: end.y
+            y: end.y,
         };
         let pathQ1 = '';
         if (Math.abs(start.y - end.y) > lineCurve) {
@@ -724,23 +726,23 @@ class MoCanvasConnectNavigationNewElementUtil {
     static lineConnectLeftWithBottomStart(elementNext, elementFrom, start, lineCurve, obstacleRect, separatedPoints) {
         const endPositionOrigin = {
             x: (elementNext.x ?? 0) + (elementNext.width ?? 0) / 2,
-            y: (elementNext.y ?? 0) - (lineCurve)
+            y: (elementNext.y ?? 0) - lineCurve,
         };
         const endPosition = cloneDeep(endPositionOrigin);
         const directionStartY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(start.y, endPositionOrigin.y, 'y');
-        const endY = (elementNext.y ?? 0);
+        const endY = elementNext.y ?? 0;
         console.log('directionStartY', directionStartY);
         if (directionStartY === 'under') {
-            endPosition.y = endY - (lineCurve * 3);
+            endPosition.y = endY - lineCurve * 3;
         }
         const startQL = { lx: start.x, ly: (start.y ?? 0) + lineCurve };
         const line = {
-            start: { x: (start.x ?? 0), y: start.y ?? 0 },
-            end: { x: startQL.lx ?? 0, y: startQL.ly ?? 0 }
+            start: { x: start.x ?? 0, y: start.y ?? 0 },
+            end: { x: startQL.lx ?? 0, y: startQL.ly ?? 0 },
         };
-        const newEnd = { x: elementFrom.x - (lineCurve * 2), y: line.end.y - lineCurve };
+        const newEnd = { x: elementFrom.x - lineCurve * 2, y: line.end.y - lineCurve };
         if (directionStartY === 'above') {
-            line.end = { x: (start.x ?? 0) - lineCurve, y: (start.y ?? 0) + (lineCurve * 2) };
+            line.end = { x: (start.x ?? 0) - lineCurve, y: (start.y ?? 0) + lineCurve * 2 };
             separatedPoints.push({ start: line.end, end: newEnd, mode: 'horizontal-single-curve', id: '1' });
         }
         separatedPoints.push({ start: line.start, end: line.end, mode: 'vertical-single-curve', id: '1' }); // line vẽ đi khỏi khối đầu tiên
@@ -765,13 +767,13 @@ class MoCanvasConnectNavigationNewElementUtil {
         if (directionStartX === 'center' && directionStartY === 'under') {
             this.closeLineWithLineTopBottom({ x: straightLine.endPath.x ?? 0, y: straightLine.endPath.y ?? 0 }, endPositionOrigin, lineCurve, elementNext, separatedPoints);
             return {
-                dPath: ``
+                dPath: ``,
             };
         }
         if ((directionStartY === 'under' && startQL.ly > endPosition.y) || (directionStartY === 'above' && startQL.ly < endPosition.y) || startQL.ly === endPosition.y) {
             let condition = true;
             while (condition) {
-                const checkAndAvoidBlocksYLeft = separatedPoints.findIndex(item => item.id === "checkAndAvoidBlocksYLeft");
+                const checkAndAvoidBlocksYLeft = separatedPoints.findIndex((item) => item.id === 'checkAndAvoidBlocksYLeft');
                 if (checkAndAvoidBlocksYLeft !== -1) {
                     separatedPoints.splice(checkAndAvoidBlocksYLeft, 1);
                 }
@@ -782,7 +784,7 @@ class MoCanvasConnectNavigationNewElementUtil {
             straightLine.path = '';
             straightLine.endPath = {
                 x: startQL.lx ?? 0,
-                y: startQL.ly ?? 0
+                y: startQL.ly ?? 0,
             };
         }
         // kiểm tra ngay khi cua có vướng ai không rồi hẵng vẽ Q1
@@ -790,7 +792,7 @@ class MoCanvasConnectNavigationNewElementUtil {
         const directionNextX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(straightLine.endPath.x ?? 0, endPositionOrigin.x, 'x');
         const coordQ1 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: straightLine.endPath.x ?? 0, y: straightLine.endPath.y ?? 0 }, `${directionStartY}-${directionNextX}`, lineCurve, lineCurve); // tính đoạn cong từ đường ngang sang đường thẳng
         const elementBlockRoadX = (elementBlockRoad?.x ?? 0) + (elementBlockRoad?.width ?? 0);
-        if (elementBlockRoad && Math.abs((elementBlockRoadX) - (straightLine.endPath.x ?? 0)) <= lineCurve * 2) {
+        if (elementBlockRoad && Math.abs(elementBlockRoadX - (straightLine.endPath.x ?? 0)) <= lineCurve * 2) {
             coordQ1.x1 = straightLine.endPath.x ?? 0;
             coordQ1.y1 = straightLine.endPath.y ?? 0;
             coordQ1.x = straightLine.endPath.x ?? 0;
@@ -810,7 +812,7 @@ class MoCanvasConnectNavigationNewElementUtil {
             return;
         }
         separatedPoints.push(...pathHorizontal);
-        separatedPoints.push({ start: straightLine.endPath, end: { x: (coordQ1.x ?? 0 - 10), y: coordQ1.y ?? 0 }, mode: 'vertical-single-curve', id: '6a ' + directionStartY });
+        separatedPoints.push({ start: straightLine.endPath, end: { x: coordQ1.x ?? 0 - 10, y: coordQ1.y ?? 0 }, mode: 'vertical-single-curve', id: '6a ' + directionStartY });
         this.closeLineWithLineTopBottom({ x: endPath.x ?? 0, y: endPath.y ?? 0 }, endPositionOrigin, lineCurve, elementNext, separatedPoints);
         return {
             dPath: ``,
@@ -825,7 +827,7 @@ class MoCanvasConnectNavigationNewElementUtil {
         const line = { x: start.x, y: start.y };
         const endPoint = {
             x: end.x,
-            y: elementNext.y
+            y: elementNext.y,
         };
         const pathQ1 = '';
         if (Math.abs(start.x - end.x) > lineCurve) {
@@ -842,20 +844,20 @@ class MoCanvasConnectNavigationNewElementUtil {
     static lineConnectRightWithBottomStart(elementNext, start, lineCurve, obstacleRect, separatedPoints) {
         const endPosition = {
             x: (elementNext.x ?? 0) + (elementNext.width ?? 0) / 2,
-            y: (elementNext.y ?? 0) - (lineCurve)
+            y: (elementNext.y ?? 0) - lineCurve,
         };
         // vẽ 1 đường thẳng từ điểm start ra ngoài đã
         const end = { x: (start.x ?? 0) + 10, y: (start.y ?? 0) + 20 };
-        separatedPoints.push({ start: { x: (start.x ?? 0), y: start.y ?? 0 }, end: end, mode: 'vertical-single-curve', id: '1' });
+        separatedPoints.push({ start: { x: start.x ?? 0, y: start.y ?? 0 }, end: end, mode: 'vertical-single-curve', id: '1' });
         const endPositionX = cloneDeep(endPosition);
         endPositionX.x -= 10;
         let separatedPointsCheckAndAvoidBlocks = [];
-        let { path, endPath } = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocks(end.x ?? 0, (end.y ?? 0), lineCurve, endPositionX, obstacleRect, separatedPointsCheckAndAvoidBlocks);
+        let { path, endPath } = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocks(end.x ?? 0, end.y ?? 0, lineCurve, endPositionX, obstacleRect, separatedPointsCheckAndAvoidBlocks);
         if (Math.abs((start.x ?? 0) - endPosition.x) < 10) {
             path = '';
             endPath = {
                 x: start.x,
-                y: start.y
+                y: start.y,
             };
             separatedPointsCheckAndAvoidBlocks = [];
         }
@@ -869,7 +871,7 @@ class MoCanvasConnectNavigationNewElementUtil {
             this.closeLineWithLineTopBottom(LEnd, endPosition, lineCurve, elementNext, separatedPoints);
             return {
                 dPath: `${path} L ${LEnd.x} ${LEnd.y}`,
-                endPath: LEnd
+                endPath: LEnd,
             };
         }
         const coordQ1 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: endPath.x ?? 0, y: endPath.y ?? 0 }, `right-${directionY === 'above' ? 'above' : 'under'}`, lineCurve, lineCurve); // tính đoạn cong từ đường ngang sang đường thẳng
@@ -880,7 +882,7 @@ class MoCanvasConnectNavigationNewElementUtil {
         if (elementBlockRoadStraightLineY) {
             coordQ1.x = (elementBlockRoadStraightLineY.x ?? 0) + (elementBlockRoadStraightLineY.width ?? 0) + lineCurve;
         }
-        separatedPoints.push({ start: { x: endPath.x ?? 0, y: endPath.y }, end: { x: coordQ1.x ?? 0, y: (coordQ1.y ?? 0) }, mode: 'horizontal-single-curve', id: 'g' });
+        separatedPoints.push({ start: { x: endPath.x ?? 0, y: endPath.y }, end: { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 }, mode: 'horizontal-single-curve', id: 'g' });
         let avoidBlocksYLine = [];
         const straightLine = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksY(coordQ1.x ?? 0, coordQ1.y ?? 0, lineCurve, endPositionY, directionY, obstacleRect, avoidBlocksYLine);
         if (directionY === 'under' && (coordQ1.y ?? 0) > endPositionY.y) {
@@ -910,20 +912,23 @@ class LibsUiComponentsDrawLineDirective {
     outDrawLineFunctionControl = new EventEmitter();
     outConnected = new EventEmitter();
     ngAfterViewInit() {
-        this.svgElement = this.svgElement || document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        this.svgElement = this.svgElement || document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         this.elementRef.nativeElement.append(this.svgElement);
-        this.outDrawLineFunctionControl.emit({
+        this.outDrawLineFunctionControl.emit(this.FunctionsControl);
+    }
+    get FunctionsControl() {
+        return {
             setData: this.setData.bind(this),
             setReachablePointRange: this.setReachablePointRange.bind(this),
             removeLine: this.removeLine.bind(this),
             removeReachablePointRange: this.removeReachablePointRange.bind(this),
-            updateViewBox: this.updateViewBox.bind(this)
-        });
+            updateViewBox: this.updateViewBox.bind(this),
+        };
     }
     setData(data) {
         const newData = [];
-        data.forEach(item => {
-            if (this.dataDraw.find(dataDraw => dataDraw.id === item.id && item.points.start.x === dataDraw.points.start.x && item.points.start.y === dataDraw.points.start.y && item.points.end.x === dataDraw.points.end.x && item.points.end.y === dataDraw.points.end.y)) {
+        data.forEach((item) => {
+            if (this.dataDraw.find((dataDraw) => dataDraw.id === item.id && item.points.start.x === dataDraw.points.start.x && item.points.start.y === dataDraw.points.start.y && item.points.end.x === dataDraw.points.end.x && item.points.end.y === dataDraw.points.end.y)) {
                 return;
             }
             const itemClone = cloneDeep(item);
@@ -935,8 +940,8 @@ class LibsUiComponentsDrawLineDirective {
     }
     setReachablePointRange(data) {
         const newData = [];
-        data.forEach(item => {
-            if (this.dataReachablePointRange.find(dataDraw => dataDraw.id === item.id || item.x === dataDraw.x && item.y === dataDraw.y)) {
+        data.forEach((item) => {
+            if (this.dataReachablePointRange.find((dataDraw) => dataDraw.id === item.id || (item.x === dataDraw.x && item.y === dataDraw.y))) {
                 return;
             }
             const itemClone = cloneDeep(item);
@@ -947,26 +952,26 @@ class LibsUiComponentsDrawLineDirective {
         this.startProcessDataReachablePointRange(newData);
     }
     removeLine(id, points) {
-        const dataDrawById = this.dataDraw.filter(item => item.id === id);
+        const dataDrawById = this.dataDraw.filter((item) => item.id === id);
         if (!dataDrawById?.length) {
             return;
         }
         const removeByItem = (item) => {
             this.removeElementOfPoints(item.points);
-            item.points.separatedPoints?.forEach(separatedPoints => this.removeElementOfPoints(separatedPoints));
+            item.points.separatedPoints?.forEach((separatedPoints) => this.removeElementOfPoints(separatedPoints));
         };
         if (!points?.length) {
-            dataDrawById.forEach(item => removeByItem(item));
-            this.dataDraw = this.dataDraw.filter(item => item.id !== id);
+            dataDrawById.forEach((item) => removeByItem(item));
+            this.dataDraw = this.dataDraw.filter((item) => item.id !== id);
             this.updateViewBox();
             return;
         }
-        points.forEach(point => {
-            const dataDrawRemoveByPoint = dataDrawById.find(item => item.points.start.x === point.start.x && item.points.start.y === point.start.y && item.points.end.x === point.end.x && item.points.end.y === point.end.y);
+        points.forEach((point) => {
+            const dataDrawRemoveByPoint = dataDrawById.find((item) => item.points.start.x === point.start.x && item.points.start.y === point.start.y && item.points.end.x === point.end.x && item.points.end.y === point.end.y);
             if (dataDrawRemoveByPoint) {
                 dataDrawRemoveByPoint.isRemove = true;
                 removeByItem(dataDrawRemoveByPoint);
-                this.dataDraw = this.dataDraw.filter(item => item.id !== id && !item.isRemove);
+                this.dataDraw = this.dataDraw.filter((item) => item.id !== id && !item.isRemove);
             }
         });
         this.updateViewBox();
@@ -976,21 +981,21 @@ class LibsUiComponentsDrawLineDirective {
         if (!ids.length) {
             return;
         }
-        ids.forEach(id => {
-            const itemRemove = this.dataReachablePointRange?.find(item => item.id === id);
+        ids.forEach((id) => {
+            const itemRemove = this.dataReachablePointRange?.find((item) => item.id === id);
             if (!itemRemove) {
                 return;
             }
             itemRemove.onDestroyEvent?.next();
             itemRemove.element?.remove();
-            this.dataReachablePointRange = this.dataReachablePointRange?.filter(item => item.id !== id);
+            this.dataReachablePointRange = this.dataReachablePointRange?.filter((item) => item.id !== id);
         });
     }
     startProcessDataRow(dataDraw) {
         this.zone.runOutsideAngular(() => {
-            dataDraw.forEach(item => {
+            dataDraw.forEach((item) => {
                 const { pathElement, arrowElement, circleStartElement, circleEndElement } = this.createPathAndArrowElement(item.id);
-                item.points.obstacleRect?.forEach(data => this.addRect('rect', data));
+                item.points.obstacleRect?.forEach((data) => this.addRect('rect', data));
                 item.points.pathElement = pathElement;
                 item.points.arrowElement = arrowElement;
                 if (item.startCircle) {
@@ -1009,12 +1014,12 @@ class LibsUiComponentsDrawLineDirective {
     }
     startProcessDataReachablePointRange(data) {
         this.zone.runOutsideAngular(() => {
-            data.forEach(item => {
+            data.forEach((item) => {
                 item.onDestroyEvent = new Subject();
                 item.element = this.createPathAndArrowElement(item.id).circleEndElement;
                 this.svgElement.append(item.element);
                 this.updateAttributeCircle(item.element, item.id, item, item.style);
-                this.onDrawLineEnd.pipe(takeUntil(item.onDestroyEvent), takeUntil(this.onDestroy)).subscribe(eventData => {
+                this.onDrawLineEnd.pipe(takeUntil(item.onDestroyEvent), takeUntil(this.onDestroy)).subscribe((eventData) => {
                     const { dataLine, event } = eventData;
                     if (!checkMouseOverInContainer(event, item.element) || !dataLine.ref || !item.ref) {
                         return;
@@ -1023,7 +1028,7 @@ class LibsUiComponentsDrawLineDirective {
                     eventData.dataLine.idConnected = item.id;
                     this.outConnected.emit({
                         dataLine: dataLine.ref,
-                        dataReachablePointRange: item.ref
+                        dataReachablePointRange: item.ref,
                     });
                 });
             });
@@ -1048,7 +1053,7 @@ class LibsUiComponentsDrawLineDirective {
                 curve = curve ?? 10;
             }
             const preLengthSeparatedPoints = points.separatedPoints?.length;
-            points.separatedPoints?.forEach(separatedPoints => this.removeElementOfPoints(separatedPoints));
+            points.separatedPoints?.forEach((separatedPoints) => this.removeElementOfPoints(separatedPoints));
             points.separatedPoints = [];
             MoCanvasConnectNavigationNewElementUtil.START_MODE = 'right-left';
             if (data.startEndMode) {
@@ -1067,10 +1072,10 @@ class LibsUiComponentsDrawLineDirective {
                 return;
             }
             let path = '';
-            points.separatedPoints.forEach(separatedPoints => {
+            points.separatedPoints.forEach((separatedPoints) => {
                 path += this.buildPathAndDrawSeparatedPoints(data, separatedPoints, separatedPoints.mode || mode);
             });
-            const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
             this.svgElement.append(pathElement);
             points.pathElement = pathElement;
             const styleConfig = {
@@ -1079,7 +1084,7 @@ class LibsUiComponentsDrawLineDirective {
                 strokeWidth: data.lineStyle?.strokeWidth ?? '1px',
                 fill: data.lineStyle?.fill ?? 'none',
                 curve: data.lineStyle?.curve ?? 10,
-                distancePoint: data.lineStyle?.distancePoint ?? 10
+                distancePoint: data.lineStyle?.distancePoint ?? 10,
             };
             points.pathElement?.setAttribute('stroke', styleConfig.stroke);
             points.pathElement?.setAttribute('fill', styleConfig.fill);
@@ -1103,14 +1108,14 @@ class LibsUiComponentsDrawLineDirective {
             yPoints.add(points.start.y);
             yPoints.add(points.end.y);
         };
-        this.dataDraw?.forEach(item => {
+        this.dataDraw?.forEach((item) => {
             const points = item.points;
             addPoints(points);
-            points.separatedPoints?.forEach(separatedPoints => addPoints(separatedPoints));
-            points.obstacleRect?.forEach(obstacleRect => {
+            points.separatedPoints?.forEach((separatedPoints) => addPoints(separatedPoints));
+            points.obstacleRect?.forEach((obstacleRect) => {
                 addPoints({
                     start: { x: obstacleRect.x - (obstacleRect.gapXObstacleRect || 8), y: obstacleRect.y - (obstacleRect.gapYObstacleRect || 8) },
-                    end: { x: obstacleRect.x + obstacleRect.width + (obstacleRect.gapXObstacleRect || 8) * 2, y: obstacleRect.y + obstacleRect.height + (obstacleRect.gapYObstacleRect || 8) * 2 }
+                    end: { x: obstacleRect.x + obstacleRect.width + (obstacleRect.gapXObstacleRect || 8) * 2, y: obstacleRect.y + obstacleRect.height + (obstacleRect.gapYObstacleRect || 8) * 2 },
                 });
             });
         });
@@ -1132,8 +1137,8 @@ class LibsUiComponentsDrawLineDirective {
         if (!obstacleRects.length) {
             return;
         }
-        const elementStart = obstacleRects.find(item => this.isPointInsideSquare(points.start, item));
-        const elementEnd = obstacleRects.find(item => this.isPointInsideSquare(points.end, item));
+        const elementStart = obstacleRects.find((item) => this.isPointInsideSquare(points.start, item));
+        const elementEnd = obstacleRects.find((item) => this.isPointInsideSquare(points.end, item));
         if (this.viewBoxConfig?.marginBetweenElement) {
             MoCanvasConnectNavigationNewElementUtil.ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT = this.viewBoxConfig?.marginBetweenElement ?? 32;
         }
@@ -1147,7 +1152,7 @@ class LibsUiComponentsDrawLineDirective {
             strokeWidth: data.lineStyle?.strokeWidth ?? '1px',
             fill: data.lineStyle?.fill ?? 'none',
             curve: data.lineStyle?.curve ?? 10,
-            distancePoint: data.lineStyle?.distancePoint ?? 10
+            distancePoint: data.lineStyle?.distancePoint ?? 10,
         };
         points.pathElement?.setAttribute('stroke', styleConfig.stroke);
         points.pathElement?.setAttribute('fill', styleConfig.fill);
@@ -1156,7 +1161,7 @@ class LibsUiComponentsDrawLineDirective {
             points.pathElement?.setAttribute('stroke-dasharray', styleConfig.strokeDasharray);
         }
         let { curve, distancePoint } = styleConfig;
-        mode = mode || "quart-in";
+        mode = mode || 'quart-in';
         if (mode !== 'quart-in') {
             curve = curve ?? 10;
             distancePoint = distancePoint ?? 10;
@@ -1180,7 +1185,7 @@ class LibsUiComponentsDrawLineDirective {
         this.drawRectAndInitEvent(data, mode);
     }
     calculatorDistancePointAndCurve(points, distancePoint, curve, mode) {
-        if ((!mode.includes('vertical') && !mode.includes('horizontal'))) {
+        if (!mode.includes('vertical') && !mode.includes('horizontal')) {
             return { curve, distancePoint };
         }
         const gapX = Math.abs(points.start.x - points.end.x);
@@ -1218,15 +1223,25 @@ class LibsUiComponentsDrawLineDirective {
     }
     drawBalancedCurve(dPath, points) {
         dPath.M = { x: points.start.x, y: points.start.y };
-        dPath.Q = [{ x: points.start.x + (points.end.x - points.start.x) / 4, y: points.start.y + (points.end.y - points.start.y) / 2 }, { x: points.start.x + (points.end.x - points.start.x) / 2, y: points.start.y + (points.end.y - points.start.y) / 2 }];
-        dPath.Q2 = [{ x: points.end.x - (points.end.x - points.start.x) / 4, y: points.start.y + (points.end.y - points.start.y) / 2 }, { x: points.end.x, y: points.end.y }];
+        dPath.Q = [
+            { x: points.start.x + (points.end.x - points.start.x) / 4, y: points.start.y + (points.end.y - points.start.y) / 2 },
+            { x: points.start.x + (points.end.x - points.start.x) / 2, y: points.start.y + (points.end.y - points.start.y) / 2 },
+        ];
+        dPath.Q2 = [
+            { x: points.end.x - (points.end.x - points.start.x) / 4, y: points.start.y + (points.end.y - points.start.y) / 2 },
+            { x: points.end.x, y: points.end.y },
+        ];
     }
     drawBendBothEndsCurve(dPath, points) {
         const pointXCurve = (points.start.x + points.end.x) * 0.5;
         const pointControl1 = { x: pointXCurve, y: points.start.y };
         const pointControl2 = { x: pointXCurve, y: points.end.y };
         dPath.M = { x: points.start.x, y: points.start.y };
-        dPath.C = [{ x: pointControl1.x, y: pointControl1.y }, { x: pointControl2.x, y: pointControl2.y }, { x: points.end.x, y: points.end.y }];
+        dPath.C = [
+            { x: pointControl1.x, y: pointControl1.y },
+            { x: pointControl2.x, y: pointControl2.y },
+            { x: points.end.x, y: points.end.y },
+        ];
     }
     buildDAttributeByPointEndModeHorizontal(dPath, points, distancePoint, curve, mode) {
         if (!mode.includes('horizontal')) {
@@ -1236,17 +1251,23 @@ class LibsUiComponentsDrawLineDirective {
         const multiplierY = points.start.y < points.end.y ? 1 : -1;
         const reverseMultiplier = -1;
         dPath.M = { x: points.start.x, y: points.start.y };
-        dPath.L = { x: points.end.x + ((distancePoint * 2 + curve) * multiplierX), y: points.start.y };
+        dPath.L = { x: points.end.x + (distancePoint * 2 + curve) * multiplierX, y: points.start.y };
         if (mode.includes('horizontal-single')) {
-            dPath.L.x = points.end.x + (curve * multiplierX);
+            dPath.L.x = points.end.x + curve * multiplierX;
         }
-        dPath.Q = [{ x: dPath.L.x + (curve * multiplierX * reverseMultiplier), y: points.start.y }, { x: dPath.L.x + (curve * multiplierX * reverseMultiplier), y: points.start.y + (curve * multiplierY) }];
-        dPath.L2 = { x: dPath.Q[1].x, y: points.end.y + (curve * multiplierY * reverseMultiplier) };
+        dPath.Q = [
+            { x: dPath.L.x + curve * multiplierX * reverseMultiplier, y: points.start.y },
+            { x: dPath.L.x + curve * multiplierX * reverseMultiplier, y: points.start.y + curve * multiplierY },
+        ];
+        dPath.L2 = { x: dPath.Q[1].x, y: points.end.y + curve * multiplierY * reverseMultiplier };
         if (mode.includes('horizontal-single')) {
             dPath.L2 = points.end;
         }
         if (mode === 'horizontal') {
-            dPath.Q2 = [{ x: dPath.L2.x, y: points.end.y }, { x: dPath.L2.x + (distancePoint * multiplierX * reverseMultiplier), y: points.end.y }];
+            dPath.Q2 = [
+                { x: dPath.L2.x, y: points.end.y },
+                { x: dPath.L2.x + distancePoint * multiplierX * reverseMultiplier, y: points.end.y },
+            ];
             dPath.L3 = { x: points.end.x, y: points.end.y };
         }
     }
@@ -1258,23 +1279,29 @@ class LibsUiComponentsDrawLineDirective {
         const multiplierY = points.start.y < points.end.y ? 1 : -1;
         const reverseMultiplier = -1;
         dPath.M = points.start;
-        dPath.L = { x: points.start.x, y: points.start.y + (distancePoint * multiplierY) };
+        dPath.L = { x: points.start.x, y: points.start.y + distancePoint * multiplierY };
         if (mode.includes('vertical-single')) {
-            dPath.L.y = points.end.y + (distancePoint * multiplierY * reverseMultiplier);
+            dPath.L.y = points.end.y + distancePoint * multiplierY * reverseMultiplier;
         }
-        dPath.Q = [{ x: dPath.L.x, y: dPath.L.y + (curve * multiplierY) }, { x: dPath.L.x + (curve * multiplierX * reverseMultiplier), y: dPath.L.y + (curve * multiplierY) }];
-        dPath.L2 = { x: points.end.x + ((curve * 2) * multiplierX), y: dPath.Q[1].y };
+        dPath.Q = [
+            { x: dPath.L.x, y: dPath.L.y + curve * multiplierY },
+            { x: dPath.L.x + curve * multiplierX * reverseMultiplier, y: dPath.L.y + curve * multiplierY },
+        ];
+        dPath.L2 = { x: points.end.x + curve * 2 * multiplierX, y: dPath.Q[1].y };
         if (mode.includes('vertical-single')) {
             dPath.L2 = points.end;
         }
         if (mode === 'vertical') {
-            dPath.Q2 = [{ x: points.end.x, y: dPath.L2.y }, { x: points.end.x, y: dPath.L2.y + (curve * multiplierY) }];
+            dPath.Q2 = [
+                { x: points.end.x, y: dPath.L2.y },
+                { x: points.end.x, y: dPath.L2.y + curve * multiplierY },
+            ];
             dPath.L3 = { x: points.end.x, y: points.end.y };
         }
     }
     builDAttributeToString(dAttribute) {
         let dString = '';
-        Object.keys(dAttribute).forEach(key => {
+        Object.keys(dAttribute).forEach((key) => {
             const data = get(dAttribute, key);
             if (Array.isArray(data)) {
                 const [point1, point2, point3] = data;
@@ -1296,7 +1323,7 @@ class LibsUiComponentsDrawLineDirective {
             stroke: data.arrowStyle?.stroke ?? 'none',
             strokeWidth: data.arrowStyle?.strokeWidth ?? '0',
             width: data.arrowStyle?.width ?? 6,
-            height: data.arrowStyle?.height ?? 8
+            height: data.arrowStyle?.height ?? 8,
         };
         const pointEnd = cloneDeep(points.end);
         const arrowElement = points.arrowElement;
@@ -1344,7 +1371,7 @@ class LibsUiComponentsDrawLineDirective {
     getDirection(points, startEndMode) {
         let pointStart = { ...points.start };
         if (points.separatedPoints) {
-            const lineToEnd = points.separatedPoints.find(item => item.end.x === points.end.x && item.end.y === points.end.y);
+            const lineToEnd = points.separatedPoints.find((item) => item.end.x === points.end.x && item.end.y === points.end.y);
             if (lineToEnd) {
                 pointStart = lineToEnd.start;
             }
@@ -1389,7 +1416,7 @@ class LibsUiComponentsDrawLineDirective {
             preEvent = dragMouseEvent;
             pointEnd.x += movementX;
             pointEnd.y += movementY;
-            if (data.points?.obstacleRect?.length && data.points?.obstacleRect.some(obstacleRect => this.checkPointIncludeRect(pointEnd, obstacleRect))) {
+            if (data.points?.obstacleRect?.length && data.points?.obstacleRect.some((obstacleRect) => this.checkPointIncludeRect(pointEnd, obstacleRect))) {
                 return;
             }
             points.end.x = pointEnd.x;
@@ -1401,15 +1428,19 @@ class LibsUiComponentsDrawLineDirective {
             getDragEventByElement({
                 elementMouseDown: points.arrowElement,
                 functionMouseUp: functionMouseUp,
-                onDestroy: this.onDestroy
-            }).pipe(tap(handlerDrag), takeUntil(points.onDestroyEvent)).subscribe();
+                onDestroy: this.onDestroy,
+            })
+                .pipe(tap(handlerDrag), takeUntil(points.onDestroyEvent))
+                .subscribe();
         }
         if (points.circleEndElement) {
             getDragEventByElement({
                 elementMouseDown: points.circleEndElement,
                 functionMouseUp: functionMouseUp,
                 onDestroy: this.onDestroy,
-            }).pipe(tap(handlerDrag), takeUntil(points.onDestroyEvent)).subscribe();
+            })
+                .pipe(tap(handlerDrag), takeUntil(points.onDestroyEvent))
+                .subscribe();
         }
     }
     checkPointIncludeRect(point, obstacleRect) {
@@ -1418,18 +1449,18 @@ class LibsUiComponentsDrawLineDirective {
             x: obstacleRect.x - (obstacleRect.gapXObstacleRect || gapDefault),
             y: obstacleRect.y - (obstacleRect.gapYObstacleRect || gapDefault),
             width: obstacleRect.width + (obstacleRect.gapXObstacleRect || gapDefault) * 2,
-            height: obstacleRect.height + (obstacleRect.gapYObstacleRect || gapDefault) * 2
+            height: obstacleRect.height + (obstacleRect.gapYObstacleRect || gapDefault) * 2,
         };
-        if ((obstacleRect.x <= point.x && point.x <= obstacleRect.x + obstacleRect.width) && (obstacleRect.y <= point.y && point.y <= obstacleRect.y + obstacleRect.height)) {
+        if (obstacleRect.x <= point.x && point.x <= obstacleRect.x + obstacleRect.width && obstacleRect.y <= point.y && point.y <= obstacleRect.y + obstacleRect.height) {
             return true;
         }
         return false;
     }
     createPathAndArrowElement(name) {
-        const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        const arrowElement = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
-        const circleStartElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-        const circleEndElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        const arrowElement = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+        const circleStartElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        const circleEndElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
         pathElement.setAttribute('name', name);
         arrowElement.setAttribute('name', name);
         this.svgElement.append(pathElement);
@@ -1440,7 +1471,7 @@ class LibsUiComponentsDrawLineDirective {
         if (!this.drawRectDebug) {
             return;
         }
-        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
         circle.setAttribute('name', name);
         circle.setAttribute('cx', `${point.x}`);
         circle.setAttribute('cy', `${point.y}`);
@@ -1452,14 +1483,14 @@ class LibsUiComponentsDrawLineDirective {
         if (!this.drawRectDebug) {
             return;
         }
-        Array.from(this.svgElement.getElementsByTagName('circle'))?.forEach(item => item.remove());
+        Array.from(this.svgElement.getElementsByTagName('circle'))?.forEach((item) => item.remove());
     }
     addRect(name, rect) {
         if (!this.drawRectDebug) {
             return;
         }
-        const rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        const textElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
+        const rectElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
         rectElement.setAttribute('name', name);
         rectElement.setAttribute('x', `${rect.x}`);
         rectElement.setAttribute('y', `${rect.y}`);
@@ -1476,17 +1507,17 @@ class LibsUiComponentsDrawLineDirective {
         if (!this.drawRectDebug) {
             return;
         }
-        Array.from(this.svgElement.getElementsByTagName('rect'))?.forEach(item => item.remove());
-        Array.from(this.svgElement.getElementsByTagName('text'))?.forEach(item => item.remove());
+        Array.from(this.svgElement.getElementsByTagName('rect'))?.forEach((item) => item.remove());
+        Array.from(this.svgElement.getElementsByTagName('text'))?.forEach((item) => item.remove());
     }
     buildPathAndDrawSeparatedPoints(data, points, mode) {
         let dPath = {};
         const styleConfig = {
             curve: data.lineStyle?.curve ?? 10,
-            distancePoint: data.lineStyle?.distancePoint ?? 10
+            distancePoint: data.lineStyle?.distancePoint ?? 10,
         };
         let { curve, distancePoint } = styleConfig;
-        mode = mode || "quart-in";
+        mode = mode || 'quart-in';
         if (mode !== 'quart-in') {
             curve = curve ?? 10;
             distancePoint = distancePoint ?? 10;
@@ -1517,7 +1548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: "[LibsUiComponentsDrawLineDirective]",
+                    selector: '[LibsUiComponentsDrawLineDirective]',
                     standalone: true,
                 }]
         }], propDecorators: { viewBoxConfig: [{