npm - @babylonjs/shared-ui-components - Versions diffs - 8.1.1 → 8.2.1 - Mend

@babylonjs/shared-ui-components 8.1.1 → 8.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

package/components/reactGraphSystem/useGraphContext.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@
  * utility hook to assist using the graph context
  * @returns
  */
-export declare const useGraphContext: () => import("./GraphContextManager").IGraphContext;
+export declare const useGraphContext: () => import("./GraphContextManager.js").IGraphContext;

package/lines/checkBoxLineComponent.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "./../propertyChangedEvent";
+import type { PropertyChangedEvent } from "./../propertyChangedEvent.js";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 export interface ICheckBoxLineComponentProps {
     label?: string;

package/lines/color3LineComponent.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 export interface IColor3LineComponentProps {
     label: string;
     target: any;

package/lines/color4LineComponent.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 export interface IColor4LineComponentProps {
     label: string;
     target?: any;

package/lines/colorLineComponent.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
 import { Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 export interface IColorLineProps {
     label: string;
     target?: any;
@@ -22,9 +22,7 @@ interface IColorLineComponentState {
 export declare class ColorLine extends React.Component<IColorLineProps, IColorLineComponentState> {
     constructor(props: IColorLineProps);
     shouldComponentUpdate(nextProps: IColorLineProps, nextState: IColorLineComponentState): boolean;
-    getValue(props?: Readonly<IColorLineProps> & Readonly<{
-        children?: React.ReactNode | undefined;
-    }>): Color4;
+    getValue(props?: Readonly<IColorLineProps>): Color4;
     setColorFromString(colorString: string): void;
     setColor(newColor: Color4): void;
     switchExpandState(): void;

package/lines/colorPickerComponent.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { Color4, Color3 } from "@babylonjs/core/Maths/math.color.js";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 export interface IColorPickerLineProps {
     value: Color4 | Color3;
     linearHint?: boolean;
@@ -21,9 +21,7 @@ export declare class ColorPickerLine extends React.Component<IColorPickerLinePro
     constructor(props: IColorPickerLineProps);
     syncPositions(): void;
     shouldComponentUpdate(nextProps: IColorPickerLineProps, nextState: IColorPickerComponentState): boolean;
-    getHexString(props?: Readonly<IColorPickerLineProps> & Readonly<{
-        children?: React.ReactNode | undefined;
-    }>): string;
+    getHexString(props?: Readonly<IColorPickerLineProps>): string;
     componentDidUpdate(): void;
     componentDidMount(): void;
     render(): import("react/jsx-runtime").JSX.Element;

package/lines/floatLineComponent.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 interface IFloatLineComponentProps {
     label: string;
     target: any;

package/lines/hexLineComponent.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 interface IHexLineComponentProps {
     label: string;
     target: any;

package/lines/lineContainerComponent.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ISelectedLineContainer } from "./iSelectedLineContainer";
+import type { ISelectedLineContainer } from "./iSelectedLineContainer.js";
 interface ILineContainerComponentProps {
     selection?: ISelectedLineContainer;
     title: string;

package/lines/matrixLineComponent.d.ts CHANGED Viewed

@@ -2,8 +2,8 @@ import * as React from "react";
 import type { Vector3, Vector4 } from "@babylonjs/core/Maths/math.vector.js";
 import { Matrix } from "@babylonjs/core/Maths/math.vector.js";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 interface IMatrixLineComponentProps {
     label: string;
     target: any;

package/lines/numericInputComponent.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 interface INumericInputProps {
     label: string;
     labelTooltip?: string;

package/lines/optionsLineComponent.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
 import type { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable.js";
 export declare const Null_Value: number;
 export interface IOptionsLineProps {

package/lines/sliderLineComponent.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 interface ISliderLineComponentProps {
     label: string;
     target?: any;

package/lines/targetsProxy.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
 export declare const conflictingValuesPlaceholder = "\u2014";
 /**

package/lines/textInputLineComponent.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 export interface ITextInputLineComponentProps {
     label?: string;
     lockObject?: LockObject;

package/lines/vector2LineComponent.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 interface IVector2LineComponentProps {
     label: string;
     target: any;

package/lines/vector3LineComponent.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 interface IVector3LineComponentProps {
     label: string;
     target?: any;

package/lines/vector4LineComponent.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Vector4 } from "@babylonjs/core/Maths/math.vector.js";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 interface IVector4LineComponentProps {
     label: string;
     target?: any;

package/nodeGraphSystem/automaticProperties.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { IEditablePropertyOption } from "@babylonjs/core/Decorators/nodeDecorator.js";
-import type { StateManager } from "./stateManager";
+import type { StateManager } from "./stateManager.js";
 /**
  * Function used to force a rebuild of the node system
  * @param source source object

package/nodeGraphSystem/frameNodePort.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
-import type { IDisplayManager } from "./interfaces/displayManager";
+import type { IDisplayManager } from "./interfaces/displayManager.js";
 import { Observable } from "@babylonjs/core/Misc/observable.js";
 import type { Nullable } from "@babylonjs/core/types.js";
-import type { IPortData } from "./interfaces/portData";
-import { NodePort } from "./nodePort";
-import type { GraphNode } from "./graphNode";
-import type { FramePortPosition } from "./graphFrame";
-import type { StateManager } from "./stateManager";
+import type { IPortData } from "./interfaces/portData.js";
+import { NodePort } from "./nodePort.js";
+import type { GraphNode } from "./graphNode.js";
+import type { FramePortPosition } from "./graphFrame.js";
+import type { StateManager } from "./stateManager.js";
 export declare class FrameNodePort extends NodePort {
     portData: IPortData;
     node: GraphNode;

package/nodeGraphSystem/graphCanvas.d.ts CHANGED Viewed

@@ -1,14 +1,14 @@
 import * as React from "react";
-import { GraphNode } from "./graphNode";
+import { GraphNode } from "./graphNode.js";
 import type { Nullable } from "@babylonjs/core/types.js";
-import { NodeLink } from "./nodeLink";
-import { NodePort } from "./nodePort";
-import { GraphFrame } from "./graphFrame";
-import type { IEditorData, IFrameData } from "./interfaces/nodeLocationInfo";
-import type { StateManager } from "./stateManager";
-import type { INodeData } from "./interfaces/nodeData";
-import type { IPortData } from "./interfaces/portData";
-import type { INodeContainer } from "./interfaces/nodeContainer";
+import { NodeLink } from "./nodeLink.js";
+import { NodePort } from "./nodePort.js";
+import { GraphFrame } from "./graphFrame.js";
+import type { IEditorData, IFrameData } from "./interfaces/nodeLocationInfo.js";
+import type { StateManager } from "./stateManager.js";
+import type { INodeData } from "./interfaces/nodeData.js";
+import type { IPortData } from "./interfaces/portData.js";
+import type { INodeContainer } from "./interfaces/nodeContainer.js";
 export interface IGraphCanvasComponentProps {
     stateManager: StateManager;
     onEmitNewNode: (nodeData: INodeData) => GraphNode;

package/nodeGraphSystem/graphFrame.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import type { GraphNode } from "./graphNode";
-import type { GraphCanvasComponent } from "./graphCanvas";
+import type { GraphNode } from "./graphNode.js";
+import type { GraphCanvasComponent } from "./graphCanvas.js";
 import type { Nullable } from "@babylonjs/core/types.js";
 import { Observable } from "@babylonjs/core/Misc/observable.js";
 import { Color3 } from "@babylonjs/core/Maths/math.color.js";
-import { FrameNodePort } from "./frameNodePort";
-import type { IFrameData } from "./interfaces/nodeLocationInfo";
+import { FrameNodePort } from "./frameNodePort.js";
+import type { IFrameData } from "./interfaces/nodeLocationInfo.js";
 export declare enum FramePortPosition {
     Top = 0,
     Middle = 1,

package/nodeGraphSystem/graphNode.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import type { Nullable } from "@babylonjs/core/types.js";
-import type { GraphCanvasComponent } from "./graphCanvas";
-import { NodePort } from "./nodePort";
-import type { GraphFrame } from "./graphFrame";
-import type { NodeLink } from "./nodeLink";
-import type { StateManager } from "./stateManager";
-import type { INodeData } from "./interfaces/nodeData";
-import type { IPortData } from "./interfaces/portData";
+import type { GraphCanvasComponent } from "./graphCanvas.js";
+import { NodePort } from "./nodePort.js";
+import type { GraphFrame } from "./graphFrame.js";
+import type { NodeLink } from "./nodeLink.js";
+import type { StateManager } from "./stateManager.js";
+import type { INodeData } from "./interfaces/nodeData.js";
+import type { IPortData } from "./interfaces/portData.js";
 import type { IEditablePropertyOption } from "@babylonjs/core/Decorators/nodeDecorator.js";
 export declare class GraphNode {
     content: INodeData;

package/nodeGraphSystem/interfaces/displayManager.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { Nullable } from "@babylonjs/core/types.js";
-import type { StateManager } from "../stateManager";
-import type { INodeData } from "./nodeData";
-import type { IPortData } from "./portData";
+import type { StateManager } from "../stateManager.js";
+import type { INodeData } from "./nodeData.js";
+import type { IPortData } from "./portData.js";
 export interface VisualContentDescription {
     [key: string]: HTMLElement;
 }

package/nodeGraphSystem/interfaces/nodeContainer.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { GraphNode } from "../graphNode";
-import type { INodeData } from "./nodeData";
+import type { GraphNode } from "../graphNode.js";
+import type { INodeData } from "./nodeData.js";
 export interface INodeContainer {
     nodes: GraphNode[];
     appendNode(data: INodeData): GraphNode;

package/nodeGraphSystem/interfaces/nodeData.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { Nullable } from "@babylonjs/core/types.js";
-import type { IPortData } from "./portData";
+import type { IPortData } from "./portData.js";
 export interface INodeData {
     data: any;
     name: string;

package/nodeGraphSystem/interfaces/portData.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { Nullable } from "@babylonjs/core/types.js";
-import type { GraphNode } from "../graphNode";
+import type { GraphNode } from "../graphNode.js";
 export declare enum PortDataDirection {
     /** Input */
     Input = 0,

package/nodeGraphSystem/interfaces/propertyComponentProps.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { StateManager } from "../stateManager";
-import type { INodeData } from "./nodeData";
+import type { StateManager } from "../stateManager.js";
+import type { INodeData } from "./nodeData.js";
 export interface IPropertyComponentProps {
     stateManager: StateManager;
     nodeData: INodeData;

package/nodeGraphSystem/interfaces/selectionChangedOptions.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 import type { Nullable } from "@babylonjs/core/types.js";
-import type { GraphFrame } from "../graphFrame";
-import type { GraphNode } from "../graphNode";
-import type { NodeLink } from "../nodeLink";
-import type { NodePort } from "../nodePort";
-import type { FramePortData } from "../types/framePortData";
+import type { GraphFrame } from "../graphFrame.js";
+import type { GraphNode } from "../graphNode.js";
+import type { NodeLink } from "../nodeLink.js";
+import type { NodePort } from "../nodePort.js";
+import type { FramePortData } from "../types/framePortData.js";
 export interface ISelectionChangedOptions {
     selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>;
     forceKeepSelection?: boolean;

package/nodeGraphSystem/nodeLink.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { FrameNodePort } from "./frameNodePort";
-import type { NodePort } from "./nodePort";
-import type { GraphNode } from "./graphNode";
-import type { GraphCanvasComponent } from "./graphCanvas";
+import type { FrameNodePort } from "./frameNodePort.js";
+import type { NodePort } from "./nodePort.js";
+import type { GraphNode } from "./graphNode.js";
+import type { GraphCanvasComponent } from "./graphCanvas.js";
 export declare class NodeLink {
     private _graphCanvas;
     private _portA;

package/nodeGraphSystem/nodePort.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 import type { Nullable } from "@babylonjs/core/types.js";
 import type { Observer } from "@babylonjs/core/Misc/observable.js";
 import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
-import type { GraphNode } from "./graphNode";
-import type { StateManager } from "./stateManager";
-import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions";
-import type { FrameNodePort } from "./frameNodePort";
-import type { IDisplayManager } from "./interfaces/displayManager";
-import { type IPortData } from "./interfaces/portData";
+import type { GraphNode } from "./graphNode.js";
+import type { StateManager } from "./stateManager.js";
+import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions.js";
+import type { FrameNodePort } from "./frameNodePort.js";
+import type { IDisplayManager } from "./interfaces/displayManager.js";
+import { type IPortData } from "./interfaces/portData.js";
 export declare class NodePort {
     portData: IPortData;
     node: GraphNode;

package/nodeGraphSystem/propertyLedger.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { ComponentClass } from "react";
-import type { IPropertyComponentProps } from "./interfaces/propertyComponentProps";
+import type { IPropertyComponentProps } from "./interfaces/propertyComponentProps.js";
 export declare class PropertyLedger {
     static DefaultControl: ComponentClass<IPropertyComponentProps>;
     static RegisteredControls: {

package/nodeGraphSystem/searchBox.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { StateManager } from "./stateManager";
+import type { StateManager } from "./stateManager.js";
 import "./searchBox.scss";
 export interface ISearchBoxComponentProps {
     stateManager: StateManager;

package/nodeGraphSystem/stateManager.d.ts CHANGED Viewed

@@ -1,15 +1,15 @@
 import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
 import { Observable } from "@babylonjs/core/Misc/observable.js";
 import type { Nullable } from "@babylonjs/core/types.js";
-import type { FrameNodePort } from "./frameNodePort";
-import type { GraphFrame } from "./graphFrame";
-import type { GraphNode } from "./graphNode";
-import type { INodeContainer } from "./interfaces/nodeContainer";
-import type { INodeData } from "./interfaces/nodeData";
-import type { IPortData } from "./interfaces/portData";
-import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions";
-import type { NodePort } from "./nodePort";
-import type { HistoryStack } from "../historyStack";
+import type { FrameNodePort } from "./frameNodePort.js";
+import type { GraphFrame } from "./graphFrame.js";
+import type { GraphNode } from "./graphNode.js";
+import type { INodeContainer } from "./interfaces/nodeContainer.js";
+import type { INodeData } from "./interfaces/nodeData.js";
+import type { IPortData } from "./interfaces/portData.js";
+import type { ISelectionChangedOptions } from "./interfaces/selectionChangedOptions.js";
+import type { NodePort } from "./nodePort.js";
+import type { HistoryStack } from "../historyStack.js";
 import type { Scene } from "@babylonjs/core/scene.js";
 export declare class StateManager {
     data: any;

package/nodeGraphSystem/tools.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import type { GraphCanvasComponent } from "./graphCanvas";
-import type { GraphNode } from "./graphNode";
-import type { NodeLink } from "./nodeLink";
-import type { FramePortData } from "./types/framePortData";
+import type { GraphCanvasComponent } from "./graphCanvas.js";
+import type { GraphNode } from "./graphNode.js";
+import type { NodeLink } from "./nodeLink.js";
+import type { FramePortData } from "./types/framePortData.js";
 export declare const IsFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
 export declare const RefreshNode: (node: GraphNode, visitedNodes?: Set<GraphNode>, visitedLinks?: Set<NodeLink>, canvas?: GraphCanvasComponent) => void;
 export declare const BuildFloatUI: (container: HTMLDivElement, document: Document, displayName: string, isInteger: boolean, source: any, propertyName: string, onChange: () => void, min?: number, max?: number, visualPropertiesRefresh?: Array<() => void>, additionalClassName?: string) => void;

package/nodeGraphSystem/typeLedger.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import type { INodeContainer } from "./interfaces/nodeContainer";
-import type { INodeData } from "./interfaces/nodeData";
-import type { IPortData } from "./interfaces/portData";
-import type { NodePort } from "./nodePort";
+import type { INodeContainer } from "./interfaces/nodeContainer.js";
+import type { INodeData } from "./interfaces/nodeData.js";
+import type { IPortData } from "./interfaces/portData.js";
+import type { NodePort } from "./nodePort.js";
 export declare class TypeLedger {
     static PortDataBuilder: (port: NodePort, nodeContainer: INodeContainer) => IPortData;
     static NodeDataBuilder: (data: any, nodeContainer: INodeContainer) => INodeData;

package/nodeGraphSystem/types/framePortData.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { GraphFrame } from "../graphFrame";
-import type { FrameNodePort } from "../frameNodePort";
+import type { GraphFrame } from "../graphFrame.js";
+import type { FrameNodePort } from "../frameNodePort.js";
 export type FramePortData = {
     frame: GraphFrame;
     port: FrameNodePort;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/shared-ui-components",
-    "version": "8.1.1",
+    "version": "8.2.1",
     "main": "index.js",
     "module": "index.js",
     "types": "index.d.ts",
@@ -28,10 +28,10 @@
     "peerDependencies": {
         "@types/dagre": "^0.7.47",
         "dagre": "^0.8.5",
-        "react": "^17.0.2",
+        "react": "^18.2.0",
         "react-dnd": "15.0.1",
         "react-dnd-touch-backend": "15.0.1",
-        "react-dom": "^17.0.2"
+        "react-dom": "^18.2.0"
     },
     "keywords": [
         "3D",

package/split/splitContainer.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-import { SplitDirection } from "./splitContext";
+import type { PropsWithChildren } from "react";
+import { SplitDirection } from "./splitContext.js";
 /**
  * Split container properties
  */
@@ -54,4 +55,4 @@ export interface ISplitContainerProps {
  * @param props defines the split container properties
  * @returns the split container component
  */
-export declare const SplitContainer: React.FC<ISplitContainerProps>;
+export declare const SplitContainer: React.FC<PropsWithChildren<ISplitContainerProps>>;

package/split/splitContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"splitContainer.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/split/splitContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from \"react\";\r\nimport * as styles from \"./splitContainer.module.scss\";\r\nimport { ControlledSize, SplitDirection, SplitContext } from \"./splitContext\";\r\n\r\n/*\r\n Split container properties\r\n /\r\nexport interface ISplitContainerProps {\r\n /\r\n Unique identifier\r\n /\r\n id?: string;\r\n\r\n /\r\n Split direction\r\n /\r\n direction: SplitDirection;\r\n\r\n /\r\n Minimum size for the floating elements\r\n /\r\n floatingMinSize?: number;\r\n\r\n /\r\n RefObject to the root div element\r\n /\r\n containerRef?: React.RefObject<HTMLDivElement>;\r\n\r\n /\r\n Optional class name\r\n /\r\n className?: string;\r\n\r\n /\r\n Pointer down\r\n * @param event pointer events\r\n /\r\n onPointerDown?: (event: React.PointerEvent) => void;\r\n\r\n /\r\n Pointer move\r\n * @param event pointer events\r\n /\r\n onPointerMove?: (event: React.PointerEvent) => void;\r\n\r\n /\r\n Pointer up\r\n * @param event pointer events\r\n /\r\n onPointerUp?: (event: React.PointerEvent) => void;\r\n\r\n /\r\n Drop\r\n * @param event drag events\r\n /\r\n onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;\r\n\r\n /\r\n Drag over\r\n * @param event drag events\r\n /\r\n onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;\r\n}\r\n\r\n/\r\n Creates a split container component\r\n * @param props defines the split container properties\r\n * @returns the split container component\r\n /\r\nexport const SplitContainer: React.FC<ISplitContainerProps> = (props) => {\r\n const elementRef: React.RefObject<HTMLDivElement> = props.containerRef \|\| useRef(null);\r\n const sizes: number[] = [];\r\n const floatingCells: boolean[] = [];\r\n const noInitialSizes: boolean[] = [];\r\n const floatingMinSize = props.floatingMinSize \|\| 200;\r\n const controllers: number[][] = [];\r\n const minSizes: number[] = [];\r\n const maxSizes: number[] = [];\r\n\r\n const buildGridDefinition = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n const children = elementRef.current.children;\r\n\r\n let gridIndex = 1;\r\n const pickArray = Array.from(children);\r\n let gridDefinition = \"\";\r\n for (const child of children) {\r\n const childElement = child as HTMLElement;\r\n if (child.classList.contains(styles[\"splitter\"])) {\r\n gridDefinition += \"auto \";\r\n } else {\r\n const sourceIndex = pickArray.indexOf(child);\r\n if (floatingCells[sourceIndex] \|\| noInitialSizes[sourceIndex]) {\r\n gridDefinition += \"1fr \";\r\n } else {\r\n gridDefinition += \"auto \";\r\n }\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childElement.style.gridRow = \"1\";\r\n childElement.style.gridColumn = gridIndex.toString();\r\n } else {\r\n childElement.style.gridColumn = \"1\";\r\n childElement.style.gridRow = gridIndex.toString();\r\n }\r\n\r\n gridIndex++;\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n elementRef.current.style.gridTemplateRows = \"100%\";\r\n elementRef.current.style.gridTemplateColumns = gridDefinition;\r\n } else {\r\n elementRef.current.style.gridTemplateColumns = \"100%\";\r\n elementRef.current.style.gridTemplateRows = gridDefinition;\r\n }\r\n };\r\n\r\n const handleResize = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n // Check if we have enough room for everyone\r\n const children = elementRef.current.children;\r\n for (let i = 0; i < children.length; i++) {\r\n if (!floatingCells[i]) {\r\n continue;\r\n }\r\n\r\n const child = children[i] as HTMLElement;\r\n let childsize = 0;\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childsize = child.getBoundingClientRect().width;\r\n } else {\r\n childsize = child.getBoundingClientRect().height;\r\n }\r\n\r\n if (childsize < floatingMinSize) {\r\n const missing = Math.floor(floatingMinSize - childsize);\r\n let done = 0;\r\n\r\n // picking the controller in order and try to reduce their size to fit\r\n for (let j = 0; j < controllers[i].length; j++) {\r\n const controllerIndex = controllers[i][j];\r\n const controller = children[controllerIndex] as HTMLElement;\r\n const currentSize = props.direction === SplitDirection.Horizontal ? controller.getBoundingClientRect().width : controller.getBoundingClientRect().height;\r\n let newSize = currentSize - missing;\r\n if (minSizes[controllerIndex]) {\r\n newSize = Math.max(newSize, minSizes[controllerIndex]);\r\n }\r\n if (props.direction === SplitDirection.Horizontal) {\r\n controller.style.width = `${newSize}px`;\r\n } else {\r\n controller.style.height = `${newSize}px`;\r\n }\r\n\r\n done += currentSize - newSize;\r\n\r\n if (done === missing) {\r\n // We made it\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n buildGridDefinition();\r\n\r\n // Add event listener for window resize\r\n window.addEventListener(\"resize\", handleResize);\r\n\r\n // Cleanup the event listener on component unmount\r\n return () => {\r\n window.removeEventListener(\"resize\", handleResize);\r\n };\r\n }, []);\r\n\r\n const drag = (offset: number, source: HTMLElement, controlledSide: ControlledSize) => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n const children = elementRef.current.children;\r\n const childArray = Array.from(children) as HTMLElement[];\r\n const sourceIndex = childArray.indexOf(source);\r\n if (sourceIndex <= 0) {\r\n return;\r\n }\r\n\r\n let current = 0;\r\n if (controlledSide === ControlledSize.First) {\r\n current = sourceIndex - 1;\r\n } else {\r\n current = sourceIndex + 1;\r\n }\r\n const minSize = minSizes[current] \|\| 0;\r\n const maxSize = maxSizes[current];\r\n\r\n noInitialSizes[current] = false;\r\n buildGridDefinition();\r\n\r\n let newSize = Math.floor(controlledSide === ControlledSize.First ? sizes[current] + offset : sizes[current] - offset);\r\n\r\n // Min size check\r\n if (newSize < minSize) {\r\n newSize = minSize;\r\n }\r\n\r\n // Max size check\r\n if (maxSize && newSize > maxSize) {\r\n newSize = maxSize;\r\n }\r\n\r\n // Max size check across the whole container\r\n const maxContainerSize = sizes.reduce((a, b) => a + b, 0) \|\| 0;\r\n let totalSize = 0;\r\n let totalFloating = 0;\r\n for (let i = 0; i < children.length; i++) {\r\n if (floatingCells[i]) {\r\n totalFloating++;\r\n } else {\r\n totalSize += i === current ? newSize : sizes[i];\r\n }\r\n }\r\n\r\n if (maxContainerSize - totalSize < floatingMinSize totalFloating) {\r\n newSize = maxContainerSize - floatingMinSize * totalFloating;\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childArray[current].style.width = `${newSize}px`;\r\n } else {\r\n childArray[current].style.height = `${newSize}px`;\r\n }\r\n };\r\n\r\n const beginDrag = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n const children = elementRef.current.children;\r\n sizes.length = 0;\r\n for (const child of children) {\r\n const childElement = child as HTMLElement;\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n sizes.push(childElement.getBoundingClientRect().width);\r\n } else {\r\n sizes.push(childElement.getBoundingClientRect().height);\r\n }\r\n }\r\n };\r\n\r\n const endDrag = () => {\r\n sizes.length = 0;\r\n };\r\n\r\n // We assume splitter are not flagging floating cells in a different way\r\n const sync = (source: HTMLElement, controlledSide: ControlledSize, size?: number, minSize?: number, maxSize?: number) => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n const children = elementRef.current.children;\r\n const childArray = Array.from(children) as HTMLElement[];\r\n const sourceIndex = childArray.indexOf(source);\r\n if (sourceIndex <= 0) {\r\n return;\r\n }\r\n\r\n let current = 0;\r\n let other = 0;\r\n if (controlledSide === ControlledSize.First) {\r\n current = sourceIndex - 1;\r\n other = sourceIndex + 1;\r\n } else {\r\n current = sourceIndex + 1;\r\n other = sourceIndex - 1;\r\n }\r\n\r\n if (size !== undefined) {\r\n const sizeString = `${size \| 0}px`;\r\n\r\n if (!childArray[current].style.width) {\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childArray[current].style.width = sizeString;\r\n } else {\r\n childArray[current].style.height = sizeString;\r\n }\r\n }\r\n } else {\r\n noInitialSizes[current] = true;\r\n }\r\n\r\n if (minSize !== undefined) {\r\n minSizes[current] = minSize;\r\n }\r\n\r\n if (maxSize !== undefined) {\r\n maxSizes[current] = maxSize;\r\n }\r\n\r\n if (!controllers[other]) {\r\n controllers[other] = [];\r\n }\r\n controllers[other].push(current);\r\n floatingCells[other] = true;\r\n };\r\n\r\n return (\r\n <SplitContext.Provider value={{ direction: props.direction, drag, beginDrag, endDrag, sync }}>\r\n <div\r\n id={props.id}\r\n className={styles[\"split-container\"] + \" \" + props.className}\r\n ref={elementRef}\r\n onPointerDown={(evt) => props.onPointerDown && props.onPointerDown(evt)}\r\n onPointerMove={(evt) => props.onPointerMove && props.onPointerMove(evt)}\r\n onPointerUp={(evt) => props.onPointerUp && props.onPointerUp(evt)}\r\n onDrop={(evt) => props.onDrop && props.onDrop(evt)}\r\n onDragOver={(evt) => props.onDragOver && props.onDragOver(evt)}\r\n >\r\n {props.children}\r\n </div>\r\n </SplitContext.Provider>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"splitContainer.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/split/splitContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { PropsWithChildren } from \"react\";\r\nimport { useEffect, useRef } from \"react\";\r\nimport * as styles from \"./splitContainer.module.scss\";\r\nimport { ControlledSize, SplitDirection, SplitContext } from \"./splitContext\";\r\n\r\n/*\r\n Split container properties\r\n /\r\nexport interface ISplitContainerProps {\r\n /\r\n Unique identifier\r\n /\r\n id?: string;\r\n\r\n /\r\n Split direction\r\n /\r\n direction: SplitDirection;\r\n\r\n /\r\n Minimum size for the floating elements\r\n /\r\n floatingMinSize?: number;\r\n\r\n /\r\n RefObject to the root div element\r\n /\r\n containerRef?: React.RefObject<HTMLDivElement>;\r\n\r\n /\r\n Optional class name\r\n /\r\n className?: string;\r\n\r\n /\r\n Pointer down\r\n * @param event pointer events\r\n /\r\n onPointerDown?: (event: React.PointerEvent) => void;\r\n\r\n /\r\n Pointer move\r\n * @param event pointer events\r\n /\r\n onPointerMove?: (event: React.PointerEvent) => void;\r\n\r\n /\r\n Pointer up\r\n * @param event pointer events\r\n /\r\n onPointerUp?: (event: React.PointerEvent) => void;\r\n\r\n /\r\n Drop\r\n * @param event drag events\r\n /\r\n onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;\r\n\r\n /\r\n Drag over\r\n * @param event drag events\r\n /\r\n onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;\r\n}\r\n\r\n/\r\n Creates a split container component\r\n * @param props defines the split container properties\r\n * @returns the split container component\r\n /\r\nexport const SplitContainer: React.FC<PropsWithChildren<ISplitContainerProps>> = (props) => {\r\n const elementRef: React.RefObject<HTMLDivElement> = props.containerRef \|\| useRef(null);\r\n const sizes: number[] = [];\r\n const floatingCells: boolean[] = [];\r\n const noInitialSizes: boolean[] = [];\r\n const floatingMinSize = props.floatingMinSize \|\| 200;\r\n const controllers: number[][] = [];\r\n const minSizes: number[] = [];\r\n const maxSizes: number[] = [];\r\n\r\n const buildGridDefinition = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n const children = elementRef.current.children;\r\n\r\n let gridIndex = 1;\r\n const pickArray = Array.from(children);\r\n let gridDefinition = \"\";\r\n for (const child of children) {\r\n const childElement = child as HTMLElement;\r\n if (child.classList.contains(styles[\"splitter\"])) {\r\n gridDefinition += \"auto \";\r\n } else {\r\n const sourceIndex = pickArray.indexOf(child);\r\n if (floatingCells[sourceIndex] \|\| noInitialSizes[sourceIndex]) {\r\n gridDefinition += \"1fr \";\r\n } else {\r\n gridDefinition += \"auto \";\r\n }\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childElement.style.gridRow = \"1\";\r\n childElement.style.gridColumn = gridIndex.toString();\r\n } else {\r\n childElement.style.gridColumn = \"1\";\r\n childElement.style.gridRow = gridIndex.toString();\r\n }\r\n\r\n gridIndex++;\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n elementRef.current.style.gridTemplateRows = \"100%\";\r\n elementRef.current.style.gridTemplateColumns = gridDefinition;\r\n } else {\r\n elementRef.current.style.gridTemplateColumns = \"100%\";\r\n elementRef.current.style.gridTemplateRows = gridDefinition;\r\n }\r\n };\r\n\r\n const handleResize = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n // Check if we have enough room for everyone\r\n const children = elementRef.current.children;\r\n for (let i = 0; i < children.length; i++) {\r\n if (!floatingCells[i]) {\r\n continue;\r\n }\r\n\r\n const child = children[i] as HTMLElement;\r\n let childsize = 0;\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childsize = child.getBoundingClientRect().width;\r\n } else {\r\n childsize = child.getBoundingClientRect().height;\r\n }\r\n\r\n if (childsize < floatingMinSize) {\r\n const missing = Math.floor(floatingMinSize - childsize);\r\n let done = 0;\r\n\r\n // picking the controller in order and try to reduce their size to fit\r\n for (let j = 0; j < controllers[i].length; j++) {\r\n const controllerIndex = controllers[i][j];\r\n const controller = children[controllerIndex] as HTMLElement;\r\n const currentSize = props.direction === SplitDirection.Horizontal ? controller.getBoundingClientRect().width : controller.getBoundingClientRect().height;\r\n let newSize = currentSize - missing;\r\n if (minSizes[controllerIndex]) {\r\n newSize = Math.max(newSize, minSizes[controllerIndex]);\r\n }\r\n if (props.direction === SplitDirection.Horizontal) {\r\n controller.style.width = `${newSize}px`;\r\n } else {\r\n controller.style.height = `${newSize}px`;\r\n }\r\n\r\n done += currentSize - newSize;\r\n\r\n if (done === missing) {\r\n // We made it\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n buildGridDefinition();\r\n\r\n // Add event listener for window resize\r\n window.addEventListener(\"resize\", handleResize);\r\n\r\n // Cleanup the event listener on component unmount\r\n return () => {\r\n window.removeEventListener(\"resize\", handleResize);\r\n };\r\n }, []);\r\n\r\n const drag = (offset: number, source: HTMLElement, controlledSide: ControlledSize) => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n const children = elementRef.current.children;\r\n const childArray = Array.from(children) as HTMLElement[];\r\n const sourceIndex = childArray.indexOf(source);\r\n if (sourceIndex <= 0) {\r\n return;\r\n }\r\n\r\n let current = 0;\r\n if (controlledSide === ControlledSize.First) {\r\n current = sourceIndex - 1;\r\n } else {\r\n current = sourceIndex + 1;\r\n }\r\n const minSize = minSizes[current] \|\| 0;\r\n const maxSize = maxSizes[current];\r\n\r\n noInitialSizes[current] = false;\r\n buildGridDefinition();\r\n\r\n let newSize = Math.floor(controlledSide === ControlledSize.First ? sizes[current] + offset : sizes[current] - offset);\r\n\r\n // Min size check\r\n if (newSize < minSize) {\r\n newSize = minSize;\r\n }\r\n\r\n // Max size check\r\n if (maxSize && newSize > maxSize) {\r\n newSize = maxSize;\r\n }\r\n\r\n // Max size check across the whole container\r\n const maxContainerSize = sizes.reduce((a, b) => a + b, 0) \|\| 0;\r\n let totalSize = 0;\r\n let totalFloating = 0;\r\n for (let i = 0; i < children.length; i++) {\r\n if (floatingCells[i]) {\r\n totalFloating++;\r\n } else {\r\n totalSize += i === current ? newSize : sizes[i];\r\n }\r\n }\r\n\r\n if (maxContainerSize - totalSize < floatingMinSize totalFloating) {\r\n newSize = maxContainerSize - floatingMinSize * totalFloating;\r\n }\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childArray[current].style.width = `${newSize}px`;\r\n } else {\r\n childArray[current].style.height = `${newSize}px`;\r\n }\r\n };\r\n\r\n const beginDrag = () => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n const children = elementRef.current.children;\r\n sizes.length = 0;\r\n for (const child of children) {\r\n const childElement = child as HTMLElement;\r\n\r\n if (props.direction === SplitDirection.Horizontal) {\r\n sizes.push(childElement.getBoundingClientRect().width);\r\n } else {\r\n sizes.push(childElement.getBoundingClientRect().height);\r\n }\r\n }\r\n };\r\n\r\n const endDrag = () => {\r\n sizes.length = 0;\r\n };\r\n\r\n // We assume splitter are not flagging floating cells in a different way\r\n const sync = (source: HTMLElement, controlledSide: ControlledSize, size?: number, minSize?: number, maxSize?: number) => {\r\n if (!elementRef.current) {\r\n return;\r\n }\r\n\r\n const children = elementRef.current.children;\r\n const childArray = Array.from(children) as HTMLElement[];\r\n const sourceIndex = childArray.indexOf(source);\r\n if (sourceIndex <= 0) {\r\n return;\r\n }\r\n\r\n let current = 0;\r\n let other = 0;\r\n if (controlledSide === ControlledSize.First) {\r\n current = sourceIndex - 1;\r\n other = sourceIndex + 1;\r\n } else {\r\n current = sourceIndex + 1;\r\n other = sourceIndex - 1;\r\n }\r\n\r\n if (size !== undefined) {\r\n const sizeString = `${size \| 0}px`;\r\n\r\n if (!childArray[current].style.width) {\r\n if (props.direction === SplitDirection.Horizontal) {\r\n childArray[current].style.width = sizeString;\r\n } else {\r\n childArray[current].style.height = sizeString;\r\n }\r\n }\r\n } else {\r\n noInitialSizes[current] = true;\r\n }\r\n\r\n if (minSize !== undefined) {\r\n minSizes[current] = minSize;\r\n }\r\n\r\n if (maxSize !== undefined) {\r\n maxSizes[current] = maxSize;\r\n }\r\n\r\n if (!controllers[other]) {\r\n controllers[other] = [];\r\n }\r\n controllers[other].push(current);\r\n floatingCells[other] = true;\r\n };\r\n\r\n return (\r\n <SplitContext.Provider value={{ direction: props.direction, drag, beginDrag, endDrag, sync }}>\r\n <div\r\n id={props.id}\r\n className={styles[\"split-container\"] + \" \" + props.className}\r\n ref={elementRef}\r\n onPointerDown={(evt) => props.onPointerDown && props.onPointerDown(evt)}\r\n onPointerMove={(evt) => props.onPointerMove && props.onPointerMove(evt)}\r\n onPointerUp={(evt) => props.onPointerUp && props.onPointerUp(evt)}\r\n onDrop={(evt) => props.onDrop && props.onDrop(evt)}\r\n onDragOver={(evt) => props.onDragOver && props.onDragOver(evt)}\r\n >\r\n {props.children}\r\n </div>\r\n </SplitContext.Provider>\r\n );\r\n};\r\n"]}