@sankhyalabs/core 5.20.0-dev.1 → 5.20.0-dev.10

package/src/utils/OverflowWatcher/index.ts

@@ -0,0 +1,151 @@
+import { JSUtils } from "../JSUtils.js";
+import { OverflowDirection } from "./types/overflow-direction.js"
+import { OnOverflowCallBack } from "./types/overflow-callback.js"
+
+export * from "./types/overflow-direction.js";
+export * from "./types/overflow-callback.js";
+
+export default class OverflowWatcher {
+    private _onResize:OnOverflowCallBack;
+    private _resizeObserver:ResizeObserver;
+    private _lastContentRect:DOMRectReadOnly|undefined = undefined;
+    private _scrollDirection = OverflowDirection.HORIZONTAL;
+    private _propSize:string;
+    private _hiddenItems:Element[] = [];
+    private _deltaSize:number;
+
+    /**
+     * Cria uma instancia do OverflowWatcher 
+     * 
+     * @param element - Elemento HTML que o overflow será observado.
+     * @param callback - Função que sera chamada quando ocorrer overflow no elemento.
+     * @param overFlowDirection - Indica direção que o overflow será monitorado.
+     * @param deltaSize - Variação de tamanho que será considerada como overflow.
+     */ 
+    constructor(element:HTMLElement, 
+                callback:OnOverflowCallBack, 
+                overFlowDirection:OverflowDirection = OverflowDirection.HORIZONTAL,
+                deltaSize:number = 10){
+        this._onResize = callback;
+        this._scrollDirection = overFlowDirection;
+        this._resizeObserver = new ResizeObserver(JSUtils.debounce((entries: ResizeObserverEntry[]) => this.handleResize(entries), 200));
+        this._resizeObserver.observe(element);  
+        this._propSize = this.getPropSizeByDirection();   
+        this._deltaSize = deltaSize;   
+    }
+
+    public destroy(){
+        this._resizeObserver.disconnect();
+    }
+
+    private handleResize(entries: ResizeObserverEntry[]){
+
+        if(!entries || entries.length === 0){
+            return;
+        }
+
+        const resizeItem = entries[0];
+        const contentRect:any = resizeItem.contentRect;
+
+        if(this.isChangedSize(contentRect)){
+            const children:Element[] = Array.from(resizeItem.target.children);
+            this.proccessElements(contentRect[this._propSize], children);
+            this._lastContentRect = contentRect;
+        }
+    }
+
+    private isChangedSize(newContentRect:DOMRectReadOnly):boolean{
+        if(this._lastContentRect == undefined){
+            return true;
+        }
+        return Math.abs((newContentRect as any)[this._propSize] - (this._lastContentRect as any)[this._propSize]) >= this._deltaSize;
+    }
+
+
+    private getPropSizeByDirection():string{
+        if(OverflowDirection.HORIZONTAL === this._scrollDirection){
+            return "width"
+        }
+
+        return "height";
+    }
+
+    private proccessElements(elementSize:number, children:Element[]){
+
+        if(children.length === 0){
+            return;
+        }
+
+        const childrenSize = this.calcChildrenSize(children);
+        
+        let diff = Number((elementSize - childrenSize).toFixed(4));
+        
+        if(diff > 0){
+            this.proccessElementsWithoutOverFlow(diff);
+            return;
+        }
+
+        this.proccessElementsOverFlow(children, diff);
+    }
+
+    private proccessElementsWithoutOverFlow(diff:number){
+        this._hiddenItems.forEach((item:any) => {
+                
+            if(item.getBoundingClientRect().width < diff){
+                this._hiddenItems.pop();
+            }
+        
+        });
+
+        this._onResize(this._hiddenItems);
+    }
+
+    private proccessElementsOverFlow(children:Element[], diff:number){
+        const elementsOverflow = [];
+        let sumRemovedItems = 0;
+
+        while(elementsOverflow.length < children.length && sumRemovedItems < (diff * -1) ) {
+            const itemToRemove = children.pop();
+            
+            if(itemToRemove != undefined && (itemToRemove as any).style.display === 'none'){
+                continue;
+            }
+
+            if(itemToRemove != undefined){
+                elementsOverflow.push(itemToRemove);
+                sumRemovedItems += (itemToRemove.getBoundingClientRect() as any)[this._propSize];
+            }
+        }
+
+        
+        this._hiddenItems = elementsOverflow;
+        this._onResize(elementsOverflow);
+
+    }
+
+    private calcChildrenSize(children:Element[]):number{
+        let sumChildren = 0;
+
+        Array.from(children).forEach(el => {
+            sumChildren += (el.getBoundingClientRect() as any)[this._propSize];
+            sumChildren += this.calcMarginSize(el);
+        });
+
+        if(sumChildren > 0){
+            sumChildren += this._deltaSize;
+        }
+
+        return sumChildren;
+    }
+
+    private calcMarginSize(el:Element){
+        const computedStyle = getComputedStyle(el);
+
+        if(OverflowDirection.HORIZONTAL === this._scrollDirection){            
+           return (parseInt(computedStyle.marginLeft || '0') + parseInt(computedStyle.marginRight || '0'));
+        }
+
+        return (parseInt(computedStyle.marginTop || '0') + parseInt(computedStyle.marginBottom || '0'));
+    }
+
+}

package/src/utils/OverflowWatcher/types/overflow-callback.ts

@@ -0,0 +1,6 @@
+/**
+ * Callback que será chamado quando o overflow de um elemento for alterado.
+ * 
+ * @param elementsOverFlow - Conjunto de elementos filhos que estão causando overflow no elemento pai.
+ */
+export type OnOverflowCallBack = (elementsOverFlow:Array<Element>) => void;

package/src/utils/OverflowWatcher/types/overflow-direction.ts

@@ -0,0 +1,7 @@
+/**
+ * Define em qual direção o overflow será observado
+ */
+export enum OverflowDirection {
+    'VERTICAL',
+    'HORIZONTAL'
+}

package/test/util/OverflowWatcher.spec.ts

@@ -0,0 +1,118 @@
+import OverFlowWatcher, { OnOverflowCallBack, OverflowDirection } from '../../src/utils/OverflowWatcher';
+
+describe('OverflowWatcher', function () {
+
+    let element: HTMLElement;
+    let callbackHorizontalDirection: OnOverflowCallBack;
+    let watcherHorizontalDirection: OverFlowWatcher;
+    let callbackVerticalDirection: OnOverflowCallBack;
+    let watcherVerticallDirection: OverFlowWatcher;
+    let child1:HTMLDivElement;
+    let child2:HTMLDivElement;
+
+    beforeEach(() => {
+        
+        global.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn(),
+        }))
+        
+        element = document.createElement('div');
+
+        //Horizontal
+        callbackHorizontalDirection = jest.fn();
+        watcherHorizontalDirection = new OverFlowWatcher(element, callbackHorizontalDirection);
+
+
+        //Vertical
+        callbackVerticalDirection = jest.fn();
+        watcherVerticallDirection = new OverFlowWatcher(element, callbackVerticalDirection, OverflowDirection.VERTICAL);
+
+        child1 = document.createElement('div');
+        child2 = document.createElement('div');
+        
+        child1.style.width = '50px';
+        child2.style.width = '100px';
+        child1.style.height = '50px';
+        child2.style.height = '100px';
+
+        //TODO: No futuro utilizar JSDOM para não precisar fazer mock dessas coisas
+        child1['getBoundingClientRect'] = () => {            
+            return  {
+                width: 50,
+                height: 50,
+            } as DOMRect;
+        }
+        
+        child2['getBoundingClientRect'] = () => {            
+            return  {
+                width: 100,
+                height: 100,
+            } as DOMRect;
+        }
+        
+        element.appendChild(child1);
+        element.appendChild(child2);
+    });
+
+    afterEach(() => {
+        watcherHorizontalDirection.destroy();
+        watcherVerticallDirection.destroy();
+    });
+
+    test('constructor initializes properties correctly', () => {
+        expect(watcherHorizontalDirection['_onResize']).toBe(callbackHorizontalDirection);
+        expect(watcherHorizontalDirection['_scrollDirection']).toBe(OverflowDirection.HORIZONTAL);
+        expect(watcherHorizontalDirection['_deltaSize']).toBe(10);
+    });
+
+   test('handleResize horizontal calls callback with hidden items', () => {
+        const entries: any[] = [{
+          contentRect: {
+            width: 120
+          },
+          target: element
+        }];
+    
+        watcherHorizontalDirection['handleResize'](entries);
+    
+        expect(callbackHorizontalDirection).toHaveBeenCalledWith([child2]);
+        
+        entries[0].contentRect.width = 100;
+        watcherHorizontalDirection['handleResize'](entries);
+
+        expect(callbackHorizontalDirection).toHaveBeenCalledWith([child2]);
+    });
+    
+    test('handleResize vertical calls callback with hidden items', () => {
+        const entries: any[] = [{
+          contentRect: {
+            height: 120
+          },
+          target: element
+        }];
+    
+        watcherVerticallDirection['handleResize'](entries);
+    
+        expect(callbackVerticalDirection).toHaveBeenCalledWith([child2]);
+    });
+
+    test('isChangedSize returns true if no previous size', () => {
+        const newContentRect: DOMRectReadOnly = { width: 100 } as DOMRectReadOnly;
+        watcherHorizontalDirection['_lastContentRect'] = undefined;
+    
+        const result = watcherHorizontalDirection['isChangedSize'](newContentRect);
+    
+        expect(result).toBe(true);
+    });
+
+    test('prevent resize without entries', () => {
+        const entries: any[] = [];
+      
+          watcherHorizontalDirection['handleResize'](entries);
+      
+          expect(callbackHorizontalDirection).toHaveBeenCalledTimes(0);
+    });
+    
+});

package/.docs/.nojekyll

@@ -1 +0,0 @@
-TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

package/.docs/enums/Action.md

@@ -1,305 +0,0 @@
-[@sankhyalabs/core](../README.md) / [Exports](../modules.md) / Action
-
-# Enumeration: Action
-
-## Table of contents
-
-### Enumeration Members
-
-- [CHANGE\_REDONE](Action.md#change_redone)
-- [CHANGE\_UNDONE](Action.md#change_undone)
-- [CHANGING\_DATA](Action.md#changing_data)
-- [CHILD\_CHANGED](Action.md#child_changed)
-- [DATA\_CHANGED](Action.md#data_changed)
-- [DATA\_LOADED](Action.md#data_loaded)
-- [DATA\_RESOLVED](Action.md#data_resolved)
-- [DATA\_SAVED](Action.md#data_saved)
-- [EDITION\_CANCELED](Action.md#edition_canceled)
-- [FIELD\_INVALIDATED](Action.md#field_invalidated)
-- [INVALIDATE\_CLEAN](Action.md#invalidate_clean)
-- [LOADING\_DATA](Action.md#loading_data)
-- [LOADING\_METADATA](Action.md#loading_metadata)
-- [LOADING\_RECORD](Action.md#loading_record)
-- [METADATA\_LOADED](Action.md#metadata_loaded)
-- [NEXT\_SELECTED](Action.md#next_selected)
-- [PAGINATION\_UPDATED](Action.md#pagination_updated)
-- [PREVIOUS\_SELECTED](Action.md#previous_selected)
-- [RECORDS\_ADDED](Action.md#records_added)
-- [RECORDS\_COPIED](Action.md#records_copied)
-- [RECORDS\_REMOVED](Action.md#records_removed)
-- [RECORD\_LOADED](Action.md#record_loaded)
-- [REMOVING\_RECORDS](Action.md#removing_records)
-- [SAVING\_DATA](Action.md#saving_data)
-- [SELECTION\_CHANGED](Action.md#selection_changed)
-- [STATE\_CHANGED](Action.md#state_changed)
-- [WAITING\_CHANGE\_CANCELED](Action.md#waiting_change_canceled)
-
-## Enumeration Members
-
-### CHANGE\_REDONE
-
-• **CHANGE\_REDONE** = ``"changeRedone"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:52
-
-___
-
-### CHANGE\_UNDONE
-
-• **CHANGE\_UNDONE** = ``"changeUndone"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:51
-
-___
-
-### CHANGING\_DATA
-
-• **CHANGING\_DATA** = ``"changingData"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:45
-
-___
-
-### CHILD\_CHANGED
-
-• **CHILD\_CHANGED** = ``"childChanged"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:63
-
-___
-
-### DATA\_CHANGED
-
-• **DATA\_CHANGED** = ``"dataChanged"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:47
-
-___
-
-### DATA\_LOADED
-
-• **DATA\_LOADED** = ``"dataLoaded"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:33
-
-___
-
-### DATA\_RESOLVED
-
-• **DATA\_RESOLVED** = ``"dataResolved"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:48
-
-___
-
-### DATA\_SAVED
-
-• **DATA\_SAVED** = ``"dataSaved"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:37
-
-___
-
-### EDITION\_CANCELED
-
-• **EDITION\_CANCELED** = ``"editionCanceled"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:50
-
-___
-
-### FIELD\_INVALIDATED
-
-• **FIELD\_INVALIDATED** = ``"fieldInvalidated"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:65
-
-___
-
-### INVALIDATE\_CLEAN
-
-• **INVALIDATE\_CLEAN** = ``"invalidateClean"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:66
-
-___
-
-### LOADING\_DATA
-
-• **LOADING\_DATA** = ``"loadingData"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:32
-
-___
-
-### LOADING\_METADATA
-
-• **LOADING\_METADATA** = ``"loadingMetadata"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:29
-
-___
-
-### LOADING\_RECORD
-
-• **LOADING\_RECORD** = ``"loadingRecord"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:60
-
-___
-
-### METADATA\_LOADED
-
-• **METADATA\_LOADED** = ``"metadataLoaded"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:30
-
-___
-
-### NEXT\_SELECTED
-
-• **NEXT\_SELECTED** = ``"nextSelected"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:55
-
-___
-
-### PAGINATION\_UPDATED
-
-• **PAGINATION\_UPDATED** = ``"paginationUpdated"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:34
-
-___
-
-### PREVIOUS\_SELECTED
-
-• **PREVIOUS\_SELECTED** = ``"previousSelected"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:56
-
-___
-
-### RECORDS\_ADDED
-
-• **RECORDS\_ADDED** = ``"recordsAdded"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:42
-
-___
-
-### RECORDS\_COPIED
-
-• **RECORDS\_COPIED** = ``"recordsCopied"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:43
-
-___
-
-### RECORDS\_REMOVED
-
-• **RECORDS\_REMOVED** = ``"recordsRemoved"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:40
-
-___
-
-### RECORD\_LOADED
-
-• **RECORD\_LOADED** = ``"recordLoaded"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:61
-
-___
-
-### REMOVING\_RECORDS
-
-• **REMOVING\_RECORDS** = ``"removingRecords"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:39
-
-___
-
-### SAVING\_DATA
-
-• **SAVING\_DATA** = ``"savingData"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:36
-
-___
-
-### SELECTION\_CHANGED
-
-• **SELECTION\_CHANGED** = ``"selectionChanged"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:54
-
-___
-
-### STATE\_CHANGED
-
-• **STATE\_CHANGED** = ``"stateChanged"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:58
-
-___
-
-### WAITING\_CHANGE\_CANCELED
-
-• **WAITING\_CHANGE\_CANCELED** = ``"waitingChangeCanceled"``
-
-#### Defined in
-
-src/dataunit/state/action/DataUnitAction.ts:46

package/.docs/enums/ChangeOperation.md

@@ -1,52 +0,0 @@
-[@sankhyalabs/core](../README.md) / [Exports](../modules.md) / ChangeOperation
-
-# Enumeration: ChangeOperation
-
-## Table of contents
-
-### Enumeration Members
-
-- [COPY](ChangeOperation.md#copy)
-- [DELETE](ChangeOperation.md#delete)
-- [INSERT](ChangeOperation.md#insert)
-- [UPDATE](ChangeOperation.md#update)
-
-## Enumeration Members
-
-### COPY
-
-• **COPY** = ``"COPY"``
-
-#### Defined in
-
-src/dataunit/DataUnit.ts:1747
-
-___
-
-### DELETE
-
-• **DELETE** = ``"DELETE"``
-
-#### Defined in
-
-src/dataunit/DataUnit.ts:1749
-
-___
-
-### INSERT
-
-• **INSERT** = ``"INSERT"``
-
-#### Defined in
-
-src/dataunit/DataUnit.ts:1746
-
-___
-
-### UPDATE
-
-• **UPDATE** = ``"UPDATE"``
-
-#### Defined in
-
-src/dataunit/DataUnit.ts:1748

package/.docs/enums/DataType.md

@@ -1,63 +0,0 @@
-[@sankhyalabs/core](../README.md) / [Exports](../modules.md) / DataType
-
-# Enumeration: DataType
-
-## Table of contents
-
-### Enumeration Members
-
-- [BOOLEAN](DataType.md#boolean)
-- [DATE](DataType.md#date)
-- [NUMBER](DataType.md#number)
-- [OBJECT](DataType.md#object)
-- [TEXT](DataType.md#text)
-
-## Enumeration Members
-
-### BOOLEAN
-
-• **BOOLEAN** = ``"BOOLEAN"``
-
-#### Defined in
-
-src/dataunit/metadata/DataType.ts:12
-
-___
-
-### DATE
-
-• **DATE** = ``"DATE"``
-
-#### Defined in
-
-src/dataunit/metadata/DataType.ts:10
-
-___
-
-### NUMBER
-
-• **NUMBER** = ``"NUMBER"``
-
-#### Defined in
-
-src/dataunit/metadata/DataType.ts:9
-
-___
-
-### OBJECT
-
-• **OBJECT** = ``"OBJECT"``
-
-#### Defined in
-
-src/dataunit/metadata/DataType.ts:13
-
-___
-
-### TEXT
-
-• **TEXT** = ``"TEXT"``
-
-#### Defined in
-
-src/dataunit/metadata/DataType.ts:11