@babylonjs/node-editor 5.0.0-rc.1 → 5.0.0-rc.4

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;
@@ -822,21 +821,16 @@ declare module "@babylonjs/node-editor/sharedComponents/color3LineComponent" {
         onChange?: () => void;
         globalState: GlobalState;
     }
-    export class Color3LineComponent extends React.Component<IColor3LineComponentProps, {
+    interface IColor3LineComponentState {
         isExpanded: boolean;
-        color: Color3 | Color4;
-    }> {
-        private _localChange;
+    }
+    export class Color3LineComponent extends React.Component<IColor3LineComponentProps, IColor3LineComponentState> {
         constructor(props: IColor3LineComponentProps);
-        shouldComponentUpdate(nextProps: IColor3LineComponentProps, nextState: {
-            color: Color3 | Color4;
-        }): boolean;
         onChange(newValue: string): void;
         switchExpandState(): void;
-        raiseOnPropertyChanged(previousValue: Color3 | Color4): void;
-        updateStateR(value: number): void;
-        updateStateG(value: number): void;
-        updateStateB(value: number): void;
+        updateColor(newValue: Color3 | Color4): void;
+        modifyColor(modifier: (previous: Color3 | Color4) => void): void;
+        getCurrentColor(): Color3 | Color4;
         copyToClipboard(): void;
         render(): JSX.Element;
     }
@@ -1174,20 +1168,13 @@ declare module "@babylonjs/node-editor/sharedComponents/color4LineComponent" {
     }
     export class Color4LineComponent extends React.Component<IColor4LineComponentProps, {
         isExpanded: boolean;
-        color: Color4;
     }> {
-        private _localChange;
         constructor(props: IColor4LineComponentProps);
-        shouldComponentUpdate(nextProps: IColor4LineComponentProps, nextState: {
-            color: Color4;
-        }): boolean;
         onChange(newValue: string): void;
         switchExpandState(): void;
-        raiseOnPropertyChanged(previousValue: Color4): void;
-        updateStateR(value: number): void;
-        updateStateG(value: number): void;
-        updateStateB(value: number): void;
-        updateStateA(value: number): void;
+        updateColor(newValue: Color4): void;
+        modifyColor(modifier: (previous: Color4) => void): void;
+        getCurrentColor(): Color4;
         copyToClipboard(): void;
         render(): JSX.Element;
     }
@@ -1680,12 +1667,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 +1700,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 +2040,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 +2052,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 +2080,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;
@@ -2352,7 +2354,6 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/colorLineCompone
     interface IColorLineComponentState {
         isExpanded: boolean;
         color: Color4;
-        colorString: string;
     }
     export class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
         constructor(props: IColorLineComponentProps);
@@ -2360,20 +2361,14 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/colorLineCompone
         getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
             children?: React.ReactNode;
         }>): Color4;
-        getValueAsString(props?: Readonly<IColorLineComponentProps> & Readonly<{
-            children?: React.ReactNode;
-        }>): string;
         setColorFromString(colorString: string): void;
-        setColor(color: Color4): void;
-        updateColor(newColor: Color4): void;
+        setColor(newColor: Color4): void;
         switchExpandState(): void;
         updateStateR(value: number): void;
         updateStateG(value: number): void;
         updateStateB(value: number): void;
         updateStateA(value: number): void;
         copyToClipboard(): void;
-        get colorString(): string;
-        set colorString(_: string);
         private convertToColor;
         private toColor3;
         render(): JSX.Element;

package/package.json

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