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

package/README.md

@@ -0,0 +1,279 @@
+# @libs-ui/services-diagram-draw
+
+> **Version:** 0.2.356-3  
+> **Angular:** ^18.2.0
+
+Service quản lý toàn bộ vòng đời của diagram flow: tính toán tọa độ element, render component động vào canvas, vẽ SVG connector, và quản lý drop zone kéo-thả thông minh.
+
+---
+
+## Cài đặt
+
+```bash
+npm install @libs-ui/services-diagram-draw
+```
+
+---
+
+## Import
+
+```typescript
+import { LibsUiDiagramDrawService, canvasConfigReadonly, storeDataDefault } from '@libs-ui/services-diagram-draw';
+```
+
+---
+
+## Khởi tạo
+
+```typescript
+@Component({ ... })
+export class DiagramComponent implements AfterViewInit {
+  @ViewChild('svgContainer') svgContainer!: ElementRef<SVGElement>;
+  @ViewChild('nodesContainer') nodesContainer!: ElementRef<HTMLDivElement>;
+  @ViewChild('vcr', { read: ViewContainerRef }) vcr!: ViewContainerRef;
+
+  private readonly diagramService = inject(LibsUiDiagramDrawService);
+
+  ngAfterViewInit() {
+    // 1. Đăng ký config
+    this.diagramService.setConfig({
+      storeDataDefine: { ...storeDataDefault },
+      svgContainer: this.svgContainer,
+      nodesContainer: this.nodesContainer,
+      viewContainerRef: this.vcr,
+      nodeComponentType: MyNodeComponent,
+      nodeOtherConfigComponentType: MyWaitNodeComponent, // optional
+    });
+
+    // 2. Tính toán tọa độ
+    this.diagramService.configXYElements(this.elements);
+
+    // 3. Render nodes + SVG connector
+    this.diagramService.renderNodes(this.elements);
+  }
+}
+```
+
+---
+
+## API
+
+### Methods
+
+| Method                                                    | Parameters                             | Returns | Mô tả                                                                                               |
+| --------------------------------------------------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `set setConfig`                                           | `IConfig`                              | `void`  | Đăng ký config (ViewContainerRef, container refs, component types). Phải gọi trước mọi method khác. |
+| `set setConfigCanvas`                                     | `Partial<ICanvasConfig>`               | `void`  | Ghi đè các tham số canvas config (margin, kích thước, màu SVG, …).                                  |
+| `configXYElements(elements, updateSVG?, positionX?)`      | `IDiagramElement[], boolean?, number?` | `void`  | Tính toán tọa độ X/Y cho tất cả elements và cập nhật SVG path.                                      |
+| `renderNodes(elements)`                                   | `IDiagramElement[]`                    | `void`  | Clear nodes cũ, render component động, branch labels và arrow indicators.                           |
+| `clearNodes()`                                            | —                                      | `void`  | Destroy tất cả ComponentRef, xóa node-dynamic, branch-label, arrow-indicator khỏi DOM.              |
+| `renderDropZones(flatElements, onDrop, canDropFn, rules)` | Xem bên dưới                           | `void`  | Render drop zone "+" tại các vị trí cho phép kéo-thả.                                               |
+| `clearDropZones()`                                        | —                                      | `void`  | Xóa tất cả `.diagram-drop-zone` khỏi nodesContainer.                                                |
+
+#### `renderDropZones` — chi tiết
+
+```typescript
+renderDropZones(
+  flatElements: IDiagramElement[],
+  onDrop: (element: IDiagramElement, branch: IDiagramElementBranch | undefined, dragData: string) => void,
+  canDropFn: TDropZoneCanDropFn,   // true = ẨN drop zone, false = HIỂN THỊ
+  ruleConnectableElements: IRuleConnectable[]
+): void
+```
+
+### Exported Constants
+
+| Export                 | Type                               | Mô tả                                                                              |
+| ---------------------- | ---------------------------------- | ---------------------------------------------------------------------------------- |
+| `canvasConfigReadonly` | `Signal<ICanvasConfig>` (readonly) | Signal đọc config canvas global, dùng trong component mà không cần inject service. |
+| `storeDataDefault`     | `IDiagramStoreData`                | Giá trị mặc định cho `storeDataDefine`.                                            |
+
+---
+
+## Canvas Config (`ICanvasConfig`)
+
+Tuỳ chỉnh qua `setConfigCanvas`:
+
+| Property                                         | Default      | Mô tả                                                   |
+| ------------------------------------------------ | ------------ | ------------------------------------------------------- |
+| `ELEMENT_WIDTH_DEFAULT_BRANCH_WHEN_NOT_ELEMENT`  | `60`         | Chiều rộng branch rỗng                                  |
+| `ELEMENT_MARGIN_DEFAULT`                         | `60`         | Margin dọc giữa các element                             |
+| `ELEMENT_MARGIN_DEFAULT_BRANCH`                  | `16`         | Margin element trong branch                             |
+| `ELEMENT_MARGIN_BETWEEN_BRANCH_DEFAULT`          | `60`         | Margin ngang giữa các branch                            |
+| `DEFAULT_BRANCH_WHEN_NO_ELEMENT`                 | `100`        | Chiều cao branch khi rỗng                               |
+| `ELEMENT_HEIGHT_CURVE`                           | `10`         | Độ cong SVG connector                                   |
+| `ELEMENT_SVG_STROKE_COLOR`                       | `'9ca2ad'`   | Màu đường kẻ SVG (không có `#`)                         |
+| `ELEMENT_SVG_STROKE_WIDTH`                       | `'1'`        | Độ dày đường kẻ SVG                                     |
+| `ELEMENT_MARGIN_DEFAULT_BRANCH_TO_ELEMENT_FIRST` | `78`         | Khoảng cách từ parent đến element đầu tiên trong branch |
+| `DISTANCE_TO_WAIT`                               | `30`         | Khoảng cách element chính → nodeOtherConfig             |
+| `WAIT_TO_ELEMENT`                                | `50`         | Khoảng cách nodeOtherConfig → element kế tiếp           |
+| `ELEMENT_WAIT_DEFAULT`                           | `28`         | Chiều cao mặc định nodeOtherConfig                      |
+| `DISTANCE_WAIT_TO_NEXT_LINE`                     | `4`          | Khoảng cách nodeOtherConfig → đường nối kế tiếp         |
+| `TYPE_ELEMENT_EXIT`                              | `'EXIT'`     | Loại element kết thúc (không có drop zone bên dưới)     |
+| `TYPE_ELEMENT_WORKFLOW`                          | `'WORKFLOW'` | Loại element có branches                                |
+| `WIDTH_ELEMENT_DEFAULT`                          | `165`        | Chiều rộng mặc định node                                |
+| `HEIGHT_ELEMENT_DEFAULT`                         | `48`         | Chiều cao mặc định node                                 |
+| `ADD_ICON_DIAMETER`                              | `24`         | Đường kính icon "+" drop zone                           |
+
+---
+
+## Interfaces
+
+```typescript
+interface IDiagramElement {
+  code?: string; // Loại element (EXIT, WORKFLOW, …)
+  name?: string; // Tên hiển thị
+  id?: string; // Unique identifier
+  element_type?: string; // Type phân loại
+  branches?: IDiagramElementBranch[];
+  translateX?: number; // Tọa độ X (computed)
+  translateY?: number; // Tọa độ Y (computed)
+  specific_x?: number;
+  specific_y?: number;
+  specific_width?: number;
+  specific_height?: number;
+  attributeSvgD?: string; // SVG path string connector
+  nodeOtherConfig?: IDiagramElement; // Node phụ (wait/delay)
+  pre_id?: string;
+  next_id?: string;
+  disable?: boolean;
+}
+
+interface IDiagramElementBranch {
+  code?: string;
+  label?: string; // Label hiển thị trên nhánh
+  labelBgColor?: string; // Màu nền label
+  elements: IDiagramElement[];
+  onTheSide?: 'above' | 'under' | 'center';
+  specific_start_branch_x?: number;
+  specific_start_branch_y?: number;
+  nodeOtherConfig?: IDiagramElement;
+  isDirection?: boolean;
+}
+
+interface IConfig {
+  storeDataDefine: IDiagramStoreData;
+  svgContainer?: ElementRef<HTMLDivElement>;
+  nodesContainer?: ElementRef<HTMLDivElement>;
+  viewContainerRef?: ViewContainerRef;
+  nodeComponentType?: Type<any>;
+  nodeOtherConfigComponentType?: Type<any>;
+  dropZoneStyle?: IDropZoneIndicatorStyle; // Tuỳ chỉnh indicator "+"
+}
+
+interface IRuleConnectable {
+  elementCode: string;
+  elementCodeConnectableBefore: string[];
+}
+
+type TDropZoneCanDropFn = (before: IDiagramElement | undefined, current: IDiagramElement | undefined, after: IDiagramElement | undefined, rules: IRuleConnectable[]) => boolean;
+```
+
+---
+
+## Tuỳ chỉnh indicator "+" (`IDropZoneIndicatorStyle`)
+
+Truyền vào `dropZoneStyle` của `IConfig` để kiểm soát giao diện nút `"+"` trong drop zone.
+Tất cả các field đều optional — giá trị nào không truyền sẽ dùng mặc định nội bộ của service.
+
+### Thứ tự ưu tiên render
+
+| Ưu tiên | Điều kiện                     | Kết quả                                                             |
+| ------- | ----------------------------- | ------------------------------------------------------------------- |
+| **1**   | `renderIndicator` được truyền | Toàn bộ HTML indicator do hàm này sinh ra                           |
+| **2**   | Không có `renderIndicator`    | SVG `"+"` tự sinh từ `backgroundColor`, `iconColor`, `borderRadius` |
+
+| Ưu tiên | Điều kiện                          | Kết quả hover                                   |
+| ------- | ---------------------------------- | ----------------------------------------------- |
+| **1**   | `renderHoverIndicator` được truyền | Nội dung bên trong rectangle do hàm này sinh ra |
+| **2**   | Không có `renderHoverIndicator`    | Rectangle mở rộng trống (chỉ có nền + viền)     |
+
+### Bảng thuộc tính
+
+#### Indicator (trạng thái bình thường)
+
+| Thuộc tính        | Kiểu                       | Mặc định    | Mô tả                                                                                        |
+| ----------------- | -------------------------- | ----------- | -------------------------------------------------------------------------------------------- |
+| `backgroundColor` | `string`                   | `'#3b82f6'` | Màu nền của indicator                                                                        |
+| `iconColor`       | `string`                   | `'#ffffff'` | Màu dấu `"+"` bên trong indicator                                                            |
+| `borderRadius`    | `string`                   | `'50%'`     | Bo góc indicator — `'50%'` cho tròn, `'6px'` cho vuông bo góc                                |
+| `opacity`         | `number`                   | `0.95`      | Độ mờ của indicator ở trạng thái bình thường                                                 |
+| `renderIndicator` | `(size: number) => string` | —           | **[Động]** Hàm trả về HTML tùy ý thay thế toàn bộ indicator. Ghi đè mọi field tĩnh bên trên. |
+
+#### Hover / drag-enter (rectangle mở rộng)
+
+| Thuộc tính             | Kiểu           | Mặc định                    | Mô tả                                                                                                          |
+| ---------------------- | -------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `hoverBackgroundColor` | `string`       | `'#eef4ff'`                 | Màu nền rectangle khi kéo vào vùng drop                                                                        |
+| `hoverBorderColor`     | `string`       | `'rgba(59, 130, 246, 0.7)'` | Màu đường viền rectangle                                                                                       |
+| `hoverBorderStyle`     | `string`       | `'dashed'`                  | Kiểu viền — `'dashed'` \| `'solid'` \| `'dotted'`                                                              |
+| `hoverBorderRadius`    | `number`       | `10`                        | Border-radius (px) của rectangle                                                                               |
+| `renderHoverIndicator` | `() => string` | —                           | **[Động]** Hàm trả về HTML inject vào bên trong rectangle. Nếu không truyền, rectangle chỉ hiển thị nền trống. |
+
+### Ví dụ
+
+**Chỉ đổi màu và bo góc:**
+
+```typescript
+this.diagramService.setConfig = {
+  // ... các config khác
+  dropZoneStyle: {
+    backgroundColor: '#10b981',
+    iconColor: '#ffffff',
+    borderRadius: '4px', // hình vuông bo góc thay vì tròn
+    opacity: 1,
+    hoverBackgroundColor: '#f0fdf4',
+    hoverBorderColor: 'rgba(16, 185, 129, 0.8)',
+    hoverBorderStyle: 'dashed',
+    hoverBorderRadius: 8,
+  },
+};
+```
+
+**Render indicator hoàn toàn tùy chỉnh:**
+
+```typescript
+this.diagramService.setConfig = {
+  // ... các config khác
+  dropZoneStyle: {
+    renderIndicator: (size: number) => `
+      <div style="
+        width: ${size}px; height: ${size}px;
+        background: #f59e0b; border-radius: 6px;
+        display: flex; align-items: center; justify-content: center;
+      ">
+        <svg viewBox="0 0 24 24" fill="white" width="14" height="14">
+          <path d="M12 5v14M5 12h14" stroke="white" stroke-width="2"/>
+        </svg>
+      </div>
+    `,
+    renderHoverIndicator: () => `
+      <span style="color: #f59e0b; font-size: 11px; font-weight: 600;">
+        + Thêm vào đây
+      </span>
+    `,
+    hoverBackgroundColor: '#fafafa',
+    hoverBorderColor: 'rgba(139, 92, 246, 0.5)',
+    hoverBorderStyle: 'solid',
+    hoverBorderRadius: 12,
+  },
+};
+```
+
+---
+
+## Lưu ý quan trọng
+
+> ⚠️ Phải gọi `setConfig` trước khi dùng bất kỳ method nào khác.
+
+> ⚠️ `canvasConfig` là signal **global** — thay đổi sẽ ảnh hưởng đến mọi instance trong cùng app.
+
+> ⚠️ `renderNodes()` sẽ tự gọi `clearNodes()` trước khi render lại — không cần gọi thủ công trước.
+
+> ⚠️ `canDropFn` trả về `true` → **ẨN** drop zone; `false` → **HIỂN THỊ** drop zone.
+
+---
+
+## Demo
+
+Xem demo tại: `services/diagram-draw` trong core-ui app.

package/canvas.service.d.ts

@@ -0,0 +1,42 @@
+import { IHandlerFunction, IRuleConnectable } from './interfaces/canvas.interface';
+import { IDiagramElement, IDiagramElementBranch } from './interfaces/diagram.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiDiagramDrawCanvasService {
+    private elements;
+    private flatElements;
+    private handlerFunction;
+    private elementRuleConnectable;
+    private translateService;
+    set HandlerFunction(handlerFunction: IHandlerFunction);
+    get HandlerFunction(): IHandlerFunction;
+    loadElements(elements: Array<IDiagramElement>, positionFirstNode: {
+        x: number;
+        y: number;
+    }, ruleConnectableElements: Array<IRuleConnectable>): void;
+    set Elements(elements: IDiagramElement[]);
+    get Elements(): IDiagramElement[];
+    set RuleConnectableElements(elements: Array<IRuleConnectable>);
+    get RuleConnectableElements(): Array<IRuleConnectable>;
+    checkRuleDragDrop(beforeElementDrag: IDiagramElement | undefined, currentElementDrag: IDiagramElement | undefined, afterElementDrag: IDiagramElement | undefined, ruleConnectableElements: Array<IRuleConnectable>): boolean;
+    get FlatElements(): IDiagramElement[];
+    checkExistNameElement(name: string, flatElements: Array<IDiagramElement>): boolean;
+    addElement(itemDrop: IDiagramElement, branchDrop: IDiagramElementBranch | undefined, dataDrop: IDiagramElement, branchChoice?: number): void;
+    private addElementToBranch;
+    private updateNextIdOfChildElementInElementWorkflow;
+    private checkEndMoveElementWhenDropElementCodeExit;
+    private moveElementsToBranch;
+    private findContainerHasElementStart;
+    private deleteElement;
+    private cloneElementAndAddElementEXitToBranch;
+    private addElementExitWorkFlow;
+    addElementExitWhenDeleteDirectionLine(element: IDiagramElement, branch: IDiagramElementBranch | undefined): void;
+    /**
+     * 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: IDiagramElement[]): void;
+    removeOrChangeElement(elementRemove: IDiagramElement, elementChange: IDiagramElement | undefined, branchChoose?: number): Promise<void>;
+    deleteChangeElementAndInsertBranchKeep(elementRemove: IDiagramElement, elementChange: IDiagramElement | undefined, branchKeepElement: IDiagramElementBranch | undefined, branchChoice?: number | undefined): Promise<void>;
+    private addBranchKeepToFlow;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiDiagramDrawCanvasService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LibsUiDiagramDrawCanvasService>;
+}

package/diagram-draw.service.d.ts

@@ -0,0 +1,91 @@
+import { IRuleConnectable, TDropZoneCanDropFn } from './interfaces/canvas.interface';
+import { ICanvasConfig, IConfig, IDiagramElement, IDiagramElementBranch } from './interfaces/diagram.interface';
+import * as i0 from "@angular/core";
+export declare const canvasConfigReadonly: import("@angular/core").Signal<ICanvasConfig>;
+export declare const storeDataDefault: {
+    positionMaxLeft: number;
+    positionMaxTop: number;
+    widthHeightSvgCanvas: {
+        heightSvg: number;
+        widthSvg: number;
+    };
+};
+export declare class LibsUiDiagramDrawService {
+    private configCanvas;
+    readonly orientation: import("@angular/core").WritableSignal<"vertical" | "horizontal">;
+    private elementSvg;
+    private attributeSvgD;
+    private componentRefs;
+    private virtualViewport?;
+    private virtualFlatElements;
+    private virtualFlatBranches;
+    private virtualNodesMap;
+    updateViewport(vp: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): void;
+    set setConfig(config: IConfig);
+    set setConfigCanvas(config: Partial<ICanvasConfig>);
+    configXYElements(elements: Array<IDiagramElement>, updateSVG?: boolean, positionX?: number): void;
+    private updatePositionElements;
+    private buildSvgElement;
+    /**
+     * Render tất cả nodes từ elements array
+     */
+    renderNodes(elements: Array<IDiagramElement>): void;
+    private extractVirtualElements;
+    private applyVirtualizationDiff;
+    /**
+     * Render elements và branches một cách đệ quy
+     */
+    private renderElementsRecursively;
+    /**
+     * Tạo một node component động
+     */
+    private createNode;
+    /**
+     * Clear tất cả nodes đã tạo
+     */
+    clearNodes(): void;
+    /**
+     * 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)
+     */
+    private createArrowIndicator;
+    /**
+     * Render branch labels (text annotations on branches)
+     */
+    private renderBranchLabels;
+    private createBranchLabel;
+    /**
+     * 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: IDiagramElement[], onDrop: (element: IDiagramElement, branch: IDiagramElementBranch | undefined, dragData: string) => void, canDropFn: TDropZoneCanDropFn, ruleConnectableElements: Array<IRuleConnectable>): void;
+    /** Xóa tất cả drop zone "+" khỏi DOM */
+    clearDropZones(): void;
+    private createDropZoneEl;
+    private calcDropZoneTopBranch;
+    private calcDropZoneLeftBranch;
+    private calcDropZoneTopNode;
+    private calcDropZoneLeftNode;
+    /**
+     * Horizontal node: "+" nằm giữa đường line nối 2 node — căn giữa Y của element.
+     */
+    private calcDropZoneTopNodeH;
+    private calcDropZoneLeftNodeH;
+    /**
+     * Horizontal branch: "+" nằm căn giữa Y của branch line, sau phần tử cuối trong nhánh.
+     */
+    private calcDropZoneTopBranchH;
+    private calcDropZoneLeftBranchH;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiDiagramDrawService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LibsUiDiagramDrawService>;
+}

package/direction.service.d.ts

@@ -0,0 +1,43 @@
+import { Subject } from 'rxjs';
+import { IDiagramElement, IDiagramElementBranch } from './interfaces/diagram.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiDiagramDrawDirectionService {
+    private elementDirection;
+    private branchDirection;
+    private elementViewDirectionId;
+    private onViewDirection;
+    private canvasService;
+    set ElementDirection(element: IDiagramElement | undefined);
+    get ElementDirection(): IDiagramElement | undefined;
+    set BranchDirection(branch: {
+        branch: IDiagramElementBranch;
+        index: number;
+    } | undefined);
+    get BranchDirection(): {
+        branch: IDiagramElementBranch;
+        index: number;
+    } | undefined;
+    set ElementViewDirectionId(id: string | undefined);
+    get ElementViewDirectionId(): string | undefined;
+    get OnViewDirection(): Subject<{
+        id: string;
+    }>;
+    private checkRuleDirectionToElement;
+    buildElementConnectTo(element: IDiagramElement, flatElements: IDiagramElement[], branch?: IDiagramElementBranch, checkRule?: (element: IDiagramElement | undefined, elementConnectTo: IDiagramElement | undefined) => boolean): IDiagramElement[] | undefined;
+    /**Xóa các element nằm phía sau khi nhánh được điều hướng */
+    deleteElementsBehindBranchConnectTo(branch: IDiagramElementBranch): void;
+    /**xóa line đến và xóa line đi ở toàn bộ các khối và nhánh bị xóa */
+    private deleteLineConnectFromElement;
+    /** Xóa pre_other_id từ khác khối mà khối bị xóa nối đến BlockDelete => Other*/
+    private deletePreOtherId;
+    /** 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*/
+    private deleteNextOtherId;
+    addBranchDirection(targetId: string, element: IDiagramElement, branch: IDiagramElementBranch, flatElements: IDiagramElement[]): void;
+    addElementDirection(targetId: string, element: IDiagramElement, flatElements: IDiagramElement[]): void;
+    deleteElementsBehindElementConnectTo(element: IDiagramElement, flatElements: IDiagramElement[]): void;
+    private findAndDeleteElementFromContainer;
+    editDirection(flatElements: IDiagramElement[], targetId: string, element: IDiagramElement, branch?: IDiagramElementBranch): void;
+    private editDirectionWithBranch;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiDiagramDrawDirectionService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LibsUiDiagramDrawDirectionService>;
+}