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

package/README.md

@@ -1,9 +1,10 @@
 # @libs-ui/services-grid-layout
 
-Mặt phẳng kéo–thả. Thư viện lo toàn bộ việc **vẽ lưới, kéo thả, đổi kích thước, lồng container**;
-nơi dùng chỉ đưa **component nội dung** và **cây dữ liệu**, thư viện tự gắn component lên từng khối.
+Mặt phẳng kéo–thả. Thư viện lo **toàn bộ** việc vẽ lưới, kéo thả, đổi kích thước, lồng container,
+tay cầm kéo, bộ nút trên khối, viền chế độ sửa, và dọn dẹp khi component chết.
 
-Cùng mô hình với `@libs-ui/services-diagram-draw`: truyền `nodeComponentType`, thư viện `createComponent`.
+Nơi dùng chỉ đưa **cây dữ liệu** và **cách phân giải component nội dung**. Component nội dung của bạn
+chỉ vẽ phần nội dung — không phải tự lo kích thước, không phải tự vẽ viền chế độ sửa.
 
 ## Cài
 
@@ -18,70 +19,162 @@ Lib dùng `angular-gridster2` qua **alias npm** để chạy song song nhiều b
 Nơi dùng đang có `angular-gridster2` bản khác thì **không bị đụng** — hai bản nằm ở hai thư mục
 `node_modules` riêng.
 
+Chạy Jest thì phải map **cả hai** tên, vì package tự khai `name: angular-gridster2`:
+
+```ts
+// jest.config.ts của nơi dùng
+moduleNameMapper: {
+  '^gridster18$': '<rootDir>/../../node_modules/gridster18/fesm2022/angular-gridster2.mjs',
+  '^angular-gridster2$': '<rootDir>/../../node_modules/gridster18/fesm2022/angular-gridster2.mjs',
+}
+```
+
 ## Dùng
 
 ```ts
 @Component({
   imports: [LibsUiGridLayoutCanvasComponent],
   // 🔴 Khai trong providers của CHÍNH component — service theo từng mặt phẳng, không phải root.
-  providers: [LibsUiGridLayoutService, LibsUiGridLayoutTreeService],
-  template: `<libs_ui-services-grid_layout-canvas [node]="root()" (outChange)="save($event)" />`,
+  providers: [LibsUiGridLayoutService],
+  template: `<libs_ui-services-grid_layout-canvas
+    (outChange)="handlerChange($event)"
+    (outRemoveNode)="handlerRemoveNode($event)"
+    (outAddBlockInside)="handlerAddInside($event)"
+    (outToggleType)="handlerToggleType($event)" />`,
 })
-export class MyPageComponent implements OnDestroy {
+export class MyPageComponent {
   private readonly gridLayout = inject(LibsUiGridLayoutService);
 
-  protected readonly root = signal<T_gridLayout_node>(initialLayout());
-
   constructor() {
     this.gridLayout.init({
-      nodeComponentType: MyCardComponent,   // component nội dung của BẠN
-      data: this.root(),
+      data: layoutFromServer(),          // cây khối, thường lấy từ backend
+      getComponentOutlet: resolveNodeComponent,
       mode: E_gridLayout_mode_string.grid,
       isEditMode: true,
-      allowOverlap: false,
     });
   }
+  // KHÔNG cần ngOnDestroy — thư viện tự dọn qua DestroyRef.
+}
+```
+
+**Không truyền `[node]`** — `init()` đã giữ cây. Input `node`/`depth` của canvas chỉ dành cho lưới
+lồng bên trong thư viện.
 
-  ngOnDestroy(): void {
-    this.gridLayout.destroy();   // 🔴 BẮT BUỘC, nếu không là rò rỉ bộ nhớ
+### Phân giải component theo từng khối
+
+Mỗi khối tự quyết định component của nó, đọc từ `node.data` (dữ liệu hình dạng server). Trả
+`Observable` nên `import()` động dùng được ngay — mỗi loại khối là một chunk riêng:
+
+```ts
+export const resolveNodeComponent = (node: T_gridLayout_node): Observable<Type<unknown>> => {
+  switch ((node.data as T_serverElement | undefined)?.type) {
+    case E_serverElement_type_string.chart:
+      return from(import('./chart-card.component').then((c) => c.ChartCardComponent));
+    case E_serverElement_type_string.table:
+      return from(import('./table-card.component').then((c) => c.TableCardComponent));
+    default:
+      return from(import('./sample-card.component').then((c) => c.SampleCardComponent));
   }
-}
+};
 ```
 
-Component nội dung **bắt buộc** khai đủ ba input — thư viện `setInput` đúng ba tên này:
+Khai ở `config.getComponentOutlet` cho cả mặt phẳng, hoặc ở `node.getComponentOutlet` cho riêng một
+khối (khối tự khai thì thắng).
+
+### Component nội dung
+
+Khai đủ **bốn** input — thư viện `setInput` đúng bốn tên này, thiếu một cái là lỗi lúc chạy mà build
+không bắt được:
 
 ```ts
 @Component({ changeDetection: ChangeDetectionStrategy.OnPush, /* … */ })
 export class MyCardComponent {
+  readonly data = input.required<T_myData>();       // = node.data — thường chỉ cần cái này
   readonly node = input.required<T_gridLayout_node>();
   readonly isEditMode = input<boolean>(false);
   readonly depth = input<number>(0);
 }
 ```
 
+Type sẵn có: `T_gridLayout_nodeInputs<TData>`.
+
+## Nút sẵn có bắn event kèm callback
+
+Xoá · gộp · tách · thêm-khối-bên-trong là nút của thư viện. Bấm vào, thư viện **chưa làm gì** — nó
+bắn event mang theo `confirm()`. Nghiệp vụ cần hỏi xác nhận thì mở modal rồi mới gọi; không cần thì
+gọi luôn; không cho phép thì đừng gọi:
+
+```ts
+protected handlerRemoveNode(event: T_gridLayout_actionEvent): void {
+  if (!event.node.children?.length) {
+    event.confirm();                    // khối đơn — xoá luôn
+    return;
+  }
+  this.pendingRemove.set(event);        // khối ghép — hỏi trước, confirm() gọi sau
+}
+
+protected handlerAddInside(event: T_gridLayout_addEvent): void {
+  // confirm nhận khối mới, trả về khối đã tạo kèm id thư viện sinh
+  const added = event.confirm({ cols: 3, rows: 2, data: { type: 'metric' } });
+}
+```
+
+| Output | Khi nào bắn | `confirm()` |
+|---|---|---|
+| `outChange` | người dùng kéo / đổi kích thước — **chỉ** thao tác thật của người dùng | — |
+| `outRemoveNode` | bấm nút xoá | `() => boolean` |
+| `outToggleType` | bấm gộp (khối đơn → container) hoặc tách | `() => boolean` |
+| `outAddBlockInside` | bấm ＋ trên container | `(item) => node \| undefined` |
+
+`outChange` **không** bắn khi chính bạn gọi `addBlock`/`removeBlock`/`compact` — bạn đã biết mình vừa
+làm gì, khỏi phải chống dội.
+
 ## Hai chế độ
 
 | Chế độ | Khối bám lưới | Chồng lên nhau | Dùng khi |
 |---|---|---|---|
-| `luoi` | có | chỉ khi `allowOverlap` bật **và** hai khối khác `layerIndex` | dashboard, bố cục dạng bảng |
-| `tuDo` | không, toạ độ px | tự do | dựng bố cục kiểu canvas |
+| `grid` | có | chỉ khi `allowOverlap` bật **và** hai khối khác `layerIndex` | dashboard, bố cục dạng bảng |
+| `free` | không, toạ độ px | tự do | bố cục kiểu canvas — *engine chưa dựng, hiện vẫn chạy trên lưới* |
 
 ## API
 
-**`LibsUiGridLayoutService`** (một thực thể cho mỗi mặt phẳng)
+**`LibsUiGridLayoutService`** — một thực thể cho mỗi mặt phẳng.
 
 | Thành viên | Việc |
 |---|---|
-| `init(config)` | dựng mặt phẳng; gọi lại sẽ dọn sạch rồi dựng lại |
-| `setEditMode(bat)` | bật/tắt chế độ sửa |
-| `refresh(event?)` | báo cây vừa đổi từ bên ngoài |
-| `destroy()` | dọn mọi component đã dựng — gọi trong `ngOnDestroy` |
+| `init(config)` | dựng mặt phẳng; gọi lại sẽ dọn sạch rồi dựng lại. Tự san phẳng container lồng quá trần |
+| `setEditMode(value)` | bật/tắt chế độ sửa |
+| `setAllowOverlap(value)` | cho phép xếp chồng; tự gán `layerIndex`. KHÔNG dựng lại component nào |
+| `refresh(event?)` | báo cây vừa đổi từ bên ngoài — hiếm khi cần |
+| `addBlock(item, parentId?)` | thêm khối; bỏ `parentId` là thêm ở gốc. Trả khối vừa tạo (kèm `id`) |
+| `removeBlock(id)` | bỏ khối; xoá container là xoá cả ruột |
+| `toContainer(id)` · `toSingle(id)` | gộp thành container / tách về khối đơn — không mất dữ liệu |
+| `compact()` | dồn khối lên, bỏ khoảng trống. Đệ quy vào container |
+| `findBlock(id)` · `findParentBlock(id)` | tra cây |
+| `exportLayout()` | cây hiện tại đã bỏ hàm, `cloneDeep` — gửi thẳng lên backend được |
 | `Root` · `IsEditMode` · `Version` | signal chỉ đọc |
 
-**`LibsUiGridLayoutTreeService`** — thao tác trên cây
+Mọi hàm sửa cây **tự vẽ lại** — không phải gọi `refresh()` theo sau.
+
+**Thư viện tự dọn** qua `DestroyRef` — `destroy()` là `private`, **CẤM** gọi trong `ngOnDestroy`.
+
+**KHÔNG tự đặt `id`** cho khối: `addBlock` sinh bằng `uuid()` và trả về khối vừa tạo. Tự đặt là mời
+trùng id, mà trùng thì `findBlock` trả nhầm khối và cây hỏng im lặng.
+
+`LibsUiGridLayoutTreeService` **cố ý không xuất**: mọi thao tác trên cây đã có trên service với chữ ký
+gọn hơn (không phải truyền `root` — thư viện đang giữ nó). Cấu hình gridster cũng không xuất, xem lý
+do ở mục dưới.
+
+### Lưu và mở lại bố cục
+
+```ts
+UtilsCache.Set(KEY, this.gridLayout.exportLayout(), UtilsCache.CACHE_EXPIRE_NONE);
+// mở lại
+this.gridLayout.init({ data: UtilsCache.Get(KEY) ?? defaultLayout(), getComponentOutlet });
+```
 
-`findById` · `findParent` · `addChild` · `removeById` · `canBecomeContainer` ·
-`flattenOverDepthContainers` · `compact`
+`exportLayout()` đã lược `getComponentOutlet` (hàm không tuần tự hoá được) nên `JSON.stringify` được
+ngay. Mở lại chỉ cần đưa `getComponentOutlet` vào `init` — cây không mang hàm.
 
 ## Vì sao cấu hình gridster lại như vậy
 
@@ -99,6 +192,7 @@ export class MyCardComponent {
 | tay cầm resize ở `0`, không âm | `overflow: hidden` cắt mất nửa tay cầm → kéo mép không ăn |
 | `setGridSize: false` ở lưới lồng | vòng lặp đo–ghi, lưới con co dần về 64×64px |
 | `disableScroll*` ở lưới lồng | khối con bị đẩy ra ngoài container rồi kẹt |
+| `layerIndex` gán vào cây ĐANG VẼ | gán vào `config.data` thì z-index đứng ở 1 — cây đang vẽ là bản clone |
 
 ## Kiểm
 

package/canvas/grid-layout-canvas.component.d.ts

@@ -1,5 +1,5 @@
-import { OnDestroy } from '@angular/core';
-import { T_gridLayout_actionEvent, T_gridLayout_addEvent, T_gridLayout_changeEvent, T_gridLayout_node } from '../interfaces/grid-layout.interface';
+import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
+import { T_gridLayout_actionEvent, T_gridLayout_addEvent, T_gridLayout_changeEvent, T_gridLayout_dropEvent, T_gridLayout_dropGhost, T_gridLayout_node, T_gridLayout_toolbarContext, T_gridLayout_zoomPreset } from '../interfaces/grid-layout.interface';
 import * as i0 from "@angular/core";
 /**
  * Mặt phẳng kéo thả. Đệ quy: khối có `children` thì ruột nó lại là một mặt phẳng nữa.
@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
  * Nơi dùng KHÔNG dựng component này trực tiếp cho từng khối — chỉ đặt MỘT thẻ ở gốc và truyền
  * `nodeComponentType` qua `LibsUiGridLayoutService.init()`. Thư viện tự gắn component cho mọi khối.
  */
-export declare class LibsUiGridLayoutCanvasComponent implements OnDestroy {
+export declare class LibsUiGridLayoutCanvasComponent implements AfterViewInit, OnDestroy {
     /**
      * @internal Chỉ mặt phẳng LỒNG dùng — thư viện tự truyền khi vẽ ruột container.
      *
@@ -17,6 +17,23 @@ export declare class LibsUiGridLayoutCanvasComponent implements OnDestroy {
     readonly node: import("@angular/core").InputSignal<T_gridLayout_node | undefined>;
     /** @internal Chỉ mặt phẳng LỒNG dùng — thư viện tự truyền. */
     readonly depth: import("@angular/core").InputSignal<number>;
+    /**
+     * Ẩn hẳn thanh công cụ mặc định (thêm-vào-trong · gộp/tách · xoá) của MỌI khối.
+     *
+     * Dùng khi sản phẩm gom các hành động đó vào chỗ khác — vd một nút ⋮ nằm trong chính nội dung
+     * khối. Ẩn rồi thì `outRemoveNode` · `outAddBlockInside` · `outToggleType` không còn nguồn phát
+     * từ thư viện; nơi dùng tự gọi `removeBlock` · `addBlock` · `toggleType` của service.
+     */
+    readonly hiddenToolbar: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    /**
+     * Template tự vẽ thanh công cụ, thay cho bộ nút mặc định.
+     *
+     * Nhận context `{ $implicit: node, isContainer, canAddInside, canToggleType }` để nơi dùng vẽ đúng
+     * nút cho từng khối, rồi gọi ngược qua `outRemoveNode` · `outAddBlockInside` · `outToggleType`
+     * bằng chính các hàm trong context. Truyền cả `hiddenToolbar` và `templateToolbar` thì
+     * `hiddenToolbar` thắng — không vẽ gì.
+     */
+    readonly templateToolbar: import("@angular/core").InputSignal<TemplateRef<T_gridLayout_toolbarContext> | undefined>;
     /**
      * Bố cục vừa đổi do NGƯỜI DÙNG kéo hoặc đổi kích thước khối.
      *
@@ -36,12 +53,60 @@ export declare class LibsUiGridLayoutCanvasComponent implements OnDestroy {
     readonly outAddBlockInside: import("@angular/core").OutputEmitterRef<T_gridLayout_addEvent>;
     /** Người dùng bấm nút GỘP/TÁCH. Thư viện chưa làm gì — gọi `event.confirm()` để thực hiện. */
     readonly outToggleType: import("@angular/core").OutputEmitterRef<T_gridLayout_actionEvent>;
+    /** Bật tính năng thu phóng (zoom) canvas. Chỉ áp dụng cho canvas gốc (depth 0). */
+    readonly enableZoom: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    /** Tỷ lệ thu phóng hiện tại (hỗ trợ two-way binding [(zoom)]="myZoom"). */
+    readonly zoom: import("@angular/core").ModelSignal<number | undefined>;
+    /** Giới hạn thu phóng tối thiểu. Mặc định 0.4 (40%). */
+    readonly zoomMin: import("@angular/core").InputSignal<number>;
+    /** Giới hạn thu phóng tối đa. Mặc định 1.5 (150%). */
+    readonly zoomMax: import("@angular/core").InputSignal<number>;
+    /** Bước nhảy thu phóng mỗi lần bấm +/- hoặc lăn chuột. Mặc định 0.05 (5%). */
+    readonly zoomStep: import("@angular/core").InputSignal<number>;
+    /** Chiều rộng chuẩn của canvas stage tính bằng px. Mặc định 1668. */
+    readonly stageWidth: import("@angular/core").InputSignal<number>;
+    /** Chiều cao tối thiểu của canvas stage tính bằng px. Mặc định 937. */
+    readonly stageMinHeight: import("@angular/core").InputSignal<number>;
+    /** Khóa lưu tỷ lệ thu phóng vào localStorage. Mặc định 'ocb_bi_canvas_zoom'. */
+    readonly storageKey: import("@angular/core").InputSignal<string | undefined>;
+    /** Hiển thị thanh dock điều khiển thu phóng nổi ở góc dưới phải. Mặc định true. */
+    readonly showZoomDock: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    /** Tự động vừa màn hình khi tải trang lần đầu nếu khung nhìn nhỏ hơn stageWidth. Mặc định true. */
+    readonly autoFitOnLoad: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    /** Phát ra khi tỷ lệ thu phóng thay đổi. */
+    readonly outZoomChange: import("@angular/core").OutputEmitterRef<number>;
+    /** Bật tính năng kéo thả thẻ từ bên ngoài vào canvas (mặc định true) */
+    readonly enableExternalDrop: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    /** Luôn hiển thị đường kẻ lưới 24 cột */
+    readonly showGridLines: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    /** Mã id của khối đang được chọn */
+    readonly selectedNodeId: import("@angular/core").ModelSignal<string | null | undefined>;
+    /** Phát ra khi thả một thẻ mới từ bên ngoài vào canvas */
+    readonly outDropNode: import("@angular/core").OutputEmitterRef<T_gridLayout_dropEvent>;
+    /** Phát ra khi người dùng click chọn một khối */
+    readonly outSelectNode: import("@angular/core").OutputEmitterRef<T_gridLayout_node>;
+    /** Phát ra khi người dùng bấm nút cấu hình trên thanh công cụ của khối */
+    readonly outConfigNode: import("@angular/core").OutputEmitterRef<T_gridLayout_actionEvent>;
     private readonly gridsterRef;
+    private readonly scrollAreaRef;
+    private readonly zoomDockRef;
     /** mỗi ô một chỗ gắn riêng — cùng thứ tự với `children()` */
     private readonly itemHosts;
+    /** Khung xem trước vị trí thả thẻ từ bên ngoài (snapped ghost preview) */
+    protected readonly dropGhost: import("@angular/core").WritableSignal<T_gridLayout_dropGhost | undefined>;
+    private activeHoveredEl?;
+    private rootGridsterEl?;
+    /** Menu chọn preset thu phóng đang mở hay đóng */
+    protected readonly isMenuOpen: import("@angular/core").WritableSignal<boolean>;
+    /** Các mốc thu phóng định sẵn */
+    protected readonly zoomPresets: Array<T_gridLayout_zoomPreset>;
     /** Sáu chấm của tay cầm kéo — chỉ để `@for` dựng đủ 6 thẻ, giá trị không dùng tới. */
     protected readonly dragBarDots: number[];
     private readonly service;
+    /** Chế độ thu phóng có đang hoạt động trên canvas này không (chỉ root canvas depth 0) */
+    protected readonly isZoomActive: import("@angular/core").Signal<boolean>;
+    protected readonly currentZoom: import("@angular/core").Signal<number>;
+    protected readonly zoomPercent: import("@angular/core").Signal<number>;
     /**
      * Node THẬT của mặt phẳng này.
      *
@@ -55,6 +120,13 @@ export declare class LibsUiGridLayoutCanvasComponent implements OnDestroy {
      */
     protected readonly currentNode: import("@angular/core").Signal<T_gridLayout_node>;
     protected readonly children: import("@angular/core").Signal<T_gridLayout_node[]>;
+    /**
+     * Bối cảnh cho `templateToolbar`, dựng sẵn theo từng khối.
+     *
+     * Dựng ở `computed` chứ không gọi hàm trên template: gọi hàm trong template chạy lại mỗi vòng
+     * dò thay đổi (rule `fe-coding-convention-templates` mục 6).
+     */
+    protected readonly toolbarContexts: import("@angular/core").Signal<T_gridLayout_toolbarContext[]>;
     protected readonly isNestedCanvas: import("@angular/core").Signal<boolean>;
     /** trần lồng container — khối đã chạm trần thì không cho chuyển thành container */
     protected readonly maxContainerDepth: import("@angular/core").Signal<number>;
@@ -70,11 +142,28 @@ export declare class LibsUiGridLayoutCanvasComponent implements OnDestroy {
     protected readonly isEditMode: import("@angular/core").Signal<boolean>;
     protected readonly gridOptions: import("@angular/core").Signal<import("angular-gridster2").GridsterConfig>;
     constructor();
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Vẽ lại lưới — gọi khi khung ngoài đổi kích thước hoặc cây vừa đổi diện rộng. */
     get FunctionControl(): {
         veLaiLuoi: () => void | undefined;
+        zoomIn: () => void;
+        zoomOut: () => void;
+        resetZoom: () => void;
+        fitToScreen: () => void;
+        setZoom: (val: number) => void;
     };
+    protected handlerZoomIn(): void;
+    protected handlerZoomOut(): void;
+    protected handlerResetZoom(): void;
+    protected handlerFitScreen(): void;
+    protected handlerToggleMenu(): void;
+    protected handlerSelectPreset(value: number): void;
+    protected isCurrentPreset(value: number): boolean;
+    private syncZoomOut;
+    protected handlerWheel(event: WheelEvent): void;
+    protected handlerDocumentKeyDown(event: KeyboardEvent): void;
+    protected handlerDocumentClick(event: MouseEvent): void;
     protected handlerTrackNode(_index: number, item: T_gridLayout_node): string;
     /**
      * 🔴 Chặn `mousedown` nổi lên lưới CHA khi thao tác trong lưới con.
@@ -94,6 +183,17 @@ export declare class LibsUiGridLayoutCanvasComponent implements OnDestroy {
     protected handlerRemove(event: Event, node: T_gridLayout_node): void;
     protected handlerAddInside(event: Event, node: T_gridLayout_node): void;
     protected handlerToggleType(event: Event, node: T_gridLayout_node): void;
+    /**
+     * Chặn cú bấm trong thanh công cụ nổi lên gridster.
+     *
+     * Chỉ `stopPropagation`, KHÔNG `preventDefault`: nút bên trong template của nơi dùng vẫn cần
+     * hành vi mặc định của mình (mở dropdown, focus…).
+     */
+    protected handlerStopEvent(event: Event): void;
+    /** Phát `outAddBlockInside` — dùng chung cho nút mặc định và `templateToolbar`. */
+    private emitAddInside;
+    /** Phát `outToggleType` — dùng chung cho nút mặc định và `templateToolbar`. */
+    private emitToggleType;
     /** khối này có phải container không (có khối con) */
     protected isContainer(item: T_gridLayout_node): boolean;
     /** container đã chạm trần lồng thì không cho thêm khối vào trong nữa */
@@ -102,6 +202,13 @@ export declare class LibsUiGridLayoutCanvasComponent implements OnDestroy {
     protected canToggleType(item: T_gridLayout_node): boolean;
     protected handlerBlockParentDrag(event: Event): void;
     protected handlerMouseDownTrongLuoi(event: Event): void;
+    protected handlerSelectNode(node: T_gridLayout_node, event?: MouseEvent): void;
+    protected handlerConfig(event: Event, node: T_gridLayout_node): void;
+    protected handlerDragOver(event: DragEvent): void;
+    protected handlerDragLeave(event: DragEvent): void;
+    protected handlerDrop(event: DragEvent): void;
+    private cleanupHoveredGroup;
+    private cleanupDragGrid;
     static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiGridLayoutCanvasComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiGridLayoutCanvasComponent, "libs_ui-services-grid_layout-canvas", never, { "node": { "alias": "node"; "required": false; "isSignal": true; }; "depth": { "alias": "depth"; "required": false; "isSignal": true; }; }, { "outChange": "outChange"; "outRemoveNode": "outRemoveNode"; "outAddBlockInside": "outAddBlockInside"; "outToggleType": "outToggleType"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiGridLayoutCanvasComponent, "libs_ui-services-grid_layout-canvas", never, { "node": { "alias": "node"; "required": false; "isSignal": true; }; "depth": { "alias": "depth"; "required": false; "isSignal": true; }; "hiddenToolbar": { "alias": "hiddenToolbar"; "required": false; "isSignal": true; }; "templateToolbar": { "alias": "templateToolbar"; "required": false; "isSignal": true; }; "enableZoom": { "alias": "enableZoom"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "zoomMin": { "alias": "zoomMin"; "required": false; "isSignal": true; }; "zoomMax": { "alias": "zoomMax"; "required": false; "isSignal": true; }; "zoomStep": { "alias": "zoomStep"; "required": false; "isSignal": true; }; "stageWidth": { "alias": "stageWidth"; "required": false; "isSignal": true; }; "stageMinHeight": { "alias": "stageMinHeight"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "showZoomDock": { "alias": "showZoomDock"; "required": false; "isSignal": true; }; "autoFitOnLoad": { "alias": "autoFitOnLoad"; "required": false; "isSignal": true; }; "enableExternalDrop": { "alias": "enableExternalDrop"; "required": false; "isSignal": true; }; "showGridLines": { "alias": "showGridLines"; "required": false; "isSignal": true; }; "selectedNodeId": { "alias": "selectedNodeId"; "required": false; "isSignal": true; }; }, { "outChange": "outChange"; "outRemoveNode": "outRemoveNode"; "outAddBlockInside": "outAddBlockInside"; "outToggleType": "outToggleType"; "zoom": "zoomChange"; "outZoomChange": "outZoomChange"; "selectedNodeId": "selectedNodeIdChange"; "outDropNode": "outDropNode"; "outSelectNode": "outSelectNode"; "outConfigNode": "outConfigNode"; }, never, never, true, never>;
 }

package/defines/collision.define.d.ts

@@ -0,0 +1,31 @@
+import { T_gridLayout_dropGhost, T_gridLayout_externalDragPayload, T_gridLayout_node } from '../interfaces/grid-layout.interface';
+/**
+ * Checks whether the rectangular region [x, x + cols) x [y, y + rows)
+ * is completely vacant among existing items.
+ */
+export declare const isRegionFree: (children: Array<T_gridLayout_node>, x: number, y: number, cols: number, rows: number, ignoredId?: string) => boolean;
+/**
+ * Computes optimal (col, row) inside a group container.
+ * Snaps flush to adjacent card right edge if slot is vacant.
+ */
+export declare const findSnapPositionInsideGroup: (children: Array<T_gridLayout_node>, rawCol: number, rawRow: number, innerCols: number, innerRows: number, totalCols?: number) => {
+    col: number;
+    row: number;
+};
+/**
+ * Resolves vertical collisions when inserting a new card at (newNode.x, newNode.y).
+ * Any existing card that horizontally overlaps and whose vertical span overlaps
+ * or is below the insertion point is pushed down so there is no overlap.
+ */
+export declare const resolveCollisionsAndInsert: (children: Array<T_gridLayout_node>, newNode: T_gridLayout_node) => void;
+export declare function parseDropPayload<T>(activePayload: T | undefined, dataTransfer: DataTransfer | null): T | undefined;
+interface I_hoveredGroup {
+    groupNode: T_gridLayout_node;
+    groupGridster: HTMLElement;
+}
+export declare const findHoveredGroup: (elements: Element[], canvasContainer: HTMLElement, root: T_gridLayout_node) => I_hoveredGroup | undefined;
+/**
+ * Calculates snapped spatial coordinates and pixel dimensions for drop ghost preview box.
+ */
+export declare const calculateDropGhost: (event: DragEvent, canvasContainer: HTMLElement, root: T_gridLayout_node, payload: T_gridLayout_externalDragPayload, totalCols?: number) => T_gridLayout_dropGhost | undefined;
+export {};