@babylonjs/node-editor 5.0.0-rc.0 → 5.0.0-rc.3

package/babylon.nodeEditor.module.d.ts

@@ -102,6 +102,7 @@ declare module "@babylonjs/node-editor/components/log/logComponent" {
     export class LogEntry {
         message: string;
         isError: boolean;
+        time: Date;
         constructor(message: string, isError: boolean);
     }
     export class LogComponent extends React.Component<ILogComponentProps, {
@@ -191,33 +192,6 @@ declare module "@babylonjs/node-editor/sharedUiComponents/stringTools" {
         static DownloadAsFile(document: HTMLDocument, content: string, filename: string): void;
     }
 }
-declare module "@babylonjs/node-editor/diagram/frameNodePort" {
-    import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
-    import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-    import { FramePortPosition } from "@babylonjs/node-editor/diagram/graphFrame";
-    import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
-    import { Observable } from '@babylonjs/core/Misc/observable';
-    import { Nullable } from '@babylonjs/core/types';
-    import { NodeMaterialConnectionPoint } from '@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint';
-    export class FrameNodePort extends NodePort {
-        connectionPoint: NodeMaterialConnectionPoint;
-        node: GraphNode;
-        private _parentFrameId;
-        private _isInput;
-        private _framePortPosition;
-        private _framePortId;
-        private _onFramePortPositionChangedObservable;
-        get parentFrameId(): number;
-        get onFramePortPositionChangedObservable(): Observable<FrameNodePort>;
-        get isInput(): boolean;
-        get framePortId(): number;
-        get framePortPosition(): FramePortPosition;
-        set framePortPosition(position: FramePortPosition);
-        constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number);
-        static CreateFrameNodePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number): FrameNodePort;
-    }
-}
 declare module "@babylonjs/node-editor/diagram/graphFrame" {
     import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
     import { GraphCanvasComponent } from "@babylonjs/node-editor/diagram/graphCanvas";
@@ -314,7 +288,7 @@ declare module "@babylonjs/node-editor/diagram/graphFrame" {
         private _onDown;
         move(newX: number, newY: number, align?: boolean): void;
         private _onUp;
-        private _moveFrame;
+        _moveFrame(offsetX: number, offsetY: number): void;
         private _onMove;
         moveFramePortUp(nodePort: FrameNodePort): void;
         private _movePortUp;
@@ -373,18 +347,42 @@ declare module "@babylonjs/node-editor/diagram/graphFrame" {
         }): GraphFrame;
     }
 }
+declare module "@babylonjs/node-editor/diagram/frameNodePort" {
+    import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
+    import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
+    import { FramePortPosition } from "@babylonjs/node-editor/diagram/graphFrame";
+    import { GlobalState } from "@babylonjs/node-editor/globalState";
+    import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
+    import { Observable } from '@babylonjs/core/Misc/observable';
+    import { Nullable } from '@babylonjs/core/types';
+    import { NodeMaterialConnectionPoint } from '@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint';
+    export class FrameNodePort extends NodePort {
+        connectionPoint: NodeMaterialConnectionPoint;
+        node: GraphNode;
+        private _parentFrameId;
+        private _isInput;
+        private _framePortPosition;
+        private _framePortId;
+        private _onFramePortPositionChangedObservable;
+        get parentFrameId(): number;
+        get onFramePortPositionChangedObservable(): Observable<FrameNodePort>;
+        get isInput(): boolean;
+        get framePortId(): number;
+        get framePortPosition(): FramePortPosition;
+        set framePortPosition(position: FramePortPosition);
+        constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number);
+        static CreateFrameNodePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number): FrameNodePort;
+    }
+}
 declare module "@babylonjs/node-editor/diagram/nodePort" {
     import { NodeMaterialConnectionPoint } from '@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint';
-    import { GlobalState } from "@babylonjs/node-editor/globalState";
+    import { GlobalState, ISelectionChangedOptions } from "@babylonjs/node-editor/globalState";
     import { Nullable } from '@babylonjs/core/types';
     import { Observer } from '@babylonjs/core/Misc/observable';
     import { Vector2 } from '@babylonjs/core/Maths/math.vector';
     import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
     import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-    import { NodeLink } from "@babylonjs/node-editor/diagram/nodeLink";
-    import { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
     import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
-    import { FramePortData } from "@babylonjs/node-editor/diagram/graphCanvas";
     export class NodePort {
         connectionPoint: NodeMaterialConnectionPoint;
         node: GraphNode;
@@ -393,7 +391,7 @@ declare module "@babylonjs/node-editor/diagram/nodePort" {
         protected _globalState: GlobalState;
         protected _portLabelElement: Element;
         protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
-        protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
+        protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;
         protected _exposedOnFrame: boolean;
         delegatedPort: Nullable<FrameNodePort>;
         get element(): HTMLDivElement;
@@ -437,7 +435,7 @@ declare module "@babylonjs/node-editor/diagram/nodeLink" {
         get nodeB(): GraphNode | undefined;
         update(endX?: number, endY?: number, straight?: boolean): void;
         constructor(graphCanvas: GraphCanvasComponent, portA: NodePort, nodeA: GraphNode, portB?: NodePort, nodeB?: GraphNode);
-        onClick(): void;
+        onClick(evt: MouseEvent): void;
         dispose(notify?: boolean): void;
     }
 }
@@ -490,7 +488,7 @@ declare module "@babylonjs/node-editor/diagram/graphCanvas" {
         private _candidatePort;
         private _gridSize;
         private _selectionBox;
-        private _selectedFrame;
+        private _selectedFrames;
         private _frameCandidate;
         private _frames;
         private _altKeyIsPressed;
@@ -512,7 +510,7 @@ declare module "@babylonjs/node-editor/diagram/graphCanvas" {
         set y(value: number);
         get selectedNodes(): GraphNode[];
         get selectedLink(): Nullable<NodeLink>;
-        get selectedFrame(): Nullable<GraphFrame>;
+        get selectedFrames(): GraphFrame[];
         get selectedPort(): Nullable<NodePort>;
         get canvasContainer(): HTMLDivElement;
         get hostCanvas(): HTMLDivElement;
@@ -538,6 +536,7 @@ declare module "@babylonjs/node-editor/diagram/graphCanvas" {
         onWheel(evt: React.WheelEvent): void;
         zoomToFit(): void;
         processCandidatePort(): void;
+        connectNodes(nodeA: GraphNode, pointA: NodeMaterialConnectionPoint, nodeB: GraphNode, pointB: NodeMaterialConnectionPoint): void;
         processEditorData(editorData: IEditorData): void;
         addFrame(frameData: IFrameData): void;
         render(): JSX.Element;
@@ -1680,12 +1679,17 @@ declare module "@babylonjs/node-editor/globalState" {
     import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
     import { FramePortData } from "@babylonjs/node-editor/diagram/graphCanvas";
     import { NodeMaterialModes } from '@babylonjs/core/Materials/Node/Enums/nodeMaterialModes';
+    export class ISelectionChangedOptions {
+        selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>;
+        forceKeepSelection?: boolean;
+    }
     export class GlobalState {
         nodeMaterial: NodeMaterial;
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         hostWindow: Window;
-        onSelectionChangedObservable: Observable<Nullable<GraphFrame | GraphNode | NodePort | NodeLink | FramePortData>>;
+        onNewNodeCreatedObservable: Observable<GraphNode>;
+        onSelectionChangedObservable: Observable<Nullable<ISelectionChangedOptions>>;
         onRebuildRequiredObservable: Observable<boolean>;
         onBuiltObservable: Observable<void>;
         onResetRequiredObservable: Observable<void>;
@@ -1708,6 +1712,12 @@ declare module "@babylonjs/node-editor/globalState" {
         onImportFrameObservable: Observable<any>;
         onGraphNodeRemovalObservable: Observable<GraphNode>;
         onPopupClosedObservable: Observable<void>;
+        onNewBlockRequiredObservable: Observable<{
+            type: string;
+            targetX: number;
+            targetY: number;
+            needRepositioning?: boolean | undefined;
+        }>;
         onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;
         onGridSizeChanged: Observable<void>;
         onExposePortOnFrameObservable: Observable<GraphNode>;
@@ -2042,8 +2052,11 @@ declare module "@babylonjs/node-editor/graphEditor" {
         embedHostWidth?: string;
     }
     export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
-        private readonly NodeWidth;
+        static readonly NodeWidth: number;
+        private _graphCanvasRef;
+        private _diagramContainerRef;
         private _graphCanvas;
+        private _diagramContainer;
         private _startX;
         private _moveInProgress;
         private _leftWidth;
@@ -2051,7 +2064,7 @@ declare module "@babylonjs/node-editor/graphEditor" {
         private _blocks;
         private _previewManager;
         private _copiedNodes;
-        private _copiedFrame;
+        private _copiedFrames;
         private _mouseLocationX;
         private _mouseLocationY;
         private _onWidgetKeyUpPointer;
@@ -2079,7 +2092,8 @@ declare module "@babylonjs/node-editor/graphEditor" {
         onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
         resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void;
         buildColumnLayout(): string;
-        emitNewBlock(event: React.DragEvent<HTMLDivElement>): void;
+        emitNewBlock(blockType: string, targetX: number, targetY: number): void;
+        dropNewBlock(event: React.DragEvent<HTMLDivElement>): void;
         handlePopUp: () => void;
         handleClosingPopUp: () => void;
         initiatePreviewArea: (canvas?: HTMLCanvasElement) => void;
@@ -2196,8 +2210,6 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/checkBoxLineComp
         isDisabled?: boolean;
         isConflict: boolean;
     }> {
-        private static _UniqueIdSeed;
-        private _uniqueId;
         private _localChange;
         constructor(props: ICheckBoxLineComponentProps);
         shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
@@ -2296,7 +2308,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/textInputLineCom
     import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
     import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface ITextInputLineComponentProps {
-        label: string;
+        label?: string;
         lockObject: LockObject;
         target?: any;
         propertyName?: string;
@@ -2611,6 +2623,16 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/iconButtonLineCo
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/iconComponent" {
+    import * as React from "react";
+    interface IIconComponentProps {
+        icon: string;
+        label?: string;
+    }
+    export class IconComponent extends React.Component<IIconComponentProps> {
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/indentedTextLineComponent" {
     import * as React from "react";
     interface IIndentedTextLineComponentProps {

package/package.json

@@ -4,14 +4,14 @@
     },
     "name": "@babylonjs/node-editor",
     "description": "The Babylon.js node material editor.",
-    "version": "5.0.0-rc.0",
+    "version": "5.0.0-rc.3",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "@babylonjs/core": "5.0.0-rc.0",
+        "@babylonjs/core": "5.0.0-rc.3",
         "tslib": "^2.3.1"
     },
     "files": [