@libs-ui/components-draw-line 0.2.356-38 → 0.2.356-40

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

@@ -178,32 +178,32 @@ class MoCanvasCalculatorDirectionElementUtil {
             }
             return false;
         });
-        if (!elementBlockRoad || !elementBlockRoad.length) {
+        if (!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.y ?? 0) - start) < Math.abs((b.y ?? 0) - start) ? a : b), elementBlockRoad[0]);
         }
-        return elementBlockRoad.reduce((a, b) => (Math.abs((a.x ?? 0) - start) < Math.abs((b.x ?? 0) - start) ? a : b));
+        return elementBlockRoad.reduce((a, b) => (Math.abs((a.x ?? 0) - start) < Math.abs((b.x ?? 0) - start) ? a : b), elementBlockRoad[0]);
     }
     // 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) {
+        if (!elementBlockRoad?.length) {
             return;
         }
-        return elementBlockRoad.reduce((a, b) => (Math.abs(a.x ?? 0 - startX) < Math.abs(b.x ?? 0 - startX) ? a : b));
+        return elementBlockRoad.reduce((a, b) => (Math.abs(a.x ?? 0 - startX) < Math.abs(b.x ?? 0 - startX) ? a : b), elementBlockRoad[0]);
     }
     // 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) {
+        if (!elementBlockRoad?.length) {
             return;
         }
-        return elementBlockRoad.reduce((a, b) => (Math.abs((a.y ?? 0) - startY) < Math.abs((b.y ?? 0) - startY) ? a : b));
+        return elementBlockRoad.reduce((a, b) => (Math.abs((a.y ?? 0) - startY) < Math.abs((b.y ?? 0) - startY) ? a : b), elementBlockRoad[0]);
     }
     // kiểm tra hướng sang phải là tránh khối
     static checkAndAvoidBlocksLeft(startX, startY, lineCurve, endPosition, obstacleRect, separatedPoints) {
@@ -258,7 +258,7 @@ class MoCanvasCalculatorDirectionElementUtil {
         }
         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 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
@@ -268,7 +268,6 @@ class MoCanvasCalculatorDirectionElementUtil {
             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 {
@@ -345,13 +344,12 @@ class MoCanvasCalculatorDirectionElementUtil {
             ignoreBypassElement = true;
         }
         coordLX.y = MoCanvasCalculatorBranchUtil.mathOperatorsCalculation(directionY, y, lineCurve * 2);
-        let separatedPointsByPassElementOnRightSide = [];
+        const 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,
@@ -518,7 +516,6 @@ class MoCanvasConnectNavigationBottomLeftElementUtil {
         }
         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;
     }
 }
 
@@ -594,9 +591,8 @@ class MoCanvasConnectNavigationNewElementUtil {
                 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 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
@@ -991,7 +987,6 @@ class LibsUiComponentsDrawLineDirective {
         });
     }
     startProcessDataRow(dataDraw) {
-        console.log('12121212dataDraw', dataDraw);
         this.zone.runOutsideAngular(() => {
             dataDraw.forEach((item) => {
                 const { pathElement, arrowElement, circleStartElement, circleEndElement } = this.createPathAndArrowElement(item.id);
@@ -1083,7 +1078,7 @@ class LibsUiComponentsDrawLineDirective {
             points.separatedPoints.forEach((separatedPoints) => {
                 path += this.buildPathAndDrawSeparatedPoints(data, separatedPoints, separatedPoints.mode || mode);
             });
-            if (!points.pathElement || !points.pathElement.parentNode) {
+            if (!points.pathElement?.parentNode) {
                 const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                 this.svgElement.append(pathElement);
                 points.pathElement = pathElement;
@@ -1121,6 +1116,12 @@ class LibsUiComponentsDrawLineDirective {
         this.dataDraw?.forEach((item) => {
             const points = item.points;
             addPoints(points);
+            // Nếu mode là s-line, thêm offset cho control points để viewBox đủ rộng cho curve vòng ra ngoài
+            if (item.mode === 's-line') {
+                const offsetDistance = 1000;
+                xPoints.add(points.start.x + offsetDistance);
+                xPoints.add(points.end.x - offsetDistance);
+            }
             points.separatedPoints?.forEach((separatedPoints) => addPoints(separatedPoints));
             points.obstacleRect?.forEach((obstacleRect) => {
                 addPoints({
@@ -1129,8 +1130,8 @@ class LibsUiComponentsDrawLineDirective {
                 });
             });
         });
-        const xMax = this.viewBoxConfig?.width ?? ((xPoints.size ? Math.max(...xPoints) : 0) + 14);
-        const yMax = this.viewBoxConfig?.height ?? ((yPoints.size ? Math.max(...yPoints) : 0) + 14);
+        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}`);
@@ -1176,12 +1177,17 @@ class LibsUiComponentsDrawLineDirective {
             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' || mode === 's-line' || points.start.x === points.end.x || points.start.y === points.end.y) {
+            if (mode !== 's-line') {
+                this.drawBalancedCurve(dPath, points);
+            }
             if (mode === 'quart-in') {
                 dPath = {};
                 this.drawBendBothEndsCurve(dPath, points);
             }
+            if (mode === 's-line') {
+                this.drawBendBothEndsCurveSLine(dPath, points);
+            }
             points.pathElement?.setAttribute('d', this.builDAttributeToString(dPath));
             this.drawRectAndInitEvent(data, mode);
             return;
@@ -1253,6 +1259,22 @@ class LibsUiComponentsDrawLineDirective {
             { x: points.end.x, y: points.end.y },
         ];
     }
+    drawBendBothEndsCurveSLine(dPath, points) {
+        // Khi X gần nhau → giảm offset để tránh cong quá; khi X xa nhau → offset lớn hơn để tạo S-curve rõ ràng
+        const deltaX = points.end.x - points.start.x;
+        const offsetDistance = Math.min(180, Math.max(80, Math.abs(deltaX)));
+        const deltaY = points.end.y - points.start.y;
+        // LUÔN ĐI RA PHẢI từ start, VÀO TỪ TRÁI của end (hoặc giữ tại end nếu start ở trên end)
+        const rightX = points.start.x + offsetDistance;
+        const leftX = deltaY > 0 ? points.end.x : points.end.x - offsetDistance;
+        dPath.M = { x: points.start.x, y: points.start.y };
+        // Cubic bezier curve duy nhất với control points tính toán để tạo S-curve mượt
+        dPath.C = [
+            { x: rightX, y: points.start.y + deltaY * (deltaY < 0 || deltaX < 0 ? 0.5 : 0.1) },
+            { x: leftX, y: points.end.y - deltaY * 0.5 },
+            { x: points.end.x, y: points.end.y },
+        ];
+    }
     buildDAttributeByPointEndModeHorizontal(dPath, points, distancePoint, curve, mode) {
         if (!mode.includes('horizontal')) {
             return;
@@ -1389,6 +1411,14 @@ class LibsUiComponentsDrawLineDirective {
         }
         const modeHorizontal = pointStart.x < points.end.x ? 'right' : 'left';
         const modeVertical = pointStart.y < points.end.y ? 'bottom' : 'top';
+        // Mode s-line: nếu end ở dưới start → mũi tên chỉ xuống (bottom); ngược lại → mũi tên chỉ ngang (right)
+        if (mode === 's-line') {
+            const deltaY = points.end.y - points.start.y;
+            if (deltaY > 0) {
+                return 'bottom';
+            }
+            return 'right';
+        }
         if (mode?.includes('vertical') && !mode.includes('single-curve')) {
             return modeVertical;
         }