babylonjs-gui-editor 5.32.1 → 5.33.0

package/babylon.guiEditor.d.ts

@@ -1834,7 +1834,7 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
      * @param row
      * @returns
      */
-    export const getPosInLayout: (layout: BABYLON.GuiEditor.SharedUIComponents.Layout, column: number, row?: number | undefined) => LayoutColumn;
+    export const getPosInLayout: (layout: BABYLON.GuiEditor.SharedUIComponents.Layout, column: number, row?: number | undefined) => BABYLON.GuiEditor.SharedUIComponents.LayoutColumn | BABYLON.GuiEditor.SharedUIComponents.LayoutTabsRow;
     /**
      * Remove a row in position row, column from the layout, and redistribute heights of remaining rows
      * @param layout
@@ -2034,6 +2034,285 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * Props for the connector
+     */
+    export interface IGraphConnectorHandlerProps {
+        /**
+         * id of the parent node
+         */
+        parentId: string;
+        /**
+         * x position of the parent node
+         */
+        parentX: number;
+        /**
+         * y position of the parent node
+         */
+        parentY: number;
+        /**
+         * x position of the connector relative to the parent node
+         */
+        offsetX?: number;
+        /**
+         * y position of the connector relative to the parent node
+         */
+        offsetY?: number;
+        /**
+         * width of the parent node
+         */
+        parentWidth: number;
+        /**
+         * height of the parent node
+         */
+        parentHeight: number;
+        /**
+         * id of the container where its parent node is
+         */
+        parentContainerId: string;
+    }
+    /**
+     * This component is used to initiate a connection between two nodes. Simply
+     * drag the handle in a node and drop it in another node to create a connection.
+     */
+    export var GraphConnectorHandler: React.FC<IGraphConnectorHandlerProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IGraphContainerProps {
+    }
+    /**
+     * This component is just a simple container to keep the nodes and lines containers
+     * together
+     * @param props
+     * @returns
+     */
+    export var GraphContainer: React.FC<IGraphContainerProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /// <reference types="react" />
+    /**
+     * this context is used to pass callbacks to the graph nodes and connections
+     */
+    export interface IGraphContext {
+        onNodesConnected?: (sourceId: string, targetId: string) => void;
+        onLineSelected?: (lineId: string) => void;
+        onNodeSelected?: (nodeId: string) => void;
+    }
+    export var GraphContextManager: import("react").Context<IGraphContext>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * props for the GraphLine component
+     */
+    export interface IGraphLineProps {
+        /**
+         * id of the line. temporary lines can have no id
+         */
+        id?: string;
+        /**
+         * starting x pos of the line
+         */
+        x1: number;
+        /**
+         * ending x pos of the line
+         */
+        x2: number;
+        /**
+         * starting y pos of the line
+         */
+        y1: number;
+        /**
+         * ending y pos of the line
+         */
+        y2: number;
+        /**
+         * is the line selected
+         */
+        selected?: boolean;
+        /**
+         * does the line have a direction
+         */
+        directional?: boolean;
+    }
+    export const MarkerArrowId = "arrow";
+    /**
+     * This component draws a SVG line between two points, with an optional marker
+     * indicating direction
+     */
+    export var GraphLine: React.FC<IGraphLineProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * props for the GraphLineContainer
+     */
+    export interface IGraphLinesContainerProps {
+        /**
+         * id of the container
+         */
+        id: string;
+    }
+    /**
+     * this component handles the dragging of new connections
+     * @param props
+     * @returns
+     */
+    export var GraphLinesContainer: React.FC<IGraphLinesContainerProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IGraphNodeProps {
+        id: string;
+        name: string;
+        x: number;
+        y: number;
+        selected?: boolean;
+        width?: number;
+        height?: number;
+        highlighted?: boolean;
+        parentContainerId: string;
+    }
+    export var GraphNode: React.FC<IGraphNodeProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IGraphContainerProps {
+        onNodeMoved: (id: string, x: number, y: number) => void;
+        id: string;
+    }
+    /**
+     * This component contains all the nodes and handles their dragging
+     */
+    export var GraphNodesContainer: React.FC<IGraphContainerProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export type IVisualRecordsType = Record<string, {
+        x: number;
+        y: number;
+    }>;
+    export type IConnectionType = {
+        id: string;
+        sourceId: string;
+        targetId: string;
+    };
+    export type ICustomDataType = {
+        type: string;
+        value: any;
+    };
+    export type INodeType = {
+        id: string;
+        label: string;
+        customData?: ICustomDataType;
+    };
+    /**
+     * props for the node renderer
+     */
+    export interface INodeRendererProps {
+        /**
+         * array of connections between nodes
+         */
+        connections: IConnectionType[];
+        /**
+         * function called when a new connection is created
+         */
+        updateConnections: (sourceId: string, targetId: string) => void;
+        /**
+         * function called when a connection is deleted
+         */
+        deleteLine: (lineId: string) => void;
+        /**
+         * function called when a node is deleted
+         */
+        deleteNode: (nodeId: string) => void;
+        /**
+         * array of all nodes
+         */
+        nodes: INodeType[];
+        /**
+         * id of the node to highlight
+         */
+        highlightedNode?: Nullable<string>;
+        /**
+         * function to be called if a node is selected
+         */
+        selectNode?: (nodeId: Nullable<string>) => void;
+        /**
+         * id of this renderer
+         */
+        id: string;
+        /**
+         * optional list of custom components to be rendered inside nodes of
+         * a certain type
+         */
+        customComponents?: Record<string, React.ComponentType<any>>;
+    }
+    /**
+     * This component is a bridge between the app logic related to the graph, and the actual rendering
+     * of it. It manages the nodes' positions and selection states.
+     * @param props
+     * @returns
+     */
+    export const NodeRenderer: (props: INodeRendererProps) => JSX.Element;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * utility hook to assist using the graph context
+     * @returns
+     */
+    export const useGraphContext: () => IGraphContext;
+
+
+
 }
 declare module BABYLON {
 

package/babylon.guiEditor.module.d.ts

@@ -2065,7 +2065,7 @@ export enum ResizeDirections {
 
 }
 declare module "babylonjs-gui-editor/components/layout/utils" {
-import { Layout } from "babylonjs-gui-editor/components/layout/types";
+import { Layout, LayoutColumn, LayoutTabsRow } from "babylonjs-gui-editor/components/layout/types";
 /**
  * Given a column and row number in the layout, return the corresponding column/row
  * @param layout
@@ -2073,7 +2073,7 @@ import { Layout } from "babylonjs-gui-editor/components/layout/types";
  * @param row
  * @returns
  */
-export const getPosInLayout: (layout: Layout, column: number, row?: number | undefined) => import("babylonjs-gui-editor/components/layout/types").LayoutTabsRow | import("./types").LayoutColumn;
+export const getPosInLayout: (layout: Layout, column: number, row?: number | undefined) => LayoutColumn | LayoutTabsRow;
 /**
  * Remove a row in position row, column from the layout, and redistribute heights of remaining rows
  * @param layout
@@ -2256,6 +2256,248 @@ export interface MessageDialogProps {
 }
 export const MessageDialog: React.FC<MessageDialogProps>;
 
+}
+declare module "babylonjs-gui-editor/components/reactGraphSystem/GraphConnectorHandle" {
+import { FC } from "react";
+/**
+ * Props for the connector
+ */
+export interface IGraphConnectorHandlerProps {
+    /**
+     * id of the parent node
+     */
+    parentId: string;
+    /**
+     * x position of the parent node
+     */
+    parentX: number;
+    /**
+     * y position of the parent node
+     */
+    parentY: number;
+    /**
+     * x position of the connector relative to the parent node
+     */
+    offsetX?: number;
+    /**
+     * y position of the connector relative to the parent node
+     */
+    offsetY?: number;
+    /**
+     * width of the parent node
+     */
+    parentWidth: number;
+    /**
+     * height of the parent node
+     */
+    parentHeight: number;
+    /**
+     * id of the container where its parent node is
+     */
+    parentContainerId: string;
+}
+/**
+ * This component is used to initiate a connection between two nodes. Simply
+ * drag the handle in a node and drop it in another node to create a connection.
+ */
+export const GraphConnectorHandler: FC<IGraphConnectorHandlerProps>;
+
+}
+declare module "babylonjs-gui-editor/components/reactGraphSystem/GraphContainer" {
+import { FC } from "react";
+export interface IGraphContainerProps {
+}
+/**
+ * This component is just a simple container to keep the nodes and lines containers
+ * together
+ * @param props
+ * @returns
+ */
+export const GraphContainer: FC<IGraphContainerProps>;
+
+}
+declare module "babylonjs-gui-editor/components/reactGraphSystem/GraphContextManager" {
+/// <reference types="react" />
+/**
+ * this context is used to pass callbacks to the graph nodes and connections
+ */
+export interface IGraphContext {
+    onNodesConnected?: (sourceId: string, targetId: string) => void;
+    onLineSelected?: (lineId: string) => void;
+    onNodeSelected?: (nodeId: string) => void;
+}
+export const GraphContextManager: import("react").Context<IGraphContext>;
+
+}
+declare module "babylonjs-gui-editor/components/reactGraphSystem/GraphLine" {
+import { FC } from "react";
+/**
+ * props for the GraphLine component
+ */
+export interface IGraphLineProps {
+    /**
+     * id of the line. temporary lines can have no id
+     */
+    id?: string;
+    /**
+     * starting x pos of the line
+     */
+    x1: number;
+    /**
+     * ending x pos of the line
+     */
+    x2: number;
+    /**
+     * starting y pos of the line
+     */
+    y1: number;
+    /**
+     * ending y pos of the line
+     */
+    y2: number;
+    /**
+     * is the line selected
+     */
+    selected?: boolean;
+    /**
+     * does the line have a direction
+     */
+    directional?: boolean;
+}
+export const MarkerArrowId = "arrow";
+/**
+ * This component draws a SVG line between two points, with an optional marker
+ * indicating direction
+ */
+export const GraphLine: FC<IGraphLineProps>;
+
+}
+declare module "babylonjs-gui-editor/components/reactGraphSystem/GraphLinesContainer" {
+import { FC } from "react";
+/**
+ * props for the GraphLineContainer
+ */
+export interface IGraphLinesContainerProps {
+    /**
+     * id of the container
+     */
+    id: string;
+}
+/**
+ * this component handles the dragging of new connections
+ * @param props
+ * @returns
+ */
+export const GraphLinesContainer: FC<IGraphLinesContainerProps>;
+
+}
+declare module "babylonjs-gui-editor/components/reactGraphSystem/GraphNode" {
+import { FC } from "react";
+export interface IGraphNodeProps {
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    selected?: boolean;
+    width?: number;
+    height?: number;
+    highlighted?: boolean;
+    parentContainerId: string;
+}
+export const GraphNode: FC<IGraphNodeProps>;
+
+}
+declare module "babylonjs-gui-editor/components/reactGraphSystem/GraphNodesContainer" {
+import { FC } from "react";
+export interface IGraphContainerProps {
+    onNodeMoved: (id: string, x: number, y: number) => void;
+    id: string;
+}
+/**
+ * This component contains all the nodes and handles their dragging
+ */
+export const GraphNodesContainer: FC<IGraphContainerProps>;
+
+}
+declare module "babylonjs-gui-editor/components/reactGraphSystem/NodeRenderer" {
+import { ComponentType } from "react";
+import { Nullable } from "babylonjs/types";
+export type IVisualRecordsType = Record<string, {
+    x: number;
+    y: number;
+}>;
+export type IConnectionType = {
+    id: string;
+    sourceId: string;
+    targetId: string;
+};
+export type ICustomDataType = {
+    type: string;
+    value: any;
+};
+export type INodeType = {
+    id: string;
+    label: string;
+    customData?: ICustomDataType;
+};
+/**
+ * props for the node renderer
+ */
+export interface INodeRendererProps {
+    /**
+     * array of connections between nodes
+     */
+    connections: IConnectionType[];
+    /**
+     * function called when a new connection is created
+     */
+    updateConnections: (sourceId: string, targetId: string) => void;
+    /**
+     * function called when a connection is deleted
+     */
+    deleteLine: (lineId: string) => void;
+    /**
+     * function called when a node is deleted
+     */
+    deleteNode: (nodeId: string) => void;
+    /**
+     * array of all nodes
+     */
+    nodes: INodeType[];
+    /**
+     * id of the node to highlight
+     */
+    highlightedNode?: Nullable<string>;
+    /**
+     * function to be called if a node is selected
+     */
+    selectNode?: (nodeId: Nullable<string>) => void;
+    /**
+     * id of this renderer
+     */
+    id: string;
+    /**
+     * optional list of custom components to be rendered inside nodes of
+     * a certain type
+     */
+    customComponents?: Record<string, ComponentType<any>>;
+}
+/**
+ * This component is a bridge between the app logic related to the graph, and the actual rendering
+ * of it. It manages the nodes' positions and selection states.
+ * @param props
+ * @returns
+ */
+export const NodeRenderer: (props: INodeRendererProps) => JSX.Element;
+
+}
+declare module "babylonjs-gui-editor/components/reactGraphSystem/useGraphContext" {
+/**
+ * utility hook to assist using the graph context
+ * @returns
+ */
+export const useGraphContext: () => import("babylonjs-gui-editor/components/reactGraphSystem/GraphContextManager").IGraphContext;
+
 }
 declare module "babylonjs-gui-editor/components/TextInputWithSubmit" {
 /// <reference types="react" />
@@ -6182,7 +6424,7 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
      * @param row
      * @returns
      */
-    export const getPosInLayout: (layout: BABYLON.GuiEditor.SharedUIComponents.Layout, column: number, row?: number | undefined) => LayoutColumn;
+    export const getPosInLayout: (layout: BABYLON.GuiEditor.SharedUIComponents.Layout, column: number, row?: number | undefined) => BABYLON.GuiEditor.SharedUIComponents.LayoutColumn | BABYLON.GuiEditor.SharedUIComponents.LayoutTabsRow;
     /**
      * Remove a row in position row, column from the layout, and redistribute heights of remaining rows
      * @param layout
@@ -6382,6 +6624,285 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * Props for the connector
+     */
+    export interface IGraphConnectorHandlerProps {
+        /**
+         * id of the parent node
+         */
+        parentId: string;
+        /**
+         * x position of the parent node
+         */
+        parentX: number;
+        /**
+         * y position of the parent node
+         */
+        parentY: number;
+        /**
+         * x position of the connector relative to the parent node
+         */
+        offsetX?: number;
+        /**
+         * y position of the connector relative to the parent node
+         */
+        offsetY?: number;
+        /**
+         * width of the parent node
+         */
+        parentWidth: number;
+        /**
+         * height of the parent node
+         */
+        parentHeight: number;
+        /**
+         * id of the container where its parent node is
+         */
+        parentContainerId: string;
+    }
+    /**
+     * This component is used to initiate a connection between two nodes. Simply
+     * drag the handle in a node and drop it in another node to create a connection.
+     */
+    export var GraphConnectorHandler: React.FC<IGraphConnectorHandlerProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IGraphContainerProps {
+    }
+    /**
+     * This component is just a simple container to keep the nodes and lines containers
+     * together
+     * @param props
+     * @returns
+     */
+    export var GraphContainer: React.FC<IGraphContainerProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /// <reference types="react" />
+    /**
+     * this context is used to pass callbacks to the graph nodes and connections
+     */
+    export interface IGraphContext {
+        onNodesConnected?: (sourceId: string, targetId: string) => void;
+        onLineSelected?: (lineId: string) => void;
+        onNodeSelected?: (nodeId: string) => void;
+    }
+    export var GraphContextManager: import("react").Context<IGraphContext>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * props for the GraphLine component
+     */
+    export interface IGraphLineProps {
+        /**
+         * id of the line. temporary lines can have no id
+         */
+        id?: string;
+        /**
+         * starting x pos of the line
+         */
+        x1: number;
+        /**
+         * ending x pos of the line
+         */
+        x2: number;
+        /**
+         * starting y pos of the line
+         */
+        y1: number;
+        /**
+         * ending y pos of the line
+         */
+        y2: number;
+        /**
+         * is the line selected
+         */
+        selected?: boolean;
+        /**
+         * does the line have a direction
+         */
+        directional?: boolean;
+    }
+    export const MarkerArrowId = "arrow";
+    /**
+     * This component draws a SVG line between two points, with an optional marker
+     * indicating direction
+     */
+    export var GraphLine: React.FC<IGraphLineProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * props for the GraphLineContainer
+     */
+    export interface IGraphLinesContainerProps {
+        /**
+         * id of the container
+         */
+        id: string;
+    }
+    /**
+     * this component handles the dragging of new connections
+     * @param props
+     * @returns
+     */
+    export var GraphLinesContainer: React.FC<IGraphLinesContainerProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IGraphNodeProps {
+        id: string;
+        name: string;
+        x: number;
+        y: number;
+        selected?: boolean;
+        width?: number;
+        height?: number;
+        highlighted?: boolean;
+        parentContainerId: string;
+    }
+    export var GraphNode: React.FC<IGraphNodeProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IGraphContainerProps {
+        onNodeMoved: (id: string, x: number, y: number) => void;
+        id: string;
+    }
+    /**
+     * This component contains all the nodes and handles their dragging
+     */
+    export var GraphNodesContainer: React.FC<IGraphContainerProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export type IVisualRecordsType = Record<string, {
+        x: number;
+        y: number;
+    }>;
+    export type IConnectionType = {
+        id: string;
+        sourceId: string;
+        targetId: string;
+    };
+    export type ICustomDataType = {
+        type: string;
+        value: any;
+    };
+    export type INodeType = {
+        id: string;
+        label: string;
+        customData?: ICustomDataType;
+    };
+    /**
+     * props for the node renderer
+     */
+    export interface INodeRendererProps {
+        /**
+         * array of connections between nodes
+         */
+        connections: IConnectionType[];
+        /**
+         * function called when a new connection is created
+         */
+        updateConnections: (sourceId: string, targetId: string) => void;
+        /**
+         * function called when a connection is deleted
+         */
+        deleteLine: (lineId: string) => void;
+        /**
+         * function called when a node is deleted
+         */
+        deleteNode: (nodeId: string) => void;
+        /**
+         * array of all nodes
+         */
+        nodes: INodeType[];
+        /**
+         * id of the node to highlight
+         */
+        highlightedNode?: Nullable<string>;
+        /**
+         * function to be called if a node is selected
+         */
+        selectNode?: (nodeId: Nullable<string>) => void;
+        /**
+         * id of this renderer
+         */
+        id: string;
+        /**
+         * optional list of custom components to be rendered inside nodes of
+         * a certain type
+         */
+        customComponents?: Record<string, React.ComponentType<any>>;
+    }
+    /**
+     * This component is a bridge between the app logic related to the graph, and the actual rendering
+     * of it. It manages the nodes' positions and selection states.
+     * @param props
+     * @returns
+     */
+    export const NodeRenderer: (props: INodeRendererProps) => JSX.Element;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * utility hook to assist using the graph context
+     * @returns
+     */
+    export const useGraphContext: () => IGraphContext;
+
+
+
 }
 declare module BABYLON {
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylonjs-gui-editor",
-    "version": "5.32.1",
+    "version": "5.33.0",
     "main": "babylon.guiEditor.max.js",
     "types": "babylon.guiEditor.module.d.ts",
     "files": [
@@ -14,8 +14,8 @@
         "clean": "rimraf dist && rimraf babylon*.*"
     },
     "dependencies": {
-        "babylonjs": "^5.32.1",
-        "babylonjs-gui": "^5.32.1"
+        "babylonjs": "^5.33.0",
+        "babylonjs-gui": "^5.33.0"
     },
     "devDependencies": {
         "@dev/build-tools": "1.0.0",