From 7f3363a122693d10fbcb467cd1f6b11ba8b9cb76 Mon Sep 17 00:00:00 2001 From: Ira Hopkinson Date: Wed, 10 May 2023 17:02:27 +1200 Subject: [PATCH 1/2] Fix `find` function return type when not found - fixed: in `findInBox` function, `box` argument can be _undefined_ - also fix comment spelling of 'panel' --- es/Algorithm.d.ts | 2 +- es/Algorithm.js | 7 +++++-- es/DockData.d.ts | 2 +- es/DockLayout.d.ts | 2 +- es/DockLayout.js | 2 +- lib/Algorithm.d.ts | 2 +- lib/Algorithm.js | 7 +++++-- lib/DockData.d.ts | 2 +- lib/DockLayout.d.ts | 2 +- lib/DockLayout.js | 2 +- src/Algorithm.ts | 17 ++++++++++------- src/DockData.ts | 2 +- src/DockLayout.tsx | 4 ++-- 13 files changed, 31 insertions(+), 22 deletions(-) diff --git a/es/Algorithm.d.ts b/es/Algorithm.d.ts index d2d3bd23..e8860783 100644 --- a/es/Algorithm.d.ts +++ b/es/Algorithm.d.ts @@ -16,7 +16,7 @@ export declare enum Filter { AnyTabPanel = 123, All = 127 } -export declare function find(layout: LayoutData, id: string, filter?: Filter): PanelData | TabData | BoxData; +export declare function find(layout: LayoutData, id: string, filter?: Filter): PanelData | TabData | BoxData | undefined; export declare function addNextToTab(layout: LayoutData, source: TabData | PanelData, target: TabData, direction: DropDirection): LayoutData; export declare function addTabToPanel(layout: LayoutData, source: TabData | PanelData, panel: PanelData, idx?: number): LayoutData; export declare function converToPanel(source: TabData | PanelData): PanelData; diff --git a/es/Algorithm.js b/es/Algorithm.js index cd86155d..c93e88fa 100644 --- a/es/Algorithm.js +++ b/es/Algorithm.js @@ -71,13 +71,16 @@ function findInPanel(panel, id, filter) { } } } - return null; + return undefined; } function findInBox(box, id, filter) { let result; - if ((filter | Filter.Box) && box.id === id) { + if ((filter | Filter.Box) && (box === null || box === void 0 ? void 0 : box.id) === id) { return box; } + if (!(box === null || box === void 0 ? void 0 : box.children)) { + return undefined; + } for (let child of box.children) { if ('children' in child) { if (result = findInBox(child, id, filter)) { diff --git a/es/DockData.d.ts b/es/DockData.d.ts index 58963f1a..d5c69f32 100644 --- a/es/DockData.d.ts +++ b/es/DockData.d.ts @@ -289,7 +289,7 @@ export interface DockContext { /** * Find PanelData or TabData by id */ - find(id: string, filter?: Filter): PanelData | TabData | BoxData; + find(id: string, filter?: Filter): PanelData | TabData | BoxData | undefined; /** * Update a tab with new TabData * @param id tab id to update diff --git a/es/DockLayout.d.ts b/es/DockLayout.d.ts index c1e49ac7..c9a8e328 100644 --- a/es/DockLayout.d.ts +++ b/es/DockLayout.d.ts @@ -116,7 +116,7 @@ export declare class DockLayout extends DockPortalManager implements DockContext height: number; }): void; /** @inheritDoc */ - find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData; + find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined; /** @ignore */ getLayoutSize(): { width: number; diff --git a/es/DockLayout.js b/es/DockLayout.js index ea36f4b8..d6f11ed4 100644 --- a/es/DockLayout.js +++ b/es/DockLayout.js @@ -197,7 +197,7 @@ export class DockLayout extends DockPortalManager { } else if (target) { if ('tabs' in target) { - // pandel target + // panel target if (direction === 'middle') { layout = Algorithm.addTabToPanel(layout, source, target); } diff --git a/lib/Algorithm.d.ts b/lib/Algorithm.d.ts index d2d3bd23..e8860783 100644 --- a/lib/Algorithm.d.ts +++ b/lib/Algorithm.d.ts @@ -16,7 +16,7 @@ export declare enum Filter { AnyTabPanel = 123, All = 127 } -export declare function find(layout: LayoutData, id: string, filter?: Filter): PanelData | TabData | BoxData; +export declare function find(layout: LayoutData, id: string, filter?: Filter): PanelData | TabData | BoxData | undefined; export declare function addNextToTab(layout: LayoutData, source: TabData | PanelData, target: TabData, direction: DropDirection): LayoutData; export declare function addTabToPanel(layout: LayoutData, source: TabData | PanelData, panel: PanelData, idx?: number): LayoutData; export declare function converToPanel(source: TabData | PanelData): PanelData; diff --git a/lib/Algorithm.js b/lib/Algorithm.js index 833d7d17..5f22efa9 100644 --- a/lib/Algorithm.js +++ b/lib/Algorithm.js @@ -77,13 +77,16 @@ function findInPanel(panel, id, filter) { } } } - return null; + return undefined; } function findInBox(box, id, filter) { let result; - if ((filter | Filter.Box) && box.id === id) { + if ((filter | Filter.Box) && (box === null || box === void 0 ? void 0 : box.id) === id) { return box; } + if (!(box === null || box === void 0 ? void 0 : box.children)) { + return undefined; + } for (let child of box.children) { if ('children' in child) { if (result = findInBox(child, id, filter)) { diff --git a/lib/DockData.d.ts b/lib/DockData.d.ts index 58963f1a..d5c69f32 100644 --- a/lib/DockData.d.ts +++ b/lib/DockData.d.ts @@ -289,7 +289,7 @@ export interface DockContext { /** * Find PanelData or TabData by id */ - find(id: string, filter?: Filter): PanelData | TabData | BoxData; + find(id: string, filter?: Filter): PanelData | TabData | BoxData | undefined; /** * Update a tab with new TabData * @param id tab id to update diff --git a/lib/DockLayout.d.ts b/lib/DockLayout.d.ts index c1e49ac7..c9a8e328 100644 --- a/lib/DockLayout.d.ts +++ b/lib/DockLayout.d.ts @@ -116,7 +116,7 @@ export declare class DockLayout extends DockPortalManager implements DockContext height: number; }): void; /** @inheritDoc */ - find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData; + find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined; /** @ignore */ getLayoutSize(): { width: number; diff --git a/lib/DockLayout.js b/lib/DockLayout.js index e5ef6fc3..f1108c24 100644 --- a/lib/DockLayout.js +++ b/lib/DockLayout.js @@ -222,7 +222,7 @@ class DockLayout extends DockPortalManager { } else if (target) { if ('tabs' in target) { - // pandel target + // panel target if (direction === 'middle') { layout = Algorithm.addTabToPanel(layout, source, target); } diff --git a/src/Algorithm.ts b/src/Algorithm.ts index 0bf8012a..f0844eb2 100644 --- a/src/Algorithm.ts +++ b/src/Algorithm.ts @@ -80,7 +80,7 @@ export function nextZIndex(current?: number): number { } -function findInPanel(panel: PanelData, id: string, filter: Filter): PanelData | TabData { +function findInPanel(panel: PanelData, id: string, filter: Filter): PanelData | TabData | undefined { if (panel.id === id && (filter & Filter.Panel)) { return panel; } @@ -91,14 +91,17 @@ function findInPanel(panel: PanelData, id: string, filter: Filter): PanelData | } } } - return null; + return undefined; } -function findInBox(box: BoxData, id: string, filter: Filter): PanelData | TabData | BoxData { - let result: PanelData | TabData | BoxData; - if ((filter | Filter.Box) && box.id === id) { +function findInBox(box: BoxData | undefined, id: string, filter: Filter): PanelData | TabData | BoxData | undefined { + let result: PanelData | TabData | BoxData | undefined; + if ((filter | Filter.Box) && box?.id === id) { return box; } + if (!box?.children) { + return undefined; + } for (let child of box.children) { if ('children' in child) { if (result = findInBox(child, id, filter)) { @@ -130,8 +133,8 @@ export enum Filter { } -export function find(layout: LayoutData, id: string, filter: Filter = Filter.AnyTabPanel): PanelData | TabData | BoxData { - let result: PanelData | TabData | BoxData; +export function find(layout: LayoutData, id: string, filter: Filter = Filter.AnyTabPanel): PanelData | TabData | BoxData | undefined { + let result: PanelData | TabData | BoxData | undefined; if (filter & Filter.Docked) { result = findInBox(layout.dockbox, id, filter); diff --git a/src/DockData.ts b/src/DockData.ts index 15ed9048..8bc0de71 100644 --- a/src/DockData.ts +++ b/src/DockData.ts @@ -357,7 +357,7 @@ export interface DockContext { /** * Find PanelData or TabData by id */ - find(id: string, filter?: Filter): PanelData | TabData | BoxData; + find(id: string, filter?: Filter): PanelData | TabData | BoxData | undefined; /** * Update a tab with new TabData diff --git a/src/DockLayout.tsx b/src/DockLayout.tsx index 840cf008..c6b7c6ef 100644 --- a/src/DockLayout.tsx +++ b/src/DockLayout.tsx @@ -249,7 +249,7 @@ export class DockLayout extends DockPortalManager implements DockContext { layout = Algorithm.panelToWindow(layout, newPanel); } else if (target) { if ('tabs' in (target as PanelData)) { - // pandel target + // panel target if (direction === 'middle') { layout = Algorithm.addTabToPanel(layout, source, target as PanelData); } else { @@ -275,7 +275,7 @@ export class DockLayout extends DockPortalManager implements DockContext { } /** @inheritDoc */ - find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData { + find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined { return Algorithm.find(this.getLayout(), id, filter); } From 13f441e43e08259fc3bc74bfc819197e23efdbdf Mon Sep 17 00:00:00 2001 From: Ira Hopkinson Date: Thu, 11 May 2023 13:40:04 +1200 Subject: [PATCH 2/2] Improve externally available types - also add non-null assertion to `DockContextType` --- es/DockData.d.ts | 21 +++++++++++---------- es/DockLayout.d.ts | 14 +++----------- lib/DockData.d.ts | 21 +++++++++++---------- lib/DockLayout.d.ts | 14 +++----------- src/DockData.ts | 18 +++++++++++++++--- src/DockLayout.tsx | 6 ++++-- 6 files changed, 47 insertions(+), 47 deletions(-) diff --git a/es/DockData.d.ts b/es/DockData.d.ts index d5c69f32..89b1506d 100644 --- a/es/DockData.d.ts +++ b/es/DockData.d.ts @@ -243,6 +243,15 @@ export interface LayoutData extends LayoutBase { loadedFrom?: LayoutBase; } export declare type DropDirection = 'left' | 'right' | 'bottom' | 'top' | 'middle' | 'remove' | 'before-tab' | 'after-tab' | 'float' | 'front' | 'maximize' | 'new-window' | 'move' | 'active' | 'update'; +export interface FloatSize { + width: number; + height: number; +} +export interface FloatPosition extends FloatSize { + left: number; + top: number; +} +export declare type LayoutSize = FloatSize; export interface DockContext { /** @ignore */ getDockId(): any; @@ -254,10 +263,7 @@ export interface DockContext { clientY: number; }, panelSize?: [number, number]): void; /** @ignore */ - getLayoutSize(): { - width: number; - height: number; - }; + getLayoutSize(): LayoutSize; /** @ignore * When a state change happen to the layout that's handled locally, like inside DockPanel or DockBox. * It still need to tell the context there is a change so DockLayout can call onLayoutChange callback. @@ -276,12 +282,7 @@ export interface DockContext { * - when direction is 'float', target doesn't matter. If this is called directly from code without any user interaction, source must be PanelData with x,y,w,h properties * @param floatPosition position of float panel, used only when direction="float" */ - dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: { - left: number; - top: number; - width: number; - height: number; - }): void; + dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: FloatPosition): void; /** * Get the TabGroup defined in defaultLayout */ diff --git a/es/DockLayout.d.ts b/es/DockLayout.d.ts index c9a8e328..d951ae73 100644 --- a/es/DockLayout.d.ts +++ b/es/DockLayout.d.ts @@ -1,5 +1,5 @@ import * as React from "react"; -import { BoxData, DockContext, DropDirection, LayoutBase, LayoutData, PanelBase, PanelData, TabBase, TabData, TabGroup, TabPaneCache } from "./DockData"; +import { BoxData, DockContext, DropDirection, FloatPosition, LayoutBase, LayoutData, LayoutSize, PanelBase, PanelData, TabBase, TabData, TabGroup, TabPaneCache } from "./DockData"; import * as Algorithm from "./Algorithm"; export interface LayoutProps { /** @@ -109,19 +109,11 @@ export declare class DockLayout extends DockPortalManager implements DockContext * @param direction @inheritDoc * @param floatPosition @inheritDoc */ - dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: { - left: number; - top: number; - width: number; - height: number; - }): void; + dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: FloatPosition): void; /** @inheritDoc */ find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined; /** @ignore */ - getLayoutSize(): { - width: number; - height: number; - }; + getLayoutSize(): LayoutSize; /** @inheritDoc */ updateTab(id: string, newTab: TabData | null, makeActive?: boolean): boolean; /** @inheritDoc */ diff --git a/lib/DockData.d.ts b/lib/DockData.d.ts index d5c69f32..89b1506d 100644 --- a/lib/DockData.d.ts +++ b/lib/DockData.d.ts @@ -243,6 +243,15 @@ export interface LayoutData extends LayoutBase { loadedFrom?: LayoutBase; } export declare type DropDirection = 'left' | 'right' | 'bottom' | 'top' | 'middle' | 'remove' | 'before-tab' | 'after-tab' | 'float' | 'front' | 'maximize' | 'new-window' | 'move' | 'active' | 'update'; +export interface FloatSize { + width: number; + height: number; +} +export interface FloatPosition extends FloatSize { + left: number; + top: number; +} +export declare type LayoutSize = FloatSize; export interface DockContext { /** @ignore */ getDockId(): any; @@ -254,10 +263,7 @@ export interface DockContext { clientY: number; }, panelSize?: [number, number]): void; /** @ignore */ - getLayoutSize(): { - width: number; - height: number; - }; + getLayoutSize(): LayoutSize; /** @ignore * When a state change happen to the layout that's handled locally, like inside DockPanel or DockBox. * It still need to tell the context there is a change so DockLayout can call onLayoutChange callback. @@ -276,12 +282,7 @@ export interface DockContext { * - when direction is 'float', target doesn't matter. If this is called directly from code without any user interaction, source must be PanelData with x,y,w,h properties * @param floatPosition position of float panel, used only when direction="float" */ - dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: { - left: number; - top: number; - width: number; - height: number; - }): void; + dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: FloatPosition): void; /** * Get the TabGroup defined in defaultLayout */ diff --git a/lib/DockLayout.d.ts b/lib/DockLayout.d.ts index c9a8e328..d951ae73 100644 --- a/lib/DockLayout.d.ts +++ b/lib/DockLayout.d.ts @@ -1,5 +1,5 @@ import * as React from "react"; -import { BoxData, DockContext, DropDirection, LayoutBase, LayoutData, PanelBase, PanelData, TabBase, TabData, TabGroup, TabPaneCache } from "./DockData"; +import { BoxData, DockContext, DropDirection, FloatPosition, LayoutBase, LayoutData, LayoutSize, PanelBase, PanelData, TabBase, TabData, TabGroup, TabPaneCache } from "./DockData"; import * as Algorithm from "./Algorithm"; export interface LayoutProps { /** @@ -109,19 +109,11 @@ export declare class DockLayout extends DockPortalManager implements DockContext * @param direction @inheritDoc * @param floatPosition @inheritDoc */ - dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: { - left: number; - top: number; - width: number; - height: number; - }): void; + dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: FloatPosition): void; /** @inheritDoc */ find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined; /** @ignore */ - getLayoutSize(): { - width: number; - height: number; - }; + getLayoutSize(): LayoutSize; /** @inheritDoc */ updateTab(id: string, newTab: TabData | null, makeActive?: boolean): boolean; /** @inheritDoc */ diff --git a/src/DockData.ts b/src/DockData.ts index 8bc0de71..b71c2015 100644 --- a/src/DockData.ts +++ b/src/DockData.ts @@ -310,6 +310,18 @@ export type DropDirection = | 'update' // tab updated with updateTab ; +export interface FloatSize { + width: number; + height: number; +} + +export interface FloatPosition extends FloatSize { + left: number; + top: number; +} + +export type LayoutSize = FloatSize; + export interface DockContext { /** @ignore */ getDockId(): any; @@ -321,7 +333,7 @@ export interface DockContext { setDropRect(element: HTMLElement, direction?: DropDirection, source?: any, event?: {clientX: number, clientY: number}, panelSize?: [number, number]): void; /** @ignore */ - getLayoutSize(): {width: number, height: number}; + getLayoutSize(): LayoutSize; /** @ignore * When a state change happen to the layout that's handled locally, like inside DockPanel or DockBox. @@ -346,7 +358,7 @@ export interface DockContext { source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, - floatPosition?: { left: number, top: number, width: number, height: number } + floatPosition?: FloatPosition ): void; /** @@ -389,7 +401,7 @@ export interface DockContext { } /** @ignore */ -export const DockContextType = React.createContext(null); +export const DockContextType = React.createContext(null!); /** @ignore */ export const DockContextProvider = DockContextType.Provider; /** @ignore */ diff --git a/src/DockLayout.tsx b/src/DockLayout.tsx index c6b7c6ef..fcaea363 100644 --- a/src/DockLayout.tsx +++ b/src/DockLayout.tsx @@ -7,8 +7,10 @@ import { DockContext, DockContextProvider, DropDirection, + FloatPosition, LayoutBase, LayoutData, + LayoutSize, PanelBase, PanelData, placeHolderGroup, @@ -215,7 +217,7 @@ export class DockLayout extends DockPortalManager implements DockContext { source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, - floatPosition?: {left: number, top: number, width: number, height: number} + floatPosition?: FloatPosition ) { let layout = this.getLayout(); if (direction === 'maximize') { @@ -280,7 +282,7 @@ export class DockLayout extends DockPortalManager implements DockContext { } /** @ignore */ - getLayoutSize() { + getLayoutSize(): LayoutSize { if (this._ref) { return {width: this._ref.offsetWidth, height: this._ref.offsetHeight}; }