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

package/index.d.ts

@@ -0,0 +1,5 @@
+export * from './canvas.service';
+export * from './diagram-draw.service';
+export * from './direction.service';
+export * from './interfaces/canvas.interface';
+export * from './interfaces/diagram.interface';

package/interfaces/canvas.interface.d.ts

@@ -0,0 +1,21 @@
+import { IDiagramElement, IDiagramElementBranch } from './diagram.interface';
+export interface IBranchEndCount {
+    branchContainer?: IDiagramElementBranch;
+    count: number;
+    branchEmpty: number;
+}
+export interface IHandlerFunction {
+    getConfigDefaultBranches(code: string, dataDefault: IDiagramElement): IDiagramElement;
+}
+export interface IRuleConnectable {
+    elementCode: string;
+    elementCodeConnectableBefore: Array<string>;
+}
+/**
+ * Function kiểm tra điều kiện để hiển thị drop zone tại một element/branch.
+ * Trả về true → hiển thị "+", false → ẩn.
+ * - beforeElementDrag: element trước element đang xét để hiển thị drop zone
+ * - currentElementDrag: element đang xét để hiển thị drop zone
+ * - afterElementDrag: element sau element đang xét để hiển thị drop zone
+ */
+export type TDropZoneCanDropFn = (beforeElementDrag: IDiagramElement | undefined, currentElementDrag: IDiagramElement | undefined, afterElementDrag: IDiagramElement | undefined, ruleConnectableElements: Array<IRuleConnectable>) => boolean;

package/interfaces/coordinates.interface.d.ts

@@ -0,0 +1,40 @@
+export interface IConfigCoordinatesParam {
+    ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT?: number;
+    ELEMENT_MARGIN_DEFAULT?: number;
+    ELEMENT_MARGIN_DEFAULT_BRANCH?: number;
+    ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT?: number;
+    DEFAULT_BRANCH_WHEN_NO_ELEMENT?: number;
+    ELEMENT_HEIGHT_CURVE?: number;
+    ELEMENT_MARGIN_DEFAULT_BRANCH_TO_ELEMENT_FIRST?: number;
+    ELEMENT_SVG_STROKE_COLOR?: string;
+    ELEMENT_SVG_STROKE_WIDTH?: string;
+    DISTANCE_TO_WAIT?: number;
+    WAIT_TO_ELEMENT?: number;
+    ELEMENT_WAIT_DEFAULT?: number;
+    DISTANCE_WAIT_TO_NEXT_LINE?: number;
+    TYPE_CONSTITUENT_OTHER_EXIT?: string;
+}
+export interface IDataDiagramConfigSvg {
+    updateSVG?: boolean;
+    mode?: 'preview' | 'config';
+    positionMaxLeft: number;
+    positionMaxTop: number;
+    widthHeightSvgCanvas: {
+        heightSvg: number;
+        widthSvg: number;
+    };
+}
+export interface IDataDiagramSvg {
+    elementSvg?: SVGPathElement;
+    attributeSvgD?: string;
+}
+export interface ICoordinatesDiagramSvg {
+    mx?: number;
+    my?: number;
+    x1?: number;
+    y1?: number;
+    x?: number;
+    y?: number;
+    lx?: number;
+    ly?: number;
+}

package/interfaces/diagram.interface.d.ts

@@ -0,0 +1,109 @@
+import { ElementRef, Type, ViewContainerRef } from '@angular/core';
+export interface IDiagramElement {
+    code?: string;
+    name?: string;
+    branches?: Array<IDiagramElementBranch>;
+    specific_x?: number;
+    specific_y?: number;
+    specific_width?: number;
+    specific_height?: number;
+    elementSvg?: SVGPathElement;
+    attributeSvgD?: string;
+    maxHeightBranch?: number;
+    position_end_branch?: number;
+    position_end?: number;
+    translateX?: number;
+    translateY?: number;
+    attributeSvgDConnectToOtherElement?: Array<{
+        elementSvg?: SVGPathElement;
+        path: string;
+    }>;
+    pre_other_id?: Array<string>;
+    next_other_id?: Array<string>;
+    subCodeOfElement?: string;
+    next_id?: string;
+    nodeOtherConfig?: IDiagramElement;
+    disable?: boolean;
+    id?: string;
+    element_type?: string;
+    specific_counter_current_code?: number;
+    pre_id?: string;
+}
+export interface IDiagramElementBranch {
+    code?: string;
+    label?: string;
+    labelBgColor?: string;
+    elements: Array<IDiagramElement>;
+    elementSvg?: SVGPathElement;
+    attributeSvgD?: string;
+    onTheSide?: 'above' | 'under' | 'center';
+    positionMaxLeft?: number;
+    positionMaxTop?: number;
+    specific_start_branch_x?: number;
+    specific_start_branch_y?: number;
+    widthBranch?: {
+        width?: number;
+        above?: number;
+        under?: number;
+    };
+    next_other_id?: Array<string>;
+    isDirection?: boolean;
+    nodeOtherConfig?: IDiagramElement;
+}
+export interface ICanvasConfig {
+    ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT: number;
+    ELEMENT_MARGIN_DEFAULT: number;
+    ELEMENT_MARGIN_DEFAULT_BRANCH: number;
+    ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT: number;
+    DEFAULT_BRANCH_WHEN_NO_ELEMENT: number;
+    ELEMENT_HEIGHT_CURVE: number;
+    ELEMENT_SVG_STROKE_COLOR: string;
+    ELEMENT_SVG_STROKE_WIDTH: string;
+    ELEMENT_MARGIN_DEFAULT_BRANCH_TO_ELEMENT_FIRST: number;
+    DISTANCE_TO_WAIT: number;
+    WAIT_TO_ELEMENT: number;
+    ELEMENT_WAIT_DEFAULT: number;
+    DISTANCE_WAIT_TO_NEXT_LINE: number;
+    TYPE_ELEMENT_EXIT: string;
+    TYPE_ELEMENT_WORKFLOW: string;
+    WIDTH_ELEMENT_DEFAULT: number;
+    HEIGHT_ELEMENT_DEFAULT: number;
+    ADD_ICON_DIAMETER: number;
+}
+/**
+ * Style config cho indicator (nút "+") của drop zone.
+ * Tất cả các field đều optional – giá trị nào không truyền sẽ dùng mặc định.
+ */
+export interface IDropZoneIndicatorStyle {
+    borderRadius?: string;
+    backgroundColor?: string;
+    iconColor?: string;
+    opacity?: number;
+    hoverBackgroundColor?: string;
+    hoverBorderColor?: string;
+    hoverBorderStyle?: string;
+    hoverBorderRadius?: number;
+    /** Hàm render **động** nội dung indicator ở trạng thái bình thường. */
+    renderIndicator?: (size: number) => string;
+    /** Hàm render **động** nội dung indicator ở trạng thái hover/drag-enter.*/
+    renderHoverIndicator?: () => string;
+}
+export interface IConfig {
+    storeDataDefine: IDiagramStoreData;
+    svgContainer?: ElementRef<HTMLDivElement>;
+    nodesContainer?: ElementRef<HTMLDivElement>;
+    viewContainerRef?: ViewContainerRef;
+    nodeComponentType?: Type<any>;
+    nodeOtherConfigComponentType?: Type<any>;
+    useVirtualizationTemplate?: boolean;
+    /** Tuỳ chỉnh style cho indicator (nút "+") của drop zone */
+    dropZoneStyle?: IDropZoneIndicatorStyle;
+}
+export interface IDiagramStoreData {
+    positionMaxLeft: number;
+    positionMaxTop: number;
+    widthHeightSvgCanvas: {
+        heightSvg: number;
+        widthSvg: number;
+    };
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@libs-ui/services-diagram-draw",
+  "version": "0.2.356-37",
+  "peerDependencies": {
+    "@angular/core": "^18.2.0",
+    "@libs-ui/utils": "0.2.356-37",
+    "@ngx-translate/core": "^15.0.0",
+    "rxjs": "~7.8.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/libs-ui-services-diagram-draw.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/libs-ui-services-diagram-draw.mjs",
+      "esm": "./esm2022/libs-ui-services-diagram-draw.mjs",
+      "default": "./fesm2022/libs-ui-services-diagram-draw.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/utils/calculator-branch.util.d.ts

@@ -0,0 +1,16 @@
+import { ICoordinatesDiagramSvg, IDataDiagramConfigSvg } from '../interfaces/coordinates.interface';
+import { IDiagramElement, IDiagramElementBranch } from '../interfaces/diagram.interface';
+export declare class MoLibDiagramCalculatorBranchUtil {
+    static drawStraightLine(left: number, lineFormElementToBranching: number, top: number, branch: IDiagramElementBranch, maxHeightBranch: number, config: IDataDiagramConfigSvg): void;
+    static leftLine(left: number, lineFormElementToBranching: number, top: number, lineBetweenBranch: number, branch: IDiagramElementBranch, maxHeightBranch: number, element: IDiagramElement, config: IDataDiagramConfigSvg): void;
+    static rightLine(left: number, lineFormElementToBranching: number, top: number, lineBetweenBranch: number, branch: IDiagramElementBranch, maxHeightBranch: number, element: IDiagramElement, config: IDataDiagramConfigSvg): void;
+    static drawElementInBranchLine(branch: IDiagramElementBranch, coordQL2: ICoordinatesDiagramSvg, config: IDataDiagramConfigSvg): void;
+    static drawMissingLineFromLastElement(branch: IDiagramElementBranch, coordQ3: ICoordinatesDiagramSvg): void;
+    static drawAboveUnderLine(left: number, lineFormElementToBranching: number, top: number, lineBetweenBranch: number, branch: IDiagramElementBranch, maxHeightBranch: number, direction: 'left' | 'right', config: IDataDiagramConfigSvg): {
+        coordQL1: ICoordinatesDiagramSvg;
+        coordQL2: ICoordinatesDiagramSvg;
+        isCheckAllElementConnectToExit: boolean;
+    };
+    static checkChildrenConnectToExit(elements: IDiagramElement[]): boolean;
+    static mathOperatorsCalculation(direction: 'left' | 'right' | 'above' | 'under' | string, a: number | undefined, b: number | undefined, opposite?: boolean): number;
+}

package/utils/calculator-element.util.d.ts

@@ -0,0 +1,24 @@
+import { IDataDiagramConfigSvg } from '../interfaces/coordinates.interface';
+import { IDiagramElement } from '../interfaces/diagram.interface';
+export declare class MoLibDiagramCalculatorCoordinatesUtil {
+    static setXYElements(elements: Array<IDiagramElement>, config: IDataDiagramConfigSvg, positionX?: number): void;
+    /**
+     * Set translateX và translateY từ specific_x và specific_y cho tất cả elements (bao gồm branches)
+     */
+    private static setTranslatePositions;
+    static calculatorMaxBranchHeight(element: IDiagramElement, maxHeightBranch: {
+        height: number;
+    }): void;
+    static plusHeightElementInBranch(elements: IDiagramElement[], total: {
+        height: number;
+    }): void;
+    static calculatorWidthBranch(elements: IDiagramElement[] | undefined, maxWidth: {
+        width: number;
+        aboveWidth: number;
+        underWidth: number;
+    }, log?: boolean): void;
+}
+export declare const getDistanceFromBranchToFirstBlock: (hasWaitConfig?: IDiagramElement) => number;
+export declare const getHeightWaitConfig: (hasWaitConfig?: IDiagramElement) => number;
+export declare const checkMaxLeft: (config: IDataDiagramConfigSvg, specific_x: number | undefined, positionMaxLeft: number | undefined) => void;
+export declare const checkMaxTop: (config: IDataDiagramConfigSvg, specific_y: number | undefined, positionMaxTop: number | undefined) => void;

package/utils/canvas.util.d.ts

@@ -0,0 +1,21 @@
+import { IBranchEndCount } from '../interfaces/canvas.interface';
+import { IDiagramElement, IDiagramElementBranch } from '../interfaces/diagram.interface';
+export declare class LibsUiDiagramDrawCanvasUtil {
+    static buildFlatElement(elements: Array<IDiagramElement>, flatElementsContainer: Array<IDiagramElement>): void;
+    static flatElementHasBranch(element: IDiagramElement, flatElementsContainer: Array<IDiagramElement>): void;
+    static getDefaultStorageBranchEndCount(): IBranchEndCount;
+    /**
+     * 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: IDiagramElement, idElement: string | undefined, data: IBranchEndCount, flowFlatElements: Array<IDiagramElement>): void;
+    static getElementHasCurrentBranchOrCurrentElement(currentBranch?: IDiagramElementBranch, currentElement?: IDiagramElement, flatElements?: Array<IDiagramElement>): {
+        currentBranch?: IDiagramElementBranch;
+        element?: IDiagramElement;
+    };
+    static findAndDeleteElementFromContainer(containerElement: Array<IDiagramElement>, elementDelete: IDiagramElement): boolean;
+    static getBranchOfElement(elementId: string, flatElements: Array<IDiagramElement>, elementTypeWorkflow: string): IDiagramElementBranch | undefined;
+}
+export declare const getDefaultConfigConstituentBranches: (code: string, dataDefault: IDiagramElement) => IDiagramElement;
+export declare const findAndDeleteElementFromContainer: (containerElement: Array<IDiagramElement>, elementDelete: IDiagramElement) => boolean;

package/utils/diagram.util.d.ts

@@ -0,0 +1,6 @@
+import { ElementRef } from '@angular/core';
+import { IDiagramElement } from '../interfaces/diagram.interface';
+export declare const buildFlatElement: (elements: Array<IDiagramElement>, flatElementsContainer: Array<IDiagramElement>) => void;
+export declare const setAttributeSvgAndAppend: (svgElement: ElementRef<any> | undefined, elementSvg: SVGPathElement | undefined, svgAttributePathD: string, color?: string) => void;
+export declare const canvasRemoveChildInSvg: (svgElement: ElementRef<any> | undefined) => void;
+export declare const applyElementStyle: (el: HTMLElement, element: IDiagramElement) => void;

package/utils/direction.util.d.ts

@@ -0,0 +1,6 @@
+import { IDiagramElement, IDiagramElementBranch } from '../interfaces/diagram.interface';
+export declare const buildElementDirectionTo: (element: IDiagramElement, flatElements: IDiagramElement[], checkRule: (element: IDiagramElement, item: IDiagramElement) => boolean, branch?: IDiagramElementBranch) => IDiagramElement[] | undefined;
+export declare const getAllItemPreOfElement: (element: IDiagramElement, flatElements: IDiagramElement[]) => void;
+export declare const getAllItemNextOfElement: (element: IDiagramElement, flatElements: IDiagramElement[]) => void;
+export declare const getAllItemNextOfBranch: (branch: IDiagramElementBranch, flatElements: IDiagramElement[]) => void;
+export declare const collectNextChainElements: (element: IDiagramElement, flatContainerElement: IDiagramElement[], listElementDelete: IDiagramElement[]) => void;

package/utils/horizontal/calculator-branch.util.d.ts

@@ -0,0 +1,67 @@
+import { ICoordinatesDiagramSvg, IDataDiagramConfigSvg } from '../../interfaces/coordinates.interface';
+import { IDiagramElement, IDiagramElementBranch } from '../../interfaces/diagram.interface';
+/**
+ * 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
+ */
+export declare class MoLibDiagramHorizontalCalculatorBranchUtil {
+    private static getHorizontalDistanceToFirstBlock;
+    /** Nhánh giữa (center): kéo thẳng sang phải */
+    static drawStraightLine(top: number, // Y tâm của element cha
+    lineFormElementToBranching: number, // width element + margin đến điểm rẽ
+    left: number, // X trái của element cha
+    branch: IDiagramElementBranch, maxWidthBranch: number, config: IDataDiagramConfigSvg): void;
+    /** Nhánh phía trên (above): rẽ lên, rồi bẻ phải đến element */
+    static aboveLine(top: number, lineFormElementToBranching: number, left: number, lineBetweenBranch: number, branch: IDiagramElementBranch, maxWidthBranch: number, element: IDiagramElement, config: IDataDiagramConfigSvg): void;
+    /** Nhánh phía dưới (under): rẽ xuống, rồi bẻ phải đến element */
+    static underLine(top: number, lineFormElementToBranching: number, left: number, lineBetweenBranch: number, branch: IDiagramElementBranch, maxWidthBranch: number, element: IDiagramElement, config: IDataDiagramConfigSvg): void;
+    /** Đặt element đầu tiên trong nhánh dựa theo tọa độ cuối của QL2 */
+    static drawElementInBranchLine(branch: IDiagramElementBranch, coordQL2: ICoordinatesDiagramSvg, config: IDataDiagramConfigSvg): void;
+    /**
+     * 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: number, lineFormElementToBranching: number, left: number, lineBetweenBranch: number, branch: IDiagramElementBranch, maxWidthBranch: number, direction: 'above' | 'under', config: IDataDiagramConfigSvg): {
+        coordQL1: ICoordinatesDiagramSvg;
+        coordQL2: ICoordinatesDiagramSvg;
+        isCheckAllElementConnectToExit: boolean;
+    };
+    static checkChildrenConnectToExit(elements: IDiagramElement[]): boolean;
+    /**
+     * 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: 'above' | 'under' | string, a: number | undefined, b: number | undefined, opposite?: boolean): number;
+    /** Alias để tương thích với code cũ gọi mathOperatorsCalculation */
+    static mathOperatorsCalculation(direction: 'above' | 'under' | string, a: number | undefined, b: number | undefined, opposite?: boolean): number;
+}

package/utils/horizontal/calculator-coordinates.util.d.ts

@@ -0,0 +1,42 @@
+import { IDataDiagramConfigSvg } from '../../interfaces/coordinates.interface';
+import { IDiagramElement } from '../../interfaces/diagram.interface';
+/**
+ * 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
+ */
+export declare class MoLibDiagramHorizontalCalculatorCoordinatesUtil {
+    static setXYElements(elements: Array<IDiagramElement>, config: IDataDiagramConfigSvg, positionY?: number): void;
+    /**
+     * Set translateX/Y cho tất cả elements (bao gồm branches và nodeOtherConfig)
+     */
+    private static setTranslatePositions;
+    /** 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: IDiagramElement, maxWidthBranch: {
+        width: number;
+    }): void;
+    /** Tính tổng chiều rộng các elements trong nhánh (dọc theo trục X) */
+    static plusWidthElementInBranch(elements: IDiagramElement[], total: {
+        height: number;
+    }): void;
+    /**
+     * 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: IDiagramElement[] | undefined, maxWidth: {
+        width: number;
+        aboveWidth: number;
+        underWidth: number;
+    }): void;
+    /** Tính khoảng cách thêm vào sau element (bao gồm wait config nếu có) */
+    private static checkElementGetMargin;
+    /** Tính chiều rộng của wait config node */
+    private static getWidthWaitConfig;
+}