@sankhyalabs/core 5.20.0-dev.14 → 5.20.0-dev.17

package/src/utils/ElementUtils.ts

@@ -0,0 +1,10 @@
+import { OverflowDirection } from './OverflowWatcher/types/overflow-direction.js';
+
+export function calcMarginSize(el:Element, scrollDirection: OverflowDirection){
+  const computedStyle = getComputedStyle(el);
+  if(OverflowDirection.HORIZONTAL === scrollDirection){
+    return (parseInt(computedStyle.marginLeft || '0') + parseInt(computedStyle.marginRight || '0'));
+  }
+
+  return (parseInt(computedStyle.marginTop || '0') + parseInt(computedStyle.marginBottom || '0'));
+}

package/src/utils/OverflowWatcher/index.ts

@@ -1,151 +1,243 @@
 import { JSUtils } from "../JSUtils.js";
 import { OverflowDirection } from "./types/overflow-direction.js"
 import { OnOverflowCallBack } from "./types/overflow-callback.js"
+import { calcMarginSize } from '../ElementUtils.js';
 
 export * from "./types/overflow-direction.js";
 export * from "./types/overflow-callback.js";
 
+export const OVERFLOWED_CLASS_NAME = 'overflowed';
+
 export default class OverflowWatcher {
     private _onResize:OnOverflowCallBack;
     private _resizeObserver:ResizeObserver;
-    private _lastContentRect:DOMRectReadOnly|undefined = undefined;
+    private _lastContainerSize:number|undefined = undefined;
+    private _lastContainerInstance: HTMLElement | undefined = undefined;
     private _scrollDirection = OverflowDirection.HORIZONTAL;
     private _propSize:string;
-    private _hiddenItems:Element[] = [];
+    private _hiddenItemsProps:Map<Element, SizeProps> = new Map();
+    private _notOverFlowPros:Map<string, SizeProps> = new Map();
     private _deltaSize:number;
+    private _notOverFlow: string[] = [];
+
+    readonly DATA_ELEMENT_ID = 'data-element-id';
 
     /**
-     * Cria uma instancia do OverflowWatcher 
-     * 
+     * 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){
+     * @param debounce - Tempo até execução do callback em milissegundos.
+     * @param notOverFlow - Lista de ids ou data-element-ids dos elementos que não devem sofrer overFlow.
+     */
+    constructor({
+                    element,
+                    callback,
+                    overFlowDirection = OverflowDirection.HORIZONTAL,
+                    debounce = 200,
+                    deltaSize = 0,
+                    notOverFlow = []
+    }: OverFlowWatcherParams){
         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;   
+        this._propSize = (OverflowDirection.HORIZONTAL === overFlowDirection) ? "width" : "height";
+        this._resizeObserver = new ResizeObserver(JSUtils.debounce((entries: ResizeObserverEntry[]) => this.handleResize(entries), debounce));
+        this._resizeObserver.observe(element);
+        this._deltaSize = deltaSize;
+        this._notOverFlow = notOverFlow;
+    }
+
+    public addNotOverFlowElement(elementId: string){
+        if(!this._notOverFlow.includes(elementId)){
+            this._notOverFlow.push(elementId);
+        }
     }
 
     public destroy(){
         this._resizeObserver.disconnect();
     }
 
+    public forceUpdate(){
+        if(this._lastContainerSize && this._lastContainerInstance){
+            this.updateOverFlowedItems(this._lastContainerInstance, this._lastContainerSize);
+        }
+    }
+
     private handleResize(entries: ResizeObserverEntry[]){
+        if(!entries || entries.length === 0) return;
 
-        if(!entries || entries.length === 0){
-            return;
+        const container = entries[0];
+        const containerSize:number = (container.contentRect as any)[this._propSize];
+        if(!containerSize) return;
+
+        if(this.hasChangedSize(containerSize)){
+           this.updateOverFlowedItems(container.target as HTMLElement, containerSize);
         }
+    }
 
-        const resizeItem = entries[0];
-        const contentRect:any = resizeItem.contentRect;
+    private updateOverFlowedItems(container: HTMLElement, containerSize: number){
+        const children:Element[] = Array.from(container.children);
+        this.registerNotOverflowProps(children);
+        this.proccessElements(containerSize, children);
+        this._lastContainerSize = containerSize;
+        this._lastContainerInstance = container;
+    }
 
-        if(this.isChangedSize(contentRect)){
-            const children:Element[] = Array.from(resizeItem.target.children);
-            this.proccessElements(contentRect[this._propSize], children);
-            this._lastContentRect = contentRect;
-        }
+    private registerNotOverflowProps(children: Element[]) {
+        children.forEach(childElement => {
+            const id = childElement.id || this.getDataElementId(childElement);
+            if (this.canNotRegisterNotOverFlow(id)) return;
+            this._notOverFlowPros.set(id, this.getElementSizeProps(childElement));
+        });
     }
 
-    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 canNotRegisterNotOverFlow(id: string) {
+        return !id || !this._notOverFlow.includes(id) || this._notOverFlowPros.has(id);
     }
 
+    private hasChangedSize(elementSize: number):boolean{
+        if(!this._lastContainerSize) return true;
+        const variation = elementSize - this._lastContainerSize;
 
-    private getPropSizeByDirection():string{
-        if(OverflowDirection.HORIZONTAL === this._scrollDirection){
-            return "width"
+        if(variation < 0){
+            const absoluteVariation = Math.abs(variation);
+            return (absoluteVariation > this._deltaSize);
         }
 
-        return "height";
+        return variation > 0;
     }
 
     private proccessElements(elementSize:number, children:Element[]){
-
-        if(children.length === 0){
-            return;
-        }
+        if(children.length === 0) return;
 
         const childrenSize = this.calcChildrenSize(children);
-        
         let diff = Number((elementSize - childrenSize).toFixed(4));
-        
+
         if(diff > 0){
-            this.proccessElementsWithoutOverFlow(diff);
+            this.clearOverFlow();
             return;
         }
 
-        this.proccessElementsOverFlow(children, diff);
+        this.proccessElementsOverFlow(children, elementSize);
+    }
+
+    private clearOverFlow(){
+        this._hiddenItemsProps = new Map();
+        this._onResize([]);
     }
 
-    private proccessElementsWithoutOverFlow(diff:number){
-        this._hiddenItems.forEach((item:any) => {
-                
-            if(item.getBoundingClientRect().width < diff){
-                this._hiddenItems.pop();
+    private proccessElementsOverFlow(allElements:Element[], avaliableSize:number){
+        const elementsThatFit: Element[] = [];
+        const avaliableSizeConsideringDelta = (avaliableSize - this._deltaSize);
+
+        let sumElementsSize = 0;
+        for (const element of allElements) {
+            sumElementsSize += this.calcElementSize(element);
+            if(this.exceedsAvaliableSize(sumElementsSize, elementsThatFit, avaliableSizeConsideringDelta)) break;
+            elementsThatFit.push(element);
+        }
+
+        const overFlowedElements = allElements.filter(element => this.isElementOverFlowing(elementsThatFit, element));
+
+        overFlowedElements.forEach(overFlowed => {
+            if(!this._hiddenItemsProps.has(overFlowed)){
+                this.registerElementSize(overFlowed);
             }
-        
         });
 
-        this._onResize(this._hiddenItems);
+        this._onResize(overFlowedElements);
     }
 
-    private proccessElementsOverFlow(children:Element[], diff:number){
-        const elementsOverflow = [];
-        let sumRemovedItems = 0;
+    private isElementOverFlowing(elementsThatFit: Element[], element: Element) {
+        return !elementsThatFit.includes(element) && this.canOverFlowElement(element);
+    }
 
-        while(elementsOverflow.length < children.length && sumRemovedItems < (diff * -1) ) {
-            const itemToRemove = children.pop();
-            
-            if(itemToRemove != undefined && (itemToRemove as any).style.display === 'none'){
-                continue;
-            }
+    private canOverFlowElement(element: Element) {
+        return !this._notOverFlow.includes(element.id)
+          && !this._notOverFlow.includes(this.getDataElementId(element));
+    }
 
-            if(itemToRemove != undefined){
-                elementsOverflow.push(itemToRemove);
-                sumRemovedItems += (itemToRemove.getBoundingClientRect() as any)[this._propSize];
-            }
-        }
+    private getDataElementId(element: Element): string {
+        return (element as HTMLElement).getAttribute('data-element-id') ?? "";
+    }
 
+    private exceedsAvaliableSize(sumElementsSize: number, elements: Element[], avaliableSize: number): boolean {
+        if(!this._notOverFlow.length) return sumElementsSize > avaliableSize
 
-        this._hiddenItems = elementsOverflow;
-        this._onResize(elementsOverflow);
+        const elementIdsToCalculate = this.canNotOverFlowNotIncludedIds(elements);
+        if(!elementIdsToCalculate.length) return sumElementsSize > avaliableSize
 
+        const variation = this.calculateVariation(elementIdsToCalculate);
+        const occupiedSize = sumElementsSize + variation;
+        return occupiedSize > avaliableSize;
     }
 
-    private calcChildrenSize(children:Element[]):number{
-        let sumChildren = 0;
-
-        Array.from(children).forEach(el => {
-            sumChildren += (el.getBoundingClientRect() as any)[this._propSize];
-            sumChildren += this.calcMarginSize(el);
+    private calculateVariation(elementIdsToCalculate: string[]) {
+        let variation = 0
+        elementIdsToCalculate.forEach(id => {
+            const sizeProps = this._notOverFlowPros.get(id);
+            variation += sizeProps?.size ?? 0;
+            variation += sizeProps?.margin ?? 0;
         });
+        return variation;
+    }
 
-        if(sumChildren > 0){
-            sumChildren += this._deltaSize;
-        }
+    private canNotOverFlowNotIncludedIds(elements: Element[]): string[]{
+        const elementsIdList = elements.map(el =>  el.id || this.getDataElementId(el)).filter(id => !!id);
+        return this._notOverFlow.filter(id => !elementsIdList.includes(id));
+    }
 
-        return sumChildren;
+    private registerElementSize(element: Element) {
+        const sizeProps = this.getElementSizeProps(element);
+        this._hiddenItemsProps.set(element, sizeProps);
     }
 
-    private calcMarginSize(el:Element){
-        const computedStyle = getComputedStyle(el);
+    private getElementSizeProps(element: Element) {
+        const sizeProps: SizeProps = {
+            size: (element.getBoundingClientRect() as any)[this._propSize],
+            margin: calcMarginSize(element, this._scrollDirection),
+        };
+        return sizeProps;
+    }
 
-        if(OverflowDirection.HORIZONTAL === this._scrollDirection){
-           return (parseInt(computedStyle.marginLeft || '0') + parseInt(computedStyle.marginRight || '0'));
+    private calcChildrenSize(children:Element[]):number{
+        let sumChildren = 0;
+        sumChildren += this._deltaSize;
+        Array.from(children).forEach(el => sumChildren += this.calcElementSize(el));
+        return sumChildren;
+    }
+
+    private calcElementSize(el: Element) {
+        let size = 0
+        if (this.isOverFlowed(el)) {
+            const sizeProps = this._hiddenItemsProps.get(el);
+            size += sizeProps?.size ?? 0;
+            size += sizeProps?.margin ?? 0;
+            return size;
         }
 
-        return (parseInt(computedStyle.marginTop || '0') + parseInt(computedStyle.marginBottom || '0'));
+        size += (el.getBoundingClientRect() as any)[this._propSize];
+        size += calcMarginSize(el, this._scrollDirection);
+        return size;
     }
 
+    private isOverFlowed(el: Element) {
+        return el.classList.contains(OVERFLOWED_CLASS_NAME);
+    }
+}
+
+export interface OverFlowWatcherParams {
+    element:HTMLElement,
+    callback:OnOverflowCallBack,
+    overFlowDirection?:OverflowDirection,
+    deltaSize?:number,
+    debounce?: number,
+    notOverFlow?: string[]
+}
+
+interface SizeProps {
+    size: number,
+    margin: number,
 }

package/test/util/ElementUtils.spec.ts

@@ -0,0 +1,34 @@
+import { calcMarginSize } from '../../src/utils/ElementUtils';
+import { OverflowDirection } from '../../src';
+
+describe('calcMarginSize', () => {
+  it('should calculate correctly the size of horizontal margin', () => {
+    const element = document.createElement('div');
+    element.style.marginLeft = '10px';
+    element.style.marginRight = '15px';
+    document.body.appendChild(element);
+
+    const size = calcMarginSize(element, OverflowDirection.HORIZONTAL);
+    expect(size).toBe(25);
+  });
+
+  it('should calculate correctly the size of vertical margin', () => {
+    const element = document.createElement('div');
+    element.style.marginTop = '5px';
+    element.style.marginBottom = '20px';
+    document.body.appendChild(element);
+
+    const size = calcMarginSize(element, OverflowDirection.VERTICAL);
+    expect(size).toBe(25);
+  });
+
+  it('should threat values defined as zero', () => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+
+    const horizontalSize = calcMarginSize(element, OverflowDirection.HORIZONTAL);
+    const verticalSize = calcMarginSize(element, OverflowDirection.VERTICAL);
+    expect(horizontalSize).toBe(0);
+    expect(verticalSize).toBe(0);
+  });
+});

package/test/util/OverflowWatcher.spec.ts

@@ -1,118 +1,152 @@
-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);
-    });
-    
-});
+import OverflowWatcher, { OverFlowWatcherParams, OverflowDirection, OVERFLOWED_CLASS_NAME } from '../../src/utils/OverflowWatcher';
+
+describe('OverflowWatcher', () => {
+  let mockElement: HTMLElement;
+  let mockCallback: jest.Mock;
+  let watcherInstance: OverflowWatcher;
+
+  beforeEach(() => {
+    mockElement = document.createElement('div');
+    Object.defineProperty(mockElement, 'clientWidth', { value: 90, configurable: true });
+    document.body.appendChild(mockElement);
+    mockCallback = jest.fn();
+
+    const params: OverFlowWatcherParams = {
+      element: mockElement,
+      callback: mockCallback,
+      overFlowDirection: OverflowDirection.HORIZONTAL,
+      debounce: 1,
+      deltaSize: 1,
+      notOverFlow: ['testId'],
+    };
+
+    watcherInstance = new OverflowWatcher(params);
+    mockElement.getBoundingClientRect = jest.fn().mockReturnValue(getMockedRectClientValue(200));
+    setPrivateField(watcherInstance, '_lastContainerSize', 100);
+    setPrivateField(watcherInstance, '_lastContainerInstance', mockElement);
+  });
+
+  afterEach(() => {
+    watcherInstance.destroy();
+  });
+
+  it('should initialize with provided parameters', () => {
+    expect(watcherInstance).toBeDefined();
+  });
+
+  it('should disconect  ResizeObserver when destroy is called', () => {
+    const disconnectSpy = jest.spyOn(ResizeObserver.prototype, 'disconnect');
+    watcherInstance.destroy();
+    expect(disconnectSpy).toHaveBeenCalled();
+  });
+
+  it('Should call callback on forceUpdate', () => {
+    appendMockedChildren(mockElement);
+    watcherInstance.forceUpdate();
+    expect(mockCallback).toHaveBeenCalled();
+  });
+
+  it('Should call callback on forceUpdate with childSpan', () => {
+    appendMockedChildren(mockElement);
+    watcherInstance.forceUpdate();
+
+    const childSpan = mockElement.children[1];
+    expect(mockCallback).toHaveBeenCalledWith(expect.arrayContaining([childSpan]));
+  });
+
+  it('Should call callback on forceUpdate with childSpan when notOverFlow is empty', () => {
+    appendMockedChildren(mockElement);
+
+    const params: OverFlowWatcherParams = {
+      element: mockElement,
+      callback: mockCallback,
+      overFlowDirection: OverflowDirection.HORIZONTAL,
+      debounce: 1,
+      deltaSize: 1,
+    };
+
+    const withNoOverFlow = new OverflowWatcher(params);
+    setPrivateField(withNoOverFlow, '_lastContainerSize', 100);
+    setPrivateField(withNoOverFlow, '_lastContainerInstance', mockElement);
+
+    withNoOverFlow.forceUpdate();
+
+    const childSpan = mockElement.children[1];
+    expect(mockCallback).toHaveBeenCalledWith(expect.arrayContaining([childSpan]));
+  });
+
+  it('Should call callback on forceUpdate with childSpan considering overflowed elements', () => {
+    appendMockedChildren(mockElement);
+    const childButton = mockElement.children[0];
+    const childSpan = mockElement.children[1];
+    childSpan.classList.add(OVERFLOWED_CLASS_NAME);
+
+    const hiddemItemsMock: Map<Element, {size: number, margin: number}> = new Map();
+    hiddemItemsMock.set(childSpan, {size: 50, margin: 0});
+    hiddemItemsMock.set(childButton, {size: 0, margin: 50});
+    setPrivateField(watcherInstance, '_hiddenItemsProps', hiddemItemsMock);
+
+    watcherInstance.forceUpdate();
+
+    expect(mockCallback).toHaveBeenCalledWith(expect.arrayContaining([childSpan]));
+  });
+
+  it('Should call callback on forceUpdate with empty list', () => {
+    appendMockedChildren(mockElement);
+    setPrivateField(watcherInstance, '_lastContainerSize', 200);
+    watcherInstance.forceUpdate();
+    const childButton =  mockElement.children[0];
+    const childSpan = mockElement.children[1];
+
+    expect(mockCallback).not.toHaveBeenCalledWith(expect.arrayContaining([childButton, childSpan]));
+  });
+
+  it('should ignore elements that can not overflow', () => {
+    appendMockedChildren(mockElement);
+
+    const notOverflowElement = document.createElement('div');
+    notOverflowElement.setAttribute('data-element-id', 'testId') ;
+    notOverflowElement.getBoundingClientRect = jest.fn().mockReturnValue(getMockedRectClientValue(50));
+
+    const notOverflowElement2 = document.createElement('div');
+    notOverflowElement2.setAttribute('data-element-id', 'testId2') ;
+    notOverflowElement2.getBoundingClientRect = jest.fn().mockReturnValue(getMockedRectClientValue(50));
+
+    mockElement.appendChild(notOverflowElement);
+    mockElement.appendChild(notOverflowElement2);
+
+    watcherInstance.addNotOverFlowElement('testId');
+    watcherInstance.addNotOverFlowElement('testId2');
+
+    watcherInstance.forceUpdate();
+
+    expect(mockCallback).not.toHaveBeenCalledWith(expect.arrayContaining([notOverflowElement]));
+  });
+
+  it('Should not call callback on forceUpdate', () => {
+    watcherInstance.forceUpdate();
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+});
+
+function appendMockedChildren(mockElement: HTMLElement) {
+  const chilldButton = document.createElement('button');
+  const childSpan = document.createElement('span');
+
+  chilldButton.getBoundingClientRect = jest.fn().mockReturnValue(getMockedRectClientValue(50));
+  childSpan.getBoundingClientRect = jest.fn().mockReturnValue(getMockedRectClientValue(50));
+
+  mockElement.appendChild(chilldButton);
+  mockElement.appendChild(childSpan);
+}
+
+function getMockedRectClientValue(size: number) {
+  return {
+    x: 0, y: 0, width: size, height: 10, top: 0, right: 0, bottom: 0, left: 0, toJSON: () => {}
+  };
+}
+
+function setPrivateField<T>(instance: T, fieldName: string, value: any): void {
+  (instance as any)[fieldName] = value;
+}