Skip to content
Permalink
Browse files

Fix several UI bugs

Associated with #6012
  • Loading branch information...
deltakosh committed May 24, 2019
1 parent 9ca323e commit d6eed320c1b187f641811e3c05c5fc7bb4c6339c
@@ -16,6 +16,7 @@ export class DefaultPortModel extends PortModel {
*/
public connection: Nullable<NodeMaterialConnectionPoint> = null;

public defaultValue: any;

static idCounter = 0;

@@ -41,18 +42,10 @@ export class DefaultPortModel extends PortModel {
return link;
}

getInputFromBlock() {

}

createLinkModel(): LinkModel {
return new DefaultLinkModel();
}

getValue: Function = () => {
return null;
}

static SortInputOutput(a: Nullable<DefaultPortModel>, b: Nullable<DefaultPortModel>) {
if (!a || !b) {
return null;
@@ -56,41 +56,46 @@ export class InputNodeWidget extends React.Component<InputNodeWidgetProps> {
}
}

let connection = this.props.node!.connection!;
let connection = this.props.node!.connection;
let value = "";
let name = port!.name;

if (connection.isAttribute) {
value = "mesh." + connection.name;
} else if (connection.isWellKnownValue) {
switch (connection.wellKnownValue) {
case NodeMaterialWellKnownValues.World:
value = "World";
break;
case NodeMaterialWellKnownValues.WorldView:
value = "World x View";
break;
case NodeMaterialWellKnownValues.WorldViewProjection:
value = "World x View x Projection";
break;
case NodeMaterialWellKnownValues.View:
value = "View";
break;
case NodeMaterialWellKnownValues.ViewProjection:
value = "View x Projection";
break;
case NodeMaterialWellKnownValues.Projection:
value = "Projection";
break;
case NodeMaterialWellKnownValues.Automatic:
value = "Automatic";
break;
if (connection) {
if (connection.isAttribute) {
value = "mesh." + connection.name;
} else if (connection.isWellKnownValue) {
switch (connection.wellKnownValue) {
case NodeMaterialWellKnownValues.World:
value = "World";
break;
case NodeMaterialWellKnownValues.WorldView:
value = "World x View";
break;
case NodeMaterialWellKnownValues.WorldViewProjection:
value = "World x View x Projection";
break;
case NodeMaterialWellKnownValues.View:
value = "View";
break;
case NodeMaterialWellKnownValues.ViewProjection:
value = "View x Projection";
break;
case NodeMaterialWellKnownValues.Projection:
value = "Projection";
break;
case NodeMaterialWellKnownValues.Automatic:
value = "Automatic";
break;
}
}
} else {
name = "Not connected input";
}

return (
<div className={"diagramBlock input" + (connection.isAttribute ? " attribute" : "")}>
<div className={"diagramBlock input" + (connection && connection.isAttribute ? " attribute" : "")}>
<div className="header">
{port!.name}
{name}
</div>
<div className="outputs">
{outputPorts}
@@ -3,7 +3,7 @@ import { Nullable } from 'babylonjs/types';
import { Texture } from 'babylonjs/Materials/Textures/texture';
import { DefaultNodeModel } from '../defaultNodeModel';
import { GlobalState } from '../../../globalState';
import { TexturePropertyTabComponent } from '../../../components/propertyTab/properties/texturePropertyTabComponent';
import { TexturePropertyTabComponent } from './texturePropertyTabComponent';
import { NodeCreationOptions, GraphEditor } from '../../../graphEditor';
import { DiagramModel } from 'storm-react-diagrams/dist/@types/src/models/DiagramModel';
import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/textureBlock';
@@ -12,10 +12,19 @@ import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/textureBl
* Texture node model which stores information about a node editor block
*/
export class TextureNodeModel extends DefaultNodeModel {
private _block: TextureBlock;

/**
* Texture for the node if it exists
*/
public texture: Nullable<Texture> = null;
public get texture(): Nullable<Texture> {
return this._block.texture.value;
}

public set texture(value: Nullable<Texture>) {
this._block.texture.value = value;
}

/**
* Constructs the node model
*/
@@ -30,9 +39,7 @@ export class TextureNodeModel extends DefaultNodeModel {
}

prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]) {
let textureBlock = options.nodeMaterialBlock as TextureBlock;

this.texture = textureBlock.texture.value;
this._block = options.nodeMaterialBlock as TextureBlock;

super.prepare(options, nodes, model, graphEditor, filterInputs);
}
@@ -5,7 +5,7 @@ import { Texture } from 'babylonjs/Materials/Textures/texture';
import { FileButtonLineComponent } from '../../../sharedComponents/fileButtonLineComponent';
import { Tools } from 'babylonjs/Misc/tools';
import { Engine } from 'babylonjs/Engines/engine';
import { TextureNodeModel } from '../../../components/diagram/texture/textureNodeModel';
import { TextureNodeModel } from './textureNodeModel';
import { TextLineComponent } from '../../../sharedComponents/textLineComponent';

interface ITexturePropertyTabComponentProps {
@@ -42,9 +42,9 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
extension = ".env";
}

(texture as Texture).updateURL(url, extension, () => this.forceUpdate());
(texture as Texture).updateURL(url, extension, () => this.props.globalState.onUpdateRequiredObservable.notifyObservers());
} else {
(texture as Texture).updateURL(url, null, () => this.forceUpdate());
(texture as Texture).updateURL(url, null, () => this.props.globalState.onUpdateRequiredObservable.notifyObservers());
}
}, undefined, true);
}
@@ -40,15 +40,18 @@ export class NodeListComponent extends React.Component<INodeListComponentProps>
Outputs: [VertexOutputBlock, FragmentOutputBlock],
Dual: [FogBlock],
Math: [AddBlock, ClampBlock, MatrixMultiplicationBlock, MultiplyBlock, Vector2TransformBlock, Vector3TransformBlock, Vector4TransformBlock],
Inputs: ["Vector2", "Vector3", "Matrix"],
Inputs: ["Vector2", "Vector3", "Vector4", "Color3", "Color4", "Matrix"],
}

// Create node menu
var blockMenu = []
for (var key in allBlocks) {
var blockList = (allBlocks as any)[key].map((b: any) => {
var label = typeof b === "string" ? b : b.prototype.getClassName().replace("Block", "")
var onClick = typeof b === "string" ? () => { this.props.onAddValueNode(b) } : () => { this.props.onAddNodeFromClass(b) };
var onClick = typeof b === "string" ? () => {
this.props.onAddValueNode(b);
this.props.globalState.onUpdateRequiredObservable.notifyObservers();
} : () => { this.props.onAddNodeFromClass(b) };
return <ButtonLineComponent key={label} label={label} onClick={onClick} />
})
blockMenu.push(
@@ -10,4 +10,5 @@ export class GlobalState {
onSelectionChangedObservable = new Observable<Nullable<DefaultNodeModel>>();
onRebuildRequiredObservable = new Observable<void>();
onResetRequiredObservable = new Observable<void>();
onUpdateRequiredObservable = new Observable<void>();
}
@@ -23,6 +23,7 @@ import { DefaultPortModel } from './components/diagram/defaultPortModel';
import { InputNodeFactory } from './components/diagram/input/inputNodeFactory';
import { InputNodeModel } from './components/diagram/input/inputNodeModel';
import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/textureBlock';
import { Vector2, Vector3, Vector4, Matrix, Color3, Color4 } from 'babylonjs/Maths/math';

require("storm-react-diagrams/dist/style.min.css");
require("./main.scss");
@@ -145,6 +146,10 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
}
});

this.props.globalState.onUpdateRequiredObservable.add(() => {
this.forceUpdate();
});

this.build();
}

@@ -159,7 +164,6 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
// Link is deleted
this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
var link = DefaultPortModel.SortInputOutput(e.link.sourcePort as DefaultPortModel, e.link.targetPort as DefaultPortModel);
console.log(link)
if (link) {
if (link.output.connection && link.input.connection) {
// Disconnect standard nodes
@@ -184,8 +188,13 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
if (link.output.connection && link.input.connection) {
link.output.connection.connectTo(link.input.connection)
} else if (link.input.connection) {
link.input.connection.value = link.output.getValue();

if (!link.output.connection) { // Input Node
let name = link.output.name;
link.output.syncWithNodeMaterialConnectionPoint(link.input.connection);
link.output.name = name;
(link.output.getNode() as InputNodeModel).connection = link.output.connection!;
link.input.connection.value = link.output.defaultValue;
}
}
if (this.props.globalState.nodeMaterial) {
this.props.globalState.nodeMaterial.build()
@@ -226,15 +235,15 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
var localNode = this.createNodeFromObject({ column: 0, nodeMaterialBlock: block })
var widget = (this.refs["test"] as DiagramWidget);

this.forceUpdate()
this.forceUpdate();

// This is needed to fix link offsets when created, (eg. create a fog block)
// Todo figure out how to correct this without this
setTimeout(() => {
widget.startFiringAction(new MoveCanvasAction(1, 0, this._model));
}, 500);

return localNode
return localNode;
}

addValueNode(type: string, column = 0, connection?: NodeMaterialConnectionPoint) {
@@ -243,6 +252,29 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {

localNode.addPort(outPort);

if (!connection) {
switch (type) {
case "Vector2":
outPort.defaultValue = Vector2.Zero();
break;
case "Vector3":
outPort.defaultValue = Vector3.Zero();
break;
case "Vector4":
outPort.defaultValue = Vector4.Zero();
break;
case "Matrix":
outPort.defaultValue = Matrix.Identity();
break;
case "Color3":
outPort.defaultValue = Color3.White();
break;
case "Color4":
outPort.defaultValue = new Color4(1, 1, 1, 1);
break;
}
}

return localNode;
}

0 comments on commit d6eed32

Please sign in to comment.
You can’t perform that action at this time.