@babylonjs/node-editor 5.0.0-alpha.59 → 5.0.0-alpha.62

package/babylon.nodeEditor.module.d.ts

@@ -81,8 +81,11 @@ declare module "@babylonjs/node-editor/blockTools" {
     import { SceneDepthBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/sceneDepthBlock';
     import { ImageSourceBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/imageSourceBlock';
     import { CloudBlock } from '@babylonjs/core/Materials/Node/Blocks/cloudBlock';
+    import { VoronoiNoiseBlock } from '@babylonjs/core/Materials/Node/Blocks/voronoiNoiseBlock';
+    import { ScreenSpaceBlock } from '@babylonjs/core/Materials/Node/Blocks/Fragment/screenSpaceBlock';
+    import { TwirlBlock } from '@babylonjs/core/Materials/Node/Blocks/Fragment/twirlBlock';
     export class BlockTools {
-        static GetBlockFromString(data: string, scene: Scene, nodeMaterial: NodeMaterial): CloudBlock | MatrixBuilderBlock | DesaturateBlock | RefractBlock | ReflectBlock | DerivativeBlock | Rotate2dBlock | NormalBlendBlock | WorleyNoise3DBlock | SimplexPerlin3DBlock | BonesBlock | InstancesBlock | MorphTargetsBlock | DiscardBlock | ImageProcessingBlock | ColorMergerBlock | VectorMergerBlock | ColorSplitterBlock | VectorSplitterBlock | TextureBlock | ReflectionTextureBlock | LightBlock | FogBlock | VertexOutputBlock | FragmentOutputBlock | AddBlock | ClampBlock | ScaleBlock | CrossBlock | DotBlock | PowBlock | MultiplyBlock | TransformBlock | TrigonometryBlock | RemapBlock | NormalizeBlock | FresnelBlock | LerpBlock | NLerpBlock | DivideBlock | SubtractBlock | ModBlock | StepBlock | SmoothStepBlock | OneMinusBlock | ReciprocalBlock | ViewDirectionBlock | LightInformationBlock | MaxBlock | MinBlock | LengthBlock | DistanceBlock | NegateBlock | PerturbNormalBlock | RandomNumberBlock | ReplaceColorBlock | PosterizeBlock | ArcTan2Block | GradientBlock | FrontFacingBlock | WaveBlock | InputBlock | PBRMetallicRoughnessBlock | SheenBlock | AnisotropyBlock | ReflectionBlock | ClearCoatBlock | RefractionBlock | SubSurfaceBlock | CurrentScreenBlock | ParticleTextureBlock | ParticleRampGradientBlock | ParticleBlendMultiplyBlock | FragCoordBlock | ScreenSizeBlock | SceneDepthBlock | ConditionalBlock | ImageSourceBlock | null;
+        static GetBlockFromString(data: string, scene: Scene, nodeMaterial: NodeMaterial): TwirlBlock | VoronoiNoiseBlock | ScreenSpaceBlock | CloudBlock | MatrixBuilderBlock | DesaturateBlock | RefractBlock | ReflectBlock | DerivativeBlock | Rotate2dBlock | NormalBlendBlock | WorleyNoise3DBlock | SimplexPerlin3DBlock | BonesBlock | InstancesBlock | MorphTargetsBlock | DiscardBlock | ImageProcessingBlock | ColorMergerBlock | VectorMergerBlock | ColorSplitterBlock | VectorSplitterBlock | TextureBlock | ReflectionTextureBlock | LightBlock | FogBlock | VertexOutputBlock | FragmentOutputBlock | AddBlock | ClampBlock | ScaleBlock | CrossBlock | DotBlock | PowBlock | MultiplyBlock | TransformBlock | TrigonometryBlock | RemapBlock | NormalizeBlock | FresnelBlock | LerpBlock | NLerpBlock | DivideBlock | SubtractBlock | ModBlock | StepBlock | SmoothStepBlock | OneMinusBlock | ReciprocalBlock | ViewDirectionBlock | LightInformationBlock | MaxBlock | MinBlock | LengthBlock | DistanceBlock | NegateBlock | PerturbNormalBlock | RandomNumberBlock | ReplaceColorBlock | PosterizeBlock | ArcTan2Block | GradientBlock | FrontFacingBlock | WaveBlock | InputBlock | PBRMetallicRoughnessBlock | SheenBlock | AnisotropyBlock | ReflectionBlock | ClearCoatBlock | RefractionBlock | SubSurfaceBlock | CurrentScreenBlock | ParticleTextureBlock | ParticleRampGradientBlock | ParticleBlendMultiplyBlock | FragCoordBlock | ScreenSizeBlock | SceneDepthBlock | ConditionalBlock | ImageSourceBlock | null;
         static GetColorFromConnectionNodeType(type: NodeMaterialBlockConnectionPointTypes): string;
         static GetConnectionNodeTypeFromString(type: string): NodeMaterialBlockConnectionPointTypes.Float | NodeMaterialBlockConnectionPointTypes.Vector2 | NodeMaterialBlockConnectionPointTypes.Vector3 | NodeMaterialBlockConnectionPointTypes.Vector4 | NodeMaterialBlockConnectionPointTypes.Color3 | NodeMaterialBlockConnectionPointTypes.Color4 | NodeMaterialBlockConnectionPointTypes.Matrix | NodeMaterialBlockConnectionPointTypes.AutoDetect;
         static GetStringFromConnectionNodeType(type: NodeMaterialBlockConnectionPointTypes): "Float" | "Vector2" | "Vector3" | "Vector4" | "Matrix" | "Color3" | "Color4" | "";
@@ -439,12 +442,12 @@ declare module "@babylonjs/node-editor/diagram/nodeLink" {
 declare module "@babylonjs/node-editor/diagram/graphCanvas" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { NodeMaterialBlock } from '@babylonjs/core/Materials/Node/nodeMaterialBlock';
+    import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
     import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-    import { Nullable } from '@babylonjs/core/types';
+    import { Nullable } from "@babylonjs/core/types";
     import { NodeLink } from "@babylonjs/node-editor/diagram/nodeLink";
     import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
-    import { NodeMaterialConnectionPoint } from '@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint';
+    import { NodeMaterialConnectionPoint } from "@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint";
     import { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
     import { IEditorData, IFrameData } from "@babylonjs/node-editor/nodeLocationInfo";
     import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
@@ -587,7 +590,7 @@ declare module "@babylonjs/node-editor/sharedComponents/floatLineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/floatPropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IFloatPropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -693,7 +696,7 @@ declare module "@babylonjs/node-editor/sharedComponents/vector2LineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/vector2PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IVector2PropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -779,7 +782,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/colorPicker/colorPicke
 }
 declare module "@babylonjs/node-editor/sharedComponents/colorPickerComponent" {
     import * as React from "react";
-    import { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
+    import { Color4, Color3 } from "@babylonjs/core/Maths/math.color";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
     export interface IColorPickerComponentProps {
         value: Color4 | Color3;
@@ -839,7 +842,7 @@ declare module "@babylonjs/node-editor/sharedComponents/color3LineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/color3PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IColor3PropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -888,7 +891,7 @@ declare module "@babylonjs/node-editor/sharedComponents/vector3LineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/vector3PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IVector3PropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -939,7 +942,7 @@ declare module "@babylonjs/node-editor/sharedComponents/vector4LineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/vector4PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IVector4PropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -1020,7 +1023,7 @@ declare module "@babylonjs/node-editor/sharedComponents/matrixLineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/matrixPropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IMatrixPropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -1145,10 +1148,10 @@ declare module "@babylonjs/node-editor/diagram/properties/genericNodePropertyCom
     export class GenericPropertyTabComponent extends React.Component<IPropertyComponentProps> {
         constructor(props: IPropertyComponentProps);
         forceRebuild(notifiers?: {
-            "rebuild"?: boolean;
-            "update"?: boolean;
-            "activatePreviewCommand"?: boolean;
-            "callback"?: (scene: Scene) => void;
+            rebuild?: boolean;
+            update?: boolean;
+            activatePreviewCommand?: boolean;
+            callback?: (scene: Scene) => void;
         }): void;
         render(): JSX.Element;
     }
@@ -1190,7 +1193,7 @@ declare module "@babylonjs/node-editor/sharedComponents/color4LineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/color4PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IColor4PropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -1222,9 +1225,9 @@ declare module "@babylonjs/node-editor/diagram/properties/transformNodePropertyC
     }
 }
 declare module "@babylonjs/node-editor/diagram/properties/gradientStepComponent" {
-    import * as React from 'react';
+    import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock';
+    import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock";
     interface IGradientStepComponentProps {
         globalState: GlobalState;
         step: GradientBlockColorStep;
@@ -1258,7 +1261,7 @@ declare module "@babylonjs/node-editor/sharedComponents/buttonLineComponent" {
 }
 declare module "@babylonjs/node-editor/diagram/properties/gradientNodePropertyComponent" {
     import * as React from "react";
-    import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock';
+    import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock";
     import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
     export class GradientPropertyTabComponent extends React.Component<IPropertyComponentProps> {
         private onValueChangedObserver;
@@ -1305,12 +1308,12 @@ declare module "@babylonjs/node-editor/sharedComponents/fileButtonLineComponent"
 declare module "@babylonjs/node-editor/diagram/properties/texturePropertyTabComponent" {
     import * as React from "react";
     import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
-    import { ReflectionTextureBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/reflectionTextureBlock';
-    import { ReflectionBlock } from '@babylonjs/core/Materials/Node/Blocks/PBR/reflectionBlock';
-    import { RefractionBlock } from '@babylonjs/core/Materials/Node/Blocks/PBR/refractionBlock';
-    import { TextureBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/textureBlock';
-    import { CurrentScreenBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/currentScreenBlock';
-    import { ParticleTextureBlock } from '@babylonjs/core/Materials/Node/Blocks/Particle/particleTextureBlock';
+    import { ReflectionTextureBlock } from "@babylonjs/core/Materials/Node/Blocks/Dual/reflectionTextureBlock";
+    import { ReflectionBlock } from "@babylonjs/core/Materials/Node/Blocks/PBR/reflectionBlock";
+    import { RefractionBlock } from "@babylonjs/core/Materials/Node/Blocks/PBR/refractionBlock";
+    import { TextureBlock } from "@babylonjs/core/Materials/Node/Blocks/Dual/textureBlock";
+    import { CurrentScreenBlock } from "@babylonjs/core/Materials/Node/Blocks/Dual/currentScreenBlock";
+    import { ParticleTextureBlock } from "@babylonjs/core/Materials/Node/Blocks/Particle/particleTextureBlock";
     type ReflectionTexture = ReflectionTextureBlock | ReflectionBlock | RefractionBlock;
     type AnyTexture = TextureBlock | ReflectionTexture | CurrentScreenBlock | ParticleTextureBlock;
     export class TexturePropertyTabComponent extends React.Component<IPropertyComponentProps, {
@@ -1356,7 +1359,7 @@ declare module "@babylonjs/node-editor/diagram/properties/conditionalNodePropert
 declare module "@babylonjs/node-editor/diagram/properties/imageSourcePropertyTabComponent" {
     import * as React from "react";
     import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
-    import { ImageSourceBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/imageSourceBlock';
+    import { ImageSourceBlock } from "@babylonjs/core/Materials/Node/Blocks/Dual/imageSourceBlock";
     export class ImageSourcePropertyTabComponent extends React.Component<IPropertyComponentProps, {
         isEmbedded: boolean;
     }> {
@@ -1740,6 +1743,7 @@ declare module "@babylonjs/node-editor/sharedComponents/draggableLineWithButtonC
         iconImage: any;
         onIconClick: (value: string) => void;
         iconTitle: string;
+        lenSuffixToRemove?: number;
     }
     export class DraggableLineWithButtonComponent extends React.Component<IDraggableLineWithButtonComponent> {
         constructor(props: IDraggableLineWithButtonComponent);
@@ -1779,18 +1783,21 @@ declare module "@babylonjs/node-editor/components/nodeList/nodeListComponent" {
         private _onResetRequiredObserver;
         private static _Tooltips;
         private _customFrameList;
+        private _customBlockList;
         constructor(props: INodeListComponentProps);
         componentWillUnmount(): void;
         filterContent(filter: string): void;
         loadCustomFrame(file: File): void;
         removeItem(value: string): void;
+        loadCustomBlock(file: File): void;
+        removeCustomBlock(value: string): void;
         render(): JSX.Element;
     }
 }
 declare module "@babylonjs/node-editor/components/propertyTab/inputsPropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IInputsPropertyTabComponentProps {
         globalState: GlobalState;
         inputs: InputBlock[];
@@ -1857,10 +1864,10 @@ declare module "@babylonjs/node-editor/diagram/properties/nodePortPropertyCompon
 declare module "@babylonjs/node-editor/components/propertyTab/propertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { Nullable } from '@babylonjs/core/types';
+    import { Nullable } from "@babylonjs/core/types";
     import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
     import { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
     import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
     interface IPropertyTabComponentProps {
@@ -2002,8 +2009,8 @@ declare module "@babylonjs/node-editor/sharedComponents/popup" {
 declare module "@babylonjs/node-editor/graphEditor" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { NodeMaterialBlock } from '@babylonjs/core/Materials/Node/nodeMaterialBlock';
-    import { Nullable } from '@babylonjs/core/types';
+    import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+    import { Nullable } from "@babylonjs/core/types";
     import { IEditorData } from "@babylonjs/node-editor/nodeLocationInfo";
     import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
     import { IInspectorOptions } from "@babylonjs/core/Debug/debugLayer";
@@ -2199,7 +2206,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/numericInputComp
 }
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/colorPickerComponent" {
     import * as React from "react";
-    import { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
+    import { Color4, Color3 } from "@babylonjs/core/Maths/math.color";
     export interface IColorPickerComponentProps {
         value: Color4 | Color3;
         linearHint?: boolean;
@@ -2271,7 +2278,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/color3LineCompon
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
-    import { Color3 } from '@babylonjs/core/Maths/math.color';
+    import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
     import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     export interface IColor3LineComponentProps {
         label: string;
@@ -2282,25 +2289,31 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/color3LineCompon
         icon?: string;
         lockObject?: LockObject;
         iconLabel?: string;
+        onValueChange?: (value: string) => void;
     }
     export class Color3LineComponent extends React.Component<IColor3LineComponentProps, {
         isExpanded: boolean;
-        color: Color3;
+        color: Color3 | Color4;
+        colorText: string;
     }> {
         private _localChange;
         constructor(props: IColor3LineComponentProps);
+        private convertToColor3;
         shouldComponentUpdate(nextProps: IColor3LineComponentProps, nextState: {
-            color: Color3;
+            color: Color3 | Color4;
+            colorText: string;
         }): boolean;
-        setPropertyValue(newColor: Color3): void;
+        setPropertyValue(newColor: Color3 | Color4, newColorText: string): void;
         onChange(newValue: string): void;
         switchExpandState(): void;
-        raiseOnPropertyChanged(previousValue: Color3): void;
+        raiseOnPropertyChanged(previousValue: Color3 | Color4): void;
         updateStateR(value: number): void;
         updateStateG(value: number): void;
         updateStateB(value: number): void;
         copyToClipboard(): void;
         convert(colorString: string): void;
+        private _colorStringSaved;
+        private _colorPickerOpen;
         private _colorString;
         render(): JSX.Element;
     }
@@ -2514,7 +2527,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/iSelectedLineCon
     }
 }
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/iconButtonLineComponent" {
-    import * as React from 'react';
+    import * as React from "react";
     export interface IIconButtonLineComponentProps {
         icon: string;
         onClick: () => void;

package/package.json

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