@babylonjs/gui-editor 5.32.1 → 5.33.0

package/dist/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/core/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" />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/gui-editor",
-    "version": "5.32.1",
+    "version": "5.33.0",
     "main": "dist/babylon.guiEditor.max.js",
     "module": "dist/babylon.guiEditor.max.js",
     "esnext": "dist/babylon.guiEditor.max.js",
@@ -24,8 +24,8 @@
         "@types/react-dom": ">=16.0.9"
     },
     "devDependencies": {
-        "@babylonjs/core": "^5.32.1",
-        "@babylonjs/gui": "^5.32.1",
+        "@babylonjs/core": "^5.33.0",
+        "@babylonjs/gui": "^5.33.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "rimraf": "^3.0.2",