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

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

@@ -0,0 +1,2982 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, inject } from '@angular/core';
+import { setStylesElement, cloneDeep, uuid } from '@libs-ui/utils';
+import { TranslateService } from '@ngx-translate/core';
+import { Subject } from 'rxjs';
+
+class MoLibDiagramCalculatorBranchUtil {
+    static drawStraightLine(left, lineFormElementToBranching, top, branch, maxHeightBranch, config) {
+        const startDraw = top + lineFormElementToBranching;
+        let Ly = startDraw;
+        Ly += canvasConfigReadonly().ELEMENT_HEIGHT_CURVE; // chiều dài đến element đầu tiên
+        Ly += getDistanceFromBranchToFirstBlock(branch.nodeOtherConfig); // chiều dài đến element đầu tiên
+        if (!branch.elements || !branch.elements.length) {
+            Ly += maxHeightBranch;
+            Ly += 20; // thêm đoạn nối từ điểm kết thúc nhánh đến hết
+        }
+        const coord1 = {
+            mx: left,
+            my: top,
+            ly: Ly,
+            lx: left,
+        };
+        branch.attributeSvgD = `M ${coord1.mx} ${coord1.my} L ${coord1.lx} ${coord1.ly}`;
+        if (branch.nodeOtherConfig) {
+            const endYToWait = startDraw + canvasConfigReadonly().ELEMENT_HEIGHT_CURVE + canvasConfigReadonly().DISTANCE_TO_WAIT;
+            branch.attributeSvgD = `M ${coord1.mx} ${coord1.my} L ${coord1.mx} ${endYToWait}`;
+            const waitHeight = getHeightWaitConfig(branch.nodeOtherConfig);
+            const topStartLine2 = endYToWait + waitHeight;
+            delete branch.nodeOtherConfig.attributeSvgD;
+            if (branch.elements && branch.elements.length) {
+                branch.nodeOtherConfig.attributeSvgD = `M ${coord1.mx} ${topStartLine2} L ${coord1.mx} ${coord1.ly}`;
+            }
+            branch.nodeOtherConfig.specific_y = endYToWait;
+            branch.nodeOtherConfig.specific_x = coord1.mx;
+        }
+        branch.specific_start_branch_y = top + lineFormElementToBranching + canvasConfigReadonly().ELEMENT_HEIGHT_CURVE;
+        branch.specific_start_branch_x = left;
+        if (!branch.elements || !branch.elements.length) {
+            return;
+        }
+        const heightToElement = canvasConfigReadonly().ELEMENT_HEIGHT_CURVE + getDistanceFromBranchToFirstBlock(branch.nodeOtherConfig); // chiều dài đến element đầu tiên;
+        branch.elements.forEach((elementBranch) => {
+            elementBranch.specific_y = top + lineFormElementToBranching + heightToElement;
+            elementBranch.specific_x = left - (elementBranch.specific_width ?? 0) / 2;
+        });
+        MoLibDiagramCalculatorCoordinatesUtil.setXYElements(branch.elements, config);
+    }
+    static leftLine(left, lineFormElementToBranching, top, lineBetweenBranch, branch, maxHeightBranch, element, config) {
+        const { coordQL2, isCheckAllElementConnectToExit } = this.drawAboveUnderLine(left, lineFormElementToBranching, top, lineBetweenBranch, branch, maxHeightBranch, 'left', config);
+        branch.specific_start_branch_x = coordQL2.x;
+        branch.specific_start_branch_y = coordQL2.y;
+        if (!branch.elements || !branch.elements.length) {
+            return;
+        }
+        this.drawElementInBranchLine(branch, coordQL2, config);
+        if (isCheckAllElementConnectToExit) {
+            return;
+        }
+    }
+    static rightLine(left, lineFormElementToBranching, top, lineBetweenBranch, branch, maxHeightBranch, element, config) {
+        const { coordQL1, coordQL2, isCheckAllElementConnectToExit } = this.drawAboveUnderLine(left, lineFormElementToBranching, top, lineBetweenBranch, branch, maxHeightBranch, 'right', config);
+        branch.specific_start_branch_x = coordQL2.x;
+        branch.specific_start_branch_y = coordQL2.y;
+        const maxY = (coordQL1.y ?? 0) + 200;
+        const configSvg = config.widthHeightSvgCanvas;
+        configSvg.heightSvg = maxY > configSvg.heightSvg ? maxY : configSvg.heightSvg;
+        if (!branch.elements || !branch.elements.length) {
+            return;
+        }
+        this.drawElementInBranchLine(branch, coordQL2, config);
+        if (isCheckAllElementConnectToExit) {
+            return;
+        }
+    }
+    static drawElementInBranchLine(branch, coordQL2, config) {
+        const topElementInBranch = coordQL2.ly; // bắt đầu của 1 emelent trong nhánh sẽ là điểm cuối cùng của nhánh trỏ tới
+        const elementFirst = branch.elements[0];
+        elementFirst.specific_y = topElementInBranch;
+        elementFirst.specific_x = (coordQL2.lx ?? 0) - (elementFirst.specific_width ?? 0) / 2;
+        MoLibDiagramCalculatorCoordinatesUtil.setXYElements(branch.elements, config);
+    }
+    static drawMissingLineFromLastElement(branch, coordQ3) {
+        const { mx, my } = coordQ3;
+        if (!my) {
+            return;
+        }
+        const lastElementInBranch = branch.elements[branch.elements.length - 1];
+        if (!lastElementInBranch.branches?.length) {
+            branch.attributeSvgD = `${branch.attributeSvgD} M ${mx} ${my} L ${mx} ${lastElementInBranch.position_end ?? 0}`;
+            return;
+        }
+        const ly = (lastElementInBranch.position_end_branch ?? 0) - canvasConfigReadonly().ELEMENT_HEIGHT_CURVE;
+        if (ly === my) {
+            return;
+        }
+        branch.attributeSvgD = `${branch.attributeSvgD} M ${mx} ${my} L ${mx} ${ly}`;
+    }
+    static drawAboveUnderLine(left, lineFormElementToBranching, top, lineBetweenBranch, branch, maxHeightBranch, direction, config) {
+        const M = `M ${left} ${top}`; // đặt bút vẽ từ điểm x, y
+        const Ly = top + lineFormElementToBranching - canvasConfigReadonly().ELEMENT_HEIGHT_CURVE;
+        const L = `L ${left} ${Ly}`; // Kéo dài 1 đường thẳng tới X, Y,
+        const straightLineBetweenBranch = lineBetweenBranch - canvasConfigReadonly().ELEMENT_HEIGHT_CURVE * 2;
+        const coordQL1 = {
+            // điểm cong số 1 của nhánh và đường thẳng kéo trên dưới
+            mx: left,
+            my: Ly,
+            x1: left,
+            y1: Ly + canvasConfigReadonly().ELEMENT_HEIGHT_CURVE,
+            x: this.mathOperatorsCalculation(direction, left, canvasConfigReadonly().ELEMENT_HEIGHT_CURVE, true),
+            y: Ly + canvasConfigReadonly().ELEMENT_HEIGHT_CURVE,
+        };
+        coordQL1.ly = coordQL1.y;
+        // đoạn thẳng kéo dài lineBetweenBranch phải trừ đi hai đầu cong
+        coordQL1.lx = this.mathOperatorsCalculation(direction, coordQL1.x, straightLineBetweenBranch, true);
+        const QL1 = `M ${coordQL1.mx},${coordQL1.my} Q ${coordQL1.x1},${coordQL1.y1} ${coordQL1.x},${coordQL1.y} L ${coordQL1.lx} ${coordQL1.ly}`;
+        const coordQL2 = {
+            // điểm cong số 2 của nhánh và đường thẳng đứng
+            y1: coordQL1.ly,
+            x1: this.mathOperatorsCalculation(direction, coordQL1.lx, canvasConfigReadonly().ELEMENT_HEIGHT_CURVE, true),
+            y: (coordQL1.ly ?? 0) + canvasConfigReadonly().ELEMENT_HEIGHT_CURVE,
+            x: this.mathOperatorsCalculation(direction, coordQL1.lx, canvasConfigReadonly().ELEMENT_HEIGHT_CURVE, true),
+        };
+        coordQL2.ly = (coordQL2.y ?? 0) + getDistanceFromBranchToFirstBlock(branch.nodeOtherConfig);
+        coordQL2.lx = coordQL2.x;
+        if (!branch.elements || !branch.elements.length) {
+            coordQL2.ly = maxHeightBranch + (coordQL2.ly ?? 0); // tổng chiều cao của nhánh + điểm xuất phát
+        }
+        let QL2 = `Q ${coordQL2.x1},${coordQL2.y1} ${coordQL2.x},${coordQL2.y} L ${coordQL2.lx} ${coordQL2.ly}`;
+        if (branch.nodeOtherConfig) {
+            const endYToWait = (coordQL2.y ?? 0) + canvasConfigReadonly().DISTANCE_TO_WAIT; // xử lý các line vào first element
+            const waitHeight = getHeightWaitConfig(branch.nodeOtherConfig);
+            const topStartLine2 = endYToWait + waitHeight;
+            delete branch.nodeOtherConfig.attributeSvgD;
+            QL2 = `Q ${coordQL2.x1},${coordQL2.y1} ${coordQL2.x},${coordQL2.y} M ${coordQL2.x},${coordQL2.y} L ${coordQL2.x},${endYToWait}`;
+            if (branch.elements && branch.elements.length) {
+                branch.nodeOtherConfig.attributeSvgD = `M ${coordQL2.x} ${topStartLine2} L ${coordQL2.x} ${coordQL2.ly}`;
+            }
+            branch.nodeOtherConfig.specific_y = endYToWait;
+            branch.nodeOtherConfig.specific_x = coordQL2.x;
+        }
+        branch.positionMaxLeft = coordQL2.lx;
+        branch.attributeSvgD = `${M} ${L} ${QL1} ${QL2}`;
+        const isCheckAllElementConnectToExit = this.checkChildrenConnectToExit(branch.elements);
+        checkMaxLeft(config, branch.nodeOtherConfig?.specific_x, branch.positionMaxLeft);
+        return { coordQL1, coordQL2, isCheckAllElementConnectToExit };
+    }
+    static checkChildrenConnectToExit(elements) {
+        let toExit = false;
+        if (elements.length && (elements[elements.length - 1].subCodeOfElement || elements[elements.length - 1].code) === canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+            toExit = true;
+            return toExit;
+        }
+        elements.forEach((element) => {
+            if (!element.branches || !element.branches.length) {
+                return;
+            }
+            let branchConnectToExit = 0;
+            element.branches.forEach((branch) => {
+                if (this.checkChildrenConnectToExit(branch.elements)) {
+                    branchConnectToExit++;
+                }
+            });
+            if (branchConnectToExit === element.branches.length) {
+                toExit = true;
+            }
+        });
+        return toExit;
+    }
+    /* 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);
+        }
+    }
+}
+
+const buildFlatElement = (elements, flatElementsContainer) => {
+    elements.forEach((element) => {
+        flatElementsContainer.push(element);
+        if (!element.branches || !element.branches.length) {
+            return;
+        }
+        flatElementHasBranch(element, flatElementsContainer);
+    });
+};
+const flatElementHasBranch = (element, flatElementsContainer) => {
+    if (!element.branches || !element.branches.length) {
+        return;
+    }
+    element.branches.forEach((branch) => {
+        if (!branch.elements || !branch.elements.length) {
+            return;
+        }
+        buildFlatElement(branch.elements, flatElementsContainer);
+    });
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const setAttributeSvgAndAppend = (svgElement, elementSvg, svgAttributePathD, color) => {
+    elementSvg?.setAttribute('d', svgAttributePathD);
+    elementSvg?.setAttribute('stroke', `#${color ?? canvasConfigReadonly().ELEMENT_SVG_STROKE_COLOR}`);
+    elementSvg?.setAttribute('fill', 'none');
+    elementSvg?.setAttribute('stroke-width', canvasConfigReadonly().ELEMENT_SVG_STROKE_WIDTH);
+    svgElement?.nativeElement.appendChild(elementSvg);
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const canvasRemoveChildInSvg = (svgElement) => {
+    if (!svgElement) {
+        return;
+    }
+    const children = Array.from(svgElement?.nativeElement.children);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    children.forEach((child) => {
+        if (child.tagName !== 'path') {
+            return;
+        }
+        child.remove();
+    });
+};
+const applyElementStyle = (el, element) => {
+    el.style.position = 'absolute';
+    el.style.top = '0';
+    el.style.left = '0';
+    el.style.transform = `translate(${element.translateX}px, ${element.translateY}px)`;
+    el.style.width = `${element.specific_width}px`;
+    el.style.height = `${element.specific_height}px`;
+    el.style.zIndex = '1';
+    el.style.willChange = 'transform';
+};
+
+class MoLibDiagramCalculatorCoordinatesUtil {
+    static setXYElements(elements, config, positionX) {
+        if (!elements || !elements.length) {
+            return;
+        }
+        elements.forEach((currentElement, index) => {
+            currentElement.specific_x = (currentElement.specific_x ?? 0) + (positionX ?? 0);
+            const preElement = elements[index - 1];
+            if (preElement) {
+                currentElement.specific_x = (preElement.specific_x ?? 0) + (preElement.specific_width ?? 0) / 2 - (currentElement.specific_width ?? 0) / 2;
+                currentElement.specific_y = (preElement.specific_y ?? 0) + (preElement.specific_height ?? 0) + checkElementGetHeight(preElement.nodeOtherConfig);
+                if (preElement.position_end_branch) {
+                    currentElement.specific_y = preElement.position_end_branch;
+                }
+            }
+            const top = currentElement.specific_y ?? 0;
+            const left = (currentElement.specific_x ?? 0) + (currentElement.specific_width ?? 0) / 2;
+            let lineBetweenElements = (currentElement.specific_height ?? 0) + checkElementGetHeight(currentElement.nodeOtherConfig);
+            if (currentElement.branches && currentElement.branches.length) {
+                lineBetweenElements = (currentElement.specific_height ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
+            }
+            const maxY = (currentElement.specific_y ?? 0) + (currentElement.specific_height ?? 0) + 200;
+            const maxXLeft = (currentElement.specific_x ?? 0) + (currentElement.specific_width ?? 0) + 100;
+            const configSvg = config.widthHeightSvgCanvas;
+            configSvg.heightSvg = maxY > configSvg.heightSvg ? maxY : configSvg.heightSvg;
+            configSvg.widthSvg = maxXLeft > configSvg.widthSvg ? maxXLeft : configSvg.widthSvg;
+            checkMaxLeft(config, currentElement.specific_x, currentElement.branches?.[0].positionMaxLeft);
+            if (!currentElement.branches || !currentElement.branches.length) {
+                // các element không có nhánh mới vẽ đường thẳng
+                const drawFormToHeightExit = (currentElement.subCodeOfElement || currentElement.code) === canvasConfigReadonly().TYPE_ELEMENT_EXIT ? (currentElement.specific_height ?? 0) / 2 : lineBetweenElements;
+                currentElement.attributeSvgD = `M ${left} ${top} l 0 ${drawFormToHeightExit}`;
+                currentElement.position_end = top + lineBetweenElements;
+                if (currentElement.nodeOtherConfig) {
+                    const waitHeight = getHeightWaitConfig(currentElement.nodeOtherConfig);
+                    const distanceElementToWait = (currentElement.specific_height ?? 0) + canvasConfigReadonly().DISTANCE_TO_WAIT;
+                    const topStartLine2 = top + distanceElementToWait + waitHeight;
+                    currentElement.attributeSvgD = `M ${left} ${top} l 0 ${distanceElementToWait}`;
+                    currentElement.position_end = topStartLine2 + lineBetweenElements;
+                    currentElement.nodeOtherConfig.specific_y = top + distanceElementToWait;
+                    currentElement.nodeOtherConfig.specific_x = left;
+                    delete currentElement.nodeOtherConfig.attributeSvgD;
+                    if (currentElement.subCodeOfElement !== canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+                        currentElement.nodeOtherConfig.attributeSvgD = `M ${left} ${topStartLine2} l 0 ${canvasConfigReadonly().WAIT_TO_ELEMENT}`;
+                    }
+                }
+                return;
+            }
+            // start các element có nhánh
+            const half = Math.ceil(currentElement.branches.length / 2);
+            const aboveHalf = currentElement.branches.slice(0, half);
+            const underHalf = currentElement.branches.slice(half);
+            let brachMiddle;
+            if (aboveHalf.length !== underHalf.length) {
+                brachMiddle = aboveHalf.pop();
+            }
+            // TÍNH CHIỀU Cao TỐI ĐA CỦA NHÁNH
+            const maxHeightBranch = {
+                height: 0,
+            };
+            MoLibDiagramCalculatorCoordinatesUtil.calculatorMaxBranchHeight(currentElement, maxHeightBranch);
+            currentElement.maxHeightBranch = maxHeightBranch.height;
+            const maxWidthBrachMiddle = { width: 0, aboveWidth: 0, underWidth: 0 };
+            const lineFormElementToBranching = (currentElement.specific_height ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
+            if (brachMiddle) {
+                this.calculatorWidthBranch(brachMiddle.elements, maxWidthBrachMiddle);
+                brachMiddle.widthBranch = {
+                    width: maxWidthBrachMiddle.width,
+                    above: maxWidthBrachMiddle.aboveWidth,
+                    under: maxWidthBrachMiddle.underWidth,
+                };
+                MoLibDiagramCalculatorBranchUtil.drawStraightLine(left, lineFormElementToBranching, top, brachMiddle, maxHeightBranch.height, config);
+            }
+            let hasNextSameParentElementNext = false;
+            const aboveHalfReverse = aboveHalf.reverse();
+            aboveHalfReverse.forEach((branch, indexBranch) => {
+                if (!hasNextSameParentElementNext) {
+                    const flatElementOnBranch = [];
+                    buildFlatElement(branch.elements, flatElementOnBranch);
+                    hasNextSameParentElementNext = !flatElementOnBranch || !flatElementOnBranch.length ? true : flatElementOnBranch.find((item) => item.next_id === currentElement.next_id) ? true : false;
+                }
+                branch.onTheSide = 'above';
+                const maxWidthBranch = { width: 0, aboveWidth: 0, underWidth: 0 }; // tính chiều ngang để cách nhánh trên or dưới
+                this.calculatorWidthBranch(branch.elements, maxWidthBranch);
+                branch.widthBranch = {
+                    width: maxWidthBranch.width,
+                    above: maxWidthBranch.aboveWidth,
+                    under: maxWidthBranch.underWidth,
+                };
+                const branchPre = aboveHalfReverse[indexBranch - 1];
+                let lineBetweenBranch = maxWidthBranch.underWidth + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2;
+                if (branchPre) {
+                    lineBetweenBranch += (branchPre.widthBranch?.width ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT;
+                }
+                if (brachMiddle) {
+                    lineBetweenBranch += (brachMiddle.widthBranch?.above ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2;
+                }
+                // nhánh trái
+                MoLibDiagramCalculatorBranchUtil.leftLine(left, lineFormElementToBranching, top, lineBetweenBranch, branch, maxHeightBranch.height, currentElement, config);
+            });
+            underHalf.forEach((branch, indexBranch) => {
+                if (!hasNextSameParentElementNext) {
+                    const flatElementOnBranch = [];
+                    buildFlatElement(branch.elements, flatElementOnBranch);
+                    hasNextSameParentElementNext = !flatElementOnBranch || !flatElementOnBranch.length ? true : flatElementOnBranch.find((item) => item.next_id === currentElement.next_id) ? true : false;
+                }
+                branch.onTheSide = 'under';
+                const maxWidthBranch = { width: 0, aboveWidth: 0, underWidth: 0 }; // tính chiều cao để cách nhánh trên or dưới
+                this.calculatorWidthBranch(branch.elements, maxWidthBranch);
+                branch.widthBranch = {
+                    width: maxWidthBranch.width,
+                    above: maxWidthBranch.aboveWidth,
+                    under: maxWidthBranch.underWidth,
+                };
+                const branchPre = underHalf[indexBranch - 1];
+                let lineBetweenBranch = maxWidthBranch.aboveWidth + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2;
+                if (branchPre) {
+                    lineBetweenBranch += (branchPre.widthBranch?.width ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT;
+                }
+                if (brachMiddle) {
+                    lineBetweenBranch += (brachMiddle.widthBranch?.under ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2;
+                }
+                // nhánh phải
+                MoLibDiagramCalculatorBranchUtil.rightLine(left, lineFormElementToBranching, top, lineBetweenBranch, branch, maxHeightBranch.height, currentElement, config);
+            });
+        });
+        // Set translateX và translateY để có thể render nodes
+        this.setTranslatePositions(elements);
+    }
+    /**
+     * Set translateX và translateY từ specific_x và specific_y cho tất cả elements (bao gồm branches)
+     */
+    static setTranslatePositions(elements) {
+        elements.forEach((element) => {
+            // Set position cho element chính
+            element.translateX = element.specific_x;
+            element.translateY = element.specific_y;
+            // Set position cho nodeOtherConfig nếu có
+            if (element.nodeOtherConfig) {
+                const offsetX = (element.nodeOtherConfig.specific_width ?? 0) / 2;
+                element.nodeOtherConfig.translateX = (element.nodeOtherConfig.specific_x ?? 0) - offsetX;
+                element.nodeOtherConfig.translateY = element.nodeOtherConfig.specific_y;
+            }
+            // Recursively set positions cho elements trong branches
+            if (element.branches && element.branches.length > 0) {
+                element.branches.forEach((branch) => {
+                    // Set position cho branch nodeOtherConfig nếu có
+                    if (branch.nodeOtherConfig) {
+                        const offsetX = (branch.nodeOtherConfig.specific_width ?? 0) / 2;
+                        branch.nodeOtherConfig.translateX = (branch.nodeOtherConfig.specific_x ?? 0) - offsetX;
+                        branch.nodeOtherConfig.translateY = branch.nodeOtherConfig.specific_y;
+                    }
+                    // Recursively set positions cho elements trong branch
+                    if (branch.elements && branch.elements.length > 0) {
+                        this.setTranslatePositions(branch.elements);
+                    }
+                });
+            }
+        });
+    }
+    static calculatorMaxBranchHeight(element, maxHeightBranch) {
+        if (!element.branches || !element.branches.length) {
+            return;
+        }
+        element.branches.forEach((branch) => {
+            if (!branch.elements || !branch.elements.length) {
+                const lineBranchNoHasElement = canvasConfigReadonly().ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT;
+                maxHeightBranch.height = lineBranchNoHasElement > maxHeightBranch.height ? lineBranchNoHasElement : maxHeightBranch.height;
+                return;
+            }
+            const total = {
+                height: 0,
+            };
+            this.plusHeightElementInBranch(branch.elements, total);
+            maxHeightBranch.height = total.height > maxHeightBranch.height ? total.height : maxHeightBranch.height;
+        });
+    }
+    static plusHeightElementInBranch(elements, total) {
+        elements.forEach((element) => {
+            const margin = !element.branches || !element.branches.length ? checkElementGetHeight(element.nodeOtherConfig) : canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
+            total.height += (element.specific_height ?? 0) + margin;
+            if (!element.branches || !element.branches.length) {
+                return;
+            }
+            total.height += 64; // từ chiều đường thẳng ngang xuống đến nhánh đầu tiên
+            const theMostElementsInBranch = {
+                height: 0,
+            };
+            element.branches.forEach((branch) => {
+                const heightInBranch = { height: 0 };
+                heightInBranch.height += canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH_TO_ELEMENT_FIRST + 20; // đường cong kết thúc nhánh + 10px đường cong
+                if (!branch.elements || !branch.elements.length) {
+                    heightInBranch.height += canvasConfigReadonly().ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT;
+                    if (theMostElementsInBranch.height < heightInBranch.height) {
+                        theMostElementsInBranch.height = heightInBranch.height;
+                    }
+                    return;
+                }
+                this.plusHeightElementInBranch(branch.elements, heightInBranch);
+                if (theMostElementsInBranch.height < heightInBranch.height) {
+                    theMostElementsInBranch.height = heightInBranch.height;
+                }
+            });
+            total.height += theMostElementsInBranch.height;
+        });
+    }
+    static calculatorWidthBranch(elements, maxWidth, log) {
+        if (!elements || !elements.length) {
+            const width = canvasConfigReadonly().DEFAULT_BRANCH_WHEN_NO_ELEMENT;
+            maxWidth.width = width;
+            maxWidth.aboveWidth = width / 2;
+            maxWidth.underWidth = width / 2;
+            return;
+        }
+        const maxWidthInElements = { width: 0, aboveWidth: 0, underWidth: 0 };
+        elements.forEach((element) => {
+            if (!element.branches || !element.branches.length) {
+                // tính chiều cao của từng element 1, vì chiều cao của từng thằng có thể khác nhau
+                if ((element.specific_width ?? 0) < maxWidthInElements.width) {
+                    return;
+                }
+                const width = element.specific_width ?? 0;
+                maxWidthInElements.width = width;
+                maxWidthInElements.aboveWidth = width / 2;
+                maxWidthInElements.underWidth = width / 2;
+                return;
+            }
+            const widthElementIncludeBranch = { width: 0, aboveWidth: 0, underWidth: 0 };
+            const width = element.specific_width ?? 0;
+            if (width > widthElementIncludeBranch.width) {
+                widthElementIncludeBranch.width = width;
+                widthElementIncludeBranch.aboveWidth = width / 2;
+                widthElementIncludeBranch.underWidth = width / 2;
+            }
+            const half = Math.ceil(element.branches.length / 2);
+            const aboveHalf = element.branches.slice(0, half);
+            const underHalf = element.branches.slice(half);
+            let brachMiddle;
+            if (aboveHalf.length !== underHalf.length) {
+                brachMiddle = aboveHalf.pop();
+            }
+            if (brachMiddle) {
+                brachMiddle.onTheSide = 'center';
+            }
+            aboveHalf.forEach((branch) => (branch.onTheSide = 'above'));
+            underHalf.forEach((branch) => (branch.onTheSide = 'under'));
+            // tính chiều cao của từng nhánh 1, rồi tính tổng => so sánh với chiều cao xem element có nhánh nào cao nhất thì lấy
+            const widthBranch = { width: 0, aboveWidth: 0, underWidth: 0 };
+            element.branches.forEach((branch) => {
+                const width = { width: 0, aboveWidth: 0, underWidth: 0 }; // tính chiều cao của từng nhánh 1
+                this.calculatorWidthBranch(branch.elements, width, log);
+                switch (branch.onTheSide) {
+                    case 'above':
+                        widthBranch.aboveWidth += width.width;
+                        break;
+                    case 'under':
+                        widthBranch.underWidth += width.width;
+                        break;
+                    case 'center':
+                        widthBranch.aboveWidth += width.aboveWidth;
+                        widthBranch.underWidth += width.underWidth;
+                        break;
+                }
+            });
+            const marginBetweenBranch = (element.branches.length - 1) * canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT;
+            widthBranch.aboveWidth += marginBetweenBranch / 2;
+            widthBranch.underWidth += marginBetweenBranch / 2;
+            const maxAboveWidth = Math.max(widthElementIncludeBranch.aboveWidth, widthBranch.aboveWidth);
+            const maxUnderWidth = Math.max(widthElementIncludeBranch.underWidth, widthBranch.underWidth);
+            if (maxWidthInElements.aboveWidth < maxAboveWidth) {
+                maxWidthInElements.aboveWidth = maxAboveWidth;
+            }
+            if (maxWidthInElements.underWidth < maxUnderWidth) {
+                maxWidthInElements.underWidth = maxUnderWidth;
+            }
+            maxWidthInElements.width = maxWidthInElements.aboveWidth + maxWidthInElements.underWidth;
+        });
+        maxWidth.width += maxWidthInElements.aboveWidth + maxWidthInElements.underWidth;
+        maxWidth.aboveWidth += maxWidthInElements.aboveWidth;
+        maxWidth.underWidth += maxWidthInElements.underWidth;
+    }
+}
+const checkElementGetHeight = (hasWaitConfig) => {
+    if (hasWaitConfig) {
+        return canvasConfigReadonly().DISTANCE_TO_WAIT + getHeightWaitConfig(hasWaitConfig) + canvasConfigReadonly().WAIT_TO_ELEMENT;
+    }
+    return canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT;
+};
+const getDistanceFromBranchToFirstBlock = (hasWaitConfig) => {
+    if (hasWaitConfig) {
+        return canvasConfigReadonly().DISTANCE_TO_WAIT + getHeightWaitConfig(hasWaitConfig) + canvasConfigReadonly().WAIT_TO_ELEMENT;
+    }
+    return canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH_TO_ELEMENT_FIRST;
+};
+const getHeightWaitConfig = (hasWaitConfig) => {
+    if (hasWaitConfig) {
+        return (hasWaitConfig.specific_height ?? canvasConfigReadonly().ELEMENT_WAIT_DEFAULT) + canvasConfigReadonly().DISTANCE_WAIT_TO_NEXT_LINE;
+    }
+    return canvasConfigReadonly().ELEMENT_WAIT_DEFAULT + canvasConfigReadonly().DISTANCE_WAIT_TO_NEXT_LINE;
+};
+const checkMaxLeft = (config, specific_x, positionMaxLeft) => {
+    let numberTranslatePosition = config.positionMaxLeft;
+    if (numberTranslatePosition === 0 && specific_x && specific_x > 0 && specific_x < 50) {
+        numberTranslatePosition = -50;
+    }
+    if (specific_x && specific_x < numberTranslatePosition) {
+        numberTranslatePosition = specific_x;
+    }
+    if (positionMaxLeft && positionMaxLeft < numberTranslatePosition) {
+        numberTranslatePosition = positionMaxLeft;
+    }
+    if (numberTranslatePosition === config.positionMaxLeft) {
+        return;
+    }
+    config.positionMaxLeft = numberTranslatePosition;
+};
+const checkMaxTop = (config, specific_y, positionMaxTop) => {
+    let numberTranslatePosition = config.positionMaxTop;
+    if (numberTranslatePosition === 0 && specific_y && specific_y > 0 && specific_y < 100) {
+        numberTranslatePosition = specific_y - 120;
+    }
+    if (specific_y && specific_y < numberTranslatePosition) {
+        numberTranslatePosition = specific_y;
+    }
+    if (positionMaxTop && positionMaxTop < numberTranslatePosition) {
+        numberTranslatePosition = positionMaxTop;
+    }
+    if (numberTranslatePosition === config.positionMaxTop) {
+        return;
+    }
+    config.positionMaxTop = numberTranslatePosition;
+};
+
+/**
+ * Horizontal branch calculator.
+ * Flow direction: LEFT → RIGHT (trái sang phải).
+ * Branches spread:  above = UP (y giảm),  under = DOWN (y tăng).
+ *
+ * Mapping từ trục dọc sang ngang:
+ *   vertical "left"  branch (x giảm) ↔ horizontal "above" branch (y giảm)
+ *   vertical "right" branch (x tăng) ↔ horizontal "under" branch  (y tăng)
+ *
+ * Ký hiệu trong ICoordinatesDiagramSvg:
+ *   (mx,my) = điểm bắt đầu Q curve
+ *   (x1,y1) = control point
+ *   (x,y)   = end point của Q curve
+ *   (lx,ly) = điểm cuối của L sau Q
+ */
+class MoLibDiagramHorizontalCalculatorBranchUtil {
+    static getHorizontalDistanceToFirstBlock(branch) {
+        if (branch.nodeOtherConfig) {
+            const distToWait = 110; // increase statically since branch label is always assigned later
+            return distToWait + getHeightWaitConfig(branch.nodeOtherConfig) + canvasConfigReadonly().WAIT_TO_ELEMENT;
+        }
+        return canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH_TO_ELEMENT_FIRST;
+    }
+    // ─────────────────────────────────────────────────────────────────── public ──
+    /** Nhánh giữa (center): kéo thẳng sang phải */
+    static drawStraightLine(top, // Y tâm của element cha
+    lineFormElementToBranching, // width element + margin đến điểm rẽ
+    left, // X trái của element cha
+    branch, maxWidthBranch, config) {
+        branch.onTheSide = 'center';
+        const startDraw = left + lineFormElementToBranching;
+        let Lx = startDraw;
+        Lx += canvasConfigReadonly().ELEMENT_HEIGHT_CURVE;
+        Lx += this.getHorizontalDistanceToFirstBlock(branch);
+        if (!branch.elements || !branch.elements.length) {
+            Lx += maxWidthBranch + 20;
+        }
+        const coord1 = { mx: left, my: top, lx: Lx, ly: top };
+        branch.attributeSvgD = `M ${coord1.mx} ${coord1.my} L ${coord1.lx} ${coord1.ly}`;
+        if (branch.nodeOtherConfig) {
+            const distToWait = 110;
+            const endXToWait = startDraw + canvasConfigReadonly().ELEMENT_HEIGHT_CURVE + distToWait;
+            branch.attributeSvgD = `M ${coord1.mx} ${coord1.my} L ${endXToWait} ${coord1.my}`;
+            const waitWidth = getHeightWaitConfig(branch.nodeOtherConfig);
+            const leftLine2 = endXToWait + waitWidth;
+            delete branch.nodeOtherConfig.attributeSvgD;
+            if (branch.elements && branch.elements.length) {
+                branch.nodeOtherConfig.attributeSvgD = `M ${leftLine2} ${coord1.my} L ${coord1.lx} ${coord1.my}`;
+            }
+            branch.nodeOtherConfig.specific_x = endXToWait;
+            branch.nodeOtherConfig.specific_y = coord1.my;
+            // Đảm bảo có kích thước để setTranslatePositions tính offset đúng
+            if (!branch.nodeOtherConfig.specific_height) {
+                branch.nodeOtherConfig.specific_height = canvasConfigReadonly().ELEMENT_WAIT_DEFAULT;
+            }
+            if (!branch.nodeOtherConfig.specific_width) {
+                branch.nodeOtherConfig.specific_width = canvasConfigReadonly().ELEMENT_WAIT_DEFAULT;
+            }
+        }
+        branch.specific_start_branch_x = left + lineFormElementToBranching + canvasConfigReadonly().ELEMENT_HEIGHT_CURVE;
+        branch.specific_start_branch_y = top;
+        if (!branch.elements || !branch.elements.length)
+            return;
+        const widthToElement = canvasConfigReadonly().ELEMENT_HEIGHT_CURVE + this.getHorizontalDistanceToFirstBlock(branch);
+        branch.elements.forEach((el) => {
+            el.specific_x = left + lineFormElementToBranching + widthToElement;
+            el.specific_y = top - (el.specific_height ?? 0) / 2;
+        });
+        MoLibDiagramHorizontalCalculatorCoordinatesUtil.setXYElements(branch.elements, config);
+    }
+    /** Nhánh phía trên (above): rẽ lên, rồi bẻ phải đến element */
+    static aboveLine(top, lineFormElementToBranching, left, lineBetweenBranch, branch, maxWidthBranch, element, config) {
+        branch.onTheSide = 'above';
+        const { coordQL2, isCheckAllElementConnectToExit } = this.drawAboveUnderLine(top, lineFormElementToBranching, left, lineBetweenBranch, branch, maxWidthBranch, 'above', config);
+        branch.specific_start_branch_x = coordQL2.x;
+        branch.specific_start_branch_y = coordQL2.y;
+        if (!branch.elements || !branch.elements.length)
+            return;
+        this.drawElementInBranchLine(branch, coordQL2, config);
+        if (isCheckAllElementConnectToExit)
+            return;
+    }
+    /** Nhánh phía dưới (under): rẽ xuống, rồi bẻ phải đến element */
+    static underLine(top, lineFormElementToBranching, left, lineBetweenBranch, branch, maxWidthBranch, element, config) {
+        branch.onTheSide = 'under';
+        const { coordQL1, coordQL2, isCheckAllElementConnectToExit } = this.drawAboveUnderLine(top, lineFormElementToBranching, left, lineBetweenBranch, branch, maxWidthBranch, 'under', config);
+        branch.specific_start_branch_x = coordQL2.x;
+        branch.specific_start_branch_y = coordQL2.y;
+        // Mở rộng widthSvg nếu nhánh xuống vượt
+        const maxY = (coordQL1.y ?? 0) + 200;
+        const configSvg = config.widthHeightSvgCanvas;
+        configSvg.heightSvg = maxY > configSvg.heightSvg ? maxY : configSvg.heightSvg;
+        if (!branch.elements || !branch.elements.length)
+            return;
+        this.drawElementInBranchLine(branch, coordQL2, config);
+        if (isCheckAllElementConnectToExit)
+            return;
+    }
+    // ────────────────────────────────────────────────────────────────── private ──
+    /** Đặt element đầu tiên trong nhánh dựa theo tọa độ cuối của QL2 */
+    static drawElementInBranchLine(branch, coordQL2, config) {
+        const elementFirst = branch.elements[0];
+        // lx = X bắt đầu của element; ly = Y tâm nhánh → specific_y = tâm - half height
+        elementFirst.specific_x = coordQL2.lx;
+        elementFirst.specific_y = (coordQL2.ly ?? 0) - (elementFirst.specific_height ?? 0) / 2;
+        MoLibDiagramHorizontalCalculatorCoordinatesUtil.setXYElements(branch.elements, config);
+    }
+    /**
+     * Vẽ đường rẽ nhánh kiểu horizontal:
+     *
+     *   M left top          → bắt đầu tại tâm Y của element cha
+     *   L Lx   top          → kéo NGANG sang phải đến điểm rẽ  (Lx = left + lineFormElementToBranching - CURVE)
+     *
+     *   QL1: bẻ từ hướng → sang hướng ↑ (above) hoặc ↓ (under)
+     *     M (Lx, top)
+     *     Q (Lx+C, top)  →  (Lx+C, top±C)       control đi thẳng phải, điểm kết bắt đầu đi dọc
+     *     L  Lx+C, top±C±straight               kéo thẳng dọc (lên/xuống)
+     *
+     *   QL2: bẻ ngược lại → hướng ngang để tới element
+     *     Q (Lx+C, top±C±straight±C)  →  (Lx+2C, top±C±straight±C)
+     *                                   control đi tiếp dọc, điểm kết đi ngang (phải)
+     *     L  Lx+2C+distToFirst, same_Y   kéo ngang đến vị trí element đầu tiên
+     *
+     *   Sau QL2:
+     *     coordQL2.lx  = X bắt đầu của element đầu tiên
+     *     coordQL2.ly  = Y tâm của nhánh
+     */
+    static drawAboveUnderLine(top, lineFormElementToBranching, left, lineBetweenBranch, branch, maxWidthBranch, direction, config) {
+        const CURVE = canvasConfigReadonly().ELEMENT_HEIGHT_CURVE;
+        const M = `M ${left} ${top}`;
+        const Lx = left + lineFormElementToBranching - CURVE;
+        const L = `L ${Lx} ${top}`;
+        const straight = lineBetweenBranch - CURVE * 2; // đoạn thẳng dọc (bỏ 2 cong đầu-cuối)
+        // ── QL1: curve từ hướng ngang → hướng dọc (lên/xuống), rồi thẳng dọc ────
+        const coordQL1 = {
+            mx: Lx,
+            my: top,
+            x1: Lx + CURVE, // control: đi thẳng phải thêm CURVE
+            y1: top, // control: cùng Y
+            x: Lx + CURVE, // end X: giữ nguyên (= Lx+CURVE)
+            y: this.mathOp(direction, top, CURVE, true),
+            //   'above': top - CURVE  (bắt đầu đi lên)
+            //   'under': top + CURVE  (bắt đầu đi xuống)
+        };
+        // Đoạn L sau QL1: giữ nguyên X, tiếp tục đi dọc
+        coordQL1.lx = coordQL1.x; // X không đổi
+        coordQL1.ly = this.mathOp(direction, coordQL1.y, straight, true); // tiếp tục lên/xuống
+        const QL1 = `M ${coordQL1.mx},${coordQL1.my} Q ${coordQL1.x1},${coordQL1.y1} ${coordQL1.x},${coordQL1.y} L ${coordQL1.lx} ${coordQL1.ly}`;
+        // ── QL2: curve từ hướng dọc → hướng ngang (phải), rồi thẳng ngang đến element ──
+        const coordQL2 = {
+            // control: tiếp tục đi dọc thêm CURVE từ điểm cuối QL1
+            x1: coordQL1.lx,
+            y1: this.mathOp(direction, coordQL1.ly, CURVE, true),
+            // end: rẽ ngang sang phải thêm CURVE, giữ nguyên Y tại y1
+            y: this.mathOp(direction, coordQL1.ly, CURVE, true),
+            x: (coordQL1.lx ?? 0) + CURVE,
+        };
+        // Đoạn L sau QL2: đi ngang (phải) đến vị trí element đầu tiên trong nhánh
+        const distToFirst = this.getHorizontalDistanceToFirstBlock(branch);
+        if (!branch.elements || !branch.elements.length) {
+            coordQL2.lx = (coordQL2.x ?? 0) + distToFirst + maxWidthBranch;
+        }
+        else {
+            coordQL2.lx = (coordQL2.x ?? 0) + distToFirst;
+        }
+        coordQL2.ly = coordQL2.y; // Y không đổi → tâm Y của nhánh
+        // Xử lý nodeOtherConfig (wait block) trên nhánh
+        let QL2 = `Q ${coordQL2.x1},${coordQL2.y1} ${coordQL2.x},${coordQL2.y} L ${coordQL2.lx} ${coordQL2.ly}`;
+        if (branch.nodeOtherConfig) {
+            const distToWait = 110;
+            const endXToWait = (coordQL2.x ?? 0) + distToWait;
+            const waitWidth = getHeightWaitConfig(branch.nodeOtherConfig);
+            const leftLine2 = endXToWait + waitWidth;
+            delete branch.nodeOtherConfig.attributeSvgD;
+            QL2 = `Q ${coordQL2.x1},${coordQL2.y1} ${coordQL2.x},${coordQL2.y} M ${coordQL2.x},${coordQL2.y} L ${endXToWait},${coordQL2.y}`;
+            if (branch.elements && branch.elements.length) {
+                branch.nodeOtherConfig.attributeSvgD = `M ${leftLine2} ${coordQL2.y} L ${coordQL2.lx} ${coordQL2.ly}`;
+            }
+            branch.nodeOtherConfig.specific_x = endXToWait;
+            // specific_y = tâm Y của nhánh — setTranslatePositions sẽ trừ height/2 khi set translateY
+            branch.nodeOtherConfig.specific_y = coordQL2.y ?? 0;
+            // Đảm bảo có kích thước để setTranslatePositions tính offset đúng
+            if (!branch.nodeOtherConfig.specific_height) {
+                branch.nodeOtherConfig.specific_height = canvasConfigReadonly().ELEMENT_WAIT_DEFAULT;
+            }
+            if (!branch.nodeOtherConfig.specific_width) {
+                branch.nodeOtherConfig.specific_width = canvasConfigReadonly().ELEMENT_WAIT_DEFAULT;
+            }
+        }
+        branch.attributeSvgD = `${M} ${L} ${QL1} ${QL2}`;
+        const isCheckAllElementConnectToExit = this.checkChildrenConnectToExit(branch.elements);
+        branch.positionMaxTop = coordQL2.y;
+        checkMaxTop(config, branch.nodeOtherConfig?.specific_y, branch.positionMaxTop);
+        return { coordQL1, coordQL2, isCheckAllElementConnectToExit };
+    }
+    static checkChildrenConnectToExit(elements) {
+        let toExit = false;
+        if (elements.length &&
+            (elements[elements.length - 1].subCodeOfElement || elements[elements.length - 1].code) === canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+            return true;
+        }
+        elements.forEach((element) => {
+            if (!element.branches || !element.branches.length)
+                return;
+            let branchConnectToExit = 0;
+            element.branches.forEach((branch) => {
+                if (this.checkChildrenConnectToExit(branch.elements))
+                    branchConnectToExit++;
+            });
+            if (branchConnectToExit === element.branches.length)
+                toExit = true;
+        });
+        return toExit;
+    }
+    /**
+     * Quy ước:
+     *   above + opposite=true → a - b  (đi lên, y giảm)
+     *   above + opposite=false → a + b
+     *   under + opposite=true → a + b  (đi xuống, y tăng)
+     *   under + opposite=false → a - b
+     */
+    static mathOp(direction, a, b, opposite) {
+        const av = a ?? 0;
+        const bv = b ?? 0;
+        switch (direction) {
+            case 'above':
+                return opposite ? av - bv : av + bv;
+            case 'under':
+                return opposite ? av + bv : av - bv;
+            default:
+                return av - bv;
+        }
+    }
+    /** Alias để tương thích với code cũ gọi mathOperatorsCalculation */
+    static mathOperatorsCalculation(direction, a, b, opposite) {
+        return this.mathOp(direction, a, b, opposite);
+    }
+}
+
+/**
+ * Horizontal layout calculator.
+ * Mirrors MoLibDiagramCalculatorCoordinatesUtil (vertical) but rotated 90°:
+ *  - Elements grow LEFT → RIGHT  (specific_x advances along main axis)
+ *  - Branches split UP / DOWN    (specific_y for branch offset)
+ *  - "above" branch = upper side (y decreases)
+ *  - "under" branch = lower side (y increases)
+ *
+ * Key axis mapping vs. vertical:
+ *   vertical: specific_y ↕  specific_x centered
+ *   horizontal: specific_x → specific_y centered
+ */
+class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
+    static setXYElements(elements, config, positionY) {
+        if (!elements || !elements.length) {
+            return;
+        }
+        elements.forEach((currentElement, index) => {
+            currentElement.specific_y = (currentElement.specific_y ?? 0) + (positionY ?? 0);
+            const preElement = elements[index - 1];
+            if (preElement) {
+                // Trong horizontal: y (chiều cao) căn giữa theo preElement, x tiến sang phải
+                currentElement.specific_y = (preElement.specific_y ?? 0) + (preElement.specific_height ?? 0) / 2 - (currentElement.specific_height ?? 0) / 2;
+                currentElement.specific_x = (preElement.specific_x ?? 0) + (preElement.specific_width ?? 0) + this.checkElementGetMargin(preElement.nodeOtherConfig);
+                if (preElement.position_end_branch) {
+                    currentElement.specific_x = preElement.position_end_branch;
+                }
+            }
+            checkMaxTop(config, currentElement.specific_y, currentElement.branches?.[0]?.positionMaxTop);
+            const top = currentElement.specific_y ?? 0;
+            const left = (currentElement.specific_x ?? 0) + (currentElement.specific_width ?? 0) / 2; // điểm giữa theo X (điểm vẽ SVG)
+            let lineBetweenElements = (currentElement.specific_width ?? 0) + this.checkElementGetMargin(currentElement.nodeOtherConfig);
+            if (currentElement.branches && currentElement.branches.length) {
+                lineBetweenElements = (currentElement.specific_width ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
+            }
+            const maxY = (currentElement.specific_y ?? 0) + (currentElement.specific_height ?? 0) + 200;
+            const maxXRight = (currentElement.specific_x ?? 0) + (currentElement.specific_width ?? 0) + 200;
+            const configSvg = config.widthHeightSvgCanvas;
+            configSvg.heightSvg = maxY > configSvg.heightSvg ? maxY : configSvg.heightSvg;
+            configSvg.widthSvg = maxXRight > configSvg.widthSvg ? maxXRight : configSvg.widthSvg;
+            if (!currentElement.branches || !currentElement.branches.length) {
+                // Element không có nhánh: vẽ đường thẳng ngang
+                const drawFormToWidthExit = (currentElement.subCodeOfElement || currentElement.code) === canvasConfigReadonly().TYPE_ELEMENT_EXIT ? (currentElement.specific_width ?? 0) / 2 : lineBetweenElements;
+                currentElement.attributeSvgD = `M ${currentElement.specific_x ?? 0} ${top + (currentElement.specific_height ?? 0) / 2} l ${drawFormToWidthExit} 0`;
+                currentElement.position_end = (currentElement.specific_x ?? 0) + lineBetweenElements;
+                if (currentElement.nodeOtherConfig) {
+                    const waitWidth = this.getWidthWaitConfig(currentElement.nodeOtherConfig);
+                    const distanceElementToWait = (currentElement.specific_width ?? 0) + canvasConfigReadonly().DISTANCE_TO_WAIT;
+                    const leftStartLine2 = (currentElement.specific_x ?? 0) + distanceElementToWait + waitWidth;
+                    currentElement.attributeSvgD = `M ${currentElement.specific_x ?? 0} ${top + (currentElement.specific_height ?? 0) / 2} l ${distanceElementToWait} 0`;
+                    currentElement.position_end = leftStartLine2 + lineBetweenElements;
+                    currentElement.nodeOtherConfig.specific_x = (currentElement.specific_x ?? 0) + distanceElementToWait;
+                    // specific_y = tâm Y của đường line — setTranslatePositions sẽ trừ height/2 để căn giữa dọc
+                    currentElement.nodeOtherConfig.specific_y = top + (currentElement.specific_height ?? 0) / 2;
+                    // Đảm bảo có kích thước để setTranslatePositions tính offset đúng
+                    if (!currentElement.nodeOtherConfig.specific_height) {
+                        currentElement.nodeOtherConfig.specific_height = canvasConfigReadonly().ELEMENT_WAIT_DEFAULT;
+                    }
+                    if (!currentElement.nodeOtherConfig.specific_width) {
+                        currentElement.nodeOtherConfig.specific_width = canvasConfigReadonly().ELEMENT_WAIT_DEFAULT;
+                    }
+                    delete currentElement.nodeOtherConfig.attributeSvgD;
+                    if (currentElement.subCodeOfElement !== canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+                        currentElement.nodeOtherConfig.attributeSvgD = `M ${leftStartLine2} ${top + (currentElement.specific_height ?? 0) / 2} l ${canvasConfigReadonly().WAIT_TO_ELEMENT} 0`;
+                    }
+                }
+                return;
+            }
+            // Elements có nhánh
+            const half = Math.ceil(currentElement.branches.length / 2);
+            const aboveHalf = currentElement.branches.slice(0, half);
+            const underHalf = currentElement.branches.slice(half);
+            let brachMiddle;
+            if (aboveHalf.length !== underHalf.length) {
+                brachMiddle = aboveHalf.pop();
+            }
+            // TÍNH CHIỀU CAO TỐI ĐA CỦA NHÁNH (đây là chiều rộng trong horizontal context nhưng
+            // dùng chung maxHeightBranch để đơn giản, ý nghĩa là "khoảng trống tối thiểu dành cho nhánh không có element")
+            const maxWidthBranch = { width: 0 };
+            this.calculatorMaxBranchWidth(currentElement, maxWidthBranch);
+            currentElement.maxHeightBranch = maxWidthBranch.width;
+            const maxWidthBrachMiddle = { width: 0, aboveWidth: 0, underWidth: 0 };
+            const lineFormElementToBranching = (currentElement.specific_width ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
+            // top = y + height/2: điểm giữa theo chiều Y → dùng làm tọa độ Y của đường ngang chính
+            const topMid = top + (currentElement.specific_height ?? 0) / 2;
+            if (brachMiddle) {
+                brachMiddle.onTheSide = 'center';
+                this.calculatorHeightBranch(brachMiddle.elements, maxWidthBrachMiddle);
+                brachMiddle.widthBranch = {
+                    width: maxWidthBrachMiddle.width,
+                    above: maxWidthBrachMiddle.aboveWidth,
+                    under: maxWidthBrachMiddle.underWidth,
+                };
+                MoLibDiagramHorizontalCalculatorBranchUtil.drawStraightLine(topMid, lineFormElementToBranching, currentElement.specific_x ?? 0, brachMiddle, maxWidthBranch.width, config);
+            }
+            let hasNextSameParentElementNext = false;
+            const aboveHalfReverse = aboveHalf.reverse();
+            aboveHalfReverse.forEach((branch, indexBranch) => {
+                if (!hasNextSameParentElementNext) {
+                    const flatElementOnBranch = [];
+                    buildFlatElement(branch.elements, flatElementOnBranch);
+                    hasNextSameParentElementNext = !flatElementOnBranch || !flatElementOnBranch.length ? true : flatElementOnBranch.find((item) => item.next_id === currentElement.next_id) ? true : false;
+                }
+                branch.onTheSide = 'above';
+                const maxWidthB = { width: 0, aboveWidth: 0, underWidth: 0 };
+                this.calculatorHeightBranch(branch.elements, maxWidthB);
+                branch.widthBranch = {
+                    width: maxWidthB.width,
+                    above: maxWidthB.aboveWidth,
+                    under: maxWidthB.underWidth,
+                };
+                const branchPre = aboveHalfReverse[indexBranch - 1];
+                let lineBetweenBranch = maxWidthB.underWidth + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2;
+                if (branchPre) {
+                    lineBetweenBranch += (branchPre.widthBranch?.width ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT;
+                }
+                if (brachMiddle) {
+                    lineBetweenBranch += (brachMiddle.widthBranch?.above ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2;
+                }
+                MoLibDiagramHorizontalCalculatorBranchUtil.aboveLine(topMid, lineFormElementToBranching, currentElement.specific_x ?? 0, lineBetweenBranch, branch, maxWidthBranch.width, currentElement, config);
+            });
+            underHalf.forEach((branch, indexBranch) => {
+                if (!hasNextSameParentElementNext) {
+                    const flatElementOnBranch = [];
+                    buildFlatElement(branch.elements, flatElementOnBranch);
+                    hasNextSameParentElementNext = !flatElementOnBranch || !flatElementOnBranch.length ? true : flatElementOnBranch.find((item) => item.next_id === currentElement.next_id) ? true : false;
+                }
+                branch.onTheSide = 'under';
+                const maxWidthB = { width: 0, aboveWidth: 0, underWidth: 0 };
+                this.calculatorHeightBranch(branch.elements, maxWidthB);
+                branch.widthBranch = {
+                    width: maxWidthB.width,
+                    above: maxWidthB.aboveWidth,
+                    under: maxWidthB.underWidth,
+                };
+                const branchPre = underHalf[indexBranch - 1];
+                let lineBetweenBranch = maxWidthB.aboveWidth + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2;
+                if (branchPre) {
+                    lineBetweenBranch += (branchPre.widthBranch?.width ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT;
+                }
+                if (brachMiddle) {
+                    lineBetweenBranch += (brachMiddle.widthBranch?.under ?? 0) + canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT / 2;
+                }
+                MoLibDiagramHorizontalCalculatorBranchUtil.underLine(topMid, lineFormElementToBranching, currentElement.specific_x ?? 0, lineBetweenBranch, branch, maxWidthBranch.width, currentElement, config);
+            });
+        });
+        this.setTranslatePositions(elements);
+    }
+    /**
+     * Set translateX/Y cho tất cả elements (bao gồm branches và nodeOtherConfig)
+     */
+    static setTranslatePositions(elements) {
+        elements.forEach((element) => {
+            element.translateX = element.specific_x;
+            element.translateY = element.specific_y;
+            if (element.nodeOtherConfig) {
+                const offsetY = (element.nodeOtherConfig.specific_height ?? 0) / 2;
+                element.nodeOtherConfig.translateX = element.nodeOtherConfig.specific_x;
+                element.nodeOtherConfig.translateY = (element.nodeOtherConfig.specific_y ?? 0) - offsetY;
+            }
+            if (element.branches && element.branches.length > 0) {
+                element.branches.forEach((branch) => {
+                    if (branch.nodeOtherConfig) {
+                        const offsetY = (branch.nodeOtherConfig.specific_height ?? 0) / 2;
+                        branch.nodeOtherConfig.translateX = branch.nodeOtherConfig.specific_x;
+                        branch.nodeOtherConfig.translateY = (branch.nodeOtherConfig.specific_y ?? 0) - offsetY;
+                    }
+                    if (branch.elements && branch.elements.length > 0) {
+                        this.setTranslatePositions(branch.elements);
+                    }
+                });
+            }
+        });
+    }
+    /** Tính chiều rộng tối đa của nhánh (trong horizontal = chiều cao thực của nhánh không có element) */
+    static calculatorMaxBranchWidth(element, maxWidthBranch) {
+        if (!element.branches || !element.branches.length) {
+            return;
+        }
+        element.branches.forEach((branch) => {
+            if (!branch.elements || !branch.elements.length) {
+                const lineBranchNoHasElement = canvasConfigReadonly().ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT;
+                maxWidthBranch.width = lineBranchNoHasElement > maxWidthBranch.width ? lineBranchNoHasElement : maxWidthBranch.width;
+                return;
+            }
+            const total = { height: 0 };
+            this.plusWidthElementInBranch(branch.elements, total);
+            maxWidthBranch.width = total.height > maxWidthBranch.width ? total.height : maxWidthBranch.width;
+        });
+    }
+    /** Tính tổng chiều rộng các elements trong nhánh (dọc theo trục X) */
+    static plusWidthElementInBranch(elements, total) {
+        elements.forEach((element) => {
+            const margin = !element.branches || !element.branches.length ? this.checkElementGetMargin(element.nodeOtherConfig) : canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH;
+            total.height += (element.specific_width ?? 0) + margin;
+            if (!element.branches || !element.branches.length) {
+                return;
+            }
+            total.height += 64;
+            const theMostElementsInBranch = { height: 0 };
+            element.branches.forEach((branch) => {
+                const widthInBranch = { height: 0 };
+                widthInBranch.height += canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT_BRANCH_TO_ELEMENT_FIRST + 20;
+                if (!branch.elements || !branch.elements.length) {
+                    widthInBranch.height += canvasConfigReadonly().ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT;
+                    if (theMostElementsInBranch.height < widthInBranch.height) {
+                        theMostElementsInBranch.height = widthInBranch.height;
+                    }
+                    return;
+                }
+                this.plusWidthElementInBranch(branch.elements, widthInBranch);
+                if (theMostElementsInBranch.height < widthInBranch.height) {
+                    theMostElementsInBranch.height = widthInBranch.height;
+                }
+            });
+            total.height += theMostElementsInBranch.height;
+        });
+    }
+    /**
+     * Tính chiều cao (Y span) của một nhánh — dùng để offset các nhánh trên/dưới.
+     * Trong horizontal context: mỗi nhánh trải dài theo Y (lên/xuống).
+     */
+    static calculatorHeightBranch(elements, maxWidth) {
+        if (!elements || !elements.length) {
+            const w = canvasConfigReadonly().DEFAULT_BRANCH_WHEN_NO_ELEMENT;
+            maxWidth.width = w;
+            maxWidth.aboveWidth = w / 2;
+            maxWidth.underWidth = w / 2;
+            return;
+        }
+        const maxWidthInElements = { width: 0, aboveWidth: 0, underWidth: 0 };
+        elements.forEach((element) => {
+            if (!element.branches || !element.branches.length) {
+                // element không nhánh: dùng specific_height làm Y span
+                if ((element.specific_height ?? 0) < maxWidthInElements.width) {
+                    return;
+                }
+                const h = element.specific_height ?? 0;
+                maxWidthInElements.width = h;
+                maxWidthInElements.aboveWidth = h / 2;
+                maxWidthInElements.underWidth = h / 2;
+                return;
+            }
+            const widthElementIncludeBranch = { width: 0, aboveWidth: 0, underWidth: 0 };
+            const h = element.specific_height ?? 0;
+            if (h > widthElementIncludeBranch.width) {
+                widthElementIncludeBranch.width = h;
+                widthElementIncludeBranch.aboveWidth = h / 2;
+                widthElementIncludeBranch.underWidth = h / 2;
+            }
+            const half = Math.ceil(element.branches.length / 2);
+            const aboveHalf = element.branches.slice(0, half);
+            const underHalf = element.branches.slice(half);
+            let brachMiddle;
+            if (aboveHalf.length !== underHalf.length) {
+                brachMiddle = aboveHalf.pop();
+            }
+            if (brachMiddle)
+                brachMiddle.onTheSide = 'center';
+            aboveHalf.forEach((branch) => (branch.onTheSide = 'above'));
+            underHalf.forEach((branch) => (branch.onTheSide = 'under'));
+            const widthBranch = { width: 0, aboveWidth: 0, underWidth: 0 };
+            element.branches.forEach((branch) => {
+                const w = { width: 0, aboveWidth: 0, underWidth: 0 };
+                this.calculatorHeightBranch(branch.elements, w);
+                switch (branch.onTheSide) {
+                    case 'above':
+                        widthBranch.aboveWidth += w.width;
+                        break;
+                    case 'under':
+                        widthBranch.underWidth += w.width;
+                        break;
+                    case 'center':
+                        widthBranch.aboveWidth += w.aboveWidth;
+                        widthBranch.underWidth += w.underWidth;
+                        break;
+                }
+            });
+            const marginBetweenBranch = (element.branches.length - 1) * canvasConfigReadonly().ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT;
+            widthBranch.aboveWidth += marginBetweenBranch / 2;
+            widthBranch.underWidth += marginBetweenBranch / 2;
+            const maxAboveWidth = Math.max(widthElementIncludeBranch.aboveWidth, widthBranch.aboveWidth);
+            const maxUnderWidth = Math.max(widthElementIncludeBranch.underWidth, widthBranch.underWidth);
+            if (maxWidthInElements.aboveWidth < maxAboveWidth) {
+                maxWidthInElements.aboveWidth = maxAboveWidth;
+            }
+            if (maxWidthInElements.underWidth < maxUnderWidth) {
+                maxWidthInElements.underWidth = maxUnderWidth;
+            }
+            maxWidthInElements.width = maxWidthInElements.aboveWidth + maxWidthInElements.underWidth;
+        });
+        maxWidth.width += maxWidthInElements.aboveWidth + maxWidthInElements.underWidth;
+        maxWidth.aboveWidth += maxWidthInElements.aboveWidth;
+        maxWidth.underWidth += maxWidthInElements.underWidth;
+    }
+    /** Tính khoảng cách thêm vào sau element (bao gồm wait config nếu có) */
+    static checkElementGetMargin(hasWaitConfig) {
+        if (hasWaitConfig) {
+            return canvasConfigReadonly().DISTANCE_TO_WAIT + this.getWidthWaitConfig(hasWaitConfig) + canvasConfigReadonly().WAIT_TO_ELEMENT;
+        }
+        return canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT;
+    }
+    /** Tính chiều rộng của wait config node */
+    static getWidthWaitConfig(hasWaitConfig) {
+        if (hasWaitConfig) {
+            return (hasWaitConfig.specific_width ?? canvasConfigReadonly().ELEMENT_WAIT_DEFAULT) + canvasConfigReadonly().DISTANCE_WAIT_TO_NEXT_LINE;
+        }
+        return canvasConfigReadonly().ELEMENT_WAIT_DEFAULT + canvasConfigReadonly().DISTANCE_WAIT_TO_NEXT_LINE;
+    }
+}
+
+const canvasConfig = signal({
+    ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT: 60,
+    ELEMENT_MARGIN_DEFAULT: 60,
+    ELEMENT_MARGIN_DEFAULT_BRANCH: 16,
+    ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT: 60,
+    DEFAULT_BRANCH_WHEN_NO_ELEMENT: 100,
+    ELEMENT_HEIGHT_CURVE: 10,
+    ELEMENT_SVG_STROKE_COLOR: '9ca2ad',
+    ELEMENT_SVG_STROKE_WIDTH: '1',
+    ELEMENT_MARGIN_DEFAULT_BRANCH_TO_ELEMENT_FIRST: 78,
+    DISTANCE_TO_WAIT: 30,
+    WAIT_TO_ELEMENT: 50,
+    ELEMENT_WAIT_DEFAULT: 28,
+    DISTANCE_WAIT_TO_NEXT_LINE: 4,
+    TYPE_ELEMENT_EXIT: 'EXIT',
+    TYPE_ELEMENT_WORKFLOW: 'WORKFLOW',
+    WIDTH_ELEMENT_DEFAULT: 165,
+    HEIGHT_ELEMENT_DEFAULT: 48,
+    ADD_ICON_DIAMETER: 24,
+});
+const canvasConfigReadonly = canvasConfig.asReadonly();
+const storeDataDefault = {
+    positionMaxLeft: 0,
+    positionMaxTop: 0,
+    widthHeightSvgCanvas: { heightSvg: window.innerHeight, widthSvg: window.innerWidth },
+};
+class LibsUiDiagramDrawService {
+    configCanvas = signal(undefined);
+    orientation = signal('vertical');
+    elementSvg = signal(undefined);
+    attributeSvgD = signal('');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    componentRefs = signal([]);
+    // Virtualization Tracking
+    virtualViewport;
+    virtualFlatElements = [];
+    virtualFlatBranches = [];
+    virtualNodesMap = new Map();
+    updateViewport(vp) {
+        this.virtualViewport = vp;
+        if (this.configCanvas()?.useVirtualizationTemplate) {
+            this.applyVirtualizationDiff();
+        }
+    }
+    set setConfig(config) {
+        this.configCanvas.set(config);
+    }
+    set setConfigCanvas(config) {
+        if (!config) {
+            return;
+        }
+        canvasConfig.update((current) => ({ ...current, ...config }));
+    }
+    configXYElements(elements, updateSVG, positionX) {
+        const storeData = this.configCanvas()?.storeDataDefine ?? storeDataDefault;
+        const maxLeftOrigin = storeData.positionMaxLeft;
+        const maxTopOrigin = storeData.positionMaxTop ?? 0;
+        if (this.orientation() === 'horizontal') {
+            MoLibDiagramHorizontalCalculatorCoordinatesUtil.setXYElements(elements, storeData, positionX);
+        }
+        else {
+            MoLibDiagramCalculatorCoordinatesUtil.setXYElements(elements, storeData, positionX);
+        }
+        const maxLeftNew = storeData.positionMaxLeft;
+        const maxTopNew = storeData.positionMaxTop ?? 0;
+        if (!this.elementSvg()) {
+            this.elementSvg.set(document.createElementNS('http://www.w3.org/2000/svg', 'path'));
+        }
+        if (!updateSVG && this.configCanvas()?.svgContainer && this.elementSvg()) {
+            setAttributeSvgAndAppend(this.configCanvas()?.svgContainer, this.elementSvg(), '');
+        }
+        if (this.orientation() === 'horizontal' && maxTopOrigin !== maxTopNew) {
+            this.updatePositionElements(maxTopNew, elements, storeData);
+            return;
+        }
+        if (this.orientation() === 'vertical' && maxLeftOrigin !== maxLeftNew) {
+            this.updatePositionElements(maxLeftNew, elements, storeData);
+            return;
+        }
+        if (this.elementSvg()) {
+            this.attributeSvgD.set('');
+            this.buildSvgElement(elements);
+            this.elementSvg()?.setAttribute('d', this.attributeSvgD());
+        }
+    }
+    updatePositionElements(positionOffset, elements, config) {
+        if (positionOffset && positionOffset < 0) {
+            positionOffset = positionOffset * -1 + 200; // 100 là khoảng cách cách biên
+        }
+        if (this.orientation() === 'horizontal') {
+            MoLibDiagramHorizontalCalculatorCoordinatesUtil.setXYElements(elements, { ...config, updateSVG: true }, positionOffset);
+        }
+        else {
+            MoLibDiagramCalculatorCoordinatesUtil.setXYElements(elements, { ...config, updateSVG: true }, positionOffset);
+        }
+        if (!this.elementSvg()) {
+            this.elementSvg.set(document.createElementNS('http://www.w3.org/2000/svg', 'path'));
+        }
+        if (this.elementSvg()) {
+            this.attributeSvgD.set('');
+            this.buildSvgElement(elements);
+            this.elementSvg()?.setAttribute('d', this.attributeSvgD());
+        }
+    }
+    buildSvgElement(elements) {
+        elements.forEach((currentElement) => {
+            if (currentElement.attributeSvgD) {
+                this.attributeSvgD.update((prev) => `${prev ?? ''} ${currentElement.attributeSvgD}`);
+            }
+            if (currentElement.nodeOtherConfig?.attributeSvgD) {
+                this.attributeSvgD.update((prev) => `${prev ?? ''} ${currentElement.nodeOtherConfig?.attributeSvgD}`);
+            }
+            if (!currentElement.branches || !currentElement.branches.length) {
+                return;
+            }
+            currentElement.branches.forEach((branch) => {
+                if (branch.attributeSvgD) {
+                    this.attributeSvgD.update((prev) => `${prev ?? ''} ${branch.attributeSvgD}`);
+                }
+                if (branch.nodeOtherConfig?.attributeSvgD) {
+                    this.attributeSvgD.update((prev) => `${prev ?? ''} ${branch.nodeOtherConfig?.attributeSvgD}`);
+                }
+                if (!branch.elements.length) {
+                    return;
+                }
+                this.buildSvgElement(branch.elements);
+            });
+        });
+    }
+    /**
+     * Render tất cả nodes từ elements array
+     */
+    renderNodes(elements) {
+        if (this.configCanvas()?.useVirtualizationTemplate) {
+            this.extractVirtualElements(elements);
+            this.applyVirtualizationDiff();
+            return;
+        }
+        this.clearNodes();
+        this.renderElementsRecursively(elements, true, undefined);
+        this.renderBranchLabels(elements);
+    }
+    extractVirtualElements(elements) {
+        this.virtualFlatElements = [];
+        this.virtualFlatBranches = [];
+        const scan = (list, branch, isFirstLevel = true) => {
+            list.forEach((el, index) => {
+                const shouldShowArrow = !(isFirstLevel && index === 0);
+                this.virtualFlatElements.push({ element: el, branch, isOtherConfig: false, shouldShowArrow, parentId: el.id });
+                if (el.nodeOtherConfig)
+                    this.virtualFlatElements.push({ element: el.nodeOtherConfig, branch, isOtherConfig: true, shouldShowArrow: false, parentId: el.id });
+                if (el.branches) {
+                    el.branches.forEach((b, bIndex) => {
+                        if (!b.label)
+                            b.label = `Nhánh ${bIndex + 1}`;
+                        this.virtualFlatBranches.push(b);
+                        if (b.elements)
+                            scan(b.elements, b, false);
+                        if (b.nodeOtherConfig)
+                            this.virtualFlatElements.push({ element: b.nodeOtherConfig, branch: b, isOtherConfig: true, shouldShowArrow: false, parentId: 'branch_' + bIndex + '_' + el.id });
+                    });
+                }
+            });
+        };
+        scan(elements, undefined, true);
+    }
+    applyVirtualizationDiff() {
+        const vp = this.virtualViewport;
+        if (!vp)
+            return;
+        const config = this.configCanvas();
+        const container = config?.nodesContainer?.nativeElement;
+        if (!container || !config)
+            return;
+        const buffer = 300;
+        const visibleIds = new Set();
+        this.virtualFlatElements.forEach((item) => {
+            const el = item.element;
+            if (el.translateX === undefined || el.translateY === undefined)
+                return;
+            if (el.translateX + (el.specific_width || 165) < vp.x - buffer || el.translateX > vp.x + vp.width + buffer || el.translateY + (el.specific_height || 48) < vp.y - buffer || el.translateY > vp.y + vp.height + buffer)
+                return;
+            const id = String(item.parentId) + (item.isOtherConfig ? '_other' : '');
+            visibleIds.add(id);
+            if (!this.virtualNodesMap.has(id)) {
+                const componentType = item.isOtherConfig ? config.nodeOtherConfigComponentType : config.nodeComponentType;
+                if (componentType && config.viewContainerRef) {
+                    const ref = config.viewContainerRef.createComponent(componentType);
+                    ref.setInput('element', el);
+                    if (item.branch)
+                        ref.setInput('branch', item.branch);
+                    ref.setInput('orientation', this.orientation());
+                    const domEl = ref.location.nativeElement;
+                    domEl.classList.add('diagram-node-dynamic');
+                    applyElementStyle(domEl, el);
+                    container.appendChild(domEl);
+                    let arrow;
+                    if (item.shouldShowArrow && !item.isOtherConfig) {
+                        arrow = this.createArrowIndicator(el, container);
+                    }
+                    this.virtualNodesMap.set(id, { component: ref, arrow });
+                }
+            }
+            else {
+                const cache = this.virtualNodesMap.get(id);
+                if (cache) {
+                    if (cache.component)
+                        applyElementStyle(cache.component.location.nativeElement, el);
+                    if (cache.arrow) {
+                        const arrowSize = 16;
+                        const nodeWidth = el.specific_width ?? 165;
+                        const nodeHeight = el.specific_height ?? 48;
+                        if (this.orientation() === 'horizontal') {
+                            cache.arrow.innerHTML = `
+                 <svg width="${arrowSize}" height="${arrowSize}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                   <path d="M8 4L16 8L8 12Z" fill="#9ca3af"/>
+                 </svg>
+               `;
+                            cache.arrow.style.left = `${el.translateX - arrowSize}px`;
+                            cache.arrow.style.top = `${el.translateY + nodeHeight / 2 - arrowSize / 2}px`;
+                        }
+                        else {
+                            cache.arrow.innerHTML = `
+                 <svg width="${arrowSize}" height="${arrowSize}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                   <path d="M8 16L4 12H12L8 16Z" fill="#9ca3af"/>
+                 </svg>
+               `;
+                            cache.arrow.style.left = `${el.translateX + nodeWidth / 2 - arrowSize / 2}px`;
+                            cache.arrow.style.top = `${el.translateY - arrowSize}px`;
+                        }
+                    }
+                }
+            }
+        });
+        this.virtualFlatBranches.forEach((branch, index) => {
+            const x = branch.specific_start_branch_x;
+            const y = branch.specific_start_branch_y;
+            if (x === undefined || y === undefined)
+                return;
+            if (x < vp.x - buffer || x > vp.x + vp.width + buffer || y < vp.y - buffer || y > vp.y + vp.height + buffer)
+                return;
+            const id = 'branch_' + index + '_' + Math.round(x) + '_' + Math.round(y);
+            visibleIds.add(id);
+            if (!this.virtualNodesMap.has(id)) {
+                const labelDiv = this.createBranchLabel(branch);
+                if (labelDiv)
+                    this.virtualNodesMap.set(id, { label: labelDiv });
+            }
+            else {
+                const cache = this.virtualNodesMap.get(id);
+                if (cache?.label) {
+                    const labelDiv = cache.label;
+                    const labelRect = labelDiv.getBoundingClientRect();
+                    const labelW = labelRect.width || labelDiv.offsetWidth;
+                    const labelH = labelRect.height || labelDiv.offsetHeight;
+                    if (this.orientation() === 'vertical') {
+                        labelDiv.style.left = `${x - labelW / 2 - 4}px`;
+                        labelDiv.style.top = `${y - labelH / 2 + 4}px`;
+                    }
+                    else {
+                        labelDiv.style.left = `${x + 4}px`;
+                        labelDiv.style.top = `${y - labelH / 2}px`; // center over wire
+                    }
+                }
+            }
+        });
+        Array.from(this.virtualNodesMap.entries()).forEach(([id, cache]) => {
+            if (!visibleIds.has(id)) {
+                cache.component?.destroy();
+                cache.arrow?.remove();
+                cache.label?.remove();
+                this.virtualNodesMap.delete(id);
+            }
+        });
+    }
+    /**
+     * Render elements và branches một cách đệ quy
+     */
+    renderElementsRecursively(elements, isFirstLevel = true, branch) {
+        elements.forEach((element, index) => {
+            if (element.translateX !== undefined && element.translateY !== undefined) {
+                // Main node: có arrow nếu không phải element đầu tiên của level đầu
+                const shouldShowArrow = !(isFirstLevel && index === 0);
+                this.createNode(element, branch, shouldShowArrow, false);
+            }
+            // Render nodeOtherConfig nếu có (nodes phụ) - KHÔNG có arrow
+            if (element.nodeOtherConfig && element.nodeOtherConfig.translateX !== undefined && element.nodeOtherConfig.translateY !== undefined) {
+                this.createNode(element.nodeOtherConfig, branch, false, true);
+            }
+            // Render branches nếu có
+            if (element.branches && element.branches.length > 0) {
+                element.branches.forEach((branch) => {
+                    if (branch.elements && branch.elements.length > 0) {
+                        this.renderElementsRecursively(branch.elements, false, branch);
+                    }
+                    if (branch.nodeOtherConfig && branch.nodeOtherConfig.translateX !== undefined && branch.nodeOtherConfig.translateY !== undefined) {
+                        this.createNode(branch.nodeOtherConfig, branch, false, true);
+                    }
+                });
+            }
+        });
+    }
+    /**
+     * Tạo một node component động
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    createNode(element, branch, shouldShowArrow, isNodeOtherConfig) {
+        const config = this.configCanvas();
+        if (!config?.viewContainerRef) {
+            return;
+        }
+        if (config.useVirtualizationTemplate) {
+            if (config.nodesContainer?.nativeElement) {
+                if (shouldShowArrow && !isNodeOtherConfig) {
+                    this.createArrowIndicator(element, config.nodesContainer.nativeElement);
+                }
+            }
+            return;
+        }
+        const componentType = isNodeOtherConfig ? config.nodeOtherConfigComponentType : config.nodeComponentType;
+        if (!componentType) {
+            return;
+        }
+        const componentRef = config.viewContainerRef.createComponent(componentType);
+        const el = componentRef.location.nativeElement;
+        componentRef.setInput('element', element);
+        if (branch) {
+            componentRef.setInput('branch', branch);
+        }
+        componentRef.setInput('orientation', this.orientation());
+        el.classList.add('diagram-node-dynamic');
+        applyElementStyle(el, element);
+        if (config.nodesContainer?.nativeElement) {
+            config.nodesContainer.nativeElement.appendChild(el);
+            if (shouldShowArrow && !isNodeOtherConfig) {
+                this.createArrowIndicator(element, config.nodesContainer.nativeElement);
+            }
+        }
+        this.componentRefs.update((refs) => [...refs, componentRef]); // Lưu reference để cleanup sau
+        return componentRef;
+    }
+    /**
+     * Clear tất cả nodes đã tạo
+     */
+    clearNodes() {
+        this.componentRefs().forEach((ref) => {
+            ref.destroy();
+        });
+        this.componentRefs.set([]);
+        Array.from(this.virtualNodesMap.values()).forEach((cache) => {
+            cache.component?.destroy();
+            cache.arrow?.remove();
+            cache.label?.remove();
+        });
+        this.virtualNodesMap.clear();
+        const config = this.configCanvas();
+        const nodesContainer = config?.nodesContainer?.nativeElement;
+        if (nodesContainer) {
+            if (!config?.useVirtualizationTemplate) {
+                const dynamicNodes = nodesContainer.querySelectorAll('.diagram-node-dynamic');
+                dynamicNodes.forEach((node) => node.remove());
+            }
+            const labels = nodesContainer.querySelectorAll('.branch-label');
+            labels.forEach((label) => label.remove());
+            const arrows = nodesContainer.querySelectorAll('.node-arrow-indicator');
+            arrows.forEach((arrow) => arrow.remove());
+        }
+    }
+    /**
+     * Tạo mũi tên indicator chỉ hướng vào node.
+     * - vertical:   mũi tên ▼ phía TRÊN node  (luồng trên → xuống)
+     * - horizontal: mũi tên ► phía TRÁI node  (luồng trái → phải)
+     */
+    createArrowIndicator(element, container) {
+        if (element.translateX === undefined || element.translateY === undefined) {
+            return undefined;
+        }
+        const arrow = document.createElement('div');
+        arrow.className = 'node-arrow-indicator';
+        arrow.style.position = 'absolute';
+        arrow.style.zIndex = '1';
+        arrow.style.pointerEvents = 'none';
+        const arrowSize = 16;
+        const nodeWidth = element.specific_width ?? 0;
+        const nodeHeight = element.specific_height ?? 0;
+        if (this.orientation() === 'horizontal') {
+            // Mũi tên ► ở bên TRÁI node, căn giữa theo chiều cao
+            arrow.innerHTML = `
+        <svg width="${arrowSize}" height="${arrowSize}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 4L16 8L8 12Z" fill="#9ca3af"/>
+        </svg>
+      `;
+            arrow.style.left = `${element.translateX - arrowSize}px`;
+            arrow.style.top = `${element.translateY + nodeHeight / 2 - arrowSize / 2}px`;
+        }
+        else {
+            // Mũi tên ▼ ở phía TRÊN node, căn giữa theo chiều rộng
+            arrow.innerHTML = `
+        <svg width="${arrowSize}" height="${arrowSize}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 16L4 12H12L8 16Z" fill="#9ca3af"/>
+        </svg>
+      `;
+            arrow.style.left = `${element.translateX + nodeWidth / 2 - arrowSize / 2}px`;
+            arrow.style.top = `${element.translateY - arrowSize}px`;
+        }
+        container.appendChild(arrow);
+        return arrow;
+    }
+    /**
+     * Render branch labels (text annotations on branches)
+     */
+    renderBranchLabels(elements) {
+        const svgContainer = this.configCanvas()?.svgContainer?.nativeElement;
+        if (!svgContainer) {
+            return;
+        }
+        elements.forEach((element) => {
+            if (element.branches && element.branches.length > 0) {
+                element.branches.forEach((branch, index) => {
+                    if (branch.specific_start_branch_x !== undefined && branch.specific_start_branch_y !== undefined) {
+                        if (!branch.label) {
+                            branch.label = `Nhánh ${index + 1}`;
+                        }
+                        this.createBranchLabel(branch);
+                    }
+                    if (branch.elements && branch.elements.length > 0) {
+                        this.renderBranchLabels(branch.elements);
+                    }
+                });
+            }
+        });
+    }
+    createBranchLabel(branch) {
+        const config = this.configCanvas();
+        const container = config?.nodesContainer?.nativeElement;
+        if (!container) {
+            return undefined;
+        }
+        const labelDiv = document.createElement('div');
+        labelDiv.className = 'branch-label';
+        labelDiv.textContent = branch.label || '';
+        labelDiv.style.position = 'absolute';
+        labelDiv.style.padding = '2px 7px';
+        labelDiv.style.borderRadius = '10px';
+        labelDiv.style.backgroundColor = branch.labelBgColor || '#f3f4f6';
+        labelDiv.style.fontSize = '11px';
+        labelDiv.style.fontFamily = 'system-ui, -apple-system, sans-serif';
+        labelDiv.style.color = '#374151';
+        labelDiv.style.whiteSpace = 'nowrap';
+        labelDiv.style.zIndex = '2';
+        labelDiv.style.pointerEvents = 'none';
+        container.appendChild(labelDiv);
+        const startX = branch.specific_start_branch_x ?? 0;
+        const startY = branch.specific_start_branch_y ?? 0;
+        const labelW = labelDiv.offsetWidth;
+        const labelH = labelDiv.offsetHeight || 18;
+        if (this.orientation() === 'horizontal') {
+            /**
+             * Horizontal: label nằm TRÊN đường line nằm ngang.
+             * specific_start_branch = điểm bắt đầu đoạn thẳng ngang đến element.
+             * Đặt label tịnh tiến sang phải 8px từ ngoặt nhánh, và căn giữa dây.
+             */
+            labelDiv.style.left = `${startX + 4}px`;
+            labelDiv.style.top = `${startY - labelH / 2}px`;
+        }
+        else {
+            /**
+             * Vertical: label nằm BÊN TRÁI đường ngang, căn giữa theo Y.
+             * specific_start_branch = điểm đầu đoạn thẳng đến element (sau curve).
+             */
+            labelDiv.style.left = `${startX - labelW / 2 - 4}px`;
+            labelDiv.style.top = `${startY - labelH / 2 + 4}px`;
+        }
+        return labelDiv;
+    }
+    /**
+     * Render dấu "+" tại mỗi vị trí có thể thả element từ sidebar.
+     * Service tự tạo DOM elements và inject vào nodesContainer.
+     * @param flatElements Danh sách flat elements đã tính toán vị trí
+     * @param onDrop Callback khi người dùng thả element vào một "+"
+     * @param canDropFn (tùy chọn) Function kiểm tra điều kiện hiển thị drop zone.
+     * ```
+     */
+    renderDropZones(flatElements, onDrop, canDropFn, ruleConnectableElements) {
+        this.clearDropZones();
+        const container = this.configCanvas()?.nodesContainer?.nativeElement;
+        if (!container)
+            return;
+        flatElements.forEach((el) => {
+            if (el.code === canvasConfigReadonly().TYPE_ELEMENT_EXIT)
+                return;
+            if (el.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+                el.branches?.forEach((branch) => {
+                    if (canDropFn(undefined, el, branch, ruleConnectableElements))
+                        return;
+                    const top = this.orientation() === 'horizontal' ? this.calcDropZoneTopBranchH(el, branch) : this.calcDropZoneTopBranch(el, branch);
+                    const left = this.orientation() === 'horizontal' ? this.calcDropZoneLeftBranchH(el, branch) : this.calcDropZoneLeftBranch(el, branch);
+                    this.createDropZoneEl(container, top, left, el, branch, onDrop);
+                });
+            }
+            else {
+                if (!canDropFn(undefined, el, undefined, ruleConnectableElements))
+                    return;
+                const top = this.orientation() === 'horizontal' ? this.calcDropZoneTopNodeH(el) : this.calcDropZoneTopNode(el);
+                const left = this.orientation() === 'horizontal' ? this.calcDropZoneLeftNodeH(el) : this.calcDropZoneLeftNode(el);
+                this.createDropZoneEl(container, top, left, el, undefined, onDrop);
+            }
+        });
+    }
+    /** Xóa tất cả drop zone "+" khỏi DOM */
+    clearDropZones() {
+        const container = this.configCanvas()?.nodesContainer?.nativeElement;
+        if (!container)
+            return;
+        container.querySelectorAll('.diagram-drop-zone').forEach((el) => el.remove());
+    }
+    createDropZoneEl(container, top, left, element, branch, onDrop) {
+        const indicatorStyle = this.configCanvas()?.dropZoneStyle;
+        const RECT_W = element.specific_width ?? canvasConfigReadonly().WIDTH_ELEMENT_DEFAULT;
+        const RECT_H = element.specific_height ?? canvasConfigReadonly().HEIGHT_ELEMENT_DEFAULT;
+        // Tâm của nút tròn
+        const centerX = left + canvasConfigReadonly().ADD_ICON_DIAMETER / 2;
+        const centerY = top + canvasConfigReadonly().ADD_ICON_DIAMETER / 2;
+        // Hit zone vô hình: rộng hơn rectangle một khoản padding để bắt drag sớm hơn
+        const HIT_PAD = 20;
+        const HIT_W = RECT_W + HIT_PAD * 2;
+        const HIT_H = RECT_H + HIT_PAD * 2;
+        const hitLeft = centerX - HIT_W / 2;
+        const hitTop = centerY - HIT_H / 2;
+        // ── Hit zone (wrapper vô hình, vùng nhận drag rộng) ─────────────────
+        const hitZone = document.createElement('div');
+        hitZone.className = 'diagram-drop-zone';
+        hitZone.style.cssText = `
+      position: absolute;
+      top: ${hitTop}px;
+      left: ${hitLeft}px;
+      z-index: 9;
+      width: ${HIT_W}px;
+      height: ${HIT_H}px;
+      cursor: pointer;
+    `;
+        // ── Indicator (con bên trong, phần hiển thị) ─────────────────────────
+        const indicator = document.createElement('div');
+        indicator.style.pointerEvents = 'none'; // tránh tranh chấp event với hitZone
+        // Vị trí dot trong hitZone (căn giữa hitZone)
+        const dotOffsetLeft = HIT_W / 2 - canvasConfigReadonly().ADD_ICON_DIAMETER / 2;
+        const dotOffsetTop = HIT_H / 2 - canvasConfigReadonly().ADD_ICON_DIAMETER / 2;
+        // Vị trí rectangle trong hitZone (căn giữa hitZone)
+        const rectOffsetLeft = HIT_PAD;
+        const rectOffsetTop = HIT_H / 2 - RECT_H / 2;
+        const applyDotStyle = () => {
+            const s = indicatorStyle;
+            const size = canvasConfigReadonly().ADD_ICON_DIAMETER;
+            const bg = s?.backgroundColor ?? '#3b82f6';
+            const iconColor = s?.iconColor ?? '#ffffff';
+            const opacity = s?.opacity ?? 0.95;
+            const borderRadius = s?.borderRadius ?? '50%';
+            setStylesElement(indicator, {
+                position: 'absolute',
+                top: `${dotOffsetTop}px`,
+                left: `${dotOffsetLeft}px`,
+                width: `${size}px`,
+                height: `${size}px`,
+                pointerEvents: 'none',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'opacity 0.15s ease',
+                border: 'none',
+            });
+            if (s?.renderIndicator) {
+                indicator.innerHTML = s.renderIndicator(size);
+            }
+            else {
+                indicator.innerHTML = `
+          <div style="
+            width: ${size}px;
+            height: ${size}px;
+            background-color: ${bg};
+            border-radius: ${borderRadius};
+            opacity: ${opacity};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
+          "><i class="libs-ui-icon-add before:text-[${iconColor}]"></i></div>
+        `;
+            }
+        };
+        const applyRectStyle = () => {
+            const s = indicatorStyle;
+            const hoverBg = s?.hoverBackgroundColor ?? '#eef4ff';
+            const hoverBorder = s?.hoverBorderColor ?? 'rgba(59, 130, 246, 0.7)';
+            const hoverBorderStyle = s?.hoverBorderStyle ?? 'dashed';
+            const hoverRadius = s?.hoverBorderRadius ?? 10;
+            setStylesElement(indicator, {
+                top: `${rectOffsetTop}px`,
+                left: `${rectOffsetLeft}px`,
+                width: `${RECT_W}px`,
+                height: `${RECT_H}px`,
+                borderRadius: `${hoverRadius}px`,
+                backgroundColor: hoverBg,
+                border: `2px ${hoverBorderStyle} ${hoverBorder}`,
+                transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+            });
+            // Nếu có hàm render động cho trạng thái hover — gọi nó
+            indicator.innerHTML = s?.renderHoverIndicator ? s.renderHoverIndicator() : '';
+        };
+        applyDotStyle();
+        hitZone.appendChild(indicator);
+        hitZone.addEventListener('dragenter', (e) => {
+            e.preventDefault();
+            applyRectStyle();
+        });
+        hitZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            if (e.dataTransfer)
+                e.dataTransfer.dropEffect = 'copy';
+        });
+        hitZone.addEventListener('dragleave', (e) => {
+            if (!hitZone.contains(e.relatedTarget)) {
+                applyDotStyle();
+            }
+        });
+        hitZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const raw = e.dataTransfer?.getData('application/json') ?? '';
+            onDrop(element, branch, raw);
+        });
+        container.appendChild(hitZone);
+    }
+    // ── Vertical drop zone helpers (existing) ───────────────────────────────────
+    calcDropZoneTopBranch(el, branch) {
+        const oc = branch.nodeOtherConfig;
+        if (oc)
+            return (oc.specific_y ?? 0) + (oc.specific_height ?? canvasConfigReadonly().ELEMENT_WAIT_DEFAULT) + 10;
+        return (branch.specific_start_branch_y ?? 0) + 30;
+    }
+    calcDropZoneLeftBranch(el, branch) {
+        const firstEl = branch.elements?.[0];
+        if (firstEl?.translateX !== undefined)
+            return firstEl.translateX + (firstEl.specific_width ?? canvasConfigReadonly().WIDTH_ELEMENT_DEFAULT) / 2 - canvasConfigReadonly().ADD_ICON_DIAMETER / 2;
+        return (el.translateX ?? 0) + (el.specific_width ?? canvasConfigReadonly().WIDTH_ELEMENT_DEFAULT) / 2 - canvasConfigReadonly().ADD_ICON_DIAMETER / 2;
+    }
+    calcDropZoneTopNode(el) {
+        const oc = el.nodeOtherConfig;
+        if (oc)
+            return (oc.specific_y ?? 0) + (oc.specific_height ?? canvasConfigReadonly().ELEMENT_WAIT_DEFAULT) + 10;
+        return (el.translateY ?? 0) + (el.specific_height ?? canvasConfigReadonly().HEIGHT_ELEMENT_DEFAULT) + 10;
+    }
+    calcDropZoneLeftNode(el) {
+        return (el.translateX ?? 0) + (el.specific_width ?? canvasConfigReadonly().WIDTH_ELEMENT_DEFAULT) / 2 - canvasConfigReadonly().ADD_ICON_DIAMETER / 2;
+    }
+    // ── Horizontal drop zone helpers ─────────────────────────────────────────────
+    /**
+     * Horizontal node: "+" nằm giữa đường line nối 2 node — căn giữa Y của element.
+     */
+    calcDropZoneTopNodeH(el) {
+        const D = canvasConfigReadonly().ADD_ICON_DIAMETER;
+        const centerY = (el.translateY ?? 0) + (el.specific_height ?? canvasConfigReadonly().HEIGHT_ELEMENT_DEFAULT) / 2;
+        return centerY - D / 2;
+    }
+    calcDropZoneLeftNodeH(el) {
+        const D = canvasConfigReadonly().ADD_ICON_DIAMETER;
+        const M = canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT;
+        const oc = el.nodeOtherConfig;
+        if (oc) {
+            const right = (oc.specific_x ?? 0) + (oc.specific_width ?? canvasConfigReadonly().ELEMENT_WAIT_DEFAULT);
+            return right + M / 2 - D / 2;
+        }
+        const right = (el.translateX ?? 0) + (el.specific_width ?? canvasConfigReadonly().WIDTH_ELEMENT_DEFAULT);
+        // Midpoint của khoảng trống giữa node và node tiếp theo (gap = ELEMENT_MARGIN_DEFAULT)
+        return right + M / 2 - D / 2;
+    }
+    /**
+     * Horizontal branch: "+" nằm căn giữa Y của branch line, sau phần tử cuối trong nhánh.
+     */
+    calcDropZoneTopBranchH(el, branch) {
+        const D = canvasConfigReadonly().ADD_ICON_DIAMETER;
+        // specific_start_branch_y = tâm Y của đường nhánh
+        const centerY = branch.specific_start_branch_y ?? 0;
+        return centerY - D / 2;
+    }
+    calcDropZoneLeftBranchH(el, branch) {
+        const D = canvasConfigReadonly().ADD_ICON_DIAMETER;
+        const M = canvasConfigReadonly().ELEMENT_MARGIN_DEFAULT;
+        // Sau nodeOtherConfig của nhánh (cổ nhánh)
+        const oc = branch.nodeOtherConfig;
+        if (oc?.specific_x !== undefined) {
+            return (oc.specific_x ?? 0) + (oc.specific_width ?? canvasConfigReadonly().ELEMENT_WAIT_DEFAULT) + M / 2 - D / 2;
+        }
+        // Nếu nhánh không có nodeOtherConfig: đặt sau điểm rẽ nhánh
+        return (branch.specific_start_branch_x ?? 0) + M / 2 - D / 2;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDiagramDrawService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDiagramDrawService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDiagramDrawService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class LibsUiDiagramDrawCanvasUtil {
+    static buildFlatElement(elements, flatElementsContainer) {
+        elements.forEach((element) => {
+            flatElementsContainer.push(element);
+            if (!element.branches || !element.branches.length) {
+                return;
+            }
+            LibsUiDiagramDrawCanvasUtil.flatElementHasBranch(element, flatElementsContainer);
+        });
+    }
+    static flatElementHasBranch(element, flatElementsContainer) {
+        if (!element.branches || !element.branches.length) {
+            return;
+        }
+        element.branches.forEach((branch) => {
+            if (!branch.elements || !branch.elements.length) {
+                return;
+            }
+            LibsUiDiagramDrawCanvasUtil.buildFlatElement(branch.elements, flatElementsContainer);
+        });
+    }
+    static getDefaultStorageBranchEndCount() {
+        return { branchContainer: undefined, count: 0, branchEmpty: 0 };
+    }
+    /**
+     * data: sử dụng reference Object type nên count sẽ đệ quy cho đến node cuối cùng
+     * data.branchContainer: branch cuối cùng của element không next đến idElement
+     * data.count: số lượng branch có next_id đến idElement
+     */
+    static getBranchContainerAndCountElementHasNextIdToElement(element, idElement, data, flowFlatElements) {
+        if (!element || !element.branches) {
+            return;
+        }
+        element.branches.forEach((branch) => {
+            if (!branch.elements || !branch.elements.length) {
+                data.count++;
+                data.branchContainer = branch;
+                data.branchEmpty++;
+                return;
+            }
+            const lastElement = branch.elements[branch.elements.length - 1];
+            if (!lastElement.next_id) {
+                return;
+            }
+            if (lastElement.branches && lastElement.branches.length) {
+                const dataOfLastElement = this.getDefaultStorageBranchEndCount();
+                LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(lastElement, idElement, dataOfLastElement, flowFlatElements);
+                if (!dataOfLastElement.count) {
+                    lastElement.next_id = '';
+                    return;
+                }
+                data.count++;
+                data.branchContainer = branch;
+                if (dataOfLastElement.count === 1) {
+                    return (data.branchContainer = dataOfLastElement.branchContainer);
+                }
+                return;
+            }
+            const nextOfLastElement = flowFlatElements.find((el) => el.id === lastElement.next_id);
+            if (nextOfLastElement && nextOfLastElement.id !== idElement) {
+                return;
+            }
+            data.count++;
+            data.branchContainer = branch;
+            return;
+        });
+    }
+    static getElementHasCurrentBranchOrCurrentElement(currentBranch, currentElement, flatElements) {
+        const data = {
+            currentBranch: undefined,
+            element: undefined,
+        };
+        if (!flatElements || !flatElements.length || (!currentBranch && !currentElement)) {
+            return data;
+        }
+        if (!currentElement) {
+            data.currentBranch = currentBranch;
+            data.element = flatElements.find((el) => el.branches && !!el.branches.find((branch) => branch === currentBranch));
+            return data;
+        }
+        const elementsHasBranches = flatElements.filter((item) => item.branches && item.branches.length);
+        if (!elementsHasBranches) {
+            return data;
+        }
+        for (const element of elementsHasBranches) {
+            const branches = element.branches;
+            if (!branches) {
+                return data;
+            }
+            for (const branch of branches) {
+                if (!branch.elements || !branch.elements.length) {
+                    continue;
+                }
+                if (branch.elements.find((item) => item.id === currentElement.id)) {
+                    data.currentBranch = branch;
+                    data.element = element;
+                    return data;
+                }
+            }
+        }
+        return data;
+    }
+    static findAndDeleteElementFromContainer(containerElement, elementDelete) {
+        for (const index in containerElement) {
+            const elementOfIndex = containerElement[index];
+            if (elementOfIndex.id === elementDelete.id) {
+                containerElement.splice(+index, 1);
+                return true;
+            }
+            if (!elementOfIndex.branches || !elementOfIndex.branches.length) {
+                continue;
+            }
+            for (const branch of elementOfIndex.branches) {
+                if (!branch.elements || !branch.elements.length) {
+                    continue;
+                }
+                if (this.findAndDeleteElementFromContainer(branch.elements, elementDelete)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    static getBranchOfElement(elementId, flatElements, elementTypeWorkflow) {
+        const flatElementHasBranch = flatElements.filter((item) => item.element_type === elementTypeWorkflow);
+        if (!flatElementHasBranch) {
+            return;
+        }
+        for (const item of flatElementHasBranch) {
+            if (!item.branches || !item.branches.length) {
+                continue;
+            }
+            for (const branch of item.branches) {
+                const index = branch.elements.findIndex((el) => el.id === elementId);
+                if (index === -1) {
+                    continue;
+                }
+                return branch;
+            }
+        }
+        return;
+    }
+}
+const getDefaultConfigConstituentBranches = (code, dataDefault) => {
+    dataDefault.branches = [
+        {
+            elements: [],
+        },
+        {
+            elements: [],
+        },
+    ];
+    return dataDefault;
+};
+const findAndDeleteElementFromContainer = (containerElement, elementDelete) => {
+    for (const index in containerElement) {
+        const elementOfIndex = containerElement[index];
+        if (elementOfIndex.id === elementDelete.id) {
+            containerElement.splice(+index, 1);
+            return true;
+        }
+        if (!elementOfIndex.branches || !elementOfIndex.branches.length) {
+            continue;
+        }
+        for (const branch of elementOfIndex.branches) {
+            if (!branch.elements || !branch.elements.length) {
+                continue;
+            }
+            if (findAndDeleteElementFromContainer(branch.elements, elementDelete)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+
+class LibsUiDiagramDrawCanvasService {
+    elements;
+    flatElements;
+    handlerFunction;
+    elementRuleConnectable = [];
+    translateService = inject(TranslateService);
+    set HandlerFunction(handlerFunction) {
+        this.handlerFunction = handlerFunction;
+    }
+    get HandlerFunction() {
+        return this.handlerFunction;
+    }
+    loadElements(elements, positionFirstNode, ruleConnectableElements) {
+        if (!elements || !elements.length) {
+            return;
+        }
+        this.flatElements = [];
+        const firstElement = elements[0];
+        firstElement.specific_x = positionFirstNode.x;
+        firstElement.specific_y = positionFirstNode.y;
+        this.Elements = elements;
+        this.RuleConnectableElements = ruleConnectableElements;
+    }
+    set Elements(elements) {
+        this.elements = elements;
+    }
+    get Elements() {
+        return this.elements;
+    }
+    set RuleConnectableElements(elements) {
+        this.elementRuleConnectable = elements;
+    }
+    get RuleConnectableElements() {
+        return this.elementRuleConnectable;
+    }
+    checkRuleDragDrop(beforeElementDrag, currentElementDrag, afterElementDrag, ruleConnectableElements) {
+        const ruleItemDrag = ruleConnectableElements.find((item) => item.elementCode === currentElementDrag?.code);
+        const ruleAfterItemDrag = ruleConnectableElements.find((item) => afterElementDrag && item.elementCode === afterElementDrag.code);
+        if (!!(ruleItemDrag && ruleItemDrag.elementCodeConnectableBefore.find((code) => code === beforeElementDrag?.code)) &&
+            (!ruleAfterItemDrag || !!(ruleAfterItemDrag && ruleAfterItemDrag.elementCodeConnectableBefore.find((code) => code === currentElementDrag?.code)))) {
+            return true;
+        }
+        return false;
+    }
+    get FlatElements() {
+        this.flatElements = [];
+        LibsUiDiagramDrawCanvasUtil.buildFlatElement(this.Elements, this.flatElements);
+        return this.flatElements;
+    }
+    checkExistNameElement(name, flatElements) {
+        if (!name || !name.trim()) {
+            return false;
+        }
+        return flatElements?.find((element) => element.name && element.name.trim() && element.name.trim().toLocaleLowerCase() === name.trim().toLocaleLowerCase()) ? true : false;
+    }
+    addElement(itemDrop, branchDrop, dataDrop, branchChoice) {
+        if (!itemDrop || !dataDrop) {
+            return;
+        }
+        const elementsFlat = this.FlatElements;
+        if (dataDrop.code !== canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+            let counter = 0;
+            const elementsOfCodeDataDrop = this.FlatElements?.filter((element) => element.code === dataDrop.code);
+            if (elementsOfCodeDataDrop && elementsOfCodeDataDrop.length) {
+                counter = elementsOfCodeDataDrop.reduce((preEl, currentEl) => (Number(currentEl.specific_counter_current_code) > Number(preEl.specific_counter_current_code) ? currentEl : preEl))
+                    .specific_counter_current_code;
+            }
+            counter++;
+            let name = `${dataDrop.name} ${counter}`;
+            while (this.checkExistNameElement(name, elementsFlat)) {
+                counter++;
+                name = `${dataDrop.name} ${counter}`;
+            }
+            dataDrop.name = name;
+            dataDrop.specific_counter_current_code = counter;
+        }
+        if (branchDrop) {
+            return this.addElementToBranch(itemDrop, branchDrop, cloneDeep(dataDrop), branchChoice);
+        }
+        const elements = this.Elements;
+        const nextCurrentItemDrop = elements?.find((item) => item.id === itemDrop.next_id);
+        if (!nextCurrentItemDrop && dataDrop.code !== canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+            return;
+        }
+        const indexItemDrop = elements?.findIndex((item) => item.id === itemDrop.id);
+        const newElement = { ...cloneDeep(dataDrop), pre_id: itemDrop.id, next_id: dataDrop.code !== canvasConfigReadonly().TYPE_ELEMENT_EXIT ? nextCurrentItemDrop.id : '' };
+        if (!dataDrop.id) {
+            newElement.id = `${uuid()}`;
+        }
+        itemDrop.next_id = newElement.id;
+        if (nextCurrentItemDrop) {
+            nextCurrentItemDrop.pre_id = newElement.id;
+        }
+        elements?.splice(indexItemDrop + 1, 0, newElement);
+        const flatElements = this.FlatElements;
+        const afterElement = flatElements?.find((el) => el.pre_id === newElement.id);
+        if (!afterElement) {
+            return;
+        }
+        const beforeElement = flatElements?.filter((el) => el.id !== newElement.id && el.next_id === afterElement.id);
+        beforeElement?.forEach((element) => {
+            element.next_id = newElement.id;
+        });
+        if (dataDrop.element_type !== canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+            return;
+        }
+        this.addElementExitWorkFlow(newElement, branchChoice);
+    }
+    addElementToBranch(itemDrop, branchDrop, dataDrop, numberBranch) {
+        const elements = branchDrop.elements;
+        let nextCurrentItemDrop = undefined;
+        let indexItemDrop = -1;
+        if (elements && elements.length) {
+            indexItemDrop = elements.findIndex((item) => item.id === itemDrop.id);
+            nextCurrentItemDrop = elements.find((item) => item.id === itemDrop.next_id);
+            if (!nextCurrentItemDrop && indexItemDrop === -1) {
+                nextCurrentItemDrop = elements[indexItemDrop + 1];
+            }
+        }
+        let nextId = (nextCurrentItemDrop && nextCurrentItemDrop.id) || itemDrop.next_id;
+        if (dataDrop.code === canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+            nextId = '';
+        }
+        const newElement = { ...dataDrop, pre_id: itemDrop.id, next_id: nextId };
+        if (!dataDrop.id) {
+            newElement.id = `${uuid()}`;
+        }
+        if (!itemDrop.branches || !itemDrop.branches.find((branch) => branch === branchDrop)) {
+            itemDrop.next_id = newElement.id;
+        }
+        if (nextCurrentItemDrop) {
+            nextCurrentItemDrop.pre_id = newElement.id;
+        }
+        elements?.splice(indexItemDrop + 1, 0, newElement);
+        if (itemDrop && itemDrop.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+            this.updateNextIdOfChildElementInElementWorkflow(itemDrop, this.FlatElements?.find((item) => item.id === itemDrop.next_id));
+        }
+        if (dataDrop.code === canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+            this.checkEndMoveElementWhenDropElementCodeExit(branchDrop);
+        }
+        if (dataDrop.element_type !== canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+            return;
+        }
+        this.addElementExitWorkFlow(newElement, numberBranch);
+    }
+    updateNextIdOfChildElementInElementWorkflow(elementWorkflow, nextElement) {
+        if (!elementWorkflow || elementWorkflow.element_type !== canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW || !nextElement) {
+            return;
+        }
+        const flatElement = [];
+        LibsUiDiagramDrawCanvasUtil.flatElementHasBranch(nextElement, flatElement);
+        elementWorkflow.branches?.forEach((branch) => {
+            if (!branch.elements || !branch.elements.length) {
+                return;
+            }
+            const elements = branch.elements;
+            elements.forEach((element, index) => {
+                if (index !== elements.length - 1) {
+                    if (element.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW && element.next_id) {
+                        return this.updateNextIdOfChildElementInElementWorkflow(element, elements[index + 1]);
+                    }
+                    return;
+                }
+                if (element.code === canvasConfigReadonly().TYPE_ELEMENT_EXIT || element.id === nextElement.id) {
+                    return;
+                }
+                if (element.pre_id === nextElement.id || flatElement.find((item) => item.id === element.id)) {
+                    // trường hợp gọi đệ quy NextElement là khối trước hoặc cha của các element hiện tại
+                    return;
+                }
+                if (element.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+                    if (element.next_id) {
+                        element.next_id = nextElement.id;
+                    }
+                    return this.updateNextIdOfChildElementInElementWorkflow(element, nextElement);
+                }
+                if (elementWorkflow.next_id !== nextElement.id) {
+                    return;
+                }
+                element.next_id = nextElement.id;
+            });
+        });
+    }
+    checkEndMoveElementWhenDropElementCodeExit(currentBranch) {
+        const flatElements = this.FlatElements;
+        const elementHasCurrentBranch = flatElements?.find((el) => el.branches && !!el.branches.find((branch) => branch === currentBranch));
+        if (!elementHasCurrentBranch) {
+            return;
+        }
+        const nextElement = flatElements?.find((el) => el.id === elementHasCurrentBranch.next_id);
+        if (!nextElement) {
+            return;
+        }
+        const dataElementHasCurrentBranch = LibsUiDiagramDrawCanvasUtil.getDefaultStorageBranchEndCount();
+        LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(elementHasCurrentBranch, nextElement.id, dataElementHasCurrentBranch, this.FlatElements);
+        if (!dataElementHasCurrentBranch.branchEmpty && dataElementHasCurrentBranch.count === 0) {
+            elementHasCurrentBranch.next_id = '';
+        }
+        const elementNextToId = flatElements?.find((el) => el.next_id === nextElement.id); // Khối cha
+        if (!elementNextToId || elementNextToId.element_type !== canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW || !elementNextToId.next_id) {
+            return;
+        }
+        let dataFistElement = dataElementHasCurrentBranch;
+        if (elementHasCurrentBranch.id !== elementNextToId.id) {
+            dataFistElement = LibsUiDiagramDrawCanvasUtil.getDefaultStorageBranchEndCount();
+            LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(elementNextToId, nextElement.id, dataFistElement, this.FlatElements);
+        }
+        if (dataFistElement.count > 1 || !dataFistElement.branchContainer) {
+            return;
+        }
+        const branchAddItem = dataFistElement.branchContainer;
+        if (elementHasCurrentBranch.id === elementNextToId.id) {
+            if (nextElement.code !== canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+                this.moveElementsToBranch(nextElement, branchAddItem);
+                const { element } = LibsUiDiagramDrawCanvasUtil.getElementHasCurrentBranchOrCurrentElement(undefined, elementHasCurrentBranch, this.FlatElements);
+                const data = LibsUiDiagramDrawCanvasUtil.getDefaultStorageBranchEndCount();
+                const elementCount = element && element.next_id ? element : elementHasCurrentBranch;
+                // Fixbug: 15771
+                LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(elementCount, elementCount.next_id, data, this.FlatElements);
+                if (!data.count) {
+                    return (elementCount.next_id = '');
+                }
+                return;
+            }
+            elementHasCurrentBranch.next_id = '';
+            const elementHasBranchesNotResetId = this.deleteElement(nextElement);
+            if (!elementHasBranchesNotResetId.length) {
+                return this.cloneElementAndAddElementEXitToBranch(elementHasCurrentBranch, branchAddItem, nextElement);
+            }
+            const { data, element } = elementHasBranchesNotResetId[0];
+            const infoOfElement = LibsUiDiagramDrawCanvasUtil.getElementHasCurrentBranchOrCurrentElement(undefined, element, this.FlatElements);
+            const parentOfElement = infoOfElement.element;
+            let dataOfElementInfo = LibsUiDiagramDrawCanvasUtil.getDefaultStorageBranchEndCount();
+            LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(parentOfElement, parentOfElement?.next_id, dataOfElementInfo, this.FlatElements);
+            if (elementHasBranchesNotResetId.length === 1) {
+                if (data.count > 1) {
+                    return this.cloneElementAndAddElementEXitToBranch(element, branchAddItem, nextElement);
+                }
+                if (dataFistElement.branchContainer !== data.branchContainer && dataFistElement.count === 1) {
+                    this.cloneElementAndAddElementEXitToBranch(elementHasCurrentBranch, branchAddItem, nextElement);
+                    dataOfElementInfo = LibsUiDiagramDrawCanvasUtil.getDefaultStorageBranchEndCount();
+                    LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(parentOfElement, parentOfElement?.next_id, dataOfElementInfo, this.FlatElements);
+                }
+                if (dataOfElementInfo.count > 1) {
+                    return;
+                }
+                // Fixbug: 15518
+                if (data.branchContainer) {
+                    this.cloneElementAndAddElementEXitToBranch(element, data.branchContainer, nextElement);
+                }
+                LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(parentOfElement, parentOfElement?.next_id, LibsUiDiagramDrawCanvasUtil.getDefaultStorageBranchEndCount(), this.FlatElements);
+                return;
+            }
+            this.cloneElementAndAddElementEXitToBranch(element, branchAddItem, nextElement);
+            const flatElement = this.FlatElements;
+            elementHasBranchesNotResetId.forEach((item) => {
+                const { element } = item;
+                if (element.next_id && flatElement?.find((item) => item.id === element.next_id)) {
+                    return;
+                }
+                const infoFromElement = LibsUiDiagramDrawCanvasUtil.getElementHasCurrentBranchOrCurrentElement(undefined, element, flatElement);
+                if (infoFromElement.element) {
+                    element.next_id = infoFromElement.element.next_id;
+                    this.updateNextIdOfChildElementInElementWorkflow(element, flatElements?.find((item) => item.id === element.next_id)); // FixBug: 15729
+                }
+            });
+            LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(parentOfElement, parentOfElement?.next_id, LibsUiDiagramDrawCanvasUtil.getDefaultStorageBranchEndCount(), flatElement);
+            return;
+        }
+        if (nextElement.code !== canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+            this.moveElementsToBranch(nextElement, branchAddItem);
+            // kiểm tra khối cha chứa các element có branch xem có element nào count = 0 để reset next_id = '' của khối đó
+            const dataOfElementNextToId = LibsUiDiagramDrawCanvasUtil.getDefaultStorageBranchEndCount();
+            LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(elementNextToId, elementNextToId.next_id, dataOfElementNextToId, this.FlatElements);
+            if (!dataOfElementNextToId.count) {
+                elementNextToId.next_id = '';
+            }
+            return;
+        }
+        elementNextToId.next_id = '';
+        elementHasCurrentBranch.next_id = '';
+        const elementHasBranchesNotResetId = this.deleteElement(nextElement);
+        if (dataElementHasCurrentBranch.branchContainer) {
+            this.cloneElementAndAddElementEXitToBranch(elementHasCurrentBranch, dataElementHasCurrentBranch.branchContainer, nextElement);
+        }
+        if (branchAddItem && branchAddItem !== dataElementHasCurrentBranch.branchContainer) {
+            this.cloneElementAndAddElementEXitToBranch(elementNextToId, branchAddItem, nextElement); // dòng này sẽ khởi tạo lại next_id của khối cha
+        }
+        if (!elementHasBranchesNotResetId.length) {
+            return;
+        }
+        // kiểm tra khối cha chứa các element có branch xem có element nào count = 0 để reset next_id = '' của khối đó
+        dataFistElement = LibsUiDiagramDrawCanvasUtil.getDefaultStorageBranchEndCount();
+        LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(elementNextToId, nextElement.id, dataFistElement, this.FlatElements);
+        if (!dataFistElement.count) {
+            // nếu khối cha kiểm tra khối cha chứa các element có branch có count = 0 thì reset next_id = ''
+            elementNextToId.next_id = '';
+        }
+        const newId = elementHasBranchesNotResetId[0].element.next_id;
+        elementHasBranchesNotResetId.forEach((item) => (item.element.next_id = newId));
+    }
+    moveElementsToBranch(elementStart, branchContainer) {
+        if (!elementStart || elementStart.code === canvasConfigReadonly().TYPE_ELEMENT_EXIT || !branchContainer || !branchContainer.elements) {
+            return;
+        }
+        const result = this.findContainerHasElementStart(elementStart, this.Elements);
+        if (!result) {
+            return;
+        }
+        const { container, index } = result;
+        const elementsHasMove = container.slice(Number(index));
+        const elementsOfBranchContainer = branchContainer.elements;
+        const lastElementOfBranchContainer = elementsOfBranchContainer[elementsOfBranchContainer.length - 1];
+        elementsHasMove.forEach((element) => this.deleteElement(element, true));
+        if (lastElementOfBranchContainer && lastElementOfBranchContainer.code !== canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+            lastElementOfBranchContainer.next_id = elementStart.id;
+            elementStart.pre_id = lastElementOfBranchContainer.id;
+        }
+        const lastElementMove = elementsHasMove[elementsHasMove.length - 1];
+        let nextElement = elementStart;
+        if (lastElementMove && lastElementMove.next_id) {
+            nextElement = this.FlatElements?.find((item) => item.id === lastElementMove.next_id);
+        }
+        const preElementStart = container[Number(index) - 1];
+        branchContainer.elements.push(...elementsHasMove);
+        if (!preElementStart || preElementStart.element_type !== canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+            return;
+        }
+        if (nextElement) {
+            this.updateNextIdOfChildElementInElementWorkflow(preElementStart, nextElement);
+        }
+    }
+    findContainerHasElementStart(elementStart, containerCapacity) {
+        if (!containerCapacity || !containerCapacity.length || !elementStart) {
+            return undefined;
+        }
+        for (const index in containerCapacity) {
+            const element = containerCapacity[index];
+            if (element.id === elementStart.id) {
+                return {
+                    elementStart: elementStart,
+                    index: index,
+                    container: containerCapacity,
+                };
+            }
+            if (!element.branches || !element.branches.length) {
+                continue;
+            }
+            const branches = element.branches;
+            for (const branch of branches) {
+                const result = this.findContainerHasElementStart(elementStart, branch.elements);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return undefined;
+    }
+    deleteElement(elementDelete, ignoreUpdatePreId) {
+        if (!elementDelete || !elementDelete.id) {
+            return [];
+        }
+        const elementHasBranchesNotResetId = new Array();
+        const flatElements = this.FlatElements;
+        const elementsHasNextIdToElementDelete = flatElements?.filter((el) => el.next_id === elementDelete.id);
+        const elementHasPreIdToElementDelete = flatElements?.find((el) => el.pre_id === elementDelete.id && el.id === elementDelete.next_id);
+        if (!ignoreUpdatePreId && elementHasPreIdToElementDelete) {
+            elementHasPreIdToElementDelete.pre_id = elementDelete.pre_id;
+        }
+        elementsHasNextIdToElementDelete?.forEach((elementHasNextIdToElementDelete) => {
+            if (elementHasPreIdToElementDelete) {
+                elementHasNextIdToElementDelete.next_id = elementHasPreIdToElementDelete.id;
+                return;
+            }
+            if (elementDelete.code !== canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+                if (!elementHasPreIdToElementDelete && elementDelete.next_id) {
+                    // Fixbug: 15623
+                    elementHasNextIdToElementDelete.next_id = elementDelete.next_id;
+                }
+                return;
+            }
+            if (elementHasNextIdToElementDelete.branches && elementHasNextIdToElementDelete.branches.length) {
+                const data = LibsUiDiagramDrawCanvasUtil.getDefaultStorageBranchEndCount();
+                LibsUiDiagramDrawCanvasUtil.getBranchContainerAndCountElementHasNextIdToElement(elementHasNextIdToElementDelete, elementDelete.id, data, this.FlatElements);
+                if (!data.count) {
+                    elementHasNextIdToElementDelete.next_id = '';
+                    return;
+                }
+                elementHasBranchesNotResetId.push({ element: elementHasNextIdToElementDelete, data });
+                return;
+            }
+            elementHasNextIdToElementDelete.next_id = elementDelete.next_id;
+        });
+        LibsUiDiagramDrawCanvasUtil.findAndDeleteElementFromContainer(this.Elements, elementDelete);
+        return elementHasBranchesNotResetId;
+    }
+    cloneElementAndAddElementEXitToBranch(elementHasCurrentBranch, branch, dataDrop) {
+        if (!dataDrop || !elementHasCurrentBranch || !branch) {
+            return;
+        }
+        let elementDrop = elementHasCurrentBranch;
+        if (branch.elements && branch.elements.length) {
+            elementDrop = branch.elements[branch.elements.length - 1];
+        }
+        return this.addElementToBranch(elementDrop, branch, cloneDeep(dataDrop));
+    }
+    addElementExitWorkFlow(newElement, numberBranch) {
+        const exit = {
+            element_type: canvasConfigReadonly().TYPE_ELEMENT_EXIT,
+            code: canvasConfigReadonly().TYPE_ELEMENT_EXIT,
+            name: this.translateService.instant('i18n_end_journey_new'),
+            specific_width: canvasConfigReadonly().WIDTH_ELEMENT_DEFAULT,
+            specific_height: canvasConfigReadonly().HEIGHT_ELEMENT_DEFAULT,
+            specific_x: 0,
+            specific_y: 0,
+        };
+        if (newElement.branches && newElement.branches.length) {
+            newElement.branches.forEach((item, index) => {
+                if (index === numberBranch) {
+                    return;
+                }
+                if (!newElement.branches) {
+                    return;
+                }
+                this.addElement(newElement, item, exit);
+            });
+        }
+    }
+    addElementExitWhenDeleteDirectionLine(element, branch) {
+        const exit = {
+            element_type: canvasConfigReadonly().TYPE_ELEMENT_EXIT,
+            code: canvasConfigReadonly().TYPE_ELEMENT_EXIT,
+            name: this.translateService.instant('i18n_end_journey_new'),
+            specific_width: canvasConfigReadonly().WIDTH_ELEMENT_DEFAULT,
+            specific_height: canvasConfigReadonly().HEIGHT_ELEMENT_DEFAULT,
+            specific_x: 0,
+            specific_y: 0,
+        };
+        delete element.nodeOtherConfig;
+        this.addElement(element, branch, exit);
+    }
+    /**
+     * Khi một element bị xoá, hàm này sẽ tự động thêm exit cho tất cả các element phía trước đang trỏ tới element đó.
+     */
+    addElementExitForAllElementPreviousWhenElementDelete(elementsDelete) {
+        const flatElement = this.FlatElements;
+        const flatElementsInElementDelete = [];
+        LibsUiDiagramDrawCanvasUtil.buildFlatElement(elementsDelete, flatElementsInElementDelete);
+        flatElementsInElementDelete.forEach((elementDel) => {
+            if (elementDel.pre_other_id && elementDel.pre_other_id.length) {
+                elementDel.pre_other_id.forEach((item) => {
+                    const element = flatElement?.find((el) => el.id === item);
+                    if (element?.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW && element.branches?.length) {
+                        element.branches.forEach((branch) => {
+                            if (!branch.next_other_id || !branch.next_other_id.length) {
+                                return;
+                            }
+                            const indexEl = branch.next_other_id.findIndex((el) => el === elementDel.id);
+                            if (indexEl !== -1) {
+                                branch.next_other_id.splice(indexEl, 1);
+                            }
+                            if (!branch.next_other_id.length) {
+                                this.addElementExitWhenDeleteDirectionLine(element, branch);
+                                element.subCodeOfElement = undefined;
+                                element.attributeSvgD = undefined;
+                                element.position_end = undefined;
+                                branch.nodeOtherConfig = undefined;
+                            }
+                        });
+                        return;
+                    }
+                    if (!element || !element.next_other_id) {
+                        return;
+                    }
+                    const indexEl = element.next_other_id.findIndex((el) => el === elementDel.id);
+                    if (indexEl !== -1) {
+                        element.next_other_id.splice(indexEl, 1);
+                    }
+                    if (!element.next_other_id.length) {
+                        if (element.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+                            const getConfigDefaultBranches = this.handlerFunction?.getConfigDefaultBranches ?? getDefaultConfigConstituentBranches;
+                            getConfigDefaultBranches(element.code ?? '', element);
+                        }
+                        const branch = LibsUiDiagramDrawCanvasUtil.getBranchOfElement(element.id ?? '', this.FlatElements, canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW);
+                        this.addElementExitWhenDeleteDirectionLine(element, branch);
+                        element.subCodeOfElement = undefined;
+                        element.attributeSvgD = undefined;
+                        element.position_end = undefined;
+                    }
+                });
+                return;
+            }
+            if (elementDel.next_other_id && elementDel.next_other_id.length) {
+                elementDel.next_other_id.forEach((item) => {
+                    const element = flatElement?.find((el) => el.id === item);
+                    if (!element || !element.pre_other_id) {
+                        return;
+                    }
+                    const indexEl = element.pre_other_id.findIndex((el) => el === elementDel.id);
+                    if (indexEl !== -1) {
+                        element.pre_other_id.splice(indexEl, 1);
+                    }
+                });
+            }
+            if (elementDel.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW && elementDel.branches?.length) {
+                elementDel.branches.forEach((branch) => {
+                    if (!branch.next_other_id || !branch.next_other_id.length) {
+                        return;
+                    }
+                    branch.next_other_id.forEach((item) => {
+                        const element = flatElement?.find((el) => el.id === item);
+                        if (!element || !element.pre_other_id) {
+                            return;
+                        }
+                        const indexEl = element.pre_other_id.findIndex((el) => el === elementDel.id);
+                        if (indexEl !== -1) {
+                            element.pre_other_id.splice(indexEl, 1);
+                        }
+                    });
+                });
+            }
+        });
+    }
+    async removeOrChangeElement(elementRemove, elementChange, branchChoose) {
+        if (!elementRemove || elementRemove.code === canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+            return;
+        }
+        const flatElements = this.FlatElements;
+        const preElement = flatElements?.find((element) => element.id === elementRemove.pre_id);
+        const infoOfElementRemove = LibsUiDiagramDrawCanvasUtil.getElementHasCurrentBranchOrCurrentElement(undefined, elementRemove, this.FlatElements);
+        const exit = {
+            element_type: canvasConfigReadonly().TYPE_ELEMENT_EXIT,
+            code: canvasConfigReadonly().TYPE_ELEMENT_EXIT,
+            name: this.translateService.instant('i18n_out_journey'),
+            id: `${uuid()}`,
+            specific_width: canvasConfigReadonly().WIDTH_ELEMENT_DEFAULT,
+            specific_height: canvasConfigReadonly().HEIGHT_ELEMENT_DEFAULT,
+            specific_x: 0,
+            specific_y: 0,
+        };
+        const elementNextBeforeDelete = flatElements?.find((el) => el.pre_id === elementRemove.id && el.id === elementRemove.next_id);
+        if (elementNextBeforeDelete && elementNextBeforeDelete.code === canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+            if (preElement && preElement.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW && infoOfElementRemove.currentBranch) {
+                infoOfElementRemove.currentBranch.nodeOtherConfig = undefined;
+            }
+            if (preElement && preElement.element_type !== canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+                preElement.nodeOtherConfig = undefined;
+            }
+        }
+        if (preElement && !elementNextBeforeDelete) {
+            preElement.nodeOtherConfig = undefined;
+            if (preElement && preElement.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW && infoOfElementRemove.currentBranch) {
+                infoOfElementRemove.currentBranch.nodeOtherConfig = undefined;
+            }
+        }
+        this.deleteElement(elementRemove);
+        // xóa thẳng
+        if (!elementChange) {
+            if (!elementNextBeforeDelete) {
+                this.addElement(preElement, infoOfElementRemove.currentBranch, exit);
+            }
+            return;
+        }
+        // thay đơn == đơn, thay đơn = nhánh
+        if (elementRemove.element_type !== canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+            if (!elementRemove.next_id && elementChange.element_type !== canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+                // 48229
+                this.addElement(preElement, infoOfElementRemove.currentBranch, exit);
+            }
+            this.addElement(preElement, infoOfElementRemove.currentBranch, elementChange, branchChoose);
+            if (elementChange.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW && elementNextBeforeDelete && elementNextBeforeDelete.code === canvasConfigReadonly().TYPE_ELEMENT_EXIT) {
+                this.deleteElement(elementNextBeforeDelete);
+            }
+            return;
+        }
+        // thay nhánh = đơn
+        if (elementChange.element_type !== canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+            this.addElement(preElement, infoOfElementRemove.currentBranch, exit);
+            this.addElement(preElement, infoOfElementRemove.currentBranch, elementChange, branchChoose);
+            return;
+        }
+        // thay nhánh = nhánh
+        this.addElement(preElement, infoOfElementRemove.currentBranch, exit);
+        this.addElement(preElement, infoOfElementRemove.currentBranch, elementChange, branchChoose);
+        this.deleteElement(exit);
+    }
+    async deleteChangeElementAndInsertBranchKeep(elementRemove, elementChange, branchKeepElement, branchChoice) {
+        const flatElements = this.FlatElements;
+        const preElement = flatElements?.find((element) => element.id === elementRemove.pre_id);
+        const infoOfElementRemove = LibsUiDiagramDrawCanvasUtil.getElementHasCurrentBranchOrCurrentElement(undefined, elementRemove, this.FlatElements);
+        this.addBranchKeepToFlow(branchKeepElement, preElement, infoOfElementRemove.currentBranch);
+        this.deleteElement(elementRemove);
+        if (elementChange) {
+            this.addElement(preElement, infoOfElementRemove.currentBranch, elementChange, branchChoice);
+        }
+    }
+    addBranchKeepToFlow(branchKeepElement, itemDrop, branchDrop) {
+        if (!branchKeepElement) {
+            return;
+        }
+        const elements = branchKeepElement.elements;
+        const nextCurrentItemDrop = elements[0];
+        if (nextCurrentItemDrop) {
+            if (itemDrop.element_type !== canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+                itemDrop.next_id = nextCurrentItemDrop && nextCurrentItemDrop.id;
+            }
+            nextCurrentItemDrop.pre_id = itemDrop.id;
+        }
+        if (branchDrop) {
+            branchDrop.elements.push(...elements);
+            return;
+        }
+        this.Elements.push(...elements);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDiagramDrawCanvasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDiagramDrawCanvasService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDiagramDrawCanvasService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const buildElementDirectionTo = (element, flatElements, checkRule, branch) => {
+    let elementsFlat = cloneDeep(flatElements) ?? [];
+    if (element.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+        if (!branch) {
+            return undefined;
+        }
+        getAllItemPreOfElement(element, elementsFlat);
+        getAllItemNextOfBranch(branch, elementsFlat);
+        elementsFlat = elementsFlat.filter((item) => item.id !== element.id && item.code !== canvasConfigReadonly().TYPE_ELEMENT_EXIT);
+        if (element.pre_other_id?.length) {
+            elementsFlat = elementsFlat.filter((item) => !element.pre_other_id?.includes(item.id ?? ''));
+        }
+        elementsFlat = elementsFlat.filter((item) => {
+            return checkRule(element, item);
+        });
+        return elementsFlat;
+    }
+    getAllItemPreOfElement(element, elementsFlat);
+    getAllItemNextOfElement(element, elementsFlat);
+    elementsFlat = elementsFlat.filter((item) => item.id !== element.id && item.code !== canvasConfigReadonly().TYPE_ELEMENT_EXIT);
+    if (element.pre_other_id?.length) {
+        elementsFlat = elementsFlat.filter((item) => !element.pre_other_id?.includes(item.id ?? ''));
+    }
+    elementsFlat = elementsFlat.filter((item) => {
+        return checkRule(element, item);
+    });
+    return elementsFlat;
+};
+const getAllItemPreOfElement = (element, flatElements) => {
+    const pre_id = [];
+    if (element.pre_id) {
+        pre_id.push(element.pre_id);
+    }
+    if (element.pre_other_id) {
+        pre_id.push(...element.pre_other_id);
+    }
+    if (!pre_id.length) {
+        return;
+    }
+    pre_id.forEach((preId) => {
+        const elementPre = flatElements.find((item) => item.id === preId);
+        if (!elementPre) {
+            return;
+        }
+        const itemIndex = flatElements.findIndex((item) => item.id === preId);
+        flatElements.splice(itemIndex, 1);
+        getAllItemPreOfElement(elementPre, flatElements);
+    });
+};
+const getAllItemNextOfElement = (element, flatElements) => {
+    if (!element.next_id) {
+        if (!element.branches || !element.branches.length) {
+            return;
+        }
+        const flatElementInElementCurrent = [];
+        buildFlatElement([element], flatElementInElementCurrent);
+        flatElementInElementCurrent.forEach((el) => {
+            const itemIndex = flatElements.findIndex((item) => item.id === el.id);
+            if (itemIndex === -1) {
+                return;
+            }
+            flatElements.splice(itemIndex, 1);
+        });
+        return;
+    }
+    const elementNextIndex = flatElements.findIndex((item) => item.id === element.next_id);
+    if (elementNextIndex === -1) {
+        return;
+    }
+    const nextElement = flatElements[elementNextIndex];
+    flatElements.splice(elementNextIndex, 1);
+    getAllItemNextOfElement(nextElement, flatElements);
+};
+const getAllItemNextOfBranch = (branch, flatElements) => {
+    const flatElementInElementCurrent = [];
+    buildFlatElement(branch.elements, flatElementInElementCurrent);
+    flatElementInElementCurrent.forEach((el) => {
+        const itemIndex = flatElements.findIndex((item) => item.id === el.id);
+        if (itemIndex === -1) {
+            return;
+        }
+        flatElements.splice(itemIndex, 1);
+    });
+};
+const collectNextChainElements = (element, flatContainerElement, listElementDelete) => {
+    const elementNext = flatContainerElement.find((item) => item.id === element.next_id);
+    if (!elementNext) {
+        return;
+    }
+    const flatElementInElementCurrent = [];
+    buildFlatElement([elementNext], flatElementInElementCurrent);
+    flatElementInElementCurrent.forEach((el) => {
+        const itemInNext = flatContainerElement.find((item) => item.id === el.id);
+        if (itemInNext) {
+            listElementDelete.push(itemInNext);
+        }
+    });
+    collectNextChainElements(elementNext, flatContainerElement, listElementDelete);
+};
+
+class LibsUiDiagramDrawDirectionService {
+    elementDirection;
+    branchDirection;
+    elementViewDirectionId;
+    onViewDirection = new Subject();
+    canvasService = inject(LibsUiDiagramDrawCanvasService);
+    set ElementDirection(element) {
+        this.elementDirection = element;
+    }
+    get ElementDirection() {
+        return this.elementDirection;
+    }
+    set BranchDirection(branch) {
+        this.branchDirection = branch;
+    }
+    get BranchDirection() {
+        return this.branchDirection;
+    }
+    set ElementViewDirectionId(id) {
+        this.elementViewDirectionId = id;
+    }
+    get ElementViewDirectionId() {
+        return this.elementViewDirectionId;
+    }
+    get OnViewDirection() {
+        return this.onViewDirection;
+    }
+    checkRuleDirectionToElement(element, elementConnectTo) {
+        const ruleAfterItemDrag = this.canvasService.RuleConnectableElements.find((item) => elementConnectTo && item.elementCode === elementConnectTo.code);
+        if (!ruleAfterItemDrag) {
+            return true;
+        }
+        if (ruleAfterItemDrag.elementCodeConnectableBefore.find((code) => code === element?.code)) {
+            return true;
+        }
+        return false;
+    }
+    buildElementConnectTo(element, flatElements, branch, checkRule) {
+        const checkRuleDirectionToElement = checkRule ?? this.checkRuleDirectionToElement.bind(this);
+        return buildElementDirectionTo(element, flatElements, checkRuleDirectionToElement, branch);
+    }
+    /**Xóa các element nằm phía sau khi nhánh được điều hướng */
+    deleteElementsBehindBranchConnectTo(branch) {
+        const flatElements = this.canvasService.FlatElements ?? [];
+        const flatElementInElementCurrent = [];
+        const listElementDelete = [];
+        buildFlatElement(branch.elements, flatElementInElementCurrent);
+        listElementDelete.push(...flatElementInElementCurrent);
+        this.deleteLineConnectFromElement(listElementDelete, flatElements);
+        listElementDelete.forEach((elementDelete) => {
+            findAndDeleteElementFromContainer(this.canvasService.Elements, elementDelete);
+        });
+    }
+    /**xóa line đến và xóa line đi ở toàn bộ các khối và nhánh bị xóa */
+    deleteLineConnectFromElement(elements, flatElements) {
+        elements.forEach((item) => {
+            if (item.branches && item.branches.length) {
+                item.branches.forEach((branch) => {
+                    if (branch.next_other_id && branch.next_other_id.length) {
+                        this.deletePreOtherId(item.id ?? '', branch.next_other_id, flatElements);
+                    }
+                });
+            }
+            if (item.next_other_id && item.next_other_id.length) {
+                this.deletePreOtherId(item.id ?? '', item.next_other_id, flatElements);
+            }
+            if (item.pre_other_id && item.pre_other_id.length) {
+                // nhánh chỉ lưu id next đi thôi chứ không lưu được pre => chỉ cần xóa pre trong khối.
+                this.deleteNextOtherId(item.id ?? '', item.pre_other_id, flatElements);
+            }
+        });
+    }
+    /** Xóa pre_other_id từ khác khối mà khối bị xóa nối đến BlockDelete => Other*/
+    deletePreOtherId(itemId, nextOtherId, flatElements) {
+        nextOtherId.forEach((nextToId) => {
+            const nextElement = flatElements.find((item) => item.id === nextToId);
+            if (!nextElement || !nextElement.pre_other_id || !nextElement.pre_other_id.length) {
+                return;
+            }
+            const indexIdPre = nextElement.pre_other_id.findIndex((id) => id === itemId);
+            if (indexIdPre !== -1) {
+                nextElement.pre_other_id.splice(indexIdPre, 1);
+            }
+        });
+    }
+    /** Xóa next_other_id từ khác khối nối đến khối bị xóa Other => BlockDelete và kiểm tra + thêm khối thoát cho những khối nối tới BlockDelete*/
+    deleteNextOtherId(itemId, preOtherId, flatElements) {
+        preOtherId.forEach((nextToId) => {
+            const preElement = flatElements.find((item) => item.id === nextToId);
+            if (!preElement) {
+                return;
+            }
+            if (preElement.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+                preElement.branches?.forEach((branch) => {
+                    if (!branch.next_other_id || !branch.next_other_id.length) {
+                        return;
+                    }
+                    const indexIdNextInBranch = branch.next_other_id.findIndex((id) => id === itemId);
+                    if (indexIdNextInBranch !== -1) {
+                        branch.next_other_id.splice(indexIdNextInBranch, 1);
+                    }
+                    if (!branch.next_other_id || !branch.next_other_id.length) {
+                        branch.nodeOtherConfig = undefined;
+                        this.canvasService.addElementExitWhenDeleteDirectionLine(preElement, branch);
+                    }
+                });
+                return;
+            }
+            if (!preElement.next_other_id || !preElement.next_other_id.length) {
+                return;
+            }
+            const indexIdNext = preElement.next_other_id.findIndex((id) => id === itemId);
+            if (indexIdNext !== -1) {
+                preElement.next_other_id.splice(indexIdNext, 1);
+            }
+            if (!preElement.next_other_id || !preElement.next_other_id.length) {
+                // thêm khối thoát vì không còn khối nào connect tới nó
+                if (preElement.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW) {
+                    const getConfigDefaultBranches = this.canvasService.HandlerFunction?.getConfigDefaultBranches ?? getDefaultConfigConstituentBranches;
+                    getConfigDefaultBranches(preElement.code ?? '', preElement);
+                }
+                const branch = LibsUiDiagramDrawCanvasUtil.getBranchOfElement(preElement.id ?? '', flatElements, canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW);
+                this.canvasService.addElementExitWhenDeleteDirectionLine(preElement, branch);
+                preElement.subCodeOfElement = undefined;
+                preElement.attributeSvgD = undefined;
+                preElement.position_end = undefined;
+            }
+        });
+    }
+    addBranchDirection(targetId, element, branch, flatElements) {
+        if (!branch.next_other_id) {
+            branch.next_other_id = [];
+        }
+        branch.next_other_id.push(targetId);
+        const elementTo = flatElements.find((item) => item.id === targetId);
+        if (elementTo) {
+            if (!elementTo.pre_other_id) {
+                elementTo.pre_other_id = [];
+            }
+            elementTo.pre_other_id.push(element.id ?? '');
+        }
+    }
+    addElementDirection(targetId, element, flatElements) {
+        if (!element.next_other_id) {
+            element.next_other_id = [];
+        }
+        element.next_other_id.push(targetId);
+        const elementTo = flatElements.find((item) => item.id === targetId);
+        if (elementTo) {
+            if (!elementTo.pre_other_id) {
+                elementTo.pre_other_id = [];
+            }
+            elementTo.pre_other_id.push(element.id ?? '');
+        }
+    }
+    deleteElementsBehindElementConnectTo(element, flatElements) {
+        const listElementDelete = [];
+        let flatElementInElementCurrent = [];
+        if (element.branches && element.branches.length) {
+            buildFlatElement([element], flatElementInElementCurrent);
+            flatElementInElementCurrent = flatElementInElementCurrent.filter((item) => item.id !== element.id);
+        }
+        delete element.branches;
+        listElementDelete.push(...flatElementInElementCurrent);
+        collectNextChainElements(element, flatElements, listElementDelete);
+        this.deleteLineConnectFromElement(listElementDelete, flatElements);
+        listElementDelete.forEach((elementDelete) => {
+            this.findAndDeleteElementFromContainer(this.canvasService.Elements, elementDelete);
+        });
+    }
+    findAndDeleteElementFromContainer(containerElement, elementDelete) {
+        for (const index in containerElement) {
+            const elementOfIndex = containerElement[index];
+            if (elementOfIndex.id === elementDelete.id) {
+                containerElement.splice(+index, 1);
+                return true;
+            }
+            if (!elementOfIndex.branches || !elementOfIndex.branches.length) {
+                continue;
+            }
+            for (const branch of elementOfIndex.branches) {
+                if (!branch.elements || !branch.elements.length) {
+                    continue;
+                }
+                if (this.findAndDeleteElementFromContainer(branch.elements, elementDelete)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    editDirection(flatElements, targetId, element, branch) {
+        if (element.element_type === canvasConfigReadonly().TYPE_ELEMENT_WORKFLOW && branch) {
+            this.editDirectionWithBranch(flatElements, branch, targetId, element);
+            return;
+        }
+        const idOldNextTo = element.next_other_id?.[0];
+        const elementOldTo = flatElements?.find((item) => item.id === idOldNextTo);
+        // xóa line cũ
+        if (elementOldTo && elementOldTo.pre_other_id) {
+            const itemIndex = elementOldTo.pre_other_id?.findIndex((id) => id === element.id);
+            if (itemIndex !== -1) {
+                elementOldTo.pre_other_id?.splice(itemIndex, 1);
+            }
+        }
+        element.attributeSvgD = undefined;
+        element.position_end = undefined;
+        // update line mới
+        const elementNewTo = flatElements?.find((item) => item.id === targetId);
+        if (elementNewTo) {
+            if (!elementNewTo.pre_other_id) {
+                elementNewTo.pre_other_id = [];
+            }
+            elementNewTo.pre_other_id.push(element.id ?? '');
+        }
+        element.next_other_id = [];
+        element.next_other_id.push(targetId);
+    }
+    editDirectionWithBranch(flatElements, branch, targetId, element) {
+        const idOldNextTo = branch.next_other_id?.[0];
+        const elementOldTo = flatElements?.find((item) => item.id === idOldNextTo);
+        // xóa line cũ
+        if (elementOldTo && elementOldTo.pre_other_id) {
+            const itemIndex = elementOldTo.pre_other_id?.findIndex((id) => id === element.id);
+            if (itemIndex !== -1) {
+                elementOldTo.pre_other_id?.splice(itemIndex, 1);
+            }
+        }
+        // update line mới
+        const elementNewTo = flatElements?.find((item) => item.id === targetId);
+        if (elementNewTo) {
+            if (!elementNewTo.pre_other_id) {
+                elementNewTo.pre_other_id = [];
+            }
+            elementNewTo.pre_other_id.push(element.id ?? '');
+        }
+        branch.next_other_id = [];
+        branch.next_other_id.push(targetId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDiagramDrawDirectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDiagramDrawDirectionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiDiagramDrawDirectionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiDiagramDrawCanvasService, LibsUiDiagramDrawDirectionService, LibsUiDiagramDrawService, canvasConfigReadonly, storeDataDefault };
+//# sourceMappingURL=libs-ui-services-diagram-draw.mjs.map