@libs-ui/services-grid-layout 0.2.357-21 → 0.2.357-22

package/fesm2022/libs-ui-services-grid-layout.mjs

@@ -384,6 +384,79 @@ const calculateDropGhost = (event, canvasContainer, root, payload, totalCols = 2
         hoveredGridster: rootGridster ?? undefined,
     };
 };
+/** Tìm khối theo id trong cây, đi sâu vào mọi container. */
+const findNodeRecursive = (root, id) => {
+    if (root.id === id) {
+        return root;
+    }
+    for (const child of root.children ?? []) {
+        const found = findNodeRecursive(child, id);
+        if (found) {
+            return found;
+        }
+    }
+    return undefined;
+};
+/** Tìm khối CHA trực tiếp của một khối, đi sâu vào mọi container. */
+const findParentRecursive = (root, id) => {
+    for (const child of root.children ?? []) {
+        if (child.id === id) {
+            return root;
+        }
+        const found = findParentRecursive(child, id);
+        if (found) {
+            return found;
+        }
+    }
+    return undefined;
+};
+/**
+ * Thả khối vào đúng ô mà ghost đang chỉ, đẩy các khối va chạm xuống dưới.
+ *
+ * Ghost đang nằm trong một container (`isInsideGroup`) thì thả vào ruột container đó; không tìm thấy
+ * container thì trả `false` chứ KHÔNG rơi về lưới gốc — thả nhầm cấp khó nhận ra hơn là không thả.
+ */
+const dropNodeAtCoordinates = (root, ghost, newNode) => {
+    const nodeToAdd = {
+        ...newNode,
+        id: newNode.id ?? uuid(),
+        x: ghost.col,
+        y: ghost.row,
+        cols: ghost.cols,
+        rows: ghost.rows,
+    };
+    if (ghost.isInsideGroup && ghost.targetParentId) {
+        const parentNode = findNodeRecursive(root, ghost.targetParentId);
+        if (!parentNode) {
+            return false;
+        }
+        parentNode.children = parentNode.children ?? [];
+        resolveCollisionsAndInsert(parentNode.children, nodeToAdd);
+        return true;
+    }
+    root.children = root.children ?? [];
+    resolveCollisionsAndInsert(root.children, nodeToAdd);
+    return true;
+};
+/** Khối có phải CONTAINER không — tức có khối con bên trong. */
+const isContainerNode = (node) => (node.children?.length ?? 0) > 0;
+/** Khối có nằm LỒNG bên trong một container không (không phải con trực tiếp của gốc). */
+const isNodeNestedInside = (root, nodeId) => {
+    if (!root?.children) {
+        return false;
+    }
+    return !root.children.some((child) => child.id === nodeId);
+};
+/**
+ * Có được đổi khối đơn ↔ container không.
+ *
+ * 🔴 Ba hàm cờ này PHẢI là nguồn duy nhất cho cả thanh công cụ của thư viện lẫn menu do nơi dùng tự
+ * dựng. Trước đây nơi dùng phải chép lại quy tắc để dựng menu trước lúc render, và hai bản lệch nhau
+ * mỗi khi thư viện đổi trần lồng cấp mà không có gì báo.
+ */
+const canToggleTypeNode = (root, node) => isContainerNode(node) || !isNodeNestedInside(root, node.id);
+/** Có được thêm khối vào BÊN TRONG khối này không. */
+const canAddInsideNode = (root, node) => isContainerNode(node) && !isNodeNestedInside(root, node.id);
 
 /**
  * Thao tác trên cây khối: tìm, thêm, xoá, dồn khít, chặn lồng cấp quá sâu.
@@ -598,6 +671,13 @@ class LibsUiGridLayoutService {
     treeService = new LibsUiGridLayoutTreeService();
     /** Lượt tải component đang chờ, theo id khối — để huỷ khi khối bị gỡ giữa chừng. */
     pendingLoads = new Map();
+    /**
+     * Bộ theo dõi bề rộng của từng lưới LỒNG, để ngắt khi service bị huỷ.
+     *
+     * 🔴 Giữ tham chiếu là BẮT BUỘC: `ResizeObserver` không tự tắt theo vòng đời component. Không dọn
+     * thì mỗi lần nạp lại bố cục (đổi tab) lại chồng thêm một bộ, và chúng vẫn chạy trên DOM đã gỡ.
+     */
+    nestedResizeObservers = new Set();
     constructor() {
         // 🔴 Service khai trong `providers` của component nên Angular huỷ nó cùng component — thư viện
         // tự dọn ở đây, nơi dùng KHÔNG phải gọi `destroy()` trong `ngOnDestroy` (người dùng chốt
@@ -721,6 +801,8 @@ class LibsUiGridLayoutService {
             scale: this.zoomLevel(),
             ...(config.cols ? { minCols: config.cols, maxCols: config.cols, maxItemCols: config.cols } : {}),
             ...(config.rowHeight && depth === 0 ? { fixedRowHeight: config.rowHeight } : {}),
+            ...(depth === 0 && config.minRows !== undefined ? { minRows: config.minRows } : {}),
+            ...(depth > 0 && config.nestedMinRows !== undefined ? { minRows: config.nestedMinRows } : {}),
             // Khe và chiều cao hàng khác nhau theo cấp: lưới trang thoáng, lưới lồng khít.
             ...(depth === 0 && config.margin !== undefined ? { margin: config.margin } : {}),
             ...(depth > 0 && config.nestedMargin !== undefined ? { margin: config.nestedMargin } : {}),
@@ -744,6 +826,7 @@ class LibsUiGridLayoutService {
             // 28/08/2026: "bật chồng khối nhưng khi kéo thì các khối vẫn di chuyển theo").
             // Cho chồng thì phải TẮT đẩy khối, nếu không khối bị dạt đi trước khi kịp đè lên nhau.
             ...(canOverlap ? { pushItems: false, pushResizeItems: false, swap: false, swapWhileDragging: false } : {}),
+            ...this.buildNestedResizeHooks(base, depth),
             itemChangeCallback: (item) => {
                 // 🔴 Khối vừa thao tác phải lên LỚP TRÊN CÙNG.
                 // `layerIndex` gán một lần theo thứ tự cây lúc khởi tạo, nên khối kéo lên chỉ nổi TRONG LÚC
@@ -758,6 +841,60 @@ class LibsUiGridLayoutService {
             },
         };
     }
+    /**
+     * Bắt lưới LỒNG đo lại NGAY khi khung chứa nó đổi bề rộng — dùng lúc người dùng kéo mép khối cha.
+     *
+     * Gridster có sẵn đường tự đo (`resize$`), nhưng luồng đó là `switchMap(() => timer(100))`: mỗi
+     * lần phát lại huỷ timer trước, mà kéo chuột bắn dày hơn 100ms nên timer không bao giờ tới đích.
+     * Đo được (11/09/2026): kéo mép nhóm thì lưới con co theo cha từng khung hình (234 → 384 px) còn
+     * THẺ con đứng im ở 106 px suốt cú kéo, chỉ nhảy đúng sau khi thả tay.
+     *
+     * Giữ CẢ HAI đường: `itemResizeCallback` bắn đồng bộ ngay khi gridster ghi bề rộng mới lên khối
+     * (sớm hơn `ResizeObserver` một khung hình) lo độ tức thì; `ResizeObserver` lo những lần khung đổi
+     * vì lý do khác — đổi zoom, thu gọn cột bên trái.
+     *
+     * Tắt bằng `config.autoResizeNestedGrids: false`.
+     */
+    buildNestedResizeHooks(base, depth) {
+        if (this.config?.autoResizeNestedGrids === false) {
+            return {};
+        }
+        const gocItemResize = base.itemResizeCallback;
+        const gocInit = base.initCallback;
+        return {
+            itemResizeCallback: (item, itemComponent) => {
+                gocItemResize?.(item, itemComponent);
+                const el = itemComponent?.el;
+                el?.querySelectorAll('gridster').forEach((nested) => this.resizeGridsterElement(nested));
+            },
+            ...(depth > 0
+                ? { initCallback: (gridster) => this.registerNestedGrid(gridster, gocInit) }
+                : {}),
+        };
+    }
+    /** Gọi `resize()` của một thẻ `<gridster>` qua chính instance mà nó tự gắn lên phần tử. */
+    resizeGridsterElement(nested) {
+        const giuInstance = nested;
+        giuInstance.__gridsterInstance?.options?.api?.resize?.();
+    }
+    /**
+     * Gắn instance lên chính phần tử `<gridster>` rồi theo dõi bề rộng của nó.
+     *
+     * Phải gắn ngược lên DOM vì `itemResizeCallback` của khối CHA chỉ cầm được `HTMLElement`, không có
+     * đường nào khác đi từ đó về instance của lưới lồng bên trong.
+     */
+    registerNestedGrid(gridster, goc) {
+        goc?.(gridster);
+        const instance = gridster;
+        const el = instance?.el;
+        if (!el || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        el.__gridsterInstance = instance;
+        const theoDoi = new ResizeObserver(() => instance?.options?.api?.resize?.());
+        theoDoi.observe(el);
+        this.nestedResizeObservers.add(theoDoi);
+    }
     /**
      *
      * Gắn component của nơi dùng lên một khối.
@@ -818,8 +955,12 @@ class LibsUiGridLayoutService {
         for (const ref of this.componentRefs.values()) {
             ref.destroy();
         }
+        for (const observer of this.nestedResizeObservers) {
+            observer.disconnect();
+        }
         this.pendingLoads.clear();
         this.componentRefs.clear();
+        this.nestedResizeObservers.clear();
         this.config = undefined;
     }
     // ─────────────────────────────────────────────────────────────────────────────────────────
@@ -981,8 +1122,67 @@ class LibsUiGridLayoutService {
         }
         return done;
     }
+    /**
+     * Số cột thật của lưới cấp trang.
+     *
+     * 🔴 Mặc định phải TRÙNG `minCols/maxCols` của `gridLayoutRootConfig()`. Trước đây chỗ này trả 24
+     * trong khi lưới vẽ 12: nơi dùng không truyền `cols` thì va chạm, `toContainer` và `compact` tính
+     * theo 24 cột còn màn hình chỉ có 12 — khối rơi ra ngoài mép phải mà không ai hiểu vì sao.
+     */
     get totalColumns() {
-        return this.config?.cols ?? 24;
+        return this.config?.cols ?? gridLayoutRootConfig().maxCols ?? 12;
+    }
+    /**
+     * Đổi số cột / số hàng của một khối rồi vẽ lại.
+     *
+     * Kéo `cols` rộng quá mép phải thì dịch khối sang trái cho vừa, thay vì để nó tràn ra ngoài lưới.
+     */
+    resizeBlock(id, size) {
+        const node = this.findBlock(id);
+        if (!node) {
+            return false;
+        }
+        if (size.cols !== undefined) {
+            node.cols = size.cols;
+            if (node.x + size.cols > this.totalColumns) {
+                node.x = Math.max(0, this.totalColumns - size.cols);
+            }
+        }
+        if (size.rows !== undefined) {
+            node.rows = size.rows;
+        }
+        this.refresh();
+        return true;
+    }
+    /**
+     * Nhân bản một khối — đặt kế bên phải nếu còn chỗ, không thì xuống dòng dưới.
+     *
+     * `transformData` để nơi dùng đổi phần dữ liệu riêng của mình (vd nối thêm "(Bản sao)" vào tiêu
+     * đề); thư viện không tự đoán trường nào là tiêu đề.
+     */
+    duplicateBlock(id, transformData) {
+        const root = this.rootNode();
+        const node = root ? findNodeRecursive(root, id) : undefined;
+        if (!root || !node) {
+            return undefined;
+        }
+        const parent = findParentRecursive(root, id);
+        const isNested = Boolean(parent && parent.id !== root.id);
+        const clonedData = cloneDeep(node.data);
+        let targetX = node.x + node.cols;
+        let targetY = node.y;
+        if (targetX + node.cols > this.totalColumns) {
+            targetX = 0;
+            targetY = node.y + node.rows;
+        }
+        return this.addBlock({
+            x: targetX,
+            y: targetY,
+            cols: node.cols,
+            rows: node.rows,
+            data: transformData ? transformData(clonedData) : clonedData,
+            getComponentOutlet: node.getComponentOutlet,
+        }, isNested ? parent?.id : undefined);
     }
     /** Biến khối đơn thành CONTAINER — nội dung cũ thành khối con đầu tiên, không mất dữ liệu. */
     toContainer(id) {
@@ -1363,6 +1563,9 @@ class LibsUiGridLayoutCanvasComponent {
                 this.service.FunctionsControl.setZoom(val, this.storageKey());
                 this.syncZoomOut();
             },
+            // Vùng cuộn của mặt phẳng — nơi dùng cần nó để tự cuộn tới một khối, hoặc đo toạ độ khi kéo.
+            // Không mở ở đây thì nơi dùng phải dò bằng tên lớp CSS nội bộ, và tên đó đổi lúc nào không hay.
+            scrollArea: () => this.scrollAreaRef()?.nativeElement,
         };
     }
     handlerZoomIn() {
@@ -1684,6 +1887,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+/** Lớp CSS bật ô li của một lưới trong lúc người dùng đang kéo khối vào. */
+const LOP_HIEN_O_LI = 'display-grid';
+/**
+ * Giữ trạng thái một lượt kéo khối từ palette bên ngoài vào mặt phẳng.
+ *
+ * Việc nó lo: bật ô li của lưới đang được kéo tới (lưới gốc, và lưới của container khi con trỏ đi
+ * vào trong), tắt đúng lúc, và trả về ghost để nơi dùng vẽ khung xem trước.
+ *
+ * 🔴 Tự bật/tắt ô li bằng tay ở nơi dùng là chỗ rất dễ sót: kéo ra khỏi container rồi mà quên tắt
+ * thì ô li của nó nằm lại trên màn, kéo sang lưới khác lại chồng thêm một lớp nữa.
+ */
+class LibsUiGridLayoutDragController {
+    payload;
+    hoveredElement;
+    rootGridsterElement;
+    /** Payload của khối đang được kéo; `undefined` khi không có lượt kéo nào. */
+    get ActivePayload() {
+        return this.payload;
+    }
+    /** Gọi ở `dragstart` của thẻ trong palette. */
+    onDragStart(payload) {
+        this.payload = payload;
+    }
+    /** Gọi ở `dragend` — dọn sạch mọi ô li đang bật. */
+    onDragEnd(container) {
+        this.payload = undefined;
+        this.cleanupAll(container);
+    }
+    /** Tắt ô li của container đang hover. */
+    cleanupHoveredGroup() {
+        if (!this.hoveredElement) {
+            return;
+        }
+        this.hoveredElement.classList.remove(LOP_HIEN_O_LI);
+        this.hoveredElement = undefined;
+    }
+    /** Tắt ô li của lưới gốc, và quét sạch lớp còn sót trong khung chứa. */
+    cleanupRootGrid(container) {
+        if (this.rootGridsterElement) {
+            this.rootGridsterElement.classList.remove(LOP_HIEN_O_LI);
+            this.rootGridsterElement = undefined;
+        }
+        container?.querySelectorAll(`gridster.${LOP_HIEN_O_LI}`).forEach((el) => el.classList.remove(LOP_HIEN_O_LI));
+    }
+    /** Tắt toàn bộ ô li đang bật. */
+    cleanupAll(container) {
+        this.cleanupHoveredGroup();
+        this.cleanupRootGrid(container);
+    }
+    /**
+     * Gọi ở `dragover` của khung chứa mặt phẳng. Trả ghost để nơi dùng vẽ khung xem trước, đồng thời
+     * tự bật ô li của lưới đang được kéo tới.
+     */
+    onDragOver(event, container, root, totalCols) {
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+        if (!container || !root || !this.payload) {
+            return undefined;
+        }
+        this.showRootGrid(container);
+        const ghost = calculateDropGhost(event, container, root, this.payload, totalCols);
+        if (!ghost?.isInsideGroup || !ghost.hoveredGridster) {
+            this.cleanupHoveredGroup();
+            return ghost;
+        }
+        if (this.hoveredElement !== ghost.hoveredGridster) {
+            this.cleanupHoveredGroup();
+            ghost.hoveredGridster.classList.add(LOP_HIEN_O_LI);
+            this.hoveredElement = ghost.hoveredGridster;
+        }
+        return ghost;
+    }
+    /** Bật ô li của lưới CẤP TRANG trong suốt lượt kéo, tắt lưới cũ nếu khung chứa đã đổi. */
+    showRootGrid(container) {
+        const rootGridster = container.querySelector('gridster') ?? undefined;
+        if (!rootGridster) {
+            return;
+        }
+        if (this.rootGridsterElement && this.rootGridsterElement !== rootGridster) {
+            this.rootGridsterElement.classList.remove(LOP_HIEN_O_LI);
+        }
+        rootGridster.classList.add(LOP_HIEN_O_LI);
+        this.rootGridsterElement = rootGridster;
+    }
+}
+
 // Bề mặt CÔNG KHAI — chỉ những gì nơi dùng thật sự cần.
 //
 // `LibsUiGridLayoutTreeService` CỐ Ý không xuất: mọi thao tác trên cây đã có mặt trên
@@ -1695,5 +1986,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { LibsUiGridLayoutCanvasComponent, LibsUiGridLayoutService, calculateDropGhost, findHoveredGroup, findSnapPositionInsideGroup, isRegionFree, parseDropPayload, resolveCollisionsAndInsert };
+export { LibsUiGridLayoutCanvasComponent, LibsUiGridLayoutDragController, LibsUiGridLayoutService, calculateDropGhost, canAddInsideNode, canToggleTypeNode, dropNodeAtCoordinates, findHoveredGroup, findNodeRecursive, findParentRecursive, findSnapPositionInsideGroup, isContainerNode, isNodeNestedInside, isRegionFree, parseDropPayload, resolveCollisionsAndInsert };
 //# sourceMappingURL=libs-ui-services-grid-layout.mjs.map