@brggroup/share-lib 0.0.36 → 0.0.38

package/fesm2022/brggroup-share-lib.mjs

@@ -42,6 +42,26 @@ import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
 import { trigger, transition, animate, style } from '@angular/animations';
 import * as i2$3 from 'ng-zorro-antd/spin';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
+import * as i3$1 from 'ng-zorro-antd/card';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import * as i4$1 from 'ng-zorro-antd/drawer';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import * as i5$2 from 'ng-zorro-antd/tag';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import * as i6$3 from 'ng-zorro-antd/radio';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import * as i8 from 'ng-zorro-antd/button';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import * as i11 from 'ng-zorro-antd/tooltip';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import * as i14 from 'ng-zorro-antd/flex';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+import * as i15 from 'ng-zorro-antd/table';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import * as i16 from 'ng-zorro-antd/divider';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import * as i9 from 'ng-zorro-antd/core/transition-patch';
+import * as i10 from 'ng-zorro-antd/core/wave';
 import * as XLSX from 'xlsx';
 
 var TranslateKey;
@@ -2325,7 +2345,10 @@ class ExtendSelectComponent {
             return item[this.displayField];
         }
         if (this.displayFields?.length) {
-            const display = this.displayFields.map((field) => item[field]).join(' - ');
+            const display = this.displayFields
+                .map((field) => item[field])
+                .filter((x) => x)
+                .join(' - ');
             return display;
         }
         return item;
@@ -2680,6 +2703,1604 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Input
             }] } });
 
+class WF_Template {
+    // #region properties
+    WF_Template_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    Code;
+    Name;
+    DocType;
+    Description;
+    TemplatePrint;
+    // #endregion properties
+    constructor(obj) {
+        obj = obj || {};
+        this.WF_Template_Id = obj.WF_Template_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || '';
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || '';
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || '';
+        this.IsActive = obj.IsActive || null;
+        this.Code = obj.Code || '';
+        this.Name = obj.Name || '';
+        this.DocType = obj.DocType || '';
+        this.Description = obj.Description || '';
+        this.TemplatePrint = obj.TemplatePrint || '';
+    }
+}
+class WF_TemplateStage {
+    // #region properties
+    WF_TemplateStage_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    WF_Template_Id;
+    Code;
+    Name;
+    StageType;
+    SeqValue;
+    LimitValue;
+    IsRequireUser;
+    // #endregion properties
+    constructor(obj) {
+        obj = obj || {};
+        this.WF_TemplateStage_Id = obj.WF_TemplateStage_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || '';
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || '';
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || '';
+        this.IsActive = obj.IsActive || null;
+        this.WF_Template_Id = obj.WF_Template_Id || null;
+        this.Code = obj.Code || '';
+        this.Name = obj.Name || '';
+        this.StageType = obj.StageType || '';
+        this.SeqValue = obj.SeqValue || null;
+        this.LimitValue = obj.LimitValue || null;
+        this.IsRequireUser = obj.IsRequireUser || null;
+    }
+}
+class WF_TemplateStageAction {
+    // #region properties
+    WF_TemplateStageAction_Id;
+    App_Org_Id;
+    CreatedDate;
+    CreatedUser;
+    UpdatedDate;
+    UpdatedUser;
+    IsActive;
+    WF_Template_Id;
+    WF_TemplateStage_Id;
+    ActionType;
+    ActionStatus;
+    ActionText;
+    StageStatus;
+    AllowNote;
+    AllowEmail;
+    WF_EmailTemplate;
+    To_WF_TemplateStage_Id;
+    To_StageStatus;
+    WF_TransitionsRule_Id;
+    // #endregion properties
+    constructor(obj) {
+        obj = obj || {};
+        this.WF_TemplateStageAction_Id = obj.WF_TemplateStageAction_Id || null;
+        this.App_Org_Id = obj.App_Org_Id || '';
+        this.CreatedDate = obj.CreatedDate || null;
+        this.CreatedUser = obj.CreatedUser || '';
+        this.UpdatedDate = obj.UpdatedDate || null;
+        this.UpdatedUser = obj.UpdatedUser || '';
+        this.IsActive = obj.IsActive || null;
+        this.WF_Template_Id = obj.WF_Template_Id || null;
+        this.WF_TemplateStage_Id = obj.WF_TemplateStage_Id || null;
+        this.ActionType = obj.ActionType || '';
+        this.ActionStatus = obj.ActionStatus || '';
+        this.ActionText = obj.ActionText || '';
+        this.StageStatus = obj.StageStatus || '';
+        this.AllowNote = obj.AllowNote || null;
+        this.AllowEmail = obj.AllowEmail || null;
+        this.WF_EmailTemplate = obj.WF_EmailTemplate || '';
+        this.To_WF_TemplateStage_Id = obj.To_WF_TemplateStage_Id || null;
+        this.To_StageStatus = obj.To_StageStatus || '';
+        this.WF_TransitionsRule_Id = obj.WF_TransitionsRule_Id || null;
+    }
+}
+class Workflow extends WF_Template {
+    lstStageStatus = [];
+    lstActionType = [];
+    lstActionStatus = [];
+}
+/**
+ * STAGE
+ */
+class WorkflowStage extends WF_TemplateStage {
+    x = 0;
+    y = 0;
+    isReverse;
+    isReverseLabel;
+    lstAction;
+    drawerPosition;
+    constructor(obj) {
+        obj = obj || {};
+        super(obj);
+        this.x = obj.x;
+        this.y = obj.y;
+        this.isReverse = obj.isReverse;
+        this.isReverseLabel = obj.isReverseLabel;
+        this.lstAction = obj.lstAction;
+        this.drawerPosition = obj.drawerPosition;
+    }
+}
+/**
+ * Action
+ */
+class WorkflowAction extends WF_TemplateStageAction {
+    NextStageStatus; // string
+    FromStage;
+    FromSide;
+    ToStage;
+    ToSide;
+    allowBack; // true = 2 đầu, false/undefined = 1 đầu
+    labelBack;
+    points;
+    isBackAction;
+}
+class WorkflowEditorComponent extends BaseComponent {
+    //#region NGHIỆP VỤ
+    lstOrg = [];
+    lstTemplateType = [];
+    lstTemplatePrint = [];
+    template = new Workflow();
+    lstStage = [
+        new WorkflowStage({ Code: 'start', Name: 'Start', x: -35, y: 120, StageType: 'START', SeqValue: 1 }),
+        new WorkflowStage({ Code: 'end', Name: 'End', x: 780, y: 120, StageType: 'END', SeqValue: 999 }),
+    ];
+    lstAction = [];
+    onSave = new EventEmitter();
+    //#endregion
+    Math = Math;
+    drawTemplateVisibel = false;
+    settingVisible = false;
+    wfcSetting = { ShowGrid: true };
+    selectedStage;
+    hoverStage;
+    selectedAction;
+    selectedBackAction;
+    hoverEdge;
+    // vẽ đường liên kết mới
+    connectingFrom;
+    connectingPoints = [];
+    previewX = 0;
+    previewY = 0;
+    /** điểm đang chọn để di chuyển */
+    draggingPoint;
+    /** đang kéo chọn nhiều node */
+    isSelecting = false;
+    /** điểm bắt đầu kéo */
+    selectStart;
+    /** điểm kết thúc kéo */
+    selectEnd;
+    draggingGroup = false;
+    dragStartMouse;
+    dragStartPositions = new Map();
+    dragStartEdgePoints = new Map();
+    /** list các điểm đang được chọn */
+    lstSelectedStageCode = new Set();
+    // SNAP point
+    gridSize = 20; // 10 / 20 / 25 tuỳ thích
+    snapToGrid = true;
+    // ===== drag node =====
+    draggingNode;
+    isDragging = false;
+    dragStartX = 0;
+    dragStartY = 0;
+    offsetX = 0;
+    offsetY = 0;
+    KEY_MOVE_STEP = 5; // px
+    KEY_MOVE_STEP_BIG = 20; // Shift + arrow
+    // pan: dịch chuyển cả canvas
+    isPanning = false;
+    panStart;
+    // panX = 0;
+    // panY = 0;
+    panX = -5000;
+    panY = -5000;
+    isMoveMode = true;
+    canvasRef;
+    svgRef;
+    get normalEdges() {
+        return this.lstAction.filter((e) => e !== this.hoverEdge && !e.isBackAction);
+    }
+    get hoverEdges() {
+        if (this.hoverEdge && !this.hoverEdge.isBackAction) {
+            return [this.hoverEdge];
+        }
+        if (this.selectedAction && !this.selectedAction.isBackAction) {
+            return [this.selectedAction];
+        }
+        return [];
+    }
+    axisLock = null;
+    onKeyDown(e) {
+        // bỏ qua nếu đang gõ input
+        const target = e.target;
+        if (['INPUT', 'TEXTAREA'].includes(target.tagName))
+            return;
+        if (e.key === 'Escape') {
+            this.cancelConnecting();
+        }
+        if (e.ctrlKey && e.key === 'z') {
+            console.log('ctrl z');
+            e.preventDefault();
+            this.undo();
+        }
+        if (e.ctrlKey && (e.key === 'y' || (e.shiftKey && e.key === 'Z'))) {
+            console.log('ctrl y');
+            e.preventDefault();
+            this.redo();
+        }
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].indexOf(e.key) >= 0) {
+            let dx = 0;
+            let dy = 0;
+            const step = e.shiftKey ? this.KEY_MOVE_STEP_BIG : this.KEY_MOVE_STEP;
+            switch (e.key) {
+                case 'ArrowLeft':
+                    dx = -step;
+                    break;
+                case 'ArrowRight':
+                    dx = step;
+                    break;
+                case 'ArrowUp':
+                    dy = -step;
+                    break;
+                case 'ArrowDown':
+                    dy = step;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            this.moveSelectedNodesBy(dx, dy);
+        }
+    }
+    ngOnInit() {
+        console.log('ngOnInit', this.template, this.lstStage, this.lstAction);
+        console.log('template', this.template);
+        console.log('lstStage', this.lstStage);
+        console.log('lstAction', this.lstAction);
+        this.lstStage.forEach((x) => {
+            x.lstAction = this.lstAction.filter((y) => y.FromStage == x.Code);
+        });
+    }
+    ngAfterViewInit() {
+        this.updateCanvasSize();
+    }
+    moveSelectedNodesBy(dx, dy) {
+        if (this.lstSelectedStageCode.size === 0)
+            return;
+        // ⭐ UNDO SNAPSHOT
+        this.pushUndo({
+            type: 'move-nodes',
+            before: this.cloneNodePositions(this.lstSelectedStageCode),
+        });
+        for (const n of this.lstStage) {
+            if (!this.lstSelectedStageCode.has(n.Code))
+                continue;
+            n.x = this.clamp(n.x + dx, 0, this.CANVAS_WIDTH - this.NODE_WIDTH);
+            n.y = this.clamp(n.y + dy, 0, this.CANVAS_HEIGHT - this.NODE_HEIGHT);
+        }
+    }
+    save() {
+        this.onSave.emit({ template: this.template, lstStage: this.lstStage, lstAction: this.lstAction });
+    }
+    addStage() {
+        console.log('addStage');
+        const code = 'New_Stage_' + Math.round(Math.random() * 1000);
+        // tìm vị trí trống (đơn giản & hiệu quả)
+        const baseX = 200;
+        const baseY = 120;
+        const GAP_X = 200;
+        const GAP_Y = 120;
+        let x = baseX;
+        let y = baseY;
+        while (this.isPositionOccupied(x, y)) {
+            y += GAP_Y;
+        }
+        const stage = new WorkflowStage();
+        stage.Code = code;
+        stage.Name = 'New Stage';
+        stage.x = x;
+        stage.y = y;
+        stage.StageType = 'NODE';
+        stage.SeqValue = 10;
+        this.lstStage.push(stage);
+        this.lstStage = this.lstStage.sort((a, b) => a.SeqValue - b.SeqValue);
+        // this.selectedStage = node;
+        this.hoverStage = stage;
+    }
+    isConnectingFrom(node) {
+        return this.connectingFrom?.node.Code === node.Code;
+    }
+    isDraggingFrom(node) {
+        return this.draggingNode?.Code === node.Code;
+    }
+    isSelectedNode(node) {
+        return this.selectedStage?.Code === node.Code;
+    }
+    cancelConnecting() {
+        if (this.connectingFrom) {
+            this.connectingFrom = undefined;
+            this.previewX = 0;
+            this.previewY = 0;
+            this.connectingPoints = [];
+        }
+    }
+    //#region NGHIỆP VỤ
+    addAction() {
+        if (!this.selectedStage)
+            return;
+        const action = new WorkflowAction();
+        action.FromStage = this.selectedStage.Code;
+        action.FromSide = 'right';
+        this.selectedStage.lstAction = this.selectedStage.lstAction ? [...this.selectedStage.lstAction, action] : [action];
+        this.lstAction = this.lstAction ? [...this.lstAction, action] : [action];
+    }
+    onchangeAllowBack(action) {
+        console.log('onchangeAllowBack', action);
+        const stage = this.lstStage.find((x) => x.Code == action.ToStage);
+        if (!stage) {
+            this.notiService.error('Stage not found');
+            return;
+        }
+        if (action.allowBack) {
+            const newAction = new WorkflowAction();
+            newAction.FromStage = action.ToStage;
+            newAction.FromSide = 'right';
+            newAction.ToStage = action.FromStage;
+            newAction.ToSide = 'left';
+            newAction.isBackAction = true;
+            console.log('newAction', newAction);
+            this.lstAction = [...this.lstAction, newAction];
+            stage.lstAction = [...stage.lstAction, newAction];
+            this.selectedBackAction = newAction;
+        }
+        else {
+            action.labelBack = '';
+            const backAction = this.lstAction.find((x) => x.FromStage == action.ToStage && x.ToStage == action.FromStage && x.isBackAction);
+            console.log('remove action', backAction);
+            if (!backAction) {
+                this.notiService.error('Action not found');
+            }
+            else {
+                this.lstAction = [...this.lstAction.filter((x) => x != backAction)];
+                stage.lstAction = [...stage.lstAction?.filter((x) => x != backAction)];
+                this.selectedBackAction = undefined;
+            }
+        }
+    }
+    onchangeLabelBack(action) {
+        const backAction = this.lstAction.find((x) => x.FromStage == action.ToStage && x.ToStage == action.FromStage && x.isBackAction);
+        if (!backAction) {
+            this.notiService.error('Action not found');
+        }
+        else {
+            backAction.ActionText = action.labelBack || '';
+        }
+    }
+    onchangeActionText(action) {
+        if (action.isBackAction) {
+            const goAction = this.lstAction.find((x) => x.FromStage == action.ToStage && x.ToStage == action.FromStage && !x.isBackAction);
+            if (!goAction) {
+                this.notiService.error('Action not found');
+            }
+            else {
+                goAction.labelBack = action.ActionText || '';
+            }
+        }
+    }
+    onchangeNextStage(action) {
+        console.log('onchangeNextStage', action);
+    }
+    async deleteNode() {
+        if (!this.selectedStage)
+            return;
+        if (!(await this.confirm(`Xoá node: ${this.selectedStage.Name}`)))
+            return;
+        const node = this.selectedStage;
+        // 🔹 snapshot edges liên quan
+        const relatedEdges = this.lstAction.filter((e) => e.FromStage === node.Code || e.ToStage === node.Code);
+        // 🔹 snapshot vị trí node trong mảng
+        const nodeIndex = this.lstStage.findIndex((n) => n.Code === node.Code);
+        // ⭐ PUSH UNDO
+        this.pushUndo({
+            type: 'delete-node',
+            node: { ...node }, // clone
+            nodeIndex,
+            edges: relatedEdges.map((e) => ({ ...e })),
+        });
+        // ❌ xoá edges
+        this.lstAction = this.lstAction.filter((e) => e.FromStage !== node.Code && e.ToStage !== node.Code);
+        // ❌ xoá node
+        this.lstStage.splice(nodeIndex, 1);
+        this.selectedStage = undefined;
+    }
+    async deleteAction(action) {
+        if (!(await this.confirm(`Delete action ???`)))
+            return;
+        const stage = this.lstStage.find((x) => x.Code == action.FromStage);
+        if (!stage)
+            return;
+        stage.lstAction = stage.lstAction?.filter((x) => x != action);
+        this.lstAction = this.lstAction.filter((x) => x != action);
+    }
+    //#endregion
+    //#region Action type
+    inputStageStatusVisible = false;
+    inputStageStatusCode = '';
+    inputStageStatusName = '';
+    inputStageStatusElement;
+    checkRemoveableStageStatus(tag) {
+        if (this.lstAction.find((x) => x.StageStatus === tag.Code) ||
+            this.lstAction.find((x) => x.NextStageStatus === tag.Code)) {
+            return false;
+        }
+        return true;
+    }
+    handleCloseStageStatus(removedTag) {
+        this.template.lstStageStatus = this.template.lstStageStatus.filter((tag) => tag !== removedTag);
+    }
+    showInputStageStatus() {
+        this.inputStageStatusVisible = true;
+        setTimeout(() => {
+            this.inputStageStatusElement?.nativeElement.focus();
+        }, 10);
+    }
+    handleInputStageStatusConfirm() {
+        if (this.inputStageStatusCode && !this.template.lstStageStatus.find((x) => x.Code === this.inputValue)) {
+            this.template.lstStageStatus = [
+                ...this.template.lstStageStatus,
+                { Code: this.inputStageStatusCode, Name: this.inputStageStatusName },
+            ];
+        }
+        this.inputStageStatusCode = '';
+        this.inputStageStatusName = '';
+        this.inputStageStatusVisible = false;
+    }
+    //#endregion
+    //#region Action type
+    sliceTagName(tag) {
+        // const isLongTag = tag.length > 20;
+        // return isLongTag ? `${tag.slice(0, 20)}...` : tag;
+        return tag;
+    }
+    inputActionTypeVisible = false;
+    inputActionTypeCode = '';
+    inputActionTypeName = '';
+    inputActionTypeElement;
+    checkRemoveableActionType(tag) {
+        if (this.lstAction.find((x) => x.ActionType === tag.Code)) {
+            return false;
+        }
+        return true;
+    }
+    handleCloseActionType(removedTag) {
+        this.template.lstActionType = this.template.lstActionType.filter((tag) => tag !== removedTag);
+    }
+    showInputActionType() {
+        this.inputActionTypeVisible = true;
+        setTimeout(() => {
+            console.log(this.inputActionTypeElement);
+            this.inputActionTypeElement?.nativeElement.focus();
+        }, 10);
+    }
+    handleInputActionTypeConfirm() {
+        if (this.inputActionTypeCode && !this.template.lstActionType.find((x) => x.Code === this.inputValue)) {
+            this.template.lstActionType = [
+                ...this.template.lstActionType,
+                { Code: this.inputActionTypeCode, Name: this.inputActionTypeName },
+            ];
+        }
+        this.inputActionTypeCode = '';
+        this.inputActionTypeName = '';
+        this.inputActionTypeVisible = false;
+    }
+    //#endregion
+    //#region Action status
+    inputVisible = false;
+    inputValue = '';
+    inputElement;
+    checkRemoveableActionStatus(tag) {
+        if (this.lstAction.find((x) => x.ActionStatus === tag.Code)) {
+            return false;
+        }
+        return true;
+    }
+    handleClose(removedTag) {
+        this.template.lstActionStatus = this.template.lstActionStatus.filter((tag) => tag !== removedTag);
+    }
+    showInput() {
+        this.inputVisible = true;
+        setTimeout(() => {
+            console.log(this.inputElement);
+            this.inputElement?.nativeElement.focus();
+        }, 10);
+    }
+    handleInputConfirm() {
+        if (this.inputValue && !this.template.lstActionStatus.find((x) => x.Code === this.inputValue)) {
+            this.template.lstActionStatus = [...this.template.lstActionStatus, { Code: this.inputValue }];
+        }
+        this.inputValue = '';
+        this.inputVisible = false;
+    }
+    //#endregion
+    //#region Canvas action
+    onMouseDownCanvas(event) {
+        console.log('onMouseDownCanvas > event.button', event.button);
+        if (event.button !== 0)
+            return; // button === 0 : chuột trái
+        // click vào canvas trống
+        if (event.target.closest('.workflow-node'))
+            return;
+        // 🖐 SPACE + drag → pan
+        if (this.isMoveMode) {
+            this.isPanning = true;
+            this.panStart = {
+                x: event.clientX,
+                y: event.clientY,
+            };
+            this.canvasRef?.nativeElement.classList.add('panning');
+            return;
+        }
+        const p = this.getSvgPoint(event, true);
+        this.isSelecting = true;
+        this.selectStart = p;
+        this.selectEnd = p;
+        this.lstSelectedStageCode.clear();
+    }
+    onMouseMoveCanvas(event) {
+        if (this.isPanning && this.panStart) {
+            const dx = event.clientX - this.panStart.x;
+            const dy = event.clientY - this.panStart.y;
+            this.panX += dx;
+            this.panY += dy;
+            this.panStart = {
+                x: event.clientX,
+                y: event.clientY,
+            };
+            return;
+        }
+        const p = this.getSvgPoint(event);
+        const dx = Math.abs(event.clientX - this.dragStartX);
+        const dy = Math.abs(event.clientY - this.dragStartY);
+        if (dx > 4 || dy > 4) {
+            this.isDragging = true;
+        }
+        // 1️⃣ đang kéo vùng chọn
+        if (this.isSelecting && this.selectStart) {
+            const p1 = this.getSvgPoint(event, true);
+            this.selectEnd = p1;
+            this.updateSelection();
+            return;
+        }
+        // 2️⃣ đang kéo nhiều node
+        if (this.draggingGroup && this.dragStartMouse) {
+            let dx = p.x - this.dragStartMouse.x;
+            let dy = p.y - this.dragStartMouse.y;
+            // ⭐ xác định trục lock
+            if (event.shiftKey && !this.axisLock) {
+                this.axisLock = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y';
+            }
+            if (event.shiftKey && this.axisLock === 'x') {
+                dy = 0;
+            }
+            if (event.shiftKey && this.axisLock === 'y') {
+                dx = 0;
+            }
+            const snap = this.snapPoint({
+                x: this.dragStartMouse.x + dx,
+                y: this.dragStartMouse.y + dy,
+            }, event);
+            const sdx = snap.x - this.dragStartMouse.x;
+            const sdy = snap.y - this.dragStartMouse.y;
+            // for (const n of this.lstStage) {
+            //   if (!this.lstSelectedStageCode.has(n.Code)) continue;
+            //   const start = this.dragStartPositions.get(n.Code)!;
+            //   n.x = start.x + sdx;
+            //   n.y = start.y + sdy;
+            // }
+            const nodeW = this.NODE_WIDTH;
+            const nodeH = this.NODE_HEIGHT;
+            // tìm biên group
+            let minX = Infinity;
+            let minY = Infinity;
+            let maxX = -Infinity;
+            let maxY = -Infinity;
+            for (const n of this.lstStage) {
+                if (!this.lstSelectedStageCode.has(n.Code))
+                    continue;
+                const start = this.dragStartPositions.get(n.Code);
+                minX = Math.min(minX, start.x);
+                minY = Math.min(minY, start.y);
+                maxX = Math.max(maxX, start.x + nodeW);
+                maxY = Math.max(maxY, start.y + nodeH);
+            }
+            // clamp delta
+            const clampedDx = this.clamp(sdx, -minX, this.CANVAS_WIDTH - maxX);
+            const clampedDy = this.clamp(sdy, -minY, this.CANVAS_HEIGHT - maxY);
+            // 🔹 move nodes
+            for (const n of this.lstStage) {
+                if (!this.lstSelectedStageCode.has(n.Code))
+                    continue;
+                const start = this.dragStartPositions.get(n.Code);
+                n.x = start.x + clampedDx;
+                n.y = start.y + clampedDy;
+            }
+            // 🔹 move edge points
+            for (const [edge, startPoints] of this.dragStartEdgePoints.entries()) {
+                if (!edge.points)
+                    continue;
+                edge.points.forEach((pt, i) => {
+                    pt.x = startPoints[i].x + dx;
+                    pt.y = startPoints[i].y + dy;
+                });
+            }
+            return;
+        }
+        // 4️⃣ đang kéo 1 node
+        if (this.draggingNode) {
+            const dx = p.x;
+            const dy = p.y;
+            // ⭐ xác định trục khi giữ Shift
+            if (event.shiftKey && !this.axisLock) {
+                if (Math.abs(dx) > Math.abs(dy)) {
+                    this.axisLock = 'x';
+                }
+                else {
+                    this.axisLock = 'y';
+                }
+            }
+            let rawX = p.x - this.offsetX;
+            let rawY = p.y - this.offsetY;
+            // ⭐ khoá trục
+            if (event.shiftKey && this.axisLock === 'x') {
+                rawY = this.draggingNode.y;
+            }
+            if (event.shiftKey && this.axisLock === 'y') {
+                rawX = this.draggingNode.x;
+            }
+            const snap = this.snapPoint({ x: rawX, y: rawY }, event);
+            // this.draggingNode.x = snap.x;
+            // this.draggingNode.y = snap.y;
+            const nodeW = this.NODE_WIDTH;
+            const nodeH = this.NODE_HEIGHT;
+            this.draggingNode.x = this.clamp(snap.x, 0, this.CANVAS_WIDTH - nodeW);
+            this.draggingNode.y = this.clamp(snap.y, 0, this.CANVAS_HEIGHT - nodeH);
+            return;
+        }
+        // 3️⃣ đang kéo waypoint
+        if (this.draggingPoint) {
+            const p1 = this.getSvgPoint(event, true);
+            const snap = this.snapPoint(p1, event);
+            // this.draggingPoint.x = snap.x;
+            // this.draggingPoint.y = snap.y;
+            this.draggingPoint.x = this.clamp(snap.x, 0, this.CANVAS_WIDTH);
+            this.draggingPoint.y = this.clamp(snap.y, 0, this.CANVAS_HEIGHT);
+            return;
+        }
+        // 5️⃣ đang kéo connection preview
+        if (this.connectingFrom) {
+            const p = this.getSvgPoint(event, true);
+            this.previewX = p.x;
+            this.previewY = p.y;
+        }
+    }
+    onMouseUpCanvas(event) {
+        this.isSelecting = false;
+        this.draggingGroup = false;
+        this.draggingNode = undefined;
+        this.draggingPoint = undefined;
+        this.isPanning = false;
+        setTimeout(() => (this.isDragging = false));
+    }
+    onClickCanvas(e) {
+        console.log('onClickCanvas', e.offsetX, e.offsetY);
+        if (!this.connectingFrom)
+            return;
+        this.connectingPoints.push({
+            x: e.offsetX,
+            y: e.offsetY,
+        });
+        console.log(this.connectingPoints);
+    }
+    //#endregion
+    //#region NODE action
+    onMouseDownNode(event, node) {
+        console.log('onMouseDownNode', node);
+        event.stopPropagation();
+        event.preventDefault();
+        this.axisLock = null;
+        const p = this.getSvgPoint(event);
+        // CASE 1️⃣: node nằm trong selection → kéo cả group
+        if (this.lstSelectedStageCode.has(node.Code)) {
+            /* =============================
+             * UNDO SNAPSHOT (GROUP)
+             * ============================= */
+            this.pushUndo({
+                type: 'move-nodes',
+                before: this.cloneNodePositions(this.lstSelectedStageCode),
+            });
+            this.draggingGroup = true;
+            this.dragStartMouse = p;
+            // 🔹 snapshot node positions
+            this.dragStartPositions.clear();
+            for (const n of this.lstStage) {
+                if (this.lstSelectedStageCode.has(n.Code)) {
+                    this.dragStartPositions.set(n.Code, { x: n.x, y: n.y });
+                }
+            }
+            // 🔹 snapshot edge points
+            this.dragStartEdgePoints = new Map();
+            for (const e of this.lstAction) {
+                if (!e.points?.length)
+                    continue;
+                if (this.lstSelectedStageCode.has(e.FromStage || '') || this.lstSelectedStageCode.has(e.ToStage || '')) {
+                    this.dragStartEdgePoints.set(e, e.points.map((p) => ({ x: p.x, y: p.y })));
+                }
+            }
+            return;
+        }
+        // CASE 2️⃣: node chưa được chọn → kéo node đơn
+        this.lstSelectedStageCode.clear();
+        // this.selectedNodeIds.add(node.id);
+        /* =============================
+         * UNDO SNAPSHOT (1 NODE)
+         * ============================= */
+        this.pushUndo({
+            type: 'move-nodes',
+            before: this.cloneNodePositions(new Set([node.Code])),
+        });
+        this.draggingNode = node;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.offsetX = event.clientX - node.x;
+        this.offsetY = event.clientY - node.y;
+        this.isDragging = false;
+    }
+    onClickStage(node) {
+        console.log('onClickStage', node);
+        this.hoverStage = undefined;
+        if (this.isDragging)
+            return;
+        if (this.connectingFrom) {
+            if (this.connectingFrom.node.Code !== node.Code) {
+                const existed = this.lstAction.some((e) => e.FromStage === this.connectingFrom.node.Code && e.ToStage === node.Code);
+                if (!existed) {
+                    const newAction = new WorkflowAction();
+                    newAction.FromStage = this.connectingFrom.node.Code;
+                    newAction.FromSide = this.connectingFrom.side;
+                    newAction.ToStage = node.Code;
+                    newAction.ToSide = 'left';
+                    // ⭐ NẾU CÓ WAYPOINT → MANUAL ROUTE
+                    if (this.connectingPoints.length > 0) {
+                        newAction.points = [...this.connectingPoints];
+                    }
+                    this.lstAction.push(newAction);
+                    const stage = this.lstStage.find((x) => x.Code == newAction.FromStage);
+                    if (stage) {
+                        stage.lstAction = stage.lstAction ? [...stage.lstAction, newAction] : [newAction];
+                    }
+                }
+            }
+            this.cancelConnecting();
+            return;
+        }
+        if (this.isDragging)
+            return;
+        if (this.lstSelectedStageCode.size)
+            return;
+        // if (node.id == 'start' || node.id == 'end') return;
+        this.selectedStage = node;
+        console.log(this.selectedStage);
+    }
+    //#endregion
+    //#region EDGE action
+    onMouseEnterEdge(e) {
+        // console.log('onMouseEnterEdge', e);
+        if (this.connectingFrom)
+            return;
+        this.hoverEdge = e;
+        this.connectingPoints = e.points || [];
+    }
+    onMouseLeaveEdge(e) {
+        // console.log('onEdgeLeave', e);
+        if (this.connectingFrom)
+            return;
+        this.hoverEdge = undefined;
+        this.connectingPoints = [];
+    }
+    edgeClickTimer = null;
+    CLICK_DELAY = 250;
+    onClickEdge(edge, event, doAction = false) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.edgeClickTimer) {
+            // 👉 DBL CLICK
+            clearTimeout(this.edgeClickTimer);
+            this.edgeClickTimer = null;
+            this.onDoubleClickEdge(event, edge);
+            return;
+        }
+        if (doAction) {
+            this.selectedAction = edge;
+            this.selectedBackAction = this.lstAction.find((x) => x.isBackAction == true &&
+                x.FromStage == this.selectedAction?.ToStage &&
+                x.ToStage == this.selectedAction?.FromStage);
+        }
+        else {
+            // 👉 SINGLE CLICK (chờ xem có dbl không)
+            this.edgeClickTimer = setTimeout(() => {
+                this.edgeClickTimer = null;
+                console.log('onClickEdge', edge);
+                this.onClickEdge(edge, event, true);
+            }, this.CLICK_DELAY);
+        }
+    }
+    onDoubleClickEdge(event, edge) {
+        console.log('onDoubleClickEdge', edge);
+        event.stopPropagation();
+        event.preventDefault();
+        const p = this.getSvgPoint(event, true);
+        // Nếu edge chưa có manual points → convert auto → manual
+        if (!edge.points || edge.points.length === 0) {
+            edge.points = [];
+        }
+        const insertIndex = this.findInsertIndex(edge, p);
+        edge.points.splice(insertIndex, 0, {
+            x: p.x,
+            y: p.y,
+        });
+    }
+    //#endregion
+    //#region Connector action
+    onClickConnector(event, node, side) {
+        console.log('onClickConnector', side, node);
+        event.stopPropagation();
+        event.preventDefault();
+        const p = this.getSvgPoint(event, true);
+        this.previewX = p.x;
+        this.previewY = p.y;
+        /* =============================
+         * CLICK OUT (RIGHT) → BẮT ĐẦU
+         * ============================= */
+        if (side === 'right') {
+            this.connectingFrom = {
+                node: node,
+                side: side,
+            };
+            this.connectingPoints = []; // ⭐ reset waypoint
+            return;
+        }
+        /* =============================
+         * CLICK IN (LEFT) → KẾT THÚC
+         * ============================= */
+        if (side === 'left' && this.connectingFrom) {
+            if (this.connectingFrom.node.Code !== node.Code) {
+                const existed = this.lstAction.some((e) => e.FromStage === this.connectingFrom.node.Code && e.ToStage === node.Code);
+                if (!existed) {
+                    const newAction = new WorkflowAction();
+                    newAction.FromStage = this.connectingFrom.node.Code;
+                    newAction.FromSide = this.connectingFrom.side;
+                    newAction.ToStage = node.Code;
+                    newAction.ToSide = 'left';
+                    // ⭐ NẾU CÓ WAYPOINT → MANUAL ROUTE
+                    if (this.connectingPoints.length > 0) {
+                        newAction.points = [...this.connectingPoints];
+                    }
+                    this.lstAction.push(newAction);
+                    const stage = this.lstStage.find((x) => x.Code == newAction.FromStage);
+                    if (stage) {
+                        stage.lstAction = stage.lstAction ? [...stage.lstAction, newAction] : [newAction];
+                    }
+                    console.log(newAction);
+                    console.log(stage);
+                }
+            }
+            this.cancelConnecting();
+        }
+    }
+    //#endregion
+    //#region Point action
+    onmousedownPoint(event, p) {
+        console.log('onmousedownPoint', p);
+        event.stopPropagation();
+        event.preventDefault();
+        if (!this.draggingPoint) {
+            this.draggingPoint = p;
+        }
+        else {
+            this.draggingPoint = undefined;
+        }
+    }
+    onRightClickPoint(event, edge, index) {
+        console.log('onRightClickPoint', edge, index);
+        event.preventDefault();
+        event.stopPropagation();
+        if (!edge.points)
+            return;
+        edge.points.splice(index, 1);
+        // Nếu xoá hết → quay về auto route
+        if (edge.points.length === 0) {
+            delete edge.points;
+        }
+    }
+    //#endregion
+    //#region UNDO REDU
+    undoStack = [];
+    redoStack = [];
+    cloneNodePositions(nodeIds) {
+        const map = new Map();
+        for (const n of this.lstStage) {
+            if (nodeIds.has(n.Code)) {
+                map.set(n.Code, { x: n.x, y: n.y });
+            }
+        }
+        return map;
+    }
+    pushAlignUndo() {
+        this.pushUndo({
+            type: 'move-nodes',
+            before: this.cloneNodePositions(this.lstSelectedStageCode),
+        });
+    }
+    pushUndo(action) {
+        this.undoStack.push(action);
+        this.redoStack = [];
+    }
+    undo() {
+        const action = this.undoStack.pop();
+        if (!action)
+            return;
+        switch (action.type) {
+            case 'move-nodes':
+                this.undoMoveNodes(action);
+                break;
+            case 'delete-node': {
+                // 🔙 restore node
+                this.lstStage.splice(action.nodeIndex, 0, action.node);
+                // 🔙 restore edges
+                this.lstAction.push(...action.edges);
+                // redo snapshot
+                this.redoStack.push(action);
+                break;
+            }
+        }
+    }
+    undoMoveNodes(action) {
+        const after = this.cloneNodePositions(new Set(action.before.keys()));
+        this.redoStack.push({
+            type: 'move-nodes',
+            before: after,
+        });
+        // restore
+        action.before.forEach((pos, id) => {
+            const node = this.lstStage.find((n) => n.Code === id);
+            if (node) {
+                node.x = pos.x;
+                node.y = pos.y;
+            }
+        });
+    }
+    redo() {
+        const action = this.redoStack.pop();
+        if (!action)
+            return;
+        switch (action.type) {
+            case 'move-nodes':
+                this.redoMoveNodes(action);
+                break;
+            case 'delete-node': {
+                const nodeId = action.node.id;
+                // redo = xoá lại
+                this.lstAction = this.lstAction.filter((e) => e.FromStage !== nodeId && e.ToStage !== nodeId);
+                const idx = this.lstStage.findIndex((n) => n.Code === nodeId);
+                if (idx >= 0)
+                    this.lstStage.splice(idx, 1);
+                this.undoStack.push(action);
+                break;
+            }
+        }
+    }
+    redoMoveNodes(action) {
+        const after = this.cloneNodePositions(new Set(action.before.keys()));
+        this.undoStack.push({
+            type: 'move-nodes',
+            before: after,
+        });
+        action.before.forEach((pos, id) => {
+            const node = this.lstStage.find((n) => n.Code === id);
+            if (node) {
+                node.x = pos.x;
+                node.y = pos.y;
+            }
+        });
+    }
+    //#endregion
+    CANVAS_WIDTH = 10000;
+    CANVAS_HEIGHT = 10000;
+    canvasWidth = 0;
+    canvasHeight = 0;
+    NODE_WIDTH = 160;
+    NODE_HEIGHT = 80;
+    //#region ALIGN
+    getSelectedNodes() {
+        return this.lstStage.filter((n) => this.lstSelectedStageCode.has(n.Code));
+    }
+    alignLeft() {
+        if (this.lstSelectedStageCode.size < 2)
+            return;
+        this.pushAlignUndo();
+        const nodes = this.getSelectedNodes();
+        const minX = Math.min(...nodes.map((n) => n.x));
+        nodes.forEach((n) => (n.x = minX));
+    }
+    alignCenter() {
+        if (this.lstSelectedStageCode.size < 2)
+            return;
+        this.pushAlignUndo();
+        const nodes = this.getSelectedNodes();
+        const centers = nodes.map((n) => n.x + this.NODE_WIDTH / 2);
+        const centerX = centers.reduce((a, b) => a + b) / centers.length;
+        nodes.forEach((n) => {
+            n.x = centerX - this.NODE_WIDTH / 2;
+        });
+    }
+    alignRight() {
+        if (this.lstSelectedStageCode.size < 2)
+            return;
+        this.pushAlignUndo();
+        const nodes = this.getSelectedNodes();
+        const maxX = Math.max(...nodes.map((n) => n.x + this.NODE_WIDTH));
+        nodes.forEach((n) => (n.x = maxX - this.NODE_WIDTH));
+    }
+    alignTop() {
+        if (this.lstSelectedStageCode.size < 2)
+            return;
+        this.pushAlignUndo();
+        const nodes = this.getSelectedNodes();
+        const minY = Math.min(...nodes.map((n) => n.y));
+        nodes.forEach((n) => (n.y = minY));
+    }
+    alignMiddle() {
+        if (this.lstSelectedStageCode.size < 2)
+            return;
+        this.pushAlignUndo();
+        const nodes = this.getSelectedNodes();
+        const centers = nodes.map((n) => n.y + this.NODE_HEIGHT / 2);
+        const centerY = centers.reduce((a, b) => a + b) / centers.length;
+        nodes.forEach((n) => {
+            n.y = centerY - this.NODE_HEIGHT / 2;
+        });
+    }
+    alignBottom() {
+        if (this.lstSelectedStageCode.size < 2)
+            return;
+        this.pushAlignUndo();
+        const nodes = this.getSelectedNodes();
+        const maxY = Math.max(...nodes.map((n) => n.y + this.NODE_HEIGHT));
+        nodes.forEach((n) => (n.y = maxY - this.NODE_HEIGHT));
+    }
+    distributeHorizontal() {
+        if (this.lstSelectedStageCode.size < 3)
+            return;
+        this.pushAlignUndo();
+        const nodes = this.getSelectedNodes().sort((a, b) => a.x - b.x);
+        const first = nodes[0];
+        const last = nodes[nodes.length - 1];
+        const totalWidth = nodes.reduce((s, n) => s + this.NODE_WIDTH, 0);
+        const space = (last.x - first.x - totalWidth + this.NODE_WIDTH) / (nodes.length - 1);
+        let x = first.x;
+        nodes.forEach((n, i) => {
+            if (i === 0 || i === nodes.length - 1) {
+                x = n.x + this.NODE_WIDTH + space;
+                return;
+            }
+            n.x = x;
+            x += this.NODE_WIDTH + space;
+        });
+    }
+    distributeVertical() {
+        if (this.lstSelectedStageCode.size < 3)
+            return;
+        this.pushAlignUndo();
+        const nodes = this.getSelectedNodes().sort((a, b) => a.y - b.y);
+        const first = nodes[0];
+        const last = nodes[nodes.length - 1];
+        const totalHeight = nodes.reduce((s, n) => s + this.NODE_HEIGHT, 0);
+        const space = (last.y - first.y - totalHeight + this.NODE_HEIGHT) / (nodes.length - 1);
+        let y = first.y;
+        nodes.forEach((n, i) => {
+            if (i === 0 || i === nodes.length - 1) {
+                y = n.y + this.NODE_HEIGHT + space;
+                return;
+            }
+            n.y = y;
+            y += this.NODE_HEIGHT + space;
+        });
+    }
+    //#endregion
+    //#region zoom
+    zoom = 1;
+    minZoom = 0.5;
+    maxZoom = 2;
+    zoomStep = 0.1;
+    get svgTransform() {
+        const cx = this.getCanvasWidth() / 2;
+        const cy = this.getCanvasHeight() / 2;
+        return `
+    translate(${cx} ${cy})
+    scale(${this.zoom})
+    translate(${-cx} ${-cy})
+  `;
+    }
+    zoomIn() {
+        this.zoom = Math.min(this.zoom + this.zoomStep, this.maxZoom);
+    }
+    zoomOut() {
+        this.zoom = Math.max(this.zoom - this.zoomStep, this.minZoom);
+    }
+    //#endregion
+    //#region HELPER
+    isEdgeReversed(edge) {
+        const from = this.getNodeCenter(this.lstStage.find((x) => x.Code == edge.FromStage), 'right');
+        const to = this.getNodeCenter(this.lstStage.find((x) => x.Code == edge.ToStage), 'left');
+        return to.x < from.x;
+    }
+    getEdgeLabelPosition(edge) {
+        // Ưu tiên waypoint giữa nếu có
+        if (edge.points && edge.points.length > 0) {
+            const mid = edge.points[Math.floor(edge.points.length / 2)];
+            return { x: mid.x, y: mid.y };
+        }
+        // fallback: giữa from → to
+        const from = this.getNodeCenter(this.lstStage.find((x) => x.Code == edge.FromStage), 'right');
+        const to = this.getNodeCenter(this.lstStage.find((x) => x.Code == edge.ToStage), 'left');
+        return {
+            x: (from.x + to.x) / 2,
+            y: (from.y + to.y) / 2,
+        };
+    }
+    getNodeCenter(node, side = 'right') {
+        // const width = node.width ?? 160;   // ⭐ đúng với card của bạn
+        // const height = node.height ?? 80;
+        const width = 160;
+        const height = 80;
+        switch (side) {
+            case 'left':
+                return {
+                    x: node.x,
+                    y: node.y + height / 2,
+                };
+            case 'right':
+                return {
+                    x: node.x + width,
+                    y: node.y + height / 2,
+                };
+            case 'top':
+                return {
+                    x: node.x + width / 2,
+                    y: node.y,
+                };
+            case 'bottom':
+                return {
+                    x: node.x + width / 2,
+                    y: node.y + height,
+                };
+        }
+    }
+    updateCanvasSize() {
+        const rect = this.canvasRef?.nativeElement.getBoundingClientRect();
+        this.canvasWidth = rect?.width;
+        this.canvasHeight = rect?.height;
+    }
+    clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+    findInsertIndex(edge, p) {
+        const points = this.getEdgeFullPoints(edge);
+        if (!points)
+            return 0;
+        let minDist = Infinity;
+        let index = 0;
+        for (let i = 0; i < points.length - 1; i++) {
+            const d = this.pointToSegmentDistance(p, points[i], points[i + 1]);
+            if (d < minDist) {
+                minDist = d;
+                index = i;
+            }
+        }
+        // index tương ứng với vị trí trong edge.points
+        return Math.max(0, index);
+    }
+    getEdgeFullPoints(edge) {
+        if (!edge.FromStage || !edge.ToStage)
+            return null;
+        const from = this.getNode(edge.FromStage);
+        const to = this.getNode(edge.ToStage);
+        return [{ x: from.x + 160, y: from.y + 40 }, ...(edge.points || []), { x: to.x, y: to.y + 40 }];
+    }
+    pointToSegmentDistance(p, a, b) {
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        if (dx === 0 && dy === 0) {
+            return Math.hypot(p.x - a.x, p.y - a.y);
+        }
+        const t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / (dx * dx + dy * dy);
+        const clamped = Math.max(0, Math.min(1, t));
+        const proj = {
+            x: a.x + clamped * dx,
+            y: a.y + clamped * dy,
+        };
+        return Math.hypot(p.x - proj.x, p.y - proj.y);
+    }
+    isPositionOccupied(x, y) {
+        return this.lstStage.some((n) => Math.abs(n.x - x) < 160 && Math.abs(n.y - y) < 80);
+    }
+    getCanvasWidth() {
+        // return 3000;
+        const PADDING = 200;
+        const MIN_WIDTH = 800;
+        const maxX = Math.max(...this.lstStage.map((n) => (n.StageType == 'END' ? n.x : n.x + 160)), // 160 = node width
+        MIN_WIDTH);
+        return maxX + PADDING;
+    }
+    getCanvasHeight() {
+        // return 2000;
+        const PADDING = 100;
+        const maxY = Math.max(...this.lstStage.map((n) => n.y + 80), 400);
+        return maxY + PADDING;
+    }
+    /* =============================
+     * CONVERT MOUSE → SVG COORD
+     * ============================= */
+    getSvgPoint(event, preview = false) {
+        const svg = this.svgRef.nativeElement;
+        const pt = svg.createSVGPoint();
+        pt.x = event.clientX;
+        pt.y = event.clientY;
+        const result = pt.matrixTransform(svg.getScreenCTM().inverse());
+        if (preview) {
+            return { x: result.x, y: result.y };
+        }
+        else {
+            return { x: event.clientX, y: event.clientY };
+        }
+    }
+    updateSelection() {
+        if (!this.selectStart || !this.selectEnd)
+            return;
+        const x1 = Math.min(this.selectStart.x, this.selectEnd.x);
+        const y1 = Math.min(this.selectStart.y, this.selectEnd.y);
+        const x2 = Math.max(this.selectStart.x, this.selectEnd.x);
+        const y2 = Math.max(this.selectStart.y, this.selectEnd.y);
+        this.lstSelectedStageCode.clear();
+        for (const n of this.lstStage) {
+            const nx1 = n.x;
+            const ny1 = n.y;
+            const nx2 = n.x + 160;
+            const ny2 = n.y + 80;
+            const intersect = nx2 >= x1 && nx1 <= x2 && ny2 >= y1 && ny1 <= y2;
+            if (intersect) {
+                this.lstSelectedStageCode.add(n.Code);
+            }
+        }
+    }
+    snapPoint(p, event) {
+        if (!this.snapToGrid || event?.altKey)
+            return p;
+        if (!this.snapToGrid)
+            return p;
+        return {
+            x: this.snap(p.x),
+            y: this.snap(p.y),
+        };
+    }
+    snap(value) {
+        return Math.round(value / this.gridSize) * this.gridSize;
+    }
+    getNode(id) {
+        return this.lstStage.find((n) => n.Code === id);
+    }
+    //#endregion
+    //#region BUILD PATH
+    buildPath(edge) {
+        if (!edge.FromStage || !edge.ToStage)
+            return '';
+        const from = this.getNode(edge.FromStage);
+        const to = this.getNode(edge.ToStage);
+        const start = {
+            x: from.x + (from.isReverse ? 0 : 160),
+            y: from.y + 40,
+        };
+        const end = {
+            x: to.x + (to.isReverse ? 160 : 0),
+            y: to.y + 40,
+        };
+        if (edge.points && edge.points.length) {
+            return this.buildPathThroughPoints([start, ...edge.points, end]);
+        }
+        // return this.buildRoutedPath({ node: from, side: edge.fromSide }, to.x, to.y + 40);
+        return this.buildStragePath(start.x, start.y, end.x, end.y);
+    }
+    buildPreviewPath() {
+        if (!this.connectingFrom)
+            return '';
+        const start = {
+            x: this.connectingFrom.node.x + (this.connectingFrom.node.isReverse ? 0 : 160),
+            y: this.connectingFrom.node.y + 40,
+        };
+        const end = {
+            x: this.previewX,
+            y: this.previewY,
+        };
+        // ⭐ ĐÃ CÓ WAYPOINT → MANUAL PREVIEW
+        if (this.connectingPoints.length > 0) {
+            return this.buildPathThroughPoints([start, ...this.connectingPoints, end], 0);
+        }
+        // ⭐ CHƯA CÓ WAYPOINT → AUTO PREVIEW
+        // return this.buildRoutedPath(this.connectingFrom, end.x, end.y, 0);
+        return this.buildStragePath(start.x, start.y, end.x, end.y, 0);
+    }
+    buildStragePath(fromX, fromY, toX, toY, ARROW_GAP = 12) {
+        const x1 = fromX;
+        const y1 = fromY;
+        const x2 = toX;
+        const y2 = toY;
+        /* =============================
+         * 1. VECTOR GỐC
+         * ============================= */
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const len = Math.sqrt(dx * dx + dy * dy) || 1;
+        /* =============================
+         * 2. SHRINK START & END
+         * ============================= */
+        const sx = x1 + (dx / len) * ARROW_GAP;
+        const sy = y1 + (dy / len) * ARROW_GAP;
+        const ex = x2 - (dx / len) * ARROW_GAP;
+        const ey = y2 - (dy / len) * ARROW_GAP;
+        /* =============================
+         * 3. PATH THẲNG
+         * ============================= */
+        return `
+    M ${sx} ${sy}
+    L ${ex} ${ey}
+  `;
+    }
+    buildRoutedPath(from, toX, toY, ARROW_GAP = 12) {
+        const x1 = from.node.isReverse ? from.node.x : from.node.x + 160;
+        const y1 = from.node.y + 40;
+        const x2 = toX;
+        const y2 = toY;
+        // const ARROW_GAP = 12;
+        /* =============================
+         * 1. VECTOR GỐC
+         * ============================= */
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const len = Math.sqrt(dx * dx + dy * dy) || 1;
+        const ux = dx / len;
+        const uy = dy / len;
+        /* =============================
+         * 2. START / END (CÁCH CONNECTOR ĐỀU)
+         * ============================= */
+        let sx = x1 + ux * ARROW_GAP;
+        let sy = y1 + uy * ARROW_GAP;
+        let ex = x2 - ux * ARROW_GAP;
+        let ey = y2 - uy * ARROW_GAP;
+        /* =============================
+         * 3. KIỂM TRA BỊ CHẮN KHÔNG
+         * ============================= */
+        const blocked = this.isBlockedPoint(from, x2, y2);
+        /* =============================
+         * 4. ĐỘ CONG CƠ BẢN
+         * ============================= */
+        const dist = Math.sqrt((ex - sx) * (ex - sx) + (ey - sy) * (ey - sy));
+        const BASE_CURVE = Math.max(30, Math.min(80, dist / 2));
+        /* =============================
+         * 5. KHÔNG BỊ CHẮN → CONG TRỰC TIẾP
+         * ============================= */
+        if (!blocked) {
+            let c1x, c1y;
+            let c2x, c2y;
+            if (Math.abs(dy) < Math.abs(dx)) {
+                // thiên ngang
+                c1x = sx + BASE_CURVE;
+                c1y = sy;
+                c2x = ex - BASE_CURVE;
+                c2y = ey;
+            }
+            else {
+                // thiên dọc
+                const dir = ey > sy ? 1 : -1;
+                c1x = sx;
+                c1y = sy + dir * BASE_CURVE;
+                c2x = ex;
+                c2y = ey - dir * BASE_CURVE;
+            }
+            return `
+      M ${sx} ${sy}
+      C ${c1x} ${c1y},
+        ${c2x} ${c2y},
+        ${ex} ${ey}
+    `;
+        }
+        /* =============================
+         * 6. BỊ CHẮN → ROUTE NÉ (S-CURVE)
+         * ============================= */
+        const routeY = this.findBestRouteY(from, ex, ey);
+        const midX = (sx + ex) / 2;
+        const CURVE = 40;
+        return `
+    M ${sx} ${sy}
+    C ${sx + CURVE} ${sy},
+      ${sx + CURVE} ${routeY},
+      ${midX} ${routeY}
+    S ${ex - CURVE} ${routeY},
+      ${ex} ${ey}
+  `;
+    }
+    buildPathThroughPoints(points, ARROW_GAP = 12, tension = 0.1) {
+        if (points.length < 2)
+            return '';
+        const start = this.shrinkPoint(points[0], points[1], ARROW_GAP);
+        const end = this.shrinkPoint(points[points.length - 1], points[points.length - 2], ARROW_GAP);
+        const pts = [start, ...points.slice(1, -1), end];
+        let d = `M ${pts[0].x} ${pts[0].y}`;
+        for (let i = 0; i < pts.length - 1; i++) {
+            const p0 = pts[i - 1] || pts[i];
+            const p1 = pts[i];
+            const p2 = pts[i + 1];
+            const p3 = pts[i + 2] || p2;
+            const c1x = p1.x + (p2.x - p0.x) * tension;
+            const c1y = p1.y + (p2.y - p0.y) * tension;
+            const c2x = p2.x - (p3.x - p1.x) * tension;
+            const c2y = p2.y - (p3.y - p1.y) * tension;
+            d += ` C ${c1x} ${c1y}, ${c2x} ${c2y}, ${p2.x} ${p2.y}`;
+        }
+        return d;
+    }
+    shrinkPoint(from, to, gap) {
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+        const len = Math.sqrt(dx * dx + dy * dy) || 1;
+        return {
+            x: from.x + (dx / len) * gap,
+            y: from.y + (dy / len) * gap,
+        };
+    }
+    isBlockedPoint(from, x2, y2) {
+        const x1 = from.node.isReverse ? from.node.x + 160 : from.node.x;
+        const y1 = from.node.y + 40;
+        return this.lstStage.some((n) => {
+            if (n.Code === from.node.Code)
+                return false;
+            // node phải nằm giữa theo trục X
+            if (!this.isNodeBetweenX(x1, x2, n))
+                return false;
+            // line phải cắt node theo trục Y
+            return this.doesLineCrossNodeY(y1, n);
+        });
+    }
+    findBestRouteY(from, toX, toY) {
+        const baseY = from.node.y + 40;
+        const OFFSETS = [0, 80, -80, 160, -160, 240, -240];
+        for (const offset of OFFSETS) {
+            const routeY = baseY + offset;
+            if (this.isLaneClear(from, toX, routeY)) {
+                return routeY;
+            }
+        }
+        // fallback: dùng lane xa nhất
+        return baseY + OFFSETS[OFFSETS.length - 1];
+    }
+    isNodeBetweenX(fromX, toX, node) {
+        const nx1 = node.x;
+        const nx2 = node.x + 160;
+        const minX = Math.min(fromX, toX);
+        const maxX = Math.max(fromX, toX);
+        return nx2 > minX && nx1 < maxX;
+    }
+    doesLineCrossNodeY(y, node, tolerance = 6) {
+        const top = node.y;
+        const bottom = node.y + 80;
+        return y > top + tolerance && y < bottom - tolerance;
+    }
+    isLaneClear(from, toX, routeY) {
+        const x1 = from.node.x;
+        const y1 = from.node.y + 40;
+        const x2 = toX;
+        const y2 = routeY;
+        return !this.lstStage.some((n) => {
+            if (n.Code === from.node.Code)
+                return false;
+            // node phải nằm giữa theo trục X
+            if (!this.isNodeBetweenX(x1, x2, n))
+                return false;
+            // lane Y cắt node
+            return this.doesLineCrossNodeY(routeY, n);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstTemplateType: "lstTemplateType", lstTemplatePrint: "lstTemplatePrint", template: "template", lstStage: "lstStage", lstAction: "lstAction" }, outputs: { onSave: "onSave" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "inputStageStatusElement", first: true, predicate: ["inputStageStatusElement"], descendants: true }, { propertyName: "inputActionTypeElement", first: true, predicate: ["inputActionTypeElement"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #canvasRef\n  class=\"workflow-canvas\"\n  [class.connecting]=\"!!connectingFrom\"\n  [class.dragging-point]=\"!!draggingPoint\"\n  [style.width.px]=\"CANVAS_WIDTH\"\n  [style.height.px]=\"CANVAS_HEIGHT\"\n  (mousedown)=\"onMouseDownCanvas($event)\"\n  (mousemove)=\"onMouseMoveCanvas($event)\"\n  (mouseup)=\"onMouseUpCanvas($event)\"\n  (click)=\"onClickCanvas($event)\"\n>\n  <!-- \n\n  [style.width.px]=\"getCanvasWidth()\"\n  [style.height.px]=\"getCanvasHeight()\" \n\n  style=\"width: 100%; height: calc(100vh - 120px)\"\n  \n  -->\n\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n      <nz-icon nzType=\"setting\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\n      <nz-icon nzType=\"setting\"></nz-icon> T\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nzDanger nz-tooltip=\"Save\" (click)=\"save()\">\n      <nz-icon nzType=\"save\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Move mode\"\n      (click)=\"isMoveMode = true\"\n    >\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Select mode\"\n      (click)=\"isMoveMode = false\"\n    >\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- UNDO / REDO -->\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"undoStack.length === 0\"\n      nz-tooltip=\"Undo\"\n      (click)=\"undo()\"\n    >\n      <nz-icon nzType=\"undo\"></nz-icon>\n    </button>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"redoStack.length === 0\"\n      nz-tooltip=\"Redo\"\n      (click)=\"redo()\"\n    >\n      <nz-icon nzType=\"redo\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ALIGN -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n\n    <span class=\"divider\"></span>\n\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n\n    <span class=\"divider\"></span>\n\n    <!-- DISTRIBUTE -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 3\" (click)=\"distributeHorizontal()\">\n      \u21C4\n    </button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 3\" (click)=\"distributeVertical()\">\n      \u21C5\n    </button>\n  </div>\n\n  <div\n    class=\"canvas-content\"\n    [class.panning]=\"isMoveMode\"\n    [style.transform]=\"'translate(' + panX + 'px,' + panY + 'px)'\"\n  >\n    <!-- GRID -->\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n    <!-- <div class=\"zoom-toolbar\">\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\n    </div> -->\n\n    <!-- SVG EDGES -->\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n      <g [attr.transform]=\"svgTransform\">\n        <!-- DEFS -->\n        <defs>\n          <!-- glow effect -->\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n\n          <!-- arrow markers -->\n          <marker\n            id=\"arrow-blue\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-blue-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n        </defs>\n\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseenter)=\"onMouseEnterEdge(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge\"\n            [attr.id]=\"'edge-path-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-blue)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- text b\u00E1m theo line -->\n          <!-- \n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text> \n          \n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text>\n          -->\n\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge red\"\n            [attr.id]=\"'edge-path-hover-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-red)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text>\n\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text> -->\n\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- preview -->\n        <path\n          *ngIf=\"connectingFrom\"\n          class=\"edge\"\n          [attr.d]=\"buildPreviewPath()\"\n          stroke-dasharray=\"5,5\"\n          marker-end=\"url(#arrow-blue)\"\n        ></path>\n      </g>\n    </svg>\n\n    <div\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\n      class=\"selection-box\"\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n    ></div>\n\n    <!-- lstStage -->\n    @for (n of lstStage; track $index) {\n      @if (n.StageType == \"NODE\") {\n        <nz-card\n          #nodeEl\n          class=\"workflow-node\"\n          [attr.data-id]=\"n.Code\"\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageCode.has(n.Code)\"\n          [style.left.px]=\"n.x\"\n          [style.top.px]=\"n.y\"\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">{{ n.Code }}</div>\n\n          <div>{{ n.Name }}</div>\n\n          @if (!n.isReverse) {\n            <!-- connector RIGHT: output -->\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n\n            <!-- connector LEFT: input -->\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          } @else {\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          }\n        </nz-card>\n      }\n      <!-- START NODE -->\n      @else if (n.StageType === \"START\") {\n        <nz-card\n          class=\"workflow-node workflow-node-start\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.x\"\n          [style.top.px]=\"n.y\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageCode.has(n.Code)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.isReverseLabel ? -83 : 1\"\n            [nzColor]=\"'green'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector RIGHT: output -->\n          <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n        </nz-card>\n      }\n\n      <!-- END NODE -->\n      @else if (n.StageType === \"END\") {\n        <nz-card\n          class=\"workflow-node workflow-node-end\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.x\"\n          [style.top.px]=\"n.y\"\n          [class.connecting-source]=\"isConnectingFrom(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageCode.has(n.Code)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.isReverseLabel ? 65 : -5\"\n            [nzColor]=\"'red'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector LEFT: input -->\n          <div class=\"connector connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n        </nz-card>\n      }\n    }\n\n    <!-- POINTS -->\n    @for (p of connectingPoints; track $index) {\n      @if (p != draggingPoint) {\n        <div\n          class=\"waypoint\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n          (contextmenu)=\"onRightClickPoint($event, hoverEdge!, $index)\"\n        ></div>\n      } @else {\n        <div\n          class=\"waypoint dragging\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n        ></div>\n      }\n    }\n  </div>\n</div>\n\n<!-- TEMPLATE -->\n<nz-drawer\n  [nzTitle]=\"drawTemplateTitle\"\n  nzPlacement=\"right\"\n  [nzWidth]=\"500\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"drawTemplateVisibel\"\n  [nzFooter]=\"footerTplTemplate\"\n  (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\n  <ng-container *nzDrawerContent>\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\n    <extend-select\n      [label]=\"'Type'\"\n      [lstItem]=\"lstTemplateType\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.DocType\"\n    ></extend-select>\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\n    <extend-select\n      [label]=\"'Print template'\"\n      [lstItem]=\"lstTemplatePrint\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.TemplatePrint\"\n    ></extend-select>\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\n\n    @for (tag of template.lstStageStatus; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseStageStatus(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstStageStatus && template.lstStageStatus.length\" />\n\n    @if (!inputStageStatusVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputStageStatusElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputStageStatusCode\"\n        (keydown.enter)=\"inputStageStatusNameElement.select()\"\n      />\n      <input\n        #inputStageStatusNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputStageStatusName\"\n        (blur)=\"handleInputStageStatusConfirm()\"\n        (keydown.enter)=\"handleInputStageStatusConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\n\n    @for (tag of template.lstActionType; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseActionType(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionType && template.lstActionType.length\" />\n\n    @if (!inputActionTypeVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputActionTypeElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputActionTypeCode\"\n        (keydown.enter)=\"inputActionTypeNameElement.select()\"\n      />\n      <input\n        #inputActionTypeNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputActionTypeName\"\n        (blur)=\"handleInputActionTypeConfirm()\"\n        (keydown.enter)=\"handleInputActionTypeConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\n\n    @for (tag of template.lstActionStatus; track tag) {\n      <nz-tag [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\" (nzOnClose)=\"handleClose(tag)\">\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionStatus && template.lstActionStatus.length\" />\n\n    @if (!inputVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\n        <nz-icon nzType=\"plus\" />\n        New Action status\n      </nz-tag>\n    } @else {\n      <input\n        #inputElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"+ New Action status\"\n        [(ngModel)]=\"inputValue\"\n        (blur)=\"handleInputConfirm()\"\n        (keydown.enter)=\"handleInputConfirm()\"\n      />\n    }\n  </ng-container>\n\n  <ng-template #footerTplTemplate>\n    <div nz-flex [nzGap]=\"6\">\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n      <button nz-button nzDanger (click)=\"save()\">Save</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- STAGE -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleStage\"\n  [nzPlacement]=\"selectedStage?.drawerPosition ? selectedStage?.drawerPosition : 'right'\"\n  [nzVisible]=\"!!selectedStage\"\n  [nzWidth]=\"750\"\n  [nzClosable]=\"false\"\n  [nzFooter]=\"footerTplNode\"\n  (nzOnClose)=\"selectedStage = undefined\"\n>\n  <ng-template #drawerTitleStage>\n    <div nz-row nzJustify=\"space-between\">\n      @if (selectedStage) {\n        @if (selectedStage.drawerPosition == \"left\") {\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the right\" (click)=\"selectedStage.drawerPosition = 'right'\">\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          STAGE\n        } @else {\n          STAGE\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the left\" (click)=\"selectedStage.drawerPosition = 'left'\">\n            <nz-icon nzType=\"double-left\"></nz-icon>\n          </button>\n        }\n      }\n    </div>\n  </ng-template>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedStage\">\n      <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\n        <label nz-radio nzValue=\"START\" [nzDisabled]=\"true\">START</label>\n        <label nz-radio nzValue=\"NODE\" [nzDisabled]=\"true\">NODE</label>\n        <label nz-radio nzValue=\"END\" [nzDisabled]=\"true\">END</label>\n      </nz-radio-group>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"32\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Code'\"\n          [layOutType]=\"'vertical'\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Code\"\n        ></extend-input>\n\n        <extend-textarea\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Name'\"\n          [layOutType]=\"'vertical'\"\n          [autoSize]=\"true\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Name\"\n        ></extend-textarea>\n      </div>\n\n      <div nz-row [nzGutter]=\"32\">\n        <extend-input-number\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Sequence'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedStage.SeqValue\"\n        ></extend-input-number>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Org implement'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstOrg\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedStage.App_Org_Id\"\n        ></extend-select>\n      </div>\n\n      @if ([\"START\", \"END\"].indexOf(selectedStage.StageType) < 0) {\n        <extend-checkbox [label]=\"'Reverse'\" [labelSpan]=\"0\" [(_ngModel)]=\"selectedStage.isReverse\"></extend-checkbox>\n\n        <extend-checkbox\n          [label]=\"'Require user action'\"\n          [labelSpan]=\"0\"\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\n        ></extend-checkbox>\n      } @else {\n        <extend-checkbox\n          [label]=\"'Reverse'\"\n          [labelSpan]=\"0\"\n          [(_ngModel)]=\"selectedStage.isReverseLabel\"\n        ></extend-checkbox>\n      }\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\">\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\n        <div nz-col>\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\n            <nz-icon nzType=\"plus\"></nz-icon>\n          </button>\n        </div>\n      </div>\n\n      <nz-table\n        nzSize=\"small\"\n        [nzData]=\"selectedStage.lstAction || []\"\n        [nzShowPagination]=\"false\"\n        [nzNoResult]=\"'&nbsp;'\"\n      >\n        <thead>\n          <tr [hidden]=\"true\">\n            <th nzWidth=\"50px\"></th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (action of selectedStage.lstAction; track $index) {\n            <tr>\n              <td>\n                <nz-icon\n                  nzType=\"delete\"\n                  nzTheme=\"outline\"\n                  class=\"color-warn cursor-pointer icon-size-16\"\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\n                ></nz-icon>\n              </td>\n              <td (click)=\"hoverEdge = action\">\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n                  <extend-input\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action text'\"\n                    [layOutType]=\"'vertical'\"\n                    [(_ngModel)]=\"action.ActionText\"\n                    (_ngModelChange)=\"onchangeActionText(action)\"\n                  ></extend-input>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action type'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionType\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionType\"\n                  ></extend-select>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.StageStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"lstStage\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ToStage\"\n                    (_ngModelChange)=\"onchangeNextStage(action)\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.NextStageStatus\"\n                  ></extend-select>\n\n                  <nz-divider\n                    *ngIf=\"selectedStage.lstAction && $index + 1 < selectedStage.lstAction.length\"\n                    style=\"margin: 16px 0px 8px 0px; background-color: orange\"\n                  ></nz-divider>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </nz-table>\n\n      <box [height]=\"16\"></box>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplNode>\n    <div nz-flex [nzGap]=\"6\" [nzJustify]=\"selectedStage && selectedStage.drawerPosition == 'left' ? 'end' : 'start'\">\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\n      <button\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\n        nz-button\n        nzDanger\n        (click)=\"deleteNode()\"\n      >\n        Delete\n      </button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- EDGE -->\n<nz-drawer\n  nzTitle=\"ACTION\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"750\"\n  [nzVisible]=\"!!selectedAction\"\n  (nzOnClose)=\"selectedAction = undefined\"\n>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedAction\">\n      <strong>{{ selectedAction.FromStage }} -> {{ selectedAction.ToStage }}</strong>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action text'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedAction.ActionText\"\n          (_ngModelChange)=\"onchangeActionText(selectedAction)\"\n        ></extend-input>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action type'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionType\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionType\"\n        ></extend-select>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.StageStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstStage\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ToStage\"\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.NextStageStatus\"\n        ></extend-select>\n      </div>\n\n      <!-- <box [height]=\"16\"></box> -->\n      <nz-divider></nz-divider>\n\n      <extend-checkbox\n        [label]=\"'Allow back'\"\n        [labelSpan]=\"0\"\n        [(_ngModel)]=\"selectedAction.allowBack\"\n        (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\n      ></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n\n      @if (selectedAction.allowBack) {\n        <strong>{{ selectedAction.ToStage }} -> {{ selectedAction.FromStage }}</strong>\n\n        @if (selectedBackAction) {\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n            <extend-input\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action text'\"\n              [layOutType]=\"'vertical'\"\n              [(_ngModel)]=\"selectedBackAction.ActionText\"\n              (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\n            ></extend-input>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action type'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionType\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\n            ></extend-select>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"lstStage\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ToStage\"\n              (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.NextStageStatus\"\n            ></extend-select>\n          </div>\n        }\n      }\n    </ng-container>\n  </ng-container>\n</nz-drawer>\n\n<!-- setting editor -->\n<nz-drawer\n  [nzTitle]=\"drawSettingTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"settingVisible\"\n  (nzOnClose)=\"settingVisible = false\"\n>\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\n  <ng-container *nzDrawerContent>\n    <div class=\"form-item-no-bottom\">\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n\n      <extend-input-number [label]=\"'Canvas width'\" [(_ngModel)]=\"CANVAS_WIDTH\"></extend-input-number>\n      <box [height]=\"16\"></box>\n      <extend-input-number [label]=\"'Canvas height'\" [(_ngModel)]=\"CANVAS_HEIGHT\"></extend-input-number>\n    </div>\n  </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";.workflow-canvas{position:relative;width:100%;height:600px;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:10000px;height:10000px}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node-start{background-color:unset;display:flex;justify-content:right}.workflow-node-end{background-color:unset;display:flex}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-3px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-6px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$1.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$1.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$1.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i5$2.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$3.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$3.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i9.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i11.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "inputClass", "labelSpan", "allowClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "inputSpan", "disabled", "required", "noBottom", "selectModeType", "inputClass", "minRows", "maxRows", "autoSize", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i14.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i15.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i15.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i15.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i15.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i15.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i15.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i16.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-workflow-editor', imports: [
+                        CommonModule,
+                        FormsModule,
+                        NzCardModule,
+                        NzDrawerModule,
+                        NzTagModule,
+                        NzRadioModule,
+                        NzIconModule,
+                        Box,
+                        NzButtonModule,
+                        NzToolTipModule,
+                        ExtendInput,
+                        ExtendSelectComponent,
+                        ExtendCheckbox,
+                        ExtendTextArea,
+                        NzInputModule,
+                        NzGridModule,
+                        NzFlexModule,
+                        ExtendInputNumber,
+                        NzTableModule,
+                        NzDividerModule,
+                    ], template: "<div\n  #canvasRef\n  class=\"workflow-canvas\"\n  [class.connecting]=\"!!connectingFrom\"\n  [class.dragging-point]=\"!!draggingPoint\"\n  [style.width.px]=\"CANVAS_WIDTH\"\n  [style.height.px]=\"CANVAS_HEIGHT\"\n  (mousedown)=\"onMouseDownCanvas($event)\"\n  (mousemove)=\"onMouseMoveCanvas($event)\"\n  (mouseup)=\"onMouseUpCanvas($event)\"\n  (click)=\"onClickCanvas($event)\"\n>\n  <!-- \n\n  [style.width.px]=\"getCanvasWidth()\"\n  [style.height.px]=\"getCanvasHeight()\" \n\n  style=\"width: 100%; height: calc(100vh - 120px)\"\n  \n  -->\n\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n      <nz-icon nzType=\"setting\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\n      <nz-icon nzType=\"setting\"></nz-icon> T\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nzDanger nz-tooltip=\"Save\" (click)=\"save()\">\n      <nz-icon nzType=\"save\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Move mode\"\n      (click)=\"isMoveMode = true\"\n    >\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Select mode\"\n      (click)=\"isMoveMode = false\"\n    >\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- UNDO / REDO -->\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"undoStack.length === 0\"\n      nz-tooltip=\"Undo\"\n      (click)=\"undo()\"\n    >\n      <nz-icon nzType=\"undo\"></nz-icon>\n    </button>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"redoStack.length === 0\"\n      nz-tooltip=\"Redo\"\n      (click)=\"redo()\"\n    >\n      <nz-icon nzType=\"redo\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ALIGN -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n\n    <span class=\"divider\"></span>\n\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n\n    <span class=\"divider\"></span>\n\n    <!-- DISTRIBUTE -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 3\" (click)=\"distributeHorizontal()\">\n      \u21C4\n    </button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 3\" (click)=\"distributeVertical()\">\n      \u21C5\n    </button>\n  </div>\n\n  <div\n    class=\"canvas-content\"\n    [class.panning]=\"isMoveMode\"\n    [style.transform]=\"'translate(' + panX + 'px,' + panY + 'px)'\"\n  >\n    <!-- GRID -->\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n    <!-- <div class=\"zoom-toolbar\">\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\n    </div> -->\n\n    <!-- SVG EDGES -->\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n      <g [attr.transform]=\"svgTransform\">\n        <!-- DEFS -->\n        <defs>\n          <!-- glow effect -->\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n\n          <!-- arrow markers -->\n          <marker\n            id=\"arrow-blue\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-blue-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n        </defs>\n\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseenter)=\"onMouseEnterEdge(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge\"\n            [attr.id]=\"'edge-path-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-blue)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- text b\u00E1m theo line -->\n          <!-- \n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text> \n          \n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text>\n          -->\n\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge red\"\n            [attr.id]=\"'edge-path-hover-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-red)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text>\n\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text> -->\n\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- preview -->\n        <path\n          *ngIf=\"connectingFrom\"\n          class=\"edge\"\n          [attr.d]=\"buildPreviewPath()\"\n          stroke-dasharray=\"5,5\"\n          marker-end=\"url(#arrow-blue)\"\n        ></path>\n      </g>\n    </svg>\n\n    <div\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\n      class=\"selection-box\"\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n    ></div>\n\n    <!-- lstStage -->\n    @for (n of lstStage; track $index) {\n      @if (n.StageType == \"NODE\") {\n        <nz-card\n          #nodeEl\n          class=\"workflow-node\"\n          [attr.data-id]=\"n.Code\"\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageCode.has(n.Code)\"\n          [style.left.px]=\"n.x\"\n          [style.top.px]=\"n.y\"\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">{{ n.Code }}</div>\n\n          <div>{{ n.Name }}</div>\n\n          @if (!n.isReverse) {\n            <!-- connector RIGHT: output -->\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n\n            <!-- connector LEFT: input -->\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          } @else {\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          }\n        </nz-card>\n      }\n      <!-- START NODE -->\n      @else if (n.StageType === \"START\") {\n        <nz-card\n          class=\"workflow-node workflow-node-start\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.x\"\n          [style.top.px]=\"n.y\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageCode.has(n.Code)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.isReverseLabel ? -83 : 1\"\n            [nzColor]=\"'green'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector RIGHT: output -->\n          <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n        </nz-card>\n      }\n\n      <!-- END NODE -->\n      @else if (n.StageType === \"END\") {\n        <nz-card\n          class=\"workflow-node workflow-node-end\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.x\"\n          [style.top.px]=\"n.y\"\n          [class.connecting-source]=\"isConnectingFrom(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageCode.has(n.Code)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.isReverseLabel ? 65 : -5\"\n            [nzColor]=\"'red'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector LEFT: input -->\n          <div class=\"connector connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n        </nz-card>\n      }\n    }\n\n    <!-- POINTS -->\n    @for (p of connectingPoints; track $index) {\n      @if (p != draggingPoint) {\n        <div\n          class=\"waypoint\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n          (contextmenu)=\"onRightClickPoint($event, hoverEdge!, $index)\"\n        ></div>\n      } @else {\n        <div\n          class=\"waypoint dragging\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n        ></div>\n      }\n    }\n  </div>\n</div>\n\n<!-- TEMPLATE -->\n<nz-drawer\n  [nzTitle]=\"drawTemplateTitle\"\n  nzPlacement=\"right\"\n  [nzWidth]=\"500\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"drawTemplateVisibel\"\n  [nzFooter]=\"footerTplTemplate\"\n  (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\n  <ng-container *nzDrawerContent>\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\n    <extend-select\n      [label]=\"'Type'\"\n      [lstItem]=\"lstTemplateType\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.DocType\"\n    ></extend-select>\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\n    <extend-select\n      [label]=\"'Print template'\"\n      [lstItem]=\"lstTemplatePrint\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.TemplatePrint\"\n    ></extend-select>\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\n\n    @for (tag of template.lstStageStatus; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseStageStatus(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstStageStatus && template.lstStageStatus.length\" />\n\n    @if (!inputStageStatusVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputStageStatusElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputStageStatusCode\"\n        (keydown.enter)=\"inputStageStatusNameElement.select()\"\n      />\n      <input\n        #inputStageStatusNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputStageStatusName\"\n        (blur)=\"handleInputStageStatusConfirm()\"\n        (keydown.enter)=\"handleInputStageStatusConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\n\n    @for (tag of template.lstActionType; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseActionType(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionType && template.lstActionType.length\" />\n\n    @if (!inputActionTypeVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputActionTypeElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputActionTypeCode\"\n        (keydown.enter)=\"inputActionTypeNameElement.select()\"\n      />\n      <input\n        #inputActionTypeNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputActionTypeName\"\n        (blur)=\"handleInputActionTypeConfirm()\"\n        (keydown.enter)=\"handleInputActionTypeConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\n\n    @for (tag of template.lstActionStatus; track tag) {\n      <nz-tag [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\" (nzOnClose)=\"handleClose(tag)\">\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionStatus && template.lstActionStatus.length\" />\n\n    @if (!inputVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\n        <nz-icon nzType=\"plus\" />\n        New Action status\n      </nz-tag>\n    } @else {\n      <input\n        #inputElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"+ New Action status\"\n        [(ngModel)]=\"inputValue\"\n        (blur)=\"handleInputConfirm()\"\n        (keydown.enter)=\"handleInputConfirm()\"\n      />\n    }\n  </ng-container>\n\n  <ng-template #footerTplTemplate>\n    <div nz-flex [nzGap]=\"6\">\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n      <button nz-button nzDanger (click)=\"save()\">Save</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- STAGE -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleStage\"\n  [nzPlacement]=\"selectedStage?.drawerPosition ? selectedStage?.drawerPosition : 'right'\"\n  [nzVisible]=\"!!selectedStage\"\n  [nzWidth]=\"750\"\n  [nzClosable]=\"false\"\n  [nzFooter]=\"footerTplNode\"\n  (nzOnClose)=\"selectedStage = undefined\"\n>\n  <ng-template #drawerTitleStage>\n    <div nz-row nzJustify=\"space-between\">\n      @if (selectedStage) {\n        @if (selectedStage.drawerPosition == \"left\") {\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the right\" (click)=\"selectedStage.drawerPosition = 'right'\">\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          STAGE\n        } @else {\n          STAGE\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the left\" (click)=\"selectedStage.drawerPosition = 'left'\">\n            <nz-icon nzType=\"double-left\"></nz-icon>\n          </button>\n        }\n      }\n    </div>\n  </ng-template>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedStage\">\n      <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\n        <label nz-radio nzValue=\"START\" [nzDisabled]=\"true\">START</label>\n        <label nz-radio nzValue=\"NODE\" [nzDisabled]=\"true\">NODE</label>\n        <label nz-radio nzValue=\"END\" [nzDisabled]=\"true\">END</label>\n      </nz-radio-group>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"32\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Code'\"\n          [layOutType]=\"'vertical'\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Code\"\n        ></extend-input>\n\n        <extend-textarea\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Name'\"\n          [layOutType]=\"'vertical'\"\n          [autoSize]=\"true\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Name\"\n        ></extend-textarea>\n      </div>\n\n      <div nz-row [nzGutter]=\"32\">\n        <extend-input-number\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Sequence'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedStage.SeqValue\"\n        ></extend-input-number>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Org implement'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstOrg\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedStage.App_Org_Id\"\n        ></extend-select>\n      </div>\n\n      @if ([\"START\", \"END\"].indexOf(selectedStage.StageType) < 0) {\n        <extend-checkbox [label]=\"'Reverse'\" [labelSpan]=\"0\" [(_ngModel)]=\"selectedStage.isReverse\"></extend-checkbox>\n\n        <extend-checkbox\n          [label]=\"'Require user action'\"\n          [labelSpan]=\"0\"\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\n        ></extend-checkbox>\n      } @else {\n        <extend-checkbox\n          [label]=\"'Reverse'\"\n          [labelSpan]=\"0\"\n          [(_ngModel)]=\"selectedStage.isReverseLabel\"\n        ></extend-checkbox>\n      }\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\">\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\n        <div nz-col>\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\n            <nz-icon nzType=\"plus\"></nz-icon>\n          </button>\n        </div>\n      </div>\n\n      <nz-table\n        nzSize=\"small\"\n        [nzData]=\"selectedStage.lstAction || []\"\n        [nzShowPagination]=\"false\"\n        [nzNoResult]=\"'&nbsp;'\"\n      >\n        <thead>\n          <tr [hidden]=\"true\">\n            <th nzWidth=\"50px\"></th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (action of selectedStage.lstAction; track $index) {\n            <tr>\n              <td>\n                <nz-icon\n                  nzType=\"delete\"\n                  nzTheme=\"outline\"\n                  class=\"color-warn cursor-pointer icon-size-16\"\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\n                ></nz-icon>\n              </td>\n              <td (click)=\"hoverEdge = action\">\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n                  <extend-input\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action text'\"\n                    [layOutType]=\"'vertical'\"\n                    [(_ngModel)]=\"action.ActionText\"\n                    (_ngModelChange)=\"onchangeActionText(action)\"\n                  ></extend-input>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action type'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionType\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionType\"\n                  ></extend-select>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.StageStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"lstStage\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ToStage\"\n                    (_ngModelChange)=\"onchangeNextStage(action)\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.NextStageStatus\"\n                  ></extend-select>\n\n                  <nz-divider\n                    *ngIf=\"selectedStage.lstAction && $index + 1 < selectedStage.lstAction.length\"\n                    style=\"margin: 16px 0px 8px 0px; background-color: orange\"\n                  ></nz-divider>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </nz-table>\n\n      <box [height]=\"16\"></box>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplNode>\n    <div nz-flex [nzGap]=\"6\" [nzJustify]=\"selectedStage && selectedStage.drawerPosition == 'left' ? 'end' : 'start'\">\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\n      <button\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\n        nz-button\n        nzDanger\n        (click)=\"deleteNode()\"\n      >\n        Delete\n      </button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- EDGE -->\n<nz-drawer\n  nzTitle=\"ACTION\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"750\"\n  [nzVisible]=\"!!selectedAction\"\n  (nzOnClose)=\"selectedAction = undefined\"\n>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedAction\">\n      <strong>{{ selectedAction.FromStage }} -> {{ selectedAction.ToStage }}</strong>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action text'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedAction.ActionText\"\n          (_ngModelChange)=\"onchangeActionText(selectedAction)\"\n        ></extend-input>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action type'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionType\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionType\"\n        ></extend-select>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.StageStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstStage\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ToStage\"\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.NextStageStatus\"\n        ></extend-select>\n      </div>\n\n      <!-- <box [height]=\"16\"></box> -->\n      <nz-divider></nz-divider>\n\n      <extend-checkbox\n        [label]=\"'Allow back'\"\n        [labelSpan]=\"0\"\n        [(_ngModel)]=\"selectedAction.allowBack\"\n        (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\n      ></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n\n      @if (selectedAction.allowBack) {\n        <strong>{{ selectedAction.ToStage }} -> {{ selectedAction.FromStage }}</strong>\n\n        @if (selectedBackAction) {\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n            <extend-input\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action text'\"\n              [layOutType]=\"'vertical'\"\n              [(_ngModel)]=\"selectedBackAction.ActionText\"\n              (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\n            ></extend-input>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action type'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionType\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\n            ></extend-select>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"lstStage\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ToStage\"\n              (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.NextStageStatus\"\n            ></extend-select>\n          </div>\n        }\n      }\n    </ng-container>\n  </ng-container>\n</nz-drawer>\n\n<!-- setting editor -->\n<nz-drawer\n  [nzTitle]=\"drawSettingTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"settingVisible\"\n  (nzOnClose)=\"settingVisible = false\"\n>\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\n  <ng-container *nzDrawerContent>\n    <div class=\"form-item-no-bottom\">\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n\n      <extend-input-number [label]=\"'Canvas width'\" [(_ngModel)]=\"CANVAS_WIDTH\"></extend-input-number>\n      <box [height]=\"16\"></box>\n      <extend-input-number [label]=\"'Canvas height'\" [(_ngModel)]=\"CANVAS_HEIGHT\"></extend-input-number>\n    </div>\n  </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";.workflow-canvas{position:relative;width:100%;height:600px;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:10000px;height:10000px}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node-start{background-color:unset;display:flex;justify-content:right}.workflow-node-end{background-color:unset;display:flex}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-3px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-6px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}\n"] }]
+        }], propDecorators: { lstOrg: [{
+                type: Input
+            }], lstTemplateType: [{
+                type: Input
+            }], lstTemplatePrint: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], lstStage: [{
+                type: Input
+            }], lstAction: [{
+                type: Input
+            }], onSave: [{
+                type: Output,
+                args: ['onSave']
+            }], canvasRef: [{
+                type: ViewChild,
+                args: ['canvas', { static: true }]
+            }], svgRef: [{
+                type: ViewChild,
+                args: ['svg', { static: true }]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
+            }], inputStageStatusElement: [{
+                type: ViewChild,
+                args: ['inputStageStatusElement', { static: false }]
+            }], inputActionTypeElement: [{
+                type: ViewChild,
+                args: ['inputActionTypeElement', { static: false }]
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement', { static: false }]
+            }] } });
+
 class AutoFocusDirective {
     el;
     renderer;
@@ -3200,7 +4821,7 @@ class RouteMonitorService {
         this.router.events.subscribe(async (event) => {
             if (event instanceof NavigationEnd) {
                 const url = event.urlAfterRedirects;
-                if (url.startsWith('/') || url.startsWith('/login') || url == '/no-permission') {
+                if (url == '/' || url.startsWith('/login') || url == '/no-permission') {
                     return;
                 }
                 const hasMenu = await this.authService.checkUserMenu(url);
@@ -3327,5 +4948,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AnimatedDigitComponent, AppGlobals, AppStorage, AuthGuard, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendSelectComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, HTTPService, Height, LimitWordsPipe, LineGraphComponent, LoadingService, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, RouteMonitorService, TableHeader, ThemeService, TokenStorage, TranslateKey, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, Width, XLSXHelper, authInterceptor };
+export { AnimatedDigitComponent, AppGlobals, AppStorage, AuthGuard, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendSelectComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, HTTPService, Height, LimitWordsPipe, LineGraphComponent, LoadingService, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, RouteMonitorService, TableHeader, ThemeService, TokenStorage, TranslateKey, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, Width, WorkflowEditorComponent, XLSXHelper, authInterceptor };
 //# sourceMappingURL=brggroup-share-lib.mjs.map