@libs-ui/components-draw-line 0.2.10-6.2

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

@@ -0,0 +1,1547 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, NgZone, ElementRef, EventEmitter, Directive, Input, Output } from '@angular/core';
+import { range, cloneDeep, checkMouseOverInContainer, get } from '@libs-ui/utils';
+import { Subject, takeUntil, fromEvent, tap, mergeMap, startWith } from 'rxjs';
+
+class MoCanvasCalculatorBranchUtil {
+    /**
+   *
+   * 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':
+            case 'above':
+                if (opposite) {
+                    return (a ?? 0) - (b ?? 0);
+                }
+                return (a ?? 0) + (b ?? 0);
+            case 'right':
+            case 'under':
+                if (opposite) {
+                    return (a ?? 0) + (b ?? 0);
+                }
+                return (a ?? 0) - (b ?? 0);
+            default:
+                return (a ?? 0) - (b ?? 0);
+        }
+    }
+}
+
+class MoCanvasCalculatorDirectionElementUtil {
+    static checkUpDownLeftRight(firstPoint, endPoint, direction) {
+        const distance = ((firstPoint ?? 0) - (endPoint ?? 0));
+        if (distance === 0) {
+            return 'center';
+        }
+        if (distance > 0) {
+            return direction === 'x' ? 'left' : 'above';
+        }
+        return direction === 'x' ? 'right' : 'under';
+    }
+    static drawLineQ(start, corner, lineCurveX, lineCurveY) {
+        const coordQ = {};
+        switch (corner) {
+            case 'right-under':
+                coordQ.x1 = start.x + lineCurveX;
+                coordQ.y1 = start.y;
+                coordQ.x = coordQ.x1;
+                coordQ.y = coordQ.y1 + lineCurveY;
+                break;
+            case 'under-left':
+                coordQ.x1 = start.x;
+                coordQ.y1 = start.y + lineCurveY;
+                coordQ.x = coordQ.x1 - lineCurveX;
+                coordQ.y = coordQ.y1;
+                break;
+            case 'left-above':
+                coordQ.x1 = start.x - lineCurveX;
+                coordQ.y1 = start.y;
+                coordQ.x = coordQ.x1;
+                coordQ.y = coordQ.y1 - lineCurveY;
+                break;
+            case 'above-right':
+                coordQ.x1 = start.x;
+                coordQ.y1 = start.y - lineCurveY;
+                coordQ.x = coordQ.x1 + lineCurveX;
+                coordQ.y = coordQ.y1;
+                break;
+            case 'under-right':
+                coordQ.x1 = start.x;
+                coordQ.y1 = start.y + lineCurveY;
+                coordQ.x = coordQ.x1 + lineCurveX;
+                coordQ.y = coordQ.y1;
+                break;
+            case 'right-above':
+                coordQ.x1 = start.x + lineCurveX;
+                coordQ.y1 = start.y;
+                coordQ.x = coordQ.x1;
+                coordQ.y = coordQ.y1 - lineCurveY;
+                break;
+            case 'above-left':
+                coordQ.x1 = start.x;
+                coordQ.y1 = start.y - lineCurveY;
+                coordQ.x = coordQ.x1 - lineCurveX;
+                coordQ.y = coordQ.y1;
+                break;
+            case 'left-under':
+                coordQ.x1 = start.x - lineCurveX;
+                coordQ.y1 = start.y;
+                coordQ.x = coordQ.x1;
+                coordQ.y = coordQ.y1 + lineCurveY;
+                break;
+            default:
+                break;
+        }
+        return coordQ;
+    }
+    /**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 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)
+        };
+        if (MoCanvasConnectNavigationNewElementUtil.START_MODE !== 'bottom-left') {
+            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) {
+                L1.y = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionX, L1.y, lineCurve);
+            }
+        }
+        const Q2 = this.drawLineQ({ x: L1.x, y: L1.y ?? 0 }, `${directionY === 'under' ? 'under' : 'above'}-${directionX}`, lineCurve, lineCurve);
+        const pathQ1 = `Q ${Q1.x1},${Q1.y1} ${Q1.x},${Q1.y} L ${L1.x} ${L1.y}`;
+        const pathQ2 = `Q ${Q2.x1},${Q2.y1} ${Q2.x},${Q2.y}`;
+        separatedPoints.push({ start: { x: coordLX ?? startX, y: startY }, end: { x: Q1.x ?? 0, y: Q1.y ?? 0 }, mode: 'horizontal-single-curve', id: key, name: 'qr' });
+        separatedPoints.push({ start: { x: Q1.x ?? 0, y: Q1.y ?? 0 }, end: { x: L1.x ?? 0, y: L1.y }, mode: 'horizontal', id: key, name: 'lr' });
+        separatedPoints.push({ start: { x: L1.x ?? 0, y: L1.y }, end: { x: Q2.x ?? 0, y: Q2.y ?? 0 }, mode: 'vertical-single-curve', id: key, name: 'q2r' });
+        return {
+            pathByPassQ: `${pathQ1} ${pathQ2}`,
+            endPath: {
+                x: Q2.x ?? 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 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
+        };
+        if ((directionX === 'right' && rightElementBlockRoad - (Q1.x ?? 0) <= 0) || (directionX === 'left' && leftElementBlockRoad - (Q1.x ?? 0) >= 0)) {
+            L1.x = Q1.x ?? 0;
+        }
+        const Q2 = this.drawLineQ({ x: L1.x, y: L1.y ?? 0 }, `${directionX}-${directionY}`, lineCurve, lineCurve);
+        if (Math.abs((Q2.x ?? 0) - leftElementBlockRoad) <= 10) {
+            Q2.x = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionX, Q2.x, lineCurve, true);
+        }
+        const pathQ1 = `Q ${Q1.x1},${Q1.y1} ${Q1.x},${Q1.y} L ${L1.x} ${L1.y}`;
+        const pathQ2 = `Q ${Q2.x1},${Q2.y1} ${Q2.x},${Q2.y}`;
+        separatedPoints.push({ start: { x: startX, y: startY }, end: { x: Q1.x ?? 0, y: Q1.y ?? 0 }, mode: 'vertical-single-curve', id: key ?? 'qb' });
+        separatedPoints.push({ start: { x: Q1.x ?? 0, y: Q1.y ?? 0 }, end: { x: L1.x ?? 0, y: L1.y ?? 0 }, mode: 'horizontal-single-curve', id: key ?? 'lb' });
+        separatedPoints.push({ start: { x: L1.x ?? 0, y: L1.y ?? 0 }, end: { x: Q2.x ?? 0, y: Q2.y ?? 0 }, mode: 'horizontal-single-curve', id: key ?? 'q2b' });
+        return {
+            pathByPassQ: `${pathQ1} ${pathQ2}`,
+            endPath: {
+                x: Q2.x ?? 0,
+                y: Q2.y ?? 0
+            }
+        };
+    }
+    // kiểm tra đường thẳng và khối có cắt nhau không
+    static checkLinePassBlockHorizontal(start, end, xOrYOfLine, direction, obstacleRect, returnAllElementBlockRoad) {
+        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 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)) {
+                return true;
+            }
+            if (direction === 'y' && listPointsOfLine.find(el => (top <= el && el <= bottom)) && (left <= xOrYOfLine && xOrYOfLine <= right)) {
+                return true;
+            }
+            return false;
+        });
+        if (!elementBlockRoad || !elementBlockRoad.length) {
+            return undefined;
+        }
+        if (returnAllElementBlockRoad) {
+            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.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) {
+        const elementBlockRoad = this.checkLinePassBlockHorizontal(startY, endPosition.y, startX, 'y', obstacleRect, true);
+        if (!elementBlockRoad || !elementBlockRoad.length) {
+            return;
+        }
+        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) {
+        const elementBlockRoad = this.checkLinePassBlockHorizontal(startX, endPosition.x, startY, 'x', obstacleRect, true);
+        if (!elementBlockRoad || !elementBlockRoad.length) {
+            return;
+        }
+        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) {
+        const coordLX = { x: endPosition.x, y: startY };
+        const elementBlockRoad = this.checkLinePassBlockHorizontal(startX, endPosition.x, startY, 'x', obstacleRect);
+        if (!elementBlockRoad) {
+            separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: '14' });
+            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);
+        if (directionX === 'right') {
+            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)) {
+            coordLX.x = startX;
+            startXBypassElement = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionX, coordLX.x, lineCurve);
+        }
+        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?
+            lineByPassBlock = [];
+            const data = MoCanvasCalculatorDirectionElementUtil.byPassElementOnRightSideNewMode(startXBypassElement ?? 0, coordLX.y ?? 0, endPosition.y, lineByPassBlock, undefined, coordLX.x);
+            endPath = data.endPath;
+        }
+        separatedPoints.push(...lineByPassBlock);
+        separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: '15' });
+        const dataEndPath = this.checkAndAvoidBlocksLeft(endPath.x ?? 0, endPath.y ?? 0, lineCurve, endPosition, obstacleRect, separatedPoints);
+        return dataEndPath;
+    }
+    // kiểm tra hướng sang phải là tránh khối
+    static checkAndAvoidBlocks(startX, startY, lineCurve, endPosition, obstacleRect, separatedPoints, pathPre) {
+        const coordLX = { x: endPosition.x - 30, y: startY };
+        const elementBlockRoad = this.checkLinePassBlockHorizontal(startX, endPosition.x, startY, 'x', obstacleRect);
+        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);
+                }
+                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
+            };
+        }
+        const directionX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(startX, endPosition.x, 'x');
+        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}`;
+        // tính trước trường hợp sau để lùi line
+        const elementBlockRoadPre = this.checkLinePassBlockHorizontal(endPath.x ?? 0, endPosition.x, endPath.y ?? 0, 'x', obstacleRect);
+        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);
+                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
+                    };
+                }
+            }
+        }
+        separatedPoints.splice(separatedPoints.length, 0, ...separatedPointsByPassElementOnRightSide);
+        separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: 'checkAndAvoidBlocks', name: 'p' });
+        const data = this.checkAndAvoidBlocks(endPath.x ?? 0, endPath.y ?? 0, lineCurve, endPosition, obstacleRect, separatedPoints, `${line}`);
+        return {
+            path: data.path,
+            endPath: data.endPath
+        };
+    }
+    // kiểm tra hướng thẳng và tránh khối
+    static checkAndAvoidBlocksY(startX, startY, lineCurve, endPosition, directionY, obstacleRect, separatedPoints, pathPre) {
+        const coordLX = { x: startX, y: endPosition.y };
+        const elementBlockRoad = this.checkLinePassBlockHorizontal(startY, endPosition.y, startX, 'y', obstacleRect);
+        if ((directionY === 'under' && startY > endPosition.y) || (directionY === 'above' && startY < endPosition.y)) {
+            separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: 'k' });
+            return {
+                path: pathPre ?? '',
+                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
+            };
+        }
+        const y = directionY === 'above' ? (elementBlockRoad.y ?? 0) + (elementBlockRoad.height ?? 0) : (elementBlockRoad.y ?? 0);
+        coordLX.y = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionY, y, lineCurve * 2);
+        separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: 'ra' });
+        const { pathByPassQ, endPath } = MoCanvasCalculatorDirectionElementUtil.byPassElementOnTopBottomSide(coordLX.x ?? 0, coordLX.y ?? 0, endPosition.x, lineCurve, elementBlockRoad, directionY, separatedPoints);
+        // sau khi đã tránh thì tiếp tục kéo dài cho tời điểm end x, lại kiểm tra xem có khối nào chắn không?
+        const line = pathPre ? `${pathPre} L ${coordLX.x} ${coordLX.y} ${pathByPassQ}` : `L ${coordLX.x} ${coordLX.y} ${pathByPassQ}`;
+        const data = this.checkAndAvoidBlocksY(endPath.x ?? 0, endPath.y ?? 0, lineCurve, endPosition, directionY, obstacleRect, separatedPoints, `${line}`);
+        return {
+            path: data.path,
+            endPath: data.endPath
+        };
+    }
+    // kiểm tra hướng thẳng và tránh khối
+    static checkAndAvoidBlocksYLeft(startX, startY, lineCurve, endPosition, directionY, obstacleRect, separatedPoints, pathPre) {
+        const key = 'checkAndAvoidBlocksYLeft';
+        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);
+            if (elementBlockRoadStraightLineX) {
+                const topElementBlockRoad = (elementBlockRoadStraightLineX.y ?? 0);
+                const bottomElementBlockRoad = (elementBlockRoadStraightLineX.y ?? 0) + (elementBlockRoadStraightLineX.height ?? 0);
+                let toY = (directionY === 'under' ? topElementBlockRoad : bottomElementBlockRoad);
+                toY = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionY, toY, lineCurve * 2);
+                if (toY > startY && MoCanvasConnectNavigationNewElementUtil.START_MODE !== 'bottom-left') {
+                    coordLX.y = toY;
+                }
+            }
+            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
+            };
+        }
+        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);
+        let ignoreBypassElement = false;
+        if (elementBlockRoadStraightLineX && elementBlockRoadStraightLineX.id === elementBlockRoad.id) {
+            ignoreBypassElement = true;
+        }
+        coordLX.y = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionY, y, lineCurve * 2);
+        let separatedPointsByPassElementOnRightSide = [];
+        const { pathByPassQ, endPath } = MoCanvasCalculatorDirectionElementUtil.byPassElementOnTopBottomSide(coordLX.x ?? 0, coordLX.y ?? 0, endPosition.x, lineCurve, elementBlockRoad, directionY, separatedPointsByPassElementOnRightSide, key);
+        let end = coordLX;
+        let line = pathPre ? `${pathPre} L ${coordLX.x} ${coordLX.y}` : `L ${coordLX.x} ${coordLX.y}`;
+        separatedPoints.push({ start: { x: startX, y: startY }, end: coordLX, mode: 'horizontal', id: key, name: 'b' });
+        if (ignoreBypassElement) {
+            separatedPointsByPassElementOnRightSide = [];
+            separatedPoints.push({ start: coordLX, end, mode: 'horizontal', id: key, name: 'c' });
+            return {
+                path: line,
+                endPath: end
+            };
+        }
+        end = endPath;
+        line += ` ${pathByPassQ}`;
+        separatedPoints.splice(separatedPoints.length, 0, ...separatedPointsByPassElementOnRightSide);
+        const data = this.checkAndAvoidBlocksYLeft(end.x ?? 0, end.y ?? 0, lineCurve, endPosition, directionY, obstacleRect, separatedPoints, `${line}`);
+        return {
+            path: data.path,
+            endPath: data.endPath
+        };
+    }
+    static byPassElementOnRightSideNewMode(startX, startY, endY, separatedPoints, key, coordLX) {
+        const start = { x: coordLX ?? startX, y: startY };
+        const end = { x: (start.x ?? 0) - 20, y: endY };
+        separatedPoints.push({ start: start, end: end, mode: 'horizontal', id: key, name: 'q2r' });
+        return {
+            pathByPassQ: ``,
+            endPath: end
+        };
+    }
+}
+
+class MoCanvasConnectNavigationBottomLeftElementUtil {
+    static lineLeft(pointNext, pointStart, start, lineCurve, obstacleRect, separatedPoints) {
+        const endPositionOrigin = {
+            x: pointNext.x,
+            y: pointNext.y
+        };
+        const endPosition = cloneDeep(endPositionOrigin);
+        const directionStartY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(start.y, endPositionOrigin.y, 'y');
+        let newPosition = start;
+        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 }
+            };
+            newPosition = {
+                x: pointStart.x - (lineCurve + 10),
+                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
+        }
+        // kiểm tra hướng thẳng đến end, nếu có khối thì tránh
+        endPositionOrigin.y = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionStartY, endPositionOrigin.y, lineCurve);
+        const straightLine = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksYLeft(newPosition.x ?? 0, newPosition.y ?? 0, lineCurve, endPositionOrigin, directionStartY, obstacleRect, separatedPoints);
+        const directionStartX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(straightLine.endPath.x, endPositionOrigin.x, 'x');
+        if (directionStartX === 'center' && directionStartY === 'under') {
+            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 => {
+                if (item.start.x === straightLine.endPath.x) {
+                    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));
+                }
+            });
+        }
+        // // kiểm tra ngay khi cua có vướng ai không rồi hẵng vẽ Q1
+        const elementBlockRoad = MoCanvasCalculatorDirectionElementUtil.checkLinePassBlockHorizontal(straightLine.endPath.x ?? 0, endPositionOrigin.x, straightLine.endPath.y ?? 0, 'x', obstacleRect);
+        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) {
+            coordQ1.x1 = straightLine.endPath.x ?? 0;
+            coordQ1.y1 = straightLine.endPath.y ?? 0;
+            coordQ1.x = straightLine.endPath.x ?? 0;
+            coordQ1.y = straightLine.endPath.y ?? 0;
+        }
+        // kiểm tra và vẽ hướng ngang
+        const directionXToEnd = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(coordQ1.x ?? 0, endPosition.x, 'x');
+        const pathHorizontal = [];
+        const endPath = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksLeft(coordQ1.x ?? 0, coordQ1.y ?? 0, lineCurve, endPosition, obstacleRect, pathHorizontal);
+        if (directionXToEnd === 'left' && endPath.x > (coordQ1.x ?? 0)) {
+            separatedPoints.push({ start: straightLine.endPath, end: endPosition, mode: 'vertical', id: '6a ' + directionStartY });
+            return;
+        }
+        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);
+            if (itemLast) {
+                itemLast.end.x = endPosition.x + 50;
+                endPath.x = itemLast.end.x;
+            }
+        }
+        separatedPoints.push({ start: endPath, end: { x: pointNext.x, y: pointNext.y }, mode: 'horizontal', id: 'lineEnd' });
+    }
+    static rightLeft(elementNext, start, lineCurve, obstacleRect, separatedPoints) {
+        const endPosition = {
+            x: elementNext.x,
+            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' });
+        const endPositionX = cloneDeep(endPosition);
+        endPositionX.x -= 50;
+        let 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
+            };
+            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));
+            if (element) {
+                element.start.y = endPosition.y;
+                element.end.y = endPosition.y;
+            }
+            if (elementQR) {
+                elementQR.end.y = endPosition.y;
+            }
+        }
+        separatedPoints.splice(separatedPoints.length, 0, ...separatedPointsCheckAndAvoidBlocks);
+        if (endPath.y === endPosition.y) {
+            separatedPoints.push({ start: { x: endPath.x ?? 0, y: endPath.y }, end: endPosition, mode: 'horizontal' });
+            return;
+        }
+        if (Math.abs((endPath.y ?? 0) - endPosition.y) < 15) {
+            separatedPoints.push({ start: { x: endPath.x ?? 0, y: endPath.y }, end: endPosition, mode: 'vertical' });
+            return;
+        }
+        // // sau khi đã đi ngang và tránh các khối, tiếp theo là đi tiếp hướng lên xuống để về khối cần nối tới, cần check xem điểm end X nó đang ở hướng nào
+        const directionY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(endPath.y, endPosition.y, 'y');
+        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' });
+        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) {
+            avoidBlocksYLine = [];
+            straightLine.endPath = { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 };
+        }
+        if (directionY === 'above' && straightLine.endPath.y <= endPosition.y) {
+            avoidBlocksYLine = [];
+            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 => {
+                if (item.start.x === straightLine.endPath.x) {
+                    item.start.x += 30;
+                }
+                if (item.end.x === straightLine.endPath.x) {
+                    item.end.x += 30;
+                }
+            });
+        }
+        separatedPoints.push(...avoidBlocksYLine);
+        separatedPoints.push({ start: { x: straightLine.endPath.x ?? 0, y: straightLine.endPath.y ?? 0 }, end: endPosition, mode: 'vertical-single-curve', id: '4' });
+        return;
+    }
+}
+
+class MoCanvasConnectNavigationNewElementUtil {
+    static ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT = 32;
+    static START_MODE = 'right-left';
+    static setXYConnectElements(elementFrom, elementNext, obstacleRect, separatedPoints, curve) {
+        this.drawLineConnect(elementFrom, elementNext, obstacleRect, separatedPoints, curve);
+    }
+    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);
+            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);
+            start_y = (elementFrom.y ?? 0) + (elementFrom.height ?? 0);
+        }
+        const M_start = { x: start_x, y: start_y };
+        const directionX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(start_x, elementNext.x, 'x');
+        switch (MoCanvasConnectNavigationNewElementUtil.START_MODE) {
+            case 'right-left':
+                if (directionX === 'left') {
+                    this.lineConnectLeft(elementNext, elementFrom, M_start, curve, obstacleRect, separatedPoints);
+                    return;
+                }
+                this.lineConnectRight(elementNext, M_start, curve, obstacleRect, separatedPoints);
+                break;
+            case 'bottom-top':
+                if (directionX === 'left') {
+                    this.lineConnectLeftWithBottomStart(elementNext, elementFrom, M_start, curve, obstacleRect, separatedPoints);
+                    return;
+                }
+                this.lineConnectRightWithBottomStart(elementNext, M_start, curve, obstacleRect, separatedPoints);
+                break;
+            case 'bottom-left':
+                console.log(directionX);
+                if (directionX === 'left') {
+                    MoCanvasConnectNavigationBottomLeftElementUtil.lineLeft(elementNext, elementFrom, M_start, curve, obstacleRect, separatedPoints);
+                    return;
+                }
+                MoCanvasConnectNavigationBottomLeftElementUtil.rightLeft(elementNext, M_start, curve, obstacleRect, separatedPoints);
+                break;
+        }
+    }
+    static lineConnectRight(elementNext, start, lineCurve, obstacleRect, separatedPoints) {
+        const endPosition = {
+            x: (elementNext.x ?? 0) - (lineCurve * 3),
+            y: (elementNext.y ?? 0) + (elementNext.height ?? 0) / 2
+        };
+        const endPositionX = cloneDeep(endPosition);
+        let separatedPointsCheckAndAvoidBlocks = [];
+        let { path, endPath } = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocks(start.x ?? 0, start.y ?? 0, lineCurve, endPositionX, obstacleRect, separatedPointsCheckAndAvoidBlocks);
+        if (Math.abs((start.x ?? 0) - endPosition.x) < 10) {
+            path = '';
+            endPath = {
+                x: start.x,
+                y: start.y
+            };
+            separatedPointsCheckAndAvoidBlocks = [];
+        }
+        separatedPoints.splice(separatedPoints.length, 0, ...separatedPointsCheckAndAvoidBlocks);
+        // sau khi đã đi ngang và tránh các khối, tiếp theo là đi tiếp hướng lên xuống để về khối cần nối tới, cần check xem điểm end X nó đang ở hướng nào
+        const directionY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(endPath.y, endPosition.y, 'y');
+        if (directionY === 'center') {
+            const LEnd = { x: elementNext.x ?? 0, y: endPath.y };
+            separatedPoints.push({ start: endPath, end: LEnd, mode: 'horizontal', id: 'f' });
+            return {
+                dPath: `${path} L ${LEnd.x} ${LEnd.y}`,
+                endPath: LEnd
+            };
+        }
+        let lineCurveSubY = lineCurve;
+        if (Math.abs((endPath.y ?? 0) - endPosition.y) < lineCurve * 2) {
+            lineCurveSubY = Math.abs((endPath.y ?? 0) - endPosition.y) / 2;
+            const coordQ1 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: endPath.x ?? 0, y: endPath.y ?? 0 }, `right-${directionY === 'above' ? 'above' : 'under'}`, lineCurveSubY * 2, lineCurveSubY); // tính đoạn cong từ đường ngang sang đường thẳng
+            const pathQ1 = `Q ${coordQ1.x1},${coordQ1.y1} ${coordQ1.x},${coordQ1.y}`; // từ ngang sang thẳng phải có đường cong
+            const coordQ2 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 }, `${directionY === 'above' ? 'above' : 'under'}-right`, lineCurveSubY * 2, lineCurveSubY); // tính đoạn cong từ đường thẳng sang ngang
+            const pathQ2 = `Q ${coordQ2.x1},${coordQ2.y1} ${coordQ2.x},${coordQ2.y}`;
+            separatedPoints.push({ start: endPath, end: { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 }, mode: 'horizontal-single-curve', id: 'g' });
+            separatedPoints.push({ start: { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 }, end: { x: coordQ2.x ?? 0, y: coordQ2.y ?? 0 }, mode: 'vertical-single-curve', id: 'j' });
+            const lineClose = this.closeLine({ x: coordQ2.x ?? 0, y: coordQ2.y ?? 0 }, endPosition, lineCurve, elementNext, separatedPoints);
+            return {
+                dPath: `${path} ${pathQ1} ${pathQ2} ${lineClose}`,
+            };
+        }
+        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 pathQ1 = `Q ${coordQ1.x1},${coordQ1.y1} ${coordQ1.x},${coordQ1.y}`; // từ ngang sang thẳng phải có đường cong
+        const endPositionY = cloneDeep(endPosition);
+        endPositionY.y = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionY, endPosition.y, lineCurve);
+        const straightLine = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksY(coordQ1.x ?? 0, coordQ1.y ?? 0, lineCurve, endPositionY, directionY, obstacleRect, separatedPoints);
+        const coordQ2 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: straightLine.endPath.x ?? 0, y: straightLine.endPath.y ?? 0 }, `${directionY === 'above' ? 'above' : 'under'}-right`, lineCurve, lineCurve); // tính đoạn cong từ đường thẳng sang ngang
+        const pathQ2 = `Q ${coordQ2.x1},${coordQ2.y1} ${coordQ2.x},${coordQ2.y}`; // từ ngang sang thẳng phải có đường cong
+        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: straightLine.endPath.x ?? 0, y: straightLine.endPath.y ?? 0 }, end: { x: coordQ2.x ?? 0, y: coordQ2.y ?? 0 }, mode: 'vertical-single-curve', id: 'j' });
+        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
+        };
+    }
+    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
+        };
+        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 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' });
+        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
+            separatedPoints.push({ start: { x: startQL.lx ?? 0, y: startQL.ly }, end: { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 }, mode: 'vertical-single-curve', id: '3' });
+            const endPath = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksLeft(coordQ1.x ?? 0, coordQ1.y ?? 0, lineCurve, endPosition, obstacleRect, separatedPoints);
+            const directionStartY2 = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(endPath.y, endPositionOrigin.y, 'y');
+            const coordQ2 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: endPath.x ?? 0, y: endPath.y ?? 0 }, `left-${directionStartY2 === 'above' ? 'above' : 'under'}`, lineCurve, lineCurve); // tính đoạn cong từ đường ngang sang đường thẳng
+            separatedPoints.push({ start: { x: endPath.x ?? 0, y: endPath.y ?? 0 }, end: { x: coordQ2.x ?? 0, y: coordQ2.y ?? 0 }, mode: 'horizontal-single-curve', id: '4' });
+            this.closeLine({ x: coordQ2.x ?? 0, y: coordQ2.y ?? 0 }, endPositionOrigin, lineCurve, elementNext, separatedPoints);
+            return {
+                dPath: ``,
+            };
+        }
+        const straightLine = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksYLeft(startQL.lx ?? 0, startQL.ly ?? 0, lineCurve, endPosition, directionStartY, obstacleRect, separatedPoints);
+        if (Math.abs((endPosition.x ?? 0) - (straightLine.endPath.x ?? 0)) <= lineCurve * 2) {
+            endPosition.x = straightLine.endPath.x;
+        }
+        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");
+                if (checkAndAvoidBlocksYLeft !== -1) {
+                    separatedPoints.splice(checkAndAvoidBlocksYLeft, 1);
+                }
+                if (checkAndAvoidBlocksYLeft === -1) {
+                    condition = false;
+                }
+            }
+            straightLine.path = '';
+            straightLine.endPath = {
+                x: startQL.lx ?? 0,
+                y: startQL.ly ?? 0
+            };
+        }
+        if (endPosition.x === straightLine.endPath.x) {
+            separatedPoints.push({ start: straightLine.endPath, end: endPositionOrigin, mode: 'vertical-single-curve', id: '6a ' + directionStartY });
+            this.closeLine({ x: endPositionOrigin.x ?? 0, y: endPositionOrigin.y ?? 0 }, endPositionOrigin, lineCurve, elementNext, separatedPoints);
+            return;
+        }
+        // kiểm tra ngay khi cua có vướng ai không rồi hẵng vẽ Q1,
+        const elementBlockRoad = MoCanvasCalculatorDirectionElementUtil.checkLinePassBlockHorizontal(straightLine.endPath.x ?? 0, endPosition.x, straightLine.endPath.y ?? 0, 'x', obstacleRect);
+        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) {
+            coordQ1.x1 = straightLine.endPath.x ?? 0;
+            coordQ1.y1 = straightLine.endPath.y ?? 0;
+            coordQ1.x = straightLine.endPath.x ?? 0;
+            coordQ1.y = straightLine.endPath.y ?? 0;
+        }
+        separatedPoints.push({ start: straightLine.endPath, end: { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 }, mode: 'vertical-single-curve', id: '6a ' + directionStartY });
+        const endPath = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksLeft(coordQ1.x ?? 0, coordQ1.y ?? 0, lineCurve, endPosition, obstacleRect, separatedPoints);
+        const directionStartY2 = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(endPath.y, endPositionOrigin.y, 'y');
+        const directionNextY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(coordQ1.x ?? 0, endPath.x, 'x');
+        const coordQ2 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: endPath.x ?? 0, y: endPath.y ?? 0 }, `${directionNextY}-${directionStartY2 === 'above' ? 'above' : 'under'}`, lineCurve, lineCurve); // tính đoạn cong từ đường ngang sang đường thẳng
+        separatedPoints.push({ start: endPath, end: { x: coordQ2.x ?? 0, y: coordQ2.y ?? 0 }, mode: 'horizontal-single-curve', id: '6' });
+        this.closeLine({ x: coordQ2.x ?? 0, y: coordQ2.y ?? 0 }, endPositionOrigin, lineCurve, elementNext, separatedPoints);
+        return {
+            dPath: ``,
+        };
+    }
+    static closeLine(start, end, lineCurve, elementNext, separatedPoints) {
+        const directionY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(start.y, end.y, 'y');
+        if (start.y === end.y) {
+            separatedPoints.push({ start, end: { x: elementNext.x ?? 0, y: end.y ?? 0 }, mode: 'horizontal', id: '7' });
+            return `L ${elementNext.x} ${end.y}`;
+        }
+        const line = { x: start.x, y: start.y };
+        const endPoint = {
+            x: elementNext.x,
+            y: end.y
+        };
+        let pathQ1 = '';
+        if (Math.abs(start.y - end.y) > lineCurve) {
+            const toY = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionY, end.y, lineCurve);
+            line.y = toY;
+            const directionX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(line.x, elementNext.x, 'x');
+            const coordQ1 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: line.x ?? 0, y: line.y ?? 0 }, `${directionY === 'above' ? 'above' : 'under'}-${directionX}`, lineCurve, lineCurve); // tính đoạn cong từ đường ngang sang đường thẳng
+            let lineL = '';
+            if (coordQ1.y === end.y) {
+                lineL = `L ${endPoint.x} ${endPoint.y}`;
+            }
+            pathQ1 = `Q ${coordQ1.x1},${coordQ1.y1} ${coordQ1.x},${coordQ1.y} ${lineL}`; // từ ngang sang thẳng phải có đường cong
+        }
+        separatedPoints.push({ start, end: line, mode: 'horizontal', id: '8' });
+        separatedPoints.push({ start: line, end: endPoint, mode: 'vertical-single-curve', id: '9' });
+        return `L ${line.x} ${line.y} ${pathQ1}`;
+    }
+    static lineConnectLeftWithBottomStart(elementNext, elementFrom, start, lineCurve, obstacleRect, separatedPoints) {
+        const endPositionOrigin = {
+            x: (elementNext.x ?? 0) + (elementNext.width ?? 0) / 2,
+            y: (elementNext.y ?? 0) - (lineCurve)
+        };
+        const endPosition = cloneDeep(endPositionOrigin);
+        const directionStartY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(start.y, endPositionOrigin.y, 'y');
+        const endY = (elementNext.y ?? 0);
+        console.log('directionStartY', directionStartY);
+        if (directionStartY === 'under') {
+            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 }
+        };
+        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) };
+            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
+        const startNewLine = directionStartY === 'above' ? newEnd : line.end;
+        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
+            // từ ngang sang thẳng phải có đường cong
+            separatedPoints.push({ start: { x: startQL.lx ?? 0, y: startQL.ly }, end: { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 }, mode: 'vertical-single-curve', id: '3' });
+            const endPath = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksLeft(coordQ1.x ?? 0, coordQ1.y ?? 0, lineCurve, endPosition, obstacleRect, separatedPoints);
+            const directionStartY2 = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(endPath.y, endPositionOrigin.y, 'y');
+            const coordQ2 = MoCanvasCalculatorDirectionElementUtil.drawLineQ({ x: endPath.x ?? 0, y: endPath.y ?? 0 }, `left-${directionStartY2 === 'above' ? 'above' : 'under'}`, lineCurve, lineCurve); // tính đoạn cong từ đường ngang sang đường thẳng
+            // từ ngang sang thẳng phải có đường cong
+            separatedPoints.push({ start: { x: endPath.x ?? 0, y: endPath.y ?? 0 }, end: { x: coordQ2.x ?? 0, y: coordQ2.y ?? 0 }, mode: 'horizontal-single-curve', id: '4' });
+            this.closeLine({ x: coordQ2.x ?? 0, y: coordQ2.y ?? 0 }, endPositionOrigin, lineCurve, elementNext, separatedPoints);
+            return {
+                dPath: ``,
+            };
+        }
+        // kiểm tra hướng thẳng đến end, nếu có khối thì tránh
+        const straightLine = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksYLeft(startNewLine.x ?? 0, startNewLine.y ?? 0, lineCurve, endPosition, directionStartY, obstacleRect, separatedPoints);
+        const directionStartX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(start.x, endPositionOrigin.x, 'x');
+        if (directionStartX === 'center' && directionStartY === 'under') {
+            this.closeLineWithLineTopBottom({ x: straightLine.endPath.x ?? 0, y: straightLine.endPath.y ?? 0 }, endPositionOrigin, lineCurve, elementNext, separatedPoints);
+            return {
+                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");
+                if (checkAndAvoidBlocksYLeft !== -1) {
+                    separatedPoints.splice(checkAndAvoidBlocksYLeft, 1);
+                }
+                if (checkAndAvoidBlocksYLeft === -1) {
+                    condition = false;
+                }
+            }
+            straightLine.path = '';
+            straightLine.endPath = {
+                x: startQL.lx ?? 0,
+                y: startQL.ly ?? 0
+            };
+        }
+        // kiểm tra ngay khi cua có vướng ai không rồi hẵng vẽ Q1
+        const elementBlockRoad = MoCanvasCalculatorDirectionElementUtil.checkLinePassBlockHorizontal(straightLine.endPath.x ?? 0, endPosition.x, straightLine.endPath.y ?? 0, 'x', obstacleRect);
+        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) {
+            coordQ1.x1 = straightLine.endPath.x ?? 0;
+            coordQ1.y1 = straightLine.endPath.y ?? 0;
+            coordQ1.x = straightLine.endPath.x ?? 0;
+            coordQ1.y = straightLine.endPath.y ?? 0;
+        }
+        // kiểm tra và vẽ hướng ngang
+        const directionXToEnd = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(coordQ1.x ?? 0, endPositionOrigin.x, 'x');
+        endPosition.x = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionXToEnd, endPosition.x, lineCurve);
+        if (Math.abs((coordQ1.y ?? 0) - endPosition.y) <= lineCurve) {
+            endPosition.y -= lineCurve;
+        }
+        const pathHorizontal = [];
+        const endPath = MoCanvasCalculatorDirectionElementUtil.checkAndAvoidBlocksLeft(coordQ1.x ?? 0, coordQ1.y ?? 0, lineCurve, endPosition, obstacleRect, pathHorizontal);
+        if (directionXToEnd === 'left' && endPath.x > (coordQ1.x ?? 0)) {
+            separatedPoints.push({ start: straightLine.endPath, end: endPositionOrigin, mode: 'vertical', id: '6a ' + directionStartY });
+            this.closeLineWithLineTopBottom(endPositionOrigin, endPositionOrigin, lineCurve, elementNext, separatedPoints);
+            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 });
+        this.closeLineWithLineTopBottom({ x: endPath.x ?? 0, y: endPath.y ?? 0 }, endPositionOrigin, lineCurve, elementNext, separatedPoints);
+        return {
+            dPath: ``,
+        };
+    }
+    static closeLineWithLineTopBottom(start, end, lineCurve, elementNext, separatedPoints) {
+        const directionX = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(start.x, end.x, 'x');
+        if (start.x === end.x) {
+            separatedPoints.push({ start, end: { x: (elementNext.x ?? 0) + (elementNext.width ?? 0) / 2, y: elementNext.y ?? 0 }, mode: 'horizontal', id: '7' });
+            return `L ${elementNext.x} ${end.y}`;
+        }
+        const line = { x: start.x, y: start.y };
+        const endPoint = {
+            x: end.x,
+            y: elementNext.y
+        };
+        const pathQ1 = '';
+        if (Math.abs(start.x - end.x) > lineCurve) {
+            const directionY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(start.y, endPoint.y, 'y');
+            const toX = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionX, end.x, lineCurve);
+            const toY = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionY, end.y, lineCurve);
+            line.x = toX;
+            line.y = toY;
+            separatedPoints.push({ start: start, end: line, mode: 'vertical-single-curve', id: '9' });
+        }
+        separatedPoints.push({ start: line, end: endPoint, mode: 'horizontal-single-curve', id: '9' });
+        return `L ${line.x} ${line.y} ${pathQ1}`;
+    }
+    static lineConnectRightWithBottomStart(elementNext, start, lineCurve, obstacleRect, separatedPoints) {
+        const endPosition = {
+            x: (elementNext.x ?? 0) + (elementNext.width ?? 0) / 2,
+            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' });
+        const endPositionX = cloneDeep(endPosition);
+        endPositionX.x -= 10;
+        let 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
+            };
+            separatedPointsCheckAndAvoidBlocks = [];
+        }
+        separatedPoints.splice(separatedPoints.length, 0, ...separatedPointsCheckAndAvoidBlocks);
+        // sau khi đã đi ngang và tránh các khối, tiếp theo là đi tiếp hướng lên xuống để về khối cần nối tới, cần check xem điểm end X nó đang ở hướng nào
+        const directionY = MoCanvasCalculatorDirectionElementUtil.checkUpDownLeftRight(endPath.y, endPosition.y, 'y');
+        if (directionY === 'center') {
+            const LEnd = { x: elementNext.x ?? 0, y: endPath.y };
+            separatedPoints.push({ start: endPath, end: LEnd, mode: 'horizontal', id: 'f' });
+            // đoạn này chưa oce
+            this.closeLineWithLineTopBottom(LEnd, endPosition, lineCurve, elementNext, separatedPoints);
+            return {
+                dPath: `${path} L ${LEnd.x} ${LEnd.y}`,
+                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
+        const endPositionY = cloneDeep(endPosition);
+        endPositionY.y = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionY, endPosition.y, lineCurve) - 10;
+        // cần check khi đi thẳng lên có vướng khối nào không để tiến lên
+        const elementBlockRoadStraightLineY = MoCanvasCalculatorDirectionElementUtil.checkBlocksElementStraightY((endPath.x ?? 0) + 10, endPath.y ?? 0, endPositionY, obstacleRect);
+        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' });
+        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) {
+            avoidBlocksYLine = [];
+            straightLine.endPath = { x: coordQ1.x ?? 0, y: coordQ1.y ?? 0 };
+        }
+        separatedPoints.push(...avoidBlocksYLine);
+        this.closeLineWithLineTopBottom({ x: straightLine.endPath.x ?? 0, y: straightLine.endPath.y ?? 0 }, endPosition, lineCurve, elementNext, separatedPoints);
+        return {
+            dPath: ``,
+        };
+    }
+}
+
+class LibsUiComponentsDrawLineDirective {
+    cdr = inject(ChangeDetectorRef);
+    zone = inject(NgZone);
+    elementRef = inject(ElementRef);
+    intervalScrollToElement;
+    dataDraw = [];
+    dataReachablePointRange = [];
+    onDrawLineEnd = new Subject();
+    onDestroy = new Subject();
+    viewBoxConfig;
+    svgElement;
+    drawRectDebug;
+    outDrawLineFunctionControl = new EventEmitter();
+    outConnected = new EventEmitter();
+    ngAfterViewInit() {
+        this.svgElement = this.svgElement || document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        this.elementRef.nativeElement.append(this.svgElement);
+        this.outDrawLineFunctionControl.emit({
+            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)
+        });
+    }
+    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)) {
+                return;
+            }
+            const itemClone = cloneDeep(item);
+            itemClone.ref = item;
+            newData.push(itemClone);
+        });
+        this.dataDraw.push(...newData);
+        this.startProcessDataRow(newData);
+    }
+    setReachablePointRange(data) {
+        const newData = [];
+        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);
+            itemClone.ref = item;
+            newData.push(itemClone);
+        });
+        this.dataReachablePointRange.push(...newData);
+        this.startProcessDataReachablePointRange(newData);
+    }
+    removeLine(id, points) {
+        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));
+        };
+        if (!points?.length) {
+            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);
+            if (dataDrawRemoveByPoint) {
+                dataDrawRemoveByPoint.isRemove = true;
+                removeByItem(dataDrawRemoveByPoint);
+                this.dataDraw = this.dataDraw.filter(item => item.id !== id && !item.isRemove);
+            }
+        });
+        this.updateViewBox();
+    }
+    removeReachablePointRange(ids) {
+        this.clearRect();
+        if (!ids.length) {
+            return;
+        }
+        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);
+        });
+    }
+    startProcessDataRow(dataDraw) {
+        this.zone.runOutsideAngular(() => {
+            dataDraw.forEach(item => {
+                const { pathElement, arrowElement, circleStartElement, circleEndElement } = this.createPathAndArrowElement(item.id);
+                item.points.obstacleRect?.forEach(data => this.addRect('rect', data));
+                item.points.pathElement = pathElement;
+                item.points.arrowElement = arrowElement;
+                if (item.startCircle) {
+                    item.points.circleStartElement = circleStartElement;
+                    this.svgElement.append(circleStartElement);
+                }
+                if (item.endCircle) {
+                    item.points.circleEndElement = circleEndElement;
+                    this.svgElement.append(circleEndElement);
+                }
+                item.points.onDestroyEvent = new Subject();
+                this.drawLine(item);
+            });
+            this.updateViewBox();
+        });
+    }
+    startProcessDataReachablePointRange(data) {
+        this.zone.runOutsideAngular(() => {
+            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 => {
+                    const { dataLine, event } = eventData;
+                    if (!checkMouseOverInContainer(event, item.element) || !dataLine.ref || !item.ref) {
+                        return;
+                    }
+                    item.idConnected = eventData.dataLine.id;
+                    eventData.dataLine.idConnected = item.id;
+                    this.outConnected.emit({
+                        dataLine: dataLine.ref,
+                        dataReachablePointRange: item.ref
+                    });
+                });
+            });
+            this.updateViewBox();
+        });
+    }
+    removeElementOfPoints(points) {
+        this.zone.runOutsideAngular(() => {
+            points.onDestroyEvent?.next();
+            points.onDestroyEvent?.complete();
+            points?.pathElement?.remove();
+            points?.arrowElement?.remove();
+            points?.circleStartElement?.remove();
+            points.circleEndElement?.remove();
+        });
+    }
+    drawLine(data) {
+        this.zone.runOutsideAngular(() => {
+            const { points, mode } = data;
+            let { curve } = data?.lineStyle || {};
+            if (mode !== 'quart-in') {
+                curve = curve ?? 10;
+            }
+            const preLengthSeparatedPoints = points.separatedPoints?.length;
+            points.separatedPoints?.forEach(separatedPoints => this.removeElementOfPoints(separatedPoints));
+            points.separatedPoints = [];
+            MoCanvasConnectNavigationNewElementUtil.START_MODE = 'right-left';
+            if (data.startEndMode) {
+                MoCanvasConnectNavigationNewElementUtil.START_MODE = data.startEndMode;
+            }
+            this.calculatorSeparatedPoints(data.id, points, curve || 10, points.separatedPoints, points.obstacleRect || []);
+            if (!preLengthSeparatedPoints && points.separatedPoints.length) {
+                this.removeElementOfPoints(points);
+                const { pathElement, arrowElement } = this.createPathAndArrowElement(data.id);
+                points.pathElement = pathElement;
+                points.arrowElement = arrowElement;
+                points.initialized = false;
+            }
+            if (!points.separatedPoints?.length) {
+                this.buildPathAndDraw(data, points, mode);
+                return;
+            }
+            let path = '';
+            points.separatedPoints.forEach(separatedPoints => {
+                path += this.buildPathAndDrawSeparatedPoints(data, separatedPoints, separatedPoints.mode || mode);
+            });
+            const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            this.svgElement.append(pathElement);
+            points.pathElement = pathElement;
+            const styleConfig = {
+                stroke: data.lineStyle?.stroke ?? '#9CA2AD',
+                strokeDasharray: data.lineStyle?.strokeDasharray,
+                strokeWidth: data.lineStyle?.strokeWidth ?? '1px',
+                fill: data.lineStyle?.fill ?? 'none',
+                curve: data.lineStyle?.curve ?? 10,
+                distancePoint: data.lineStyle?.distancePoint ?? 10
+            };
+            points.pathElement?.setAttribute('stroke', styleConfig.stroke);
+            points.pathElement?.setAttribute('fill', styleConfig.fill);
+            points.pathElement?.setAttribute('stroke-width', styleConfig.strokeWidth);
+            if (styleConfig.strokeDasharray) {
+                points.pathElement?.setAttribute('stroke-dasharray', styleConfig.strokeDasharray);
+            }
+            points.pathElement?.setAttribute('d', path);
+            this.drawRectAndInitEvent(data, mode);
+        });
+    }
+    updateViewBox(viewBoxConfig) {
+        if (viewBoxConfig) {
+            this.viewBoxConfig = viewBoxConfig;
+        }
+        const xPoints = new Set([0]);
+        const yPoints = new Set([0]);
+        const addPoints = (points) => {
+            xPoints.add(points.start.x);
+            xPoints.add(points.end.x);
+            yPoints.add(points.start.y);
+            yPoints.add(points.end.y);
+        };
+        this.dataDraw?.forEach(item => {
+            const points = item.points;
+            addPoints(points);
+            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 }
+                });
+            });
+        });
+        const xMax = this.viewBoxConfig?.width ?? (xPoints.size ? Math.max(...xPoints) : 0) + 14;
+        const yMax = this.viewBoxConfig?.height ?? (yPoints.size ? Math.max(...yPoints) : 0) + 14;
+        if (!this.viewBoxConfig?.ignoreViewBox) {
+            const rectSvgElement = this.svgElement.getBoundingClientRect();
+            this.svgElement?.setAttribute('viewBox', `${this.viewBoxConfig?.minX ?? rectSvgElement.x} ${this.viewBoxConfig?.minY ?? rectSvgElement.y} ${xMax} ${yMax}`);
+        }
+        this.svgElement?.setAttribute('width', `${xMax ?? 0}`);
+        this.svgElement?.setAttribute('height', `${yMax ?? 0}`);
+    }
+    isPointInsideSquare(point, square) {
+        const { x, y } = point;
+        const { x: squareX, y: squareY, width, height } = square;
+        return x >= squareX && x <= squareX + width && y >= squareY && y <= squareY + height;
+    }
+    calculatorSeparatedPoints(name, points, curve, separatedPoints, obstacleRects) {
+        if (!obstacleRects.length) {
+            return;
+        }
+        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;
+        }
+        MoCanvasConnectNavigationNewElementUtil.setXYConnectElements(elementStart ?? { ...points.start, width: 1, height: 1 }, elementEnd ?? { ...points.end, width: 1, height: 1 }, obstacleRects, separatedPoints, curve);
+    }
+    buildPathAndDraw(data, points, mode) {
+        let dPath = {};
+        const styleConfig = {
+            stroke: data.lineStyle?.stroke ?? '#9CA2AD',
+            strokeDasharray: data.lineStyle?.strokeDasharray,
+            strokeWidth: data.lineStyle?.strokeWidth ?? '1px',
+            fill: data.lineStyle?.fill ?? 'none',
+            curve: data.lineStyle?.curve ?? 10,
+            distancePoint: data.lineStyle?.distancePoint ?? 10
+        };
+        points.pathElement?.setAttribute('stroke', styleConfig.stroke);
+        points.pathElement?.setAttribute('fill', styleConfig.fill);
+        points.pathElement?.setAttribute('stroke-width', styleConfig.strokeWidth);
+        if (styleConfig.strokeDasharray) {
+            points.pathElement?.setAttribute('stroke-dasharray', styleConfig.strokeDasharray);
+        }
+        let { curve, distancePoint } = styleConfig;
+        mode = mode || "quart-in";
+        if (mode !== 'quart-in') {
+            curve = curve ?? 10;
+            distancePoint = distancePoint ?? 10;
+        }
+        if (mode === 'quart-in' || points.start.x === points.end.x || points.start.y === points.end.y) {
+            this.drawBalancedCurve(dPath, points);
+            if (mode === 'quart-in') {
+                dPath = {};
+                this.drawBendBothEndsCurve(dPath, points);
+            }
+            points.pathElement?.setAttribute('d', this.builDAttributeToString(dPath));
+            this.drawRectAndInitEvent(data, mode);
+            return;
+        }
+        const result = this.calculatorDistancePointAndCurve(points, distancePoint, curve, mode);
+        distancePoint = result.distancePoint;
+        curve = result.curve;
+        this.buildDAttributeByPointEndModeHorizontal(dPath, points, distancePoint || 0, curve || 0, mode);
+        this.buildDAttributeByPointEndModeVertical(dPath, points, distancePoint || 0, curve || 0, mode);
+        points.pathElement?.setAttribute('d', this.builDAttributeToString(dPath));
+        this.drawRectAndInitEvent(data, mode);
+    }
+    calculatorDistancePointAndCurve(points, distancePoint, curve, mode) {
+        if ((!mode.includes('vertical') && !mode.includes('horizontal'))) {
+            return { curve, distancePoint };
+        }
+        const gapX = Math.abs(points.start.x - points.end.x);
+        const gapY = Math.abs(points.start.y - points.end.y);
+        const multiplierCurve = mode.includes('horizontal') ? 1 : 2;
+        const multiplierDistance = mode.includes('horizontal') ? 2 : 1;
+        if (!mode.includes('single-curve')) {
+            if (gapX < distancePoint * multiplierDistance + curve * multiplierCurve) {
+                distancePoint = curve = gapX / 3;
+            }
+            if (gapY < distancePoint * multiplierDistance + curve * multiplierCurve) {
+                distancePoint = curve = gapY / 3;
+            }
+            return { curve, distancePoint };
+        }
+        const minGap = Math.min(gapX, gapY);
+        if (minGap < distancePoint) {
+            distancePoint = minGap;
+        }
+        if (minGap < curve) {
+            curve = minGap;
+        }
+        return { curve, distancePoint };
+    }
+    drawRectAndInitEvent(data, mode) {
+        const points = data.points;
+        this.updateStyleArrow(points, mode, data);
+        if (data.startCircle && points.circleStartElement) {
+            this.updateAttributeCircle(points.circleStartElement, data.id, points.start, data.startCircleStyle);
+        }
+        if (data.endCircle && points.circleEndElement) {
+            this.updateAttributeCircle(points.circleEndElement, data.id, points.end, data.endCircleStyle);
+        }
+        this.initEvent(data);
+    }
+    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 }];
+    }
+    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 }];
+    }
+    buildDAttributeByPointEndModeHorizontal(dPath, points, distancePoint, curve, mode) {
+        if (!mode.includes('horizontal')) {
+            return;
+        }
+        const multiplierX = points.start.x < points.end.x ? -1 : 1;
+        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 };
+        if (mode.includes('horizontal-single')) {
+            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) };
+        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.L3 = { x: points.end.x, y: points.end.y };
+        }
+    }
+    buildDAttributeByPointEndModeVertical(dPath, points, distancePoint, curve, mode) {
+        if (!mode.includes('vertical')) {
+            return;
+        }
+        const multiplierX = points.start.x < points.end.x ? -1 : 1;
+        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) };
+        if (mode.includes('vertical-single')) {
+            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 };
+        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.L3 = { x: points.end.x, y: points.end.y };
+        }
+    }
+    builDAttributeToString(dAttribute) {
+        let dString = '';
+        Object.keys(dAttribute).forEach(key => {
+            const data = get(dAttribute, key);
+            if (Array.isArray(data)) {
+                const [point1, point2, point3] = data;
+                dString = `${dString}${key.replace(/\d/g, '')}${point1.x},${point1.y} ${point2.x},${point2.y}${point3 ? ' ' + point3.x + ',' + point3.y : ''}
+        `;
+                return;
+            }
+            dString = `${dString}${key.replace(/\d/g, '')}${data.x},${data.y}
+      `;
+        });
+        return dString;
+    }
+    updateStyleArrow(points, mode, data) {
+        if (!points.arrowElement || data.ignoreDrawArrow) {
+            return;
+        }
+        const styleConfig = {
+            fill: data.arrowStyle?.fill ?? '#9CA2AD',
+            stroke: data.arrowStyle?.stroke ?? 'none',
+            strokeWidth: data.arrowStyle?.strokeWidth ?? '0',
+            width: data.arrowStyle?.width ?? 6,
+            height: data.arrowStyle?.height ?? 8
+        };
+        const pointEnd = cloneDeep(points.end);
+        const arrowElement = points.arrowElement;
+        const direction = data.arrowDirection || this.getDirection(points, data.startEndMode);
+        switch (direction) {
+            case 'right':
+                if (mode.includes('horizontal') || mode.includes('vertical')) {
+                    pointEnd.x -= styleConfig.height;
+                }
+                arrowElement?.setAttribute('points', `${pointEnd.x},${pointEnd.y - styleConfig.width}  ${pointEnd.x + styleConfig.height},${pointEnd.y} ${pointEnd.x},${pointEnd.y + styleConfig.width} `);
+                break;
+            case 'left':
+                if (mode.includes('horizontal') || mode.includes('vertical')) {
+                    pointEnd.x += styleConfig.height;
+                }
+                arrowElement?.setAttribute('points', `${pointEnd.x},${pointEnd.y - styleConfig.width}  ${pointEnd.x - styleConfig.height},${pointEnd.y} ${pointEnd.x},${pointEnd.y + styleConfig.width} `);
+                break;
+            case 'top':
+                if (mode.includes('horizontal') || mode.includes('vertical')) {
+                    pointEnd.y += styleConfig.height;
+                }
+                arrowElement?.setAttribute('points', `${pointEnd.x - styleConfig.width},${pointEnd.y}  ${pointEnd.x},${pointEnd.y - styleConfig.height} ${pointEnd.x + styleConfig.width},${pointEnd.y} `);
+                break;
+            case 'bottom':
+                if (mode.includes('horizontal') || mode.includes('vertical')) {
+                    pointEnd.y -= styleConfig.height;
+                }
+                arrowElement?.setAttribute('points', `${pointEnd.x - styleConfig.width},${pointEnd.y}  ${pointEnd.x},${pointEnd.y + styleConfig.height} ${pointEnd.x + styleConfig.width},${pointEnd.y} `);
+                break;
+        }
+        arrowElement?.setAttribute('fill', styleConfig.fill);
+        arrowElement?.setAttribute('stroke', styleConfig.stroke);
+        arrowElement?.setAttribute('stroke-width', styleConfig.strokeWidth);
+    }
+    updateAttributeCircle(circleElement, name, point, circleStyle) {
+        circleElement.setAttribute('name', name);
+        circleElement.setAttribute('cx', `${point.x}`);
+        circleElement.setAttribute('cy', `${point.y}`);
+        circleElement.setAttribute('r', `${circleStyle?.r ?? 2}`);
+        circleElement.setAttribute('fill', `${circleStyle?.fill ?? 'green'}`);
+        circleElement.setAttribute('stroke', `${circleStyle?.stroke ?? '#9CA2AD'}`);
+        circleElement.setAttribute('stroke-width', `${circleStyle?.strokeWidth ?? '1px'}`);
+        return circleElement;
+    }
+    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);
+            if (lineToEnd) {
+                pointStart = lineToEnd.start;
+            }
+        }
+        const modeHorizontal = pointStart.x < points.end.x ? 'right' : 'left';
+        const modeVertical = pointStart.y < points.end.y ? 'bottom' : 'top';
+        if (!startEndMode) {
+            if (Math.abs(points.end.x - pointStart.x) > Math.abs(points.end.y - pointStart.y)) {
+                return modeHorizontal;
+            }
+            return modeVertical;
+        }
+        switch (startEndMode) {
+            case 'bottom-left':
+                return modeHorizontal;
+            case 'right-left':
+                return modeHorizontal;
+            case 'bottom-top':
+                return modeVertical;
+        }
+    }
+    initEvent(data) {
+        const points = data.points;
+        let preEvent = undefined;
+        if ((!points.arrowElement && !points.circleEndElement) || !points.onDestroyEvent || points.initialized) {
+            return;
+        }
+        points.initialized = true;
+        const stopEventMouse = (mouseEvent) => {
+            mouseEvent.preventDefault();
+            mouseEvent.stopPropagation();
+        };
+        const documentMouseUp = fromEvent(document, 'mouseup')
+            .pipe(tap((eventMouseUp) => {
+            stopEventMouse(eventMouseUp);
+            if (preEvent) {
+                preEvent = undefined;
+                this.onDrawLineEnd.next({ dataLine: data, event: eventMouseUp });
+            }
+        }), takeUntil(points.onDestroyEvent), takeUntil(this.onDestroy));
+        const documentMouseMove = fromEvent(document, 'mousemove').pipe(tap((eventMousemove) => stopEventMouse(eventMousemove)), takeUntil((documentMouseUp)), takeUntil(points.onDestroyEvent), takeUntil(this.onDestroy));
+        const handlerDrag = (dragMouseEvent) => {
+            if (!preEvent) {
+                preEvent = dragMouseEvent;
+            }
+            const pointEnd = cloneDeep(points.end);
+            const movementX = dragMouseEvent.clientX - preEvent.clientX;
+            const movementY = dragMouseEvent.clientY - preEvent.clientY;
+            preEvent = dragMouseEvent;
+            pointEnd.x += movementX;
+            pointEnd.y += movementY;
+            if (data.points?.obstacleRect?.length && data.points?.obstacleRect.some(obstacleRect => this.checkPointIncludeRect(pointEnd, obstacleRect))) {
+                return;
+            }
+            points.end.x = pointEnd.x;
+            points.end.y = pointEnd.y;
+            this.drawLine(data);
+            this.updateViewBox();
+        };
+        if (points.arrowElement) {
+            const elementMouseDownArrow = fromEvent(points.arrowElement, 'mousedown').pipe(tap(eventMousedown => {
+                stopEventMouse(eventMousedown);
+            }), takeUntil(points.onDestroyEvent), takeUntil(this.onDestroy));
+            const dragArrow = elementMouseDownArrow.pipe(mergeMap((mouseEvent) => documentMouseMove.pipe(startWith((mouseEvent)))));
+            dragArrow.pipe(tap(handlerDrag), takeUntil(points.onDestroyEvent), takeUntil(this.onDestroy)).subscribe();
+        }
+        if (points.circleEndElement) {
+            const elementMouseDownCircle = fromEvent(points.circleEndElement, 'mousedown').pipe(tap(eventMousedown => {
+                stopEventMouse(eventMousedown);
+            }), takeUntil(points.onDestroyEvent), takeUntil(this.onDestroy));
+            const dragCircle = elementMouseDownCircle.pipe(mergeMap((mouseEvent) => documentMouseMove.pipe(startWith((mouseEvent)))));
+            dragCircle.pipe(tap(handlerDrag), takeUntil(points.onDestroyEvent), takeUntil(this.onDestroy)).subscribe();
+        }
+    }
+    checkPointIncludeRect(point, obstacleRect) {
+        const gapDefault = 8;
+        obstacleRect = {
+            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
+        };
+        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");
+        pathElement.setAttribute('name', name);
+        arrowElement.setAttribute('name', name);
+        this.svgElement.append(pathElement);
+        this.svgElement.append(arrowElement);
+        return { pathElement, arrowElement, circleStartElement, circleEndElement };
+    }
+    addCircle(name, point) {
+        if (!this.drawRectDebug) {
+            return;
+        }
+        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}`);
+        circle.setAttribute('r', '2');
+        circle.setAttribute('style', 'fill: none; stroke: blue; stroke-width: 1px;');
+        this.svgElement.appendChild(circle);
+    }
+    clearCircle() {
+        if (!this.drawRectDebug) {
+            return;
+        }
+        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");
+        rectElement.setAttribute('name', name);
+        rectElement.setAttribute('x', `${rect.x}`);
+        rectElement.setAttribute('y', `${rect.y}`);
+        rectElement.setAttribute('width', `${rect.width}`);
+        rectElement.setAttribute('height', `${rect.height}`);
+        rectElement.setAttribute('style', 'fill: blue; stroke: blue;');
+        this.svgElement.appendChild(rectElement);
+        textElement.setAttribute('x', `${rect.x}`);
+        textElement.setAttribute('y', `${rect.y}`);
+        textElement.textContent = rect.id ?? '';
+        this.svgElement.appendChild(textElement);
+    }
+    clearRect() {
+        if (!this.drawRectDebug) {
+            return;
+        }
+        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
+        };
+        let { curve, distancePoint } = styleConfig;
+        mode = mode || "quart-in";
+        if (mode !== 'quart-in') {
+            curve = curve ?? 10;
+            distancePoint = distancePoint ?? 10;
+        }
+        if (mode === 'quart-in' || points.start.x === points.end.x || points.start.y === points.end.y) {
+            this.drawBalancedCurve(dPath, points);
+            if (mode === 'quart-in') {
+                dPath = {};
+                this.drawBendBothEndsCurve(dPath, points);
+            }
+            return this.builDAttributeToString(dPath);
+        }
+        const result = this.calculatorDistancePointAndCurve(points, distancePoint, curve, mode);
+        distancePoint = result.distancePoint;
+        curve = result.curve;
+        this.buildDAttributeByPointEndModeHorizontal(dPath, points, distancePoint || 0, curve || 0, mode);
+        this.buildDAttributeByPointEndModeVertical(dPath, points, distancePoint || 0, curve || 0, mode);
+        return this.builDAttributeToString(dPath);
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDrawLineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: LibsUiComponentsDrawLineDirective, isStandalone: true, selector: "[LibsUiComponentsDrawLineDirective]", inputs: { viewBoxConfig: "viewBoxConfig", svgElement: "svgElement", drawRectDebug: "drawRectDebug" }, outputs: { outDrawLineFunctionControl: "outDrawLineFunctionControl", outConnected: "outConnected" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDrawLineDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: "[LibsUiComponentsDrawLineDirective]",
+                    standalone: true,
+                }]
+        }], propDecorators: { viewBoxConfig: [{
+                type: Input
+            }], svgElement: [{
+                type: Input
+            }], drawRectDebug: [{
+                type: Input
+            }], outDrawLineFunctionControl: [{
+                type: Output
+            }], outConnected: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsDrawLineDirective };
+//# sourceMappingURL=libs-ui-components-draw-line.mjs.map